Section Overview

To decorate your website with widgets and features you must first try adding basic elements they lay on. Sections are the largest container that houses Columns and Widgets. To open a new section, you click on the [plus icon] and choose your structure. You can easily customize and adjust your section by clicking on the [three dots icon] on top of the section. On the left panel, you will see the section's options from where you make needed changes. The settings are divided into three tabs.

Layout Tab 

  1. Content Width - You can set your content to be Boxed or Full Width. If you go for the first option you can decide the width values or simply drag the slider to set to the desired width. 
  2. Columns Gap - You can choose to have a gap between the column/widget and the section. Decide on Default Gap, No Gap, Narrow, Extended, Wide, and Wider. 
  3. Height - Being done with Weight, you can set the Height to your section to make it Fit the Screen or Minimum Height and use the slider to drag the height to desired values. 
  4. Columns Position - Set the column position to be Stretch, Top, Middle, or Bottom. 
  5. Vertical Align- Use this setting to set your section's alignment to Default, Top, Middle, Bottom, Space between, Space Around, Space Evenly. 
  6. Overflow - The overflow option will allow you to hide elements that are bigger than the section area. 
  7. Stretch - This setting will stretch the entire section to full width covering the viewing screen. 
  8. HTML tag - Set your sections HTML tag to div, header, footer, article, section, aside, and nav. 

Style Tab 

Background 

  1. Choose the background type to Normal or Hover
  2. When choosing Normal you can choose the Background Type to be either Classic, Gradient, Video or Slideshow
  3. When choosing a Hover background you can choose Classic or Gradient. And use the slider to grad the Transition Duration for hover. 

Background Overlay

  1. Choose between Normal or Hover
  2. You can set the Background Type to be Classic or Gradient
  3. Set the CSS Filter - Put Blur, Brightness, Contrast, Saturation, or Hue on your background overlay 
  4. And the set Blend Mode to your overlay 

Border 

  1. Choose the Border to be Normal or Hover 
  2. Pick a Border Type, it can be Solid, Double, Dotted, Dashed, or Groove. 
  3. Add some Border Radius. You can set the values all together or unlink them to set separate values 
  4. Also, you can choose to have a Box Shadow around your section. 

Shape Divider

  1. Choose to have a shape divider at the Top or at the Bottom of the section.
  2. Choose a Type of divider from the long list on the drop-down menu. 
  3. Set its Color
  4. Set the Width values
  5. Set the Height values or simply drag the slider

Typography

  1. Heading Color - Set the color for the heading 
  2. Text Color - Set the color for the text within the inner section 
  3. Link Color - Set the color for the links 
  4. Link Hover Color - Set a color for the link for when users hover over 
  5. Text Align - Align the text to be positioned either Left, Center, or Right 

Advanced Tab

Advanced

  1. Margins - Margin adds spacing outside the element borders.
  2. Padding - Padding adds spacing inside the element borders.
  3. Z Index - This property allows you to precisely place elements on your page in a stack order of elements
  4. CSS ID - You set CSS ID for your section, a customs selector which can find many uses
  5. CSS Classes - Add your custom CSS class with a specific class attribute

Motion Effects 

  1. Scrolling Effect - Enable to have the scrolling effect on your section and choose from the list of effects available and adjust their settings as well
  2. Sticky - You can set the section to be sticky at the Top or at the Bottom of the page 
  3. Entrance Animations - Decide how your section will enter when visiting the website from the drop-down list of animations provided. Also, change animation duration and delay to add more movement to your website. 

Responsive

  1. Reverse Columns on Tablet - When viewed on Tablets the columns will change position 
  2. Reverse Columns on Mobile - When on Mobile view the columns will be positioned vertically to adapt to screen size
  3. Visibility - Choose to Hide or Show section on different devices: on Desktop, Tablet, or Mobile

Attributes 

  1. Set Custom Attributes for the wrapper elements, each attribute should be written in a separate line

Custom CSS

  1. Add your own Custom CSS in the editor below.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.