The Inner Section widget allows you to add columns into a section. Drag and drop the widget into a column to get started.

The Layout Tab

Click on the handle of the Inner Section widget to start customizing. 

Layout

Content Width: Set the width of the inner section columns to boxed or full width. 

Columns Gap: From the drop down menu choose the gap between the section and the inner columns. 

Height: Set the height of the inner section columns. 

Vertical Align: Set the vertical alignment of widgets in the inner section. 

Overflow: Choose from default or hide. 

HTML Tag: Set an HTML tag to the inner section.  

Also, customize each column of the inner section by clicking on its handle.

Structure

Choose the structural composition of columns of the inner section in relation to one another.

The Style Tab

Customizing the style of the inner sections is done the same way as a standard section. 

Background Image & Color

Background Gradient

Background Video

Background Overlay

Background Type: Choose to apply a classic or gradient overlay on the background. 

Hover Mode 

CSS Filter: Change the look of your background with the option to apply CSS filters. 

Transition Duration: Set the duration of the hover effect.

Border

Border Type: Option to set a border to the inner section.

Border Radius: Customize the roundness of border edges.

Box Shadow: Option to set a shadow to the image. 

Hover Mode

Transition Duration: Set the duration of the hover effect.

Shape Driver

Add beautiful shapes to the background of the inner sections. Choose to add to the top or bottom of the inner section. 

Typography

Customize the colors of heading, text, link, and link on hover.

The Advanced Tab

In the advanced tab adjust the padding, apply Z-index to your elements, set conditions, motion effects, responsiveness, and more.

Next Up: Heading