Mô-đun chuyển đổi của Divi cho phép bạn hiển thị nội dung bổ sung cho mỗi lần nhấp chuột mà không cần thêm mã jQuery. Tương tự như mô-đun Accordion, mô-đun chuyển đổi thường được sử dụng để chia sẻ một nội dung được nhóm lại, chẳng hạn như các câu hỏi thường gặp. Tuy nhiên, bạn cũng có thể sử dụng chúng cho các tác vụ khác, chẳng hạn như để cấu trúc trang của bạn. Trong hướng dẫn này, chúng ta sẽ sử dụng các mô-đun chuyển đổi có chiều rộng đầy đủ để tạo một thiết kế trang đơn giản hoạt động khi nhấp chuột. Phong cách thiết kế mà chúng tôi hướng tới là táo bạo và sạch sẽ. Bạn cũng có thể tải xuống tệp JSON miễn phí!

Đi thôi.

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh nó trông như thế nào trên các kích thước màn hình khác nhau.

Hãy bắt đầu tái tạo

Thêm một phần mới

khoảng cách

Bắt đầu bằng cách tạo một trang mới (hoặc mở một trang hiện có) và thêm một phần thông thường vào đó. Điều duy nhất cần làm trong cài đặt phần là xóa tất cả đệm trên và dưới mặc định khỏi cài đặt giãn cách.

  • Đệm hàng đầu: 0px
  • Đệm dưới: 0px

Thêm một dòng mới

Cấu trúc cột

Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:

kích thước

Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và đảm bảo hàng chạm vào bên trái và bên phải của vùng chứa phần bằng cách thay đổi cài đặt định cỡ. Đây là một bước quan trọng trong hướng dẫn này. điều này cho phép mô-đun Toggle, mà chúng tôi sẽ thêm vào sau trong hướng dẫn này, trở thành chiều rộng đầy đủ.

  • Sử dụng chiều rộng máng tùy chỉnh: Có
  • Chiều rộng máng xối: 1
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%

khoảng cách

Chúng tôi cũng đang xóa phần đệm trên và dưới mặc định khỏi hàng. Thao tác này sẽ xóa tất cả khoảng trống giữa mô-đun chuyển đổi và vùng chứa hàng / cột mà nó được đặt.

  • Đệm hàng đầu: 0px
  • Đệm dưới: 0px

Thêm một mô-đun rocker

Chèn tiêu đề và nội dung

Đã đến lúc bắt đầu thêm mô-đun! Mô-đun duy nhất chúng ta cần trong dòng này là mô-đun Toggle. Chúng tôi sẽ sử dụng khu vực tiêu đề để thêm tiêu đề và đặt mọi thứ nội dung mà chúng tôi muốn chia sẻ trong lĩnh vực nội dung nội dung. Hãy thoải mái đặt bất cứ thứ gì bạn muốn vào khu vực nội dung; từ văn bản đến hình ảnh và hơn thế nữa.

Etat

Chúng tôi sử dụng trạng thái chuyển đổi đóng, nhưng bạn cũng có thể để nó mở.

  • Nhà nước: đóng

Cài đặt biểu tượng mặc định

Chuyển sang tab Thiết kế và thay đổi cài đặt biểu tượng mô-đun cho phù hợp:

  • Màu biểu tượng: # 570fff
  • Sử dụng kích thước biểu tượng tùy chỉnh: YEs
  • Kích thước phông chữ biểu tượng: 6vw

Cài đặt biểu tượng khi di chuột

Thay đổi màu của biểu tượng di chuột.

  • Màu biểu tượng: # f2f2f2

Cài đặt chuyển đổi dự phòng mặc định

Sau đó, thay đổi màu nền của công tắc đã đóng.

  • Chuyển đổi màu nền: #ffffff

Di chuột qua các cài đặt

Và thay đổi màu sắc lơ lửng quá.

  • Chuyển đổi màu nền: # 000000

Cài đặt văn bản tiêu đề

Tiếp tục bằng cách thay đổi cài đặt văn bản của tiêu đề như sau:

  • Tiêu đề văn bản màu: # 000000
  • Cấp độ tiêu đề: H2
  • Cảnh sát tiêu đề: Montserrat
  • Tiêu đề văn bản: Căn lề trái
  • Kích thước tiêu đề văn bản: 8vw (máy tính để bàn), 10vw (máy tính bảng và điện thoại)
  • Khoảng cách chữ tiêu đề: -1vw (máy tính để bàn), -0.5vw (máy tính bảng và điện thoại)
  • Chiều cao của dòng tiêu đề: 0.7em

Cài đặt văn bản tiêu đề đóng mặc định

Sau đó, truy cập các tham số văn bản của tiêu đề đã đóng và sửa đổi chúng cho phù hợp:

  • Phông chữ đóng: Montserrat
  • Tiêu đề đã đóng Kích thước văn bản: 18vw (máy tính để bàn), 16vw (máy tính bảng và điện thoại)
  • Chiều cao tiêu đề đóng: 0.8em

Di chuột qua các cài đặt văn bản của tiêu đề

Thay đổi màu của văn bản chú thích đóng trong di chuột.

  • Tiêu đề đã đóng Màu văn bản: # f4f4f4

Cài đặt văn bản

Đi đến cài đặt văn bản cơ thể và thực hiện một số thay đổi là tốt.

  • Phông chữ cơ thể: Fira Sans
  • Trọng lượng của phông chữ: Nhẹ
  • Căn chỉnh văn bản cơ thể: Justify
  • Kích thước văn bản cơ thể: 1.2vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Chiều cao cơ thể: 2.1em

khoảng cách

Đồng thời thêm phần đệm tùy chỉnh ở trên cùng, dưới cùng và bên trái của mô-đun.

  • Đệm hàng đầu: 10vw
  • Đệm đáy: 10vw
  • Đệm trái: 6vw

biên giới

Tiếp tục bằng cách xóa đường viền mặc định của mô-đun trong cài đặt viền.

  • Chiều rộng của đường viền: 0px

Chuyển đổi nội dung CSS

Xác định Toggle tham số mô-đun bằng cách thêm các dòng mã CSS sau vào màn hình nền:

chiều rộng: 60vw; viền trái: 0.2vw solidblack; padding: 5vw 5vw 5vw 5vw;

Thay đổi độ rộng của dòng mã CSS trên máy tính bảng và điện thoại:

chiều rộng: 85vw;

Sao chép toàn bộ phần nhiều lần tùy thích

Khi bạn đã hoàn thành phần đầu tiên, dòng và mô-đun Toggle, bạn có thể sao chép toàn bộ phần bao nhiêu lần tùy ý. tùy thuộc vào lượng nội dung bạn muốn hiển thị trên trang của bạn.

Thay đổi nội dung

Hãy chắc chắn thay đổi toàn bộ nội dung của flip-flop trong mỗi mô-đun flip-flop.

Thay đổi màu sắc của các biểu tượng

Sau đó, mở từng mô-đun Toggle riêng lẻ và thay đổi màu biểu tượng. Những thứ chúng tôi đã sử dụng cho hướng dẫn này được đề cập bên dưới:

  • Màu biểu tượng 1: # ff9000
  • Màu biểu tượng 2: # 00ffd4

khảo sát

Bây giờ tất cả các bước đã được thực hiện, chúng ta hãy nhìn lại lần cuối những gì đã xảy ra với các kích thước màn hình khác nhau.

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã chỉ cho bạn cách sáng tạo với mô-đun Toggle của Divi. Chính xác hơn; chúng tôi đã làm cho chúng có chiều rộng tối đa và sử dụng chúng để hiển thị nội dung từ các phần khác nhau theo những cách sáng tạo. Hướng dẫn này cho thấy rằng bạn có thể dễ dàng sử dụng các mô-đun của Divi bên ngoài hộp khi bạn tính đến các thùng chứa khác nhau. Bạn cũng có thể tải xuống miễn phí tệp JSON hướng dẫn! Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, xin vui lòng để lại nhận xét trong phần bình luận bên dưới.