Các phần tử bố cục dùng để nhóm các phần tử khác lại với nhau và kiểm soát cách chúng được sắp xếp trên màn hình.

Flow & Paywall Builder bao gồm sáu loại phần tử bố cục:

• Containers: sắp xếp các phần tử con theo trục ngang hoặc dọc
• Carousel: container có thể vuốt, hiển thị từng slide một
• Bottom Sheet: panel trượt lên từ phía dưới màn hình và hiển thị đè lên nội dung bên dưới
• Footer: panel được ghim ở cuối màn hình, nằm ngoài vùng cuộn
• Sliding sheet: panel đặt nội dung chính của bạn lên trên một ảnh hero
• Dividers: đường kẻ mảnh dùng để phân tách các hàng hoặc cột

Container

Container nhóm các phần tử theo chiều dọc hoặc chiều ngang. Vertical Container sắp xếp các phần tử thành hàng; Horizontal Container sắp xếp chúng thành cột.

Thay đổi hướng của container

Hướng của container không cố định. Bạn có thể chuyển đổi giữa Vertical, Horizontal và Free trong mục Layout ở bảng bên phải bất kỳ lúc nào. Khi chuyển sang Free, tất cả các phần tử con sẽ tự động được chuyển sang vị trí Absolute.

Các phần tử con hiển thị theo thứ tự xuất hiện trong bảng Layers — kéo để sắp xếp lại.

Wrap và Unwrap

Để chuyển một phần tử hiện có thành container, chọn nó và dùng thao tác layer Wrap. Kéo thêm các phần tử vào container mới từ panel Layers. Để xóa stack và đưa các phần tử con lên một cấp, dùng Unwrap.

Carousel

Carousel là một vùng chứa có thể vuốt, hiển thị một slide tại một thời điểm. Người dùng vuốt ngang để chuyển sang slide tiếp theo, hoặc carousel tự động chuyển slide theo hẹn giờ.

Carousel chứa một tập hợp các layer Slide. Khi slide đang active, các phần tử trên layer đó sẽ hiển thị trên màn hình.

Không giống Tabs, slide đang hiển thị trong carousel không được hiển thị dưới dạng nhóm có thể chọn — các slide không thể được tham chiếu trong điều kiện hoặc văn bản động. Hãy dùng Carousel cho mục đích xoay vòng hình ảnh, không phải để phân nhánh theo lựa chọn của người dùng.

Thay đổi slide đang hoạt động

Khi bạn chọn carousel, builder hiển thị thanh điều khiển pop-up với dropdown Slide và nút + Add Slide.

• Nhấp + Add Slide để thêm một slide trống mới.
• Dùng dropdown Slide để chuyển slide nào đang hoạt động trên canvas — hoặc nhấp vào layer Slide tương ứng trong panel Layers.

Để sắp xếp lại các slide, kéo chúng trong Carousel ở panel Layers.

Thuộc tính

Tự động cuộn

Tự động cuộn sẽ chuyển slide liên tục — người dùng không cần vuốt để xem hết nội dung.

Hai tham số thời gian điều khiển hành vi này:

• Delay — thời gian mỗi slide hiển thị (ms).
• Duration — thời gian chuyển tiếp giữa các slide (ms).

Kích thước carousel

Các điều khiển chuyên dụng xác định kích thước của carousel và khoảng cách giữa các slide liền kề. Đặt Height thành Fixed để bố cục không bị dịch chuyển khi người dùng vuốt giữa các slide có độ dài nội dung khác nhau.

Kích thước slide

Width và Height cho từng slide. Mặc định là Fill để mỗi slide theo kích thước của carousel. Đặt chiều rộng cố định để tạo hiệu ứng peek, nơi các slide lân cận hiển thị một phần.

Dots

Chỉ báo trang ở cuối carousel. Nó cho người dùng biết có bao nhiêu slide và slide nào đang active.

Tắt toggle Show dots để ẩn chỉ báo slide. Khi dots hiển thị, các thuộc tính sau điều chỉnh giao diện của chúng:

• Color — màu nền của dấu chấm không hoạt động.
• Active Color — màu nền của dấu chấm tương ứng với slide đang hiển thị.
• Size — đường kính của mỗi dấu chấm, tính bằng pixel.
• Gap — khoảng cách giữa các dấu chấm liền kề.
• Padding — khoảng cách giữa hàng dấu chấm và nội dung carousel phía trên.

Bottom Sheet

Bottom Sheet là một bảng bố cục trượt lên từ phía dưới màn hình, hiển thị phía trên nội dung bên dưới.

Kích hoạt sheet khi nhấn — ví dụ, đằng sau một liên kết Show all plans — thay vì khi màn hình tải.

Cấu trúc

Một Bottom Sheet đi kèm với hai layer cấp cao nhất:

• Heading — một container ở đầu sheet, được điền sẵn với layer văn bản Title và Close button . Chỉnh sửa hoặc xóa chúng tùy ý.
• Content — container chính. Thêm sản phẩm, nút, liên kết hoặc bất kỳ phần tử nào khác vào đây.

Hiển thị ban đầu

Mặc định, bottom sheet xuất hiện ngay khi màn hình được hiển thị. Để mở nó theo yêu cầu thay vào đó:

1. Hoàn thiện nội dung của sheet trước — các layer ẩn không thể chỉnh sửa, vì vậy sheet phải giữ hiển thị cho đến khi bạn điền xong nội dung.
2. Trong panel Layers, chọn bottom sheet.
3. Đặt Visibility thành Hide .

Sheet vẫn còn trong cây layer nhưng ngừng hiển thị trên màn hình.

Kích hoạt bottom sheet

Để mở một bottom sheet đang ẩn, gắn hành động Show vào một phần tử khác:

1. Chọn phần tử kích hoạt (ví dụ: nút hoặc liên kết văn bản).
2. Mở tab Interactions trong panel bên phải.
3. Nhấp Add trigger > On tap, rồi Add action.
4. Đặt Action thành Show và chọn bottom sheet từ dropdown.

Footer

Footer là một container cố định chiếm phần dưới cùng của màn hình. Nó có thể có chiều cao tùy ý và chứa bất cứ thứ gì, từ một nút đơn lẻ đến nhiều hàng văn bản. Dùng footer cho những nội dung cần giữ nguyên vị trí trong khi phần còn lại của màn hình cuộn — nút CTA, văn bản pháp lý, liên kết.

Không giống các phần tử thông thường, footer kéo dài vào vùng an toàn phía dưới của thiết bị: nền của nó trải dài đến tận mép màn hình.

Mỗi màn hình chỉ được có một footer. Bạn không thể sao chép footer hiện có hoặc thêm footer mới.

Footer hay một phần tử cố định thông thường

Cả hai đều hiển thị trên màn hình trong khi nội dung cuộn. Hãy chọn tùy chọn phù hợp với nhu cầu của bạn:

• Dùng Footer cho thanh điều hướng chính ở cuối màn hình (nút CTA, văn bản pháp lý, liên kết). Footer tự giữ không gian riêng, đảm bảo nội dung luôn cuộn rõ ràng phía trên nó và không bị ẩn sau, đồng thời tự động phủ vùng an toàn ở đáy màn hình.
• Dùng phần tử cố định cho những thứ cần nổi trên nội dung đang cuộn thay vì giữ không gian riêng, hoặc ghim vào một cạnh khác ngoài cạnh đáy — ví dụ: nút đóng/khôi phục nổi, banner cố định ở đầu, hoặc nút cuộn lên đầu trang. Bạn tự quản lý khoảng cách vùng an toàn cho chúng.

Sliding sheet

Sliding sheet đặt nội dung chính của bạn lên trên một ảnh hero. Panel che phần dưới màn hình và trượt lên trên nền màn hình khi người dùng cuộn. Nền sẽ di chuyển trên iOS và đứng yên trên các nền tảng khác. Bạn không thể thay đổi hành vi này.

Các phần tử bạn thêm bên ngoài sheet sẽ hiển thị phía trên nền màn hình. Hãy dùng chúng cho tiêu đề hoặc logo trên ảnh hero.

• Start position xác định sheet chiếm bao nhiêu phần màn hình, tính từ dưới lên. Theo mặc định, sheet che phủ 55% phía dưới, và 45% phía trên hiển thị ảnh nền. Bạn không thể đặt chiều cao tuyệt đối cho sheet. Để sheet cao hơn, hãy tăng giá trị Start position.
• Fill đặt nền phía sau nội dung của bạn. Tăng độ mờ để cho ảnh hero hiển thị xuyên qua.

Chỉ được phép có một sliding sheet trên mỗi màn hình. Bạn không thể nhân đôi một sliding sheet đã có hoặc thêm một cái mới.

Sliding sheet so với Bottom Sheet

Cả hai panel đều chiếm phần dưới của màn hình. Chọn loại phù hợp với nhu cầu của bạn:

• Dùng Sliding sheet để hiển thị nội dung chính của màn hình đè lên trên một hero image. Sheet hiển thị ngay khi màn hình mở ra và chỉ di chuyển khi người dùng cuộn.
• Dùng Bottom Sheet cho nội dung xuất hiện theo yêu cầu, chẳng hạn như danh sách gói ẩn sau liên kết Show all plans. Bạn hiển thị nó bằng hành động Show.

Divider

Horizontal Divider và Vertical Divider là các đường kẻ mỏng phân tách nội dung. Dùng Horizontal Divider để chia hàng, và Vertical Divider để chia cột bên trong container ngang. Điều chỉnh độ dày, màu sắc và độ dài từ panel bên phải.