‫Welcome back, my dear students.
‫And in this lecture, we will be working with the page builder.
‫So let's just go ahead and let's get started.
‫So now, before starting with the page builder, we first have to understand what a page builder is,
‫then we can move forward.
‫So let's just go ahead and let's talk about that.
‫If we go ahead and we go to the website, we log in to the website and now we click on the Customize
‫over here.
‫Now we will be taken to the theme customizer.
‫And these are the customization this theme is allowing us to do.
‫So you go ahead, you go to dashboard, you go to themes and you install any other theme.
‫That theme customizer is going to be different.
‫So theme Customizer is basically what the theme developer has allowed you to do to your website.
‫So we go ahead and we install any of the theme.
‫That theme is going to let us customize the top bar.
‫The header and the footer.
‫The thing that we need to do with the body that we have over here, that theme customizer is not going
‫to let us design that.
‫So basically let's suppose that theme customizer would let us change the typography of the body so we
‫can change the font, we can increase the font size and most importantly, that theme customizer would
‫allow us to change the background color.
‫But that's it.
‫Now in order for us to build amazing websites like this where we would be having images in the background,
‫the background overlay, and on top of that we can add as many elements as we want, either side by
‫side, either above or between the other elements.
‫So if you want to actually build this type of custom website, then we definitely want to use the custom
‫page builder because the default WordPress builder, if you go ahead and we just get rid of the customizer
‫and now we go into the edit page for our home page that we are on, and if I just click on here, it's
‫going to take me to the edit page over here.
‫Now this default builder that this WordPress is providing me actually sucks.
‫So you can see that I can actually add an image in the background, then I can add a text.
‫But let's suppose that above the text I want to add this image and below that text I want to add another
‫text.
‫Then I want to add two buttons in here.
‫Now let's say if we have got any option for that and you can see that we are not being given any option
‫for that.
‫So this is what the default WordPress builder is.
‫Now what we have to do is to install a different page builder inside the WordPress using a plugin so
‫that we can design custom websites like this.
‫And that particular builder is actually called the page builder.
‫All right, So now let's talk about which page builder should we go with, because if we go ahead and
‫we go into the plugins and then we hit on Add new.
‫Now if we go ahead and we search for page Builder and now if we hit on Enter, it's going to search
‫for that particular keyword.
‫Now you can see that we have got so many of the page builders over here.
‫So which page builder should we actually go with?
‫And the answer is really simple.
‫You need to go with the page builder that has got the most installations and that has got most reviews
‫and we have got this elementor website page builder that has got five plus million active installations.
‫So we can go ahead and we can use this page builder.
‫So let's just go ahead and let's install now and you can see that this is going to be installed on our
‫website.
‫So now once we actually install this page builder, it's going to be installed and now we can hit on
‫Activate and this plugin or the page builder is going to be activated.
‫Now here it says You are here, let's set the things up.
‫So what we have to do is to just click on cross at the top right here.
‫We need to hit on that and that is going to be done.
‫And now we have got this page builder.
‫Now we're going to be going ahead and we're going to be taking a look at how we can actually design
‫our pages.
‫So if we now go ahead and we go into the pages and now we click on all pages, now if we go ahead and
‫we click on edit over here, you can see that we are right here.
‫So now I've got this edit with Elementor and if I click on it, it's going to redirect me to the Elementor
‫page Editor.
‫All right, so this is now the Elementor editor.
‫If you are getting any of the notifications, you can click on cross at the top to get rid of that.
‫Now once you are actually in the Elementor editor, what I need you to do is to look on the left side.
‫If you are getting a container option.
‫This is basically a new feature by the Elementor that has recently been released.
‫And what I want you to do is to actually turn off this feature as this is recently released and there
‫might be some of the bugs that they need to cater.
‫Also, this feature is a really great feature and I will be basically including this feature later on
‫in the course.
‫I'm actually working on the new course updates in which I will be basically including this particular
‫feature.
‫But right now this feature might contain some of the bugs.
‫So that is why I need you to actually disable this feature so that you do not get this container and
‫how you're going to do that, you can click on go back once you are in here.
‫Now you have to click on the Elementor and now you have to click on the settings.
‫Once you are in the settings, now you have to click on the features and now you have to go down.
‫So under the stable features, you can see that we've got this Flexbox container.
‫Now, Elementor still says that this is stable features, but in some of the forums I've seen people
‫complaining about it like this feature is actually still buggy.
‫So what I would recommend you to do is to select this and click on Inactive.
‫Once you actually select an active, it will tell you to deactivate that.
‫You can click on that and it is going to be deactivated.
‫Right here.
‫You can see it's not turned to green anymore.
‫And now you can hit on save changes.
‫And now if you go to the pages and you click on all pages and now if you will click on edit home and
‫now when you will click on edit with Elementor once again, it will take you to the Elementor right
‫here and now you can see that that container is now no longer here.
‫So once this is 100% stable, I will be going ahead and I will be updating this full course and I will
‫be including that container feature.
‫And now you can see that we are actually being given a full editor over here where we can drag and drop
‫some of these stuff.
‫And that is going to be added over there.
‫So now you can see that if I bring my mouse to this content area, I am actually given a cross over
‫here.
‫So if I am to click on it, it's going to be gone from here.
‫All right.
‫So now here it says drag widget here.
‫And now what we can actually do is that we can drag any type of widget directly in here and that is
‫going to be added on the website.
‫And now we can style this.
‫Now do not worry about this particular page builder if you do not know how it actually works.
‫We have a dedicated section right after this particular lecture where we will understand each and every
‫thing about the page builder.
‫All right, so do not worry about it.
‫Now, what I would actually recommend you to do is to just watch this where we are actually doing we
‫are actually just understanding how it's actually done.
‫So not implement that.
‫And from the next lecture when we will be working with the basics of this particular page builder,
‫Elementor page builder, then you can go ahead and you can implement that.
‫All right, so let's get started.
‫Now you can see that here it says Drag widget.
‫So let's suppose that if I want to drag this heading element and I just drop it in here, that is going
‫to be added.
‫It says, Add your heading text over here.
‫Now if I just go ahead and I just click on this grid button over here, if I just click on it, it takes
‫me back to that particular page where now I can add particularly anything.
‫So I'll be just unchecking this pro because I do not want to take a look at the pro elements right now.
‫And now let's suppose that I want to add a button.
‫So I'll just drag the button and I'll drop it in here and you can see that I've also got a button over
‫here.
‫Similarly, if I just click on here now, I can go down and I can add so many more things.
‫So like, let's suppose that I want to add a progress bar.
‫So I just drag this and I just drop it in here and you can see that that is added over here.
‫Now if we take a look at our project website, you can see that we have got the same progress bar over
‫here.
‫And if I refresh this, there is going to be that animation over here.
‫So this particular website is also designed using this page builder and we will be talking about that
‫from the next lecture, like how we can go ahead and how we can use that.
‫But here is the most important part, and that is you can see that if you take a look at this website,
‫this website is fully designed.
‫And now here, if you take a look at this website, we've got the title.
‫We've also got a sidebar being shown over here.
‫So what we have to do is to get rid of it.
‫And now I want you to implement what I'm actually saying.
‫All right.
‫So the very first thing that you actually need to do is to go ahead and click on go back and then you
‫can just hit on Leave website.
‫All right.
‫And now if you go ahead and view this page, you will see that we will be actually taken to the default
‫view.
‫That was our default view.
‫Now what we have to do is to click on edit page.
‫So now what we have to do is to just actually go ahead and we have to get rid of the title that we have
‫over here.
‫And we also have to get rid of this sidebar that we have over here.
‫So how are we going to get rid of that?
‫What we have to do is to go ahead and we have to go into the dashboard.
‫Now, once you are in the dashboard here, you will be given a message that will be install and activate
‫Ocean Extra.
‫Basically, this plugin is for the Ocean WP theme and Ocean WP theme lets you actually get rid of the
‫title and get rid of the sidebar so that you can actually design the full page using the page builder.
‫So let's just go ahead and let's work with that.
‫All you need to do is to hit on, install and activate Ocean Extra.
‫And if you are actually not being given a link to download and install the ocean extra, then what you
‫can do is that you can go ahead and you can open the plugins.
‫All right, you can go into the plugins directory, you can go into the Add new and now you can search
‫for ocean extra.
‫All right?
‫And once you are in there and you will search for that, you will be given that plugin that you can
‫go ahead and you can hit on active and activate or install now and then you can activate.
‫All right, my dear students.
‫So once you have activated the plugin, you might see this message.
‫So what you can do is that you can click on Skip.
‫All right, so once this Ocean Extra plugin is successfully installed, now you can go to the pages
‫and then you can click on all pages.
‫And now if you will click on edit page.
‫Now you can see that we have got.
‫This option, which was not here before.
‫And if I click on it, you can see that now I have got the page settings and stylings, which means
‫that now I can actually get rid of that title.
‫So if I view this page in a new tab, you can see that I have got this title over here.
‫Now let's suppose I want to get rid of that title.
‫So I will click on this.
‫Oh, this is going to be opened up now.
‫I can click on this title over here and here it says Display page title.
‫I will click on the disable over here.
‫And now I will hit on update.
‫And once this is actually updated.
‫Now, if we go ahead and we refresh this page, you can see that now the title is actually gone.
‫Similarly, now we have to get rid of this sidebar.
‫So in order to get rid of the sidebar, you need to go back to the editor.
‫Then in the general, you can click on that and it's going to show you the content layout.
‫We're going to select this and we will select this to be 100% full width.
‫And after that we will click on Update.
‫That's it.
‫Now when you will click on the page and you will refresh this, you can see that the sidebar is also
‫gone.
‫And now we have the full page that we can edit our website.
‫So now let's just go ahead and let's click on edit with Elementor so that we are taken to the Elementor
‫page builder.
‫So now, first of all, what I will be doing is that I will be getting rid of the content that I have.
‫So I will click on the cross, delete everything, and now I will click on the update right here and
‫the page is going to be updated.
‫So now once the page is updated, now if I refresh this page, you can see that I have got nothing in
‫the body area and this is the body area that I have got.
‫So now let me show you the power of Elementor very quickly.
‫Now, I do not want you to implement this on your end because in the next lecture we're going to be
‫basically working up with the basics of elementor.
‫That is why I need you to put your hands away from the keyboard and just see what I'm actually doing
‫so that you can be amazed to see how Elementor is going to let you build a website like this.
‫So let's just go ahead and let's get started.
‫First of all, what I will be doing is that I will be getting the heading and I will be dropping it
‫in here.
‫You can see that the heading is added.
‫I will be going ahead and I will be changing the text.
‫Now I will be aligning this text into the center and now I will be applying a background image.
‫So once I have added the background image, now I'll be going into the layout and I will be adding some
‫of the height to this section.
‫Now, do not worry once again about what a section is, what a column is, and what an element is.
‫As we're going to be diving deeper into it later on in the next lecture.
‫Now I'll be going ahead and I'll be applying a background overlay.
‫I'll be applying a black background overlay so that it looks good.
‫And now I'll be changing the size of the heading and also the color of the heading.
‫All right.
‫So now you can see that this is how now the website looks and how amazing is it looking.
‫Now, the question might come into your mind, and that is, why are we actually using Elementor when
‫we can do the exact same thing with the default editor that WordPress comes with?
‫And the answer is yes, you are right.
‫You can do this type of thing with the default editor, but you cannot do further customization.
‫Like let's suppose that if I want to actually add a button down below, I want to align it into the
‫center.
‫And I also want to add another element right over here, and I want to align it into the center.
‫So this type of customization I can actually not do with the basic editor and I need to have either
‫page builder or extra plugins to build this type of custom amazing layout using the Elementor.
‫So now from the next section, we're going to be actually working up with the basics of Elementor.
‫Now I'll be ending this lecture and before ending this lecture I just want to say one thing.
‫And that is you can see that you might see this sidebar of the element in a black color on your screen.
‫It might be of white color.
‫So do not get confused.
‫This is only black color because I am actually using dark mode on my Mac.
‫So if I actually change the dark mode and I change this to the light mode, then this is going to be
‫turned into the light mode.
‫And now if I will view my browser, you can see that this is how it will look on the light mode.
‫But since I prefer to use the dark mode, that is why you may see this sidebar turned into the black.