I just want to spend a few more minutes
to walk you through
the general concepts of sections,
columns, as well as elements and patterns and margins.
As I showed you previously.
If you want to add an element,
you can just simply drag from
the left-hand side and
then they'll simply drop it in slide.
Now the thing is automatically whenever
you're adding elements with Elementor,
a section and economy will be
created for that particular element.
We just dropped in the text editor elements.
And now you would notice right up here
we have this blue line here.
This is gonna be this section holding
the column that's holding the text edit. All.
Notice right here, you've
got this brown button right here.
And if I hover over it,
it says Edit Column.
Now this is the actual element itself,
the actual text edit tool.
Once again, the way elemental
walks is there you will have an element,
whether it's an image, video or button.
And then a column will hold,
will contain that element.
In both the column and the elements will
be inside a section.
It's kind of like a hierarchical structure section column
then the actual element.
Now just like with editing,
the element where you will have access
to content style advanced.
You can also edit the column holding that element.
You can see I've hovered on
the bottom here, it says Edit column.
You click in there.
And then you will have access to
layout style and advanced.
With layout, you can do things like maybe
reduce the length of the column.
You can change the alignment.
You can add an HTML tag fluids.
You can style the column and we want to
add a black background like in a red background.
And you want to add an image, things like that.
So that a lot of things you can do all with the column.
Now, if you right-click on the Edit Column button,
you can do things like add a new column,
duplicated column.
You could even copy and paste the style.
Maybe you added a black background,
you change the font style of
the text and you want to reuse that style,
you simply copy the style and then you
can pierce his style are elsewhere.
The same thing goes with this section in here as well.
If I click on the edit section button up here.
Now you see I have access to layout style advanced.
Like with layout, I can change this to full width.
I can maybe change
the size or the length of the width naked, very,
very wide availability now I will,
I can change the height as well if I wanted to.
I can do a lot of things.
Same goes with his style.
Again, I can add a background color. If I wanted to.
I can do several things like add
motion effects and so on.
Just like with the column environment,
click on the edit section button right here.
You can sit and do things like
edit section and I can duplicate.
I can even save as a template which we'll talk about
when we are using Elementor Pro.
Now, let me quickly talk to you about the concept of
margins and patterns because
this is gonna be very, very, very important.
Now, I've got a section in
here holding this text editor writes.
What I'm gonna do is I'm going to add
an image into another section.
Lambdas quickly choose an image to walk with.
Let me go to my media library.
Let me choose this image right here.
Now, take a look at this.
Let me add a background color to the section here.
Don't worry, I will show you all this a bit later.
All right. What exactly are margin's?
Margins are used to add space between sections.
So right now we've got a section
here holding this text editor with
the red background would have
another section in here holding the image.
If I wanted to create plenty of space between these two,
I could actually use
an element in here called a spacer element.
You can say conjugate spacer and then drop it
in-between these two sections.
But another way to do so would
be to go to either one of these sections.
I'm going to go to the first section in here.
I'm gonna go to Advanced and variety of got margin.
Now please note that by default,
you can add margins and patterns to
all four sides of a section to the left,
right, top and bottom, right.
Now if I was to add a margin to either top or bottom,
you can see they are chained,
which means whatever you add to top,
it will be added to the bottom as well.
If you wanted to add values for
one specific side, you want to start from 0.
First of all, Zero.
You come in here and then you
can see you can unlink the values.
So right now you can simply add for top are right
and left margins for elemental are
set to auto by default,
you can't make an ingenuous in there.
But now notice that if I begin
to add margins to the bottom of the first section,
notice that it's section holding
the image is not being pushed down.
That's because I'm creating space
between this first section and this second section.
Also, if I wanted to,
I could do the reverse for the second section.
I can go to Edit section here near for the second one,
go to Advanced. Unlink develops.
And now instead of an imagined at the bottom,
I can add at the top.
So now you can see we are pushing this section holding
the image downwards from
the first section that says what the margins are useful.
They're useful creating spacing between sections.
One of patterns, because they've got patterns.
Patterns are used to create space between
an element and its border or its column.
As an example, I'm going to use the text editor in here.
All right, so I'm gonna go in there.
I'm gonna go to Advanced.
And now right here,
you can see I've got the pattern available.
I'm going to unlink the values.
And now if I begin to add padding right here,
you can see I'm creating space between
the text editor and
its own section right here at the top.
I can go to the bottom,
do the exact same thing as well.
So you can see right now I'm basically
creating space for my texts,
a tool within its own section.
That's what patterns are used for.
They use to create space for
an elements inside of its own column or their section.
That's basically what patterns are useful.
So that's the difference between margins are patterns.
Margins are used to create space between sections.
Patterns are used to create space between a section
and the element contained inside of it.
Hopefully, you now have
a good understanding of what our margins and paddings up.
One more quick thin,
you could also rearrange
sections by simply clicking and dragging.
If I wanted to move the section holding the margin,
I'm also holding the image to the top.
I'll simply click and hold the edit section button.
Now you can see it's allowing me to move.
I can move it all the way up your nose.
Wait for the blue dash or the BlueLine to appear,
and then simply release an intro of the image light day.
You do have this option in here
with elementwise what that allows
you to rearrange our sections.
You could also rearrange columns
and I'm just quickly duplicates this column in here.
Let me change this image real
quick just to give you a very,
very quick demonstration, let me choose this image.
So I can simply
click where you have the Edit Column button.
And then we arrange.
They can see where range back as you can see.
So you do have that option
available with elemental as well.
So don't worry as we begin to
walk with elements or you begin,
it begins to discover a lot more features
and functionalities of elements.
And thank you for watching.
I'll see you in the next class.