Layout tab
Configure the layout and the main settings of the section.
Content Width
Choose between Boxed or Full Width settings to determine the width of your content. When selecting Boxed, use the slider to define the desired width.
Columns Gap
Set the gap between columns to achieve your preferred layout.
Height
Choose between Fit to Screen – dynamically adjusting the section to fill the screen – or Min Height, where you can set a minimum height and use the slider to fine-tune the section's height.
Vertical Align
Adjust the vertical positioning of elements within a container.
Overflow
Overflow refers to the behavior of content that exceeds the dimensions of its container. This provides control over how overflowed content is displayed – whether hidden or shown with scrollbars.
Columns Gap
Specify the desired semantic HTML element to assign to the section.
Structure
Set different column structures to the section.
Tab Bar
Set the tab bar layout as horizontal or vertical.
Horizontal
- Position: Place the tab bar at the top or bottom of the section.
- Align: Align the tab bar items to the left, center, right, or stretch them across the section.
- Pointer: Choose a pointer style for the active tab: none, underline, overline, double line, framed, background, or text.
- Animation: Apply an animation effect for tab transitions: fade, slide, grow, drop in, drop out, or none.
Vertical
- Position: Set the tab bar on the left or right side of the section.
- Vertical Position: Align the tab bar items to the top, middle, or bottom.
- Align: Align the tab bar items to the left, center, right, or stretch them.
- Pointer: Choose a pointer style for the active tab: none, underline, overline, double line, framed, background, or text.
- Animation: Apply an animation effect for tab transitions: fade, slide, grow, drop in, drop out, or none.
- Width: Define the width of the tab bar in pixels or percentage units.
Style tab
Customize the appearance and design of the section.
Classic
- Color
- Set a solid background color to provide a consistent base for your design.
- Image
- Upload an image to use as the background. Additional settings include:
- Loading: Choose whether to load the background image lazily or immediately.
- Position: Define the image's position within the background (e.g., center, top-left).
- Attachment: Set the background image to scroll with the page or remain fixed.
- Repeat: Determine if the image repeats or stays single across the background area.
- Size: Control the size of the background image, such as cover, contain, or custom dimensions.
- Backdrop Filters
- Apply visual filters to the background, such as blur, brightness, or contrast, enhancing its appearance.
- Transition Duration (On hover)
- Set the time duration in milliseconds that the hover transition effect takes to complete.
Gradient
- Color
- Select the primary color for the gradient background.
- Location
- Define the starting position of the primary color in the gradient effect.
- Second Color
- Select the secondary color to blend into the gradient.
- Location
- Set the starting point of the secondary color within the gradient.
- Angle
- Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
- Backdrop Filters
- Apply visual filters to the gradient background for added depth and effects.
- Transition Duration (On hover)
- Set the time duration in milliseconds that the hover transition effect takes to complete.
Background Video
- Video Link
- Add a YouTube, Vimeo, or self-hosted video link to use as the background.
- Start Time
- Specify the time (in seconds) to begin playing the video.
- End Time
- Specify the time (in seconds) to stop playing the video.
- Play Once
- Choose whether the video plays only once or loops continuously.
- Play On Mobile
- Decide whether to enable video playback on mobile devices.
- Background Fallback
- Upload a cover image to display if the video fails to load.
Slideshow
- Color
- Set a background color to display alongside the slideshow.
- Slideshow
- Add multiple images to create a background slideshow.
- Infinite Loop
- Choose whether the slideshow loops continuously or stops after one cycle.
- Duration
- Define the display time for each slide in milliseconds.
- Transition
- Select a transition effect for switching between slides.
- Transition Duration
- Set the time (in milliseconds) for the transition animation between slides.
- Background Size
- Determine how the slideshow images are scaled within the section (e.g., cover, contain).
- Background Position
- Adjust the position of slideshow images (e.g., top, center, bottom).
- Ken Burns Effect
- Enable or disable the Ken Burns effect for a subtle zoom animation on slides.
Scrolling Effects
Enhance elements with various dynamic effects triggered by the user's scrolling behavior.
- Vertical Scroll: Configure the scroll direction, speed, and viewport range for vertical scrolling effects.
- Horizontal Scroll: Set the scroll direction, speed, and viewport range for horizontal scrolling effects.
- Transparency: Adjust the transparency based on the direction, level, and viewport range.
- Blur: Apply a blur effect with customizable direction, level, and viewport range.
- Scale: Scale the element with direction, speed, and viewport controls.
- Transition Duration: Set the time duration in milliseconds that the effect takes to complete.
- Apply Effects on: Choose whether to apply scrolling effects on desktop, tablet, or mobile devices.
- Effects Relative to: Define whether the effects are relative to the default container, the viewport, or the entire page.
Mouse Effects
Enable mouse based effects for added interactivity.
- Mouse Track: Adjust the direction and speed of the effect as the user moves the mouse across the page.
Background Type
Select the background type: None, Classic, or Gradient.
Classic
- Color
- Set a solid background color to provide a consistent base for your design.
- Image
- Upload an image to use as the background. Additional settings include:
- Loading: Choose whether to load the background image lazily or immediately.
- Position: Define the image's position within the background (e.g., center, top-left).
- Attachment: Set the background image to scroll with the page or remain fixed.
- Repeat: Determine if the image repeats or stays single across the background area.
- Size: Control the size of the background image, such as cover, contain, or custom dimensions.
- Opacity
- Adjust the overlay's transparency level.
- CSS Filters
- Apply visual effects like Blur, Brightness, Contrast, Saturation or Hue to enhance the overlay's appearance.
- Transition Duration (On hover)
- Set the time duration in milliseconds that the hover transition effect takes to complete.
Gradient
- Color
- Select the primary color for the gradient background.
- Location
- Define the starting position of the primary color in the gradient effect.
- Second Color
- Select the secondary color to blend into the gradient.
- Location
- Set the starting point of the secondary color within the gradient.
- Angle
- Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
- Opacity
- Adjust the overlay's transparency level.
- CSS Filters
- Apply visual effects like Blur, Brightness, Contrast, Saturation or Hue to enhance the overlay's appearance.
- Transition Duration (On hover)
- Set the time duration in milliseconds that the hover transition effect takes to complete.
Border Type
Define the border style of the element.
Border Width
Set the thickness of the element's border.
Border Color
Define the color of the element's border.
Border Radius
Adjust the corner roundness of the element.
Box Shadow
Apply shadow effects to add depth to the element.
Type
Apply a shape divider to the top or bottom of the section.
- Width: Adjust the divider's width.
- Height: Define the divider's height.
- Flip: Flip the shape divider horizontally.
- Bring to Front: Place the divider above the section's content.
- Invert: Invert the shape for an alternate effect.
Color
Set the divider's color.
Heading Color
Set the color of headings within the section.
Text Color
Define the color of the text content.
Link Color
Choose the color for hyperlinks.
Link Hover Color
Set the color of hyperlinks when hovered.
Text Align
Align the text to the left, right or center.
Typography
Adjust the typography settings for the tab labels to align with your design.
Text Color (Normal, Hover & Active)
Set the text color for tabs in their normal state, on hover, and when active.
Background Color (On Normal)
Choose the background color for tabs in their normal state.
Pointer Color (On Hover & Active)
Define the color of the pointer effect when hovering over or selecting a tab.
Horizontal Padding
Adjust the horizontal padding inside each tab item.
Vertical Padding
Set the vertical padding inside each tab item.
Icon Size
Customize the size of the icon displayed within the tab item.
Icon Spacing
Define the space between the icon and the text.
Space Between
Specify the spacing between individual tab items.
Pointer Width
Adjust the width of the pointer effect beneath or around the tabs.
Full Width (On Horizontal)
Enable or disable full-width tabs for horizontal layouts.
Overflow Scrolling
Choose whether to allow horizontal scrolling for tabs that exceed the container width.
Margin
Set the margin around the tabs for spacing control.
Border Type
Select the type of border for the tabs (e.g., solid, dashed, dotted).
Border Width
Define the thickness of the tab borders.
Border Color
Choose the color for the tab borders.
Border Radius
Adjust the corner roundness of the tabs.
Box Shadow
Add a shadow effect to the tabs for depth and dimension.
Advanced tab
Access advanced layout, motion, and custom CSS options.
Margin
Define the external space around the widget for separation from adjacent elements.
Padding
Set the internal spacing within the widget to control the arrangement of its content.
Width
Specify the widget's width behavior: Full Width, Inline, Custom, or Calculate.
Full width
- Vertical align: Set the vertical alignment to start, center, end, or stretch.
- Size: Define the size as none, grow, or custom to determine widget dimensions.
Inline
- Vertical align: Set the vertical alignment to start, center, end, or stretch.
- Size: Define the size as none, grow, or custom to determine widget dimensions.
Custom
- Custom Width: Set the width in pixels, percentage, or viewport width (vw).
- Vertical align: Set the vertical alignment to start, center, end, or stretch.
- Size: Define the size as none, grow, or custom to determine widget dimensions.
Calculate
- Calc: Use calculations like 100% - 20px to dynamically define the width.
- Min Width: Set a minimum width in pixels, percentage, or viewport width (vw).
- Vertical align: Set the vertical alignment to start, center, end, or stretch.
- Size: Define the size as none, grow, or custom to determine widget dimensions.
Order
Control the widget's order using start, end, or custom values.
Position
Choose default, absolute or fixed positioning for the widget.
Absolute
- Horizontal Orientation: Determines the element's horizontal alignment within its nearest positioned ancestor.
- Offset: Specifies the distance between the element and the left or right edge of its containing block.
- Vertical Orientation: Sets the element's vertical alignment within its nearest positioned ancestor.
- Offset: Defines the space between the element and the top or bottom edge of its containing block.
Fixed
- Horizontal Orientation: Controls the element's horizontal alignment relative to the browser window.
- Offset: Adjusts the distance between the element and the left or right edge of the viewport.
- Vertical Orientation: Manages the element's vertical alignment relative to the browser window.
- Offset: Defines the space between the element and the top or bottom edge of the viewport.
Z-index
Set the stacking order of the widget relative to other elements.
CSS ID
Assign a unique CSS ID for custom styling or interaction.
CSS Classes
Add custom CSS classes for targeted styling via external stylesheets.
Element Cache
Improves loading times by storing a static version of this element.
Scrolling Effects
Enhance elements with various dynamic effects triggered by the user's scrolling behavior.
- Vertical Scroll: Configure the scroll direction, speed, and viewport range for vertical scrolling effects.
- Horizontal Scroll: Set the scroll direction, speed, and viewport range for horizontal scrolling effects.
- Transparency: Adjust the transparency based on the direction, level, and viewport range.
- Blur: Apply a blur effect with customizable direction, level, and viewport range.
- Rotate: Rotate the element using direction, speed, and viewport settings.
- Scale: Scale the element with direction, speed, and viewport controls.
- Apply Effects on: Choose whether to apply scrolling effects on desktop, tablet, or mobile devices.
- Effects Relative to: Define whether the effects are relative to the default container, the viewport, or the entire page.
Mouse Effects
Enable mouse based effects for added interactivity.
- Mouse Track: Adjust the direction and speed of the effect as the user moves the mouse across the page.
- 3D Tilt: Enable 3D tilt effects with controllable direction and speed for a more immersive experience.
Sticky Effects
Fix elements at the top or bottom of the viewport as the user scrolls for persistent visibility.
- Sticky on: Apply sticky effects on desktop, tablet, or mobile devices.
- Offset: Set the offset in pixels to trigger the sticky effect after scrolling.
- Dynamic Offset: Use a CSS selector to dynamically set the offset based on other elements on the page.
- Effects Offset: Configure the pixel offset to control when additional effects apply.
- Stay in Column: Choose whether the sticky element remains within its column during scrolling (yes or no).
- Hide on Scroll: Set the offset and transition duration for hiding the sticky element when scrolling down.
Entrance Animation
Apply predefined animations to elements when they appear on screen.
- Fading: Elements gradually fade in or out of view.
- Revealing: Create smooth reveal effects as elements come into view.
- Sliding & Revealing: Combine sliding motion with reveal effects.
- Scaling & Revealing: Adjust the size of elements as they are revealed.
- Zooming: Apply zoom in or out effects during element appearance.
- Bouncing: Elements enter with a bouncing motion for attention-grabbing effects.
- Sliding: Elements slide into view from different directions.
- Rotating: Apply rotation effects as elements enter or leave the viewport.
- Attention Seekers: Highlight elements with exaggerated, noticeable animations.
- Specials: Unique animations for elements that require special effects.
Opacity
Adjust the transparency level of the element to create fade effects during normal or hover states.
Rotate
Rotate the element along the X, Y, or Z axes for dynamic visual effects. Use deg (degrees) values or apply 3D rotation.
Offset
Shift the position of the element horizontally (X-axis) or vertically (Y-axis) to control its exact placement within the layout.
Scale
Resize the element, with the option to keep proportions (yes or no) and adjust the scale factor to enlarge or shrink the element.
Skew
Skew the element along the X and Y axes to tilt its appearance.
Flip Horizontal/Vertical
Flip the element horizontally or vertically by selecting the anchor points (X: left, center, right; Y: top, center, bottom) for precise control over the flip transformation.
Trigger by (On hover)
Choose whether the hover transformation is triggered by interaction with the widget, column, or section.
Transition Duration (On hover)
Set the time duration in milliseconds that the hover transition effect takes to complete.
Transition Delay (On hover)
Specify a delay in milliseconds before the hover transition effect begins.
Background Type
Select the background type: None, Classic, or Gradient.
Classic
- Color
- Set a solid background color to provide a consistent base for your design.
- Image
- Upload an image to use as the background. Additional settings include:
- Loading: Choose whether to load the background image lazily or immediately.
- Position: Define the image's position within the background (e.g., center, top-left).
- Attachment: Set the background image to scroll with the page or remain fixed.
- Repeat: Determine if the image repeats or stays single across the background area.
- Size: Control the size of the background image, such as cover, contain, or custom dimensions.
- Backdrop Filters
- Apply visual filters to the background, such as blur, brightness, or contrast, enhancing its appearance.
- Transition Duration (On hover)
- Set the time duration in milliseconds that the hover transition effect takes to complete.
Gradient
- Color
- Select the primary color for the gradient background.
- Location
- Define the starting position of the primary color in the gradient effect.
- Second Color
- Select the secondary color to blend into the gradient.
- Location
- Set the starting point of the secondary color within the gradient.
- Angle
- Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
- Backdrop Filters
- Apply visual filters to the gradient background for added depth and effects.
- Transition Duration (On hover)
- Set the time duration in milliseconds that the hover transition effect takes to complete.
Border Type
Define the border style of the element.
Border Width
Set the thickness of the element's border.
Border Color
Define the color of the element's border.
Border Radius
Adjust the corner roundness of the element.
Box Shadow
Apply shadow effects to add depth to the element.
Responsive Visibility
Control the display of elements across different devices by selectively hiding them on desktop, tablet, or mobile.
Scheduled Visibility
Set the section's visibility based on specific schedules.
Customer Group Visibility
Control section visibility based on customer groups.
Custom CSS
Apply custom CSS to style the widget beyond the default settings.
Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.
/* For main element */ selector { color: red; } /* For child element */ selector .child-element { margin: 10px; } /* Or use any custom selector */ .my-class { text-align: center; }
If you want to learn the basics of CSS, W3Schools is a great resource for that.