Divider Widget - Creative Elements

Elevate your design's visual appeal with the Divider widget, a versatile element that introduces separations and visual distinctions within your content, enhancing layout clarity and aesthetics.

Divider Widget

Content tab

Divider

Style: Opt for a range of classic and patterned styles, including solid, curly, wavy, tribal patterns, arrows, pluses, and more, to seamlessly integrate visually engaging dividers into your content.
Width: Exercise precise control over the divider's width by selecting a percentage value from 0 to 100 percent, tailoring its dimensions to your design.
Alignment: Perfectly position the divider by choosing from alignment options such as left, center, or right, ensuring harmonious integration within the page layout.
Add Element: Choose from None, Text, or Icon, and delve deeper into customization by either adding text content or selecting/uploading icons from the comprehensive Icon Library.
Text: Input customized content that accompanies the divider, adding informative or decorative text to your design.
Icon: Select and incorporate icons or SVGs, adding visual elements that enhance the divider's appearance and design.

Style Tab

Divider

Color: Choose the desired color for the divider, seamlessly integrating it into your design's color scheme.
Weight: Define the thickness or weight of the divider line to achieve the desired visual impact.
Size: Set the height or size of the divider, ensuring it aligns with your design's proportions.
Amount: Specify the number of patterned elements to display within the divider, adding a dynamic visual rhythm.
Gap: Fine-tune the spacing above and below the divider, achieving optimal placement within your layout.

Text

Color: Define the text color to seamlessly integrate the text with the divider, ensuring a cohesive design.
Typography: Refine the text's typography options, harmonizing its style with your design's aesthetics.
Position: Choose the optimal alignment of the text in relation to the divider by selecting from positions like Left, Center, or Right.
Spacing: Achieve balanced spacing by sliding the value to create the desired distance between the text and the divider line, within the range of 1 to 50.

Icon

Size (Default): Customize the icon's size to ensure seamless integration within your design.
Primary Color (Default): Select the icon's color to establish a coherent visual appearance.
Position (Default): Opt for the ideal placement of the icon in relation to the divider, choosing from Left, Center, or Right.
Spacing (Default): Fine-tune the space between the icon and the divider by sliding the value within the range of 1 to 50.
Rotate (Default): Add dynamism by adjusting the icon's rotation, from 0 to 360 degrees.

Size (Stacked): Customize the icon's size to ensure seamless integration within your design.
Padding (Stacked): Define the padding around the icon, ensuring optimal visual balance.
Primary Color (Stacked): Customize the background color of the stack for a cohesive appearance.
Secondary Color (Stacked): Set the icon's color for visual contrast and clarity.
Position (Stacked): Opt for the ideal placement of the icon in relation to the divider, choosing from Left, Center, or Right.
Spacing (Stacked): Fine-tune the space between the icon and the divider by sliding the value within the range of 1 to 50.
Rotate (Stacked): Add dynamism by adjusting the icon's rotation, from 0 to 360 degrees.
Border radius (Stacked): Define the border radius to achieve rounded corners or completely circular stacks.

Size (Framed): Customize the icon's size to ensure seamless integration within your design.
Padding (Framed): Define the padding around the icon, ensuring optimal visual balance.
Primary Color (Framed): Customize the background color of the stack for a cohesive appearance.
Secondary Color (Framed): Set the icon's color for visual contrast and clarity.
Position (Framed): Opt for the ideal placement of the icon in relation to the divider, choosing from Left, Center, or Right.
Spacing (Framed): Fine-tune the space between the icon and the divider by sliding the value within the range of 1 to 50.
Rotate (Framed): Add dynamism by adjusting the icon's rotation, from 0 to 360 degrees.
Border width (Framed): Control the thickness of the frame's border for visual impact.
Border radius (Framed): Define the border radius to achieve rounded corners or completely circular stacks.

Advanced tab

Layout

Margin: Tailor the margin to control the external space surrounding the widget, determining its separation from adjacent elements.
Padding: Define the padding within the widget to manage internal spacing, influencing the arrangement and appearance of its content.
Width: Choose from options like full, inline, custom, or calculate to specify the widget's width behavior within the layout.
Vertical align (Full width, Inline, Custom, or Calculate options): Position the button's content, choosing from options such as start, center, end, or stretch to achieve the desired vertical alignment within its container.
Custom width (Custom option): Specify the widget's width by using a slider to increase or decrease the width in pixels, percentage, or viewport width. You can also manually enter the specific value you want for the width.
Calc (Calculate option): The calc() CSS function enables the precise calculation of values within stylesheets, allowing dynamic adjustments based on various mathematical expressions for enhanced design flexibility.
Min width (Calculate option): Establish a minimum width constraint for the widget, ensuring it retains a specified width even when content is limited, contributing to a consistent and structured layout.
Order: Set the order as start, end, or custom to dictate the widget's positioning within its container, enhancing its visual hierarchy.
Size (Full width, Inline, Custom, or Calculate options): Set the size to none, grow, or custom to set the widget's size within its container,.
Position: Select between absolute or fixed positioning to determine how the widget is placed within the layout, affecting its relationship with other elements.
Z-index: Adjust the Z-index value to establish the stacking order of the widget in relation to other elements, ensuring controlled layering.
CSS ID: Assign a distinctive CSS ID to the widget for targeted styling or interaction through custom CSS or scripting, allowing for tailored customization.
CSS Classes: Set specialized CSS classes for the widget, enabling custom styling via external stylesheets or scripts, enabling refined design adjustments.

Motion Effects

Scrolling Effects: Incorporate scrolling effects to add dynamic visual transitions as users navigate through the content.
Mouse Effects: Elevate your design with the Mouse Effect feature, incorporating captivating mouse tracking and 3D tilting interactions that respond dynamically to user engagement, adding an irresistible layer of interactivity to your content.
Sticky Effects: Utilize sticky effects to maintain specific elements in view as the user scrolls, enhancing user experience.
Entrance Animation: Apply entrance animations to elements within the section for engaging and captivating presentations.

Transform (Normal & Hover)

Opacity: Control the transparency of elements, allowing for captivating fade-in and fade-out effects.
Rotate: Apply dynamic three-dimensional rotation to elements, creating an immersive visual experience.
Offset (X and Y): Adjust horizontal and vertical positioning for precise element placement and animation.
Scale: Fine-tune the size of elements, enabling smooth size transitions for engaging effects.
Skew (X and Y): Introduce slanted or distorted perspectives to elements, adding a unique touch to your design.
Transition Duration and Delay (ms): Tailor the speed of transformations and introduce delays for fluid and controlled animations.
Flip Horizontal/Vertical: Facilitates the transformation of an element's visual orientation, either horizontally or vertically, effectively creating a mirrored reflection of the element's appearance.

Background (Normal & Hover)

Background type: Select from None, Classic or Gradient for the section's background type. Feel free to incorporate each option's specific features to enhance the background dynamics.

Border (Normal & Hover)

Border type: Define the style of the element's border, allowing for versatile design variations.
Border radius: Control the curvature of element corners with precision, enhancing visual appeal and softening edges.
Box shadow: Enhance elements with subtle or dramatic shadow effects, adding depth and dimension to your design.
Border width: Set the thickness of the border surrounding the button element.
Border color: Specify the color of the border, influencing its appearance and integrating seamlessly with the overall design.

Visibility

Scheduled Visibility: Schedule the section's visibility to appear or disappear at specific times, optimizing content display.
Customer Group Visibility: Tailor the section's visibility based on different customer groups, providing personalized experiences.

Responsive

Reverse Columns: Reorder columns to adapt the layout for mobile or alternative arrangements.
Device-specific Hiding: Toggle section visibility for distinct devices such as mobile, tablet, and desktop.

Custom CSS

Custom CSS: Inject your own custom CSS code to implement precise styling adjustments, allowing for a tailored design approach.