Widget - Creative Elements Documentation

Widgets are the content elements used to build pages in Creative Elements. They can display text, images, buttons, videos, products, menus, and many other types of content and functionality.

Add a Widget by dragging it from the Widget panel into a Container or Column in the Live Editor. Once added, Widgets can be moved, duplicated, customized, or removed as needed.

Most Widgets include three main tabs: Content, Style, and Advanced. The Content and Style controls depend on the selected Widget, while the Advanced tab provides a common set of layout, positioning, effects, and styling controls.

Working with Widgets

Widgets are placed inside the layout structure of your page. Depending on the layout system you are using, a Widget can be placed inside a Container or a Column.

Container Layout

Container

Widget

Section & Column Layout

Section

Column

Widget

Drag a Widget to reposition it within the page structure or move it between compatible Containers and Columns.

Content & Style Tabs

The controls available under the Content and Style tabs depend on the Widget you are editing.

The Content tab contains controls related to the Widget's content and functionality, while the Style tab contains controls for customizing its visual appearance.

For the controls available for a specific Widget, see the Widgets documentation.

Advanced Tab

Use the Advanced tab to control the Widget's layout, positioning, motion effects, transformations, background, border, mask, visibility, and Custom CSS.

Layout

Margin

Set the space outside the Widget to control its distance from surrounding elements.

Padding

Set the space between the Widget wrapper and its content.

Width

Control how much horizontal space the Widget occupies.

Default: Use the default Widget width.
Full Width: Make the Widget use the full available width.
Inline: Size the Widget according to its content.
Custom: Set a specific width.

Custom Width (Custom Width only)

Set a specific width for the Widget. This control appears only when Width is set to Custom.

Align Self

Override the parent Container's alignment for this Widget using Start, Center, End, or Stretch.

This control is available when the Widget uses the Container layout system and its Position is set to Default.

Order

Control the order of the Widget within its parent layout using Start, End, or Custom.

This control is available when Position is set to Default.

Custom Order (Custom Order only)

Enter a custom order value. This control appears only when Order is set to Custom.

Size

Control how the Widget grows or shrinks within the available flex space.

None: Prevent the Widget from growing or shrinking.
Grow: Allow the Widget to grow and fill available space.
Shrink: Allow the Widget to shrink when necessary.
Custom: Set custom Flex Grow and Flex Shrink values.

This control is available when the Widget uses the Container layout system and Position is set to Default.

Flex Grow (Custom Size only)

Set how much the Widget can grow relative to other elements in the same Container. This control appears only when Size is set to Custom.

Flex Shrink (Custom Size only)

Set how much the Widget can shrink relative to other elements in the same Container. This control appears only when Size is set to Custom.

Position

Choose how the Widget is positioned within the page.

Default: Keep the Widget in the normal layout flow.
Absolute: Position the Widget independently within its positioned parent.
Fixed: Position the Widget relative to the viewport.

Horizontal Orientation (Absolute or Fixed Position only)

Choose whether the Widget is positioned from the left or right side. This control appears when Position is set to Absolute or Fixed.

Offset (Horizontal Orientation)

Set the horizontal distance of the Widget from the selected side. This control appears when Position is set to Absolute or Fixed.

Vertical Orientation (Absolute or Fixed Position only)

Choose whether the Widget is positioned from the top or bottom. This control appears when Position is set to Absolute or Fixed.

Offset (Vertical Orientation)

Set the vertical distance of the Widget from the selected side. This control appears when Position is set to Absolute or Fixed.

Z-Index

Set the stacking order of the Widget relative to overlapping elements. Higher values place the Widget above elements with lower values.

CSS ID

Assign a unique CSS ID to the Widget. Enter the ID without the # symbol.

CSS Classes

Add one or more CSS classes to the Widget. Enter class names without the . symbol.

Element Cache

Control whether Element Cache is active for the Widget. Activating cache can improve loading times by storing a static version of the element.

This control is available only when Element Cache is enabled globally.

Motion Effects

Scrolling Effects

Add dynamic effects that respond as visitors scroll through the page.

Enable individual scrolling effects to access their 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.

Sticky

Keep the Widget at the top or bottom of the viewport while the visitor scrolls.

Select Top or Bottom to enable Sticky and display its additional controls.

Sticky On (Sticky only)

Select the devices on which the Sticky effect should be active. This control appears after Sticky is enabled.

Offset (Sticky only)

Set the distance between the sticky Widget and the edge of the viewport. This control appears after Sticky is enabled.

Dynamic Offset (Sticky only)

Enter a CSS selector to dynamically determine the Sticky offset. This control appears after Sticky is enabled.

Effects Offset (Sticky only)

Set the scroll distance before Sticky effects are applied. This control appears after Sticky is enabled.

Stay In Column (Sticky only)

Keep the sticky Widget within the boundaries of its parent. This control appears after Sticky is enabled.

Hide on Scroll (Sticky Top only)

Hide the sticky Widget while scrolling and reveal it again according to its configured behavior. This option is available when Sticky is set to Top.

Hide on Scroll Offset (Hide on Scroll only)

Set the scroll distance used by the Hide on Scroll behavior. This control appears when Hide on Scroll is enabled.

Hide on Scroll Transition Duration (Hide on Scroll only)

Set how long the hide and reveal transition takes. This control appears when Hide on Scroll is enabled.

Entrance Animation

Apply an animation when the Widget 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 animation duration 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 animation starts. This control appears after an Entrance Animation is selected.

Transform

Opacity (Normal & Hover)

Control the transparency of the Widget.

Rotate (Normal & Hover)

Rotate the Widget to change its visual orientation.

Offset (Normal & Hover)

Move the Widget horizontally or vertically using X and Y offsets.

Scale (Normal & Hover)

Increase or decrease the visual size of the Widget.

Skew (Normal & Hover)

Skew the Widget horizontally or vertically.

Flip Horizontal/Vertical (Normal & Hover)

Flip the Widget horizontally or vertically to create a mirrored appearance.

Trigger By (Hover)

Choose which element triggers the hover transformation.

Transition Duration (Hover)

Set how long the transition between the normal and hover transformations takes.

Transition Delay (Hover)

Set a delay before the hover transformation starts.

Background

Background Type (Normal & Hover)

Choose the type of background applied to the Widget wrapper.

Classic: Use a color or image as the background.
Gradient: Create a gradient background.

Additional controls become available depending on the selected background type.

Backdrop Filters (Normal only)

Apply filtering effects to the area behind the Widget. This control appears when the Normal background type is set to Classic or Gradient.

Transition Duration (Hover)

Set how long the transition between the normal and hover background states takes.

Border

Border Type (Normal & Hover)

Set the style of the border surrounding the Widget.

Border Width (Normal & Hover)

Set the thickness of the Widget border. This control becomes available when a Border Type is selected.

Border Color (Normal & Hover)

Set the color of the Widget border. This control becomes available when a Border Type is selected.

Border Radius (Normal & Hover)

Control the roundness of the Widget corners.

Box Shadow (Normal & Hover)

Add a shadow around the Widget.

Transition Duration (Hover)

Set how long the transition between the normal and hover border states takes.

Mask

Enable a mask to control the visible shape of the Widget. The remaining Mask controls appear after this option is enabled.

Shape (Mask only)

Select a predefined mask shape or choose Custom to use your own image. This control appears when Mask is enabled.

Image (Custom Shape only)

Select an image to use as the mask. This control appears when Shape is set to Custom.

Size (Mask only)

Control how the mask is sized using Fit, Fill, or Custom. This control appears when Mask is enabled.

Scale (Custom Size only)

Set a custom size for the mask. This control appears when Size is set to Custom.

Position (Mask only)

Choose the position of the mask over the Widget. Select Custom to define its position manually.

X Position (Custom Position only)

Set the horizontal position of the mask. This control appears when Position is set to Custom.

Y Position (Custom Position only)

Set the vertical position of the mask. This control appears when Position is set to Custom.

Repeat (Mask only)

Control whether and how the mask repeats across the Widget. This control is available when Mask is enabled and Size is not set to Fill.

Visibility

Device-specific Hiding

Control whether the Widget is hidden on specific device types such as desktop, tablet, or mobile.

Schedule

Enable scheduled visibility for the Widget. When enabled, the From and To controls become available.

From (Schedule only)

Set the date and time when the Widget becomes visible. This control appears when Schedule is enabled.

To (Schedule only)

Set the date and time when the Widget stops being visible. This control appears when Schedule is enabled. Dates are interpreted according to the configured timezone.

Customer Group

Control Widget visibility based on PrestaShop customer groups using All, Show for, or Hide for.

This control is available only 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.