Div

Design Controls

Layout

The Layout controls allow you to fine-tune the positioning and spacing of content within the Div element. You can align items horizontally or vertically, adjust gaps between elements, and set specific breakpoints for responsive design.

• Align – Choose how to horizontally align content within the container.
• Vertical Align – Adjust the vertical alignment of content within the container.
• Gap – Set the space between items in the container.
• Horizontal – Further options for horizontal layout adjustments.
  • Align – Specify the horizontal alignment of items.
  • Vertical Align – Choose the vertical alignment for items when in horizontal layout.
  • Vertical At – Set a breakpoint for when the vertical alignment settings kick in.

Background

These controls let you personalize the background of your Div element with colors, images, or gradients, and include settings for images like size, position, and more. You can also set up dynamic background transitions and overlays for a more visually engaging user experience.

Learn more about utilizing Backgrounds.

Container

The Container controls are pivotal in defining the structural canvas of your web elements. These settings allow you to manipulate the container’s dimensions, ensuring content consistency across various display sizes. Additionally, detailed customization options for padding and borders, including radius, style, and shadow, enable a more refined and visually appealing presentation.

• Width – Specify the width of the container.
• Min Height – Set a minimum height for the container, ensuring it never shrinks below this vertical space.
• Padding – Adjust the internal space within the container boundaries, affecting the layout of contained content.
  • Padding – Define the specific padding space on all sides within the container.
• Borders – Customize the container’s borders, enhancing its visual presence on the webpage.
  • Radius – Round the corners of your container by setting a border radius, contributing to a smoother, more organic look.
  • Styling – Choose the style of the border, such as solid, dashed, or dotted, and select its color.
  • Shadow – Apply a shadow effect around the container, creating depth on the page.

Spacing

Spacing controls are crucial for maintaining a balanced layout with clear visual separation between elements.

• Margin Top – Define the space above the element, separating it from other elements or sections above it.
• Margin Bottom – Set the space below the element, ensuring it doesn’t directly touch the elements or sections below it.