Divi cho phép bạn tạo vô số khu vực sẵn sàng sử dụng một cách nhanh chóng. Sau đó, các thanh bên 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 độc đáo cho các phần khác nhau trong trang của mình. Website.

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. Một khi Chủ đề Divi cài đặt trên của bạn Website, bạn sẽ nhận thấy một nút Sử dụng Divi Builder phía trên trình chỉnh sửa bài đăng bất cứ khi nào bạn tạo một trang mới. Nhấp vào nút này để kích hoạt Divi Builder và truy cập tất cả các mô-đun của Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo ở 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 qua Website ở phía trước nếu bạn đã đăng nhập vào bảng điều khiển WordPress của mình.

Khi bạn đang 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 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, hãy nhớ thêm một hàng vào trang của bạn trước.

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

Trường hợp sử dụng ví dụ: 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 một thanh bên (và tất cả các tiện ích tích hợp của nó) vào bất kỳ đâu trên trang của bạn. Trên thực tế, bạn có thể thêm bất kỳ khu vực tiện ích nào bằng mô-đun thanh bên. Đối với ví dụ này, tôi sẽ chỉ cho bạn cách chèn 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 dụng để hiển thị tiện ích Tìm kiếm và Bài đăng gần đây trên WordPress.

Trang blog này có tiêu đề chiều rộng đầy đủ để hiển thị tiêu đề blog ở đầu trang. Bên dưới mô-đun tiêu đề đầy đủ băng thông là một 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 thêm các dấu ngắt không mong muốn vào trang. Điều này là hoàn hảo cho một blog có thanh bên.

Trước tiên, bạn cần đảm bảo rằng bạn đã thiết lập các widget trong trang Widget trên bảng điều khiển WordPress của mình. Đối với ví dụ này, tôi đang thêm tiện ích Tìm kiếm và tiện ích Các bài viết gần đây vào tiện ích Thanh bên.

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 bên dưới tiêu đề của bạn) với bố cục sau:

Khi bạn đã thêm một phần chuyên biệt vào trang, bạn sẽ nhận thấy rằng một khu vực (ở bên trái) có nút “Thêm mô-đun”. Đối với ví dụ này, đây là nơi mô-đun Blog với bố cục lưới đã được thêm vào để hiển thị các bài đăng trên blog.

Cái còn lại (bên phải) có nút "Chèn hàng". Khu vực "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 bao nhiêu mô-đun tại đây, trong một hàng và chúng sẽ trải dài theo chiều dọc của phần, liền kề với cấu trúc cột mà bạn xây dựng bên cạnh. Trên thực tế, đối với ví dụ này, trang blog đã có mô-đun Email Optin và mô-đun Người trong khu vực đó của thanh bên dọc của bố cục Chuyên ngành.

Bây giờ, 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.

Trong cài đặt Mô-đun Thanh bên, cập nhật các thông tin sau:

Tab nội dung

Khu vực widget: chọn Sidebar

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 viền: CÓ
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
tiêu đề: 3px Chiều cao hàng tiêu đề: 1.1em

Tab nâng cao

Trong phần CSS tùy chỉnh, hãy thêm CSS sau vào hộp văn bản Tiện ích. Điều này sẽ làm cho thiết kế của các widget thanh bên phù hợp với thiết kế của 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);

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 thành phần của tiện ích Thanh bên (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.

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 yếu 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 những gì xuất hiện trong mô-đun của bạn sẽ luôn được tìm thấy trong tab này.

Khu vực phụ tùng

Mô-đun Thanh bên sử dụng các hộp tạo tiện ích mà bạn có thể tạo trong tab Giao diện> Tiện ích. Bạn có thể chọn một trong các khu vực tiện ích con tùy chỉnh của mình từ menu 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ễ dàng nhận biết. Khi bạn sử dụng dạng xem 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 tạo kiểu mô-đun, chẳng hạn như phông chữ, màu sắc, định cỡ và khoảng cách. Đây là tab bạn sẽ sử dụng để thay đổ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 để thay đổi bất kỳ điều gì.

Sự định hướng

Tại đây, bạn có thể chọn bên nào của trang mà thanh bên của bạn sẽ được hiển thị. Tham số này kiểm soát hướng của văn bản và vị trí của đường viền.

Xóa dải phân cách

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 với nội dung của trang.

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 trên 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 tối.

Phông chữ tiêu đề

Bạn có thể thay đổi phông chữ của văn bản tiêu đề của mình 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 chục phông chữ tuyệt vời do Google Fonts cung cấp. 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 phạm vi để 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ị 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 đầ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ị 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 của văn bản tiêu đề, hãy chọn màu mong 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 giữa các chữ cái tiê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 trong văn bản tiêu đề của mình, hãy sử dụng thanh trượt phạm vi để đ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 giá trị kích thước của bạn để thay đổi loại đơn vị của nó.

Chiều cao hàng tiêu đề

Chiều cao dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong văn bản tiêu đề 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 để đ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. mục nhập nằm ở 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ị của nó.

Phông chữ cơ thể

Bạn có thể thay đổi phông chữ nội dung của mình 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 chục phông chữ tuyệt vời do Google Fonts cung cấp. 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ữ cơ thể

Tại đây bạn có thể điều chỉnh kích thước văn bản nội dung của mình. 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 đầ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ị 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 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 mong 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ủa 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, hãy sử dụng thanh trượt phạm vi để đ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 giá trị 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 khoảng cách giữa mỗi dòng văn bản trong nội dung 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 cách hoặc nhập kích thước khoảng cách mong muốn của bạn vào trường nhập nằm ở bên phải của con trỏ. 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ị của nó.

Tùy chọn thanh bên 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. 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 biểu định kiểu CSS tùy chỉnh mà bạn thêm vào trang của mình hoặc vào 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

CSS tùy chỉnh cũng có thể được áp dụng cho mô-đun và bất kỳ nội dung 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 các biểu định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục nhập CSS trong các cài đặt này đã được bao bọc 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 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 loại bỏ một số yếu tố nhất định khỏi trang.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG CHỦ ĐỀ DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Hướng dẫn Divi khác

• trang web 5 để sử dụng hàng Divi chủ đề
• Cách thêm văn bản vào sản phẩm Divi WooCommerce
• Cách thay đổi màu menu giữa các trang Divi
• Cách cá nhân hóa lưới của blog với Divi
• Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
• Cách tạo thanh trượt Divi toàn màn hình
• Cách thay đổi màu của menu giữa các trang Divi
• Các tính năng có thể bạn chưa biết về Divi
• Cách sử dụng Divi Builder trên WordPress
• Cách sử dụng mô-đun cuộn video Divi
• Cách sử dụng mô-đun Divi Builder Flip
• Cách thêm mô-đun chứng thực trên Divi Builder
• Cách sử dụng mô-đun văn bản Divi
• Cách tạo thanh trượt trên Divi
• Cách chỉnh sửa vai trò người dùng Divi
• Cách sử dụng mô-đun Truyền thông xã hội Divi
• Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
• Cách sử dụng mô-đun bên Divi
• Cách sử dụng mô-đun bảng giá Divi
• Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
• Cách thêm mô-đun video của Divi
• Cách sử dụng mô-đun điều hướng bài viết
• Cách sử dụng mô-đun tìm kiếm Divi
• Cách sử dụng mô-đun ví Divi
• Cách sử dụng mô-đun người trên Divi Builder
• Cách sử dụng mô-đun ví với bộ lọc Divi
• Cách sử dụng mô-đun trượt toàn bộ chiều rộng
• Cách sử dụng Mô-đun hình ảnh Divi Builder
• Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
• Cách sử dụng mô-đun thư viện hình ảnh
• Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
• Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
• Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
• Cách sử dụng Module Divi Counter
• Cách sử dụng thanh trượt bài viết trên Divi Builder
• Cách sử dụng mô-đun Optin Email Optin