How to Add Multiple Section in Elementor
Looking to add multiple sections in elementor? The Section and Inner Section widget are used to create nested columns within a section. This way you can create complex layouts.
Here, I will show you the easiest way to create Sections in Elementor so let’s get into it.
In Elementor to add your desired elements into the template, you must put them into a wrapper box called Section.
How to add it?
Create a Page and Add a new section to the Page
To Create a page go to the WordPress dashboard > pages > add new
After the page is created it’s time to add a section to it. To Add the Section Click on the ‘ + ’ Icon.
Now select any structure you like according to your need. We are choosing the plain one for now.
After that click on the Edit Section icon in the section which brings up the edit section pane to the left.
To add multiple sections we are going to use the Inner Section Widget from Elementor. Search and select the inner section widget from the menu bar on the left-hand side of your screen then drag and drop it in the selected area.
As a default, you will get a section with two columns. You can add or remove columns by right-clicking the columns handle icon
Note: You can drag and drop the Inner Section widget to any column on your page, but it cannot be used within another Inner Section.
Sections can be manipulated and styled either via the options in the Elementor Panel on the left or by right-clicking the Section handle and choosing from the context menu that pops up.
If you wish to duplicate a section, right-click a section handle and choose Duplicate from the context menu. You can also copy and paste a section elsewhere using Copy and Paste options here, or you can copy and paste only the style (without the content) from one section to another. Click Save as Template to save the section as a template that can be inserted anywhere later. Clicking Navigator here will open the Navigator already set to that particular section. And of course, clicking Delete here will delete the section.
If you click Edit Section, the column’s options will be displayed in the Elementor Panel to the left with all of the following options available to you.
Content Width: Set the Content Width to Boxed or Full Width. When choosing Boxed – use the slider to set your width
Columns Gap: Set your Columns Gap
Height: Choose between Fit to Screen: Your section will fill the screen, and Min Height: Set a Min Height, and use the slider to set your section height
Vertical Align: Set your Section content’s vertical alignment
Overflow: Select how to handle content that overflows its container. Default allows the overflow. Select Hidden to hide the overflowing content.
Stretch Section: Force the Section to stretch to the full width of the page
HTML Tag: Set an HTML Tag for your section.
In the Style tab, you can customize the text color & shadow, typography, margin, padding, border, spacing, size, and many more,
Background (Normal & Hover)
Background Type: Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background), Video background, or an image Slideshow background.
Background Overlay (Normal & Hover)
Background Type: Choose between Classic or Gradient
Blend Mode: Set a Blend Mode
Border (Normal & Hover)
Border Type: Set a Border Type
Border Radius: Set your Border Radius
Box Shadow: Add a Box Shadow
Shape Divider (Normal & Hover)
Type: Click the dropdown to choose your Shape Divider style
Color: Pick a color
Width: Set the width of your Shape Divider
Height: Set the height of your Shape Divider
Flip: Flip the direction of your Shape Divider
Bring to Front: Force your Shape Divider to be in front of other objects
Typography Set Typography Colors for the section
Note: The ‘Set Typography’ colors won’t work if Default Colors are enabled.
- Margin: Set the section Margin
- Padding: Set the section Padding
- Z-index: Set the Z-Index. Learn more about Z-Index
- CSS ID: Set a CSS ID for your section
CSS Classes: Set CSS Classes for your section
Here is a preview of the animation from our own website as an example.
If you have created Sections successfully then Congratulation! If not, then start checking the steps again. If you get stuck with any problem while following the above procedures, don’t hesitate to drop a line below.
Feel free to contact us if you need any help regarding this topic. Do let us know the topics you want us to cover in the comment section or reach out to us with your queries by clicking the contact form below
4 thoughts on “How to Add Multiple Section in Elementor”
Thanks for sharing. I read many of your blog posts, cool, your blog is very good. https://www.binance.com/sk/register?ref=OMM3XK51
I am a website designer. Recently, I am designing a website template about gate.io. The boss’s requirements are very strange, which makes me very difficult. I have consulted many websites, and later I discovered your blog, which is the style I hope to need. thank you very much. Would you allow me to use your blog style as a reference? thank you!
I have read your article carefully and I agree with you very much. This has provided a great help for my thesis writing, and I will seriously improve it. However, I don’t know much about a certain place. Can you help me? https://www.gate.io/es/signup/XwNAU
The point of view of your article has taught me a lot, and I already know how to improve the paper on gate.oi, thank you. https://www.gate.io/fr/signup/XwNAU