1. Tổng quan

• Định nghĩa: Bố cục động là các kiểu trình bày nâng cao cho phép tương tác (chuyển slide, mở tab, xổ nội dung) trực tiếp trên Landing Page mà không cần tải lại trang.
• Lợi ích/Giá trị: Tiết kiệm diện tích trang, nhóm các luồng thông tin đồ sộ (như danh sách sản phẩm, FAQ) thành các khối gọn gàng, tăng trải nghiệm người dùng (UX).
• Đối tượng sử dụng: Marketer, Designer.

2. Giải thích Thuật ngữ & Thông số

• Repeater (Bố cục Lặp): Danh sách các phần tử có thiết kế và cấu trúc giống hệt nhau nhưng nội dung hiển thị có thể khác nhau.
• Accordion: Cấu trúc danh sách thả xuống, khi bấm vào một dòng tiêu đề, nội dung chi tiết bên trong sẽ mở rộng ra.
• Slider/Carousel: Trình chiếu hình ảnh/nội dung trượt ngang.

3. Điều kiện tiên quyết (Prerequisite)

• Biết thao tác quản lý phần tử và layer trên Landing Page Editor.

4. Các bước thao tác

4.1. Khởi tạo và sử dụng Bố cục Lặp (Repeater)

Bố cục lặp được sử dụng để thiết kế danh sách sản phẩm, tin tức có cấu trúc giống nhau.

1. Kéo thả phần tử Bố cục lặp vào trang. Mặc định sẽ xuất hiện nhiều “Item” giống nhau.
2. Thiết kế giao diện (thêm ảnh, đổi font chữ) cho item đầu tiên. Hệ thống sẽ tự động đồng bộ thiết kế đó cho toàn bộ các item còn lại.
3. Nhấp đúp vào từng Item riêng lẻ để thay đổi “Nội dung” (đổi text, đổi ảnh thực tế) mà không làm ảnh hưởng đến cấu trúc thiết kế chung.
4. Tại bảng cài đặt bên phải, thay đổi số lượng item hiển thị trên 1 hàng để chia lại dạng lưới.

4.2. Thiết lập Bố cục Tab

Bố cục Tab giúp gom nhiều nội dung vào một khu vực.

1. Kéo thả phần tử Tab vào trang. Hệ thống sẽ tạo ra 2 phần: Tab Header (các nút bấm tab) và Tab Content (nội dung bên dưới).
2. Chọn Tab Header và tuỳ chỉnh thiết kế riêng cho trạng thái Tab Active (Tab đang được chọn) để làm nổi bật.
3. Chuyển đổi giữa các tab và kéo thả nội dung vào phần Tab Content tương ứng.

4.3. Thiết lập Bố cục Slider (Trượt)

1. Kéo thả phần tử Slider vào trang thiết kế.
2. Tại thanh bên phải, chọn 1 trong 3 Chế độ trượt: Cuộn tự do, Thanh trượt (Slide), hoặc Hiệu ứng Fade (mờ dần).
3. Bật công tắc Tự động chạy và thiết lập Tốc độ di chuyển tính bằng mili-giây.
4. Bật/tắt hiển thị nút phân trang (Dots) hoặc mũi tên chuyển slide (Arrows) và tuỳ chỉnh màu sắc cho chúng.

4.4. Thiết lập Bố cục Accordion

Thường dùng cho mục Câu hỏi thường gặp (FAQ).

1. Kéo thả phần tử Accordion vào trang.
2. Tương tự bố cục lặp, chỉnh sửa thiết kế Header (Câu hỏi) và Content (Câu trả lời) của một Item đầu tiên để áp dụng cho tất cả.
3. Kích hoạt tính năng “Lựa chọn mặc định mở” cho một item cụ thể nếu bạn muốn nội dung đó luôn hiện khi khách truy cập.
4. Kích hoạt tính năng “Chỉ cho phép mở 1 item” để khi người dùng nhấn xem câu hỏi này, các câu hỏi khác sẽ tự động đóng lại, giúp trang web gọn gàng hơn.

Xem hướng dẫn chi tiết tại Hướng dẫn tạo Accordion (FAQ) trên Landing Page

5. Quy tắc vận hành

• Bố cục Slider, nếu chọn Tự động chạy với tốc độ quá nhanh (dưới 3000 ms), có thể khiến người dùng không kịp đọc nội dung.

6. Các câu hỏi thường gặp (FAQ)

• Hỏi: Làm sao để tôi thêm/bớt số lượng Slide trong Slider?
  Trả lời: Bạn nhấp vào phần tử Slider, mở cột quản lý Layer bên tay trái, click chuột phải vào một thẻ Slide bất kỳ và chọn Nhân bản (Duplicate) để thêm, hoặc chọn Xóa (Delete) để bớt.

7. Bước tiếp theo

N/A