Cách sử dụng mô-đun Toggle trên Divi Builder: Hướng dẫn

Trước khi bạn có thể thêm mô-đun Chuyển đổi vào trang của mình, trước tiên bạn phải chuyển sang Trình tạo Divi. 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 Bật Trình tạo hình ảnh 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 ở trên Trình tạo trực quan, 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, hãy nhớ thêm một hàng vào trang của bạn trước.

Tìm mô-đun chuyển đổi 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õ "toggle" rồi nhấn enter để tìm và tự động thêm mô-đun bật tắt! 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ụ: Trang câu hỏi thường gặp

Trang Câu hỏi thường gặp là một trong những nơi tốt nhất để tổng hợp thông tin bằng cách sử dụng mô-đun Toggle. Nó cho phép người dùng nhanh chóng xác định câu hỏi họ đang tìm kiếm mà không cần phải đọc hàng tấn văn bản. Đối với ví dụ này, tôi sẽ chỉ cho bạn cách bạn có thể sử dụng mô-đun Toggle để thiết kế phần Câu hỏi thường gặp hiện đại cho trang Câu hỏi thường gặp của bạn trong vài phút.

Sử dụng Trình tạo trực quan, thêm một phần mới với hàng có chiều rộng đầy đủ (1 cột). Sau đó thêm mô-đun Dải phân cách vào hàng. Trong tab Nội dung của cài đặt mô-đun Dải phân cách, hãy chọn tùy chọn “Hiển thị dải phân cách”.

Trên tab Thiết kế, nhập các tùy chọn sau:

Màu: # 000000 (màu đen)
Kiểu phân cách: Rắn
Vị trí phân cách:
Dải phân cách căn giữa theo chiều dọc Trọng lượng: 4px
Chiều cao: 1

Sau đó, thêm một mô-đun bật tắt bên dưới dải phân cách mà tôi vừa tạo trong cùng một hàng. Trong cài đặt mô-đun Chuyển đổi, hãy cập nhật những điều sau:

Tab nội dung

Tiêu đề: [nhập tiêu đề của bạn]
Nội dung: [nhập nội dung của bạn]
Tình trạng: Đóng
Mở màu nền: #ffffff
Đã đóng Chuyển đổi màu nền: #ffffff
Màu nền: #ffffff

Tab thiết kế

Màu biểu tượng: # 000000
Mở màu văn bản chuyển đổi: # 000000
Đã tắt màu văn bản chuyển đổi: # 000000
Phông chữ tiêu đề: Mở Sans, In đậm
Kích thước phông chữ: 24px
Màu văn bản tiêu đề: # 000000
Body Font: Open Sans
Kích thước phông chữ cơ thể: 18px
Màu văn bản nội dung: # 666666
Chiều cao của đường cơ thể: 1.6em
Sử dụng đường viền: YES
Chiều rộng của đường viền: 0px
Đệm tùy chỉnh: Hàng đầu 2px, Dưới 2px

Sau khi lưu cài đặt của bạn cho mô-đun chuyển đổi, hãy sao chép mô-đun chia mà bạn đã tạo và đặt nó bên dưới mô-đun bật tắt. Điều này sẽ đóng khung bập bênh với một đường phân chia trên và dưới. Sau đó, sao chép mô-đun chuyển đổi của bạn và đặt nó sau dòng phân cách dưới cùng. Vì đây là mô-đun Toggle trùng lặp, tất cả các cài đặt thiết kế đã được chuyển sang mô-đun Toggle mới và tất cả những gì bạn cần làm là cập nhật nội dung của mô-đun Toggle mới. Sau đó, tiếp tục quá trình nhân bản các mô-đun Bộ phận và Mô-đun Quy mô và cập nhật nội dung trong thang đo của bạn cho đến khi bạn hoàn thành toàn bộ phần Câu hỏi thường gặp.

Đó là tất cả. Giờ đây, bạn đã có phần Câu hỏi thường gặp hiện đại bằng cách sử dụng mô-đun Toggle để củng cố các câu hỏi và câu trả lời của bạn.

Bây giờ bạn đã thấy mô-đun bật tắt hoạt động, hãy đi sâu vào TẤT CẢ các cài đặt của nó trong các phần bên dưới. Chúng tôi đã cung cấp một cái nhìn chi tiết về những gì bạn sẽ tìm thấy trong mỗi tab cài đặt của mô-đun và giải thích về chức năng của từng tab.

Các tham số nội dung của mô-đun Toggle

Tab nội dung mô-đun chuyển đổi được tổ chức theo các nhóm tham số sau (cũng thay thế!).

Văn bản

Đây là nơi bạn có thể thêm tiêu đề và chuyển đổi nội dung.

Etat

Bạn có thể chọn xem bạn muốn nút của mình xuất hiện mở hay đóng theo mặc định với cài đặt này.

bối cảnh

Tại đây, bạn có thể thay đổi màu nền khi công tắc mở và màu nền khi đóng. Bạn cũng có thể dễ dàng làm cho chúng giống nhau bằng cách đặt tùy chọn màu nền. Ngoài ra còn có tùy chọn để đặt hoặc tải lên hình nền.

Nhãn quản trị

Theo mặc định, mô-đun chuyển đổi của bạn sẽ xuất hiện với nhãn có nội dung 'Chuyển đổi' trong trình tạo. Thẻ Admin cho phép bạn thay đổi thẻ này để dễ nhận biết.

Các thông số thiết kế của mô-đun rocker

Các thông số thiết kế của mô-đun bật tắt đã được nhóm thành các nút bật / tắt thả xuống sau trong tab Thiết kế.

biểu tượng

Đây là nơi bạn có thể thay đổi màu của biểu tượng bật tắt.

Văn bản

Tại đây bạn có thể đặt màu cho văn bản chuyển đổi mở và đóng.

Văn bản tiêu đề

Tại đây, bạn có thể điều chỉnh phông chữ văn bản tiêu đề, trọng lượng, kích thước, màu sắc, khoảng cách, chiều cao dòng, v.v.

Phần thân của văn bản

Tại đây bạn có thể điều chỉnh phông chữ, trọng lượng, kích thước, màu sắc, khoảng cách, chiều cao hàng và hơn thế nữa.

biên giới

Ở đây bạn có thể chọn sử dụng một đường viền. Và nếu bạn chọn sử dụng đường viền, bạn cũng có thể chọn màu, thay đổi chiều rộng và chọn kiểu của nó.

khoảng cách

Trong khu vực khoảng cách, bạn có thể thêm phần đệm tùy chỉnh vào đầu, phải, dưới cùng hoặc bên trái của nút gạt. Bạn cũng có thể thay đổi các giá trị này cho máy tính để bàn, máy tính bảng hoặc thiết bị di động.

Các cài đặt nâng cao của mô-đun chuyển đổi

Trong tab Nâng cao của mô-đun chuyển đổi, bạn có thể thêm ID và lớp css duy nhất. Bạn cũng có thể thêm css tùy chỉnh vào các bộ chọn css khác nhau được xác định trước (và được chọn trước) trong mô-đun trượt video thả xuống css tùy chỉnh. Cuối cùng, trong danh sách thả xuống khả năng hiển thị, bạn có thể điều chỉnh khả năng hiển thị của mô-đun của mình trên điện thoại, máy tính bảng và máy tính để bàn.

Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn sử dụng tốt hơn mô-đun Divi Toggle.

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

Cách sử dụng mô-đun Divi Builder Flip