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

Cách tạo thanh trượt accordion đáp ứng trong Divi

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

Thanh trượt đàn accordion là một cách thú vị và hấp dẫn để hiển thị nội dung trong một không gian nhỏ. Thanh trượt Accordion thường được tạo thành từ một số phần tử (hoặc tấm) xếp chồng lên nhau theo chiều ngang, giống như các nếp gấp của bức màn. Và khi bạn di chuột qua một trong các bảng điều khiển, nó sẽ mở rộng để hiển thị nội dung khi các bảng điều khiển accordion khác hợp đồng. Đây là nơi đạt được hiệu ứng mở rộng và co lại của đàn accordion.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo con trỏ đàn accordion đáp ứng trong Divi chỉ sử dụng CSS. Để làm điều này, chúng tôi sẽ sử dụng một số mô-đun Divi để phục vụ như các tấm đàn accordion. Bất kỳ mod nào cũng có thể được sử dụng, nhưng với ví dụ này, chúng tôi sẽ sử dụng mod blurb theo một cách rất sáng tạo để tạo ra một thanh trượt accordion đẹp mắt trông (và hoạt động) tuyệt vời trên cả máy tính để bàn và máy tính để bàn. trên thiết bị di động.

Kiểm tra nó ra!

khảo sát

Dưới đây là tổng quan về những gì chúng tôi sẽ xây dựng trong hướng dẫn này.

Tạo thanh trượt bằng đàn accordion trên divi

Hãy bắt đầu hướng dẫn

Những gì bạn cần để bắt đầu

Để bắt đầu, bạn sẽ cần làm như sau:

  1. Nếu bạn chưa làm như vậy, hãy cài đặt và kích hoạt chủ đề Divi đã cài đặt (hoặc plugin Divi Builder nếu bạn không sử dụng chủ đề Divi).
  2. Tạo một trang mới trong WordPress và sử dụng Divi Builder để chỉnh sửa trang trên giao diện người dùng (nhà xây dựng trực quan).
  3. Tải về 5 các hình ảnh khác nhau trong thư viện để sử dụng làm hình nền cần thiết cho hướng dẫn.

Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.

Tạo thanh trượt bằng đàn accordion đáp ứng trên Divi

Tạo dòng

Để bắt đầu, thêm một hàng của cột vào phần thông thường.

Chọn một bố cục divi

Sau đó mở cài đặt cho dòng và cập nhật như sau:

  • Chiều rộng máng xối: 1
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 800px
  • Chiều cao: 400px (máy tính để bàn); 700px (máy tính bảng và điện thoại)

Giá trị chiều rộng và chiều rộng tối đa có thể được thay đổi theo nhu cầu của bạn. Đàn accordion sẽ được chia tỷ lệ và sẽ hoạt động ở bất kỳ chiều rộng hàng nào. Ngoài ra, thiết lập một chiều cao cố định là rất quan trọng để thiết kế hoạt động. Các phần tử con (cột và mô-đun) sẽ có chiều cao là 100%. Do đó, nếu bạn không đặt chiều cao cố định của hàng, các phần tử con sẽ không có chiều cao.

Thông số cột

Bây giờ chiều cao hàng đã được đặt, hãy mở cài đặt cột và thêm mã CSS sau vào phần tử chính:
Văn phòng

display:flex;flex-direction: row;align-items:center;height: 100%;

Thêm mã css divi

tablette

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ả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

flex-direction: column;

Thuộc tính flex sẽ căn chỉnh các tấm đàn accordion theo chiều ngang trên màn hình và theo chiều dọc trên máy tính bảng và điện thoại. Chiều cao 100% sẽ cho phép các mô-đun mà chúng ta sẽ thêm vào cũng sử dụng giá trị chiều cao 100%.

Tạo bảng điều khiển accordion với các mô-đun Tóm tắt

Thanh trượt accordion có thể được xây dựng bằng bất kỳ loại mô-đun nào. Nếu muốn, chúng tôi có thể sử dụng kết hợp các mô-đun khác nhau để làm bảng điều khiển đàn accordion. Nhưng đối với thiết kế này, chúng tôi sẽ sử dụng Blurb Mods.

Bắt đầu bằng cách thêm một mô-đun trình bày vào dòng.

Thêm một mô-đun tóm tắt divi

Thiết kế mô-đun trừu tượng

Mở cài đặt mô-đun tóm tắt và cập nhật các thông tin sau:

Giữ tiêu đề và nội dung hư cấu. Chúng tôi luôn có thể thay đổi điều đó sau này.

Sau đó cập nhật biểu tượng trình bày như sau:

  • Biểu tượng (máy tính để bàn): biểu tượng đại diện cho một đường mũi tên nằm ngang (xem ảnh chụp màn hình)
Các biểu tượng cấu hình divi
  • Biểu tượng (di chuột): biểu tượng kiểm tra (xem ảnh chụp màn hình)
Sử dụng các biểu tượng khi di chuột divi
  • Biểu tượng (máy tính bảng và điện thoại): biểu tượng đại diện cho một đường mũi tên dọc (xem ảnh chụp màn hình)
thanh trượt accordion divi đáp ứng

bối cảnh

Sau đó cung cấp cho blurb một hình ảnh nền và lớp phủ gradient như sau:

  • Thêm hình nền rộng ít nhất 1000 pixel
  • Vị trí của hình nền: chính giữa bên trái
Cấu hình nền divi trừu tượng

Sau đó thêm một lớp phủ nền gradient.

phao

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • Nền gradient bên trái (di chuột): # 3e215b
  • Độ dốc nền sang phải Màu (di chuột): rgba (0,0,0,0)
  • Hướng Gradient: 90deg
  • Đặt gradient phía trên hình nền: CÓ
thanh trượt accordion divi đáp ứng

biểu tượng

  • Màu biểu tượng: #ffffff
  • Hình ảnh / vị trí của các biểu tượng: bên trái
Sửa đổi mô-đun biểu tượng divi

Sau đó, chuyển đến tab Thiết kế và cập nhật những điều sau:

Tiêu đề và nội dung của văn bản

  • Phông chữ tiêu đề: Poppin
  • Tiêu đề phông chữ: Semi Bold
  • Màu tiêu đề văn bản: trong suốt (máy tính để bàn), #ffffff (di chuột)
  • Kích thước tiêu đề văn bản: 23px
  • Màu văn bản cơ thể: trong suốt (máy tính để bàn), #ffffff (di chuột)
Cấu hình phông chữ mô-đun tóm tắt Divi

Chiều cao và bóng hộp

Khi văn bản có kiểu dáng, gán cho mô-đun chiều cao là 100% và hộp bóng như sau:

  • Chiều cao: 100%
  • Box Shadow: Xem ảnh chụp màn hình
  • Bóng của hộp Vị trí nằm ngang: -12px
  • Bóng của hộp Vị trí thẳng đứng: 0px
Sửa đổi kích thước mô-đun tóm tắt divi

CSS tùy chỉnh

Để các bảng điều khiển accordion (hoặc mô-đun trình bày) của chúng tôi mở rộng và hợp đồng với các mô-đun còn lại, chúng tôi cần thêm CSS tùy chỉnh để thay đổi kích thước của mô-đun bằng flex-grow. Vì chúng ta sẽ có tổng cộng 5 mô-đun tạo nên đàn accordion, chúng ta thêm “flex: 1” cho trạng thái mặc định, sau đó chúng ta thay đổi nó thành “flex: 5” trong trạng thái di chuột.

Trong tab Nâng cao, thêm CSS tùy chỉnh sau, phần tử Blurb chính:

Văn phòng

flex:1;position: relative !important;transition: flex 800ms !important;

tablette

flex:5;

Tóm tắt thông số divi

Sau đó thêm css tùy chỉnh sau vào CSS Blurb Content:

Văn phòng

position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;

Sửa đổi kiểu của mô-đun văn bản divi

tablette

width: 100%;height: 100%;position: relative !important;

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, 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. [Đề xuất]

Mã CSS cho nội dung mô-đun tóm tắt

Tràn và chuyển đổi

  • Tràn ngang: ẩn
  • Tràn dọc: ẩn
  • Thời lượng của quá trình chuyển đổi: 400ms
  • Đường cong tốc độ chuyển tiếp: tuyến tính
Cấu hình tràn mô-đun tóm tắt Divi

Tốt! Đó là một sự tùy chỉnh nghiêm túc của một mô-đun trình bày. Nhưng tin tốt là, tất cả những gì chúng ta phải làm là sao chép chúng để tạo ra các tấm đàn accordion còn lại.

Nhân đôi Blurbs để có thêm các tấm accordion

Di chuột qua mô-đun bản trình bày và nhấp vào biểu tượng trùng lặp bốn lần để tạo tổng cộng năm bảng (hoặc mô-đun) accordion.

Sau đó, cập nhật ảnh nền cho mỗi hiệu ứng mờ mới mà bạn đã nhân bản.

Kết quả cuối cùng

Tạo thanh trượt bằng đàn accordion trên divi

cuối cùng suy nghĩ

Thanh trượt accordion đáp ứng này thực sự có một số yếu tố độc đáo làm cho nó thú vị khi sử dụng. Các tấm Accordion mở rộng và co lại khi di chuột mà không gặp sự cố bất ngờ. Và các biểu tượng bản trình bày thay đổi khi di chuột và trên thiết bị di động để tăng UX. Hy vọng thiết kế này sẽ hữu ích cho dự án tiếp theo của bạn.

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 đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
1 cổ phiếu
cổ phiếu1
tweet
Enregistrer