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.

• Color – Select a solid color for the background.
• Type – Choose the type of background, such as color, image, or gradient.
• Image – Upload or select an image to use as the background. This control is only available when the background type is set to “image”.
• Image Size – Define the default size of the background image. This control is only available when the background type is set to “image”.
• Image Settings – Further image customization options, like repeat, position, and custom dimensions. This control is only available when the background type is set to “image”.
• Gradient – Create a color gradient for the background. This control is only available when the background type is set to “gradient”.
• Gradient Animation – Add animated effects to the background gradient. This control is only available when the background type is set to “gradient”.
  • Scale – Adjust the size of the gradient pattern.
  • Speed – Set the speed of the gradient animation.
• Overlay – Apply an overlay to the background, choosing from color, image, or gradient options.
  • Color – Pick a color for the overlay.
  • Type – Select the type of overlay, such as color, image, or gradient.
  • Image – Choose an image for the overlay. This control is only available when the overlay type is set to “image”.
  • Image Size – Specify the default size of the overlay image. This control is only available when the overlay type is set to “image”.
  • Image Settings – Additional image settings for the overlay. This control is only available when the overlay type is set to “image”.
  • Gradient – Set a gradient for the overlay. This control is only available when the overlay type is set to “gradient”.
  • Gradient Animation – Apply animated effects to the overlay gradient. This control is only available when the overlay type is set to “gradient”.
    • Scale – Change the size of the gradient pattern in the overlay.
    • Speed – Control the speed of the overlay gradient animation.

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.