Configure Layout and Spacing

These properties ensure that your page design looks clean, functional, and visually appealing across different devices.

Each element has customizable layout and spacing properties to help create a visually balanced, responsive design. Here’s a breakdown of the available options:

Field Name Description
Margins (Top, Bottom, Left, Right) Set the space around the element.

Margins control the outer spacing between elements to ensure they don’t appear crowded or touch other items on the page.
Padding (Top, Bottom, Left, Right) Set the space inside the element.

Padding adds breathing room within an element, ensuring the content does not sit right up against the edges.
Height (%) Control how much vertical space the element occupies on the screen.
Responsive Pattern Choose how this container adjusts on different screens
  • Stretch width only: The container changes its width to fit the screen but keeps its height.
  • Column shift: The container automatically re-arranges its contents into columns as the screen size changes.
  • Popup: The container appears as a centered overlay.
  • Popup on mobile: The container becomes a popup only on mobile screens, while staying inline on desktop.
Enable container based height Select this check box to unlock additional height settings for finer control:
  • Height (%): Adjusts the vertical space of the element.
  • Container content position: Choose where the content appears within the container—at the Top, Center, or Bottom.