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

Cách sử dụng mô-đun đồng hồ đo vòng tròn trên Divi builder

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ị]

Đồng hồ đo tròn cho phép bạn hiển thị một số liệu thống kê duy nhất theo cách thẩm mỹ và thuyết phục. Khi bạn cuộn xuống, số được tính xuống và biểu đồ hình tròn dần dần lấp đầy để khớp với giá trị phần trăm. Thử kết hợp nhiều mô-đun bộ đếm vòng tròn trên một trang để cung cấp cho khách truy cập của bạn một cách thú vị để khám phá kỹ năng kinh doanh hoặc cá nhân của bạn.

ví dụ truy cập circulerire divi.png

Cách thêm mô-đun đồng hồ đo 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. 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 duyệt trang web của mình nếu bạn đăng nhập vào trang tổng quan WordPress.

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.

truy cập vòng tròn divi.png

Tìm mô-đun đồng hồ đo tròn trong danh sách các 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ừ "vòng tròn truy cập", sau đó nhấn enter để tìm kiếm và tự động thêm mô-đun bộ đếm vòng tròn!

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 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 đo vòng tròn là minh họa số liệu thống kê cho các nghiên cứu điển hình hoặc các mụ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 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ẽ sử dụng mô-đun "bộ đếm vòng tròn" để hiển thị ba mục tiêu của dự án.

Như bạn có thể thấy trong hì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 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 Số lượt truy cập .

ví dụ mô-đun vòng tròn divi animation.gif

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ô-đun bộ đếm vòng tròn vào dòng.

truy cập vòng tròn cấu hình divi.png

Cập nhật cài đặt bộ đếm vòng kết nối như sau:

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í]

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ữ tiêu đề: 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

hoạt hình divi tạo một vòng tròn với đồ họa divi.png

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.

sao chép một mô-đun mét tròn divi.png

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ồ đo tròn.

Vậy là xong!

Truy cập trang.

thiết kế truy cập divi builder.png

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ả 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.

nội dung mô-đun vòng kết nối.png

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 hiển thị. Nó sẽ được hiển thị theo số trong biểu đồ hình tròn.

tên

Đặt số cho đồng hồ đo tròn. Bằng cách chọn một số nhỏ hơn 100, biểu đồ hình tròn sẽ lấp đầy phần trăm bằng số bạn đã nhập. Ví dụ, nhập số 20, vòng tròn sẽ điền vào 20% màu của giọng của bạn.

Dấu phần trăm

Tại đây bạn có thể chọn có thêm dấu phần trăm sau khi số được xác định ở trên không.

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]

Màu nền của thanh

Điều này sẽ thay đổi màu tô của thanh. Lượng màu tô được kiểm soát bởi "số" được chọn ở trên. Nếu bạn chọn số 50 và màu xanh, vòng tròn của bạn sẽ điền vào 50% với màu xanh dương.

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.

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 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 truy cập tròn divi.png

Màu của vòng tròn

Đây là màu sẽ được sử dụng cho phần không được lấp đầy của vòng tròn (không gian âm không được lấp đầy 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 của phần được lấp đầy của vòng tròn bằng cách sử dụng tham số này.

Màu văn bản

Ở đây bạn có thể chọn xem văn bản của mình có sáng hay tối không. 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.

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.

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ữ 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.

số văn bản divi builder tròn counter.png

Kích thước phông chữ số

Ở đây bạn có thể điều chỉnh kích thước của văn bản được đánh số 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 lĩnh vực đầu vào hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể gõ "px" hoặc "em" theo kích thước của bạn để thay đổi kiểu của đơn vị.

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 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, 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 của các chữ số

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, 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 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.

văn bản mét khoảng cách chữ divi.png

Chiều cao của đường số

Chiều cao dòng ảnh hưởng đến không gian giữa mỗi dòng 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 dòng, hãy sử dụng thanh trượt phạm vi để đ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 trong trường nhập vào 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.

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 thông tư 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.

truy cập nâng cao divi.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ủ đề Divi Child 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 bạn 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
tweet2
Enregistrer3