Do you want to build your page layout on WordPress in the easiest possible way
This is a really basic and fundamental tutorial about using Elementor, and is the first part of three tutorials we will publish that concerns with using sections and columns in Elementor to build and control your page layout on WordPress.
Creating a custom page lets you create a wide variety of designs for your website, and leverage how your page design appears.
Hey guys, this is Noah from Elementor. Today I’ll be giving you an overview of
the section layout settings.
These flexible settings enable you to design
your page structure creatively. We’ll go over the parameters, one by one,
so you could build your website’s page structures easily and quickly.
Firstly, what is a section? A section contains the columns and widgets of your page.
You can add a new section by clicking on the add new section button and choosing the
structure you’d like to display it in. Meaning the layout of its columns.
Once the section is added to the page you can add duplicate or delete columns by clicking
on the column icon and by clicking on the section icon, you can duplicate, save
or delete the section itself. Now when you click on the section icon you have the
layout tab and the style tab. We’ll be going over the layout tab. So we’ll be
working with this section, which contains two columns inside of it.
First we have the stretch section option. With this option you could stretch out your
sections background without regards to the theme’s layout. So if I click here and
Yes, as you can see the sections background has stretched out completely
to the width of the screen. Next we have the content width with which you could
set the width of the content within the section. Here you can choose boxed or
full width. So for example, if I stretch out the sections backgrounds by clicking
here and then select for content width > full width, see how the content
automatically stretches out to the full width of the screen. And if I choose
boxed, I could set the exact width of the content. You could set the default of the
min width in the Elementor settings on the dashboard
Then we have the columns gap option. This is a great setting because it sets the
width displayed between the columns content inside the section.
To help you understand I made here a full width section with two columns, each with a
different background color. If you take a look at the columns here, you will see
that every column has its gaps surrounding it between the blue border
of the contents and the dash border of the column itself. As here you can see the
background of the column like between the edge of this map and the edge of the
background. Here by default the gap width is set at 10 pixels, meaning every column
has a 10 pixels gap surrounding it, which in total displays a 20 pixels gap
between the two columns. You could also choose between no gap, which actually
displays zero pixels gap width. Which means that the columns are touching
without any gaps in between or surrounding them. Narrow, which is 5
pixels gap width around the columns. As you can see it means that you have ten
pixels between the two columns here. And you have extended which is 15 pixels
Wide, which is 20 pixels. And wider which is 30 pixels meaning 60 pixels in total
between these two columns. Then you have height which sets the height of the
section’s background. Here you could choose default, fit to screen, which
displays it at the screens height, or min height where you could set the exact
height of the sections background. Note that its minimum is at the height of the
content displayed inside the section. Next we have the column position with
which you could set the position in which the column inside the section is
displayed. So if I set the height of the section background to fit the screen and
the column position is on stretch, as you can see it stretched all the way down to
fit the section backgrounds. Now if I set the column position as top, it’s displayed
only on the top of the section background that is fit to screen. If I
set it as middle – it’s displayed in the middle of the section. And if I set it as
bottom, it’s displayed on the bottom. Now say I set it as stretch which brings us
to the content position with which you could set the position of the content
inside the columns themselves. So now that the column position is stretched, if
I set it as top the content is already on the top of the section so it stays
the same. If I set it as middle as you can see the widgets meaning the content
is displayed in the middle of the column. And if I set it as bottom it’s displayed
on the bottom of the columns. Then you have the structure, I’ll just move
this back to min height, okay now you could resize the columns width by
dragging right here. However, if you want an exact percentage of the columns width
then you could choose here from these pre-made structures and you could reset
it to its original structure by clicking right here. Okay, those were the layout
settings for this section. You can only imagine what amazing pages you can
create with these flexible parameters. Next video we’ll be talking about the
style options for this section. I hope you enjoyed this video. For more videos
and tutorials subscribe to our YouTube channel or visit us at docs.elementor.com
