Hello guys I am Shahzad Ahmed and welcome in Lesson number 30 days we are going to discuss about the basics of visual composer make sure this is a visual composer series and we are learning the visual composer. So before starting zil composer I can see that you have the basic knowledge of WordPress and definitely you have the basic knowledge of WooCommerce if you are not familiar with WooCommerce then you have to familiar with WordPress before starting this series. Okay, so as you know we have installed the premium theme. And now we are going to learn the little components. So go to your dashboard, first of all. So this is your dashboard.

So as you can see, this is a visual composer page builder, okay. You can also set your preferences or your settings. Here host Okay, so go to your page all pages. So you have imported all the time. From the portal themes in the previous lecture, so add the new page, make sure we will come over to the page where Okay, so as you can see this Welcome to WP bakery page builder. So I am saying this is fast first page, okay?

So publish or hit the Preview button. But before publishing any page you have to preview the page okay? So this is the classic editor okay if you want to work on the WordPress web Bakri or whenever I say WP battery or whenever I say visual composer these are the same things. Okay, front end editor, first of all, so this is the this is your front end editor. Okay, so, add your element or add a template is totally depend upon you. First of all, if you are adding a template So you have to choose a template.

So these templates are available if you have any template, Save Current layout as a template, okay, so you can access that library also. So you have a lot of templates available here. You can choose any templates from from here or you can create from scratch. First of all, if I'm going to add this template, just click on the template as you can see, this is the template okay. Okay, so, element, create header row, so this is your row. Okay, make sure this is the front end layout.

You can also work from the front end and you can also work on the backhand side. So really depend upon so this is the back end side, click on the row. So this is your row, which row you want to add for. Suppose sixty.com is the official website. And as you can see we have some portion. Okay, don't worry about it go to or from the usual.

And I'm going to give you some basic knowledge of bootstrap. So you can see these are three things 123. First of all, I'm going to first of all we are going to create these things. How can you add this, just click on this. And as you can see, you have three columns, three columns, click on this. So you have created three columns here.

And now what you need to say you just need to create the icon and heading and your element or your text. So click and Find icon so you can see portal icons. So this team has its own icons called awesome forums. Awesome, basically, is a plugin. So you can create the form you can create your not your but you can use the Font Awesome photos, click on the Font Awesome. Choose your icon.

So these are the items from the font, awesome. First of all, click on this item, or click on this icon, okay, your icon size, you can place your icon size, select your color, first of all in this time I'm saying this is the green color I need a I need between colors. So this is the icon. Okay, so you have your icon and your simple icon for suppose and where you can add the icons First of all, as I'm saying center safe view page. So you can see you have your icon with the icon Okay, just a second. I'm saying this is 60 pixels save you okay wait a second.

So I can if I choose this one, this is simple subtle background preview the page source fa fa is not showing not worry. Select a text area. It is a text area. Okay, review so as you can see this is the text area appears and why it's not showing The font okay because we have selected that background color red, I'm saying background color black. Now the background color is black as you can see and I want to choose the font color is white. So this is the font color is white.

Just a second. These are the photo icons and saying I'm selecting photo icons is a source. Okay the photo icons are working the fold awesome is not working, so don't worry about it. So you you have your icons first of all you have your headings so what you need just need to create the heading, click on this and type heading. So. So this is the custom heading, or photo adding or separate with text I'm saying called heading.

So this is the photo heading. Select title for suppose for the heading I'm saying which heading copy this content, go to your page, paste this here save your page Okay, so now you have your heading but you need the heading below the fold icon. So right this item right here your page so you have your icon heading and your text. So you are creating these three same elements so how can you do that? Just click on the clone photo icons. So, click on the this to clone this clone means we are going to copy this element.

So you have created copy this you have just copied it you all you can also copy this copy okay now copy this bad boy here copy this bad boy his chair and copy this text and paste here now a review so as you can see you have just created three same icons, so it's totally depend upon you how you are creating and what is the requirement was to call. So, these are three I columns. As you can see these are these are also things three columns. And this is one single column. This is one single column. And this is the portfolio section, if you are watching this, as you can see this is the one column, second column, third column.

So why I am saying column? If you are familiar with bootstrap router bootstrap grid system, then you definitely know about what are the columns if you are not familiar with total bootstrap, or the grid system in bootstrap. So go to the bootstrap. Open this bootstrap is a front end framework First of all, I'm just giving you the knowledge. Okay, so documentation, so I'm saying grid system. So this is a closed system.

So they are saying that one column, second column, third column, so you have 12 column in each direction. So as you can see, these are three columns, four, four, and four. So 812 columns to 12 column, always available in each is screen. So I have 32 inches, LCD or LED. So that's why 444 if you are creating the 12 columns, so how can you create the 12 column inside a single row, so you can create that one, one column single column 1111. Okay, so as you can see, they're saying rows, okay, so this is the row and these are the columns.

And as you can see, they have the documentation they are saying, and you must place all the columns inside a particular row. So as you can see row are wrappers for columns. Okay, so now as you can see, you have your 12 columns, so One single column, and you have your one column, one column, and one column you're working on the second. For suppose if you want to create the 12th column, you can also create one one column from the head for suppose you can choose the row first of all. And now if you want to create the five columns you can create, click on this 12345. So don't worry about the bootstrap, he just need to create the columns from the hair.

If you want to create a two column just created a two column if you want to create the one single column just create the one single column if you want to create that four column just create a four column so it's totally depend upon you which column you are going to create so far. Suppose you have your big round color, swag, can you create the background color Here, this button added the row. So in the design options, you have your background color options or suppose select this background save preview changes. So now as you can see, you have just selected the background color. So it's totally depend upon you and your requirement that you have just upgraded the page to call. You have just added the elements from the back end session.

Okay, so what happens if you want to create these same layouts from the front end section? So go to the front end layout, I am always I always use the front end layout. Okay, so you can see we have three columns First of all, so how can you do that just click on the this Edit Row button. So this is a design option, change your background, color or sublime choosing right select flow. As you can see, this is the Beauty of front end layout, so you don't need to click on that page preview again and again. So wrong change your background color or you can also set your background image or suppose Okay, we will discuss about the big sandwich for now.

Okay, so if you want to create the same row, the clone of this, just click on that this icon so this is the clone. So you have just created the row or three column. As you can see, it's very easy to create First of all, as you can separate so click on this and this is a separate app, click on this so Save. So these this is a separator just drag the separator and drop this separator not here because it's a row just click profit Okay. So now update. So as you can see we have just separated so the separator is available the empty space is available a lot of elements available here, but you can speculate depend upon you either you are using front end layout and either you are or you are using back end layout or back end editor.

Okay, so as you can see we are we are now working on the front end and we have worked on the back end editor. So in this way you can use your rows and columns. So, I think this is enough for rain and extraction we are going to cover some other topics from the visual composer. So, thanks for watching