Container Style & Advanced Settings - Creative Elements Documentation

Use the Style and Advanced settings to customize the appearance and behavior of a Container.

The Style tab controls visual properties such as backgrounds, overlays, borders, and shape dividers. The Advanced tab provides additional controls for spacing, Flex Item behavior, positioning, motion effects, transforms, visibility, and Custom CSS.

Style Tab

Customize the Container's background, overlay, border, and shape dividers.

Background

Background Type (Normal & Hover)

Choose the background type used for the Container. Additional controls become available depending on the selected type.

Classic

Color: Set a solid background color.
Image: Choose an image and configure its Loading, Position, custom X and Y Position, Attachment, Repeat, Size, and custom Width where applicable.

Gradient

Color: Set the first gradient color.
Location: Set the position of the first gradient color.
Second Color: Set the second gradient color.
Location: Set the position of the second gradient color.
Type: Choose Linear or Radial.
Angle: Set the direction of a Linear gradient.
Position: Set the origin point of a Radial gradient.

Background Video

Video Link: Enter a YouTube or Vimeo URL, or a direct link to a video file. MP4 is recommended for hosted video files.
Start Time: Set the time in seconds at which the background video starts.
End Time: Set the time in seconds at which the background video stops.
Play Once: Play the background video once instead of looping continuously.
Play On Mobile: Choose whether the background video also plays on mobile devices.
Privacy Mode: Enable privacy-enhanced behavior for supported video providers.
Lazy Load: Delay loading the background video until it is needed.
Background Fallback: Choose an image to display if the background video cannot be loaded.

Slideshow

Slideshow: Add and arrange the images used in the background slideshow.
Infinite Loop: Restart the slideshow after the last image.
Duration: Set how long each slide remains visible.
Transition: Choose the transition effect between slides.
Transition Duration: Set the duration of the transition between slides.
Color: Set a background color behind the slideshow images.
Loading: Choose Default or Preload.
Size: Control how slideshow images fit inside the Container.
Position: Set the position of slideshow images.
Ken Burns Effect: Apply a slow zoom effect to slideshow images.
Direction: Choose whether the Ken Burns effect zooms In or Out.

Backdrop Filters

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

Scrolling Effects

Add motion effects to the Container 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 Container 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.

Hover Transition Duration

Set how long the transition between the Normal and Hover backgrounds takes.

Background Overlay

Background Type (Normal & Hover)

Choose a Classic or Gradient background for the overlay. Additional controls become available depending on the selected background type.

Opacity (Normal & Hover)

Set 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 such as Blur, Brightness, Contrast, Saturation, and Hue to the overlay.

Blend Mode

Choose 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)

Choose the border style used around the Container.

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

Box Shadow (Normal & Hover)

Add a shadow around or inside the Container.

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 Container. After a shape is selected, you can configure its Color, responsive Width and Height, Flip, supported Invert behavior, and Bring to Front option.

Bottom

Select a decorative shape for the bottom edge of the Container. After a shape is selected, you can configure its Color, responsive Width and Height, Flip, supported Invert behavior, and Bring to Front option.

Advanced Tab

Manage spacing, Flex Item behavior, positioning, animations, transforms, visibility, and Custom CSS.

Layout

Margin

Set the space outside the Container.

Padding

Set the space between the Container edges and its content.

Align Self (Default Position only)

Override the parent Flexbox alignment using Start, Center, End, or Stretch. This Flex Item control is available when Position is set to Default.

Order (Default Position only)

Choose Start, End, or Custom to change the visual order of the Container. This control is available when Position is Default.

Custom Order (Custom Order only)

Enter a numeric order value. This control appears when Position is Default and Order is Custom.

Size (Default Position only)

Choose None, Grow, Shrink, or Custom. This Flex Item control is available when Position is Default.

Flex Grow (Custom Size only)

Set a custom grow factor. This control appears when Position is Default and Size is Custom.

Flex Shrink (Custom Size only)

Set a custom shrink factor. This control appears when Position is Default and Size is Custom.

Position

Choose Default, Absolute, or Fixed.

Note: Custom positioning should be used carefully in responsive layouts.

Horizontal Orientation (Absolute or Fixed only)

Choose whether horizontal positioning is measured from the left or right.

Horizontal Offset (Absolute or Fixed only)

Set the horizontal offset from the selected side.

Vertical Orientation (Absolute or Fixed only)

Choose whether vertical positioning is measured from the top or bottom.

Vertical Offset (Absolute or Fixed only)

Set the vertical offset from the selected side.

Z-Index

Set the stacking order of the Container.

CSS ID

Add a custom ID without the # symbol.

CSS Classes

Add custom class names without the . symbol.

Motion Effects

Scrolling Effects

Enable motion effects that respond to the visitor's scroll position.

Vertical Scroll

Move the Container Up or Down while scrolling. When enabled, you can configure Direction, Speed, and Viewport.

Horizontal Scroll

Move the Container Left or Right while scrolling. When enabled, you can configure Direction, Speed, and Viewport.

Transparency

Fade the Container based on scroll position. When enabled, you can configure Direction, Level, and Viewport.

Blur

Apply a changing blur effect while scrolling. When enabled, you can configure Direction, Level, and Viewport.

Rotate

Rotate the Container while scrolling. When enabled, you can configure Direction, Speed, and Viewport.

Scale

Scale the Container while scrolling. When enabled, you can configure Direction, Speed, and Viewport.

Transform Origin

Set the X and Y Anchor Points when Rotate or Scale scrolling effects are enabled.

General

Use Apply Effects On to select the responsive devices or breakpoints on which the effects are active, and Effects Relative To to choose Default, Viewport, or Entire Page.

Sticky

Choose None, Top, or Bottom to keep the Container attached to a selected viewport edge 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 Container 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 activated.

Stay In Column (Sticky only)

Keep the sticky Container within the boundaries of its parent.

Hide on Scroll (Sticky Top only)

Enable hiding while scrolling. This control is available when Sticky is set to Top.

Hide on Scroll Offset (Hide on Scroll only)

Set how far the visitor must scroll before the sticky Container can hide.

Hide on Scroll Transition Duration (Hide on Scroll only)

Set how long the hide and show transition takes.

Entrance Animation

Choose an animation that plays when the Container 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.

Transform

Normal / Hover

Configure separate transform settings for the Normal and Hover states.

Note: Avoid applying transform properties to sticky Containers.

Trigger by (Hover)

Choose whether the Hover transform is triggered by the Container itself or by its Parent Container where available.

Opacity

Set the transparency of the Container.

Rotate

Rotate the Container around the Z axis.

3D Rotate

Enable three-dimensional rotation. When enabled, Rotate X, Rotate Y, and Perspective controls become available.

Rotate X (3D Rotate only)

Rotate the Container around the X axis.

Rotate Y (3D Rotate only)

Rotate the Container around the Y axis.

Perspective (3D Rotate only)

Set the perspective depth used by 3D rotation.

Offset X

Move the Container horizontally.

Offset Y

Move the Container vertically.

Keep Proportions

Link horizontal and vertical scaling.

Scale (Keep Proportions enabled)

Scale the Container proportionally.

Scale X (Keep Proportions disabled)

Scale the Container horizontally.

Scale Y (Keep Proportions disabled)

Scale the Container vertically.

Skew X

Skew the Container along the X axis.

Skew Y

Skew the Container along the Y axis.

Flip Horizontal

Mirror the Container horizontally.

Flip Vertical

Mirror the Container vertically.

Transition Duration (Hover)

Set the duration of the Hover transform transition.

Transition Delay (Hover)

Set the delay before the Hover transform transition starts.

X Anchor Point

Choose Left, Center, or Right as the horizontal transform origin.

Y Anchor Point

Choose Top, Center, or Bottom as the vertical transform origin.

Visibility

Hide On Device

Hide the Container on selected active responsive breakpoints.

Custom CSS

Add custom CSS rules that apply specifically to this Container. Use selector to target the Container wrapper.