Bỏ qua đến nội dung chính

Comment utiliser le module des barres animées sur Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bộ đếm hoạt ảnh là cách thú vị và hiệu quả để hiển thị số liệu thống kê cho khách truy cập của bạn. Hoạt ảnh được kích hoạt bởi tải chậm để làm cho điều hướng trên trang thực sự thú vị. Bạn có thể đặt bao nhiêu quầy như bạn muốn bên trong mô-đun này.

mô-đun mét divi.png

Cách thêm mô-đun bộ đếm thanh vào trang của bạn

Trước khi bạn có thể thêm mô-đun bộ đếm thanh vào trang của mình, trước tiên bạn sẽ cần truy cập Divi Builder. Khi chủ đề Divi được cài đặt trên trang web của bạn, bạn sẽ thấy một nút Sử dụng Divi Builder phía trên nhà xuất bản mỗi khi bạn tạo trang mới.

Bằng cách nhấn vào nút này, bạn sẽ có thể kích hoạt Divi Builder, nó sẽ cho phép bạn truy cập vào tất cả các mô-đun Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo trong chế độ trực quan.

Bạn cũng có thể nhấp vào nút Sử dụng Visual Builder khi bạn đang duyệt trang web của mình trên giao diện người dùng, nếu bạn đăng nhập vào trang tổng quan WordPress của mình.

sử dụng divi builder

Khi đã nhập vào Visual Builder, bạn có thể nhấp vào nút dấu cộng màu xám để thêm mô-đun mới vào trang của bạn. Các mô đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn bắt đầu một trang mới, trước tiên đừng quên thêm một dòng vào trang của bạn. .

quầy bar divi.png

Tìm mô-đun bộ đếm thanh trong danh sách mô-đun và nhấp vào nó để thêm nó vào trang của bạn. Danh sách các mô-đun có thể tìm kiếm được, có nghĩa là bạn cũng có thể nhập từ "Quầy Bar", sau đó nhấn enter để tìm kiếm và tự động thêm mô-đun bộ đếm quầy bar!

Khi module được thêm vào, bạn sẽ được chào đón với danh sách các tùy chọn của module. Các tùy chọn này được chia thành ba nhóm chính: Nội dung , Conception et tiên tiến .

Trường hợp sử dụng để hiển thị các mục tiêu của một dự án trong một nghiên cứu điển hình

Một trong những cách tốt nhất để sử dụng mô-đun Bộ đếm Bar là minh họa số liệu thống kê cho các nghiên cứu điển hình. Đơn giản chỉ cần xác định mỗi thanh với một chức năng dự án cụ thể hoặc mục đích để người dùng biết những dịch vụ được bao gồm trong dự án. Trong ví dụ này, tôi sử dụng mô-đun thanh để hiển thị ba mục tiêu của dự án.

hiển thị 3 project goals.jpg

Như bạn có thể thấy, đầu trang bao gồm ba mục tiêu của dự án bằng cách sử dụng mô-đun "Quầy Bar" và phần cuối của trang bao gồm các kết quả của nghiên cứu điển hình sử dụng mô-đun "Bộ đếm". Số ».

Chúng ta hãy bắt đầu.

Sử dụng trình tạo hình ảnh để thêm phần chuẩn với bố cục đầy đủ chiều rộng (cột 1). Sau đó thêm một mô-đun quầy bar vào dòng.

Cập nhật các thông số của quầy quầy bar như sau:

Tùy chọn nội dung

Tỷ lệ sử dụng: BẬT
Màu nền: #dddddd
Màu nền của thanh: # e07a5e

Tùy chọn thiết kế

Màu văn bản: Tối
Phông chữ tiêu đề: mặc định
Kích thước phông chữ tiêu đề: 20px
Màu văn bản tiêu đề: # 405c60
Chiều cao dòng tiêu đề: 2em
Tỷ lệ phần trăm phông chữ: Mặc định
Phần trăm phông chữ: 16px
Tỷ lệ phần trăm Màu văn bản: #ffffff
Chiều cao dòng phần trăm: 2.5em

thêm bộ đếm đếm divi.png

Quay lại tab Nội dung và chọn + Thêm mục mới để thêm thanh đếm đầu tiên vào mô-đun.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

Cập nhật các cài đặt mô-đun riêng lẻ như sau:

Tab nội dung

Title: Tiêu đề của tôi
Phần trăm: 80

Lưu cài đặt

số thanh tuỳ biến divi.png

Thêm hai quầy bar bổ sung vào mô-đun và cung cấp cho mỗi tiêu đề và phần trăm.

bar counter divi danh sách bars.png

Vậy là xong!

kết quả cuối cùng divi module barre.png

Tùy chọn nội dung truy cập thanh

Trong tab Nội dung, bạn sẽ tìm thấy tất cả các phần tử nội dung của mô-đun, chẳng hạn như văn bản, hình ảnh và biểu tượng. Tất cả các điều khiển đó cái gì xuất hiện trong mô-đun của bạn sẽ luôn nằm trong tab này.

thanh nội dung tùy chọn thanh divi.png

Tỷ lệ sử dụng

Theo mặc định, tỷ lệ phần trăm được hiển thị trong thanh đếm màu. Bạn có thể tắt văn bản này bằng cách sử dụng cài đặt này, cho phép biểu đồ thanh trực quan tự nói.

Màu nền

Tùy chọn này cho phép bạn điều chỉnh màu nền của mỗi thanh đếm. Cài đặt này áp dụng cho không gian âm đằng sau màu của thanh được điền.

Màu nền của thanh

Tùy chọn này cho phép bạn điều chỉnh màu nền của thanh đã điền. Màu nền này bao gồm cài đặt màu nền trước đó.

Nhãn quản trị

Điều này sẽ thay đổi thẻ của mô-đun trong trình tạo để dễ nhận biết. Khi sử dụng khung nhìn WireFrame trong Visual Builder, các nhãn này sẽ xuất hiện trong khối mô-đun của giao diện Divi Builder.

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

Tải xuống các plugin và chủ đề WordPress tốt nhất từ ​​Envato và dễ dàng tạo trang web của bạn. Đã có hơn 49.720.000 lượt tải xuống. [ĐỘC QUYỀN]

Tùy chọn thiết kế quầy bar

Trong tab Thiết kế, bạn sẽ tìm thấy tất cả các tùy chọn kiểu của mô-đun, chẳng hạn như phông chữ, màu sắc, kích thước và khoảng cách. Tab này cho phép bạn thay đổi giao diện của mô-đun. Mỗi mô-đun Divi có một danh sách dài các thông số thiết kế mà bạn có thể sử dụng để sửa đổi bất cứ thứ gì.

tùy chọn thiết kế mô-đun counter barre.png

Màu văn bản

Bạn có thể chọn ở đây nếu văn bản của bạn sẽ sáng hoặc tối. Nếu bạn đang làm việc với nền tối, văn bản của bạn phải rõ ràng. Nếu nền của bạn rõ ràng, văn bản của bạn phải có màu đen. Bạn có thể tùy chỉnh màu văn bản của mình bằng cách sử dụng các tùy chọn màu văn bản bổ sung tiếp theo.

Phông chữ tiêu đề

Bạn có thể thay đổi phông chữ của văn bản bằng cách chọn phông chữ bạn chọn từ trình đơn thả xuống. Divi có hàng tá phông chữ tuyệt vời được hỗ trợ bởi Google Fonts. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, chữ hoa và gạch chân.

Kích thước phông chữ tiêu đề

Ở đây bạn có thể điều chỉnh kích thước của văn bản tiêu đề của bạn. Bạn có thể kéo thanh trượt khoảng thời gian để tăng hoặc giảm kích thước văn bản của mình hoặc bạn có thể nhập trực tiếp giá trị kích thước văn bản mong muốn vào trường nhập ở bên phải thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" theo kích thước của bạn để thay đổi loại đơn vị đo.

Màu văn bản tiêu đề

Theo mặc định, tất cả các màu văn bản trong Divi xuất hiện bằng màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản tiêu đề, hãy chọn màu bạn chọn từ bộ chọn màu bằng cách sử dụng tùy chọn này.

Khoảng cách của các chữ cái đầu

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái của văn bản tiêu đề, hãy sử dụng thanh trượt khoảng thời gian để điều chỉnh khoảng trắng hoặc nhập kích thước của khoảng cách mong muốn vào trường nhập ở bên phải của thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" theo kích thước của bạn để thay đổi loại đơn vị đo.

Chiều cao của dòng tiêu đề

Chiều cao hàng ảnh hưởng đến không gian giữa mỗi dòng của văn bản tiêu đề. Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt khoảng thời gian để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập ở bên phải của thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" theo kích thước của bạn để thay đổi loại đơn vị đo.

phần trăm văn bản divi module barre.png

Tỷ lệ phần trăm văn bản

Bạn có thể thay đổi phông chữ của văn bản bằng cách chọn phông chữ bạn chọn từ trình đơn thả xuống. Divi có hàng tá phông chữ tuyệt vời được hỗ trợ bởi Google Fonts. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, chữ hoa và gạch chân.

Kích thước phông chữ phần trăm

Tại đây bạn có thể điều chỉnh kích thước của văn bản dưới dạng phần trăm. Bạn có thể kéo thanh trượt khoảng thời gian để tăng hoặc giảm kích thước văn bản của mình hoặc bạn có thể nhập trực tiếp giá trị kích thước văn bản mong muốn vào trường nhập ở bên phải thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" theo kích thước của bạn để thay đổi loại đơn vị đo.

Màu văn bản phần trăm

Theo mặc định, tất cả các màu văn bản trong Divi xuất hiện bằng màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản dưới dạng phần trăm, hãy chọn màu bạn chọn trong bộ chọn màu bằng cách sử dụng tùy chọn này.

Khoảng cách phần trăm chữ cái

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái của văn bản theo tỷ lệ phần trăm, hãy sử dụng thanh trượt khoảng thời gian để điều chỉnh khoảng trắng hoặc nhập kích thước của khoảng cách mong muốn vào trường nhập ở bên phải của thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" theo kích thước của bạn để thay đổi loại đơn vị đo.

Chiều cao của dòng phần trăm

Chiều cao dòng ảnh hưởng đến khoảng cách giữa mỗi dòng văn bản của bạn dưới dạng phần trăm. Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt khoảng thời gian để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập ở bên phải của thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" theo kích thước của bạn để thay đổi loại đơn vị đo.

Bán kính viền

Áp dụng bán kính đường viền sẽ làm tròn các góc của thanh trong thanh quầy bar. Bán kính của đường viền càng cao, các góc càng tròn càng nhiều.

border option divi builder.png

Sử dụng đường viền

Bật tùy chọn này sẽ đặt đường viền xung quanh mô-đun của bạn. Đường viền này có thể được tùy chỉnh bằng các tham số có điều kiện sau.

Màu của đường viền

Tùy chọn này ảnh hưởng đến màu của đường viền của bạn. Chọn màu tùy chỉnh trong bộ chọn màu để áp dụng màu đó cho đường viền của bạn.

Chiều rộng của đường viền

Theo mặc định, đường viền có chiều rộng là 1 pixel. Bạn có thể tăng giá trị này bằng cách kéo thanh trượt trong phạm vi hoặc nhập giá trị tùy chỉnh vào trường nhập ở bên phải thanh trượt. Đơn vị đo lường tùy chỉnh được hỗ trợ, có nghĩa là bạn có thể thay đổi đơn vị mặc định là "px" thành một đơn vị khác, ví dụ: em, vh, vw, v.v.

Kiểu đường viền

Các đường viền hỗ trợ tám kiểu khác nhau, bao gồm: rắn, chấm, chấm, đôi, rãnh, đỉnh, inset và bắt đầu. Chọn kiểu bạn chọn từ trình đơn thả xuống để áp dụng cho đường viền của bạn.

Đệm thanh

Vùng đệm là khoảng trống được thêm vào bên trong mô-đun của bạn, giữa cạnh của mô-đun và các phần tử bên trong của nó. Ở đây bạn có thể thêm phần đệm trên cùng tùy chỉnh và phần đệm thấp hơn vào mô-đun thanh.

Dễ dàng tạo cửa hàng trực tuyến của bạn

Tải xuống WooC Commerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Khuyến nghị]

Tùy chọn truy cập thanh nâng cao

Trong tab Advanced, bạn sẽ tìm thấy các tùy chọn mà các nhà thiết kế web có kinh nghiệm hơn có thể tìm thấy hữu ích, chẳng hạn như các thuộc tính CSS và HTML tùy chỉnh. Ở đây bạn có thể áp dụng một CSS tùy chỉnh cho bất kỳ phần tử nào trong mô-đun. Bạn cũng có thể áp dụng các lớp tùy chỉnh và ID CSS cho mô-đun, có thể được sử dụng để tùy chỉnh mô-đun trong tệp style.css của chủ đề con của bạn.

counter bar advanced options.png

ID CSS

Nhập ID CSS tùy chọn để sử dụng cho mô-đun này. Mã định danh có thể được sử dụng để tạo kiểu CSS tùy chỉnh hoặc tạo liên kết đến các phần cụ thể trên trang của bạn.

Lớp CSS

Nhập các lớp CSS tùy chọn để sử dụng cho mô-đun này. Một lớp CSS có thể được sử dụng để tạo một kiểu CSS tùy chỉnh. Bạn có thể thêm nhiều lớp, cách nhau bằng dấu cách. Các lớp này có thể được sử dụng trong chủ đề con Divi của bạn hoặc trong CSS tùy chỉnh mà bạn thêm vào trang hoặc trang web của mình bằng cách sử dụng các tùy chọn chủ đề Divi hoặc cài đặt trang Divi Builder.

CSS tùy chỉnh

Một CSS tùy chỉnh cũng có thể được áp dụng cho module và một trong các thành phần bên trong của module. Trong phần CSS tùy chỉnh, bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm CSS trực tiếp vào từng phần tử. Các mục CSS trong các cài đặt này đã được nhúng trong các thẻ kiểu. Bạn chỉ cần nhập các quy tắc CSS được phân tách bằng dấu chấm phẩy.

tầm nhìn

Tùy chọn này cho phép bạn kiểm soát các thiết bị mà mô-đun của bạn xuất hiện. Bạn có thể chọn tắt mô-đun của mình trên máy tính bảng, điện thoại thông minh hoặc máy tính để bàn. Điều này rất hữu ích nếu bạn muốn sử dụng các mô-đun khác nhau trên các thiết bị khác nhau hoặc nếu bạn muốn đơn giản hóa thiết kế di động bằng cách loại bỏ các yếu tố nhất định của trang.

Đó là nó cho hướng dẫn này.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
11 cổ phiếu
cổ phiếu6
tweet
Enregistrer5