Layouts

Layouts

Page layouts define the structural foundation of every page. They determine how many containers you can use, how these containers are arranged, and how your content adapts across devices. Layouts are fully responsive, while they may present multiple columns on a desktop screen, all containers automatically stack vertically on smaller screens such as mobile phones. Changing layouts never deletes containers, instead it adds or hides containers depending on the layout chosen.

Info

Layouts define how containers are arranged on a page and how the page structure adapts across devices.

Select Layout


Locate the Layout Selector

  1. In the left-side panel, open the Page Layouts section.

Choose a Layout Category

  1. No Header layouts include only the main content containers.
  2. Header layouts add a top container with different height rules.

Click a Layout to Apply It

  1. Switching to a layout with more containers adds a new one.
  2. Switching to one with fewer containers hides the extra containers, but does not delete them.

Add or Edit Content

  1. Click inside any container to place text, images, or other elements.

Change Layouts Anytime

  1. Hidden containers will reappear when returning to a layout that supports them.


Responsive Behavior

All layouts are designed to be completely responsive. Containers displayed side-by-side on desktop will automatically stack vertically when viewed on mobile devices to ensure optimal readability.

Header Layouts

Layouts in the Header category include a special top container, ideal for titles, navigation elements, or page summaries. This container follows different height rules and is managed separately from the main layout containers.

Container Persistence

No content is lost when switching layouts:

  1. Containers outside the chosen layout are simply hidden.
  2. They return automatically when switching to a layout that includes them.