English
French
German
Italian
Polish
Portuguese
SpanishSections are structural elements used to organize page content in Creative Elements. A Section contains one or more Columns, while the Columns contain Widgets.
Sections can span the full width of the page or be limited to a defined content width. You can divide them into different Column structures, adjust their height and alignment, and customize their appearance using backgrounds, borders, shape dividers, and other styling options.
Understanding Sections
A Section creates a horizontal area of your page and provides the structure in which Columns and Widgets are placed.
The basic hierarchy is:
You can add as many Sections as needed and rearrange them by dragging them above or below other Sections. Widgets can be added to Columns using drag and drop.
Section Structure
Each Section can contain one or more Columns. The selected structure determines how the available horizontal space is divided between them.
One Column
Two Columns
Three Columns
Different Column structures can be selected depending on the layout you want to create.
Section Width
The content inside a Section can use a Boxed or Full Width layout.
Boxed
Content is limited to a defined width inside the Section.
Full Width
Content uses the full available width of the Section.
The Stretch Section option can additionally extend the Section itself across the full width of the page.
Layout Tab
Use the Layout tab to control the structure, dimensions, alignment, and behavior of the Section.
Layout
Tabbed Section
Enable a tabbed layout to organize the Section into multiple tabs. Additional Tab Bar controls become available when this option is enabled.
Tab Bar (Tabbed Section only)
Choose whether the Tab Bar is displayed horizontally or vertically. This control appears when Tabbed Section is enabled.
Position (Tabbed Section only)
Set the position of the Tab Bar. A horizontal Tab Bar can be positioned at the Top or Bottom, while a vertical Tab Bar can be positioned on the Left or Right.
Vertical Position (Vertical Tab Bar only)
Align a vertical Tab Bar using Top, Middle, or Bottom.
Align (Tabbed Section only)
Align the tabs using Left, Center, Right, or Stretch.
Pointer (Tabbed Section only)
Choose the visual indicator used for the tabs, including None, Underline, Overline, Double Line, Framed, Background, or Text.
Animation (Supported Pointer types only)
Choose an animation for the Tab Bar pointer. The available animations depend on the selected Pointer type.
Width (Vertical Tab Bar only)
Set the width of the Tab Bar when it is displayed vertically.
Content Width
Choose how the Section's content uses the available horizontal space.
- Boxed: Restricts the content to a specified width.
- Full Width: Allows the content to use the full available width.
Width (Boxed only)
Set the maximum content width. This control appears when Content Width is set to Boxed.
Columns Gap
Set the spacing between Columns using Default, No Gap, Narrow, Extended, Wide, or Wider.
Height
Choose Default, Fit to Screen, or Min Height to control the Section height.
Minimum Height (Min Height only)
Set the minimum height of the Section. This control appears when Height is set to Min Height.
Column Position (Fit to Screen or Min Height only)
Position the Columns using Stretch, Top, Middle, or Bottom. This control appears when Height is set to Fit to Screen or Min Height.
Vertical Align
Control vertical alignment and distribution using Default, Top, Middle, Bottom, Space Between, Space Around, or Space Evenly.
Overflow
Control how content that extends beyond the boundaries of the Section is displayed.
Stretch Section
Extend the Section across the full available width of the page. This control is available for top-level Sections and is hidden for Inner Sections.
HTML Tag
Select the semantic HTML element used for the Section.
Structure
Structure
Select a predefined Column structure for the Section.
Style Tab
Use the Style tab to customize the visual appearance of the Section, including its background, overlay, border, shape dividers, typography, and Tab Bar styling.
Background
Background Type (Normal & Hover)
Choose the background used for the Section. Available background types include Classic, Gradient, Background Video, and Slideshow. Additional controls become available depending on the selected type.
Backdrop Filters
Apply visual filtering effects to the area behind the Section. This control appears when the Normal background type is Classic or Gradient.
Scrolling Effects
Add motion effects to the Section background based on the visitor's scroll position. This control is available when the Normal background is Classic, or when a Gradient background has both gradient colors configured.
Mouse Effects
Add supported motion effects to the Section background based on mouse movement. This control is available when the Normal background is Classic, or when a Gradient background has both gradient colors configured.
Transition Duration (Background Scrolling Effects only)
Set the transition duration of the background motion effect. This control appears when a supported background is configured and Scrolling Effects is enabled.
Background Overlay
Background Type (Normal & Hover)
Add a Classic or Gradient overlay above the Section background.
Opacity (Normal & Hover)
Control the transparency of the overlay. This control appears when the corresponding overlay background type is Classic or Gradient.
CSS Filters (Normal & Hover)
Apply visual filters to the background overlay.
Blend Mode
Control how the Normal overlay blends with the background beneath it.
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 Section.
Border Width (Normal & Hover)
Set the border width. This control becomes available when a border type is selected.
Border Color (Normal & Hover)
Set the border color. This control becomes available when a border type is selected.
Border Radius (Normal & Hover)
Control the roundness of the Section corners.
Box Shadow (Normal & Hover)
Add a shadow around the Section.
Transition Duration (Hover)
Set how long the transition between Normal and Hover styles takes.
Shape Divider
Top
Select a decorative shape for the top edge of the Section. After a shape is selected, you can configure its Color, Width, Height, Flip, supported Invert behavior, and Bring to Front option.
Bottom
Select a decorative shape for the bottom edge of the Section. After a shape is selected, you can configure its Color, Width, Height, Flip, supported Invert behavior, and Bring to Front option.
Typography
Heading Color
Set the color of headings inside the Section.
Text Color
Set the default text color inside the Section.
Link Color
Set the default color of links inside the Section.
Link Hover Color
Set the color of links when hovered.
Text Align
Set the alignment of text inside the Section.
Tab Bar
Tab Bar Styling (Tabbed Section only)
Customize the appearance of the Tab Bar, including its Normal, Hover, and Active states. Available controls depend on the selected Tab Bar and Pointer configuration and include text and pointer colors, typography, spacing, icon styling, and related appearance settings.
Advanced Tab
Use the Advanced tab to control spacing, stacking, motion effects, responsive behavior, visibility, and Custom CSS.
Advanced
Margin
Set the space outside the Section.
Padding
Set the space between the Section edges and its content.
Z-Index
Set the stacking order of the Section relative to overlapping elements.
CSS ID
Assign a unique CSS ID without the # symbol.
CSS Classes
Add one or more CSS classes without the . symbol.
Motion Effects
Scrolling Effects
Enable motion effects that respond to the visitor's scroll position. Enabling an individual effect reveals its specific settings.
Sticky
Choose None, Top, or Bottom to control whether the Section remains fixed to an edge of the viewport while scrolling.
Sticky On (Sticky only)
Select the responsive devices or breakpoints on which Sticky is enabled.
Offset (Sticky only)
Set the distance between the sticky Section and the selected viewport edge.
Dynamic Offset (Sticky only)
Enter a CSS selector whose position should be taken into account when calculating the Sticky offset.
Effects Offset (Sticky only)
Set the scroll distance before Sticky effects are applied.
Hide on Scroll (Sticky Top only)
Enable hiding while scrolling. This control appears when Sticky is set to Top.
Entrance Animation
Apply an animation when the Section enters the viewport.
Offset (Supported Entrance Animations only)
Set the movement distance for supported directional Fade In and Slide In animations.
Scale (Supported Entrance Animations only)
Set the initial scale for supported Zoom In and Scale Reveal animations.
Rotate (Supported Entrance Animations only)
Set the rotation angle for supported Rotate In animations.
Animation Duration (Entrance Animation only)
Choose Slow, Normal, or Fast. This control appears after an Entrance Animation is selected.
Animation Delay (Entrance Animation only)
Set the delay in milliseconds before the Entrance Animation starts.
Responsive
Reverse Columns
Reverse the order of Columns at selected responsive breakpoints. A separate option is available for each active responsive breakpoint.
Visibility
Device-specific Hiding
Hide the Section on selected active responsive breakpoints.
Schedule
Enable scheduled visibility for the Section.
From (Schedule only)
Set when the Section becomes visible. This control appears when Schedule is enabled.
To (Schedule only)
Set when the Section stops being visible. This control appears when Schedule is enabled.
Customer Group
Choose 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 affected customer groups. This control appears when Customer Group is set to Show for or Hide for.
Custom CSS
Custom CSS
Add custom CSS directly to the Section. Use selector to target the Section wrapper.