Section - Creative Elements

In Creative Elements, sections serve as the foundational elements of every page design. They act as the building blocks upon which you construct your web pages. Sections provide the structure and layout for your content. You have the flexibility to set a section as either full width, spanning the entire screen, or adjust it to the content area width (the default setting).

Once you've created a section, you can easily enhance it by dragging and dropping widgets inside. Widgets enable you to add specific functionalities and content to your sections. Additionally, you have the option to divide each section into multiple columns, further enhancing the layout possibilities.

With Creative Elements, there are no limitations on the number of sections you can incorporate into your pages. Feel free to create as many sections as needed to achieve your desired design. You can easily rearrange sections by dragging them above or below other sections, allowing you to reposition and structure your content effortlessly.

Handle icons

Add Section: Integrate a new section to your layout, expanding the creative canvas for your content.
Edit Section: Refine section positioning by dragging and dropping, or access detailed settings to tailor its configuration.
Duplicate Section: Replicate sections with a single click.
Delete Section: Eliminate sections from your page.

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.
Stretch Section: Force the section to extend across the entire width of the page.
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.