Accordion
Accordion giúp bạn ẩn và hiển thị 1 nội dung trên trang, giúp người dùng có thể chủ động mở rộng/ẩn nội dung để xem, tiết kiệm không gian hiển thị, thường được dùng cho phần Q&A (câu hỏi - trả lời) trên trang landing page.
Để sử dụng Accordion bạn thao tác theo các bước sau:
Bước 1: Tạo khung Accordion
Truy cập mục xem thêm trên thanh công cụ nhanh → chọn Accordion.
Hoặc bạn vào Thêm mới → Phần tử → Accordion.
Bước 2: Chỉnh sửa nội dung và thiết lập cho Accordion
Accordicon sẽ bao gồm Accordicon Menu và Accordicon Content.
1. Accordion Menu
- Bạn thay đổi nội dung, màu sắc, size, font chữ của văn bản của Accordion Menu như thiết lập của phần tử Tiêu đề.
- Bạn thay đổi biểu tượng và thiết lập cho biểu tượng của Accordicon Menu bằng cách bấm vào biểu tượng và thiết lập như trong ảnh:
- Bạn thiết lập màu, kích thước, bo góc,... của Accordion Menu tại phần Thiết lập.
2. Accordion Content
Bạn thay đổi nội dung cho văn bản như sau:
Bạn có thể thêm các phần tử khác như nút bấm, hình ảnh,... tại Accordion Content để sử dụng.
Lưu ý khi tạo accordion: không kéo khung Accordion Content sát với khung Accordion Menu, vì như vậy khi hiển thị ở trang xuất bản sẽ bị lỗi.
Khi bạn sử dụng Accordion thì mặc định ở chế độ hiển thị nội dung Accordion Content. Nếu bạn muốn ẩn, bạn bấm chọn toàn Accordion rồi chọn Ẩn nội dung như hình bên dưới. Bạn muốn chỉnh sửa nội dung Accordicon Content thì bấm Hiện nội dung lại.
Để thiết kế nội dung thành các cột đều nhau, bạn cần tạo nhóm các nội dung này và chọn căn đều dọc.
Lưu ý khi thiết kế accordion dạng có nội dung 2 bên: Bạn tạo nhóm nhỏ cho danh sách mỗi bên, mỗi nhóm căn đều dọc. Tiếp theo, bạn tạo nhóm lớn từ 2 nhóm nhỏ này.
