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


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.
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.


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

Advanced Tab


Tailor the margin to control the external space surrounding the column, determining its separation from adjacent elements.
Define the padding within the section to manage internal spacing, influencing the arrangement and appearance of its content.
Adjust the Z-index value to establish the stacking order of the column in relation to other elements, ensuring controlled layering.
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.


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.


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.
© WebshopWorks - Professional PrestaShop Addons