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

Hướng dẫn Divi: Cách sử dụng mô-đun Widget Khu vực

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

Divi cho phép bạn tạo một số lượng không giới hạn các khu vực sẵn sàng sử dụng khi đang di chuyển. Sidebars sau đó có thể được thêm vào bất kỳ trang nào, cho phép bạn tạo các thanh bên duy nhất cho các phần khác nhau của trang web của bạn.

Cách thêm mô-đun tiện ích Zonde từ Divi

Trước khi bạn có thể thêm mô đun thanh bên vào trang của mình, trước tiên bạn phải chuyển sang 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 sử dụng Visual Builder, bạn có thể nhấp vào nút (+) 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.

sidebar divi plugin wordpress.png

Tìm mô-đun thanh bên trong danh sách mô-đun và nhấp vào mô-đun đó để thêm mô-đun đó 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ừ "thanh bên", sau đó nhấp vào "Enter" để tìm kiếm và tự động thêm mô đun thanh bên! 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: Thêm thanh bên vào trang blog của bạn

Mô-đun thanh bên cho phép bạn chèn thanh bên (và tất cả các tiện ích con được tích hợp sẵn) vào bất kỳ đâu trên trang của bạn. Trong thực tế, bạn có thể thêm bất kỳ khu vực phụ tùng nào bằng cách sử dụng mô đun thanh bên. Trong ví dụ này, tôi sẽ chỉ cho bạn cách chèn một thanh bên tùy chỉnh vào trang blog của bạn bằng cách sử dụng phần chuyên biệt để hiển thị tiện ích Tìm kiếm và Bài đăng gần đây trên WordPress.

sidebar cho bài viết trên WordPress.jpg

Trang blog này có tiêu đề đầy đủ chiều rộng để hiển thị tiêu đề blog ở đầu trang. Dưới mô-đun tiêu đề fullwidth là bố cục đặc biệt với mô-đun blog ở bên trái và khu vực thanh bên dọc bên phải ở bên phải.

Sử dụng phần chuyên biệt cho phép bạn thêm các biến thể cột phức tạp bên cạnh các thanh bên dọc, mà không cần thêm các ngắt không mong muốn vào trang. Nó hoàn hảo cho một blog với một thanh bên.

Trước tiên, bạn phải đảm bảo rằng bạn có các tiện ích được thiết lập trong trang Tiện ích con của trang tổng quan WordPress. Trong ví dụ này, tôi thêm tiện ích Tìm kiếm và tiện ích Bài viết Gần đây vào tiện ích Sidebar.

thanh bên widget wordpress.png

Sau đó, triển khai Visual Builder để chỉnh sửa trang blog. Thêm một phần chuyên biệt vào trang của bạn (ngay dưới tiêu đề của bạn) với bố cục sau:

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

chèn cột divi.png

Một khi bạn đã thêm một phần chuyên biệt vào trang, bạn sẽ thấy một khu vực (bên trái) có nút "Thêm mô-đun". Đối với ví dụ này, ở đây mô-đun Blog có bố cục lưới đã được thêm vào để hiển thị các bài đăng trên blog.
ví dụ bài viết blog layout grid.png

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

Người kia (bên phải) có nút "Chèn một dòng". Vùng "Chèn mô-đun" đại diện cho thanh bên dọc của bạn. Đây là nơi bạn sẽ nhập mô đun thanh bên. Bạn có thể thêm nhiều mô-đun ở đây, trên một dòng và chúng sẽ mở rộng trên chiều rộng dọc của phần, bên cạnh cấu trúc cột mà bạn đang xây dựng bên cạnh nó. Trong thực tế, ví dụ này, trang blog đã có một mô-đun e-mail Optin và một mô-đun Person trong phần này của thanh bên dọc của bố cục Đặc biệt.

Bây giờ, hãy thêm mô đun thanh bên vào đầu các mô-đun khác trong khu vực thanh bên dọc của bạn.

thêm mô-đun vào sidebar.jpg

Trong tham số Mô-đun thanh bên, hãy cập nhật các thông tin sau:

Tab nội dung

Khu vực tiện ích: chọn Thanh bên

Tab thiết kế

Định hướng: Phải (vì thanh bên nằm bên phải)
Xóa dấu phân cách đường viền: YES
Màu văn bản:
Kích thước phông chữ tiêu đề tối: 26px
Khoảng cách của các chữ cái
Head: 3px Chiều cao của dòng tiêu đề: 1.1em

Tab nâng cao

Trong phần Custom CSS, thêm CSS sau vào hộp văn bản Widget. Điều này sẽ làm cho thiết kế của các tiện ích thanh bên khớp với thiết kế trang web:

nền: #fff; padding: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1);

tạo thanh bên divi.jpg

Lưu cài đặt

Bây giờ bạn có thể thấy rằng mô-đun thanh bên hiển thị các phần tử của tiện ích Sidebar (Tìm kiếm và Bài viết Gần đây) và hiển thị chúng trong khu vực thanh bên dọc của phần chuyên môn của bạn.

ví dụ về sidebar divi.jpg

Tùy chọn nội dung cho thanh bên

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. Mọi thứ kiểm soát nội dung xuất hiện trong mô-đun của bạn sẽ luôn được tìm thấy trong tab nà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]

cài đặt sidebar.png

Khu vực phụ tùng

Mô-đun Thanh bên sử dụng các khu vực tạo tiện ích con mà bạn có thể tạo trong tab Xuất hiện> Tiện ích. Bạn có thể chọn một trong các khu vực tiện ích tùy chỉnh của mình từ trình đơn thả xuống này.

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ế thanh bê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 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ì.

tùy chọn thiết kế divi.png

Sự định hướng

Ở đây bạn có thể chọn bên cạnh trang mà thanh bên của bạn sẽ được hiển thị. Tham số này điều khiển hướng của văn bản và vị trí của đường viền.

Xóa dấu phân tách đường viền

Tại đây, bạn có thể xóa đường viền màu xám mỏng ngăn cách thanh bên của bạn khỏi nội dung trang của bạn.

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

Tiêu đề Cảnh sát (Tiêu đề Phông chữ)

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 của phông chữ đầu trang

Ở đâ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 của 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 đầu thư

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 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 của dòng ảnh hưởng đến khoảng trắng giữa mỗi dòng của văn bản tiêu đề của bạn Nếu bạn muốn tăng khoảng trắng giữa mỗi dòng, hãy sử dụng thanh trượt để đ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 vào 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 giá trị kích thước của bạn để thay đổi loại đơn vị.

Phông chữ cơ thể

Bạn có thể thay đổi phông chữ của cơ thể 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ơ thể

Ở đây bạn có thể điều chỉnh kích thước của văn bản nội dung của bạn. Bạn có thể kéo thanh trượt để tăng hoặc giảm kích thước văn bản của mình hoặc nhập trực tiếp giá trị của 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" 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 nội dung

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, 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 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 trong văn 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 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 đường kẻ

Chiều cao dòng ảnh hưởng đến không gian giữa mỗi dòng văn bản cơ thể của bạn Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, sử dụng thanh trượt để điều chỉnh phạm vi không gian hoặc nhập kích thước khoảng cách mong muốn trong lĩnh vực đầu vào nằm ở bên phải của con trỏ. 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ị.

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 thanh bên 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.

front sidebar divi.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 3

Để 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
14 cổ phiếu
cổ phiếu8
tweet2
Enregistrer4