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ạn chế. Thanh trượt Accordion thường được làm từ nhiều thành phần (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 một tấm rèm. 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 tấm accordion khác co lại. Đây là nơi đạt được hiệu ứng đàn accordion của sự giãn nở và co lại.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo một thanh trượt 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ỳ mô-đun nào cũng có thể được sử dụng, nhưng đối với ví dụ này, chúng tôi sẽ sử dụng các mô-đun blurb theo một cách rất sáng tạo để tạo ra một thanh trượt accordion đẹp, trông (và hoạt động) tuyệt vời cả trên máy tính để bàn và 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.
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:
- Nếu bạn chưa có, 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).
- 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).
- 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.
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%;
tablette
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.
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 đề hư cấu và nội dung từ cơ thể. Chúng ta luôn có thể thay đổi điều này 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 đường mũi tên nằm ngang (xem ảnh chụp màn hình)
- Biểu tượng (di chuột): biểu tượng kiểm tra (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 đường mũi tên dọc (xem ảnh chụp màn hình)
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
Sau đó thêm một lớp phủ nền gradient.
phao
- 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Ó
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 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)
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
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;
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;
tablette
width: 100%;height: 100%;position: relative !important;
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 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
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.
