‫Hey, what's up, guys, in and welcome back.
‫So as in the previous video, we decided that we will be using elementary page builder for this particular
‫course in this video, we will be breaking up with the basics of elementary.
‫Now, elementary is quite confusing when you start learning it, but as you progress with this course,
‫you will find that elementary is the easiest plugin out there in the market.
‫Now, there are three things that confuses beginners the most, and those are sections, columns and
‫elements and elements are revolved around these three things.
‫So let's go ahead and let's take a look at it.
‫Let's take a basic structure of elementary page builder, which is this.
‫So now here is basically the basic boilerplate of elementary.
‫And you can see that I have made some squares and this is right here.
‫Now, this blue square that is right here will be considered as a section and represents that the maroon
‫square right here will be considered as a column and C represents that.
‫And then this blue line, which is really very thin, will represent the element.
‫So right here you can see that, first of all, we have this section and inside this section we have
‫a column.
‫And inside this column we have an element.
‫So element can be anything Elliman can be like.
‫The heading element can be like a paragraph.
‫An element can be like an image.
‫An element can be like animation boxes that we will be adding on our website like this.
‫So everything that is coming right here will be considered as element, whether it is this, whether
‫it's a button, whether it's a heading, whether it's an image or whether it's an icon box, everything
‫will be considered as an element.
‫So now basically the number one thing is basically the section.
‫And inside this section you can add a column and inside that column you can add multiple elements.
‫Now, here comes one thing.
‫An element can be stacked under the other element or above the element, which means that inside the
‫section you can see I have a column and inside this column I have two elements so I can do it like that.
‫Like inside this column, I have one element and then I have to element.
‫Let's take a look at it.
‫First of all, what I want you guys to do is to make sure that you install the elementary page builder
‫and then you are in the elementary page builder on your home page.
‫Now, once you will be on your homepage, make sure that there is nothing in your home page should look
‫like this.
‫So first of all, what we need to do is that we need to add a section and what we will do, we will
‫just click on the plus button over here and the section is added in the background.
‫Now, just telling you that how many columns you want to add.
‫So we want to add a one single column so that we can add elements in it.
‫So what we will do is that we will just like that, we want to add one single column.
‫And right here you can see that this blue line that is coming will represent the section and this dotted
‫line that is coming will represent the column.
‫And then in here you can add elements inside this.
‫So let's take a look at it.
‫If I want to get the heading, I'm going to drag the heading and I'm going to drop it.
‫And you can see that the heading has been headed here.
‫Seem like this.
‫What I can do is that I can add a paragraph.
‫I can just drop it.
‫And this is going to be added here.
‫But let's suppose that I want this heading to be here and then I want some other elements right here
‫before that.
‫Like, let's suppose that I need an image to be right here, but I can only stack the image either below
‫any element or above any element like which means and I can only add elements vertically, I cannot
‫add the elements horizontally.
‫And here comes the part of the column.
‫So if you want to add anything horizontally, then you can add two columns like this.
‫You can see that inside a section, you can add two columns into it and you can design something like
‫this.
‫So inside this section I have one column.
‫In this column, I have an image and the other column I have a heading.
‫I have a paragraph coming.
‫So let's take a look at it now.
‫What I'm going to do, I'm going to just click cross on it and I'm going to just click on this sign
‫right here.
‫And I'm going to say that I need two columns.
‫Now, here you can see I have two columns.
‫Now, what I will do is that in the first column, I will drag an image, I will drop it.
‫And here now I can upload the image, but I will not show you how to upload it.
‫We will be just understanding it later on.
‫This is this video is just only for understanding about sections, columns and elements.
‫That's it.
‫You not have to worry about styling, how to style it, how to do different type of things.
‫We will be talking about them later on and then in here I can drag a heading.
‫Just click this button over here that says this so that you can go into the elements page and you can
‫drag anything else over here.
‫And now right here I can add a paragraph and then I can just select all I can copy and paste, paste
‫based and paste.
‫And now you can see that my structure right here is that I have an image and then in here I have a heading
‫and then I have a paragraph.
‫And same goes with this, like I have a section.
‫And inside this section I have a column.
‫And inside this column, I have an image and in the other column I have a heading and then I have a
‫sentence or I have a paragraph.
‫Now, let's take a look at this.
‫If I just click on it and I just open up my elementary ed, first of all, I have this section.
‫The blue this blue thing represents the section.
‫All right.
‫And then inside this section, I have a column this when I bring my mouse to it, you can see that the
‫column is right here.
‫And this dotted line that is coming represents the column.
‫And then this other column, which is coming right here, represents this.
‫So what have you learned so far?
‫We learn one thing.
‫Basically two things is that elements can be stacked over one another vertically, which means that
‫you can add an element and then right below that or right above that, you can add another one.
‫Or what you can do is that you can also add any other element in between them.
‫But if you want to add elements side by side, then you need to work with the columns because columns
‫can work horizontally, which means that you can stack columns horizontally, you can even just change
‫their spacing.
‫So let me show you, like you can see that if I need the image to be much smaller, I'm going to just
‫have a mouse to this.
‫And you can see this sign right here.
‫I'm going to drag this and I'm going to just do it like this.
‫And now you can see how this column is much more shorter and how this column is much more bigger.
‫So this is how you can even do it seem like this.
‫You can add multiple columns so that your columns can look like this, like you can add one column to
‫column and three column and you can do it like that.
‫So let's suppose that I need to add one more column.
‫What I will do is that I have a right click on this column and it adds new column.
‫I'm going to click on it and I have another column.
‫And here I can add pretty anything like let's suppose that I want to add Google Maps.
‫I'm going to drop it right here.
‫And here will be the Google Maps.
‫I can just add the address and here will be the Google map coming so I can even do it like this.
‫Now, let's go ahead and let's move back to the first part where we understand about the section.
‫So Section section is basically a part of a website.
‫That means that in the section, what you can do is that you can add particularly anything.
‫So let's take a look at this Web site that we will be building as our second project for this particular
‫course.
‫So here you can see that this is how the website will look like.
‫And here this is actually a one section.
‫This is actually another section.
‫And this is actually another section that we have over here.
‫So inside this section now here you can see that inside this section, we have a column which is right
‫here.
‫And inside this column, we have a text element and we have another text element stacked over one another.
‫Now, what is this?
‫This is basically a section.
‫And inside this section we have four columns, which is this, this.
‫And inside this column we have a text element.
‫So this is how basically it's working same like this.
‫This is a section.
‫And inside the section we have one column and then we have another column and then we have another column.
‫So here we we have basically three columns and this is how it's looking.
‫Now, you have noticed one thing.
‫Let me show you what if I just open up this website and then I just cross it right here and then I want
‫to add a one single column.
‫Now, here you can see that the section takes the full width of the page.
‫However, the column is just like that.
‫Now, let me show you what I mean.
‫Basically, you can see that the section takes the full width off the page and the column takes just
‫like a limited bit of page.
‫Now, this is great in terms of websites like if a website is viewed on a large screen, then if you
‫are having if you are using a background image, then you can upload that background image to a section
‫so that it won't matter.
‫However, the text should be aligned in such a way that it should be using that.
‫So let me show you, like you can see that one.
‫I just drag and drop.
‫Just I do it like this so you can see that my content, everything that's been right here is just like
‫aligned this way.
‫So you can see that everything is aligned this way.
‫Now, if I just bring my mouse above here so you can see how everything is working.
‫Now, this is actually the column, the section can stretch, and in this section you can add a background
‫color and in this section you can just either keep it to be white.
‫And in this section you can even add a background image.
‫And mostly the sections contain the background images so that even if a website is viewed on a large
‫screen device, then it would not matter.
‫But the content of the column is actually this way so that the column sizing is universelle for whole
‫website, so that the website view is not changed.
‫And you can see how great this website is looking.
‫Same goes with the elementary because is in the elementary, the section is actually the full with.
‫However, the column is actually the size that you can work with.
‫You can just click on this edit column and you can work with the column with like how much you need
‫and you can pretty well work with it.
‫But we will be talking about that later on in this in the detail.
‫First, we have to understand the section and column.
‫So now let's go ahead and let's take a look at another one.
‫Now, here you can see that, first of all, we have this section and then we have another section.
‫Now, sections can be stacked vertically.
‫Now, what have we learned so far?
‫Elements can be stacked vertically, which means that after an element, you can add an element.
‫The column can be stacked horizontally.
‫That means that right after this column, you can add a column and you cannot add a column below any
‫column.
‫So you can just add a column beside a column, but you can add elements beneath an element or above
‫the elements.
‫Same goes with the section and the section is that after the section you can add another section that
‫will come right after this.
‫You cannot have sections like this section and then another section right here.
‫You cannot do it this way.
‫Let's have a look at that so you can see that.
‫First of all, I have a section and inside this section, I'm going to get a heading right here and
‫right down below.
‫Now I can add another section and in this section I can have a two column.
‫And in the first column I can have an image.
‫And in the second one I can have a text and I can have a paragraph right down below.
‫So you can see that this is how it's working.
‫Now, I have two sections.
‫First, I have this section and then I have this section.
‫Now you can see if I want to edit this section, I can edit it.
‫And for the editing purposes, we will be having a separate video.
‫So do not worry about it.
‫But what we wanted to learn is that first you can have a section and then right after that you can have
‫a section.
‫And same is happening with this website.
‫We have a section and after that we have another section and after that we have another section.
‫And inside that we are having columns.
‫So do not worry about it.
‫But let's take a look at something which is this.
‫Can you just add columns vertically as well?
‫Like, let's suppose that if we want to add a section and inside this section we want to add column,
‫column, column like columns can be stacked horizontally, but can the columns be stacked vertically?
‫Let's go ahead and let's test it out.
‫So what I'm going to do, I'm going to just close this.
‫And I'm going to add just like three columns now, you can see that the three columns are right here,
‫but let's suppose that I want to add another column right down below.
‫Can I do that?
‫If I just go ahead and I just click add in your column, the column will be stacked horizontally.
‫I cannot just bring the column down below.
‫I can just change its position to right, left, right, left, left, left, left, left.
‫I can do it like that.
‫But I can not just do up, down.
‫So how can you do that so that your column can look like this and we can achieve a design like this.
‫So you can see that I have columns and then I have columns.
‫So if I want to achieve a design like this, how I'm going to do that.
‫So you can see this is actually a section.
‫And then inside this section I have a column and inside this column I have this and then I have this
‫right here.
‫So how can we basically achieve this design?
‫Let's take a look at this now.
‫There are two solutions for that.
‫Let's take a look at them and let's understand them.
‫What you can do is that you can create two sections like this section and then this section, and then
‫in this section you can have three columns and in this section you can have three columns and then you
‫can design it to be looking like this.
‫All right.
‫So let's take a look at that and let's understand how it's going to work.
‫So what I'm going to do, I'm going to just cross this.
‫I'm going to create a new section with three columns.
‫And then in these columns, what I'm going to do is that I'm going to uncheck this pro right here and
‫I'm going to get this icon box right here and I'm going to drop it right here.
‫So you can see that in this website we are actually using the icon box.
‫All right.
‫So this is right here.
‫Now, what I'm going to do is that I'm going to go ahead and I'm going to duplicate this icon box.
‫I'm going to duplicate this.
‫I can log looks and I have three icon boxes over here.
‫I'm going to drag this icon box over here and I'm going to drag this.
‫I can look over here.
‫So now you can see that this is how it's looking.
‫But if I want to add another column into it, then I cannot drag this column right down below.
‫And the tweak to that is that what you can do is that you can add a new section with the same three
‫columns again.
‫And then what you can do is that you can go ahead and you can duplicate it and you can just drag it
‫right here.
‫Then you can go ahead and you can duplicate it, then you can drag it right here and then you can go
‫ahead and you can duplicate it and then you can drag it right over here.
‫So then this is basically achieved in a way so like you can have two sections and inside the section
‫you can have multiple elements onto it.
‫And then what you can do is that you can achieve this design in a way, but let's suppose that if we
‫wanted to build it this way, let's suppose that if we want to achieve this design, then how are we
‫going to achieve this design?
‫So you can see this is actually a section.
‫Then inside this section we have a column and inside a column we how are we going to basically design
‫this?
‫So for that, here comes a tweak and that is called the inner section.
‫So how does the intersection works?
‫This really confusing.
‫Guys, don't worry.
‫Just open up your mind.
‫Just watch and see what I am doing.
‫All right.
‫So basically, you can see that I have a section and inside this section I have a column and then I
‫can add an inner section and then I can add multiple columns into it.
‫Let's take a look at this.
‫Let's suppose that we want to achieve this.
‫So first of all, what we will do is that we will create a section.
‫Let's go ahead and let's do that.
‫What I'm going to do is that I'm going to click on it.
‫I'm going to get rid of everything.
‫I'm going to first create a section with a single column.
‫All right.
‫And now you can see that this section is created.
‫Now, what I need is that I need two columns so that the text can be in here and the desk boxes can
‫be in here.
‫So what I would do is that I would need to add two columns.
‫So what I will need to do is that I to say that I want to add a new column and now in here there should
‫be a text and then there should be a text editor down below and then I need a button.
‫All right.
‫So I needed this one.
‫I'm going to just do it like this.
‫Now, what I want is that I want two columns right here, I want two columns and then I want two columns
‫as well.
‫So which means that I want this and then I want this and then I want this and then I want this.
‫So how am I going to go ahead and how I'm going to do that.
‫And here comes a tweak and that tweak is here is actually an intersection, so intersection can be added
‫inside a column and when you add it, you get a section and you'll also get two columns by the default.
‫So now what you can do is that you can get an icon box over here and you can get an icon box over here,
‫and then you can just go ahead and you can duplicate this intersection.
‫So you ultimately get icon box and I can look.
‫Now, here you can see that we have ultimately achieved this type of design.
‫So this is what I actually wanted to show you.
‫Now, I hope that your confusion is a little bit clearer.
‫Now, let's take a look at them.
‫Let's overview everything, and then we're going to end this video and then we will be waking up with
‫our styling for the elementary basics.
‫Now, a section is the one that is the most important thing inside a section, there should be a column
‫and inside a column there can be any element.
‫Now elements can be staggered over one another, but elements cannot come as a side by side.
‫And if you want elements to be added side by side, then you should be adding columns and the columns
‫can be added horizontally and you can add multiple stuff into it.
‫So if you want to build this design, then you can add two columns inside the column.
‫You can add an element and then in here you can add an element and element right here and you can achieve
‫design this way.
‫Now you can have multiple columns and the columns can only be stacked horizontally, which means that
‫the column, column, column can be added this way, but column cannot come right down below.
‫If you want to achieve this design, then you have two options.
‫Either you can create two sections and add columns into it, or you can create a section, add a column
‫and then you can add an intersection and add multiple columns to it, and then you can add an intersection
‫and add multiple columns to it to achieve this particular thing.
‫Now, I hope that you have got a clear idea of how everything worked so far.
‫So from the next video, we will learn the basic styling of elementary, and after that we will be going
‫ahead and we will be designing this website.
‫So stay tuned, guys, and buy.