Layouts

layouts in the creation engine define how elements are arranged within a page or section layouts act as the structural foundation that controls the spatial arrangement, alignment, and distribution of content before you add detailed visual elements like text, images, and buttons think of layouts as the skeleton or grid system of your page—they establish the overall spatial structure and flow, making it easier to build organized, consistent, and responsive designs what are layouts? layouts are predefined container structures that provide multiple column/row combinations and flexible space management options they work alongside elements to organize how content flows and aligns on a page each layout has a specific structure and purpose, making it easy to select the right layout for your design needs without starting from scratch key characteristics of layouts structural containers provide the framework for organizing page content flexible arrangements support 1 column, 2 column, 3 column, and 4 column layouts auto responsive some layouts automatically adapt to different column counts or screen sizes predefined spacing come with built in padding, margins, and gaps so you don't have to configure spacing manually drop zones act as containers where you can drag and drop elements to add content layout & structure panel the layout & structure panel in the left sidebar contains all available layout options you access it by clicking the layout & structure tab on the left navigation bar panel features search bar a "find " input to search for layouts by name expandable layout categories a dropdown showing "layout & structure" that can be collapsed/expanded visual previews each layout shows a thumbnail preview of its structure (helps you understand how it arranges space) layout names clear labels beneath each thumbnail (e g , "container", "section", "flex container") all layouts can be added to the canvas by clicking them or dragging them onto the page available layout types the creation engine provides a comprehensive set of layout options, each designed for different structural needs 1\ form container purpose a specialized layout optimized for building forms and handling form related interactions visual structure a full width container designed to hold form elements use cases contact forms, login forms, registration pages multi step forms with organized field groups forms that require specific event handling (submit, reset) features full width by default built in event handlers (on submit, on reset, on click) page navigation and login navigation support payment condition support (can require payment on submission) when to use when you need to group form fields together with form specific behavior and interactions 2\ section purpose a general purpose container for grouping related content into distinct, visually separated sections visual structure a full width block that helps organize content into logical sections use cases hero sections, feature sections, testimonials content that should be visually grouped with margins or backgrounds building modular page layouts with clear visual separation features full width by default customizable background, borders, and styling acts as a semantic container for content grouping easy to style with unique backgrounds or border treatments when to use when you want to organize related content into visually distinct blocks with clear separation 3\ div purpose the most basic, flexible layout container for grouping any elements visual structure a simple rectangular container with no predefined styling use cases generic containers for wrapping elements creating nested layout structures building custom layouts when predefined options don't fit grouping elements for styling or layout purposes features completely flexible and unstyled by default can be nested inside other containers fully customizable with css classes and styling lightweight and performant when to use as a fallback for flexible, custom layouts or when you need a simple wrapper without predefined styles 4\ container purpose a centered, bounded layout container that adds fixed or max width constraints and centers content horizontally visual structure a centered box with padding on the sides to constrain width and maintain readability use cases page content that should not stretch full width on large screens centered layouts with a max width constraint marketing pages, landing pages, blog content features horizontally centered on the page max width constraint (prevents content from being too wide) built in horizontal padding for balanced spacing maintains readability on wide screens when to use when you want content to be centered and width constrained, preventing it from stretching too wide on large desktop screens 5\ flex container purpose a flexible box layout that uses css flexbox for advanced alignment and spacing control visual structure a container that enables flexible distribution of child elements use cases complex layouts requiring precise alignment (e g , space between, center, flex end) layouts where elements should grow/shrink based on available space building responsive navigation bars, toolbars, or button groups creating equal width columns that adapt to content features full flexbox control (justify content, align items, flex direction, flex wrap) flex gap support for spacing between items individual flex properties for children (flex grow, flex shrink, flex basis) horizontal and vertical alignment options when to use when you need advanced layout control beyond simple column structures; especially useful for navigation bars, button groups, and dynamic alignment scenarios 6\ form field container purpose a specialized, atomic container that represents a complete form field as a single, inseparable unit key concept the form field container treats the label and input as one combined entity you cannot add, position, or manage labels and inputs as separate elements inside this container visual structure a compact, self contained field block that can include label input control validation message and helper text (when applicable) use cases use this component for individual form fields (for example name, email, password) enforcing consistent label–input alignment across the ui maintaining accessibility and semantic correctness by default building clean, uniform form layouts in a predictable way features automatically links the label and input provides built in spacing and alignment between label and input uses an accessibility ready structure (no manual wiring required) prevents layout breaking separation of form elements ensures consistent styling across all form fields when to use use the form field container whenever you need to add a form field treat it as a single unit, not as a layout surface for independently placing labels and inputs 7\ single column full width purpose a simple, full width single column layout for vertically stacking content visual structure a single column that spans the full width of the container use cases blog post layouts, long form content mobile first designs sequential content that reads top to bottom text heavy pages features full width with no column splitting simple vertical stacking mobile friendly by nature clean, minimal layout when to use when you want a straightforward, full width single column layout for content that reads top to bottom 8\ two column 2 1 split purpose a two column layout with unequal column widths (67% / 33% ratio) visual structure two columns side by side, with the left column being twice as wide as the right use cases main content (left) with sidebar (right) layouts product details with related products sidebar article with comments sidebar dashboard with main content and supplementary panel features 2 1 width ratio (approx 67% / 33%) responsive stacking on mobile (typically becomes 100% width on small screens) clear visual hierarchy (left column gets more emphasis) common pattern for web layouts when to use when you have a main content area that should be wider than a sidebar or supplementary information panel 9\ three column 1 2 1 purpose a three column layout with a balanced center column flanked by narrower side columns (25% / 50% / 25% ratio) visual structure three columns with the center column being twice as wide as the left and right columns use cases centered main content with left and right navigation/info panels gallery layouts with side information panels dashboard layouts with main content and side information balanced three column content layouts features 1 2 1 width ratio (25% / 50% / 25%) visually balanced with emphasis on center content responsive behavior (becomes single column on mobile) useful for layouts where all three sections are equally important when to use when you need three columns with a larger, centered main column and narrower side columns for supporting information 10\ four column auto fit purpose an auto responsive four column grid layout that automatically adjusts columns based on available space and content visual structure four equal width columns that automatically wrap and adapt to screen size use cases product grids, card layouts, gallery layouts portfolio displays, team member cards feature cards, pricing cards dashboard widgets features four equal width columns auto fit behavior (columns wrap to fewer columns on smaller screens) great for responsive card based layouts automatic gap spacing between items when to use when you want to display multiple items (cards, products, features) in a grid that automatically adapts to screen size 11\ five column grid purpose a five column grid layout for displaying many items in a dense, organized grid visual structure five equal width columns that create a dense grid pattern use cases product catalogs with many items icon/image galleries tile based layouts dashboard with many small components features five equal width columns responsive wrapping on smaller screens efficient use of wide screens automatic gap spacing when to use when you have many items to display and want to maximize the number of items visible on wide screens how layouts work – the design flow layouts follow a clear workflow in the creation engine step 1 select a layout from layout & structure panel open the layout & structure panel on the left sidebar browse available layouts or use the search bar to find a specific layout look at the thumbnail preview to understand the structure step 2 add layout to canvas click the layout to add it to the current page canvas the layout appears on the canvas as a visual container with a drop zone (labeled "add form elements here" or similar) the layout is also added to the layers tree showing its position in the page hierarchy step 3 customize the layout adjust dimensions modify width, height, padding, and margin using the component editor panel on the right change styling update background colors, borders, shadows, and other visual properties configure layout behavior set flex properties, alignment, spacing (gap), and wrapping if applicable step 4 add elements inside the layout once the layout is in place, add visual elements (text, images, buttons, forms) inside the layout's drop zones elements automatically align and space according to the layout's rules step 5 nest layouts layouts can be nested inside other layouts to create complex, multi level structures for example, a layout inside a layout creates a grid within a grid key features of layouts 1\ structural organization layouts provide a clear structure that makes pages easier to understand and maintain instead of manually positioning each element, layouts handle the positioning automatically based on the layout type benefits faster design process (choose a layout, add elements) consistent spacing and alignment easier to modify later (change layout properties once instead of each element) 2\ responsive behavior most layouts include responsive behavior that automatically adapts to different screen sizes (desktop, tablet, mobile) responsive features multi column layouts stack into single columns on mobile column widths adjust based on available space padding and margins scale appropriately breakpoints built in for common device sizes example a "two column 2 1 split" layout might show two columns on desktop but stack into one column on mobile 3\ flexible customization while layouts come with predefined structures, they are fully customizable dimensions adjust width, height, max width spacing control padding (internal spacing) and margin (external spacing) styling change background colors, borders, shadows, font properties advanced properties modify flex properties, alignment, gaps, overflow behavior 4\ drop zones each layout provides visual drop zones where you can add elements drop zones are clearly indicated on the canvas and in the layers tree, making it obvious where elements should be placed 5\ nesting capability layouts can be nested inside other layouts to create complex multi level structures this nesting allows for complex, hierarchical page structures while maintaining clean organization layouts vs elements – key difference layouts define how content is arranged (structure) elements define what content is (content) aspect layouts elements purpose provide spatial structure display actual content example "two column" container text, image, button inside container role organize space fill the space nesting can contain elements and other layouts sit inside layouts focus arrangement and spacing content and interaction example workflow add a "two column 2 1 split" layout to define the structure add a heading element in the left column add an image element in the right column the layout controls arrangement; elements provide content best practices for using layouts 1\ start with layout structure define the page’s structural layout before adding any elements, form containers, or fields to avoid rework and keep the hierarchy clear this aligns with common form structuring guidance that recommends organizing a form into clear sections/structure rather than placing inputs first good practice add high level layout blocks first (e g , section, container, columns) to establish the page flow and hierarchy use form containers only after the structure is established, so form content sits inside a stable layout skeleton add form field containers as content inside a form container (not as structural layout blocks), so “field units” remain inside the intended form context correct order section / container form container form field containers buttons and actions why this matters prevents layout rework later because structure changes won’t force field by field rearrangement keeps the page structure clean and predictable by separating layout concerns (sections/containers) from form content (fields) avoids misusing form specific containers as general layout blocks, which helps maintain consistent responsive behavior and organization 2\ leverage predefined layouts use predefined layouts whenever possible instead of building custom structures from scratch this ensures consistency, saves time, and makes your page more maintainable good practice use "two column 2 1 split" for main content + sidebar use "four column auto fit" for product grids use "single column full width" for simple stacked content 3\ nest layouts thoughtfully nesting layouts can create complex structures, but avoid excessive nesting (more than 3 4 levels), which can make pages harder to maintain good practice nest layouts to group related content areas keep nesting depth reasonable (2 3 levels is usually sufficient) use the layers tree to visualize and manage nesting 4\ use flex container for advanced alignment when you need precise control over alignment, spacing, or distribution, use the flex container layout instead of trying to manually position elements good practice use flex container for navigation bars, button groups, toolbars set flex properties (justify content, align items) instead of manual positioning let flexbox handle distribution automatically 5\ maintain responsive design ensure your layouts are responsive by testing them on different screen sizes use layouts with built in responsive behavior or configure responsive breakpoints good practice use layouts with auto fit or responsive column wrapping test your page on desktop, tablet, and mobile views use the device preview in the toolbar to check different screen sizes 6\ document layout purposes in complex pages with multiple layouts, use clear naming and organization in the layers tree so it's easy to understand each layout's purpose good practice rename layouts with descriptive names (e g , "hero section", "features grid", "footer navigation") group related layouts in the layers tree add comments (in layers) if your platform supports it