English
French
German
Italian
Polish
Portuguese
SpanishColumns divide a Section into separate areas where you can place and organize Widgets. Each Section contains one or more Columns, and each Column can contain multiple Widgets.
Columns give you control over the width, alignment, spacing, and appearance of different areas within a Section. You can rearrange Columns using drag and drop, adjust their width for different devices, and customize how Widgets are positioned inside them.
Understanding Columns
Columns sit between Sections and Widgets in the traditional Creative Elements layout structure:
The width of each Column determines how much horizontal space it occupies inside its Section. Column widths can also be adjusted independently for different responsive breakpoints.
Layout Tab
Use the Layout tab to control the Column width and the alignment and spacing of Widgets inside it.
Layout
Column Width
Set the width of the Column as a percentage of the available width inside the Section.
Vertical Align
Control the vertical alignment and distribution of Widgets inside the Column using Top, Middle, Bottom, Space Between, Space Around, Space Evenly, or Stretch.
Horizontal Align
Control the horizontal alignment and distribution of Widgets inside the Column using Start, Center, End, Space Between, Space Around, or Space Evenly.
Widgets Space
Choose how spacing between Widgets inside the Column is created.
- Gap: Use row and column gaps to control the space between Widgets.
- Margin: Use Widget margins to create the spacing.
Columns Gap (Gap only)
Set the horizontal space between Widgets. This control appears when Widgets Space is set to Gap.
Rows Gap (Gap only)
Set the vertical space between Widgets. This control appears when Widgets Space is set to Gap.
Wrap (Gap only)
Control whether Widgets can wrap onto additional lines when there is not enough space in the Column. This control appears when Widgets Space is set to Gap.
Size (Margin only)
Set the amount of space between Widgets. This control appears when Widgets Space is set to Margin.
HTML Tag
Select the semantic HTML element used for the Column.
Style Tab
Use the Style tab to customize the background, overlay, border, and typography of the Column.
Background
Background Type (Normal & Hover)
Choose the type of background used for the Column.
- Classic: Use a color or image as the background.
- Gradient: Create a gradient background.
- Slideshow: Display a sequence of images as the background.
Additional controls become available depending on the selected background type.
Backdrop Filters
Apply visual filtering effects to the area behind the Column. This control is available when a supported background type is selected.
Scrolling Effects
Add background effects that respond as visitors scroll through the page. Enable an individual effect to access its specific controls.
Mouse Effects
Add background effects that respond to mouse movement. Enable an individual effect to access its specific controls.
Transition Duration (Hover)
Set how long the transition between the normal and hover background states takes.
Background Overlay
Background Type (Normal & Hover)
Add an overlay above the Column background using a Classic or Gradient background.
Additional overlay controls become available after a background type is selected.
Opacity (Normal & Hover)
Control the transparency of the background overlay. This control appears when the overlay background type is set to Classic or Gradient.
CSS Filters (Normal & Hover)
Apply visual filtering effects to the background overlay. This control is available when an overlay background is used.
Blend Mode
Control how the overlay blends with the Column background. This control is available when an overlay background is used.
Transition Duration (Hover)
Set how long the transition between the normal and hover overlay states takes.
Border
Border Type (Normal & Hover)
Set the style of the border surrounding the Column.
Border Width (Normal & Hover)
Set the thickness of the Column border. This control becomes available when a Border Type is selected.
Border Color (Normal & Hover)
Set the color of the Column border. This control becomes available when a Border Type is selected.
Border Radius (Normal & Hover)
Control the roundness of the Column corners.
Box Shadow (Normal & Hover)
Add a shadow around the Column to create visual depth.
Transition Duration (Hover)
Set how long the transition between the normal and hover states takes. This control is available when a background or border is configured.
Typography
Heading Color
Set the color of headings inside the Column.
Text Color
Set the default text color inside the Column.
Link Color
Set the default color of links inside the Column.
Link Hover Color
Set the color of links when the visitor hovers over them.
Text Align
Set the alignment of text inside the Column.
Advanced Tab
Use the Advanced tab to control spacing, stacking, motion effects, visibility, and Custom CSS.
Advanced
Margin
Set the space outside the Column to control its distance from surrounding elements.
Padding
Set the space between the Column edges and its content.
Z-Index
Set the stacking order of the Column relative to overlapping elements. Higher values place the Column above elements with lower values.
CSS ID
Assign a unique CSS ID to the Column. Enter the ID without the # symbol.
CSS Classes
Add one or more CSS classes to the Column. Enter class names without the . symbol.
Motion Effects
Scrolling Effects
Add dynamic effects that respond as visitors scroll through the page. Enable an individual scrolling effect to access its specific controls.
Mouse Effects
Add effects that respond to the visitor's mouse movement, including Mouse Track and 3D Tilt. Enable an individual mouse effect to access its specific controls.
Entrance Animation
Apply an animation when the Column enters the visible area of the page.
Offset (Supported Entrance Animations only)
Adjust the animation offset. This control appears only for supported Fade In and Slide In entrance animations.
Scale (Supported Entrance Animations only)
Adjust the animation scale. This control appears only for supported Zoom In and Scale Reveal entrance animations.
Rotate (Supported Entrance Animations only)
Adjust the animation rotation. This control appears only for supported Rotate In entrance animations.
Animation Duration (Entrance Animation only)
Set the duration of the Entrance Animation to Slow, Normal, or Fast. This control appears after an Entrance Animation is selected.
Animation Delay (Entrance Animation only)
Set a delay in milliseconds before the Entrance Animation starts. This control appears after an Entrance Animation is selected.
Visibility
Device-specific Hiding
Control whether the Column is hidden on specific device types such as desktop, tablet, or mobile.
Schedule
Enable scheduled visibility for the Column. When enabled, the From and To controls become available.
From (Schedule only)
Set the date and time when the Column becomes visible. This control appears when Schedule is enabled.
To (Schedule only)
Set the date and time when the Column stops being visible. This control appears when Schedule is enabled.
Customer Group
Control Column visibility based on PrestaShop customer groups using All, Show for, or Hide for. This control is available when the Customer Groups feature is active in PrestaShop.
Groups (Customer Group filter only)
Select the customer groups affected by the visibility rule. This control appears when Customer Group is set to Show for or Hide for.
Custom CSS
Custom CSS
Add custom CSS directly to the Column for more specific styling adjustments. Use selector to target the Column wrapper.