5.1. Accordion

Accordion là một tiện ích nâng cao trong thiết kế landing page, cho phép bạn sắp xếp nội dung theo dạng mở rộng/thu gọn. Tính năng này giúp người dùng có thể xem thông tin một cách dễ dàng và gọn gàng mà không làm rối giao diện.

Để thêm Accordion vào trang landing page

Nhấn vào Tiện ích ở thanh sidebar của trình chỉnh sửa.
Chọn Accordion trong mục Nâng cao
Chọn phần tử Accordion và kéo vào trang landing page.

1. Trình chỉnh sửa Nội dung

Để thêm nội dung vào các mục Accordion:

Chọn phần tử Accordion.
Nhấn vào Nội dung trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Accordion.
Nhấn vào mục cần thêm nội dung, sau đó kéo các phần từ cần thêm như Text, Image, Button... vào phần nội dung trong phần tử Accordion.

Để quản lý và thêm các mục trong Accordion:

Chọn phần tử Accordion.
Nhấn vào Nội dung trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Accordion.
Chọn hành động cần thực hiện với mục Accordion: Collapse, Nhân bản, Đổi tên hoặc Xóa.

Mẹo:

Nhấn Thêm mục ở cuối danh sách Accordion để thêm một mục trống mới.
Bạn có thể thay đổi thứ tự của các mục. Nhấn và giữ mục cần di chuyển, sau đó kéo nó đến vị trí mong muốn.

Để chọn cách Accordion mở và đóng:

Chọn phần tử Accordion.
Nhấn vào Nội dung trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Accordion.
Chọn một tùy chọn trong mục Chọn trạng thái mặc định:
- Đóng tất cả các mục: Khách truy cập sẽ thấy các mục của Accordion đóng lại ban đầu và chọn mục họ muốn mở để xem thêm.
- Mở mục đầu tiên: Khách truy cập sẽ thấy nội dung của mục đầu tiên, trong khi các mục khác vẫn đóng.
- Mở tất cả các mục: Khách truy cập sẽ thấy nội dung của tất cả các mục ngay khi trang tải.
Nhấn vào nút chuyển đổi Cho phép mở nhiều mục cùng lúc:
- Bật: Khách truy cập có thể mở nhiều mục cùng lúc.
- Tắt: Khách truy cập chỉ có thể mở một mục tại một thời điểm.
Áp dụng hiệu ứng chuyển tiếp:
- Có: Khách truy cập có thể thấy hiệu ứng chuyển tiếp (nhanh/chậm) khi bấm chọn các mục khác nhau.
- Không:

Lưu ý: Tùy chọn cho phép mở nhiều mục trong Accordion sẽ không khả dụng nếu bạn chọn Mở tất cả các mục làm trạng thái mặc định.

2. Trình chỉnh sửa Thiết kế

Bạn có thể tùy chỉnh mọi phần của Accordion để phù hợp với giao diện của trang. Tùy chỉnh tiêu đề các mục, khung chứa nội dung của từng mục hoặc toàn bộ không gian của một mục (bao gồm cả tiêu đề và khung chứa).

Để thiết kế Accordion:

Chọn phần tử Accordion.
Nhấn vào Thiết kế trên thanh thiết lập nhanh để mở trình chỉnh sửa thiết kế Accordion.
Chỉnh sửa Accordion theo ý của bạn trong popup Thiết kế

Hướng dẫn chi tiết các phần trong popup Thiết kế:

Đường viền: cho phép bạn thêm và tùy chỉnh viền xung quanh của Accordion, bạn cũng có thể điều chỉnh độ bo tròn của viền, chi tiết tại đây.

3. Trình chỉnh sửa Nâng cao

Bạn có thể thiết lập các tính năng nâng cao cho Accordion để tạo ra trải nghiệm độc đáo, phù hợp với nhu cầu cụ thể của từng dự án.

Để thiết lập nâng cao Accordion:

Chọn phần tử Accordion.
Nhấn vào Nâng cao trên thanh thiết lập nhanh để mở trình chỉnh sửa Nâng cao Accordion.
Thiết lập Accordion theo ý của bạn trong popup Nâng cao.

Hiệu ứng: Cho phép bạn thêm các hiệu ứng động cho tiện ích trên landing page để tạo sự thu hút và sinh động hơn, chi tiết tại đây.
Đồng bộ thiết kế Máy tính/ Điện thoại: Cho phép bạn cài đặt tùy chọn đồng bộ thiết kế giữa máy tính và điện thoại, chi tiết tại đây.
Kiểu định vị: Cho phép bạn lựa chọn kiểu định vị phù hợp để tối ưu hóa trang web và mang lại trải nghiệm tốt nhất cho khách hàng, chi tiết tại đây.
Tùy chỉnh nâng cao: Cho phép bạn tùy biến giao diện và hành vi của thành phần thông qua các lớp CSS và mã CSS tùy chỉnh, chi tiết tại đây.