1. Tổng quan

• Định nghĩa: Bố cục là cấu trúc phân chia hàng/cột chứa các phần tử. Phương tiện là khối hiển thị nội dung động. Hộp bật lên là cửa sổ hiển thị độc lập.
• Mục đích: Xây dựng phần khung chính và các điểm tiếp xúc quan trọng.

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

• fr: Đơn vị đo lường lấp đầy khoảng trống của vùng chứa. Sử dụng khi cần chia đều hàng cột hoặc theo tỷ lệ. Ví dụ: vùng chứa hai cột có kích thước 1fr × 1fr là hai cột có kích thước bằng nhau.
• max-content, min-content: Đơn vị kích thước được tính theo min/max của nội dung phần tử bên trong.
• cổng nhìn (vw, vh): Đơn vị tính theo chiều rộng/cao của viewport hiển thị màn hình.

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

• Đang thao tác bên trong Landing Page Editor.

4. Các bước thực hiện / Quy trình triển khai

4.1. Bố cục: Vùng chứa và Xếp chồng

Vùng chứa

• Tạo nhanh hàng cột, gắn phần tử vào vùng chứa.
• Giống như đơn vị kích thước, hàng cột của vùng chứa cũng bao gồm đơn vị kích thước cố định và linh động:
  • Đơn vị cố định:
    • Đơn vị px: Là kích thước cố định, giống đơn vị px của kích thước
    • Đơn vị fr: là đơn vị đo lường lấp đầy khoảng trống của vùng chứa. Sử dụng khi cần chia đều hàng cột hoặc theo tỷ lệ. Ví dụ: vùng chứa hai cột có kích thước 1fr × 1fr là hai cột có kích thước bằng nhau và một nửa chiều rộng vùng chứa.
  • Đơn vị linh động:
    • Đơn vị %: tỷ lệ kích thước phần trăm so với kích thước vùng chứa
    • Đơn vị max-content / min-content: Là đơn vị kích thước được tính theo kích thước min hoặc kích thước max của nội dung phần tử bên trong hàng cột.
    • Đơn vị kích thước cổng nhìn (vw, vh): Là đơn vị kích thước tính theo chiều rộng hoặc chiều cao của cổng nhìn
    • Đơn vị kích thước min/max: Là đơn vị kích thướng trong giới hạn kích thước min và kích thước max

• Khoảng cách giữa các hàng, khoảng cách giữa các cột.

Xếp chồng

• Xếp chồng là bố cục mà các item (phần tử con) của nó được xếp theo hướng dọc hoặc hướng ngang.
• Có hai loại xếp chồng là xếp dọc và xếp ngang.
• Tạo xếp chồng: Chọn các phần tử gộp lại với nhau để tạo bố cục xếp chồng. Có thể tạo bố cục xếp chồng dọc hoặc ngang

• Có thể di chuột vào khoảng cách giữa các item, nhấn và kéo để điều chỉnh nhanh khoảng cách.

4.2. Bố cục: Động (Lặp, Tab, Accordion)

Bố cục lặp

• Bố cục lặp là kiểu bố cục mà các items của nó lặp lại nhau về thiết kế
• Có thể gắn phần tử vào item lặp, thêm item lặp, sắp xếp item lặp, nhân đôi item lặp, xóa item lặp.
• Sửa thiết kế của phần tử lặp (áp dụng toàn khối), sửa riêng thiết kế của phần tử.
• Sửa số item trên hàng, khoảng cách hàng, khoảng cách cột.

Tab

• Tab bao gồm tab header và tab content. Tab Header và Tab Content được thiết kế theo kiểu Slider. Cách chỉnh sửa giống như Slider.
• Có thể sửa tab header, sửa tab active bằng cách chọn trạng thái tab → lựa chọn active, thêm phần tử vào tab.

Accordion

• Bố cục accordion bao gồm danh sách các item có thể đóng mở để xem nội dung. Mỗi item có phần header và content.
• Có thể thêm item, Chọn item mở content, Lựa chọn mặc định mở, Xoá item.
• Sửa text header, sửa thiết kế header, sửa thiết kế content.
• Sửa số cột hiển thị, khoảng cách hàng, khoảng cách cột, lựa chọn chỉ cho phép mở một item.

4.3. Contact Form

• Thêm Contact Form.
• Thêm submit message.
• Sửa thông tin vị trí, khoảng cách hàng, khoảng cách cột.

4.4. Phương tiện

Slider

• Tương tự cố cục lặp. Slider cũng gồm các item lặp giống nhau về thiết kế.
• Có thể di chuyển đến slide item bằng cách bấm nút trước, nút sau hoặc cuộn tự do đến slide.
• Có các hiệu ứng di chuyển slide như hiệu ứng fade hoặc hiệu ứng trượt slide.
• Thêm phần tử vào slide item sẽ hiển thị thông báo có hay không thêm phần tử đó vào các slide item khác.

• Có thể thêm slide item, sắp xếp vị trí, nhân đôi, xóa slide item.

• Cấu hình hướng, loại slider, số slide item trên một trang, khoảng cách giữa các slide.

• Chế độ tự động chạy, tốc độ di chuyển slide, hiển thị nút phân trang.

Youtube

• Nhập đường dẫn, các chức năng video.

Bộ đếm

• Khoảng cách mục, Khoảng cách mục và nhãn, Kích thước, Chỉnh sửa nhãn.
• Chạy đến mốc thời gian, khoảng thời gian chạy.
• Thiết kế (Màu nền, đường viền, bo góc, bóng đổ, nhãn).

Bộ sưu tập

• Thêm item, sửa ảnh thumb, sửa ảnh chi tiết.

4.5. Hộp bật lên (Popup)

• Thêm mới, sửa tên, xóa, mở hộp bật lên, đóng sửa popup.

• Thêm phần tử vào popup, chia hàng cột.

• Loại popup, tự động mở, nút đóng.

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

• (Yêu cầu Input) Đối với bố cục lặp, nếu bạn gộp phần tử mới vào item lặp, hệ thống sẽ hỏi xác nhận việc áp dụng lên tất cả các item.
• Khi làm việc trên Popup, bạn phải bấm “Đóng sửa popup” để lưu và thoát về lại giao diện trang gốc.

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

• Việc phân chia bố cục (Vùng chứa/Xếp chồng) là bước nền tảng thiết yếu trước khi thả bất cứ phần tử nào vào, giúp trang tương thích responsive tốt hơn.

7. Bước tiếp theo

• Thiết kế nâng cao