Bộ đếm hình tròn cho phép bạn hiển thị một thống kê duy nhất theo cách thẩm mỹ. Khi bạn cuộn xuống, số đếm ngược và biểu đồ hình tròn dần lấp đầy để khớp với giá trị phần trăm. Hãy thử kết hợp nhiều mô-đun bộ đếm vòng tròn trên một trang để cung cấp cho bạn khách một cách thú vị để tìm hiểu về doanh nghiệp hoặc kỹ năng cá nhân của bạn.
Cách thêm mô-đun mét tròn vào trang của bạn
Trước khi bạn có thể thêm mô-đun bộ đếm vòng tròn vào trang của mình, trước tiên bạn phải truy cập Trình tạo Divi. 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 duyệt trang web của mình nếu bạn đã đăng nhập vào bảng điều khiển WordPress của mình.
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 đồng hồ đo tròn 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 vòng tròn" và sau đó nhấp vào enter để tự động tìm kiếm và thêm mô-đun bộ đếm vòng tròn!
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 vòng tròn là minh họa statistiques cho các nghiên cứu điển hình hoặc danh mục đầu tư.
Đơn giản chỉ cần xác định mỗi mét tròn với một chức năng hoặc mục tiêu dự án cụ thể để 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 sẽ sử dụng mô-đun “bộ đếm vòng tròn” để hiển thị ba mục tiêu dự án.
Như bạn có thể thấy trong hình ảnh bên dưới, đầu trang bao gồm ba mục tiêu của dự án bằng cách sử dụng mô-đun Bộ đếm và cuối trang bao gồm kết quả của nghiên cứu điển hình bằng mô-đun Số bộ đếm .
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 vòng tròn vào hàng.
Cập nhật cài đặt bộ đếm vòng tròn như sau:
Tùy chọn nội dung
Tiêu đề: Hoạt ảnh
Số: 80
% Dấu hiệu: Có
Màu nền của thanh: #e07a5e
Tùy chọn thiết kế
Màu của vòng tròn: #e07a5e
Màu văn bản: Tối
Phông chữ: Mặc định
Kích thước phông chữ tiêu đề: 26px
Màu văn bản tiêu đề: #405c60
Số phông chữ: Mặc định
Kích thước phông chữ kích thước: 46px
Màu văn bản số: #405c60
Lưu cài đặt
Bây giờ, sao chép mô-đun bộ đếm vòng tròn hai lần và kéo từng bản sao vào cột thứ hai và thứ ba của dòng của bạn.
Vì các yếu tố thiết kế của bạn đã được chuyển sang các mô-đun trùng lặp, bạn chỉ cần cập nhật tiêu đề và số của đồng hồ tròn.
Đó là tất cả!
Truy cập trang.
Tùy chọn nội dung thông báo phản đối
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.
Tiêu đề
Nhập tiêu đề cho bộ đếm vòng kết nối. Đây thường là một từ đại diện cho thống kê bạn đang xem. Nó sẽ được hiển thị dưới số trong biểu đồ hình tròn.
tên
Đặt một số cho bộ đếm hình tròn. Việc chọn một số nhỏ hơn 100 sẽ điền vào biểu đồ hình tròn theo tỷ lệ phần trăm bằng với số bạn đã nhập. Ví dụ: nhập số 20 sẽ lấp đầy 20% hình tròn bằng màu nhấn của bạn.
Dấu phần trăm
Tại đây bạn có thể chọn có nên thêm dấu phần trăm sau số được xác định ở trên không.
Màu nền của thanh
Thao tác này sẽ thay đổi màu tô của thanh. Số lượng màu tô được kiểm soát bởi "số" đã chọn ở trên. Nếu bạn chọn số 50 và màu xanh lam, vòng tròn của bạn sẽ lấp đầy 50% với màu xanh lam.
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ế bộ đếm tròn
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 của vòng tròn
Đây là màu sẽ được sử dụng cho phần không được tô của hình tròn (khoảng âm không được tô bởi màu nền của thanh được xác định trong tab Nội dung).
Độ mờ của màu của vòng tròn
Bạn có thể giảm độ mờ của phần được lấp đầy bằng cách sử dụng cài đặt này.
Màu văn bản
Tại đây bạn có thể chọn văn bản của mình nên 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.
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ó.
Số cảnh sát
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.
Cỡ chữ số
Tại đây, bạn có thể điều chỉnh kích thước của văn bản được đánh số 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 của văn bản số
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, 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 các chữ cái được đánh số
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, 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 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ó.
Chiều cao của dòng số
Chiều cao dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong văn bản kỹ thuật số của bạn. 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 phạm vi để điều chỉnh không gian hoặc nhập kích thước của khoảng trống bạn 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ùy chọn bộ đếm thông tin 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ởi dấu cách. Các lớp này có thể được sử dụng trong Chủ đề Divi Con 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 Tùy chọn Chủ đề Divi hoặc Cài đặt Trang Trình tạo Divi.
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.
