Bộ đếm hoạt hình là một cách thú vị và hiệu quả để hiển thị statistiques cho bạn khách. Hoạt hình được kích hoạt bằng cách tải xuống chậm để làm cho điều hướng trang thực sự thú vị. Bạn có thể đặt bao nhiêu bộ đếm tùy thích bên trong mô-đun này.
Làm cách nào để thêm mô-đun quầy bar vào trang của bạn
Trước khi bạn có thể thêm mô-đun quầy bar vào trang của mình, trước tiên bạn cần truy cập Divi Builder. Một 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 một trang mới.
Bằng cách nhấp vào nút này, bạn sẽ có thể kích hoạt Divi Builder, điều này sẽ cung cấp cho bạn quyề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 máy phát ở 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 frontend, nếu bạn được kết nối với bảng điều khiển WordPress của bạn.
Sau khi 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 mình. Mô-đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn đang bắt đầu một trang mới, đừng quên thêm một hàng vào trang của bạn trước. .
Tìm mô-đun quầy bar trong danh sách các mô-đun và nhấp vào mô-đun đó để thêm 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ể gõ từ "Bộ đếm quầy bar" và sau đó nhấp enter để tự động tìm kiếm và thêm mô-đun bộ đếm quầy bar!
Sau khi mô-đun được thêm vào, bạn sẽ được chào đón với danh sách các tùy chọn mô-đun. 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 .
Ca sử dụng để hiển thị các mục tiêu của 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 quầy bar là minh họa statistiques cho các trường hợp nghiên cứu. Chỉ cần gắn thẻ mỗi thanh với một chức năng hoặc mục đích cụ thể của dự án để người dùng biết những dịch vụ nào được bao gồm trong dự án. Trong ví dụ này, tôi đang sử dụng mô-đun bar để hiển thị ba mục tiêu của dự án.
Như bạn có thể thấy, phần đầu của 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 trang bao gồm kết quả của nghiên cứu điển hình bằng mô-đun “Bộ đếm” Con số ".
Chúng ta hãy bắt đầu.
Sử dụng trình tạo trực quan để thêm một phần tiêu chuẩn với bố cục chiều rộng (1 cột) đầy đủ. Sau đó, thêm mô-đun bộ đếm thanh vào hà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
Phần trăm 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
Phông chữ tỷ lệ: 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
Bây giờ quay lại tab Nội dung và chọn + Thêm một mục mới để thêm thanh đếm đầu tiên vào mô-đun.
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
Thêm hai quầy thanh bổ sung vào mô-đun và cung cấp cho mỗi tiêu đề và tỷ lệ phần trăm.
Đó là tất cả!
Tùy chọn nội dung quầy bar
Trong tab Nội dung, bạn sẽ tìm thấy tất cả 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ả điều khiển cái gì xuất hiện trong mô-đun của bạn sẽ luôn ở trong tab này.
Phần trăm sử dụng
Theo mặc định, tỷ lệ phần trăm được hiển thị trong bộ đếm thanh màu. Văn bản này có thể được tắt 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 từng quầy bar. Cài đặt này áp dụng cho không gian âm phía sau màu của thanh được tô đầy.
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 chồng lên cài đặt màu nền trước đó.
Nhãn quản trị
Điều này sẽ thay đổi nhãn mô-đun trong bộ tạo để dễ dàng nhận biết. Khi sử dụng dạng xem 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.
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 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 sửa đổi giao diện của mô-đun của mình. Mỗi mô-đun Divi có một danh sách dài các cài đặt thiết kế mà bạn có thể sử dụng để điều chỉnh bất kỳ thứ gì.
Màu văn bản
Ở đây bạn có thể chọn văn bản của mình sẽ sáng hay 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 sáng. Nếu nền sáng, văn bản của bạn phải có màu đen. Bạn có thể tùy chỉnh thêm 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 sau đó.
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ữ mong muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ tuyệt vời được cung cấp 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, viết hoa và gạch chân.
Kích thước phông chữ tiêu đề
Tại đây bạn có thể điều chỉnh kích thước của văn bản tiêu đề của mình. 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 của thanh trượt. Các trường đầu vào 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" tùy thuộc vào kích thước của bạn để thay đổi loại đơn vị của nó.
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 đều có màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu văn bản của tiêu đề, hãy chọn màu ưa thích của bạ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 cách 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 cách để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào 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" tùy thuộc vào kích thước của bạn để thay đổi loại đơn vị của nó.
Chiều cao của dòng tiêu đề
Chiều cao dòng ảnh hưởng đến khoảng cách giữa mỗi dòng văn bản tiêu đề. Nếu bạn muốn tăng khoảng cách giữa mỗi hàng, hãy sử dụng thanh trượt khoảng để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào 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" tùy thuộc vào kích thước của bạn để thay đổi loại đơn vị của nó.
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ữ mong muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ tuyệt vời được cung cấp 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, viết 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 văn bản của mình 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 của thanh trượt. Các trường đầu vào 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" tùy thuộc vào kích thước của bạn để thay đổi loại đơn vị của nó.
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 đều có màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu văn bản của mình dưới dạng phần trăm, hãy chọn màu bạn muốn từ 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 cách 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 trong văn bản của mình dưới dạng phần trăm, hãy sử dụng thanh trượt khoảng thời gian để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào 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" tùy thuộc vào kích thước của bạn để thay đổi loại đơn vị của nó.
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 hàng, hãy sử dụng thanh trượt khoảng để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào 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" tùy thuộc vào kích thước của bạn để thay đổi loại đơn vị của nó.
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 bộ đếm thanh. Bán kính của đường viền càng lớn thì các góc càng tròn.
Sử dụng đường viền
Bật tùy chọn này sẽ đặt mộ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ách sử dụng các tham số đ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ột màu tùy chỉnh từ công cụ chọn màu để áp dụng nó cho đường viền của bạn.
Chiều rộng của đường viền
Theo mặc định, các đường viền có chiều rộng 1 pixel. Bạn có thể tăng giá trị này bằng cách kéo thanh trượt 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 từ "px" thành một cái gì đó khác, ví dụ như em, vh, vw, v.v.
Kiểu đường viền
Viền hỗ trợ tám kiểu khác nhau, bao gồm: đặc, chấm, chấm, kép, rãnh, đỉnh, in chìm và bắt đầu. Chọn kiểu bạn muốn từ menu thả xuống để áp dụng cho đường viền của bạn.
Đệm thanh
Phần đệm là không gian đượ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ó. Tại đây, bạn có thể thêm đệm trên cùng và đệm dưới tùy chỉnh vào mô-đun thanh.
Tùy chọn quầy bar nâng cao
Trên tab Nâng cao, 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ể thấy hữu ích, chẳng hạn như các thuộc tính CSS và HTML tùy chỉnh. Tại đây, bạn có thể áp dụng CSS tùy chỉnh cho bất kỳ phần tử nào trong số nhiều phần tử của mô-đun. Bạn cũng có thể áp dụng các lớp CSS và ID tùy chỉnh 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.
ID CSS
Nhập một ID CSS tùy chọn để sử dụng cho mô-đun này. Một ID có thể được sử dụng để tạo kiểu CSS tùy chỉnh hoặc để 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 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 tùy chọn chủ đề Divi hoặc cài đặt trang Divi Builder.
CSS tùy chỉnh
CSS tùy chỉnh cũng có thể được áp dụng cho mô-đun và bất kỳ phần tử bên trong nào của mô-đun. 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 với các thẻ kiểu. Vì vậy, 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 trên đó. Bạn có thể chọn tắt từng 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 hữu ích nếu bạn muốn sử dụng các mod 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 xóa một số phần tử khỏi trang.
Đó là nó cho hướng dẫn này.
