Working on Elements in Content Category

12 minutes
Share the link to this page
Copied
  Completed

Transcript

Hello guys, I am Shahzad admin and welcome to lesson number fair. Today's we are going to discuss from the content side make sure we are working on the visual composer and if you are working on the visual composer, I consider that you have a basic knowledge of CSS First of all, because we are working on the CSS section and you have the basic knowledge of HTML and you have the basic knowledge of WordPress, so if you are watching this series, so you must familiar all of them. I'm I'm am saying basic knowledge, HTML and CSS. Okay, so now I have a column I'm adding something in this column, click that button. So in the content side you have we have discussed about the row text blocks separator and separator with text. So these is the FAQ.

So we are going to discuss in this lecture the FAQs, image gallery proposal and the burden. Okay, so click on the FAQs section. So as you can see you have your FA Q's, you are Fogle focal title, and you have some content. And by default it's open or close you can choose I'm saying but by default, it's open. And now I'm saying I'm not defining that animation here. You can add your content here, you can add your title here.

First of all, I'm saying Title One, so select close. As you can see, you have your this FAQ sections here. So basically, if you want to add another just clone it, so this is the clone and added this FAQ section for All you're saying though, and I'm saying by default it's closed. Okay, so now as you can see by default it's closed and both are working fine. So you can create like this, just click on this button, go to the content and now you have your image gallery. So what is the image gallery you can add the possible full slider with the type of the image you can choose the type of the image.

I'm saying this time slider You can also choose the fixed slider You can also choose the level slider You can also choose the image greater sorry, depend upon. I'm selecting the first one options, okay, you can add the title Also, I'm saying the rotated in three. Okay. You can also select the 510 and 15 or disables. I'm saying I'm selecting the images from the image Media Library if you have an external link just for the links here. Okay, so go to your link Selecting these three these I'm selecting these 1233 images Okay, these three images select I've just I have just selected so you want to delete just click on that X button so you can also remove okay.

So you can also use the large medium poll and thumbnail size is so divine upon you we have already discussed about this one click if you want to add the callback function or whatever you want to add the on Click Open ready for to URL link to launch image open customer I'm saying open pretty photo. Okay, I'm not going to add any missions just click on this and close. So now as you can see, we have just added the Three images. So this is that image gallery. As you can see, this is the image gallery, you can also go to update. Okay, go to the back end section to view the page.

And now click on that review button. So now as you can see you have your elements and you have your gallery section. So I have selected the options which options, just, I'm going to show you, this is a gallery image, this option, or sorry, this option is option, this options, you can click on that link to the large image. Okay, now refresh the page. Now click on the image. So as you can see, it's showing the large image.

So it's pretty depend upon you now what you just need to click on the link content and you have an image krauser so you have ally image problem. As you can see these, these are the same thing. So click on the plus button I'm going to add these three items add I've added three, choose your thumbnail first of all I'm saying medium. So this is me Holly. Medium, this is medium select, click Options and select slider option on horizontal or vertical. Okay.

The slider size is 500 not size speed, click on the previous sections as you can see you have your slide as you can see, it's it's a it's an image crawler. So this is the krauser This is the gallery so there is a major difference between slider and galleries. Okay. So now I want I'm going to add another element. So we have already discussed about the, so you can add the custom heading we have already discussed if you need the burden, just click on the button right on the right something for your button. First of all, as I'm saying, click me, like me so we can see.

This is the text. Okay? button size, which one you want to need style, choose your style, anything modern. You can also use the classic flat or whatever you want to add and shape around it Squire or round, I'm thinking around it. Okay, color of the image possible. I'm thinking green.

Okay, the size of the image possible. I'm saying large alignment, I'm saying center. Okay, so set cool with button. You can also select this or you can also add your icon here. Surely depend upon you ID and classes you can also add ID and classes. So, review so as you can see you have your button icon button.

Okay, so what you need is just me to it if you want to add the advanced on click section click on this and on click code you can add the code here so you can in this we will create the button okay so now just click on the plus button, go to the content and click on the flicker weird so this is a flicker or you can have the flicker weird here or the progress while click on the progress bar. So you have three progress bar or suppose open this you have a development 90% default and this is the possible designing 80% and this is the marketing 70% and just click if you have Some units percentage pixel, you can add the percentage pixel. You can add the color here you can choose the color hair options, they have some options ID and class name, just preview the page.

So as you can see you have your development, design and marketing. First of all, if you want to customize this, click on this you can add any parcels re gray, or suppose I'm saying green and I'm saying yellow and I'm seeing some other color channel Okay. So now they are saying that add the percentage with the percentage percentage preview. So as you can see, you have added the percentage. This is a development and these are Progress Bar so you can add the progress to our by selecting this element make sure we are working on the element. Once you are familiar with the elements then you will work on that you will create or you can create your HTML smoothly so pie chart you can add the pie chart.

So title add your title for sublime then this is the level value the level value first of all I'm saying pointy or liquid. The unit you can also use the unit click yes view review. So this is the pie chart. So this is a pie chart. So you can customize your pie chart. What we do, so you can see as you can see, this is the what we did 50% so if you are saying that this is the 90%.

And you can add the value percentage or suppose percentage and save a review. So you can see oh is the 90% we can add the pie chart, click on the plus button, add the new element, so you have empty space. So click on the empty space. First of all if you want to add some space between these two elements, so you need to add the empty space particles I'm saying 50 pixel 50 results that means I'm from the top and the bottom, I am choosing 50 pixels. So this element drag and drop here, so I want to add some space between these two elements. So preview, so as you can see in ours so we have added the separator here are suppose you can increase the space possible as I'm saying 500 Read, save, review.

So this is the 500 read empty space from the top and at the bottom. Okay, so this way you can add that empty space i'm saying is a 50% empties 50 pixels. Okay You can also add the percentage okay click on the plus button and select another. This is a revolution slider because you have revolution slider here you can if you are working on the revolution slider just click on the revolution slider and select your slider so you don't have a slide. That's why it's showing nothing. Content revolution slider five, okay, create your revolution slider if you have you want to create, but I'm not going to create this one.

So in this way you can create the content. In the next lecture we are going to cover the social then structure Then WordPress widget portal and WooCommerce make sure this is the portal theme. So that's why it's saying portal thing if you are working on next was that theme. So you definitely have the x y Zed theme elements. So I think this is enough for today. Thank you for watching.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.