Column

Each section comprises one or multiple columns, providing structured containers for your content insertion. The arrangement and order of columns can be managed by the drag-and-drop functionality, ensuring seamless customization of your layout. 

Handle icons

• Edit Column: Adjust column positioning by employing a drag-and-drop action.
• Duplicate Column: Replicate columns with a single click.
• Add Column: Insert a new column after the current one, expanding layout possibilities and enhancing content structure.
• Delete Column: Remove columns from the section.

Layout Tab

Layout

Column Width

Define column width in percentage to ensure a balanced distribution of content within the section.

Vertical Align

Opt for alignment options such as top, middle, and bottom, or utilize spacing variations like space between, space around, and space evenly. Additionally, enable the "stretch" option for uniform height distribution.

Horizontal Align

Choose alignment preferences like start, center, and end, alongside spacing options such as space between, space around, and space evenly.

Widgets Space

Set the spacing between widgets in pixels, maintaining optimal visual separation and enhancing readability.

HTML Tag

Specify the desired semantic HTML element to assign to the section.

Style Tab

Background (Normal & Hover)

Background type

Select from Classic, Gradient or Slideshow for the column's background type. Feel free to incorporate each option's specific features to enhance the background dynamics.

Border (Normal & Hover)

Border type

Define the style of the column's border, allowing for versatile design variations.

Border radius

Control the curvature of column corners with precision, enhancing visual appeal and softening edges.

Box shadow

Enhance columns with subtle or dramatic shadow effects, adding depth and dimension to your design.

Border width

Set the thickness of the border surrounding the column.

Border color

Specify the color of the border, influencing its appearance and integrating seamlessly with the overall design.

Typography

These set of controls has been deprecated. They are only visible if they were previously populated.

Advanced Tab

Advanced

Margin

Tailor the margin to control the external space surrounding the column, determining its separation from adjacent elements.

Padding

Define the padding within the section to manage internal spacing, influencing the arrangement and appearance of its content.

Z-index

Adjust the Z-index value to establish the stacking order of the column in relation to other elements, ensuring controlled layering.

CSS ID

Assign a distinctive CSS ID to the column for targeted styling or interaction through custom CSS or scripting, allowing for tailored customization.

CSS Classes

Set specialized CSS classes for the columns, enabling custom styling via external stylesheets or scripts, enabling refined design adjustments.

Motion Effects

Scrolling Effects

Incorporate scrolling effects to add dynamic visual transitions as users navigate through the content.

Sticky Effects

Utilize sticky effects to maintain specific elements in view as the user scrolls, enhancing user experience.

Entrance Animation

Apply entrance animations to elements within the column for engaging and captivating presentations.

Visibility

Scheduled Visibility

Schedule the column's visibility to appear or disappear at specific times, optimizing content display.

Customer Group Visibility

Tailor the column's visibility based on different customer groups, providing personalized experiences.

Responsive

Device-specific Hiding

Toggle column visibility for distinct devices such as mobile, tablet, and desktop.

Custom CSS

Custom CSS

Inject your own custom CSS code to implement precise styling adjustments, allowing for a tailored design approach.