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

Hướng dẫn Divi: Cách sử dụng mô-đun bộ đếm số

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

Mô-đun Number Counter trên chủ đề WordPress Divi là một cách tuyệt vời để hiển thị các con số một cách thú vị và hấp dẫn. Mô-đun này thường được sử dụng để hiển thị số liệu thống kê về bạn hoặc doanh nghiệp của bạn. Ví dụ: hiển thị số lượng khách hàng hoặc người theo dõi của bạn trên Facebook là một cách tuyệt vời để trình bày bằng chứng xã hội.

hiển thị số divi wordpress.png

Cách thêm mô-đun Số lượt truy cập của Divi

Trước khi bạn có thể thêm một mô-đun truy cập vào trang của mình, trước tiên bạn phải nhảy vào Divi Builder. Sau 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. Nhấn nút này để kích hoạt Divi Builder và truy cập tất cả các module 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ền trước nếu bạn được kết nối với trang tổng quan WordPress của mình.

divi builder

Khi bạn đã nhập 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.

bộ đếm số divi.png

Tìm mô-đun bộ đếm số 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ừ "bộ đếm số", sau đó nhấp vào "Enter" để tìm kiếm và tự động thêm mô-đun bộ đếm số! Khi module được thêm vào, bạn sẽ được chào đón bởi danh sách tùy chọn 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 .

Ví dụ về trường hợp sử dụng: Sử dụng mô-đun đồng hồ kỹ thuật số để hiển thị kết quả của dự án

Một cách tuyệt vời để sử dụng mô-đun bộ đếm số là minh họa các số liệu thống kê cho các nghiên cứu điển hình. Chỉ cần gắn nhãn mỗi bộ đếm với một số để người dùng có thể dễ dàng nhìn thấy thành công của dự án. Trong ví dụ này, tôi sử dụng mô-đun bộ đếm số để hiển thị bốn kết quả dự án.

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à cuối trang bao gồm các kết quả của nghiên cứu điển hình sử dụng các mô-đun đồng hồ kỹ thuật số.

ví dụ compteur.gif

Phần của trang hiển thị kết quả của nghiên cứu điển hình sử dụng mô-đun kỹ thuật số yêu cầu sử dụng phần chuyên ngành. Sử dụng Visual Builder, thêm một phần chuyên biệt vào trang và chọn bố cục sau:

phần tùy chỉnh divi.png

Chọn bố cục cột 1 cho phía bên phải của phần và nhập tiêu đề và văn bản cần thiết cho kết quả nghiên cứu điển hình.

phạm vi chèn divi.png

Chèn một bố cục của các cột 2 ngay dưới bố trí cột 1 ở bên phải của phần.

chia divi.png cột

Bây giờ hãy thêm mô-đun bộ đếm số đầu tiên của bạn vào cột bên trái.

thêm một số phần divi.png

Cập nhật các thông số của bộ đếm số như sau:

Tùy chọn nội dung

Tiêu đề: Khách truy cập mới
Số: 54210
Tỷ lệ phần trăm đăng nhập: TẮT

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 thiết kế

Màu văn bản: Tối
Phông chữ của 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 của dòng tiêu đề: 1em
Số ký tự: Mặc định, đậm
Số ký tự: 60px
Màu văn bản số: # e07a5e
Chiều cao dòng số: 72px

content section number divi.png

Lưu cài đặt

Nhân đôi mô-đun Bộ đếm số và kéo nó vào cột bên phải liền kề và cập nhật các tùy chọn Tiêu đề và Số.

số truy cập ví dụ build.png

Nhân đôi dòng có chứa hai mô-đun truy cập số để hai bộ đếm số được hiển thị bên dưới.

kỹ thuật số sao chép divi.png

Sau đó cập nhật các tùy chọn Tiêu đề và Số cho chúng. Bây giờ bạn có tất cả bốn quầy quay số.

Đừng quên thêm hình ảnh 667 x 320 vào cột bên trái / bên của phần chuyên ngành.

Kết thúc rồi! Sự kết hợp của số quầy và quầy bar trên trang nghiên cứu trường hợp này thực sự làm cho nội dung hấp dẫn.

Mô đun thực hiện cuối cùng compteur.png

Tùy chọn nội dung truy cập kỹ thuật số

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 được tìm thấy trong tab này.

vùng chọn nội dung wordpress divi.png

Tiêu đề

Nhập tiêu đề cho đồng hồ. Điều này sẽ được hiển thị theo số trong văn bản nhỏ hơn.

tên

Đây là số mà bộ đếm sẽ đếm. Khi bạn di chuyển xuống trang và đến quầy, số đếm xuống nhanh chóng từ 0 cho đến khi nó đạt đến số bạn đặt ở đây. Chỉ có thể đặt giá trị số ở đây.

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]

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.

Màu nền

Đặt màu nền tùy chỉnh cho mô-đun của bạn hoặc để trống để sử dụng màu mặc định.

Hình nền

Nếu được đặt, hình ảnh này sẽ được sử dụng làm nền cho mô-đun này. Để xóa hình nền, chỉ cần xóa URL khỏi trường cài đặt. Hình nền sẽ xuất hiện phía trên các màu nền, có nghĩa là màu nền sẽ không hiển thị khi áp dụng hình nền.

Nhãn quản trị

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

Tùy chọn thiết kế (Kiểu) của đồng hồ kỹ thuật số

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 trắng. Đây là tab bạn sẽ sử dụng để 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 để thay đổi bất cứ điều gì.

bộ đếm thiết kế vùng divi.png

Màu văn bản

Bạn có thể chọn ở đây nếu văn bản tiêu đề của bạn phải sáng hoặc tối. Nếu bạn đang làm việc trên 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 tối.

Phông chữ tiêu đề

Bạn có thể thay đổi phông chữ của văn bản tiêu đề bằng cách chọn phông chữ mong muốn từ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn đượ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 phạm vi để tăng hoặc giảm kích thước văn bản hoặc nhập giá trị của kích thước văn bản mong muốn trực tiếp 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" tùy thuộc vào giá trị của 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 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 mong muố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ữ 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 trong văn bản tiêu đề, 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 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" tùy thuộc vào giá trị của 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 trống 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 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 khoảng cách mong muốn trong trường nhập nằm ở bên phải của con trỏ. 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" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Phông chữ của số

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ừ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn đượ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ữ của số

Ở đây bạn có thể điều chỉnh kích thước của văn bản kỹ thuật số của bạn. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản hoặc nhập giá trị của kích thước văn bản mong muốn trực tiếp 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ể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi kiểu của đơn vị.

Màu của văn bản kỹ thuật số

Theo mặc định, tất cả các màu văn bản 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 kỹ thuật số, hãy chọn màu bạn muố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 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 trong văn bản số của bạn, 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 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" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Chiều cao dòng của số

Chiều cao của dòng ảnh hưởng đến khoảng trống giữa mỗi dòng của văn bản kỹ thuật số 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 khoảng cách mong muốn trong trường nhập nằm ở bên phải của con trỏ. 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" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

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 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 đơn vị khác, như em, vh, vw, v.v.

Kiểu đường viền

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

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

Đệm tùy chỉnh

Fill là khoảng trống được thêm vào bên trong module của bạn, giữa cạnh của module và các phần tử bên trong của nó. Bạn có thể thêm các giá trị điền tùy chỉnh vào một trong bốn mặt của mô-đun. Để xóa lề tùy chỉnh, hãy xóa giá trị được thêm từ trường nhập. Theo mặc định, các giá trị này được tính theo pixel, nhưng bạn có thể nhập đơn vị đo lường tùy chỉnh trong các trường nhập.

Tùy chọn bộ đếm số nâng cao

Trong 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. Ở đây bạn có thể áp dụng CSS tùy chỉnh cho một trong nhiều thành phần của 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.

phần truy cập kỹ thuật số design.png

ID CSS

Nhập mã định danh CSS tùy chọn để sử dụng cho mô-đun này. Có thể sử dụng ID để 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 bảng định kiểu 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

CSS tùy chỉnh cũng có thể được áp dụng cho mô đun và một trong các thành phần bên trong của mô-đun. Trong phần Custom CSS, bạn sẽ tìm thấy một trường văn bản, trong đó bạn có thể thêm các bảng định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục CSS trong các tham số này đã được gói trong các thẻ kiểu. Vì vậy, 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.

Hướng dẫn Divi khác

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ếu4
tweet1
Enregistrer6