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

Một thanh trượt 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 hẹp. Thanh trượt Accordion thường được tạo thành từ một số yếu tố (hoặc bảng) xếp chồng lên nhau theo chiều ngang, giống như nếp gấp của một bức màn. Và khi bạn di chuột qua một trong các bảng, nó sẽ mở rộng để hiển thị nội dung trong khi các bảng accordion khác co lại. Đây là nơi thu được hiệu ứng accordion của sự mở rộng và co lại.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo một con trỏ accordion nhạy cảm trong Divi chỉ bằ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 bảng accordion. Bất kỳ mô-đun nào cũng có thể được sử dụng, nhưng trong ví dụ này, chúng tôi sẽ sử dụng các mô-đun blurb rất sáng tạo để tạo ra một thanh trượt accordion tuyệt đẹp trông (và hoạt động) tuyệt vời cả trên máy tính để bàn và trên di động.

Kiểm tra nó ra!

khảo sát

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

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

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

Để bắt đầu, bạn 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 trình cắm 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 ở mặt trước (hàm tạo trực quan).
  3. Tải khoảng 5 hình ảnh khác nhau lên thư viện phương tiện để sử dụng chú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 một thanh trượt với một cây đàn hồi đáp 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.

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

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

Các giá trị chiều rộng và chiều rộng tối đa có thể được thay đổi theo yêu cầu. Đàn accordion sẽ được thu nhỏ và sẽ hoạt động ở bất kỳ chiều rộng hàng nào. Ngoài ra, điều rất quan trọng là thiết lập một chiều cao cố định để thiết kế hoạt động. Các phần tử con (cột và mô-đun) sẽ có chiều cao 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.

Cài đặt cột

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

hiển thị: flex; flex-direction: row; align-items: centre, height: 100%;

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

hướng flex: cột;

Thuộc tính flex sẽ căn chỉnh các bảng accordion theo chiều ngang trên máy tính để bàn 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 chúng tôi 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 cách sử dụng bất kỳ loại mô-đun. Nếu chúng ta muốn, chúng ta có thể sử dụng kết hợp các mô-đun khác nhau để phục vụ như một bảng điều khiển. Nhưng đối với thiết kế này, chúng tôi sẽ sử dụng các mô-đun Blurb.

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

Tóm tắt thiết kế mô-đun

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

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

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 dòng mũi tên ngang (xem ảnh chụp màn hình)
  • Biểu tượng (di chuột qua): biểu tượng xác minh (xem ảnh chụp màn hình)
  • 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 dòng mũi tên dọc (xem ảnh chụp màn hình)
thanh trượt accordion đáp ứng divi

bối cảnh

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

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]

  • Thêm ảnh nền có chiều rộng tối thiểu 1000 pixel
  • Vị trí của hình nền: trung tâm bên trái

Sau đó thêm lớp phủ nền gradient vào di chuột.

phao

  • Độ dốc nền ở 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 đáp ứng divi

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

Sau đó chuyển đến tab Thiết kế và cập nhật các thông tin 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)

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

Khi văn bản đã được tạo kiểu, chỉ định mô-đun có chiều cao 100% và khu vực bóng mờ 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í dọc: 0px

CSS tùy chỉnh

Để các bảng accordion (hoặc mô-đun trình bày) của chúng tôi phát triển và hợp đồng với các mô-đun còn lại, chúng tôi phải thêm CSS tùy chỉnh để sửa đổi kích thước của mô-đun với 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" ở trạng thái di chuột.

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

Văn phòng

flex: 1; vị trí: tương đối! quan trọng; chuyển tiếp: flex 800ms! quan trọng;

tablette

flex: 5;

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

Văn phòng

vị trí: tuyệt đối! quan trọng; chiều rộng: 280px; padding: 20px; quá trình chuyển đổi: màu 400ms;

tablette

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

chiều rộng: 100%; chiều cao: 100%; vị trí: tương đối! quan trọng;

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

Tốt Đó là một 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 bảng accordion còn lại.

Bản sao trùng lặp cho bảng điều khiển nhiều hơn

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

Sau đó cập nhật hình ảnh nền cho mỗi văn bản trình bày mới mà bạn đã sao chép.

Kết quả cuối cùng

Suy nghĩ cuối cùng

Thanh trượt accordion đáp ứng này thực sự có các yếu tố độc đáo làm cho nó thú vị để sử dụng. Các tấm Accordion mở rộng và co lại trong khi di chuột mà không gặp sự cố bất ngờ. Và các biểu tượng trình bày thay đổi trong 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 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
1 cổ phiếu
cổ phiếu1
tweet
Enregistrer