Inner Section Element

The Inner Section Element will provide useful when creating unique and complex layouts. The Inner Section will help you create ingrained columns within the sections. The inner section will work similar to the section, simply drag the element onto the page to start creating your layout. By default, the inner section comes with two nested columns. 

Layout Tab 

Layout

  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 -  Set the height to your section to either be Default or Minimum Height and use the slider to drag the height to desired values. 
  4. Vertical Align - Use this setting to set your section's alignment to Default, Top, Middle, Bottom, Space between, Space Around, Space Evenly. 
  5. Overflow - The overflow option will allow you to hide elements that are bigger than the section area. 
  6. HTML Tag - Set your inner sections HTML tag to div, header, footer, article, section, aside, and nav. 

Structure

  1. Select the structure for the inner section either 50:50, 33:66, or 66:33.

Pro Tip: If you wish to change the structure of the inner sections, click on the columns handle, and under the Content Width option, set the width in percentage. Both columns are a total of 100% width, set the width for one column and the other will take the value left to fulfill the 100% value. 

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. Transition Duration - Set the for the CSS filters 

Border 

  1. Choose the Border to be Normal or Hover 
  2. Border Type - Pick a Border Type, it can be Solid, Double, Dotted, Dashed, or Groove. 
  3. Border Radius - Add some Border Radius. You can set the values all together or unlink them to set separate values 
  4. Box Shadow - 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. Type - Choose a Type of divider from the long list on the drop-down menu. 
  3. Color - Set the color for the shape divider
  4. Widht - Set the Width values for the shape divider
  5. Height - Set the Height values for the shape divider 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 that 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.