Hello guys, I am Shahzad Emma and recommendation number for this we are going to discuss about the map heading, text separator, empty space, single image and HTML and HTML or HTML content. So, first of all, as you can see, we have created two elements in our previous lecture but now we are going to create or we are going to create another row so select the row first of all. So here is your row you have just selected that before selecting what is separator, so as you can see separator, create a horizontal row or edge are for you. So again, you created the separator, just click on this. So this is a separator, click on the separator. Okay, so you can see center left, right, these are the options alignment available here.

So you can see Let the colors I'm selecting the VISTA blue. Okay, so as you can see, I have just selected the VISTA view. Okay, you can also select any color you want to add possible purple. So purple is here with all single lines, so that's why it's not easy to identify the color. Okay, so what you can also select the 10 pixel. So as you can see you have 10 pixel width now, and a lot of options available if you are working on the separators.

As you can see elements, CSS animations, you can add the animations click on this and like this. Okay, so animations animate your element. So I'm saying I'm not using elements. You can also add that extra element ID or extra class You are customizing this. So, in the design options, you can also add the background Okay, you can also add the border and you can also add the border radius. So, this right here depends upon you, but for now, so, this is the portion of normal small or gradient a lot of options available if you are working on separator just for now I have added a separator And what about the heading click on the this yellow column that means it's saying append append to the column that means, I am going to add something in the in this column because if you are adding edit this column So, as you can see the design or the responsive options you have one single column.

So if you are choosing First of all, we are using a single column. So, the this is a single column first of all the length is Welcome, okay, and this is the column inside a single row, the column width is four, or in simple words, the column is four. So this is the four and this is a four. So four plus four plus four is 12 columns. So these are the 12 columns inside a single row. So you always insert 12 column inside a single row, others 444 12 or 2222.

Okay, so it's really depend upon you or you are you you are creating the one column. So one column for 12 times 11111 pill, the 1212 column, so shortly dependable, so this is a single column. Click on this, I'm saying this is the heading. So heading you have your auto adding, custom heading and separator with test, click on The custom headings so as you can see, this is a custom heading, select the type text source, this is a custom text or almost solely depend upon you and think custom text. Okay, so h1 or h2 or x five, x six or P or the the sort of div and I'm saying h1 this is Ashwin alignment center, you can set the alignment, you can also set the font size or your line height. And you can also set the text color possible anything right?

So okay, it's red. So as you can see, right alignment is center, you can also set the font family and you can also set the font style. And you can also set the animations and you have a element and the story ID and class name also, you can also add so in this way you can create the heading and how can you add the map or suppose for a single image. So as you can see, you have a single image options or elements. So you have a single image you have a single image and If you are, this is the media library or external link or you should image select your image source I am saying that I'm going to fetch this image from the media library, I'm saying External links so you have to provide the link if you are saying the featured image, so you have to provide us with your email and saying I'm going to fetch this image from the media library.

So I have to select the live image from the media library and this time I'm seeing this image okay. So this is the image I have just selected. So in that in this image size, so this is a thumbnail size. So this is the thumbnail size, and alignment of the image you can also add the center left or right solely depend upon the image size is default. You can also select any style. This will depend upon you.

Okay, on click action, you can also add the actions possible zoom option, so you can add the clip option you can add the animations Id and class and you can also add the ID and class separate if you are customizing this or suppose I'm saying this is a thumbnail click so you can see this as a thumbnail so that's why it's showing you just I think 200 by 200. Just click on edit this single image settings, just copy the medium paste here medium save close. So as you can see, this is the medium or click on the large. So this is a large save close is a large if you are saying that pool. So this is the full width of the image. So it's really divine upon you.

In this way you can add the single image. So if you want to add the element, whenever you want to add the element you have to click on the this Yellow icon because this yellow icon related with this call here, if you want to add something inside this column, then you have to click on this. First of all you are adding the text. So you can see you have just added a text area. So you must confirm which element you want to add in which column. So I'm adding the elements inside this column.

So click on this. Now there is a single image if you want to add the text, just find the text. So as you can see, this is a text block, separator with text, custom heading, photo fancy tag. So these are the texts available here. You can also click on this click on this click on this click on this for each element has its own nature. Each element has its own functionality.

So I'm not going to define each and everything here but I'm just giving you general concepts. So you can also click on this. So elements you can add anything here you can add those animations, external styling and ID and you can add the goal and whatever you want to add, just click on this click on this so as you can see it's showing by default from the left side, just click on the center first going from the center side. So this is the text area design options you can add the background color first of all if you want to select the background colors as you can see, this is the background color. So each element has its own functionality in has its own nature source will depend upon Okay, so remove this add a new text for suppose in this time I'm going to add this text with separator.

So I'm saying title, add your text here for suppose Ok, alignment center position center. Okay, color is gray border one pixel, you can add 123 and four pixels also an element worth. So as you can see we have just added the element with separator. So in this way you can create the elements so I'm going to add the map. So what you need is need to add the photo map section, photo Google Map, I'm saying his map section. So width, height, lecture width height, and select your map is trial and select your latitude and longitude.

Okay, so this is the longitude and map zoom, top margin default width, okay you have added the map So you can find the latitude in my current position in Google Map. So this is the current position. For suppose I'm saying, Let it latitude and longitude. I'm saying Karachi. This is the longitude. And it's saying latitude.

So this is the latitude. Add your latitude here. And where is the longitude and your longitude here? Okay. Select our date. Now what do you need just need to click on the back end section.

A map is not will preview that again You have your three items as you can see, you have your map here. So you have added your heading, single image and your heading, both map and sometimes I use front end and sometimes I use back and forth Don't worry about it, the concepts are the same. So these are the elements which we have created in this a single column I want to add another text. So text, the text is a WordPress type text type something here. So as you can see the water tax watch preview. So this is what was done.

So in this way you can create your elements by using drag and drop or by selecting some elements or things not fully in the next section we are going to cover some other topics language