Inner Section Widget - Creative Elements

The Inner Section widget allows you to create self-contained sections within a larger section, providing enhanced control over layout and design. This widget is particularly useful for organizing content and achieving precise design arrangements.

Layout Tab

Layout

Tabbed Section: The Tabbed Section feature enables the creation of multiple tabs, each containing distinct content segments. This facilitates seamless navigation through various informational sections, preventing page overload. Each tab accommodates diverse elements such as text, images, or widgets, offering a versatile layout for user-friendly interaction.
Content Width: Choose between Boxed or Full Width settings to determine the width of your content. When selecting Boxed, utilize the slider to define the desired width.
Columns Gap: Tailor 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: Employ Vertical Align to precisely adjust the vertical positioning of elements within a container, ensuring meticulous alignment and spacing.
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, shown with scrollbars, or managed in alternative ways.
HTML Tag: Specify the desired semantic HTML element to assign to the section.

Structure

Structure: Set different column structures to the section.

Style Tab

Background (Normal & Hover)

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

Background Overlay (Normal & Hover)

Select from, Classic or Gradient to introduce an overlay to the background, adding a layer of visual depth to both the normal and hover states of your design.

Border (Normal & Hover)

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

Shape Divider (Top & Bottom)

Employ shape dividers at the top and bottom of your design to elegantly separate sections, lending a modern and dynamic touch to your layout.

Typography

These set of controls has been deprecated. They are only visible if they were previously populated.

Advanced Tab

Advanced

Margin: Tailor the margin to control the external space surrounding the section, determining its separation from adjacent elements.
Padding: Define the padding within the section to manage internal spacing, influencing the arrangement and appearance of its content.
Z-index: Adjust the Z-index value to establish the stacking order of the section in relation to other elements, ensuring controlled layering.
CSS ID: Assign a distinctive CSS ID to the section for targeted styling or interaction through custom CSS or scripting, allowing for tailored customization.
CSS Classes: Set specialized CSS classes for the section , 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.
Sticky Effects: Utilize sticky effects to maintain specific elements in view as the user scrolls, enhancing user experience.
Entrance Animation: Apply entrance animations to sections for engaging and captivating presentations.

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.