In this tutorial, you’ll learn how to use the Inner Section Widget In Elementor, to create an additional area within an existing column.
The tutorial will cover:
✔︎ Inner section examples
✔︎ Building a promotion banner together
✔︎ Layout settings
✔︎ Style settings
✔︎ Responsive settings
✔︎ And much more!
Hey there, it’s Ash from Elementor.
Today I’ll teach you how to use the Inner Section Widget.
I’ll guide you step by step on the available options within this widget, as well teach you the best practices when using it.
The inner section widget lets us create an additional area within an existing section and column.
We’re able to populate the inner section with multiple columns.
And we can even use it to help a particular element stand out, like this floating form here.
So if you’re ready, let’s dive in and learn how to use the inner section widget
Let’s see how the inner section works by recreating this design.
I’ll start with a pre-created section, which is 1200 pixels wide, has a minimum height of 790 pixels, and the column position set to stretch.
Over on the widgets panel, let’s drag and drop in the inner section inside our main section here. Inner sections can be positioned above or underneath any other widgets.
By default, the inner section has 2 columns, and no design.
We can right click on the column handle, add columns, or delete as needed.
We’ll stick with 2 columns for now.
Back in the inner section settings, we have the layout tab, which we’ll come back to very soon, as we also have the style tab.
The style tab, as you may guess, lets you style the inner section. We can set a background, which we’ll set to classic white, by dragging the picker all the way to the top left corner.
We also have border, shadow, shape dividers, and typography controls.
Okay Let’s add some content and then we’ll come back to the configuration shortly.
I’ll drag and drop a heading, type in some text.
Add a button as well, and an image over here, adjust the width a little bit.
OK, great. Now that we have some content, let’s go back to the inner section settings by selecting the 6 dots.
Inner sections mimic the same configuration settings as sections, so this should feel familiar.
We can set a specific width for our content, like so, or make it full width.
Of course, the inner section cannot be larger than it’s containing section.
I’ll set this to 1095 pixels.
Next we have a column gap option, which is used to control the padding of our columns, all at once . By default this is 10 pixels.
I’ll go ahead and set it to Wider, to give our design some breathing space.
You can set a minimum height, and also control the vertical alignment, like middle, bottom, and more. Let’s keep it in the middle.
By default our columns will allow content to overflow, but you can choose to hide it using this option here.
Under Structure, we’ll find some preset column width combinations, and a reset button in case you need it.
It’s always recommended to select the responsive mode, once you finish working on a section, to see how it looks on different screens, and make any necessary adjustments.
Let’s check out our design on tablet mode.
It feels far too close the the left and right side of the inner section, so I’ll simply select the inner section and add some padding for both sides”
And awesome! The tablet view looks great.
Now switch to mobile mode.
Note the values that we have just set. These have automatically cascaded from tablet. It can be reset or set differently.
Besides that, I think it would look much better if the top part was positioned underneath the image, but how do we achieve this without having to add custom code?
Well it’s easy, in the Advanced tab, you’ll find responsive controls. Simply activate Reverse Columns on mobile and there you have it.
We’ve shown one example of using the inner section widget, but with some creativity, there is no limit to what you can achieve.
Thank you for watching.
Be sure to share your websites with us in the comments below and don’t forget to like and subscribe to our channel for more tutorials.
