Flow & Paywall Builder tạo ra các layout responsive. Bạn không kéo thả các phần tử đến tọa độ cụ thể — thay vào đó, bạn đặt chúng vào trong các container tự động sắp xếp các phần tử con.

Container quyết định hướng sắp xếp (dọc hoặc ngang), căn chỉnh và khoảng cách giữa các phần tử con. Từng phần tử có thể tự điều chỉnh kích thước và margin, hoặc — khi cần — thoát khỏi luồng bố cục bằng cách sử dụng định vị tuyệt đối hoặc cố định.

Sắp xếp lại mà không cần kéo thả gì cả.

Yêu cầu AI Editor thêm huy hiệu “Phổ biến nhất”, thanh footer cố định, hoặc toàn bộ phần social proof mới — nó sẽ tự tạo các container cho bạn.

Explore the AI Editor›

Bố cục

Bố cục là công cụ chính để sắp xếp các phần tử trên màn hình. Mỗi container tự động phân bổ các phần tử con theo một tập hợp quy tắc — hướng, căn chỉnh và khoảng cách. Các phần tử bố cục có trong builder bao gồm:

• Vertical Container: Sắp xếp các phần tử con từ trên xuống dưới
• Horizontal Container: Sắp xếp các phần tử con từ trái sang phải
• Divider: Đường phân cách trực quan giữa các phần tử
• Carousel: Tập hợp các slide có thể cuộn ngang
• Bottom Sheet: Bảng trượt lên từ phía dưới, hiển thị thêm nội dung khi người dùng nhấn vào một nút

Containers là các thành phần xây dựng chính của màn hình. Bạn có thể lồng chúng vào nhau để tạo bố cục phức tạp. Mỗi container có mục Layout trong bảng bên phải để kiểm soát cách phân bố các phần tử con.

Để nhóm các phần tử vào một container mới, dùng hành động layer Wrap. Để xóa container và đưa các phần tử con lên cấp trên, dùng Unwrap.

Hướng

• Free: Không có bố cục tự động. Các phần tử con xếp chồng lên nhau thay vì xếp thành hàng. Chọn Free sẽ chuyển mọi phần tử con sang vị trí Absolute, và thứ tự xếp chồng quyết định phần tử nào che phần tử nào
• Vertical: Các phần tử con xếp từ trên xuống dưới, như các hàng trong một cột
• Horizontal: Các phần tử con sắp xếp từ trái sang phải, như các mục trong một hàng

Thứ tự phần tử

Các phần tử con được hiển thị theo thứ tự xuất hiện trong bảng Layers. Trong container dọc, mục nằm trên cùng trong danh sách sẽ xuất hiện ở đầu màn hình. Trong container ngang, mục trên cùng sẽ xuất hiện bên trái. Kéo các phần tử trong bảng Layers để sắp xếp lại thứ tự, hoặc sử dụng Move up và Move down trong layer actions.

Căn chỉnh

Lưới căn chỉnh xác định vị trí của các phần tử con theo trục ngang của container. Trong container dọc, căn chỉnh kiểm soát vị trí ngang của các phần tử con (trái, giữa, hoặc phải). Trong container ngang, nó kiểm soát vị trí dọc của chúng (trên, giữa, hoặc dưới).

Phân bổ

Phân bổ xác định cách chia không gian giữa các phần tử con dọc theo trục chính:

• Gap (mặc định): Khoảng cách cố định tính bằng pixel giữa các phần tử con liền kề
• Space Between: Các phần tử con trải đều đến hai cạnh; khoảng cách bằng nhau xuất hiện giữa chúng
• Space Around: Không gian đều nhau bao quanh mỗi phần tử con, với khoảng cách nửa kích thước ở hai cạnh
• Space Evenly: Không gian bằng nhau trước, giữa và sau tất cả các phần tử con

Cắt nội dung

Cắt bỏ phần nội dung vượt ra ngoài ranh giới của container. Tắt tùy chọn này nếu bạn muốn cho phép tràn (ví dụ: một badge cố tình nhô ra ngoài mép card).

Vị trí

Theo mặc định, vị trí của mỗi phần tử được xác định tự động bởi bố cục của container chứa nó. Toggle Position cho phép bạn đưa phần tử ra khỏi luồng bình thường và định vị nó theo cách thủ công.

Tương đối (mặc định)

Phần tử vẫn nằm trong luồng bố cục thông thường. Vị trí của nó được xác định tự động theo quy tắc bố cục của container cha — bạn không thể kéo thả tự do. Dùng Margin để điều chỉnh khoảng cách xung quanh phần tử tương đối.

Dùng định vị tương đối cho phần lớn nội dung: khối văn bản, hình ảnh, thẻ, nút và các mục danh sách.

Tuyệt đối

Phần tử thoát khỏi luồng bố cục thông thường và hiển thị đè lên nội dung khác. Nó không còn ảnh hưởng đến bố cục của các phần tử lân cận.

Khi bạn chọn Absolute, các điều khiển bổ sung sẽ xuất hiện:

• Các trường Offset (T, L, R, B): Đặt khoảng cách tính bằng pixel từ phần tử đến từng cạnh của vùng chứa cha
• Anchor grid: Nhấp vào một điểm trên lưới 3×3 để chọn góc, cạnh hoặc tâm của phần tử cha mà phần tử sẽ neo vào
• Horizontal anchor (Left / Center / Right) và Vertical anchor (Top / Center / Bottom): Các dropdown điều khiển điểm neo giống như lưới
• Z-index: Trường số đặt thứ tự xếp chồng của phần tử so với các phần tử được định vị khác

Sử dụng định vị tuyệt đối cho các lớp phủ trang trí, huy hiệu, nút đóng và biểu tượng đặt trên hình ảnh.

Cố định

Phần tử bỏ qua hoàn toàn container cha và ghim vào màn hình. Nó vẫn hiển thị trong khi người dùng cuộn — nội dung trang di chuyển bên dưới nó.

Định vị cố định (Fixed) sử dụng các điều khiển giống như Absolute (offset, lưới neo, Z-index). Tất cả các offset đều tính tương đối so với vùng an toàn (safe area) của màn hình thay vì so với phần tử cha. Ví dụ: offset bằng 0 từ phía dưới sẽ giữ phần tử nằm phía trên thanh home indicator. Để đo offset từ các cạnh vật lý của màn hình, hãy bật tùy chọn Bỏ qua vùng an toàn.

Sử dụng vị trí cố định cho các phần tử cần nổi lên trên nội dung cuộn thay vì chiếm không gian — ví dụ như nút đóng hoặc khôi phục nổi, banner cố định ở đầu trang, nút cuộn lên đầu và thanh điều hướng. Đối với khu vực hành động ở cuối trang, hãy dùng Footer. Để đặt nội dung lên trên một hình ảnh hero, hãy dùng Sliding sheet.

Vị trí trong container Free

Container Free không sắp xếp thứ tự các phần tử con. Do đó, bạn cần tự đặt vị trí cho từng phần tử con. Vị trí Relative không được hỗ trợ. Các phần tử con tuân theo các quy tắc sau:

• Nếu phần tử con cũng là container Free, nó chỉ có thể có vị trí absolute. Adapty ẩn thanh Position của nó. Để hiện lại thanh này, hãy đặt Direction của phần tử con đó thành Vertical hoặc Horizontal.
• Tất cả các phần tử con khác có thể có vị trí absolute hoặc fixed.

Bỏ qua vùng an toàn

Vùng an toàn là phần màn hình tránh khỏi notch, thanh trạng thái và thanh điều hướng phía dưới. Theo mặc định, các phần tử được định vị sẽ nằm trong vùng này.

Chọn hộp kiểm Ignore safe area bên dưới bộ chọn loại vị trí để đo offset của phần tử từ các cạnh vật lý của màn hình. Khi đó, phần tử có thể mở rộng ra phía sau notch và thanh điều hướng phía dưới.

Sử dụng cách này để hiển thị media toàn màn hình: đặt vị trí của hình ảnh hoặc video thành Fixed, đặt cả bốn offset về 0 và chọn Ignore safe area. Media sẽ phủ kín toàn bộ màn hình, từ cạnh này đến cạnh kia.

Tùy chọn này chỉ hoạt động với kiểu định vị absolute và fixed. Với các phần tử relative, nó bị vô hiệu hóa, và khi chuyển phần tử về Relative thì cài đặt này sẽ bị xóa.

Kích thước

Mỗi phần tử đều có các điều khiển Width và Height. Nhấp vào dropdown trên một trong hai để chọn chế độ kích thước.

Chế độ	Kích thước của phần tử	Khả dụng
Fill	Co giãn để lấp đầy không gian trong phần tử cha. Giá trị hiển thị được tính tự động	Chỉ dành cho các phần tử relative
Hug	Thu nhỏ để vừa với nội dung. Giá trị hiển thị được tính tự động	Ở khắp nơi, trừ Free child trong Free container
Fixed	Khớp với giá trị pixel bạn nhập, bất kể kích thước của phần tử cha hay nội dung	Ở khắp nơi
Auto	Co giãn nội dung giữa hai offset	Chỉ dành cho các phần tử Absolute hoặc fixed, khi đã đặt cả Left và Right, hoặc cả Top và Bottom. Adapty tự động áp dụng — bạn không thể tự chọn

Áp dụng hướng Free cho phần tử cha sẽ chuyển kích thước Fill của phần tử con thành Fixed. Nếu phần tử đó cũng dùng hướng Free, kích thước Hug của nó cũng sẽ trở thành Fixed.

Hình ảnh có tỷ lệ riêng của chúng, vì vậy chiều cao bạn đặt sẽ quyết định hình ảnh có bị cắt hay không. Xem Kích thước hình ảnh.

Khoảng cách

Đặt giá trị khoảng cách riêng cho từng cạnh của phần tử.

Điều khiển	Chức năng	Khả dụng
Margin	Thêm khoảng cách giữa phần tử và các phần tử lân cận. Giá trị lớn không bao giờ đẩy phần tử ra ngoài phần tử cha	Bất kỳ phần tử nào có vị trí tương đối. Màn hình không có margin
Padding	Thêm khoảng cách giữa ranh giới của phần tử và nội dung bên trong. Chiều rộng hoặc chiều cao Hug sẽ tăng để bao gồm padding	Container, màn hình và các phần tử khác có nội dung con. Ngoại lệ: các phần tử con trực tiếp của container Free, và bản thân màn hình Free.

Chọn hướng Free direction sẽ xóa mọi padding mà container đang có.

Thứ tự xếp chồng

Các phần tử Relative không bao giờ chồng lên nhau — mỗi container sắp xếp các phần tử con theo thứ tự tuần tự. Việc chồng lên nhau chỉ xảy ra khi một phần tử thoát khỏi luồng thông thường với vị trí Absolute hoặc Fixed.

Phần tử Absolute hoặc Fixed luôn hiển thị phía trên các phần tử anh em Relative, bất kể thứ tự layer. Các phần tử Relative không có trường Z-index, vì chúng không bao giờ chồng lên nhau.

Khi có nhiều hơn một phần tử Absolute hoặc Fixed chiếm cùng một vùng không gian, thứ tự xếp chồng của chúng được xác định bởi hai yếu tố, theo thứ tự ưu tiên:

• Z-index. Giá trị mặc định: 0. Phần tử có giá trị cao hơn sẽ hiển thị ở trên, bất kể thứ tự layer.
• Thứ tự layer. Nếu hai phần tử có cùng z-index, phần tử nằm thấp hơn trong danh sách layer sẽ hiển thị ở trên.