Become an Expert with Elementor Pro MASTERY Course: Beginner to Advanced

1. Class Overview: Hello, aspiring web designers and freelancers. I am Pre Meta. Your guide on the ultimate journey and web design with Elementor Page Builder, where will unravel the secrets of web design without the need for coding. In the next chapters, you'll gain the freedom to work from anywhere as a freelance web designer. Imagine mastering the art of Elementor Pro crafting, visually stunning and fully responsive websites. No code, just pure creative power. You're diving deep into the skills that sets you apart from the fundamentals to advanced techniques. You'll charge more for your work. Create websites optimized for speed and loved by visitors and search engines alike. Learn to build locally without domain and craft custom menus for seamless navigation. We'll also explore all the major element or elements and leverage the power of element, or AI, to speed up the workflow and design visually stunning websites. This course is for anyone who is passionate about building websites without the need for coding. Whether you dream of launching a web design agency, starting your business, becoming a freelancer, or if you simply want to learn everything in one comprehensive course, this is your getaway to success. But that's not all. Get ready to become a pop up expert, lock dozens of pro elementor widgets, and discover how to create impressive sites using the free elementor features. Thank you for considering my elementor pro mastery course. There is absolutely no coding knowledge needed, just a computer and internet access. All tools and software used in this course are absolutely free to get started with ready to turn your passion into a profession. Let's dive into the exciting world of web design with Elementor Pro. 2. WordPress Installation & Setup: One, welcome to this new course. I'm so excited that you're here. This course, literally has the ability to change your life forever, as it has for me. But you need to complete this course entirely to gain its value without further ado. Let's just start with this lecture. First and foremost, we need to install Zap and press in our local system. Now there are another ways also to get started with web press. Mainly to buy a hosting service, whether it be hostinger or site drown. There are many different hosting service providers, but I don't recommend suddenly start paying for it while you are learning. Just because you can always make use of your local system and make it act like as a web server. So that's what we're going to learn today to make sure that we install web press in our system and practice around in our local system. Right. As you can see, I've opened up this Google Chrome and I have been to the Zam official website and in the download section I can see different versions to download for the operating system. Now, depending on the type of system that you're currently using, the installation process might be a little different. Since I'm using a max system, the installation process is going to be a little bit complicated compared to the installation process and windows because windows has a very streamlined and linear system of installation and no other additional things are required in terms of windows installation. Whereas in system you might need to make few changes here and there in terms of permissions or changing few files here and there, but don't worry what it whatever system you're currently using, it doesn't matter because I'll be going through the steps while I'm explaining this system, I'll be going through the steps for installation on Max system. But I also be guiding you all that what are the things that you need to do for Windows or where exactly you can skip the video from to you get started with the next lecture. Since I'm using a Max System, I'm going to go ahead and download the latest version of the Zap. Right now. Since I've already installed Zap, I'm not going to install it again. Now Zap, basically what it is, it has different kinds of servers and databases like Apache, my QL, and all those different kinds of things. And it essentially makes your local system, your laptop or your personal computer to act as a web server. Now, what is a web server? Web server is nothing but a computer hardware. With computer software, it's essentially computer itself. But the difference is that it accepts TTP requests and its variants like STP requests, like hypertext transfer protocol and hypertext transfer protocol, secure layer, whatever we work around with the websites and web applications, we send out an STTP request. You must have seen that whenever you try to search for any website on a browser, on the URL section, although you'll be noticing that the domain name itself, But once you click on it, you might see the S or ETP. In some scenarios where a few websites doesn't have any SSL certificate, then you might see STP over there followed by colon and double. So that's what basically this STP request basically mean. So you're going to make your system as a web server, so it doesn't mean that your system will be useless and it will just act like a web server and you won't be able to do other things that you used to do. It's basically just that it will help you work around websites and web applications requests. Right? Once you've installed this Zamp, you don't have to do anything else, just click on Next. If you're installing for Mac, then all you need to do is just a Dragon drop and the Zampill get installed in your system. If you're using Windows, then what you need to do is that you just need to click on Next, Next, Next, followed by browser location where you want to install the files. I would recommend that you install your Zamp in the C drive where your Windows operating system resides, because it will make the process streamlined. Otherwise, what you will face is that once you install press and you're trying to log into your dress website and make changes in your website, you might find some complications over there. That's the only reason why I recommend installing zap in your drive. Once you have done installing the zamp, you need to go over to the Press.org slash downloads. Now there are two websites of Wordpress. Official. First one is Tress.org which is Wordpress organization, and the second is Wordpress.com Now I'm telling you all to go to Tress.org because you're going to get access to the open sources software. So that you can download this for completely free of cost, and you can build your own website from scratch. What happens if you go to Wordpress.com Well, you'll get access to the same press software. But Press on the other hand, is going to charge some money upfront on a monthly subscription basis. Just so that they can host the website on their server. So you are trying to make changes directly on the server and not in your local system. So that's the basic difference between Dress.com and Wordpress.org Once you have gone to Dress.org slash download section, you'll find this download button followed by the latest version, whatever press has come up with. Currently, the Wordpress version is 6.4 0.2 and that's what I have downloaded on my system as you can see over here. Now it will download a zip file. It's your responsibility to extract them because the zip file is a compressed file, and the uncompressed file, which has all these kinds of different folders and files, is an uncompressed version and it occupies much more space. That's the only reason why when you click on the download button initially, the zip file gets downloaded. Now once you have extracted from the zip file, you'll be left with this folder and this file, and you need to actually paste it in the zamp folder. So what I'll do is I'll just go to the Applications part. All right? I'll just go to the Applications, And since we are using Mac, this is the step that I'm following. If you're using a window system, what you need to do is just go over to your C drive, browse your Am folder, and once you find the zam folder inside that, you'll definitely find the ST doc folder. Inside the ST doc folder, you need to move your press folder over here. As simple as that, nothing else. Basically, what you're telling the Zam to do is that Zap has all these kinds of different servers as we talked about previously, Apache, my CQL, and all those kinds of things. When you switch on those servers, it will quickly recognize your Wordpress website. Since we are going to work around our local host, our local system, we want press to be in the Tdcs location all. Now what you need to do is just go to the press folder, search for this file called hyphen config. Hyphen sample dot Php file. Now this is a HP file. You need to make some changes in the HP file. Now you don't need to necessarily know coding and HP language. But few changes needs to be done inside this file so that a database will be created for your Wordpress website. I'll just click on this and I'll open this with a text editor. All right. Now, depending on the kind of text editor softwares that you have in your system, it could be a VS code or any other Notepad or any other text editor software. You can open it with it. And then down to the part where you can find this DB name, DB user, and DB password, right? Db name is basically the name of your database, DB user is the username of your database, and DB password is the password for your database, right? Each and every website needs some kind of data, and that data will be stored in a tabular format. And those tables, a collection of tables, will form a database. Now that database will be stored in, you can say in a SQL or no. Ql base Q is basically a structured query language, and no Qual is non structured query language like your Mongo DB. And we have different kinds of database software that we use since uses a QL database relational database. I would say it uses my okay, my QL in Apache. We need to give name for this database. We are using a press website. We'll give this name as press. The name of the database will be press and that's what I will enter within this single inverted commas. The name for the database has been given, followed by the database user, which I will enter it as root. Now, what does root mean? Root is basically account in your local system, whether you're using a max system or Windows or Linux system. Root will remain there. Root account allows access all the different kinds of databases. When you're making use of your Tress website, let's just say you have different database tables, you have few images uploaded to one database for a separate press website, and you have a separate press website, a second Tress website where you would like to access those files and those folders from the previous press website. Access using the root user name, you will be able to fetch the data from different databases. That's what DB user actually mean and that's what the root account actually does, followed by the password. You need to keep the password as empty, so don't put anything within this. When you are trying to enter the DB password. You don't want to lock your database with a password. You want the database to be accessible for each and every website. Right? Once you're done with this, just save this using control S, or you could just go over here and click on Save. Right? I'll just close this file. What I'll do is I'll just make a copy of this file. I'll just make a copy over here. What I'll do is make a copy and I'll paste it right inside this folder as you can see. A copy of this conflict file has been made, but I'll remove the copy and sample words from it. All I'll be left with is hyphen conflict dot Php file. That's what we want. Now once we have done that, what I'll do is I'll open Amp and Manager SX. Since we are using this Max system, I would click on ManaSx. If you're using a window system, all you need to do is just click on Zam and start the three servers that you have. I'll just enter the password since it requires few permissions. Once I've entered the password, it will open up Sam folder. Wait a second. It looks like I might have entered incorrect password. All right. Now let's wait for a moment to open up the Samp. Yep. Now we can go to manage servers. Now, once we go to manage servers, we can see Pro, Apache Web server and my databases. Now you need to start all of them. Just click on the Start button, Start all button, and all three of the servers will get started. In some situations, your FTPD or My databases are stopped even after clicking on the Start All button. You know what you need to do is just go to activity monitor on your max system, Search for SCTPD, Q and pro FTPD, and stop them all. All right? Only then you'll be able to run all these things. Now we'll minimize this for a moment, all right? It will keep on running in the background. What are we going to do is we'll go to our Google Chrome. And I'll click on a new tab and I'll search for local host hypun PHP, my admin. All right. Php, my admin. I can just click on the drop. Okay. Drop basically means that you've deleted that database and I'll click on New Press and I'll click on Create. All right. Database name called as Wordpress has been created inside my local host system. You don't need to add any names or number of columns or anything like that. You just need to go back and in your Ural section instead of HV, my admin local host hyphen, Wordpress is what you need to search for. All right. Give it some time. It will open up this page and just click on the language that you're comfortable working around with your Wordpress website. Now, for most of us it would be English with the United States version. So I'll just click on Continue. I will set the title of my Wordpress website be anything. It could be your business name, your portfolio name, whatever you intend to keep your website title as you can enter it over here. But for now I will just keep the site title as press. All right, username. It has to be admin. Now, this username is different than the username that we give for our database. For the database, we gave the username as route, which means that that account has access to all different databases, whereas this admin username is for the access of your particular Wordpress website. Just like how you have different Google accounts, your Gmail accounts, right? You have different usernames, different e mail IDs for it and different password for it. It is not the same case with your phone password and phone username. I hope you get the point. So here you give the name as admin. Admin is not necessarily that you need to keep your username as admin, but what it basically means is that when you have multiple usernames, you have multiple access to your work press website. Yes, it is possible. In future, let's say you're delivering this website to a client, you are acting as a freelancer, right? And you want to deliver this website to a client who can then later on manage few posts pages and upload few media content from their end. Then you want to give them the editor access but not the admin access. Admin access will give you access to all the different plug ins, additional settings, and basically the entire access of the website. Reason why we have a username called as admin, which has control of the entire website, and then we have different usernames. So if you would like to continue with your name as the username, just remember that this is your admin access. That means you have the entire control of the website. Right, Followed by a password. Now, why do we require a password? Since Wordpress is open source, there are a lot of chances of your website getting hacked. Now, that doesn't mean that Wordpress is unsafe and you should not go ahead with using the Wordpress CMS. No, it's absolutely false. I think about 43% of the Internet websites are made using press. If there would have been such a big flaw, then I don't think that so many websites would have been built using press. But the only point of having a password is that since I talked about just a few minutes back, that you can have multiple access to this Wordpress website. You have a username and a password. So if you want to give someone an editorial access and you want to keep the admin access, you need to have a username and a password. So I'll just give some password and I will hide my password so that even you know, you can't see a password that I use for my Wordpress website. I'll just go ahead with the password that I currently have. It doesn't matter that I enter a week password still. I'll go ahead with some difficult password just to give you guys that this is the safe practice to follow, okay. All right, this is my strong password and you don't ever check this box. This basically tells us that a search engine will not view your website. If you tick mark this box. So this allows to discourage search engines from indexing this site. And we don't want that to happen. We want our website to get recognized by search engines. But don't worry. Even if you click, don't click on this option. Search engines currently will never be able to index your website because that website is not hosted out on the Internet. It is residing in your local system and your local system is acting like a web server temporarily as you are making changes in your website. I hope you get the point. Once you've done all these things, I'll click on the install, but press button. The only reason why I'm going ahead with all these different kinds of particular details is because I don't want to skip out any of the details and I don't want to keep you guys in dark shadow that just get started with the installation part. And once you've done that, get ahead with the main purpose of the course. I don't want that to happen. If you guys are running something, make sure that you learn each and every single piece of thing, whatever. It's important for you, it's important to learn each and every bit of it. Now they are saying that you must provide an e mail address. I must have missed entering the e mail. I guess previously the e mail option was optional, but now I guess it is important. So let's just enter my e mail address. Okay, I'm going to enter my business e mail. And I'll click on install, press. All right, so let's just give it some time. All right, so press has been installed and I'll click on login. I'll enter the username or I can enter my e mail address. Right? And then I will enter the password. I can click on remember B so that every time I want to access this press website hosted on my local server, I don't have to keep on login over and over again, and you have the Tress website shown on your screen. Now, this doesn't mean that we have completed our entire step. No, this is just the beginning. Yeah. For Windows users, you're pretty much done. You can just skip this lecture from now, but you can go over to the next lecture. That's what I meant. But for the Mac users, you still have a few things left to do. The only reason why the Mac users have still some things left to do is because Mac has different kinds of security layers and different permissions for each and every folder files and all those kinds of things. That's the only reason why we have some changes needs to be made. I'll just close this dress website for now. What I'll do, I'll go to the Amp folder. This is the Amp folder, and I have an EDC folder. Inside this EDC folder, I will find httpd config file. Okay? I will find this config file. Now, I need to edit this, I need to edit this file. Now I am editing this file. What's the purpose of it? So what happens is that a tres website, just a blank tres website, will not get you to the point where you actually want to build something in order to get started with a theme builder, whether it be element or elementor pro or DV, any of the theme builders that you intend to learn and make use of it. To install that plug in, you need to install few themes for your website or some additional plugins, whether it be for SEO purposes or for some other functions that you might want to add for those reasons. To install plug ins, you need to make changes in the conflict file. Even if you're trying to upload, let's say images or videos, Mac might not allow you to do that. Or maybe we press might not get the full access to those elements that you're trying to upload. For those reasons, we are trying to make changes in this particular conflict file. We'll search down to the part where we find the user demon using control F or command. If you can see, you can say for Mac system, I just searched for user demon. All right. So user demon and group demon are two things that I particularly have over here. Now, automatically it has recognized these particular things. Okay, Why? So because Zap was already installed in my system. As you are aware, I've already created a Wordpress website in the past, actually, many Wordpress websites in the past in this system itself. So initially, in your case, you might not find this user followed by my name and this group staff. You'll only see this user demon and group demon. Okay, you need to comment these two lines. Now, what does comment mean? Comment means that the lines which your compiler will store, but it will not recognize it. It will not read and execute it. It will be there for your reference, but not for the compilers reference. Don't go in depth unless you haven't ever come across some coding courses or any of my programming languages courses, particularly Stag web development course. Don't worry about it. Just keep in mind that comment basically means that your software won't understand this line of code. But you'll read it, won't execute it, you'll just read it. It's just for your reference, we are not deleting this lines of code, we are just keeping it. All right, let me just find here we have just add a pound symbol before this sentence and it will comment the particular line of code followed by, you need to write user with capital followed by this thing. Now in your case, how will you know what's the user name of your system? Just open up terminal by pressing the command and space key at the same time and just search for terminal. Once you hit Enter, just search for ID and Enter. Once you search for ID, you'll find U, ID equals to 501 in my case, followed by a bracket inside which you'll find the user name. Okay? That's what you need to copy and paste it over here where you can see, okay, this particular line. In the next line you'll need to add group with the capital followed by the group name that you have. Again, open up terminal and you will find group right here. We have groups equal to twentyen my case. And in the bracket I have staff. That's what I copy and I paste it over here. Once you've done that, just save this file again by command S or you can just click on Save by pressing the file and click on Save. Okay, once you have done this, just close terminal and close the config file. And the next thing that you need to do is you just need to go back to your press folder. We have this config file, okay, Not the sample, okay? Make sure that you're not clicking the sample file. You're clicking the hyphen config dot Php file, Open with text editor, software search down to the part where you find config. Okay, Somewhere around. Okay, Once you press is basically WP underscore debug falls where you find this, just below that. Add this particular line of code I'll just enter and I will write define bracket, open bracket followed by a space single In S is file stream underscore method, okay, Method, single invented followed by a. Then we need to write again in single inverted commas which is direct. What this means, it basically allows your system to accept all the different kinds of themes, your zip files, or maybe images or videos, or audios or J files, any of the things that you're trying to upload or make changes around the database. You are giving the permissions of read write method, that's what you're doing. And just click on Save. I'll just click on File, and I will click on Save. Once you've done that, close this again. In the content, just click on content and right click on the content. Go to get info from Read Only. Make it read, write, make this also read, write, which is everyone. Your username will be over here, which will be read, write by default. The other two will be read only. You need to change that permission to read and write. Do that for I think all these folders, which is WP content, includes admin, okay? Inside WP content you might also find plug in themes and uploads. Do the same thing for all these different folders and change the permissions only. Then you'll be able to download different themes, you'll be able to access different themes, you'll be able to delete these different themes and so on. Okay, that's what I'm doing over here. Once you have done that, I think you'll be pretty much good to go and get started with your course. 3. Theme Installation & Getting Started with Wordpress: What's up everyone? Welcome back to the video. So in this video lecture, I'll show you all how we can install a new theme to a Wordpress website. Right here I am in the home page of my website. And here you can find a few of the things that are already present. Now, these are the things that I did not add manually. It is because there is some theme being used currently. Right at the top, you can find this black bar where we have the Wordpress logo, the Wordpress option. From where we can navigate between different themes that this website has, we can go back to our Wordpress dashboard. We can erit this site by our Wordpress editor and make use of the Gutenberg blogs. And then you have the option to add comments. Right here in the plus icon, you can find post media page user. With the help of this, you can add a new post. It could be a blog post or maybe a product page or a service page. You can add media and you can even add a new page. Media basically means that whether you want to upload a new image, GIF file or a video file page basically means that you're trying to create a new page. Whether it could be a home page about a page, contact page, service page, and so on. Yes, you can add multiple users working on the same press website. Right here, the rightmost part of this black bar. You'll find your own profile. So what's the username of your profile? Added profile options and to log out from the option, right, there's a search bar to search between different items that are there right here. Let's go back to dashboard right here. As you can see in this pane, we have home updates. Updates will show all the updates that need to be updated. Basically about our plug ins, but right now we don't have any plugins installed currently. Then we have the option of post media pages, comments that we saw right here at the top black bar. Then we have appearance section. Now inside this appearance section, you'll find themes. Let's just go into that and you'll find three themes already installed within our website, which is 2024, 2020, 3.20, 22. Now, I did not manually install them. It was already present when I installed my Wordpress website. All right, But we don't require all three of them, even. We don't require any one of them. We want a new theme. Let's just add a new theme. By clicking on that option, we can search between different themes. I'm just going to search for a block. Let's enter here, you'll find this option. Let's click on Install. Now, while it is installing, you might be under that assumption that once we click on install, the theme will be ready to use. No, you'll get one more option to activate the theme. That means your Tress website could have multiple themes installed in your website, but only one could be activated at the moment. Let's activate block at the moment and we'll go back to our themes section and we'll deactivate and delete all the other ones. Let's go to Theme Details. We have option to delete, let's delete them. This one too, so that we can free up the space for our website. You'll find that this is our block theme that we have been using. Now, apart from block, there are many more themes which people use. Mainly Astra. But I'll just show in this course that why block is required. All right, here in bloc appearance, you'll find Bo appearing right here after we installed the theme. Initially we just had themes and I guess we had editor, right? Only these two options were available. But right now we have Widgets, menus Block. Let's go to Block and see what are the options we get. Right here we have home useful plug ins, change log. But as we scroll down in this home option itself, you'll find an option to install the block companion plug in. We'll also install this one. All right, what are we going to do? We'll go back to our menu option. All right. Now why do we require a menu? So whenever you line on a website, you'll always see a top header or a navigation bar from which you can navigate between different pages. Right? Whether it be you're accessing from a mobile device or a desktop screen, or a tablet device, it doesn't matter. You'll always find navigation bar at the top of your website. Fine, so something similar we want for this website as well. So let's create a name for this menu. So we can give something like navbar or main menu. Let's just give navbar and I'm going to select header menu one. All right, now navbar, the name of our menu, will be accessible only to us. That means the name wouldn't be visible to the visitors who will land on our website. I hope you get the point. And let's create a menu. So once I create a menu, you'll find that there are a few pages in the Viewll section, home and sample page. But let's go to our page section to see which other pages do we have. We have a sample page and privacy policy page out of which only sample is activated. That means it's currently being used. And this one which is a privacy policy page, it's in the draft more, that means it is not published. We don't want any of these two pages, so let's just take both of them. And in the bulk actions section, we can select, moved to trash, so that multiple items could be deleted at once. Fine, so you can find that no pages were found. So let's add a few pages by clicking on that button, we can add a title to this page. So let's give this something like a home page. Once we do this, you'll find in this right side knife bar pane that we have a page and you have a block. This page will give you some summary that we'll discuss later on. Then we have block, we have a block theme icon here as well, which will allow you to select between different page structures and select different design styles. All right, but we won't go right now in detail and cover each and everything that we have right here, because we have planned for other lectures as well. Let's click on Publish again. Fine. Let's add a new page here. You can see an option to add a new page. We'll just click over here and we'll add an about page, About page. I'll click on Publish and Publish, fine. Let's add one more page and give it something like contact. Let's add one more page by clicking on this button, and I can give something like Contact page. All right, contact us. Let's publish. All right. Now once it has been published, I'll go back to my Tress dashboard and here you can find home about and contact us. Let's go to menus so that we can add three of these pages in our navigation bar. All right, so appearance menus. And here we have our a bar created, right? In the most recent section, you'll find home about Contact us and View, you'll find two home pages. Now, why is that? Let me just show you. In order to involve all of them, I can just select all and add to the menu in the year. You'll find custom link for this home and a page for this home page is something that we created just now. Page will involve all the other things that a web page requires. Whether it be a title, the body of the page, featured image, the excerpt of a page and stuff like that. But for custom link, this is something that you can add. Anything else, It could be link to your Facebook page or Instagram page and you can change the label to something like follow my Facebook, something like that. But right now we don't require any custom link to our menu. We can just remove this for now and we have about contact and home. But this is not a correct order or a structure to follow for our navigation bar. Always, we should display our home page, then about page, and then the contact page. Let me just drag and place it right here. Let's just say that you also add one more page. It could be a services or product page. Inside the services you are offering, let's say your company, a web design and SEO company. And you are offering services like web design, SEO, and e commerce. Under or rather I should say under services, you offer these three services. Let's just say under allowing your users to click on the drop down menu and view About page About will become sub item of home. Contact could also be sub item of about, not of home because you can see the structure. But let's just keep it something like home, About, and contact all three individual pages. Fine. And we can save the menu. If we go to our Wordpress website and visit what exactly we get, you can find that this is, this is the title for our Wordpress website. In the navigation bar or header here we have different pages that we created, and it is perfectly aligned in a way that we wanted it to display. Fine. Now, what is a theme? We actually installed block C in our system, but why do we need it? What is a Wordpress theme? Every website that you make using Wordpress needs a specific Wordpress theme. Without getting very technical, I'll just touch upon few things about Wordpress theme. Basically, it's a general style and layout of your current website. Each Wordpress theme has different options in the theme customizer, which we'll discuss in just a moment. And these options can range from customizing your header, which we have right here. The home about us contact us. And the footer which we have at the bottomost part of our page. Building different block post controlling the width of your website like blocks or a full width or specific e commerce features like your product layouts or different shop page layouts. Basically, all those pre built things which we get in a Wordpress theme, you can customize between them. So that's basically about a Wordpress theme. So generally, it is controlling the layout and style of your current Wordpress website. And they do not build the website, so make yourself very clear. A page builder like Elementor or DV, is required to build your entire, your entire website. But Theme, on the other hand, is more of like an outside shell for the page builders and a starting point to build your Wordpress website. So you hope you get the point about using and installing Wordpress theme into our system right here at the top bar. Earlier we did not find an option to customize. We had an option to erit the page but not customize. Currently we have the customized option. So once we click on this paint brush on the customize, you can find that our press theme editor omits a which is Bloxy theme editor. You can find the currently activated theme is Blox. You can even change between different themes depending on how many themes you have installed in your press website. But for now, since we have only one and we have removed other themes into trash, so we have just one. Now, if I want to make the home page as the current starting point, this one as the default page, whenever someone lands on our website, then we should make this as a default page. So how are we going to go about it? Right here at the bottomst part of our theme editor, you'll find sign identity menus, which adds homepage settings and additional CSS. So let's go to Homepage Settings. And here by default it will be selected, your latest post. That means whatever post or pages would be created, the latest, that will show up as the default screen. But that is something which we do not want. We want a static page. That means the thing which you have selected will stay throughout, the website stays alive. So we'll select static page, select the home page as home, and we'll just publish. All right, so here we have the homepage and we'll select it. We'll go back and you might find other options that we will discuss later on. But for now, let's just close this. And whenever someone refreshes the website, here we have the local host Wordpress and you'll find Home Page as the default page. Again, coming back to your dashboard, sometimes you might not find the access to the top bar or the dashboard. It could be possible because you might have not logged into your Wordpress website now in order to log in or the UR specific URL. In order for you to get started and log into your admin access, you need to type in local host forward slash the name of your website. In our case, that is Wordpress. Then we have again a forward slash and then you write WP hyphen admin. It basically means that Wordpress admin access. So there are multiple access to your Wordpress website. There are editors, there are subscribers, and there is admin and so on. So we want an admin access so that we can get started with a Wordpress website and make changes around it. Now, before I end this lecture, I would just like to show a few things here and there. Right here in the dashboard, you'll find settings under Settings, you'll find other options as well like general writing, reading, discussion media per melings, and privacy. You need not worry about all the other things that we have right now. Let's just focus on general and the other things that we have. Right here is Parmelings which I'll cover currently. Other things we'll cover later on in this course. Because I feel right now just to show and discuss, everything will feel very overwhelming. I'll just go to the general settings and here you'll find site title, which we have set to Wordpress. Now, while we were installing our tres website, we set the title to Wordpress later on. If you would like to change it, you can just come back to settings under General Options, you can change the site title. Now right here, you'll also find tag line. Now tagline is something that is optional. So let's say you are making a company website something like Nike. Now Nike has a tagline like Just Do It. You can write, Just Do it in the tag line and Nike insite title. Then you have the Wordpress URL site address, RL, which you need not worry about it currently. You also have admin e mail address. Now, whatever e mail that you set while you are installing your Wordpress, you set that to an e mail address, which for some reason you would like to change it so you can come back here and change the e mail address. Right. Other things that we have currently on this page, you need not worry about it. Once we scroll down, you'll find date, format, time, format. And this is something that would be important in a case where you are making new post blog posts specifically. And it would have the date and time that it was published. You can just follow a format for time and whatever feels comfortable to you. But whatever has been set currently is something that most of the people use. Now taking a look over at the Permel section in the Settings option, you'll find the permeling structure as plain Dan name, month and name numeric post Naman custom structure. What should we choose? Whatever is selected right now. By default, is it the good option to go with no? By default it will set to Dan name. That means let's just say you made you may up a block post or product post. The ural structure would look something like the year, the date, and the month followed by the name of the post. Now this is something that you should avoid completely at all cost because this won't be good in terms of SEO. Now in terms of SEO, ural slug also plays a very big role in it. If you could make your ural slug as small as possible and only add what the entire page or post is all about, that would be more than enough. Selecting post name is the best option to choose for the permeling structure and you can save the changes right here. All right, so whatever the post name or the page name would be, it would show up after forward slash and it will display that's how your permeling structure should be. I hope you guys enjoy this lecture. In the next lecture, I'll show you all how we can install and use our page builder. 4. Elementor PRO Page Builder Installation: Guys, in this lecture we'll see how to install the element or pro version in our system. As I said in the previous lecture that we'll go ahead and see how to build and design the home page using Elementor plug in, which is a website builder. I said that, but I feel that there are a few more things left to do before we jump right into that particular thing. Right now, we'll see how to install this elementor plug in. And we'll also look into some basic settings that elementor offers. Followed by we'll understand the container and the flex box thing. All right, so as you can see in my desktop screen, I have the elementor pro zip file. Now elementor is a free plug in which has certain features which are completely free to use. You do not need to enter your card details or pay even a single penny to access all those free features. But it has few features which are paid. And you need to pay them on a monthly subscription fee basis. So Elementor Pro is paid. But since we are learning and we are not going to be using this for commercial purposes, I have the zip file which will be accessible to you all. All right? And that zip file, you can use it for exploring the elementor pro features. All right? I don't recommend at all to use any pirated software or I do not promote by that, any sense. This is just a version of Elementor Pro in a zip file format that is used widely for practicing purposes, okay? So because I want you guys to, you know, you on a very tight budget to learn new things and all those kinds of things. That's the reason why I am providing these files so that you can learn and explore different things. Once you are actually building some websites for commercial purposes, maybe later on, then you can pay for the Elementor Pro Subscription plan. For that reason, I will be going ahead with this file and I'll also show how to use it. In the dashboard section, you'll see we have an option of plug ins. Once I hover around it, I see options of install plug ins, add new plug ins, and plug in file editor. Now install plug ins. Once you go over there, it will show a list of different plug ins which are currently installed in our press website. Since in our case our website is pretty fresh and new, it doesn't have many installed plug ins. All it will have is an anti spam plug in and the hello dolly. This is just a basic plug in. I believe it was installed because we had I guess 2024, 2023 theme builders. Right. That's why we have this plug in. We can always delete them later on, but right now let's just keep it as it is. And we'll add a new plug in right here. I'll click this option and you can see we have an option of many different plug ins. This section is acting like your app store or playstore, just like how in an iphone or an Android smartphone, we have the playstore or the app store from where you can download different applications. The same thing goes with Wordpress, that you can download many different plug ins. I'll just search for Elementor, Elementor, and I will click over here. Once it shows up elementor, I will install this. Now elementor, as I said, it has certain free features and it has certain paid features. In order to use the pro version, we need to have the elementor itself, the free version itself, so that pro and the elementor can go hand in hand. Then we click on Activate. And we'll wait till it activates this plug in. We can skip this. Okay? We can skip the entire process. Once it is done, again, click on Skip, which is at the bottom right corner of your screen. All right, now this is how it will show. Now the latest feature of Elementor has the AI tools as well embedded in it. You can just describe a few things here and there and it will do most of the job. You don't have to even do dragon drop thing. That's how elementor has advanced in recent times. But let's just skip this for now. Our main purpose of this course is to explore the Elementor and Elementor features. Forward press websites. We'll go back to our dashboard right now. What you just saw was the Elementor dashboard. Okay? Previously, as you can see at the top of the black bar, you'll have the option of customized, which is for the edit section, the edit dashboard for the theme that we are using. We have the edit page and then we have the edit width elementor. This edit page is the word press edit page option. This is for the theme that we are using, which is block. This is for the elementor, which is a page builder that we are currently using. We'll go back to our dashboard. And now we need to install our pro file, which is elementor pro. We'll go back to the plug ins again. We'll add a new plug in. At the top you'll find Upload Plug In option. We just click over here and we can find. Option to choose the file. Now you cannot dragon rope the file over here. You just need to browse the file and once it is located you can install and you need to activate the Pro plug in as well. Now once you've done that, I think you're pretty much installed this entire thing. Now as you can see, once the elementor pro has been installed, it will prompt you that a new version of elementor pro is available now. Please do not ever update this elementor pro feature. You'll get in a very big trouble. The only reason why I'm saying this is because let's just say you have built up a website which is hosted on your local server, which I mean that your system, your laptop screen, right? So you have built a website using Elementor Pro and all of a sudden you just decided to update all the plugins which you have been using along with Elementor Pro. Now what happens is that the elementor pro feature files which are there in the newer versions, all right, It could be a debug files, it could be new features that needs to be used. Those will obviously get appended with your existing element or file. Now element or pro, as I said, is a paid version. It requires a license key. You need to pay for a monthly subscription fee. Right? It will be linked to an account. Once it finds that your existing Elementor Pro doesn't have a license key, you might get into a very big trouble, causing you in legal issues maybe, or your website might just break. So don't ever update your Elementor Pro when you're learning stuff. When you have paid for the elementor pro version, go ahead and update it. All right, right now we'll just stick with this part and we'll go to the elementor settings. So as you can see, once I hover around elementor settings, I have tons and tons of different options. For now, I'll just focus on the tools part, or I should say Settings part. Okay, I'll focus on both of these options. Let's just go to Settings first and you'll find general integrations advanced and Features. Let's go to Features part. Once I scroll down, I'll find we have an option of inline font icons, so you need to change that from default to active. Now what this essentially means is that all the icons that you will have in this website, icons are generally in the SG format. Images are in generally P or PNG or the Pec format. All right, P is the most compressed and you know, it loads the fastest among the other options. Other file extensions that I just said right now, just like that, icons also have an SG file. Now this SG file will be rendered without loading the font. Awesome. And the icons library and its related CSS files and fonts. That's what basically this inline font icons basically mean. It means that your performance of the website will boost up significantly. Wordpress has got a very bad reputation in terms of the performance of the website, but I believe it's up to the developers how they optimize their website up to your point that it basically leaves no difference compared to reactive website or Wordpress website. Yeah, it depends on the server that you have hosted your website as well, but I think few optimizations here. And there might also help you speed up the performance of your website. So that's what it will help you coming to the grid container part. Now if you've learned CSS, HTML and Javascript, forget about STL and Javascript. Also, just focus on CSS part. If you have ever explored CSS ever in your life, you must have heard or even learned about the concept of containers, right? Containers and flex boxes. Elementor in recent times have added the feature of a grid container. If you want to use that container feature, click on the active and it will create a grid option that you can add. Container option that you can add in your press page. All right, we have the edit top bar also. We have this particular option. We'll click on Active. We can click on Active. This is for the AI version, okay. If you want to utilize the AI feature, you should click on the Active. Now, since you're using the elementor pro, the chance is that you might not be able to use the AI version of it. But if you're just going ahead with the element or free version and you're not installing the file which I'll be providing, you can pretty much activate the AI version of it. All right, then we have the landing pages listed elements and all different kinds of things which you need to activate. And you can just keep us at the stable features by default. All right, once you've done that, you can just click on Save Changes. And I think we are pretty much good to set up the entire element or website for the next lecture. 5. Flexbox Container vs Inner Section - Bit confusing, but Don't Worry: Everyone, welcome back to another video. In this particular video lecture, we'll look into what is the difference between the flex box container and the intersection that we used to have in the element or previous versions. I have created two websites. These are two dummy websites. The first one over here, which we can see has the elementor old version. I think it has the version 3.5 I believe. And earlier we used to have intersection. And right now we have an option of grids and container. You can see we have grid and container as the layout of our website. So I'll just quickly demonstrate what is the difference between these two so that we can understand how we can utilize the container feature in the coming lectures earlier, what used to happen is that as you can see over here, we have a heading text editor and then we have a button. Now, all of all three elements in this particular intersection, in this particular column or section are center aligned. No problem with that. Let's just assume that we would like to add another button to this particular section. And we want to arrange this button in such a way that this new button and this existing button are both are on the same line. They both belong to a same column, okay? And there has to be some kind of spacing between these two elements. Is it possible? Let's try to find out. So I'll just drag this button and I will try to place it. So it gives me two options. I can either place it above this existing button or below that. What if I place it above this button? I can center line this, I can left a line, I can write a line, or I can justify it so that it can take up the entire width. But that's not exactly what we want, right? We want these two buttons to appear in the same column. So how can we make that happen? Is it possible within intersection? No, it's not. That's why we have concept of containers and grids. So over here right now in this newer version of elementor where we have the elementor pro version as well. But mind it very well, the pro version and the free version, both of them has the container. So even if you would like to continue with the free version, you can still access the container by default elementos. Newer version has removed the intersection concept and have utilized the container as the layout of the default elementor style. So over here, if I try to add another button inside this, still I have only two options. Either I can place the button above this button or place the new button below the existing button. All right, but how to place it in such a way that it appears in the same column? Well, there comes the concept of container. I can just place it right here. And you can see I have a container. Acts like a box. If you have gone through my full stack web development course, where I have a separate section about CSS and the styling units, and the styling layouts and all those kinds of things, then you might get familiar with the concept over here as well. But if you have not gone through that web development course or you have never even learned about CSS in the past, there are no worries. Container is just like a box. In a box, you can arrange elements or items center line or stuff together above it. You can stack them up, just like that container acts like a box. Inside this box, I can place my existing button and I can just duplicate this button. Okay, so you can see both of these buttons are within this container. If I click on this container, you can see both these elements are present inside this box, which appears in the gray border line. Even if I try to show it as structure wise, there is a container inside that container. We have these two buttons. Let's try to arrange them in a way that both these elements appear in the same. We can centerline them and we can align the row in a horizontal direction. That's how we can get this. Now let's just say that we would like to add some more spacing between these two buttons. How can we do that? Once I scroll down, I have the option of gaps. I can just increase the gaps value. You can see that these buttons are getting separated apart. All right. I can even change it to something like reversed. Let me just make it zero instead of center. You can see this is how it would look like. Let me just change this to percentage. All right. There's some default spacing between these two. This is how it would look if the direction of this container is set towards reversed. If it is horizontal, it would be like this. Vertical, something like this. And horizontal. Or I could say reverse. Let's just change the name of this. Let's just say this is button one, button one. And the same goes for the next button. If I give something like button two, button two, and if I change the container layout instead of reverse, if I place it vertical, then you can see button two is stacked up. Button one is at the bottom, that's how the entire spacing and the direction of the container is set to. If you would like to justify the content, then you can even do that. Now that wouldn't happen with the vertical part. If I make it horizontal, I can center line it, I can have some spacing between this. So that one button is in the left side and the other button is on the right most side. That's how we have some space. A space around basically means that the button will have spacing on the left and the right hand side, just like that space evenly will have an even spacing around all the four directions. That's how you can see some margin or padding is there at the top and bottom right. So that's how this particular container layout actually works. Still, if you're not clear, let me just show you with another example. Just below this section, particular section that we just worked around, we have another section of reviews. Now this reviews is just for an example. It's not like an exact reviews or testimonial section that a website could have. But just to give an example or demonstrate the concept of container layout, I've built something like this. So in our older element layout, we have this kind of three reviews. Now let's just assume that we would like to center align all the elements inside this testimonial section. So how will I able to do it? So I can just click on the column itself and I can vertically align it middle and horizontal, alintized center. Even if I horizontally align center, this particular element is not being aligned center nor, nor this, and not this, all of them with respect to the y axis. They are being aligned center, but not respect to the x axis. If you can understand the graph clearly, this is my y axis. If I want to center the items with respect to the y axis, ideally the element would come somewhere over here. But if I want to, this is my x axis. If I want to center align the element with respect to the x axis, the element should lie somewhere over here, right? That's how the things should ideally work, but it's not working with the intersection layout. If I go back to the newer version of elementor and I can click on the container, I can change the container layout in a way that the direction is supposed to be vertical. And we have center aligned the content and justified the content center and the items are aligned center. You can see with respect to the y and x axis, the items are exactly at the center. Just like this. That's how it was possible with the help of our container layout. One last thing, The container layout would be helpful in a scenario. Let's just say in an older version that you're working around with, you just want to replace the image in a way that the image that you had in the first column should go to the third column. And the third column image should go back to the first column image place. All right, if you'd like to do something like this, sometimes what might happen in some errors, just by mistake, you could have placed the image in a wrong column or in a wrong section. That might even break your website if you have designed it properly. If you would like to do something like this, then this is just dragon drop. It is very simple, you can just drag this around like this. But sometimes your particular element that you're trying to re, arrange might go into another column, this intersection itself. In order to prevent that happen, what the elementor version has that let's just say I have this entire container. I have this entire container. If I just click on the structure, a container has a container. All right? What I basically am trying to explain is we have a container, okay? This is an entire container. This particular is one container, and this one is particular container. And this one is also another separate container. Instead of three columns, we have three containers. A box inside another box, it's like a nested box. Assume that we have a large box of Amazon. Then we have a few different boxes, Three boxes coming from Best Buy, Walmart, or what other E Commerce platform you could think of. Let's just assume any other E commerce platform box. Those three boxes are inside a big box. We would like to click on the container, the parent box. We can rearrange the direction of the elements of these containers. You can see easily the elements or the containers elements are basically these containers in our case. So what I'm basically trying to explain is that this particular column, which you might think that it is a column, but it's a container. This one is a container, this one is a container. So although these are containers, but they are part of a big container, so I can just call it as elements for now, right? So, I've just basically tried to reverse those containers in a way that we could rearrange in a way that we expected it to behave. So that's how our Flexbox container actually worked. I know some people who might be watching this video might find the concept of containers very confusing. But don't make it very complicated, just think of it like a box inside a box. A box has a flexibility to place items at any given direction with respect to y and x axis whenever you're trying to build around something, Whenever you're trying to arrange items, always place an image of a graph which has two dimensional graph. X and y axis. Don't go much complicated with the z axis. Also, we are not working around with a three D website, we are just working around the two D version of it. Right now, you just have a Y and X axis. If you want to place few items center with respect to the X axis and with respect to the Y axis, how it would behave. So that behavior, it would pretty much replicate what you expected when you apply the concept of containers. That wasn't the same case with the intersection concept. Containers are very much handy. And containers used to exist even before Elementor invented this in their newer versions. Because CSS by default had the concept of containers that dives and justification of justified content and all those kinds of things. I think if you're familiar with the CSS, then it wouldn't be a problem understanding this concept. But if you're new to the web development world, don't get overwhelmed by this concept of containers. Just re watch this video point, you don't find it comfortable working around it. I always say that whenever you're following any lecture, try to practically do it by your own so that you'll understand clearly that how it actually worked. All right, I hope this video helped you guys understand the concept of containers. In the next video lecture, we'll see how to build a home page of a website using the elementor page builder. 6. Learn Elementor elements while building Home Page: All right, I hope you guys are excited as much as I am because in this video we'll be building an entire home page from scratch using the element or Page builder. Now earlier when we did not have this plug in at the top black bar, we did not see this option to erit with element or Page Builder. But now we can right here I have a new page which is called element or 58. In this page itself, we are going to build and design an entire home page from scratch. Now since this has the writer inside the page, we would like to make this page from scratch. Let's just erit this page by going right here. What are we going to do? We'll remove the page name right here. See we have page a block option and this block app option block is what I'm going to click. I will click on the page title. Right here in the page title. I have an option of inherit custom and disabled. I'll just click on disabled and I will save this. Once I click on this, I will publish this page. If I view my page, let's see what happens. Do I get to see the page title right here? No page title will be there in the ural section, but it won't be present inside our web page. At the top, what you can see is the header that we created earlier. All right, let's just start by building the page using the elementor. I'll just click right here and this is how the interface of the element or page builder will look like. In the left pane, you'll see the different plug ins. And I should not say plug ins but rather I should say elements in the basic. The layout you can see we have a container layout, we have a Pro layout, we have a layout option. Then we have Pro. Here we have all the pro elements which are available since we have installed our Pro plug in. But I think this video would be good enough for those who are just starting out and who have not purchased the plug in. All right, what are we going to do? First and foremost, each and every web page requires a hero section. First, we'll create a hero section by clicking right here, which is the plus icon. And I will get to choose the different flex box options here. I have to choose the structure of my flex box. I'm going to go ahead with the two columns sections. And what are we going to do? We'll keep an background overlay of black color and we'll add some elements inside that. All right, here you can see the pink layout, which is formed right here, is the entire container, the entire Flexbox layout inside which we have two containers. You can see right here. All right, now in the left pane, you'll find three different options, the layout, the style, and advanced. In the layout tab, you'll find different options to choose and erit the container width direction in which your container works around and the gaps that you can leave between the elements or the containers that you have. All right, so I hope you get the point about layout part. Then coming to the style option, we have an option to choose between different backgrounds that we have. How the background should look like, when normally it appears, and what should happen when the cursor points toward that element. That is the hover effect that happens. You might want to add some more detailing or some more styling elements. When the user brings their cursor towards a particular element, you can change those effects and settings for the hoor effect. Coming to the background type, we'll find different options. We have the classic gradient video and slide show. Classic basically means that a simple color will be applied in the background. Or a gradient effect is something where two or more colors can be used in a different formats, like a linear, radial and so on. If you've gone through my Figma I course, you must have learned about different kinds of color gradients and how we can work around building different background layouts. Something similar can be applied right here in press website after background, we have an option of background overlay. That means if you're trying to create an overlay effect your background, you can even do that. Then you have an option to add border to the elements. You can give a border type, You can add about radius, you can add a shaped divider. In the advanced section, you'll find an option to play around with the margin and padding. Now we'll touch upon this topic later on about what is margin, what is padding? But essentially what it basically means is that in this lecture itself, by the way, what essentially margin and padding allows the users to do is that it leaves some spacing between your elements. Hope you get the point about margin and padding. Then you have an option to align the elements and in which order, particularly you want to arrange your items or elements. Then you have an option to place the sizing, play around with the position and, you know, maybe increase or decrease the Z index. So we'll cover each and every topic. Don't worry about it, but for now, what are we going to do inside this particular flex box? We'll add one background color. Coming to the style option, we have Background normal, We'll click on Classic, and we'll choose the color by default. You can see none of the color has been applied. It's just taking up the default color which is there. And the color of the background for this particular flex box is transparent. Whenever you find something like this, it is basically meaning that it's a transparent background. All right, so we don't want a transparent background rather we want a black background. Let's just click on the color, and we'll drag if a slider to the part of bottom left, or maybe even bottom right. You can focus, bottom left is black. You can even look at the hex code when the number is all zero, it basically means that it's black. When the numbers are all, it basically means it's white. We can just drag either left or towards right and we'll get a black background effect. All right. I can even choose between different colors by moving my slider towards right and side, the warmest colors. And towards the left, it will be the most cool colors. All right, here you can see if you play around this second slider, it basically means that you're playing with the transparency of your color. The more you move towards slider to the left, it basically means that your color is being transparent. And the more you move towards right inside, it basically means that the color is being opaque or non transparent. I hope to get the point. Let's just make it somewhat black, but not exactly black. I'm just going to keep it something about this shade. All right? I like this color, so we'll just keep it like this. Now, coming to this image part, we don't want to add any image as of now, but we'll look into later on. All right, now let's add a few elements inside this. What I'll do, I'll just click on this container. I'll just click on this container. I'll go back to this particular button, which will allow me to browse between different elements that we have. And what I'll do is I'll add one text editor. Text editor basically means that you're adding text inside it. It does not have an h1h2 tag, rather it has a paragraph tag. If you've gone through a full stack web development course, or you have some idea about HTML and CSS, you must have learned about different tags in HTML. There are many tags like h1h6, then you have a tag tag or paragraph tag essentially contains the entire content, body content of your text. Whereas from h1h6 contains all the heading tags, which basically represent what your body content is all about. Right now we're going to add something like business name. Right now you can see the color of this font is dark blue, I would say. But it's not going well with the black background color. Obviously, we want contrasting effect to appear when the color of the background is black. Then obviously, we want the color of the font to be contrasting to it. That means it should have some lighter shade, or a lighter color wouldn't be best to give it a white color. Let's go to this. You can see Textedor right here. I'll click on Style. And then in the text color section, I'll drag my cursor towards the top left part, and you can see my color has changed to white. All right. You can even play around the different alignments of your text. Currently, it is left a line, but it is not selected. By default, the text would be left a line. Then you have a central line, right a line and the justified content. But let's just keep it. With default settings, we can even change the typography. Typography, basically you are allowed to choose between different font families. Here you have a few built in fonts and it even is connected with Google Fonts. If I search for something like poppins, you can see it's a Google font. And it can be applied right here. But if you would like to add some custom fonts, you'll see later on in this course how you can add them into your website. Now you can even play around the different font sizes. Currently, it has some default size applied to it. You can even move the slider to see how it would look like with 15 pixels. 15 pixels of your text leor. Or I would just keep it. 2020 looks good. All right. Now you can even find different units. Currently it has in pixels unit, you'll find EM, Ram, viewport width and so on. So I won't be covering all the units that we have right here. But I guess in my full stack web development course, I've covered all of these different units in the CSS section entirely. I hope if you would like to get involved with these things in detail, you should definitely check out those courses. All right, then we have font weight. Font weight essentially means that whether you want to keep your font with some a bold or keep the weight of the font to be light. If I keep this something like light, you'll find that the font itself becomes very thin. If I keep it something bold, then you can find that the text is very bold and bright. Let's just keep it with bold. We can even change it out with semi bold or so, but I would just like to keep it with bold. Now you have an option to transform your text. Now let's just say for some case, I added a text which has a letter and all words in lower case, but I would like to change it to upper case. Then you can see all the letters of my text has been transformed to upper case. If I make it to lower case, then all the letters will be transformed to lower case. I have an option to capitalize. That basically means that after each and every word, the first letter of the next word will be transformed to upper case. Whereas the list of the letters in that same word will be transformed to lower case. That's what capitalized transformation actually mean. And then you have an option to normalize, which basically means that whatever text you have pasted, it will bring that settings back to default. Then you have an option to style your element. That means whether you want to keep your font style normal, italic or oblic. I hope you get the point about working around the transform and style. If you have worked around any of the text editing software like Microsoft Word or Google Docs, obviously these kinds of settings are very simple to understand and work around. All right, lastly we have decoration, which basically means that would you like to add an underline to your text? Would you like to add an over line to your text? Would you like to give line through a text or may be none of the above options. So let's just keep it with default which means none of the options will be applied for decoration. And then you have an option of line height. Now since we have just two words appearing in the same line, we don't have multiple lines, we don't have a lot of covering multiple lines. Line height basically means that whenever you have multiple words or such a long text that it covers in multiple lines, then the spacing between these lines will be increased. Right? You have line height, you have letter spacing. That means spacing between each and every letters. If I change it to something like, let's just say three, you can see how the text has transformed. It looks different than how it used to look earlier, right? You also have word spacing. That means spacing between two or more words will be played around with. Right? Then you have an option to add a text shadow, which we won't be covering right now. But essentially what you can do is you can add a blur or maybe add some shadow to your text. That effect would be cool in a case where you have a lighter background. But right now we have a darker background. I would not like to touch upon this area. Fine, let's add a new element. I'm going to click on this icon, and I will drag and drop my heading right inside this container itself. If I place it right in the left inside or in the right inside, for some case you might be not able to add your new element inside the container and it might get added outside your container. In that case, how would you rearrange them in such a way that it appears right inside that container? Simple. By clicking on the entire container section, you have an option to choose between Navigator or sometimes you might even find Structure. You can just click right here. And here you'll find different options like that. How the heading would appear, contain text editor and so on. All the elements that you have in the entire website will show up right here. All right, I can just drag my heading right inside this container where I have a text editor. You can find text editor appears above my heading and the heading appears below text editor. If you would like to rearrange the settings inside the container, you can just drag and drop right here inside the container itself. You can even do that inside this. Fine, I'll just change the text to something like making payments or I would just say something like secure payment option or let's just add a few more words. Something like making payments has never been easy. All right. What I'll do, I'll just change the font color, First of all by going to the style, changing the text color to white, changing the typography to poppins, because we would like to maintain the consistency throughout our entire website. Then we're going to add, or rather I should say, we'll transform this text to something capitalize. All right, now what are we going to do? We'll increase the size of this font. We would like to make this something like 70 pixels. That looks good. What are we going to do inside this container itself? Below our heading, we'll add one more text editor. Basically, we're creating a website for an application which works similar to Apple Pay or N More. It's like a promotional website for an application which allows people to make payments. This is just like a brief idea about what the website essentially explains and what are we exactly trying to do. All right, so here we have simple text. Again, we can just change around the font style and change the color of the text. But the easy way to work around this and pasting the styling would be just to click on any of the other elements which you would like to replicate. Right here, I can just click on this text. I right click on this element. I can copy, or I have a shortcut to choose which is command C. I can just do that right here in this element itself. I can right click and paste the styling. You can even see a short cut right here which is command shift and V, I can do it right here. You can see that it has applied the styling for the H one tag, which we do not want to apply, we'll just undo by holding command and Z patterns. All right, let's just go to the style tag. Change the color to white. We can change the font family to poppins. All right, and this is the text that we have. Now between this name that we have right here, text editor, and our heading, you can see there's some gap right here. It would be better if we could make use of few elements inside our elementor and make some cool changes around it. All right, so we can just add a divider between our texteditor and Heading that we have some kind of division between these two elements. Right here we have style now we'll change the color to something like green. I'll just move my slider towards something like green color. I would like to make use of a cool green color instead of a very bright green. I think this green color would look good. Let me just move my cursor to the topmost part, and this is the color of my divider. Now, I can even change the weight of my divider. That means how fat I want my divider to be, currently it is set to one. I can just make this to something like let's just say three. Or maybe even 2.5 would look good. All right, now you can find spacing between them. Let's just drop it down to the least possible gap between this and this. Now you can find that although the business name, the text editor ends right here, but our divider, you know, it occupies the entire width, We do not want that to happen. In that case, what can we do? We should make sure that our divider is selected in the element or editing pane. By going to the content part, you'll find whether you want to play around with the width of it or not. Currently it is set to 100% That means occupy the max possible width according to your container. Whatever width is there of your container, just take up the entire space. That is what 100% actually means. But we would like to drop it down to something around 40% That looks perfect. Now, what are we going to do next? We want to add two buttons below this text, right? We would like to add two buttons below this text, such that the user can learn more about our application or even download the app. Let's just bring our button right below this. Now we would like to make use of two buttons and both of these button should appear in line. That means both of the buttons should be appearing in the same line and there should not be two rows. All right, what can we do in that case? First and foremost, let's try to see what other elements that we can play around in the editing style of button. Whenever you have a button, you can change the type of the button, whether you want it to be default. That means it will have a gray background color Have Info button. That means it will by default have some set settings around it. Styling settings like blue background color. If you have success, it will be green in color. If it's warning, it will be orange in color, and if it's danger, it will be red in color. Let's just keep it default, you can change the text, something like learn more. All right, if you want to add some link to the text, what will happen is whenever the user clicks on this button, the user will be redirected to a page or part of a page within this web page itself. You can make things work around it. You have an option to play around with the size of the button, whether you want it to be small, medium, large, extra large. But I think this size of the button is good enough. All right, going to the style option, let's change the font family to poppins, which we have applied for other fonts and other elements as well. We'll change the color of the button to be green, which is the exact same color of our divider. What are we going to do over here? We'll just copy color hex code for this divider. We'll go to this button in the color of the button, I'm going to paste right here. You can find the color of this has been changed, but I would like to make this a little bit darker. I think this color looks good enough. And this is the same color that I will apply right here in divider section as well. Let me just paste this color. All right, this looks good, I think, yeah. Now, what are we going to do? We have an option to add a border radius as well. You'll see for the button, what does border radius actually mean. Right now you can see the button has some kind of a sharp edge in all the four corners. Top left, top right, bottom, left, bottom right, correct. But let's just say for a scenario where we would like to add circular buttons or rounded edges for our button. We can just play around this and we can add to something like, let's just say around 50. Then you can find the button appears to be circular, but let's just keep it something like ten. I think ten would look good. Or maybe even five in that case. Five looks really great. All right, now what are we going to do? We will just duplicate this. Now you will find both the buttons appearing in a stack format. They both are like this, one appears at the top, the other appears at the bottom. But we want both of these buttons appear in line in that case. If you have gone through the previous videos where we have discussed in detail about what is flex box and what used to be earlier which is intersection, then you'll obviously know that we need to add a container. And Align the items in a way that both of these buttons appear in the same line. Let's just drag and drop the buttons inside the container just to make sure that both the buttons appear in the same. We can just right click on this container, choose Navigator. Here we have a container inside which we have two buttons. All right. Now we'll change the color of the button and text to something like download now. All right. Download now. Let me just remove now, we'll just keep it download. Fine. What I would like is that let's just make the color of this found to be default, which is gray. All right, now let me change this direction of the container to be horizontal. So now you can see both the buttons appear something like this. Now, this is exactly what we wanted. All right, now in the next container, what do we want to add? We want to add an image of our application right inside this, we are going to drag and drop the image element. All right. Elementary is very easy. Any page builders in Wordpress are very easy to understand and learn. All right, here we can just choose Image. Now you have an option to upload the files from your folder, or you can browse between different elements that you have already uploaded. Right here, you'll find different elements and images that I've already uploaded right here. Or you might even enter a URL of an image which you found from Google Images. For now, I'll just browse through different images that I have right here. I'll just choose this image, and I'll select it right here. Now you can see this is the image that we have right here. Now I have an option to play around the image settings like change the width, max weight, height, and so on. And you might even find this option called CSS filters right here. Now if I click on this, I can choose between different options to play around the blurring of the image. Maybe play around brightness of the image. Currently it is set 200. If I move my slider towards left, you can see the image turns darker. If I move my slider towards right, it changes the brightness of the image to be more brighter. That means the image will be more white. You can even play around the contrast saturation. It basically means that you don't have to necessarily make use of any image editing tool in order to make some basic changes around your image. All right. I hope you guys have some basic understanding about how the elements in elementary page builder work. But there is still one thing left to do before we, you are done with our building, our hero section, which is to click on this container and you'll find the elements are appearing in such a way that they're sticking towards the top part and they are not appearing in the center. While just clicking on this container, you'll find that the direction of the container is set to vertical. Now that's exactly how we want, but we also want to justify the content to center so that the contents and the image appear such that the height of the containers are justified. I hope you can see the entire hero section is filled up properly. All right, now you might even find that there is some spacing between your header and hero section, which we'll see how we can do that with the help of margin and padding. All right, now before I move on with another section, you might see that there has been some change in the layout of our element or page builder. You can see right here at the top, we can see the name of our page. Then we have the different icons, the desktop icon, the tablet and mobile icon. Then you have the post settings right here. How did that change happen? Also in the layout section, you can see earlier we did not have the grid, We just had container for that. What I did, I just went back to my Wordpress dashboard. Right here. I just went to Elementor Settings. Inside Settings, I have a features in the list of features. What I did initially, this grid container feature was set to default. I changed that to active in the editor top bar. I also changed that from default to active. All right, you can also see an option to build with AI. I also selected from default to active and I made the changes. And I saved it right here. That's the reason why we saw a different layout for our elementor. Let's go back to pages, all pages elementor 58 and we'll edit Edit with elementor. All right, now before we create a new section inside the hero section itself, let's add a new image in the background so that there's some an effect. I would like to add an image right here in this container. By going to the style, you'll find an image. I will select an image which is called as line for the image that I have right here. And you can see there is a curved line going below the hero section. Now what I'll do is I'll just change the position of the image such that it appears in the left side. All right, before that I would like to change the display size. You can see display sizes set to default currently. But we can change it to something like contain. If I change this to contain, you can see the lines are appearing. Earlier we just saw a single line, a single curved line going below the hero section, and now we can see multiple lines. Now, how did that change exactly happen? The image itself contained many different, in many different curved lines. But we only saw the single line going across our hero section. That's because the width and height of our hero section is such that it only covered that part of the image where the line was passing through By changing the display size of our image to contain. It allows, you can see right here, I have opened up the documentation for element or right here in the different sizes that we have. You can see cover contain, we have set this to, you can see contain the size is set to contain. What does it mean the entire image will be fit within the element. Obviously, the dimensions of the image and the dimensions of your section of your entire flex box would not be the same every time. In that case, you would like that the image fits in your flex box layout, such that the image enlarges, image size is smaller compared to the flex box option that you have. Or it will compress the size of the image. The dimensions of the image will be reduced down to the size and match it with the size of layout of your flex box. All right, You can see right here, the entire image will be fit within the element, keeping the same proportions. It won't basically drop. The proportions of the image often leads to letterboxing where there are blank spaces around the image. Instead of leaving blank spaces, it has actually repeated the image in the repeat section. We can change this to no repeat, so you can see the right most part is set to no repeat. All right, the images appear something like this and this is exactly how we want it. We haven't added the image in the background overlay section, in the background itself, we had classic. We changed the color and we added the image. All right, so I hope you get the point. Now, coming down to the next section, we can choose this plus icon here. By clicking on the plus icon, we'll get an option to choose whether we want to add a new flex box or a grid layout. You have an option to add a template. Now this templates will allow you to browse between different element or protemplates or templates that you have saved in your system. We'll also look into how we can build and save our own templates. Then you have an option to edit with AI by using the element or I. You can just write a few of the things and element or will just do the job of creating your entire section or a few of the elements. For now, let's just add a new flex box and we'll keep the direction to be vertical. All right, now what do we want? We want to add a new section which will contain three cards with a glass. In effect, there will be some gradient effect going around. First and foremost, we would like to re, use this text editor, this heading, and this divider. I'll just make a duplicate of this. Also make a duplicate of this divider. Now sometimes you might not be able to click this divider simply because the size of the divider is way too small. You can see and there is no gap between the texturator and the heading. Even if you are trying to place your cursor in the divider, sometimes you might not be able to click on this. In that case, what you can do is you can just click on any of the element. Or in the container itself, you can right click and click on Structure. Earlier we saw Navigator, but now we have Structure simply because we changed a few features in the element or section, all right? But more or less the concept remains the same. Right? Now we have divider. That's what we wanted to duplicate. Let's make a duplicate of it. And also the heading. Let's make a duplicate of it. All right, now what I can do, I can just simply drag and drop it right here. By just doing this, I can also drag and drop the divider right below this part. Also drag and drop it below here. Now the color of this particular text editor and the heading is white color and the background is also somewhat of white color. You can change the font color to black. Let's go to styling part. We'll change the text color to black. Will also change the color of this font to be black. All right, now once we have done this, we would like to center align this, both of these text. By just clicking on this entire section, we can justify the content center and align items center. Let's just make sure that this has also Align Center. If it does not, what you can do, we can just go to content and we can text to center. Fine. Now for this part, what are we going to do? We Align Center, what do we want for this part? This doesn't look good. The business aim in black, color doesn't look good. We can just change the color of this to somewhat like a darker gray. This gray color looks good. All right, we can just drop down the text to something like make international payments. Let's just keep it like that, internal. Payments. All right. We can drop the font size of this or we could even drop down the text of this. Let's just say international payments. All right. All right. International payments. What are we going to do with this? You can see there is no spacing between the hero section and the next section. In order to add some spacing between these two different sections, we can play around with the margin and padding settings. If you can see right here, I have an image right here which explains clearly what does padding and margin actually mean. Let me explain. Each and every element is a content. You can see the innermost box is called as a content. It could be anything, your entire flex box. It could be your button, it could be your text editor, it could be a divider. It could be your heading, right? Each and every element is called as a content. Now, outside the content, we have a border, right? Each and every content is surrounded by a border. But between a border and the content, there is some space called as padding. All right? There is some spacing between the border and content called as padding. If you increase the size of padding or decrease the size of the padding, what happens is that if you increase the size of the padding, the border and the content will have some spacing between them. When you add border, what happens is that you'll find some spacing between the content and the border. There is some spacing between the border and the next element that you have, which is called a margin. All right, if you increase the margin or decrease the margin, what essentially happens is that if you increase the margin, the spacing between the two sections will separate out. The blank space which you'll be left off with will be the spacing which by default that your Wordpress website will have. All right, if you decrease the margin, what happens is that two sections will overlap with each other. But it won't happen with padding, right? Because the padding is happening within the element itself. Padding is happening between the border and content. I hope you get the point. Let's add a padding for this section in the advanced tab. I'll go right here. And you'll find that initially both your margin and padding will be on the link icon will be highlighted. Which basically means that no matter where you click on whether on top, right, bottom, or left, we have four directions. The top, bottom, left, and right. You can individually change the padding and margin settings for each and every direction or you can work around together. All right, By default, even if you change the settings of top, bottom, right, or left, the same amount, the padding size will be applied to all the four directions. You can see the current unit for the padding is set to pixels, and for margin as well, we can add something like 50. You can see from left and from right also there is some spacing. All right, you can see there is some spacing, but we can just remove this. We do not want any padding from right and we do not want any padding from left. You can see no spacing is left in right and left from bottom. We want something like 35. All right. Now let's add a new section inside this, plus I'm going to click right here. Inside the flex box, I will choose the direction to be horizontal. I've selected the direction to be horizontal. What accentially happens is that the structure or the direction of the flex box is set to horizontal. No matter how many elements that we add, all of them will appear in line. Obviously, you have understood about that concept earlier in the video, which is flex box versus intersection. All right, inside this, what are we going to add? We're going to add a new element called a container. Inside this container, we are going to add one more container. Now, inside the second container, we'll add a third container. You can see we have three containers, 12.3 If you're still not clear, let me just right cling on the entire flex box. Choose the structure. The structure and Navigator are both of the same things. The structure appears just after changing the few features in the element settings. Right here, you'll find that this is the flex box inside which we have an outer container, inside which we have an inner container. And this is the innermost container. I hope you get the point. What essentially we are aiming to do is we are trying to add three cards with a gradient effect. All right. The reason why we are doing this is because the third container will have our gradient, the text, an icon, and the second container will have some background image. All right. Assume that you have a big Amazon box inside which you have a box from Walmart. Inside which you have a box from Best Buy. That a nested element is what we are trying to build. All right, so let me just select the second container. Let me just make sure that I've selected the second container by going to the struct 7. Blocksy Theme Customizer - Trust Me It's Very Easy!: All right, now that you guys have learned how to build your entire website using the 11 or theme builder, let's look at our header and footer right here so we can customize the header and footer using the theme customizer, which you can see right here. This icon right here, the customized icon at the top bar, allows us to use the theme editor. This is the theme customizer and as you know, we are actually using the block theme. You can see right here we have activated the block theme and depending on your use case, you might also use some other themes like Astra. Now overall, more or less 80 to 90% of the elements that you'll find right here in the theme customizer will remain the same. But just few things here and there might change depending on what kind of theme that you're actually using. Now just for this video, I've kept my webcam off and you'll know the reason why in just a moment. But let's just see, what other options do we have in the theme customizer? In the general options, you'll find general head site bar and other things like that where you can also work around your color and typography of your website. Then you have an option to make changes around your block, post, single post and categories and stuff like that. Then you also have the option to edit your pages. Then bottom of this entire theme customizer, you'll find an option called Core. Under core, you'll have site identity menus, widgets, homepage settings, and additional CSS. All right, let's go to the top. And under general we have header. So we'll try to customize this header or navigation bar for our website. What I'll do, I'll just click on header. And once I click, you'll find I have elements and I have headers. All right, And here you'll find three rows. The top row, the main row, and the bottom row. So what does it mean and why do we have three rows for that? I have this website, and over here you can see this is a navigation bar right here. So this is like a main row. And at the top you have the location, the working hours, and the social icons right here. So this is acting like a top row. This is like your main row, and this website doesn't have a bottom row. Mostly, most of the websites out on the Internet are using just a main row. If you would like to add a top, you can add elements inside this. So what do we want? We want a logo, we want menu, but we do not want search icon in our navigation bar. Now the search icon could be helpful in case where you have a e commerce website where you would like to search products or maybe services or different block posts. But for now, let's just cross it out. All right, and what are we going to do? We can add a new element inside this row itself. Now you might see that the row is being divided into two columns, the left and the right. And here in the middle we have few dotted lines. So basically it's trying to say that this is divided into two sections. If you would like to change the settings around of the header, you can just click on Main row and you'll find the structure. So earlier we saw the header. That means the header settings will be common for top row, bottom row, and the main row. Once you click on the main row, the settings will open up just for this main row. All right, so here you have the structure. The container structure is default. You can even change the two box full width. You can adjust the height and width. You can even change the design layout of it. So here you have the background. You have the option to add some borders. You can also add border at the bottom. And you can even add some shadow to your header. But let's just go back and let's try to add some elements inside our main row. So here you can see we have an option of account. That means some people would like to give an option of login or logout from their website. When people have a e commerce website, obviously they would like to give an option to the users to log in to their account so that they can make previous orders. Or, you know, they can look at their purchase history. They can get additional discounts or coupons. So you can make use of the account widget. Then you have the button HTML. So that way you can embed some other plug ins by pasting the HTML code. Then you have the menu one which is already being used. So all the pages that we have and we have built a main menu, right? The menu was called as Navar, if I'm not wrong, so that is being shown right here. Then you have the search and the social icons. So right here, just like how we have different social icons, that's something similar. We have widget right here. So let's try to bring a button. And we can place this button to the left of the main menu or to the right of the main menu. All right, we can even add this in between. All right, we have three columns. We just don't have two columns. It's just that when we do not add any elements in between, obviously it's going to leave some space. So here we have the button, and you can see it is taking up some default settings in terms of design. Here the text, when we hover around it, it turns the text color to blue. And the color of the button also is blue by default. And when we hover around it, it turns into dark blue or something like a very dark blue shade. All right, so we can change the color of the button as well. We can just click on Button. And here you'll find the options to choose between different button layouts. So here you have a button where The button itself will have a background color or the button could just have a border color and the background of the button will be transparent. All right. You can even change the sizing of the buttons. You can even add label. So instead of download, if you would like to give something like a contact or book a call, you can even add something like this. Now if you would like to add a URL that whenever someone clicks on this button, they should be redirected to a page. You can add the link URL if you want that. Whenever the link has been pasted and whenever someone clicks on the button, they should be redirected to a new page in a new tab. So sometimes what happens is that whenever you click on the button, most of the times the redirection will happen in the same tab itself. But if you would like to give it an option to open the new link in a new tab, you can just toggle this switch. All right. Then you have an option to add your own CSS class and other stuff. When we go to the design, you can see you can change the font color. You can even change the button color. So let me just make it this. And we can change the button color to green. Here we can select the color. Now here you won't find the color that we saved as a global color in our Elementor, just because this is a theme settings and that was your Elementor page Builder. Here we can just select green color manually by placing our cursor and something similar, but not exactly. I don't think we would find the exact same color. And this is for initial and this is for hover. So we can just copy the hex code and we can paste the same color for hover as well. So whenever we hover, the button color won't change. All right, so that's how we have maintained the consistency. Now coming to the font color part. The font color initially is set to black. All right? Okay. So the color, this is not for your menu but rather for your button. All right, so here the initial text color is white, and on hover also it's white. So we won't change it here. You can add border radius if you would like to give a circular, or you know, rounded edges to your button. You can even add some margin and other things to work around your design. Coming back to your main menu, here you'll find your main menu. And here you have a logo now logo. You'll find that it's taking up the site title, but it's not taking the logo. So here you can just select a logo, you can choose an image. So here I'm going to select this image as the logo of my web page. Here you'll find that this image has a text in white color. Because you can see the logo is being appearing right here. But since the background color of our header is white and the text color is also white, the logo is not being displayed properly. So in that case, we have two options. Either we can Photoshop of our logo in a way that the text color turns into black or somewhat to a dark she. Or we can change the background color of our main row, which is our navigation bar. So the best thing would be to change the background color, you know, header. So what we can do right here, we can just change the background color. But before we do that, we don't want the site title to show up. So we can just toggle this off and site title won't be displayed anymore. All right. You can even change the alignment of your content, which means whether you want your logo to appear in the left line, center line, or right line. You can even do that here you have an option to choose between different devices depending on your responsiveness mode. Coming to the design part here, you can change the margin. What are we going to do? We'll change the background color. When I click on main row here, you'll find Design And I can change the background here. I have an option to make use of a classic background in the color. I have an option to choose the classic background or I can even make use of a gradient. Gradient. As you've learned previously, it's like two colors are being used at the same time in a linear or in a radial format. You can see you can choose between different premade color schemes that this theme offers. But you can even work around your own custom colors. You can even add your own image in the background, but that would look really awful. So let's just stick with color. And here you can play around the color. All right, Now, when you add a color to this particular, you know, background color, this is just for your main row and not for your top and bottom row. What I mean is, if you would like to, you know, place your button to the top row, then you'll find that the top row will have some different background color. So the settings are just applied for the main row and not for your top or bottom row. I hope you get the point. Let's bring this back because we don't want multiple rows, we just want one single row. And here we have the black background color. Now when we keep black background color, we can see that the text is text. Or the font for our menu one, the color is not really that attractive. Both the shades, the background and the P color itself are very dark. So we have to make some kind of a contrasting effect. We'll click on Menu One. We'll go to Design, and we'll change the P color to white. Let's bring this white here. You'll find three color options, Initial, hover, and active. Now, what does active mean? Active basically means that wherever you have clicked on the page, let's just say you have clicked on home. So you're on the home page itself, right? So whenever you are on the home page, the color of this text will change to a color which you have set, which will indicate that. Okay, you are on this page. All right. Let's make white for all the colors. And here you'll find Hover is also white and Active is also white. You can even change the font family. You can even change the sizing of the font. You can even change the font weight. All right, here you have all the different options. You can even add drop down option right here in the theme customizer. All right, so here, the dropdown option could be of two choices. Whether you want the drop down menu to display whence you hover around that particular page element, or like to click on that element. And then the drop down menu should be displayed. That's something like it. You can even change the items over effect. That means whether do you want it to be simple, solid color box color. You can even add some spacing between the items in the drop down menu. You can even change the offset. Basically means that the spacing between the elements. All right, then you have the horizontal offset. It basically means that vertical and horizontal spacing. All right, coming back to the part where we have your background color, you have a black background and you have some dark grayish black shade of a hero section. Now this header and this hero section are not looking that great. Can't we just make this main row something that it appears to be transparent? Obviously, we can do that by just going back to your header. We can just go back to header, we can just go to headers, select Global Header, and then make use of the transparent functionality and toggle the switch. Now you'll find that the entire header is now transparent. It will take the design of a hero section. Now you'll find that once we make our header as transparent, the margin and padding settings has been dropped down. That means our hero section is being coinciding with our header. We can add the margin and padding later on to our hero section by going back to our element or page builder. But for now I'll just keep this as my transparent header. Now here you'll also find one button which is Edit conditions. Now what does it mean? Once I click on it, you'll find that whether I want this transparent header display settings to be displayed for my entire website or do I want it to be displayed on a particular web page only I can choose between different options. All right, If I make this something like let's just say include to just this page. Let me just select as your page, which is which is just this page. And exclude. You can add exclude. We can exclude this to which page? Let's just say I would like to exclude this from my block page or some other pages like block page, all right? I can exclude this from block page. I can even exclude this from another page, maybe a four or four page. All right, So I can just save the settings now. Let's see what happens if I close this. And let me just publish this so that all the settings will be saved. And once I close, I'll go to my Press dashboard. I'll open up a block page by going to the post section. A post, I'll view my. So once I go here, okay. Again, I'll find this transparent header. But ideally we should not. Let's go to pages and what are we going to do? We'll navigate to the block page. Where do we have our log page so we can create a block page if we want. Let's go back to our website. We'll customize our header by going to the global header, settings it conditions, and we want to include this to just our single page. Okay, This blog is just a page and not for post. You can see this is of, this blog is part of our page and post. Let's select single post. Okay. Once we do this single post, we'll save conditions. Okay, when we go back, we'll change the main row color to black. All right, we have black color, or maybe let's just change this to something like blue shade. I'm going to change to a bluish shade. All right, something around this. Let's publish. Let's go back to our header, Global Header Settings conditions. And we want to include the transparent header to a single page, exclude this in single post. All right, let's just say all post archives. All right, the conditions that we have used in this and once we go we publish. I'm not quite sure why the settings have not been applied. Maybe let's try to refresh our web page. Let me go back to header, global header settings conditions. All right, let's try by making use of the privacy policy page. I'm going to go over this, I can save conditions publish. I'll close them. Go to pages, all pages here. We should find our privacy policy page. I think we have trashed it. Let's restore this page. All right, let's go back to a pages. Here we have this. Let's preview this now. You'll find that this header has a blue background. That's exactly what the entire conditions part meant. Let's get back to our main website. We'll go to this web page. We'll select on Custom once we go here, once we scroll down, you'll find under menus, find that currently we're using the nav bar menu. Now in the nav bar menu we have a home page, we have the about page, we have the contacts page. But what if we would like to add few more pages in the main menu? Let's try to add items. Here you'll find elementor 58, which is the page which we built using our entire page builder. Let's try to add this. Once we add it, we can drag and place exactly where we want. We can reorder them. Once we have done this, we can just save and publish. Now once we have done this, what you can do, instead of setting this home page as the default page of your website, you can set this as the default page by just going back. You can go back and you can select on Homepage Settings under Core. So let's go to homepage Settings, and initially you might be seeing your latest post as the default one. You can just select a static. Instead of selecting the home page as your home, you can select element of 58. And this is what you'll find as the default page. All right, under post page you'll find different options. You can even add a new post page. All right, we'll look into how we can add block post to this part. But let's just publish this for now. We'll go back and let's look at some other settings. Now here you'll also find different menus and different widgets that we have. These are all Gutenberg press elements. Here you have the homepage settings, which we have discussed coming to the site identity part. Here you'll find the site title that we have saved as tress and you'll also find site icon. What does site icon mean here at the top to this website? You'll find this particular icon right here. And this icon, if you would like to change this icon to something like this or maybe some other image of your own, you can just select an icon. Just we'll select this image and it's asking us to crop because the dimensions are 512 by 512 pixels. So we'll just drop it down to this dimension here, you'll find that the site title or site icon has been changed. All right, let's just save this and we'll go back to our theme customizer. Here in the theme under header, we have made changes around this. Once we go to the general, you'll find different options. All right, under general, you'll also find one option which is scroll to top. Now what does it mean once I add the scroll to top? Once I scroll down, you'll find a button at the bottom right of your website. Now this button allows you that whenever you click on the button, this will scroll up to the topmost part of our web page. That is very helpful feature when you have a long list of elements or sections in your web page. And it helps your users to navigate to the topmost part of your web page. Now once we click on this arrow icon of your scroll to top, you'll see different button icons. You can see you have a default button, you can change to something like this, something like this. You can even change the button shape, whether you want it to be square circle. You can even change the design, whether you want the icon color to be white shaped, background color, you can change, you can even add some shadow to it and you can even align whether you want it to display to the right most side or the left side depending on your use case. That's the only reason why I switched off my webcam Just to show that scroll to top. Functionality is available mostly at the bottom right part of your web page. All right. Now at the bottom, you'll find that there is some moon icon. It basically switches to a dark mode theme for your theme customizer. And once you click on the sun icon, it will switch on to light mode theme. That was some basic information. Let's publish this and once we go back, we'll just toggle this off screw to top. You'll also find an option to switch on to the website frame. So this, you know, makes your website have a border, a frame kind of effect. You can even change the frame size, You can change the frame color and things like that. All right, Coming back to the breadcrumbs and other parts under the general layout, what does breadcrumb mean? So assume that you are on Walmart page. Let me just take you to Walmart so that I can explain the things pretty easily. I'll go to Walmart and if I go to Department, okay, Let me just select any of the things. Let's just say I'm going to electronics. Under electronics, we have, let's just say iphone. And if I click on iphone here, you'll find cell phones shop by brand. Apple iphone. So this is like a breadcrumb. It's showing up that in which page, inside which page inside which page you found the product. So something similar can be done by embedding the breadcrumb inside your main row and things like that. All right, so hope you get the point. Let's look at footer. So once I scroll down here, you'll find this particular part which is at the bottom row. Again in the footer also you'll find three rows. The top row, the bottom row, or I should say the middle row and then the bottom row. All right, here you can add multiple widgets. You can find menu, different social icons, and vegetaria one to three, to six. So let's add vegetaria one, vegetaria two, and vegetaria three. If I click on vegetaria one, you'll find that initially it's blank. We can add Gutenberg blocks. These are tres Gutenberg blocks. Here I can add heading, I can add a heading, something like let's just say about us. All right. We can also change the tag of this heading. Initially, it might be said to H two. You can change this to H346 depending on your use case. And here you'll find about us. Fine, we can add another also, let's just say paragraph tag. And I can add some basic text, something like this. I can just add the simple text. I'll place the text right here. Or I could just paste such that the styling won't be pasted right here. You can find the about us in the vegetaria too. I can add the page settings. Page list could be brought up or the entire menu. All the pages that are part of our website will be shown. I can just search for page list. I can bring it down here. You'll find all the page list that we have and which are part of our website. All right. We can even add a heading to the top here. I can add something like pages, All right. You can see the pages are appearing below your page list. So you can just drag and drop it. Or you can just place it by just clicking on the pages. By clicking on the up arrow, you can just place it. Let me just select this part. I'll just drag this or move this down. All right, And now you can see pages appear at the top and the page list appears at the bottom. Fine. Here, you can add other elements as well. Let me add something like let's just say contact us fine. We can add other blocks here. You'll find a bunch of different options to use from, you can find and embed your Youtube video, your Vimeo video, and many other things that you can add right here, which I won't go in detail. So who get the point about making use of different Gutenberg elements? All right, here you'll find different social icons also, and other things that we have here. You'll find different options to work around different settings about like colors, your typography, the performance of your website. But if you're generally speaking, if you're making use of a page builder, whether it be element or, or DV, it's best to go around with the color, the typography settings in that page builder itself rather than making use of your theme customizer so that your website doesn't get broken. Here we have the entire, here we have covered the entire theme customizer settings. I hope guys enjoyed this lecture. In the next lecture we'll see how we can create block post using the theme customizer. 8. Create & Edit Blog Posts - Trust Me It's Very Easy!: All right, let's see how we can make a block post. Here at the top, you'll find plus icon, the plus new. Once you hover around it, it will drop down a list of options, post media page, lining page, template, and user. So what does it mean? Once you click on post, you will be allowed to create a block post. If you clickon media, you'll be allowed to upload images, videos, and GIF files. If you clickon page, you'll be allowed to create a web page. If you click on landing page, you'll be allowed to create a landing page. So the basic difference between a landing page and a simple web page is basically that a landing page is generally optimized for conversion. It basically means that you want that users, whenever they land on your landing page, that they should enter some details about their personal information or make an instant transaction in exchange for some digital product or a service or some kind of a booking to your event. That's about landing page, a web page which displays and showcases the content and information, that's your web page. Generally speaking, landing page is for those who want to make an instant transaction. And the purpose of the entire page is not to communicate about the company or the product or the service, but rather to make an instant transaction, whether it be just collecting e mail address or their money from entering the card details that's landing page Template. As we have seen earlier in the Element or Page Builder that we can create templates. Right here we have users, you can add multiple users to your web press website. Let's click on Post. Once you click on it, you will be shown this press editor here. You can add title to your blog post. Here, you can add the content for your blog post. When I try to add content, let me just give this something like blog number one. All right? And we can say that this is a test blog. All right. This is my title. Now here in the right pane, you will find that the visibility is set to public. That means whenever this particular block post will be published, it will be available to public and they can be viewed by anyone. All right, Now the only difference between a block post and a web page is that although the content of the block post could be repurposed in the web page itself. But block post essentially allows your users who are reading your blog to leave comments at the bottom of your block post and share this blog in the social media profiles. So that's the only benefit of adding a new block post. When you're creating blocks, you can make use of templates, you can change the URL. You can even set who's the author of this block post. If you're multiple users, you can choose who is publishing this blog. You can categorize each and every blog. Let's just say you have three blogs, three categories of blogs, web design, e commerce, and SEO. So you can categorize them by adding new categories. You can add new hashtags so that when people search for around different blocks that you have published, they can just enter a few keywords. And depending on the tags and categories that you have categorized them, they will show up, then you'll find a featured image. Now even if your content of the block doesn't have an image, you can add a featured image so that when your entire web page, which will display all the block cards, then over there your featured image will be shown. Excerpt basically means that a simple summary of what your entire block is all about will be shown. Now excerpt is something optional. You can write it down here. It won't automatically detect your content and form an entire except by its own. You'll have to enter it manually. All right, here at the bottom, you'll see whether you want to allow comments by the users or do you want to allow pink backs and track backs? That means anyone can link back to your blog post. It's always a good practice to keep this as checked. All right, we can add some lock content here. I can add text content, something like, let's just say this, okay. I'm going to copy the content from this website. I can paste it right here. I can even change whether I want this to be bold, italic, whether I want this to be a heading tag. I can change this to heading H two. I can make this as H one tag. By default, each and every title of your blog post will be set to N H one tag. All right. We can just edit them. All right. Or we can even select each and every element that we have on our web page. Okay, here you can add a few extra things. You can even add link to your particular word or your sentences. You can highlight few of the words. You can add an inline code image. You can add a subscript or superscript. There are a bunch of different options. All right, if you click on the plus icon right here, let me just show you. What do I mean by that? If I click on this plus icon, you can browse between different Gutenberg elements or Gutenberg blocks. Here I can make use of, let's just say I would like to embed an image. I can just search for image here I have, I can even make use of the gallery. That means multiple images could be shown up right here. You can even make use of the site logo. You won't have to manually navigate the logo that you have set for this website. You can even make use of the featured image. Whatever image is set for the featured image will be shown here. You can even set the cover for this blog post. All right, You can even add media and text so that the content and the image will be wrapped around. All right. You can see that basically says that set media and words side by side for a richer layout, you can work a few things. We can upload the image or we could select the image from media library. That's what I would prefer to do here. I can select these guys. All right, and this is what we have for our blog post here. I can even publish, or I can add some more content. Let me try to add some more content. I can just add some paragraph content here. I'll copy the below text. Fine, I'll paste it right here. I can make sure that this is paragraph text. You can find that this is a paragraph text. All right, here we have the entire block post. I can even add a few more content. I can just go to the about page here, I'll find majority of the content. I think I can just copy. I can just place it right here. All right, let me just do, I'll paste it. Okay, I think we might have not copied the entire thing, so we'll just copy and paste the entire content. Now once we have done this, publish. All right, we can publish and you'll find that this blog is available to view. Now once we view the post, let's see how it looks like. So here you can find that the header is actually having a blue background. Because if you remember correctly, when we were trying to give some conditions to your header display settings, we said that just for the home page itself, which is element of 58, the header should have a transparent background. But for your blog pages, the header should have a blue background. All right, so here you can find the area where people can leave comment. Here they can post the comment and they can even reshare your content. All right, here you'll find that. Who published this blog? Which day Exactly? And is it categorized into any category or not? If you would like to rearrange them and form it in a proper structure, you can even do that by going to the customize. Again, we'll click on Theme Customizer. Here in the block post section, you'll find single posts here. There are different layouts to structure your post. By default it is set to narrow width. That means first your title will show up, then the image, and then this is how the tras structure will be. If I change this to normal width, you can see that there is no such padding or margin between your right and left directions. If I change this to left side bar, then here you'll find different post titles here on the left side. And something similar can be shown in the right side. All right, here you can even make use of featured image if I published this. Wait a second, Just a second here. You wouldn't find a featured image for this block post because we haven't set anything. So let me just close. I'll edit this post by clicking on that button. And here you'll find that we haven't set any featured image. So let me just select a featured image. What I'm, I will select this guy as the featured image. All right. This is not part of the block post but rather it's a featured image. So let me just update my blog and when I view my page. So in order to view this, I can just click on this button to view the post. And it will open in a new tab. Now here, although we have said as a featured image, you wouldn't find it on our block post. Why? So if we click on the theme customizer, when we go over the single post settings, and when we scroll down, you'll find that the featured image setting is toggled off. Once we toggle, you'll find that first the featured image will be shown, then the title, and then who published this entire block. Post here, you can even add post tags, so all the hashtags that you are using will be shown. You can even add a share box at the bottom. People will be able to share this post to their Facebook page, linked in profile, Pinterest, or even Twitter. You can even add an author box so that author who has published this blog can add few more comments. You can even add post navigation. All right. You can even add post navigation. And you can even add related posts, which basically means that all the posts related to this title and related to this category will be shown as a form of suggestion at the bottom of the block post. I hope you get the point about entire building and editing your block post. I think this was pretty much about it. 9. Designing our Homepage Mobile Responsive: All right, let's look into how we can build our website responsive. Right now, the thing which you're seeing right here in the screen, this kind of a design layert will be shown on desktop screens. What happens if we view this same website in a tablet or a mobile screen? Obviously, the elements might coincide with each other, because the sizing width and the padding margin will change according to the device width. So we'll have to change before we actually go about making our website responsive. There are a few things that are left to do with this website, particularly with our hero section. First, as you can see, this image and the content here is being coinciding with our header because we have kept our header as transparent. Let's add some padding to the hero section. We'll click on editiith Elementor. And let's just wait till it loads up. Right here for this section, I'll click right here. You can see we are editing the entire container. We'll go to the advanced settings, and right here in the padding, I'll add some padding from top. I'll just use my up arrow key on the keyboard to drop down the hero section. So our 100 pixels of padding from top looks good. So let's just publish this. All right, once I scroll down, I have all these sections that appear in desktop screen. Now there is one thing that I left to cover on earlier, which is accordion. When we were looking about tabs, I think we should have covered about the accordion section as well. Let me add a new section quickly. I'm going to add a new section right here. I will add a flex box of two columns. Here we have our accordion. Let's first we'll add a title. Let's add a title below this title, we will make use of what do you say our accordion? We can add an accordion instead. What we can do, we can just make a duplicate of this divider, that we can just bring this divider right here. One thing, you might question yourself, that the width for this divider right here in this particular container was this much. The width was very big than what we can see right here when we duplicated and placed right here inside this container. You can see the width has adjusted accordingly. Why is that? Because right here we have two columns. We have two containers. It has adjusted its height. Or rather I should say with, accordingly, fine, let's just left a line. This, we'll increase the width to about this point. We'll add accordion. Let's add accordion. Now, accordion is something like an C section. You can see here we have accordion. We can click on these different items and they will collapse and collapse. In the accordion one, you'll have some content, you have an icon. When it is already open, you'll find the content right here. You can change the content, You can change the title. It is something similar to what we have seen earlier. What we can do, we can even change the icon. Right now we have the icon library. We can navigate between different icons that we have. You can see recommended icons for our accordion are right here. You can even change the alignment for the icon. Instead of making the left line, we can change it to right line right here. It looks good, fine in the left container. What we can do, we can add one more container. What I'm trying to do is I'm, I'm just trying to make use of this, this kind of a box. Now this will become very difficult for beginners. Let's try to make an easy version of this layout. What I'll do, I'll just add a new container inside this existing container. And let's just make sure that this container is vertical align and the width of this particular container height is actually 100. All right, so it actually uses the entire height. Fine. Let's make it full width. And what are we going to do? We'll change the width also later on, but for now let's try to add few images inside this. I'm going to add, we'll change the image to something like, here I have this image, I'm going to make use of this image. I will also add one more image. So let me just make a duplicate of this. All right. The container container direction will be changed to horizontal. Fine. The inner container direction will be changed to horizontal. I'll change this image to something like around, let's just say. All right, you can see the direction, or rather I should say the sizes of these images are different. In order make them something similar, I'll duplicate this. I'll duplicate this. We'll make sure that this container all right. You know what I should do. I should make a duplicate of this container. All right. One container has these two images and the other container has these two images. Fine, let's try to reverse the content. All right, this is how it appears. Now the container, the inner container that we have right here, will try to change its height such that within the container itself, this looks good. In my opinion, we can give some background color to this container. Let me style this. We can select a color, we can give this something like black or somewhat like a darker shade. This looks good. This is exactly how we have made a design layout something similar to this, right? The only difference is that the image has some border radius. All right. I hope you get the point about this part. We can even add a few more items inside this accordion. By going to the content, we can duplicate duplicate items will be made. We can change this four, this 23 and so on. All right, let's publish this. Now let's look into how we can make our website responsive, which was the entire intention behind building this entire video. Right here at the top, you'll find the desktop on, the tablet icon, and the smartphone icon. Now if you don't find this at the top, you would definitely find it at the bottom left corner of your elementor editing pine fine. The website looks good on desktop screens, but let's see how it looks like on tablet screens. I'll just click on my tablet portrait mode. Here you can find that our hero section itself is not looking that great. The title itself, we can drop down the font size. But the two columns right here, it doesn't look that good. What we can do is we have two options. Either we can drop down the font size and try to fit all the content in a way that it gets fit within the tablet width. But I would suggest to make use of another section what we can do. We can just replicate this by right clicking on our container. If you're not able to, what you can do, you can just click on Structure. Make sure that you are selected the hero section of our container, and then you can just make a duplicate of it. All right, once you have done that, just below this hero section, you'll find the duplicate screen, Fine. Now, in the duplicate section, what I'll do, I'll just remove this container. Having this image, we don't want that, We'll just delete this here. We will be left with this particular container having a textor, the divider, and the title, followed by another testator and two buttons. Let's try to align them in a way that it appears at the center. For that, I'll just click on this container. I'll go to the direction. Obviously we want this to be horizontal. It doesn't make a difference even if I change this to vertical. But what we want is that we want to justify the content to center. Let's do that. Now you can find that the container has aligned in center, fine. Now all that is good, but let's also try to change the entire font size of this particular title. I'll go to Style Tab, I'll click on Typography. I'll drop down the size to somewhat about, let's just say 50 pixels. So I'll just keep the 50 pixels and that would look good, fine. Now you might find that over here. We have some padding from top, but we don't have any padding from bottom. Let's add a padding from bottom as well. Here what I'll do, I'll just click on this container. I'll go to the advanced section. Right here, you'll find padding from top hundred pixels, but let's drop it down and we'll change the padding for bottom as well. I'll just unlink the values. Once you click on Unlink, you'll find that the top values has also reset to zero. Simple reason behind that is as you can see, besides this padding, you'll find the tablet icon. The settings for the padding has been reset for the tablet device. Again, I'll have to make this as 100 for bottom. I'll make this something like 50. That would leave us with sufficient space to start our next section. Fine. If you want, you can delete one button if you want, but I would just keep it as it is. And if you want, you can even center align this content right here. I'll just go to this part. I'll go to styling, and I'll change the alignment to center. Now, all these settings are just applied for tablet screens. You can see right here we have tablet portrait mode. We can align this divider in center. You can even our title to center. Let's go to content Here, we'll find alignment. This too also will align this center. Let's make sure that this particular container having two buttons in line are also justified Content center. All of these things appear in center, fine. Now even if I view the desktop mode, you'll find that the other section appears right below this. We don't want that to happen. This part of the hero section should display only on tablet and movie screens and should be hidden on desktop. Whereas the top hero section, which we have right here, should be displayed only on desktop screens and should be switched off for tablet and smartphone devices. So let's click on this particular container. We'll edit this container. We'll go to the Advanced tab, right under Advanced tap. When you scroll down, you'll find the section called as responsive. Just click on responsive. And here you'll find different options to choose. The visibility mode, we'll hide on tablet portrait mode, we'll hide on mobile portrait mode. And the below section, we'll hide this one in desktop mode, obviously, because we don't want this part to be displayed on desktop screens. If I go to the desktop mode, you'll find this hero section appearing And this part which is being shown but just in gray mode because we are the advent, we are the editor, that's why we are able to see this part. All right, here, once we go in the tablet screen, you'll find the Next hero section. This part of the hero section. Fine. Let's go scroll down and here you'll find these three cards. Now these three cards gradient effect, we worked so much and there was so much complications right in nested containers. And we learned and our energy went into waste because we cannot just fit all three columns in one single width. Then how can we work about this simple way? We can just click on this container. Instead of making the direction of the flex box to be horizontal, can't we do just something like vertical? We can achieve the same result. Right now you can see the width according to the width of our desktop screen. Gradient cards are being fit properly here. You can even adjust the icon, this text, and this text center line if you want, but I'll just keep it as it is. All right, and mind it very well that this direction, which is set to vertical, currently is only applicable for the tablet screens, not for desktop screens. If I just go back to desktop mode, you'll find that these three columns, these three containers will appear in a horizontal flex box mode. Fine. Let's go back to this tablet mode. We can drop down this font size by going to the typography, and we can make them appear such that they appear in one single line. Here again, we'll make this 50 pixels and make sure that this is selected in tablet mode, right? So 50 pixels of size for this title will be applied only on tablet screens. I hope you get the point. Once we scroll down, we will find another section where we can just copy and paste the styling. So we'll just, we'll paste the styling right here. All right, and here you can see we have the title again in 50 pixels. Now, the tab one and tab two, both of them are appearing nicely. We don't necessarily have to change, at least for tab I don't find the need to actually change anything inside tab one. But for tab two, I do think that we can change few things around such that our icon doesn't appear so small and the text also appears properly in one single line, the title itself. So let's try to erit them. That what I'll do, I'll just publish this. Okay, I'll publish this. I'll go back to my view mode once I preview my changes here. When I hover around my editith elementor, you'll find tab one and tap two container. Let's just quickly click on tap two so that whatever content we have in tap two, we can edit it directly here. I can just click on responsive mode, tablet mode. Here, you'll find the icon. Let's click on the image box. Here we can go to the styling part. Inside the styling, we have the image. Let's click on Image. Here you can see the width is currently set to 15% Increase this to something like, let's just say 30. Okay. We can apply the same settings to this also later on, but let's just try to work around this part here. The content itself, where we have the title and the description. We can also reduce down the typography of it. Let's just drop down the sizing to about 20 pixels. 20 pixels would look good in my opinion as this. Also we'll apply the same settings all. Let's copy and we'll paste the same settings right here. Paste styling. And here you can find that this is how our entire tab two box will appear. Fine, Let's publish this all. Let's preview changes. We'll go back here. Let's refresh the web page. When we'll view the tablet more, you'll find the changes that we made will be reflected right here. Let me just scroll down to the part where we can go to the tab two. Once I select tap two, you'll find that a title is appearing in one single line. Also, the image appears to be bigger than what it used to look previously. Once you scroll down, you'll also find your accordion, which I don't find any need to make chines around the accordion. But for this part where we have this particular images and different sections that we have right here, we can add some gap between them. Gap between this container and this container. We can add some spacing between them. We can just click on the outer container. We can scroll down here. We can just increase the gap between them. Fine so that it occupies the entire space. 70 from column and row looks good, in my opinion. Or you could even change the direction of the flex box from vertical to reversed. It appears like this up to you. You can just change it however you want. Once you scroll down, you'll find this section where this image should overlap with the next section, but it doesn't happen in tablet mode. Why? So let's check it out. Obviously, there is some issue with padding and margin settings. We don't have to necessarily make any changes around this particular section where we have this guy's image. Let's just quickly go to the next section. Here we have this part. We will keep the padding settings as it is, but what we actually want is that this section should have margin from top in minus value. Let's go to advanced. Here we have margin. Let's unlink the values for margin from top. I'll drop it down that it appears the image appears to overlap with the next section. Fine, this is how the content looks. Let's click on the image such that the text and this image doesn't coincide with each other so much. We'll go to this image Advanced settings from right, you'll find that there is margin, which is minus study pixels. Let's drop it down here. We had -30 Initially here from bottom we had minus 220, right? Drop down to something like -18 I think -18 would look good, -18 looks good. And we'll keep this as it is. Fine, here we have different things. Now, the content for this container where we have this part, it's touching our entire wet. You can see right here what we can do. We can actually give some padding from right and left, right. Let's just go to this container. We'll go to advanced from top and bottom. We do have 20, but let's also make it from right and left. Let's add from right and left, 20 pixels. Now the content appears nice. Fine. Let's also drop down this title to what we have right here. I'll just copy. I'll paste styling that it appears right here, But you can find the color of the font was changed here. We'll have to change the color of the font to white. Okay, white color font. Here we have these images. Fine, everything is appearing nicely. Let's scroll down. And here you have the call to action section. Fine, we don't have to worry about this because this looks actually good. Now, within a matter of few minutes, we actually made our website responsive for the tablet mode. Let's see how a website would look like on mobile device. We'll just quickly click on the mobile portrait mode icon right here. You'll find that the hero section looks good, in my opinion. All right, but we can still add some gapping between all the elements such that it actually covers the entire space for the hero section. So let's just click click on the outer container for the hero section. We'll scroll down in the layout tab itself. You'll find gaps. So let's just try to increase the gap such that you know, we don't have a lot of spacing. Fine. Also for this entire section, we'll go to Advanced and we'll drop down the padding. All we'll drop down the padding and we just want padding from top to be around, let's just say 50 from bottom also. Let's just leave it as 50. Fine, I'm not quite sure how our header would look like when it coincides with our hero section. Let's just keep this as 100 by default. I think this looks pretty cool. Once we scroll down here, you have all the other elements. Again, we can drop down the font style. The typography size needs to be drop down to about 25 pixels for this part. Also, we can drop it down to somewhat like, I would say, ten pixels, because right now we are viewing in a desktop, right? We might find that the content for business name is way too small. But once we view the exact website on a mobile device, then we would find that this appears nicely. Let's also drop down the width of this thing to somewhat around this divider. Width also looks good. Again, for this part, you can drop down the font styling and font size. I think it looks good, so I won't mess around with this part. Yeah, but for the second container where we have the image in the background, we can change this guy's position in the second container. Let me just select structure. Right here in the structure, we have the second container. The third container, Okay, the second container, background, we'll go to style. Here you have the background in the display size, Here you have cover. The repeat is default, the position cannot be changed, I think so let's try to see if we can change the position or not. If I make this as custom, then let's see what happens. Okay, for mobile device only, we can change this to something around. All right. This would look good in my opinion. Fine, This looks really good. Let's also apply the same settings that we have done for this part for the other sections as well. Fine. What are we going to do? I don't think we need to drop down the font size for the title. All right. I'll just copy. I'll scroll down and I'll paste the styling for this title. I'll do the same thing for this and for the divider as well. All right, now we have tab one and tab two. Let's click on Tapon to see how it looks like. Tab has adjusted itself very nicely. The direction of the flex box has been changed from horizontal to vertical automatically. But for tab two, I think there is still some work need to be done. You can see right here, we don't want this border to appear. All right. We don't want this border to appear. If we want, we can add this right here. Let's change that thing. We'll just publish this. For now, let's preview the changes. We'll click on tth Elementor and tab two here, I'll go to mobile screen for this container in the Style tab. Go to border, I'll remove this. We'll make sure that there is no border, or even if there is some border we want to add to the bottom one. Let's add to the bottom. This is how the spacing would look like, but that doesn't look good. Let me just reset it back. I'll make this as zero again. Fine. What else can we do? I think this looks good if we remove the border, and this looks pretty good in my opinion. Fine. Let's just publish this. All right, when we go back, we'll refresh our page. You'll find that the changes will be applied. Let's click on the mobile mode. We'll scroll down to our tab two part. All right, here you have tab two. And this is how it appears in this container for the accordion. Or rather I should say that tab, you'll find that the alignment is like, this position needs to be vertical. Let's see how it works in vertical. It doesn't help in vertical. Let's just keep it like horizontal and center here. You can choose between different types. What essentially was happening earlier was that on desktop and tablet screens, Tab and Tap To are appearing at the top. But now in mobile device, what is happening, It's just acting like an accordion. Here you have Tab option, and then at the bottom you have Tap option here. The next section, the accordion here. Let's add some padding if you want, you can, but for now I'll just leave it as it is. And here things looks good. Let's scroll down to the part where we have this part here, the image, and this part. Since we have said the image index to be one, it will appear at the front. Here we have the body content, the title, the description, the divider. And here you have the image. Image appears in front of the text. Right now, we don't want this overlapping thing to happen. What we can do, instead of making this margin to be minus 220, we can just keep it like this. This looks much cleaner and much better. And here I think we are pretty much good to go. Only change we need to make is around the business name, the title, and so on. So let's copy and paste the styling very quickly. All right, let's also align this center here. I can go to style part for the text editor. I can align this center. I can align this center for the part. Okay, for the entire test thing. We can justify the content center. Let's make sure that the image box that we have right here, all of them appear in center alignment, needs to be center for all of them. We can just copy. We can paste the styling for this fine here. Also we can change the settings. Fine. You can find that all the partner images, the partner logos are appearing nicely in a vertical format, but we need to add some gaps between them. Let's click on the innermost container. We'll scroll down and we'll add some gaps. All right, gap about 45 pixels would look good. In my opinion, 45 pixels looks good. Let's just keep it as it is. We can change this again, but I'm not going to go and do that over and over again. Here you can drop down the font size if you want, even for the button. Also, you can make this button a little bit smaller just for the mobile screen. You cannot change the button style just for the mobile screen. If you change this too small, the same button size will reflect on the other devices as well. Let's just keep it as it is. And I think we are pretty much done for the responsive mode of the website as well. 10. Build Custom Header / Navigation Bar: Let's see how we can build our own custom navigation bar using the element or plug in. Right here you can see we have a list of all the pages that we have. The element or 58 page is the front page of our website. That means whenever we type in URL, local host for press, this page will open up. What I would like to do is we can just change the home right here. We can give this something like blog, the one which we have as our element, or 58. We can change that to a. Let me just quick edit this and we can change this to home. All right, let's also change this to home. This is the URL slug, and this is the title of your web page. Let's update. Let's go back to our menu. Right here in the appearance section, you'll find menus in side menus First, obviously we would like to show up the home page, then the about, and then the block page, and the contacts page. All right, now let's save the menu. First of all, we'll save the menu. This menu is just for the arrangement of all the periods that we have in our website. Just like how we used block theme customizer to customize our header and navigation bar to change the background color and align our logo, the buttons. And we saw many different things. Something similar can be done with Element or Pro plug in right here inside pages. I'll add few more pages and we'll give this as a block title. Let's give this something like block number two. All right. First of all, this is not actually a page. Rather it should be a post. Let's give this as a post and we'll add one more post. Or rather what we already have. Two post, Hello World and blog one. Let's edit the title. Okay, we can edit this something like blog two. All right, I'll update this. We'll go back to our dashboard here. You can see we have block two. Okay. We can change the ural slug as well. Let's change this to blog two. Fine, let's update this. What are we going to do? Let me just quick edit this. Okay, this looks good. Let's update even in the ural slug. I'll just keep this as blog one. All right, let's update now what I'm going to do, I'll just go back to my menus, appearance menus, right here in the view all section. I might also post inside pages. You won't find the blog post, you'll have to go to the post section. Here, you'll find block 1.2 Let's add them and make it part of your blog. We can have a drop down menu. Whenever someone hovers around the block, they will find block one and block two. All right, let's save the menu. What are we going to do? We'll go back to our address website to see if the changes are visible or not. Here you can see we have blog one, block two. But we would like to customize this header using elementor. We'll go back, we'll go to template, right? In templates you will have Save Templates, Theme Builder, and many other stuff. Let's click on Theme Builder. Right here in the Theme Builder, you would find an option to edit your header. Let's click on Edd. Once you click on that first it will prompt you to choose between different pre met templates made by limit or plugin. But we would like to build it from scratch. Let's just cross this out here, you'll find a blank area to work around. Let's add a flex box with two columns here. We'll have one container and the other container. Now let's add a logo here. When you click on the Add Element, you'll find few elements which are part of your header. It is recommended to make use of these as your element or header. Here you have the site logo, site title, page title, press menu, search form, site map. Let's first make use of our site logo. Now, site logo is visible right here as you can see. But since the background color is not dark, the text is not visible for the logo. We'll just click on our container, the entire flex box. We'll go to the style tab. We'll change the background color to black. Let's just change the color to black. Once we have done this, you'll find that our image appears way too large. We'll just click on this image. We'll go to Style. And we'll change the width. But let me just keep this as 40% and we'll align this left. All right, now inside this container, we'll also add a navigation menu. Let's add our tress menu when I search for menu. First of all, let me just explain that. Press menu. We have menu anchor and all those different kinds of things. But we might also see something like, let's just make use of press menu. I'm going to place it right inside this container. All right, by default, the container direction has been set to vertical. Let's change this to horizontal. This is how it appears, but this is not exactly what we want. You can see that these elements are appearing. In a stacked format. But if we want that logo and our menu appears in line, then what should we do in that case? Obviously, they should be part of a container. The container direction should be set to horizontal. What we need to work on this is this part here, the image resolution is set to full. We can change this to other or else we can go to style. We can change the width of it. And we can change the width of this thing. The site logo itself. The site logo, which we have right here first, let me just drop it down to about this part. I can change the width of the other container that we have right here. I can just make use of this 56% Let me just make this as 57 would be good enough for the other container. Right here we have two elements but the site logo appears way too smaller. What are we going to do in that case? We'll go to Advanced. We'll see, okay here this width is for the size of the site logo. We want this to appear by about 22% but when we go inside the image for the site logo image, we can increase the width to over 100% Also fine. Once we have done this, you can align this center. All right, so it's not working. Despite me clicking on center, it won't adjust it because the size of, the size of the site logo is maximum. It's occupying the maximum width according to the site logos width here, what we can do in this case is you can just go to style. We can click on the container and here we can Justify content center and a line items center. This is exactly how they will appear. I hope you get the point and now you understand how Flex Box actually works. All right, here we have the site logo. Here we have our menu and menu. You'll find that the text appears blue in color. Let's change this to white by going to the style. You'll have normal hover, and active. We'll change the color to white for all three states. Okay? Also, Okay. By default, hover doesn't have any state. And even for active, it doesn't have any state. So let's just keep it as it is. And inside the other container, what do we want? We want that whenever the user. So right now we are making this header using element or page builder. Correct. And we are trying to build the header responsive as we go along. Fine. This part of the container will be displayed on desktop screens, whereas the other part of the container will be shown on mobile and tablet devices. All right, specifically I would say mobile because on mobile devices you'll see a hamburger icon. And once someone clicks on it, the hamburger icon will expand into showing up the entire menu. Fine, we'll add something similar. Let's make a duplicate of this. After making duplicate again, just drag and drop it right here. Fine, now we have done this, but I would like to place the menu towards the end. That means contact should touch towards the right, and the home should be somewhere right here. We can just click on the Tres menu right here. You'll have layout for the drop down. Here you have vertical, horizontal, drop down. Let's see what happens if we have drop down initially. Also, even on desktop mode, you'll see the hamburgeron when someone clicks on it, you'll find this an option. Now this by default whether you're using the dropdown or not, whenever you are using your mobile display, you'll see a hamburgeronine. Let's go back here. We'll make use of horizontal and we'll make this alignment to the right. Align your entire tress menu to right. Fine. If you stretch along, then this will occupy space that it has padding from right and left also, but let's just keep it towards the right. Fine. Now, what we exactly want inside this container. Okay, inside this container, we want a few more things. First and foremost, you can see we have a page title, you have the site title, you have search form, you have site map, you have page title and all those different kinds of things. You can also work around different parts that you have. For this, we can search for you box, you'll find list, you'll find an icon. We're going to make use of icon can list. But there is also one thing that I would like to make use of which is search form. First, let's make use of search form. I'll just drag and drop this right here and make sure this is part of the container. Fine it, let's add a new element. We can give this something like icon box right above the search. And I'll just quickly show the reason why we are making use of the icon box right here. You'll find that we have this text working hours Monday to Friday, 08:00 A.M. to 06:00 P.M. Right. We can make use of something like this. We can delete the icon. We don't want the icon but rather we would like to make use of the title and description. We can say working hours or we could type something like Monday. To Friday, so fry. All right. Below that we can keep AM to 06:00 P.M. Fine. You can see right here we can add some spacing between 08:00 A.M. and 06:00 P.M. hyphen. Here we have the spacing correct. Let's go to style and change the content text color to white. Title color has been changed to white and needs to be done for description as well. All right, now the typography, both of them needs to be set to poppins, because we want to maintain the consistency throughout our entire web page. All right, for this also, we would like to keep this as Poppins. Let's search for Poppins. Fine. For both of these title and description, Poppins has been applied. Let's try to drop down the font size to about 25 pixels. I think 25 pixels would look good. We could drop it down more to about 20 pixels. 20 pixels looks good. Here we can make use of 15 pixels. I think 15 pixels would look more than enough. All right, the spacing. Also you can play around with the letter spacing, word spacing, line height, but I'm not going to do it. Here we have the box and we can change the alignment of it as well. We can change this to right line so that it appears and touches towards the right corner coming to this drop down the spacing. Initially it had about this spacing, but we have drop it down to zero. All right, now we have done this part. What are the thing we are left with? We want to add an icon as well. We will add one icon. There is an element in element or free version which is called icon. Now this icon can be used to make use of site knife bar, which we'll look into later on. When we click on the kebab icon, what I'm trying to do is I'm trying to import the kebab icon or the three dots icon. Mostly you'll find on, you'll find inside applications where you have the three dots in vertical format called as menu. It is also called as kebab or it is also called as ellipses. Let's search for ellipsis icon. Here you have the vertical version and horizontal. I'll just make use of the horizontal one. And I can change the color of this primary color needs to be white. I can change the sizing of this. Also, I think about 30 pixels would look more than enough. All right, if you have used vertical ellipsis, you can even play around the rotation to set this as horizontal by just changing the rotation degree to 180 and it will properly change it to, or maybe 90. I think if it's vertical you changes to 90, so it will become horizontal. All right, here you have all these different things. Let's also align this towards, right? We want all three elements to be in line. What I mean by in line, in line basically means that all those contents, whenever we switch between different devices, they should appear in one single line. All right, what are we going to do? We'll go to Advanced right here. In Advanced, you'll find position to be absolute fixed, which we are not going to touch but rather the width. We will set this to in line auto for this element. Will do that advanced width in line auto for the last element also we'll go to width and in line auto. Now that we have done all this part, the one thing which I feel needs to be changed is for this menu. And this menu right here, we have the font style as default. Let's change this to pop ins that our pops up. Okay, we can also change the sizing of it. If I change the sizing to, let me just drop it down to 15 pixels would look good. Let's keep this as 15 pixels. I can even change this to bold. Bold doesn't work. Let's see how it looks like a medium. Medium looks good. Poppins 15 pixels and medium weight is what we are going to apply right here Instead, I can just copy. I can paste the styling right here. What change I need to make is I need to write a line. This, by just going to this, I can write a line. Now I have all the fonts right here in my header or navigation bar as poppins, with the same font size and same font weight. All right. Now one thing coming to the search bar, I can, we have discussed earlier on that search is really used to browse between different products, different block, post, all those stuff that you have. Now when we click on the search bar, the search form, you'll find different skins that you have. This is the classic format where there is a search bar and outside the search bar you have the separate button for your search icon. If you keep this as minimal, then the search icon will be inside your search bar. All right, if you keep this as full screen, you'll only be able to see the search icon. And once someone clicks on the search icon, the entire with the entire screen will be taken up to search. Different block, post, different services and different products that you're selling on your website. Fine, so you have different kinds of things. You can play around the alignment, you can change the size of your icon. Let me just close this for now. Here you'll see the toggle button. If I play around the size, you'll see the sizing of the icon changes. I can make this as something. What's the size of this? The size of the is set to about 30 pixels, so we can do something similar. 30, 30 looks way too small. Let's just make it fortify. All right, let's align this towards right, change the color to white Here. You'll also find input and you'll find other toggle input. When you work around the input, what happens when you click on the button? This is the part whenever you change the color of this, maybe let's just say red. You can see the full screen background color changes. Right now, we would like to keep this as default. We can change the typography to poppins to maintain the consistency throughout our entire website. We can change the text color if you want. What happens if you change the text color? You can see the search text which is written right here. It changes. You can even change the border color right here. If I change the border color, you'll find that the divider right here will change fine. We want to change the color of the icon. Let's just cross this out. Instead of having this gray, we'll keep the color of the toggle button to white. We can change this to white. All right. We can even add some border to this. We can add. All right, let's give this something here. What I was actually trying to explain the size, which you can see right here. This size appears to be the entire size of your search form. If you particularly just want to work around the size of your toggle, you can do that by going to the style, going to the toggle, and then changing the icon. Okay, the size right here, you can play around with it. Fine, I can just make it something like 50 pixels. I can add border width initially. Whenever you play around the slider for border width, you will see that surrounding your icon is in box format, You can change this to border radius so that it appears in circular format. Let's just keep the border width to be a two. I think two would look good, border radius to be, once you're going past 24, it appears in circular. Despite you going 83605000, it doesn't make a difference. We can just keep this as 35 just to make sure that we have a round circle. And we'll drop down the size icon. See what happens right here. If I change on size, the border radius itself, the border surrounding the on, it doesn't actually compress. It's because the content itself, size is 45. If I drop it down to about 35 something, which we have done for this ellipsis, Also we can play around with it to style, icon size will be increased to about 50. This looks pretty good. Fine, we have all these things now just to make sure that all three things that we have right here should appear in one container. Let's also add one more container. Inside the outer container, I'm going to add a container, which we have right here. Let's place it. And I'll try to place all the items inside this container, fine. Inside this container, we have two elements. Let's also the third element. Fine, we'll go to the container, we'll change the direction to horizontal. Here you'll find that all three of them appear in one single line. It's an inline format, but we want all three elements to appear at the end. We can justify the content. You can find space between space around and space even. We'll just change this to end. We can align the items here. You'll find that this icon appears at the top. This also at the top, but since this has a title and description, it occupies the entire height of your container. We can just change the alignment of this to center so that it appears like this. Or you can even change this to end so that it will appear at the bottomost part. But let's just keep this as center. And this would look good in my opinion. Fine. Here's how you have worked around different things, but there is few more things left to do. First of all, this menu that we have right here will go to Advanced. We'll select Responsiveness. We'll hide this on mobile. Let's see how it looks like on tablet and desktop. This is how it looks like on desktop. For this particularly, we would like to hide it on desktop and mobile. Let's go to responsive. We'll hide this on tablet and desktop mode, fine, but it should be visible on mobile. All right, let's go to mobile view. And here you won't find this. Although this is visible because we are the admin, we are actually building our website so we can see all the elements. But when we are actually previewing, then you wouldn't find this particular element, hamburger icon. You'll find only this one. Once you click on this, you'll find this kind of a dropdown option and all those kinds of things will show up. Dropdown right here for mobile device will be a click here. You can't hover because you are using a touchscreen device. You can't hover around the elements. You have to click on it so that a dropdown menu will come up Fine. Let's cross it out. You can change the hamburger icon also by just going to style here. You'll find toggle button and you can change the color of this two white fine so that it is visible. You can even change the position of it right here. You can even make this as right align by just going. Alignment is set to right fine. We don't need to worry about it. But for this part where we have this for our mobile device particularly, we can go to layout. We can go to style. Here, we'll find the width of the image. You can even change the width of your icon box, site logo. The element is called a site logo. You can do that. You can even change the max width on all those different kinds of things, but we'll just keep it as it is. See how it looks like on tablet and how it looks like on desktop. On desktop, it looks really good. I hope you guys enjoyed this lecture. Once you publish the header, you will be prompted to add condition for this header. That means whether you want to apply the style settings for your header menu throughout your entire website or to particular pages. Let's just keep this as entire site and we'll save close. All right, I think that was all from my side for this lecture. 11. Build Custom Footer & 404 Error Page: All right, now that you have seen and understood how to build the header using element or pro, let's also see how we can make use of the plug in to build our footer and the 44 error page. We'll go back to our templates Theme Builder in the Tres dashboard and we'll get an option to choose the footer. Now the background of this, the element or might change from white to black depending on the time when you're using accordingly, it will change it to dark mode or light mode. Right now we haven't built any footer, so it's showing us plank but at the top right you'll find add new button. We can just click over there and it will prompt us different templates that we have. Now we can build it from scratch, doesn't matter, but I think it would take us a lot of time to build it from scratch. You have already seen how to build header from scratch. Pretty much same things are applied for footer as well. Let's just bring this template for footer. I'll just show you around that the things are pretty same, no difference as such, you can even change the elements, You have other elements that you can add. Right here you have some pro elements which doesn't make sense to add in the header and footer like your look grid, loop, Carousol, whatever is there in the site and the layout part only that makes sense to be added right here in the footer or even header. Or maybe let's just say basic for that matter. If you would like to add some Google Maps at the footer, that is a good practice. I would recommend always that if you're trying to attract a local clients and local customers and you want to show up your office space or your business space. You can just list down the location by with the help of this Google Maps element inside your footer. That would be a great, great example to show. You can change the background again, the styling layout, container, advanced section. All these things are pretty same which we have already seen in the previous lecture. I hope you get the point about using the footer. You can even change the social icons here. You can add different icons and different social links. Right now it is giving us what press you can change the icon. Let's just say from what press to maybe let's say Instagram. You can just change it to Instagram. You can insert the icon, you can paste the link or URL of your Instagram profile page, and you can adjust the width of them as well. The spacing between the Facebook and Twitter is because there is an undefined social icon right here. You can just remove and you'll find that the spacing between all of these icons are evenly distributed. If you would like to add some more gap between them, you can just go to the styling section. You can add amongst them. You can add some gap border and all those different kinds of functionalities available. All right, so I hope you get the point. I'll just publish for now. I'll add in condition that this kind of footer will be applied to the entire website. Just save and close. Now let's look at the 44 error page again, we'll go to the Theme Builder. That was a quick shortcut to go back to the Theme Builder again. Rather than going to the we press dashboard. What does 44 error page mean? So whenever someone, let's just say you have completed building your entire website on your local host system and now you would like to put your website from your system to a hosting service, right? So basically you're trying to make your website live in public on Internet, so whenever someone types your doing URL followed by forward slash and then the page. Now if someone makes typo error in the URL, then what should happen where the user should be redirected to, will allow, or will you give that kind of an experience to your user that it just shows a simple Chrome error four or four, that the page, something like this was not found. It won't be a good experience, right? It's better to just build a custom page which will show that hey user had some typo error in your error. Or maybe just make sure that you're clicking on the correct URL and it will react to the page where you intend to go over there. We can just go to the addnew button. Maybe it's not just typo error always, It's also about sometimes the broken links. Let's just say you updated a website a month ago and there is a page, let's say a block page. You changed the URL for block page. You as the admin changed the URL of the blog and your home page had a few buttons which was reacting to the URL of that block page with the earlier URL that you had that is making a broken link in your website. In that scenario, 44 error pages can come in handy. And also in terms of SEO, Google, Bing, and other search engines support and recommend website owners to make use of the 44 error pages to give an authentic experience to your users. You can make use of some pre built templates. You can make even changes around it. Or we have some template right here. I can just insert this one. Even take a look at it. I can just click on the on the plus magnifying icon. Just to get an overview of how this 44 error page would look like, I can just click on the folder icon. I can make use of this one Insert. Let's see how it looks like. This is exactly how we want our users to show. 44, the page we're looking for does not exist. And back to home, right here, you would like to link them back to your website. So you can just make use of your home page. So I can just make use of the home page. So whenever someone clicks on this button, they will be redirected to your home page. Fine in the background, you can add an image. You can maybe even add some animations, which will cover on later on this course, right? So animations, background color may be changing the font style and you know the color of the fonts may be changing the border of the buttons. All these things are subject to your design and your consistency of the theme that you are following. So it's up to you whatever you can do. I'm just showing you all that what are the features that element or theme builder provides. So I hope you get the point. In the next lecture, we'll see how we can make use of the pre loaders in Elementor. 12. Preloader & Page Transitions - Animations Finally!: Let's see how we can make use of page loaders and transitions. Right here in the element or pro, you'll find a feature. First of all, we'll need to go to dashboard. Once you go to the press Dashboard right in the element or settings, you'll need to go to the feature tab and scroll down to the part where you would find, where you would find something called a wait a second. Where is it? It was right here. Page transitions right here. By default it would be set to active, but for some reason, if you can't see this green dot right here, you can just click on Active and scroll down and save the changes. Now what essentially it will allow you to do is whenever you are going from one page to another, there will be some loading screen showing on your screen. That will happen because you're using page loaders and transitions which are elementor pro features. Let's try to edit our website with element. Or here we can see this icon, right? This is called as Site Settings. We can click on here. Now once you scroll down, you'll find an option called As Page Transitions. Let's click on it. And here you would find different options. Here you can choose the classic background or gradient background for your page loading. Whenever you click on another page, there will be some background overlay going around and it could be a classic or gradient one, let's give it a gradient, we'll use white color and the other as green color, we'll make use of the green color that we have right here. We can make use of this color sampler. You can see the dropper just comes up and the dropper could be placed where we would like to fetch the color code. Fine, sometimes it might not work, but sometimes it does. Here you can see this green color pops up. All right, this is the second color. The color for the first color which we have, white is location is set to zero and the second is set 200. Now you must be knowing about how the gradient effect works because we have covered that earlier as well. Right here we have different angles. Also, we can make it linear or radial, but let's just keep it as linear. Now we have entrance animation. How do we want to show up the animation, whether you want to be fade in or you want it to be fade down. Fade in, right. Fade in up. But I think fading down would look really good. Let's keep this as fading down. You can even choose exit animation, like fade out down, like this. For exit animation, we can just keep this as none because the animation won't last forever. If your page is loading hardly, it will take about a second or a two. There is some animation duration. You can keep this as short as, Okay, let's just keep this. 1,500 or 15 50. Now this value is in milliseconds, not seconds. Here you have this. You can preview your pace transition by clicking on this icon. Once you preview this, you'll see that this is how the animation works. You can even drop it down. Let's see how it works. There might be some delay going around. We can even work on it. We can click on Preloader. Preloader would be of many types. That means whether you want to show any animation at the center, you can see there is some spinner going around. Let me just increase the size of the spinner so it would be visible to you. All you can see there is some spinner. You could change the animation type to circle dashed like this, like bouncing dots. You could even change this to pulse, you could even change this to spinners like this, depending on your use case. Let's just keep this circle dashed circle. I think circle would look really good. We can make the size to be about 150. I think 150 would look good. Let's just keep this as 150. All right. You can change the color of your spinner as well by going to this part. You can change the color of the spinner. Okay, but I would like to keep this as white. You can add delay if you want, but it doesn't make sense to add delay. Honestly, you can even make the duration and so that it doesn't last forever. Here you have different options to choose between. Preloader, whether you want some animation or you want to show up an icon. What happens if I make use of an icon? Let's say I have uploaded my own icons or I'm going to make use of my own libraries. Icon needs to be of SVG format. First of all, you could even make use of the font. Awesome icons. Those are really great. You can see there is some spinner. There is other options as well. What happens if we choose the spinner which is the, by default one? Let's insert them here. You can add animation to this icon. If you have your custom icon also, you can spin it. You could even bounce it, You could even flash it. There are so many different options you can play around with and see what works for you. But for now, I would just keep this as animation if you want, You can even make use of an image. Let's see what happens if I make use of this icon. Okay, I have this icon, I can choose different animations instead of making use of an SVG. If you just have a PNG or a Web or a JP format of image, you can make use of it as a preloader. Here you can bounce, you can see right here, this is how it can appear. Here you can place your site logo or the site icon which you have used. Let's just keep this as none. All right, let's save the changes. I'm not going to make use of this image, rather I would make use of the animation which we have right here. Save this, we'll go back. Let's see if we can preview the changes. As you saw when the website was loading the preloader and the transition was also showing up the green, an effect was page transition but the animation was pre loaded. I hope you understood about those two concepts and minded where you felt that these two options are available only for the element or pro login. That won't be available for the free version. 13. Mega Menu - It's Different!: The next feature that I'm going to discuss with you all is the Mega Menu Builder. Let's get back to our template section in the Wordpress Dashboard Theme Builder. It is important for us to have a custom header in our Wordpress website. We'll just go over here, which we built previously. We'll edit this part. Right here we were using the Wordpress menu as the element. Now just to demonstrate how the mega menu Builder works, we'll have to remove this for now. I'm going to delete this. I will add a new element called as just a menu. Okay, one more thing. I would not see the menu right here. Just because we'll have to go back to our dashboard. Press dashboard right here. I'll have to go back to Element, or Settings. In the Settings. In the features stab. I'll scroll down to the part where I can find menu. Now by default it won't be activated. We'll have to activate this. Now we'll go back to our templates Theme Builder. We'll select our header and we'll rit it. Now when we'll browse through different elements that we have, the different blocks that we have, we will find menu, you can see right here. Let's just delete this one. This was not saved earlier, that's why the Wordpress menu was displayed right here. We'll just place inside our container besides this logo. Right now the text is in black color. We'll need to change the font color to white and also the typography to Poppins. Poppins is what we are going to save. Fine. Coming back to the content over here, we'll have home page which will link to our elementor page 25. We will have the next section which will be an about page. It will link to the about page, obviously. Let's search for the about us. The third item that we have is the contact page. Contact page. Let's link our contact page right here. Lastly, just to demonstrate the working of Mega Menu, we will create a new title. Let's just give this something as something like team. All right, then you can see there's a toggle, a switch right here which says drop down content. We'll toggle this, you can find that a drop down menu is shown besides the team. Now one thing I can notice right here is that whenever we bring cursor around any of the page menu items, we can see that upon hover, the text color changes to somewhat light degree. We don't want that to happen because then the font wouldn't be visible. We'll go to ho, we'll change the font color to active. Again, how to white color again for the active. We'll set this to white. For all the three states we have white color fine. Now let's try to adjust the width of this such that all the four contents get aligned in the same space. Okay, In typography itself, let's just try to make things work around the font size. About 14 pixels is helping us right here, we'll just keep it 14 pixels. As we click on the steam, you can find that, we can create a new drop down menu. This is a mega menu, right? I can click on the plus icon. Can bring four columns, four different containers In each container, we can put up element, let's just put up an element of, let's just say an image, an image box. I'll just search for image box. I'll place it right here. I'll remove the description part. We don't want that. We'll just make use of title and the image right here in the library. I have four images. They are approximately the same size. Or what else we can do is instead of using the image box, because the email box would make sense, where we want to include an icon or a logo and followed by some text which represents why that icon is there in our web page. In our case here, right now, we are displaying all the team members who are part of this business over here. Including a image element and a separate title element would make a lot of sense. I'll just delete this for now and I'll go to the basic image. I'll choose the image right here. I'll also insert a heading tag right below this part. All right? I can give a name something like, hi John here. All right. Examination mark. That's pretty much about it. That's how I do it. And I will just duplicate this for four other items. All right. Four containers. And the other containers, I'll just delete them so that spacing is such that you can find that we initially had four containers. We duplicate of them and whatever the blank empty containers were there, we deleted them right here in the image. We'll change the image quickly. Right here again, we need to change the image right here. We'll change the image to the sky. All right. We can change the text as well or maybe. Okay. I think font color is good enough. I think black would suit with a white background. But if you'd like to change the background for this, you can even do that. For that I'll need to just click on the entire container with. All right. I'll just need to click on the container width and make sure that I am inside the team. If I click on the team, you can find that this is the menu and I can change the background color as well. I hope you get the point. Something similar can be done for all the different containers that we have. You can even change the flex box settings and add a few of the things that you would like, whether you want to embed a video image or Ju file, whatever you would like to include right here. I think this functionality could come in handy when you have a lot of items which you want your users to navigate to, but you simply cannot list down all of them in a single main row of your header. By using the functionality of Mega Menu, you can make use of this kind of a layout to help you achieve what you actually intended to do. 14. Loop Grid for Blog Posts & Products - Intro to Dynamic Content: Right, Let's look into one more feature which is called as Loop Builder. We'll just click on Edit with Elementor. As soon as we click here, you'll find different pieces that you can navigate around with. But what we have to go back to Theme Builder, we'll click on the Theme Builder. You would find different options right here. Let's click on Loop Item. Now when exactly the loop item come in handy, let's say you're building a e commerce website or you have multiple blogs, or you have multiple products services and you want to show some of dynamic content in a card format at the home page of your website. Then in that case loop item could come in handy. Here you have some pre built templates that you can use, but we're going to build it from scratch. Let's just close this out. Since this is a pro feature, you'll require element or pro plug in. All right, here you have a section to add your loop grid. Let's click on the plus item. And it will give you an option to choose Flex box or grid. So let's just choose Flexbox. We'll make use of the vertical direction. As soon as we click on the Add element, you'll see a few recommended options which is post title, post post content, featured image and post info. First, let me show you what other features we have and how many different blog posts have we created so far. What I'll do, I'll just go back to the home page. If I click on Blog One, this is how the blog one looks like. You can see we have the title. This is the excerpt content. All right, this is the image. Now this is not a featured image. This is just an image. Here we have the, the body at the bottom. I've added a tag to this blog. Here you'll find social icons that people can share and comment section area. You can even see that how my block two looks like. Here you have block to the image content. Here you have again hashtag and a comment left by what? Press commentor. All right, so we have these two things. Let's go back to our Lue grid now. I can just place my feature image first. Whether you're working around your product page or you want to display and showcase different products that you sell or different block posts that you have. You need to have some cards on the home page so that users can navigate to. Right, featured image will display the image that you have set for that particular block post. All right, below that, we can add a title for our block post. This is like a dynamic content. The entire section, the entire container flex box that we have made so far is dynamic. It basically means that it will autopopulate the featured image, the title, depending on how many blocks, how many products, how many pages you have. And it will automatically fill the data in it. Right now, you just have to design it once and it will be replicated for multiple post block, post, multiple product pages and so on. So here you have the block title. Below this, we can add our blog or post excerpt. It basically means that what the content is all about. Then let's add another element which is post content. This will display the entire content which we do not want. Then we have the post information. Let's just scroll down to the part where we can place information. Now once you make use of this post info, you'll find different options, author, date, time, and comments. Now time doesn't make sense, we'll just remove it. We'll just keep date so that it will show that, okay, this blog is latest, the content is fresh, and there are so many comments. Right now, it doesn't have any comments. So you'll see no comments. But you'll find that where exactly this was published. And by whom? Right now the user name that I'm working around with is admin. But you can change this to whatever you have. Other things that we require in this is a button. Let's add a button also. I have a button, I'll place it right here. I would like to place the post information right below the title. Here you can see who posted this, when exactly was it posted, and how many comments has been left to this block post. Fine, we can center line the content and coming to this part. First of all, let's work around the image first. The image that we have right here, let's align its center. You can see the featured image right here. It's a dynamic content. We'll go to the style. We'll change the width of the image to about 50% Only 50% of the area should be covered up with our image. Whatever width we have for our entire container. This is like an image element. Inside the image element, we have the image itself. Right? 50% of the image width. Fine. Once we go to this advanced tab, you'll find different options to work around, but we do not have to. Here we have the block title. Here, you can align this center. You can change the typography to poppins. Let's choose poppins For this also, we can center align. We can change the size and color. Also, instead of choosing the text color to blue, we can make this as black and change the typography to poppins. Let me just do that. Poppins is what I'm going to select. Fine. Now, coming to this except part, now you can see the except for this particular block post is way too big. Now, it might not be the same case for all the other block post. What we can do right here for the excerpt we can go to style. You have different options. First, let's try to center line, You'll find In Content. Once we click on this, you'll find Settings option. Once you click on this tool on the wench icon, you can see you'll find to choose the excerpt length. If you keep this as ten, neither first ten words will be displayed. You can even drop it down to something like five or five wouldn't display the entire information. Let's just keep this as 15. 15 would be good enough. We have selected 15 words. Just display the first 15 words. All right, now we have the button. Let's centerline the button. We can also change the text, something like read more. All right. Read more. We can make this. As you can see, there are different types of buttons. Default button is gray color Info button is usually blue in color or T light blue color. Then you have success, which is green color. Then you have warning, which is yellow color and yellow or orange, and danger is in red color. But let's just keep it default and we'll change the color to about green, which we have saved as our global color. Here you have the text color which will keep this as white. We'll change the color of our button background. We have saved this as green. That's what we are using right now. Yep, that's pretty much about it. You can even change the size of this and you can link this. Now whenever someone clicks on this button, we want the user to be redirected to the particular blockpost or a particular product page. If we are actually manually entering the link, then what will happen? No matter how many blockpost you have, no matter how many products you have, those items will displayed in a lubrid format. But whenever someone clicks on the button, they will be redirected to the same link because you're hard coding the link. We don't want that to happen. We want the link to be dynamic as well. We can just click on this icon right here, which is dynamic tags. And you can select the post URL. Just select post URL. And whenever someone clicks on it, block post would open up. All right, right here, we can select the entire container. We can add some border to this. What you can see the spacing around is not that great what we can do. First, let's try to add some border to this. I'll just go to layout. I'll see in style, actually we'll find border in border, we would find a solid one. Let's keep the border width from all the directions to be one. Let's just keep this as one. See how it would look like. This is how it looks. Let's change the color of this border to green. I'm going to go, I'll change the color to green. I'll click on the globconl Green. This is how it looks like, but let's also increase the width of, we want the border to be a little bit fat. Click on border will make this two. Let's see, two works great in our case. You can even add border radius to make the rounded edges, but I would keep it as it is. Let's select the entire section. In this section, what I want is we want some spacing between them. Let's go to Container Advanced. Here you would find layout. We can change the, can even change the height. Let's change the height of this to about 06:55 All right, 655 looks good, but 655 would be really big. Let's drop it down to about 16:16. Looks good, Right here in 610, we can justify the content center and we can align items center. All right, we can add some gap between them. Let's add some gap between the elements to about 30. This is how it looks like. I think this looks pretty good. Let's publish this. Coming back to the home page, we can go back to home page right here. Can just select right here in the home page. I can just scroll down to the part where wherever I want to make use of this particular loop grid, I can just add my loop grid right here. I can just click on, I'll just click on the Ad template. Or you know what, I don't need to navigate between different templates, I just need to click on plus flex box, Horizontal direction. That means align all the cards in horizontal direction. And let's add element which will be Loop grid. All right, let's drag and drop our loop grid right here. Now we need to give a name to this Loukrid, but we did not give a name to the Lukrid. Let's go to the Theme Builder. Once you go to the Theme Builder, you'll find loop items right here, you'll find loop item. Now we need to change the name of this. Let's edit this by clicking on the preview button. You'll find an option to edit this. Here you can click on the three dots and click on Rename. Here you can give this something like blog post card. All right. Just click on Change. You can see the loop item name has been changed. Let's close this. Here we can start typing out blog postcard template. You will find that this is how our loop grid appears. You can see this is for blog one, this is for block two. Let's publish them and let's see how it appears. All right, once I preview the changes, let's see how it looks like. If I scroll down, you can just click on this. Blog one will appear, but it's not appearing on the next page. This is about blog one. If I click on this button, you can see block two appears. All right, I hope you get the point about using the loop grid and loop items in your Adress website. 15. Custom CSS for Added Functionality - Strictly for Professionals!: Guys, I'm very excited for this lecture because we're going to explore a really cool feature in Elementor. As you can see, I am on the home page of my website. Here we have the hero section using the custom CSS functionality. We're going to add a cool animation going around in the background of our hero section, and you'll find that a few of the icons will be in a floating motion. Let's get back to our elementor settings. Here I have the hero section. Now each and every section, or every element, whenever you click on it, you'll find an advanced tab. Now below the advanced tab, you'll find a custom CSS option. Here you can write your own custom, custom CSS code. You can even write it with the help of the AI, which element or provides within the element itself. Here you can add the CSS. Now if you have gone through my full stack web development course, where we have a dedicated section for the entire CSS part, you must have learned about it. But even though you don't know anything about CSS still, you can look up on Google and find few animation which are written in CSS. Let's add few images. I'm going to add one image to this container. Let me just change the image to this block, the globe icon. All right, here I have the globe icon. I'll go to the style and I will change the width of this image. Right now, the size of the image is way too large. I'm just going to drop it down to about 18. Yeah, I think 18 would be good enough. Now, again, we'll go to the advanced section. We'll go to the part where we have position. Now you'll find three options, default, absolute, and fixed. Now what does it mean? Default basically means that wherever you put your element in a particular container of a flex box or maybe even a grid, the element will stay within that container itself. No matter how much scroll you do at the top or at the bottom, the position of the element wouldn't change. But if I change this to something like an absolute, what happens is that I have the flexibility to control where the image can be placed in the center section. That's what I can do with absolute. What if I have fixed? Let me just also show you what happens if I have something like fixed. I can just select this image as fixed position. In the advanced tab, I can select the position to be fixed. And what happens if I scroll down? You can see the image stays at the fixed position. That's what your fixed position actually mean here, we can just change it back to default. I'll also add one more image right here in this container. I'll choose the image to be this icon. We'll go to the style, change this to about 18. Width to be at about 18. That would be good enough. We'll change the absolute once we do it, I think the position of these two elements are good. Now here I have this particular element in the custom CSS part. I'll paste this code. Just to explain briefly what this animation is all about, you can find that we created an animation called as float using the key frames tag. Inside this, we have placed that at the 0% That means at the start of the animation, you need to translate to the position at zero pixels, when it is 50% when it is halfway through the animation, you have to translate with respect to the position. You must have learned about translations and transformations in mathematics. That same concept is applied right here in CSS animation. So basically you're transforming your image, and you're moving the position with respect to the X axis to 20 pixels. So at the half way of the animation, the image is being moved towards 20 pixels with respect to the X axis. And it is also moving to 50 pixels with respect to the Y axis. And it is rotating in the Z axis. So here we have the Y axis, here we have the X axis, and there is also a Z axis, which is pointing right towards the camera. So this is the z axis. All right, here we have the z axis. It is also rotating, and there is a scaling, that means scale, that means reduce down or enlarge. If I have 0.7 that means drop down the size and make sure that you're scaling down the image. 2.7 Here we have the degrees, 13 degrees. When the transformation is complete, translate the y to, again translate with respect to the y axis, again to the zero pixels. All right, I hope we get the point here. We select the animation float, which we created right here. We want the entire duration of the animation to run for about 20 seconds. Here we have different motion effect which could be linear or ease ease out. That means the animation start and the animation end should be smooth. We want this animation to run infinitely in a loop. That's what it basically mean. Let's apply the same settings, the same custom CSS to this particular element as well. And once I save this, let me show you how it would look like. We can click on View Preview Changes, You'll find that this animation is going around in our Hero section. Doesn't that look so good? If we even scroll down, you can find that the animation will be going on in the background. Since the animation duration is about 20 seconds, you'll see that animation is happening very smoothly, very slowly. But it looks so cool and so soothing. I hope you guys enjoyed this lecture. You can go creazy with CSS and make a few animation effects. Or maybe even add some custom gradient colors or change around the settings of your existing elements in your website. 16. Popup Forms to Collect Email Address of Users - Very Important!: All right guys, let's see how we can make use of the pop up form using our elementor page builder to embed them in our press website. Now embedding and making use of a pop up form is really helpful in cases where you are collecting E mail addresses of your visitors in exchange of a subscription to your free newsletter or offering some a freebie. It could be an ebook, a downloadable file, whatever you are trying to share them with your audience. Ideally, you would like to add that pop up form to your blog post. But if you go to the post section right here, you'll find that we don't get an option to edit with elementor. We'll have to create a plockpost using our element or plugin only then you'll be able to edit them. All right, for now, I'll embed the pop up form in our home page itself. But before we even do that, we'll have to go back to our Tress dashboard right here. You will find an option to go to the templates, and under Templates you'll find an option of pop ups. Let's click over there. And here you can add a new pop up. Let's give something a name here. You can choose between different items that you would like to create. Let's give it a something like newsletter. I can say something like newsletter and I can create a template. Now obviously you all know that whenever we talk about any of templates or pop ups or anything related to element or theme builder, it is definitely going to show some pre made templates made by element or pro. You'll have to connect your account with elementor in order to make use of these pro templates. We'll build it from scratch. Let's just close it from now. Using any of the templates is not a bad practice. I'm not saying that we are not going to do this, we are not going to do that simply because I want you all to learn everything from scratch. Here, I can just click on the plus icon and I can choose the Flexbox layout. Now right here in the Flexbox layout, you'll find different layout options here. Either I can choose these options where I have four containers, or I could manually add them in such a way that they stack in a way that they appear in a four column section. Let's use this. Since we have it, we'll delete this container for now. What are we going to do? We'll just increase the width of this particular container such that it fits the size. The width of this fits within this part. All right, for that, what are we going to do? Let's just select this entire part. Let's make sure it is set to horizontal, particularly this flex box. We want to increase the width to about this much, which is 98% We could even do this 200, it doesn't matter. But you can see that the sizing from here and your about change. If we change this 200% let's just keep it 100% For now, I will add an image. Obviously, we would like to showcase what this newsletter is all about. We can maybe share the cover of the newsletter, but for now, I would just like to give some image which I have already in my media library. I'm going to select this image. After selecting this, I can add a title right here. What exactly we want our users to take action and why should they actually subscribe to our newsletter? We can say something like subscribe to our newsletter. Now, you can replace this with download the free book or get access to our free webinar or anything like that Right here. In the next container, I can add a form. Let's search for form. Here we have the form which is a pro element. If I can just close and I'll show you under pro, you'll find different options as well. Here you'll find a pro here, we'll just drag and drop it right here. You will find different fields, name, e mail message. Now we don't want all of the fields, we're just looking to get the e mail address or maybe even name instances. But for now we just want to collect the e mail address of our visitors. We'll go to the form right here. You can see the editing pane of element or you'll find that we are currently editing the form fields. We can change the name of the form if you want or you could even or delete or may duplicate the values of the fields. Let's close out name and message. And we just want e mail. Now you can see inside the input field, you have the placeholder as e mail. Above that, you also have a label as e mail. Now, it doesn't make sense to add the same thing over and over again. We can just toggle off the label so that only placeholder will clearly showcase what exactly the user is supposed to enter. Right here. Fine. We can even change the color of the button by going to the section buttons. You can change the name of the button instead of making use of the text Submit. We can say Subscribe. All right, Subscribe. In this part, in this button itself, we go to style buttons, we can change the color. This button, the Submit button right here. We can change the background color to green. The global color which we have saved. Fine, this is the layout of our form. Now where exactly we want our e mail address to be sent, we would require some kind of an e mail marketing integration software. There are a bunch of different options like your mail chimp, You'll have convert kit, which I personally use and I'll also show you all how we can embed them in our website. Right here under this layout content, you'll collect submissions. Here the submissions will be saved to element or submissions. There is a portion inside your Wortress dashboard under element, or you'll find submissions from where you can see in the Wortress dashboard that who has submitted. But if you're actually integrating it with your e mail marketing software, you can just go over here, you'll find that. What kind of actions do you want? What kind of a collect submissions and e mail? And once you click on this plus icon, you'll find a bunch of different options to integrate with your campaign. Let's say you have campaign in mailchimp or in convert kit, or you're using Mail Alight Slack, Discord or anything like that. So let's just keep it as convertkit. And once I add this convert kit, you'll find an option right here. Now the procedure for mail chimp might be a little different. But the only reason why I'm going with convert kit is because anyone can get started with convert kit. It is completely free of cost as of now for at least 1,000 subscriptions. That means until and unless you hit 1,000 e mail list in your account, you won't be charged a single penny. But in case of mail chimp, I think you are required to start off with $20 a subscription. Right here under convert kit, you'll find an option to enter your APIk'll. Choose custom instead of default. And below this we will have to enter our APIK. How are we going to fetch our APIK? First, we'll need to go to Convert kit page once you log into our convert kit, or if you have created a new account, you can just go to your profile at the top right section, click on Settings. Once you click on Settings, you will find an advanced option right here and here. Once you scroll down, you'll find an APIK. Just copy this. We'll go back to our website. We'll paste this right here and it will give you a bunch of different options to choose from what exactly it's trying to tell us. Let's just give it a time to load it and integrate it with a convert kit. Here you'll find a bunch of different lead magnets and landing pages that I've created so far. These are my landing pages. Now, convert kit has two options to create and grow your subscriber list. First, either to create a new form or a landing page. Landing pages are one where you create your e mail address and it's a standalone web page hosted by Convert Kit itself and it's using your own domain or their convert kits domain. Depending on your use case, you can either create a landing page or a form if you want to create a form, it basically it's embedded portion. The only difference, the major difference between landing page and form is that form is a part of a web page, whereas landing page is a standalone web page itself. The functionality of both things are same. They're trying to collect e mail address in exchange of a subscription to a newsletter or an event, or offering them a lead magnet. But we can just make use of form. As of now, I'll create a form and I can just keep this as modal because we want it to be a pop up thing. I can choose a simple like this, Charlotte. Now I know this course is not all about convert kit, but just to create, just for the purpose of building an e mail list and showing you all how we can integrate our Convertkit with element, or I'm creating this dummy form. All right, here I can click Publish. Now once I click on Publish, I'll see multiple different options. Javascript, HTML, Share, press Bounce, and so on. But for now I would not go ahead with any of them. Okay, I'll just save on this, Maybe I can change this to something like, let's just say elementor pro. All right, elementor pro, that's it. I'll save this. I'll click on Publish. And right now I'll just keep it under HTML tab once I go back here, and if I select, I should normally find it here, right here, which is my elementor pro form. But for now, let me just select the web dev lead magnet. Once I select this, what essentially will happen is that whatever actions supposed to be taken by that landing page, that means to send some kind of lead magnet or involve them in a loose letter subscription that will take place from this particular pop up form. Here I collect e mail address from this e mail field, and the landing page itself requires first name also. But our pop up form does not have a name field. You can skip this for now. And you can even add tags. Tags can help you to categorize all the e mail list where exactly the traffic is coming from later on. If you would like to just send out the mail, the e mail broadcast to a bunch of people in your entire list, you can target them by adding into your tag list. I'm not going to go in detail in depth about convert kit and how the entire e mail marketing software works, but I hope you get the point about working around these different e mail campaign softwares. Okay, right here, I've built this and I'm going to publish. Now once I click on Publish, you'll find different conditions and triggers. It basically means that where exactly do you want to display your template? The pop up form that we created? On which page do you want to showcase this? We can add that. We just want to display this on a singular page. Which page particularly? We want to showcase this on our front page, which is the main web page. All right, I can go to triggers now. Trigger basically means that at what particular time, what exact event when the user takes, we want to show up. This pop up form. There is a page load, once I toggle around, you'll find that after how many seconds the page loads, you want to show up. This pop up form. If you want scroll, that means after a page has been covered up, let's just say that the user has read about 50% of the entire web page content, then they should be given up. This pop up form. You can do that. You can scroll on particular element. Let's just say that you have added some a class to your section. Then after that class section has been swiped up, the pop up form will be displayed. A click also trigger, which means that whenever someone clicks on anywhere on the web page, they will be prompted with the pop up form. You have an after inactivity that once the user is reading, let's just say that you have a very long block post. The content itself is going to take about a minute or two for the user to read. After about 15 to 20 seconds. Once the user is just reading up without even scrolling or doing any activity, they will be showing up. This pop up form. All right. You have on page exact intent, that means whenever someone closes your web page, they will be shown up. This pop up form. All right, now I can just keep this as on page load after about 10 seconds. And I have an advanced rules as well. So here you have show after page views. Let's just say that you would like to showcase this particular pop up form. After about ten or 15 users have actually viewed your web page only, then it should show up first, you're getting all the ten to 15 organic traffic. Now, once you have gotten some traffic, you would like to show up this pop up form after X sessions. That means the page views and page sessions differ in terms of, let's just say that I'm a user, I'm viewing this web page. The page view count. Okay? I'm going to re, I'm going to revisit this website. So that's going to count as page views, but the session is basically that how many times I'm viewing your web page. All right, then there is show up to x times. That means only show up this popper form once for every unique user. You can even trigger around that rule when arriving from specific URL. Let's say you have each and every webpage, or each and every block post has a URL. Now you want to showcase this popper form to only those traffic which are redirected from your social media accounts. Let's just say that you have pasted the link of your web page, URL, on your Facebook or your Instagram bio page for a limited portion of time you're running like an event that please sign up to my newsletter. Then you'll get access to some exclusive discount for the upcoming product launch. That link is exclusively shared on Facebook and Instagram stories. Whenever someone clicks through those stories through those bio links, they will be showing up this pop up form. Otherwise the organic traffic or coming on your website from Google search or by just typing on your URL into the browser, they won't be shown your pop up form. Then there is some show when arriving from from where. Exactly. Let's just say you want to categorize that from where. Internal links, external links. You want to even mark this pop up page. Pop up page to be shown to the users who are coming from Chrome Search Engine or Google Search Engine instead of Bing or other platforms. Hide for locked in users. Let's just say you're running a discount for new users. The ones who have already locked in won't be showing up. This pop up, you can even toggle between devices. Let's just say this is an exclusive discount running for your mobile devices. Only you can even do that, Particular browsers like Chrome, you have edge, you have brave and other browsers, you can even schedule date and time. Let's say you're running a limited time webinar light, which will be conducted during the weekends, throughout the entire weekdays from Monday to Friday. You would like to promote your web page with this pop up form so that people can sign up to your newsletter or your e mail, your webinar right here. You can just toggle and choose the date. And only then that particular pop up will be shown. But for now I'll just save and close once I view this, let's see what happens. Okay, so what I'm going to do is I'll just go to home page, let's count to 101, 234-567-8910, Okay. Can see right here we have this pop up form. All right, I hope you get the point now, you also have one more option. This is the form that you created inside your press website. What if you actually have created a form in convert Et itself, And now you would like to repurpose that same exact design layout in your Weress website. How can you go about it? Let's just go to any of the other page. For that, I'll have to go to Dashboard. I'll create a new page. Okay? I'm going to create a new page and I'm going to call this something like, let's just say, let's just say that we are going to erit this with element or later on, let's keep this as convert pop up, form edit with elementor. We're going to go right here. The shallot form that we created by using the pre built template here under X tamal. We're going to copy the entire X tamal code fine here inside our. This thing will create a flex box with this direction, flex box with particle direction inside add element. We'll search for HTML if you're confused whether this HTML is part of the pro or free version. Also you'll find HTML in free version. Also, we can just drag and place it right here inside this HTML code. You just need to paste it. Once you paste it, you need to publish. Once you publish and you view your page, let's see if we can see the pop up page. We cannot see this pop up page. I'm not quite sure why it did not happen. Ideally should. Let's go to settings. Let's see other settings that we have on our form. Okay? So this should be visible for all the devices. Okay, Timing is 5 seconds, okay? The only reason why we were not able to see because the timing was set to 5 seconds, let's just drop it down to maybe even three. Okay, let's save this again. I'll click on Publish. I'll copy the Tamil code. Now you can see the pop up is visible because it took about 5 seconds to show up. The pop up, fine, I hope you get the point about creating pop up and collecting E mail addresses from your visitors. 17. Side Navigation Bar Popup Menu - You don't wanna miss out!: Guys, now that we have learned about pop ups, you're going to use the same concept to build a side navigation bar. Right here in our home page, we have this ellipsis icon at the header. Once the user clicks on it, we warned that the user should be prompted with a side navigation bar coming from the right direction and in an animation format with some image gallery and home page menu. All right, for that we'll have to go back to press Dashboard. Once we go over there in the template section, we have pop ups. Let's go there. We'll add a new template and we'll give the name as side nav bar. All right, let's create a template. Once we do this will obviously prompt us with some templates which we are not going to use. We'll build it from scratch. Now the white layer that you see right here in the middle of our web page, this is where your pop up will appear. But this is not where we want. We want our navigation bar to come from the right direction, from the right hand side of the screen right here. When this entire thing is selected, we'll just click on this gear icon which is pop up settings. And we'll change the position of this, that it should appear in the horizontal direction. With respect to the vertical direction, it should appear at the topmost part. All right, And the width needs to be dropped down to something like, let's just say 420. I think 425 would be good enough. I think 425 is more than enough Now, once we have done this also will make the height to fit the entire screen so that it occupies the entire height. And we can adjust our content and elements inside this particular sit site navigation bar such that it appears in the center. And there is some enough space between the elements. Fine. Now here we have the animation. Also when entrance animation should be that, you know, slide in right, slide in from right and exit animation should be slide out right. Fine. Since we want to make this animation bit faster, we'll move the slider towards the left side and we'll make the animation about 0.6 seconds. All right, let's click on the ad. We'll make the flex box in the downward direction. Only one container is what we are required. And we'll add an element. Now inside this, the first thing that we're going to add would be our logo. Let's search for site logo. That's what we're going to add inside here. Fine. By the way, the background for this, our entire this site navigation bar should be black in color in the style. First I click on this gear icon which is pop up settings in the style section, I'll go to the background type, I'll select Classic. I'll change the color to somewhat to a darker shade. All right. Yeah, I think this would be good enough Now, once we have done this, we have our site logo. We want to change our site logo such that it appears in the center and the width of it is something around 45% would be good. Fine. Now after this we would like to show our image gallery. Before that it would be good if we can add some a text editor. Let's add a text editor right in this container. And here we have the text. Let's change the font style to poppins, font family. Let's search for poppins and the color of the text to be white. Fine alignment, again to be center. Now below this, we're going to add a social link. We're going to add a social link. We want to list an icon list that we have an Instagram logo and we have the URL of our Instagram profile. Fine. We have the list again. We just want one list. Right now, this icon should be Instagram. We'll select Instagram on, we'll insert this. Once we have this, the text would be a. I'm going to place the URL of my Instagram page. This is the URL, or I should say just the user name. And I can even add the URL over here. If I want the icon to be clickable, fine. I want this to be in line, right? It appears within the same line and we can apply the styling between them. Let's make it center aligned. We can change the color of the icon to be white. We can also change the color of the text to be white. Let's change the color of the text to be white. And we can also increase the typography and size of this. I think about 25 pixels would be good enough. Let's change the font style to poppins to make sure that there is consistency followed across the entire website. Again, the icon size should be increased to 25 pixels. Fine, this is good enough. What I don't need to add at because it's obvious that we are talking about our user name. Fine, this is good enough. Now below this, we are going to add a gallery, image gallery. So let's search for gallery basically, gallery and grousl. Fine, let's add a gallery right below this part. Fine, we have to select a bunch of images. Let's add few images. This one, I'm holding down my command key. Windows systems, you need to hold on your control key. Fine. These two images I think. Let's also add these two. Fine, we have six images and we are going to insert them into this gallery. Fine. Now we can order them by random or some lesyload could be applied. Lazy load basically means that whenever you're trying to load your website, few images will be loaded. Then the next set of images will be loaded if you want your website performance to get a higher score. Now the layout should be in a grid format. You can change the number of columns. Right now we have four columns. You can see the first column has two images, second column has two images, column has only one image, and the fourth column also has one image. Let's drop down the columns to three so that it can adjust and fit the six images in two rows and three columns. Fine. Let's also change the spacing between these images. I think about 18:18 would be good enough. Fine. We can also change the styling of it such that the ratio can be changed from three S to four to four S. Three, the image size would change 16 S to nine is also what we can do. But for now let's just keep it four S to three. That would be good, I think. Or initially it was three S to 02:00 A.M. I, correct? Yeah. Image resolution. We have medium thumbnail. I think for this particular size of navigation bar, this is the perfect sizing for our gallery. Fine. Now, below this, we can add our menu. We can add our Tres menu right here. Below this, we can add our Tres menu. Again, we can centerline the contents. We can change the color of the text to white, Fine in the typography. I could change this to Poppins Fun family, right? This is our navigation right side or side nav bar Along with this, what other things could be add. There are a bunch of different things that you can add. You can also add a few more social links. Let's try to do it. Can box or can list just below our press menu. Let me just delete other items. Or maybe I could add few more items and give them something like Facebook and Twitter. Or maybe even linked in for that matter. Fine, I can do the same thing. So I can just copy the styling. I can paste it right here. Paste styling fine. For this, I can change this to Facebook logo. Apply the Facebook settings right here. We can add the name of my Facebook page below this. I can change this to something like, let's say Linton. All right, Linton again, change the text to this and we have finally completed building our right bar. Now for our nav bar, we want to make sure that the contents of this entire container are occupying the entire height. Fine. The main height should be 100 V H. That means it occupies the container height, is the entire viewport height fine. Along with that, the direction is vertical and we want to center, align the content, Align items to center, and make sure that there is some gapping between them. So we can even add some gaping, increase the gap size. It appears nicely. I think about 35 would be good enough, right? This is exactly what we want when we publish this. Now it will prompt us with different conditions, triggers, and rules that we would like to set up for our right side knife bar pop up. But the intention behind using this navigation bar is that whenever the user clicks on your ellipsis in the header, this navigation bar should pop up. That means no matter how many post pages you create, you want this side knife bar to show up. Right. For now, we'll just save and close. We won't apply any conditions or triggers, or rules. We'll go back to our press website in the navigation bar. Let me just go to the home page. I'll click on Edit with Elementor. Once I go there, I'll edit my header that we created. Fine, let me just give it a moment. Right here in the header, I'll edit my header. Right here in the header, I have the three icons. I can click on Link. In the dynamic tag option, I have an option to choose a pop up. You can see in the actions I have pop up. I can select the pop up again. I need to click on the settings of the pop up and now it will show up. Whether I want to choose all pop ups or only a specific pop up, obviously we just want a specific side knife bar. So we'll just search for side if bar template and that's what we're going to save. Let's publish this and we will view our web page when I view this and when I click on this, you can see a side knife bar appears. If I click anywhere outside the nav bar, it disappears. I hope you guys are enjoying this course so far. If you guys have any questions you can ask me in the In section and I'll try my best to answer each and every one of your questions. 18. Post Element to Design Blog / Product Posts: Let's look into another element or pro element, which will be post element. But before I just go right into it, I would just like to highlight that I have added a few more block posts right here. As you can see that we made a look. Correct. Over here you can see other posts are being populated. Now, the image for the block one is not being proportionate compared to the others because the image ratio and the image dimensions are different than what we have for the other cards. Also, you can find that the height of each and every card is a bit different simply because we have different title. We can adjust the height. We can make the height fixed. That means it should not go beyond this particular height. The title size could be dropped down to maybe about 35, 40 pixels we can work around. One thing you might notice is that we had block two as well, but it's not being populated over here. Now why is that? Let's just edit this with elementor. I'll just click right here, by the way, in my menu also, let me just show you what I mean. I can just preview the changes right here. Whenever I ho around block, you'll find block one, block two in all the other blocks that I added. Now this did not get populated automatically, I had to go back to my tres dashboard, appearance menus. I went to posts, I added all the things which were supposed to be added in my menu. And then I dragged and dropped it, it below the blog page. It became sub item of my blog page. And I saved the menu. Correct. We can also see the pop up that we created earlier. Let's go to our element or settings. Right here. We'll select your template for loop grid. Let's click on, first of all, let me just save back. All right, we have this loop grid, Let me just select on any one of those cards, we can just select any one of those cards. Okay, right here in this space, the blank space between these two cards. And you can see we have selected the loop grid. All right, now you'll find that there are three columns, That's why we can see six blocks appearing. But you can find that only six items per page can be populated, so you can increase them or maybe even decrease it. If I bring this down to only three cards should be shown in this particular home page, then you can add pagination as well. Pagination basically means that you can add numbers. At the bottom right here, you have one to three options instead of numbers. You can even change this to previous or next. Like this, you could even add numbers plus previous, next, previous, 123, Next, like this, and there is a page limit. Also, you can increase the page limit if you want. You can change the text of the previous label and the next label. Also, something like back and forward, you can load on click, which basically means that you can get a button, you can customize the button, and whenever someone clicks on the button, it will load the spinner and it will populate the other blog cards. Or you could have an infraite scroll. The infraite scroll would be best case scenario of using infinite scroll would be when you have a separate product page. That product page displays all the products related to electronics item. And let's just assume that you have 15, 20 electronic items to be displayed on that page. Over there you can make use of your inference crewel but not on home page. That's not a good practice right now. Let's just keep this As button so we can make use of load more. You can even change the icon if you want. Right now we are not going to make use of any of the item. You can change the spacing, you can align this, you can style the button, and there are a bunch of different things that you can also play around with. Like here you have equal height. So once I toggle this, you'll find that all the height for the cards are set to equal correct. Then you also have query Basically means that what source you want this to be, whether you want to display all the post pages, lining pages, whatever you would like to select, you can do that. How exactly do you want to arrange alphabetically? Do you want it to order by title, the comment count, the blog which was published latest? You can set it, do a bunch of different things. Okay, so I'm just going to publish this. And the only reason why I was touching upon the loop grid topic again because the post section which, which we're going to cover in this lecture is similar to Loop grid. Loop Grid is an additional element. Which element? Or added recently, but previously we had post element. When I click on Add Element, you'll find in the pro section you'll have Post. What happens if I add Post? Let me just click on this. I'll click on Flex Box and I'll choose this horizontal direction. Now if I drag and drop the post element right inside this container. Let's see what happens. Once I do this. You'll find that all the posts are being autopopulated. Now, the design layout is a bit different than what we set in loop grid. Because loop grid we made from scratch, right? It was completely custom designed for the loop grid. But for this elements of Post part, you can see right here it is, using some default settings, you can change round. It's not that you have to stick with the default design settings like here for the title. You can see you can change the color of the title as well By going to the style tape, you'll find content in content, you can change the title color instead of blue, you can make this to your green white. You can change the typography to, let's just say poppins, the same settings. The font family will be applied to each and every card, all right? You can even change the text stroke if you want. You can add some meta data. Now, what does metadata mean here? The date, the comments, all these are metadata. All right, so then you have excerpt, which basically means that you have to set it manually while you're creating post. It basically shares what exactly your post is all about. So it's like a brief description about your post, that's excerpt content, and then you have read more. This read more is like a link, not more of a button here. You can change the color, you can change the typography again, I can set this to poppins. Okay, let's try to make poppins for each and every text element so that you consistency is maintained throughout the entire website. Here also, I'll make this poppins fine. So here we have changed up the content. Coming to the image part. You can add border radius if you want. You can give some spacing if you want, you can add some CSS filters. I have discussed this very early on in the course that CSS filters allows you to manually adjust the blur brightness, contrast, and other effects to edit your image instead of using another image erting software. All right, coming to the box part, that means each and every card you can add border. If I try to add border width, you'll find that it's forming like a border. I can make this bit darker so it will be a bit fatter. I can even add some border radius, something like this. I can add some padding. Obviously, the content is sticking, so we can add some border radius and padding for the box here. I can add maybe about, let's just say ten. This is how you'll find from each and every direction. Fine. But if you don't want padding for the entire part and you just would like to give padding to the content, you can even do that. Let's see how it works. If I add ten, then you'll find that the image stays as it is. But the content, which is your title, your excerpt, your meta data, and your read more, has some padding around the four directions. You also have different effects that will happen upon Hoover and on normal mode. You also have box shadow. If I click on box Shadow, you'll find that there is some shadow behind the cards that would look good. Then you can also change the background color of this. If I change this background color, you'll find that the content background color changes. I just clear this because I don't want, you can even give some border color to this. I can set the global green color. This would look good in my opinion, but it's not that great. Let's just bring this back to default. I can just click on the color and I'll click on the refresh icon. Fine, this is how it looks. Now coming back to the layout part here, you'll find gaps between the columns. Currently it's set to 30 pixels. If I increase this, you'll find that the more I increase the gap between my cards, more my content shrinks down. Let's just keep this as 30. Now there is some row gap as well. So here we have three columns and two rows, correct? So here you can even increase the row gap if you want. So let's just keep this as 50 pixels. You can even align the content which you have right here. So you can either center line, left a line, or even right a line. But I think center line would look good. Okay, coming to the content part here, you have different skin layouts. Classic card format. If I change this to card format, you can see this looks really, really good. Here you have different categories. Now, categories is something that I've set while I was creating Post. Let me just take you back to the Tress dashboard, right here inside the Post section. I'll go to all posts, and right here you'll find categories. So here I've made few blocks which are part of the coursest categories and two blocks which are part of this category. All right? And I've given few hashtags so that when people are searching around different blocks, they can search up the content and they will be able to find that particular block piece. Fine. In order to categorize them, you simply need to click on any of the block post, click on Ert, right here in the editing pane. You can give a tag and you can even categorize them by adding a new category. I hope you get the point about categories and tags. You can add multiple tags or even multiple categories. But what essentially categories and tags allows you to do is that later on, let's just say that you have made some kind of block cards that you can see right here in the web page. And at the top you'll find categories. So basically this block belongs to courses category, but this courses category has multiple different courses like ranging from operating system to web development, to UI UX, to data sections and algorithms and stuff like that. So all these individual courses will have some kind of relating hashtag related to the content and title that it entails to so that it's easier in terms of search engine to find your content piece so that visitors can land on your web page. I hope you get the point. Now, we also have different thing called as full content. That means entire block posts will be visible, which we do not obviously want. Let's just keep this as cards because card looks unique. It's different than Classic because Classic looks very similar to what we have created in the Loop Grid. All right, here you can even set number of columns. Now whatever columns you're going to set, it will be applied to the desktop mode only if you would like to keep only one column for mobile tablet device. You can even change by just clicking on this tablet mode and you can set this to one. If I scroll down, you'll find that only one column is presented. If I change this two, let's just say three, then this is not looking really that great. Let's see if it works in two. In desktop mode, it looks good if we have two columns. Let's see what happens if we have mobile mode. Obviously, we would like to have only one card because there is not much width to fit all the content. Then you also have option two display all the posts per page. This is what we have discussed earlier. You can show the image if you want. You can even toggle this. Let's see what happens if you select machinery. If I click on this, you can see what happens. What essentially happen is the entire image border also appears. If I toggle this, you'll find that the image first of all, let me just bring this back to desktop mode. I'll click on machinery again, and let's see what happens. You'll find the entire image appears and the height is not being adjusted equally. That's what machinery actually means. You can set the image size, you would like to set this to thumbnail size, you can do it you would like to set as full, then entire full image would be set. But let's just keep it as medium, which was there initially. I think it was medium large. If I'm not wrong, I think medium or medium large was something which was applied previously. So let's just keep medium. There is also image ratio. By moving the slider, you'll find that image is being zoomed in or zoomed out depending on where you are placing your cursor or slider. Fine for me, I think about 0.56 would look good. Fine, this is 0.56 here. You can even toggle between title if you'd like to display title, you can. But obviously it's a good practice to include title. If you are trying to showcase what your block post is all about, then you can change the title. You can change the estimable tag for your title. Now ideally, it's a good practice to make use of two tag for your block post title. So we'll just keep it as two. If you'd like to include excerpt, you can. You also have excerpt length. And obviously this is representing the number of words and not the number of characters. Instead of 100 words, we could just keep this as something like let's just say 25 words. Only the first 25 words would be displayed. Fine. Then you also have applied to custom excerpt. So if you have made up your entire custom excerpt in while creating block post, then that will be the same. Settings will be applied over there as well. Fine, and here you have meta data. Now inside the meta data, you'll find that initially date and comments is being represented. Right? If you'd like to add more data like who published this particular article, at what time and when exactly was this modified? Was this even updated or not? You can even add those things. You could even add separator between these meta data by choosing the icon, by placing dot or maybe even the separate. You can add this, then you have read more option. You can toggle them, you have read more text, or you could change this to something else. You also have buttons. If you make this, then see what happens. It automatically align the buttons if you have then open in a new window. So whenever someone clicks on the link, do you want the block post to open in a new tab? Obviously, we want that to happen. Otherwise, what will happen? That Google or any other search engine, we'll recognize that whenever someone visitors lands on your home page, they are quickly jumping onto a new page. So that will increase your bounce rate and it will drop down your indexing in terms of search rankings. So here you have categories as well. In this badge here, you can find categories instead of categories, do you want it to be hashtags? So here you can even make use of hashtags or you could make use of categories. Here you have an avatar option. If you have you make use of any of your Aviatar. What I mean right here, you'll find that this is my profile, this is Aviatar. You can edit the profile. And you can just choose any of your avatar if you would like to display right here. And you can just display by selecting this Coming to the query part, you have different options to just arrange them just like we saw earlier in Luke grid. You can add pagination if you want. Essentially, post element is very similar to what we have seen in Luke grid. It is not much different but the only difference is here is that you don't need to actually create anything from scratch. There are many things which are pre built and you can play around with those settings to get started with your post card section to include in your home page. 19. Portfolio Element to Showcase your Products / Blogs: All right, let's see how we can make use of the portfolio element which is part of the element or pro plug in. Right here you can see portfolio. What does it mean? I have this website right here. You can see that this is using the portfolio element. If I click on fashion, you'll find that only this one appears. If I click on jewelry, this kind of image appears. There is some border radius. When we hover around, you'll find that the text with some green background and these two icons appear with some hover effect. Here, we do have filters, Let's try to build something like that. I'll create a new section. We'll keep the flex box direction to be vertical. Let's add the portfolio element. As soon as I add portfolio element, what it is doing it is just bringing up the images of my posts right here in the query. You'll find that it is ordering by date. Whichever was published latest was being displayed right here, Order by descending. In the layout part, you would find what kind of image resolution do you want to make use of? How many posts per page do you want to see? Let's just keep this as three. We want three columns, that would be good. Image ratio can also be adjusted. If I hober, you can find that the title of the block post appears now in the query part, you'll find the source. Do you want to display all the post? Do you want to display all the pages? Do you want to display landing pages, manual selection, current query or anything related to it? What happens when you add current query or anything like that? You'll have to add the ID. We'll touch upon the ID and classes later on. But for now let's just keep this as post. All the post that we have, all the featured images for that post will show up right here we can and maybe even exclude if we would like to just show few of the post instead of bringing out all the post content. All right, here you can buy or exclude them. Even avoid duplicates if we want. Right here, you can go to the filter bar, and if you want to display the filters, you can even display them here. When you click on Show, you'll be given two options, either to choose from categories or tags. Let's see if we have categories, you'll find courses. We should obviously see one more option which is net mafia. But let's just keep this as you'll find different tags. Now, the option show up only because we have kept that only three posts per page should be shown. Same thing goes, we have categories. Ideally, we know that we have created two categories, right? If I go to Layout and I display all the posts per page, let's just say I just create as many posts as I have currently. I've made this to 15, but we just have seven posts here. You'll find two categories. Just keep this as maximum number, how many pages you have. Just keep this as like that here. You can change the title, whatever you have, whether you want to display or not. You can even set the item ratio here. You can adjust the heighten width of your image by just placing the cursor and moving the slider. Or you could just click on the up and down arrow keys on your keyboard. You can choose H two tag if you want. If you choose H two tag, then you'll find that the title appears better fatter. And yeah, let's go to style. We can add some column gap between them that would look good. Also some row gap. All right, 25 or maybe even 35 would look good for both the scenarios and your row and column. Let's add some border radius. If I just keep this as border radius, you'll find that after a point it turns with rounded edges or the corners, you have an item overlay. What happens if you choose the item overlay? Let's select green, which is our global color. Here, you can choose the green color. And you'll find that the text appears and there is some background. But I would like to make some changes around this. We could make this color as a bit transparent. Let's see what happens now, Let's make it a little bit opaque. I think this would work just perfect, I think about this much. Yeah, this looks fantastic. Let's just keep this as it is, All right? You can also choose between different colors of your text and typography. Let's set the typography to Poppins. I'm going to select Poppins. If I hope you'll find that Poppins Fun Family has been applied to the text Fclicon filter bar. You'll find that we can even change the color of the filter bar. You can even add active color, whatever is being selected that will be shown. You could even change the typography of this. Let's choose poppins. We have chosen poppins, we can add spacing between them. You can add spacing between all these things. You can even go to color. Let's see what happens if we choose color. You'll find that the font color changes. If we choose active, then currently you'll see all are selected fine here. The difference between the space between and spacing is that if I move my slider for space between, you'll find that the spacing between my filter bar. Changes. If I change the spacing between this filter bar and the items that I have for my portfolio will increase or decrease. Let's just keep this as 35. That consistency is maintained throughout this page. Here you have the section. Instead of choosing box, you can even make this as full width so that it appears end to end. If you would like to give this some padding, you can even do that. Let's try to add some padding from left and right. If I add some padding from left, you'll find that the content appears, but there is some space. Let's also add 30 from right here, you'll find some spacing. Okay, this is what we have done so far. Now, you could even add some background color to this entire section by just clicking on this section. Going to the style type, we could go to background overlay. Now let's focus on background overlay, which we have not covered so far here. If I choose background type as classic for background overlay, I can choose one image. Let's just assume that I'm choosing this particular image. All right. Now I have this image in my background. Now, initially you can see that the color is not being selected. But still the image appears, the image appears very transparent kind of a thing. Now, how did that happen? Just by going to the CSS filters, find that blur is set to zero. Brightness is all these things. But if you drop down the saturations, you'll find that the entire image which is working in the background is black and white. A thing, something similar which is achieved right here. You can see that the image in the background has some black, white shade. You can do that by clicking on CSS filters, dropping down the saturation to zero. All right? And this will only happen if you're selected background overlay. All right? It won't happen if you have selected your background, simple background. Also you'll find that it is being transparent. If you choose this to be 100% opaque, then this is what you'll find. Okay, let's just drop this down. 2.6 0.6 would look good. Okay, you have blend mode. Different types of blend mode. Let's not touch into that here. Inside your position, you would find different positions which we have covered. Attachment is something which we have not touched upon. Bilifolt would be set to scroll or default. Let's see what happens if we choose fixed. If I choose, if I scroll, you can see that image also changes. The image direction with respect to the Y axis changes. Essentially we are scrolling the image also in the background. That's what happens right here for our, for our portfolio. I'll go to filter bar. I'll make the typography to be a bit fatter. Let's make this bold so that it's visible right here. We could even change the color if you want, but I won't touch it. Item overlay, you can find that here we have different things which we have covered and different items. Also, I hope you guys get the point about making use of the portfolio element and how we can make use of the background overlay by adding some CSS filters, changing the opacity, and also changing the attachment of the background overlay. 20. Price List Element - Display your Service Charges: Let me show you another element which is price list. I'm going to add a new section right here. I might select the flex box with a vertical direction. Later on we can add more containers. I'll add element right here inside the price list. Once I drop this, you'll find that we have a title, we have description, then you have a few dots and then you have the price. When can this exact element could come in handy? Let's say you're building a service page or maybe even like website for a restaurant or cafe where you're just displaying the price list for each and every food item. So you can just click on the background here. I have the background of the entire container, the flex box. I'll go to the style. And what I can do for the background, I can select one image, so I'll just click on Classic Image. I've uploaded one coffee image. What exactly we are trying to build is a section for the price of all the different coffees that this cafe serves. Here you have the image. But we would also like to give some kind of a background overlay. All right, here in the background overlay, we can select a gradient kind of effect even though you have an image in the background. You can even add gradient color effect with supplement to your image. Here you have a color, the primary color and the secondary color. Let's keep the primary color to be somewhat like a dark red shade. So let's just keep it somewhat like a dark brownish shade. All right? And the second color will keep this as black, fine. And we'll change the location of the first color to about 75. Okay, From top to bottom, you'll find that the color is appearing bit darker, fine. You'll also change the opacity of the background. If I move my cursor or my slider towards right, you'll find that the image becomes more and more blur. Or there is more dark of gradient, kind of a color shade going around over the image. The text becomes visible fine. Now I can click on this particular price list. I can click on Style. I can go to Color of my text, and I can change this to White. Now you'll find that we have title, the price right here. I can change this to white, I have description, which even I can change this to white. Now you'll find different kind of separators between the title and the price list. For each and every items that we have there is dotted. We can change this to, we can change this to double, so there is double lines going around. And you can even make this non fine, but we would like to keep this as dotted. You can even keep this as solid, but solid would not look that great. You also have weight for those dots. You can move the slider to see what works for you. You can even add spacing, so you can find that the more you move your slider towards, right there spacing it lefts from the title and from the price. All right, here, let's just keep the spacing 20. You can even change the color of your dots that you have the separator, then you have the image. Now you can add an image to this. For that, what are we going to do? We'll go to content right here in the content. You can expand on each and every item list. You can set the price. You can change the name of the title. Let's give this as espresso. We'll just keep the description. Whatever it is, we can change the image to this particular icon. All right, then I can bring the same image for the other items as well. I can make like Fracino. All right, then we have hot chocolate. Let's just keep this as hot chocolate. All right, let's expand on the spacing for our separator. I think about 15 pixels would look good. Fine. Here you have image now for each and every image. Okay, first of all, we'll have to add image for the hot chocolate as well. Let's give this image. All right, and this is how our menu would look fine. You can change the tag if you'd like to keep this as H three. You'll find that the title appears to be fat and it appears in big size. You can change the color of this H two tag if you would like by just selecting the tag that you would like. For the span tag, it will be set to white. If you want an H two or H three or other tags, you'll have to change the settings of that right here. You also have description which is set to tag. So let's just keep it as it is. We'll go to style, we have covered this part. But going to the image, you can change the image size. Currently it's set to thumbnail. You can change around. You can even add some border radius if you would like, the spacing around the image and the title and description that you can work around the different items as well. How do you want to align these different items? Do you want to align them vertically? Do you want to align the content that you have with respect to the image in center, to the top or to the end? I think center would work just fine. Let's just keep it like this. We can add a gap. Let's just keep this as 2020 would look good. Again, here in advanced, you can add a margin padding and other stuff. We can make a duplicate of this if we want. If I make a duplicate of this, you can see what happens. It appears just below this, simply because we have set the entire container section, the entire Flexbox direction to vertical. If I change the layout two horizontal, you'll find this is how it looks at the top of this, we can even add a divider. Let me bring a divider right here at the top most part. Or you know what, I could even add one container. Let's search for contain. All right, I can add one container at the top. Now, this container direction. First of all, let me just edit the container settings. We'll change this to vertical. All right, in this container we will put our price list and this price list, fine. Now we would like to add one more container at the top. Fine, so let's add a container at the top here. Inside this container, we will add our divider. This divider, we'll have our title, we can add, Let's just keep this a center line. Well, something like a menu. All right, here you can change between different tags that you want. I'll just keep this as pan tag. I'll make this as solid. Width is fine. We'll go to color of the divider and set this to white. So for our text as well, we can change, I can go to typography, I can change this to poppins. I can even increase the size of my text. For menu right here, this would look 50 pixels would look just great, fine. Now for the other containers that we have, where we have these two price list, we can erit the container settings to horizontal, and this is our menu would look like, again, the price list. We can go to typography and change the typography to poppins. Here I can select poppins for title, poppins for the price, and poppins for description as well. I can save the same settings for the other as well by just copying and pasting the style. You can see this is how our menu would appear if we use the price list element. 21. Countdown Element - Run a Limited Time Sale / Event: All right, let's see. Another element, by the way, in this mine itself, we had the coffee image, but I just removed the background by going to remove G website. And over there I just uploaded my image. And I use that image for both the price list elements. So I'm going to add a new section right below this spart. Let's keep the flex box, fifth vertical direction. Now I am going to make use of our countdown countdown element. Now when can this come in handy? Obviously, when we are trying to run a limited time promotion sales page. Or you're trying to host a webinar which will be hosted just in about a week or so. Or you're running a sale actually there you can use this countdown element first. Let's give this container some kind of a background image right here in background overlay. I'll select Classic Select image as this one. As soon as we click on this, we'll find that opacity is set 2.5 will increase this 2.9 or so. This image for this entire container actually we'll take up the width as 100 H. Let's make this as 100 H find, you would also find that the image is being repeated. Let's go to background. We'll make this as no repeat. If we make this as no repeat, you'll find that the image ends right here. Instead, we'll make the display size as contained it appears, and it enlarges itself with respect to the heightened width of our container. Fine, now inside this, we'll place another image. Let's try to add one image which would be this big sale right below this. We would also like to add our countdown element. Let's drag and drop our countdown element right here. I will place it, but first let me see that where exactly for this image placed right here in the structure, in this container, we have the image. Ideally, the container should allow to add countdown as well. Yeah, now we can add our countdown. Here, you can find that the countdown appears something like this. Now in the content part, you'll find the Due Date or Evergreen timer, which basically means that the timer will automatically refresh after a certain period of time. If you want a due date, that means the sale should end after a particular period of time. You can set the date by just going to this tab and clicking When Sale should actually end. Right now, I'm just going to select Today. Today, the sale would end in just a few hours. I can set the time. Also, right here we have the calendar so that we can set the date, the month and the year. Over here I can set time instead, I can just make this to about 10 minutes. Currently, time is 44 18:00 P.M. So we'll make this as 04:28 P.M. All right. Here you'll find, by the way, okay, the timing is currently set to UTC. You'll find that time is set to UTC. Currently, if you want that the timing show according to your time zone, we can just go back to your dashboard, but press Dashboard. Let's click on right here. We'll go to Settings Part. Right here in Settings, you can find Time Zone part right here. Just select whatever time zone you are in. I'm in India. My time zone would be first, let me search for my place right here in Asia. I would find my place where? India. Calcutta is a city in India. I can just select this and this will be my time zone. Let me just save this by scrolling down and clicking on the Safe button. I'll edit this with Elementor, and once I scroll down, you'll find that the timer is actually running just for 8 minutes. Okay, So this is how you can run the timer. Now, again, going back to this part, there are different view options. If you want this to be in a block more, this is how it will appear. You can even neglect days if it's just a matter of few hours, then you can just toggle off days. Here you have custom label if you want, you can even hide the label, but that wouldn't make sense. It is important to include label. There is custom label also if you would like to change hours, minutes, or second. So, but we'll just keep it as it is. And what other actions should it perform after the time expires? That means what would happen after seven to 8 minutes? So we have few options. Either we can redirect our users to a different page, or we can hide this timer. Or we can show a message, so we can show a message. Something like the sale period has expired. All right, After the time period ends, this message will be displayed, followed by exclamation mark. Going to the style part, you'll find different options. Here you have the container width. You can find that the container width is about entire, 100% You can change the background color of this, currently it's set to none. You can change this to something like this. Each and every block will have some kind of a block layout for hours, minutes, seconds. Each and every one will have its block. When when you have the view as block, that text, which is hours, minutes or seconds will appear at bottom. If you in line, then it will appear right below your time and just beneath it. All right. And they will appear closely and compact with each other. If you make this as block, this is how it will appear fine. You can even change the styling of it. If you want to add some kind of a border you can add currently it is set to default, that means there is no border. You can change this to solid double dotted groove. Let's see how groove looks like because you haven't seen it before. It is very similar to solid, but there might be a few differences here and there. Let's see what happens if I select this border and I increase the border width to about, let's say 20. This is how it looks like, It's like a frame effect groove border type. If I change this to solid, my border width would be something like this. But let me just bring it back to two because that would be sufficient, in my opinion, we can increase the border radius to make it circular, fine. In order to make this circular, we'll have to first make this as in line. After making this in line, this is our content would look like. All right, now you also have some spacing between all three of the blocks or merits and seconds. All right, here you can add some padding. By increasing the padding, what will happen? The spacing around the content will increase. Obviously, you know about this part. We can increase the padding. You can drop down the spacing if you want, inside content. You can change the color of the content. You can change the topography to poppins, let's say poppins. What happens in label? We can even change the color of the label as well. We'll set this to default, which is white. Again, change the typography to pops. If you want to make this as bold, you can even do that. You can add a text stroke. You can add a message if you want. You can change the typography of the message. Text. Color of the message that will appear after the countdown ends will appear in center with white color, pops font. And we want to have some font weight which would be bold, 700 bold, right? Let's also increase the size to something around 35, 30 would look good, I think. Yeah. Now, inside this entire thing itself, what happens if we go to advanced here? You'll again find all the default options that we can see for all the other elements. I hope you get the point about using different kinds of things. Let me just drop down the time to about just a minute or so. Just a few seconds. And I can just publish this to see that what message will be shown. If I scroll down here, you'll find that the sale period has expired. All right, but now we have some spacing right here. Now, why is that appearing? Let me just go back. Right here, we have the entire container. This container, we'll go to style. We'll set the background. Okay, container. We'll have our background overlay. We want this, no repeat. Let's make this a cover. Okay. Cover will occupy the entire with fine. Once we publish, let's refresh the page right here. If I scroll down here, you can find the entire width is taken up fine. You can see the sale period has expired. All right, so that was all about using the countdown element. 22. Blockquote Element - Include Quotes / Tweets in your Blog Page: All right, let's see another element here. I'll create a flex box. I'll add a new element. This element is block code. Instead of searching here we have block code. I can even type down by searching element. And here we have the block code. Now, how can block code help us and what exactly does it do? Here? As you can see, it basically shares given by someone and linked to the tweet. Let's just assume that you're writing your block post. And you as an author, you made a tweet on your Twitter platform. You can include that right here. There are different skins for each and every, what do you say? This block code. You can change the content. You can change the author name. You can add or remove the Tweet button if you want. If you include the tweet button, you have different options to include either an icon or just text, or both icon and text. You can change the color of Twitter, but I think I would like to keep this as Twitter logo color here. You can change this to bubble. Bubble is basically like chat box thing. Let me just publish this and show you how it would look like here in my page. Once I scroll down here, you would find this bubble Here you can see a little bit arrow. That's what a bubble is. You can even change this to link. That means whenever someone clicks on it, they will be redirected to your tweet. Let's just keep this as classic here. You have the label which you can use. You can add your username something like, let's just say this is one username that I'm going to keep. Whenever someone clicks on it, they will be redirected to your page. Let me just see if the changes are reflected. Wait a second. Just a second. I'm just going to change this part. I'll scroll down where I can just click on the tweet. If I click on it here, you would find this tweet from this Twitter platform or Twitter user. All right, let's cross this. And here I have different options to choose from where exactly I want to target this current page, non custom. And you can set it only one option you have in the content which is block code. By going to the style section, you can change the text color. You can change the typography. You can change the gap between the author name and the tweet that they have made. You can change the color of the typography. You can mess around with the button size, word, radius, color, add some custom color, Or you could stick with the official Twitter color. You can play around with the border of the center thing here. You could add a border width. You could add some, a gap. You could even add some vertical padding and stuff. Let me just bring it back to default. Here you have border as the skin. You can even change this to quotation. Once I make it quotation, you would, you would generally see the double quotes icon, but it is not visible. So we'll have to go to style. We'll have to go to coat right here. We can select as black. If I make this black here, you'll find it. This icon appears. You can increase or decrease the size of this. You can add a gap if you want. You can mess around the button which we have seen earlier. We can have other option as well like boxed code. We can have clean way where I think I would like to use quotation. There are a bunch of different options that you can play around with. You can center line, you can write a line, you can left a line. And there are many other things. I think this could come in handy when you're adding testimonials, you're trying to add feedback, exact coat that your client or your customers left for your product or service that you offered to them. Or you could just leave a tweet of the author of the block post. 23. Testimonial Carousel Element - Build Trust by Adding Customer / Client Reviews: Let me show you another element which is testimonial carrousal. Let me just search for testimonial carrousal. This is what we are going to see right here. I'll add a new section, Flexbox, vertical direction. Now when we go to the style part, you'll find one more option which is shaped divider, which we haven't used earlier. Let's try to use it here. You have top and bottom from top, I would like to have some a shaped divider. Here you have split arrow book and many different kinds of options to choose from. Let's try to make use of split. I can choose the color to green. Let's see how it looks. So you can see it splits. If I want it to be bottom from bottom, it splits. I can change the width. As I increase the width, you can also see that height and all those things increases. I can change, let's say tilt. What happens if I change this to tilt? You can see the height could be something like this. All right, also let me just increase the size of the entire container. Full width and height to be the entire height. 100 is what we are going to choose, take up the entire height. Coming back to the style we have our shape divider, We would make this height to be about 500. About this much. Fine, let's drop down. Or we could increase this. It doesn't mean that it stops at 500. If the slider, when you move towards the right most side and you see the value five, it doesn't mean that it stops at 500. If I add something like 800, you can see it still goes. It doesn't matter. You can just increase, or maybe increase this to 65650 is not good enough. Let's strike a 75750 is exactly what we should be looking for. All right, you can see exactly our entire container has been divided into two parts. This left bottom left triangle, which is white in color. And then we have the top right triangle, which is green in color. All right, let's try to add our testimonial carousal here. I'm going to place it right here in the center. Now let's try to arrange the items center, it appears right here. What I'll do instead, instead of this thing appear, right, the shape divider right here. I can change the angle of this. I can just flip this, so it can appear right here. I could even decrease the height. Let's make it a 400 or so. I think 380 would look good. Let's keep this as 380, Fine. Now for this testimonial carousal, obviously we want to showcase the reviews, the positive reviews from our clients or customers who have purchased our services or our products. We would like to showcase those happy feedback to our new prospects. Here you can see different slides. It is automatically sliding. You can change the timing of it, and I'll show you each and every one of them. Here you have item one. You can change the content. You can even add images to each and everyone. Let me add some images. We have few. We can add them in the circle avatar. Let's give this guy named John Doe. The second one, we'll keep this lady, she looks very happy, so we'll give her name. Emily. Emily Blunt. She is CMO of a company. Let's just give this a CMO. Let's add one more image. I'm going to keep this guy, and I will give him name, Will, Will Smith. Okay, it looks like Will Smith. So I'm going to keep this as Will Smith. He is CEO of a company. Ceo, CTO. And CMO are the three titles that we have. Or you could even change this to something like Founder. All right. You can even add items, you can make a duplicate of them. I don't have to teach about it. Again, you can change the skin type, the text that you have, the review that you have in the Lorimpsu text. You can change that from default to bubble. If you change this to bubble, you'll find that this will appear like in a chat box format. Fine. But you wouldn't find that a little arrow, simply because the background color, which we have is not gray. Let's set this to somewhat like a darker gray. About this color would look good. Now you can see the chat box icon appearing fine. Let's go back to our testimonial. You have different layout. Either you can set your image in line with the text of the person and their position, or you can stack them such that the image will appear at top and the name and the position of that person will go down. Or else you can keep this as image above, which basically means that all the information about the person will appear at top and review the feedback will appear at bottom. If I make this as image left, this is how it will look. If I make this as image right, this is how it will look. Let's keep this as image left because it looks good. Here, you can change the alignment. If I make this as left a line, you'll find that the feedback becomes left a line. If centerline or right a line. The text book change, let's keep as center line. We also have slides per view. If I can add three slides per view, this is how it will appear. We can do two, we can even add ten, and so on. Let's just keep one feedback per slide. We have slides to scroll. How many slides do we want to show? Depending on that you can show. Now you can even change the width of this. You can make the text compact by dropping down the feedback width. Or you could even set this to default. By going in the additional sections, additional options section, you'll find arrows. If I just close this, you will find that the arrow disappeared. If I toggle this, you'll find a little arrow right here. You also have pagination at the bottom, you have three dots. You can change this to fraction, which basically means that total three are there and currently you are on the first one. If you would like to make this as a progress, you'll find that the progress bar appears at the fine. Here you have the topmost part. If I click on next, you'll see progress bar reaches up to this point. If I go to the last progress bar, touches the end. Let's keep this as dots. You can change the transition duration and you can even change the autoplay speed. Would like to keep this as autoplay. If you do not want, you can just toggle this off. You also have infinite loop. You can pause on whenever you are hovering your cursor around any of the feedback, the autoplay wouldn't happen. You also have pause on interaction. That means whenever someone clicks on it or when someone is crawling, then this slide automatically. Here you have the image resolution which should be set to full. You also have lazy road, but let's not touch this part. Fine. Coming to the style part, you'll find different space between them. You'll find border color, border width, border radius, content. Coming to the content part, obviously you can change the typography to poppins image part, you can change the sizing. If I increase the size, this is how it will look find. If I change the gap between the name and the image, this is how the change will appear. I can change the border radius for the image. If I want this to have rounded edges, I can move my slider towards right. Or if I would like to give this as sharp edges, I can move my slide towards left. But let's just keep this as default, which is circular. Here in the navigation part, you'll find two buttons left and right. You can increase or decrease the size of the buttons as well. You could change the color of them. You could add pagination size. Also, whether you want dots to appear at the bottom to be a little bit larger or smaller by changing the bubble, what you can do, you can just give to the bubble. You can add some padding if you want. You can add a border if you want, and so on. Fine, I hope you get the point about the entire thing. Coming to the content. Right here, you'll find the text which is there, right here. We can change this to Poppins. Let's try to do this. You can find that Pops is applied right here. Fine. I hope you guys get the point. As one more thing that we can add to this, we can just go back right here inside the content, we can add some border to the bubble. If I add some border, let me just give this border a color. I can give this as green. This is a background color. This is not a border color, but this is a background color. Let me just make the default settings here. You have border, we'll just toggle this border here, you'll see that black border has been applied, but we do not want black color. Instead we want the green color. This border could be increased or decreased depending on our use case scenario. We'll unselect this part. We'll go to advanced right here. In the advanced part, you'll find border right here. You can even add border to the entire testimonial carousalre. If I add a solid, what happens? Border around the entire thing would show up. I would like to give border to a specific direction only. I can do that also by just adding about this much. I can change the border color to green. This is how it will look. I can add a border Us if I want, but it won't make sense. I can even add a box shadow. You can see box shadow. But let me just reset it. Back to default. This is exactly how our testimonial carousal section works. 24. Pricing Table Element - Display Service Pricing in Tiers Format: Let's start off with another element. I'll create a new section. We want the flex box direction to be horizontal. Here, I will add a container. I'll make duplicate of these containers before I even add another container. First let's just adjust the height of this container to be about 100 H, fine. It takes up the entire height. Now let's add some a background to this classic image and this is what I will select. We want no repeat and display size to be cover. Enlarge the entire image so that it fits the width and height of our container already. Now let's add container and we'll make duplicate of these such that we have three columns right here. Essentially what we're trying to build is we are trying to create price table for a website, service page, Any size product that you might have looked into. They offer a service page, right? A pricing page. In that pricing page, they have three different tiers of their pricing. One would be the basic advanced and the pro level tier. Here we are going to achieve something similar. You'll find title, you'll find description, you'll find a background color. You have a label, you have your pricing, whether it is monthly or yearly subscription. You have different features listed out. You have your pattern and some some text which you can place right below your pattern. Let's try to edit this. I'll just click on this and pricing table edit option will appear. Now instead of Enter your title, we can change this to something. Let me make this as a diamond package. This is like a diamond package. Then we can change the description. We can just keep this as our description. We can change the title tag to H two or anything else, but let's just keep three. Coming to the pricing part, we can change the symbol to dollar, Euro, any currency that you are using. So we can even change this to Rupee, but I would like to keep this as dollar now. I can change the price. Instead of 39.99 I can change it to 59 99 if I want. All right, here I can change the currency format. Now what is the difference between this format and this format? If I change this, you'll find that the cents part is appearing after that decimal point or you could make use of the default one. All right, so this would look good. Here you have the sale also, what happens if I toggle between the sale? So if I toggle with sale, original price will be slashed down and the new price will be displayed right here. I can keep the original price to be around 99. All right. I can change the period, whether I want this to be a monthly subscription plan or yearly. I can keep this as yearly or monthly. Let me make this as monthly. You can even make this quarterly. Here you have a list of features. You can even change the icon instead of using a circular check. I can just make use of this box tick or just a simple tick. I can just search for T or check here I have this check. I can select this, I can change the color of the icon to green. And here, instead of list item as one, I can make this as one domain. I can make a replica of this. So I can just copy and paste it multiple times. Instead of one domain, I can list the other features as 100 B, 100 GB of bandwidth bandwidth. All right, and the last feature, we can say something like 100 website hosting. This is like a pricing table for any kind of hosting service provider. It could be hosting side ground. I'm just trying to, you know, list down the features that they offer. Here you have 100 GBs of Pan with hundred website hosting and the icon which is check. All right. You can even rearrange them if you want. I can just place this right here. One domain can appear at the bottomost part. You can even add something like SSL certificate, SSL certificate. First, let me just make a duplicate of this. I'll cross this out. Ssl cert fate. All right, what are the features? Do hosting or provides? Let's just find that out here. I'll go to Web hosting. Once I scroll down, you can find that there are unlimited options to list down in terms of features we have CDN and stuff like that. We can add another element. Let's try to make a duplicate of this. I can add something like CDN free CDN instead of call cross, or I can just say cancel. Do we have cancel? No, we don't. Do we have the cross? The cancel? I cannot find that. Let's search for wrong. Okay, we cannot find that also. What would be the icon for cross? Let's try to find for cross. Okay, I can't find the cross icon, so I'll just leave it as it is. All right, here we have these different features. We have a footer also right here in footer we have the button instead of click here, we can say by now, by now we can provide link. Dynamic link also could be provider in terms of additional information. We can say something like 30, the money back guarantee. All right here, this is the text that we can add in additional information as well. Coming to the ribbon part, you can even change the text of ribbon if you would like to show, you can show or else you can toggle it off. You can change the position as well, but I would like to keep it as it is fine. Coming to the styling part, you can change the color of the background here instead of black. We can change something like green. Here, we have green. I can change the color of the title to something like black here. Black could be applied, but let's just make this as white for typography. Let's change this to poppins. All right, for the size also, we could also increase or decrease the size of our title. Right here, I think about 35 pixels would look just fine, Fine. Coming to the subtitle part again, we can play around with this by changing this to Poppins. We'll just use the default one, or we could even remove the description if we do not want it. Pricing part, we can change the color to black. This is the background, by the way. We can clear this out, we can add padding. If we can change the color of the font to black, it's dark, then you have typography again, Let's change this to poppins. All right, so this is how it will appear. Now coming to the currency symbol, you can even reduce or increase the size of this symbol. I think 50 pixels looks just fine. Now, what should be the position of the dollar, whether you want it to be left a line or right a line? I think left a line would look good. How do you want the vertical position to be? The dollar sign should appear at the top middle or at the bottom. I think Bottom middle. All three of them looks good. In my opinion, I would just use the top position coming to the fractional part. If I increase this, you'll find that the 99 part also increases or decreases. All right. So I can just make this around 40. I can even change the position of it, 59, 99. I think this looks good. Or bottom the bottom, it looks good. Let's just keep this as top. All right, here we have original price. We can make this as red, let's keep this as dark red. We'll change the font to pins. We can also increase the size of this. All light 99. Was the original price typography set to poppins, is it not? Okay, so this is for period. Okay? The monthly period that we have, we can even set the position of our original price. It's set to bottom. We can change this to middle or top. Bottom is the best way to represent the original pricing. We can change the color of the period, which I will, the gray color which it has. We'll change the color, we'll keep this as font color, but we'll change the font style to poppins. Let's search for pins we have used and we can place it below or besides. I think besides, look good. I'll just place it right here. Coming to the features part here again, you can change background color for each and every feature here. You can do something like this, but I would like to make use of the default one. I can add padding, I can change the color of the text. I can even change the typography. I can change this to something like poppins. I can change the alignment line, right, a left aline center line. Looks good. I can increase the width of it if I want, but let's just make use of the default one. I can add divider in between them. Okay, Here I had an option to add divider. I can choose between different dividers, solid, double, either dashed dotted, and make use of any of them. I can even choose the color of the divider. I can increase the weight of it, but two is perfect, decrease the width of it. I can change the gap between the features. Here in the foot apart, you would find this part, the button and this text. We can play around with the background color, the padding, We can increase or decrease the sizing of the button. If I make this small, I think this would be the best. If I have the button as small I can change the effect click if I hover around my cursor around this particular button. If I change this text color, or rather background color of the button to green. Let's see what happens if I bring my cursor. Ideally, it should happen. Let's try to save this now, text color, we want this to be white. Let's try to view the changes here if I scroll down. To this part. Okay, why is it not appearing in the hover? We have this color, fine background type should be classic border color. We do not want to give any border color text color. We want this to be white, obviously. But why is it not appearing okay? We can even change the animation of it on hover if you want. I'm not going to touch into this part. Here we have some additional information which we can style it differently. Here we can change the typography to poppins. I can increase or decrease the margin for the ribbon part, which is this popular part. I can change the color of the label, All right. I can even set the distance from where exactly you would like to place this particular label. I'll just make this as default. I can choose the color of the text inside this. I can even change the typography of it to poppins. I can even add some box shadow to this label. This looks good, fine. Now, once we have done the entire thing, what can we do about this? We can duplicate this. Let's make a duplicate of it. And by the way, in the advanced tab, you'll find all the other options that is there for other elements. Also, right here for the entire container, I'll make a duplicate of this container. Again, make a duplicate of it and I'll delete the other containers. Fine, let's delete other containers now for this part, for this particular diamond package, I would not like to display the ribbon. I'll just remove this ribbon for first and last one. I would just like to keep this for the middle one here. I can change the package title to something like let's just say titanium here instead of diamond. I can place this as platinum. We can even change the pricing of this. For the titanium one, we can go to pricing, Instead of 59, 99, we can make this as 299. This is like the most expensive one. We can change the original pricing also. Instead of making the original pricing S 98, we can make this as 599. For the platinum one, we can make this as 129 and the original to be 200. All. I'm not going to go in detail about changing the features list. You can do that on your own, but what I would like to do is I would like to arrange the items in center. Let's just go and click on the entire container. We'll go to Layout and we'll justify content and align items center, fine. By aligning the items center, what essentially happened is that the container, whatever container element it had, it adjusted its height accordingly. And that it adjusted its position to center with respect to the y axis of our outermost container of this particular Flexbox section. I hope you guys get the point about creating different pricing tables. 25. Animated Headline Element - Boost Your Title Appearance with Cool Animations: Let's try to add animated headline to this section of pricing table. Now, this part is going to get a little tricky, not because the element that we are going to use, but the way we are going to arrange the elements in this section. Pay attention to this lecture very carefully. As you know that this flex box has a horizontal direction. We have put this pricing table element inside each container, we have three containers, container one, container two, and container three. Now we would like to give, or rather I should say, we would like to add another container so that we can fit our animated headline at the top. Fine, another container inside which we will have these three containers. For that, let me just change the flex box layout to vertical. For now, just pay attention to this very, very carefully. I'll click on Ad Element. I'll bring my container outside. We'll just make sure that this container which we have right here, it is not part of this. I can just click on Structure. You can find that the empty container which we have, it is part of a nested container which has pricing table also, which we do not want. We can just drag and place it right below. We can just and place it right above this existing container with pricing table. Fine. Now we have this one. Now we would like to also add one more container. Let's try to duplicate this by just duplicating this. We can drag and place this container inside this. Here we have two containers in this flex box, the outermost container one and outermost container two. Fine. Assume that this is a flex box. Inside flex box we have two Amazon boxes. Amazon box one, Amazon box two. Now inside this Amazon box, we have one box from Walmart, the other box from Best Pi, and the other box from some other vendor. All right. Let me just drag and place it right inside this here. Let me just open up a structure here. We have the container inside which we have one container with pricing table. And here we have another container with pricing table. They are not nested, they are individual one. You can see the structure right here, Right here. We have the third container which is not part of it. You can see the alignment is a bit different. Let's try to place it right right here to be a part of this. I can just arrange it like this, and you can find that all three appears in one container. Now, this box, this container will be set to horizontal. This is how you will appear. But you'll find that diamond should appear first, Platinum should appear in the last, and titanium should appear in center. Let's try to rearrange them. We can set right here. What I'll do, I'll just click on Structure. By right clicking on this, Titanium should appear in middle, which is the last one. Let's play Set right above, Titanium will appear here. The last one, which is diamond, should appear first. We'll do this. Platinum will go in last. Platinum will go in last. Okay, what happened? We need to first make sure that all of the structures are collapsed fine. Diamond, then titanium should come up. Titanium is right here. We'll place it here and you'll find that this is our arrangement is fine. Now we'll add our animated headline. Let's search for animated headline. I'll drag and place it right here. You'll find that this is our text with the last word. There was some circle animation going around. Let's just change the text first that this page has pricing table. All right, what should be the highlighted text? Let's remove this one. And let's make use of the pricing table. Fine, Here you have, this page has pricing table. You can even add after text. That means after highlighting this, what should it display? You can even add it. Do you want it to go with an infinite loop? You can check this box. How long do you want this animation to last? Do you want any kind of delay? You can add all those values in milliseconds. You can even add some link if you want. I'm not going to, I can change the title tag to two. I'll go to styling. I'll change the color of this shape. The highlight is one animation option. By going to the content part, I can change between different animations that I have. Instead of highlight, I can change this to rotating. It will type down the text, something like this. You'll find it like this instead of style. As rotating, we can change animation type. Do you want to be typing? Do you want this to be clip? What happens if we have clip? Let's find out, here's how it will display the text. You also have flip, we'll flip the text. Let's see, Flip, vertically happens. You have swirl, it flips like this. Then you have blinds display like this. Then you have drop in wave, you have slide down. I think typing would look best. Let's make this a typing. Here you have different rotating text we can. This page table, all right. This page has pricing table, fine. Here you have after text also, which we are going to keep this as empty. After going to the style tab, we'll choose the headline color. Let's make this as white coming to the typography. Let's set this to Poppins. We can add text. If we can even change the color of the animated text. Animated text could be something like, let's add light gray tone. We can add a light gray tune right here. We could change the form family of this to Poppins. We can change the selection color. Also here you have different selection color, which we are not going to touch again. Coming to the advanced tab is same as the other. Let's publish. We can view the changes by scrolling down to our web page. Let's refresh this, and once you scroll down here, you'll find your page that this page has pricing table. All right, so this is how it appears. Now you might find that it selects the entire text and the background color changes to black. It's because we don't have an after text. Let's try to change after text. Like something like this page has pricing table or something like elementor pro element. What happens is that in between you want some text to be changed, you can do that. You can even change rotating text instead of pricing table. You can make this elementor pro. What happens now? Let's see here. This page has pricing table. Let us allow to type it out. Here, you can find the entire thing. Here we can go to styling. We can choose selected text. The text which is being selected, that will be shown currently, it is set to some default settings, which is black in color. If I change this to something around white, let's see what happens. You can see the entire text was selected to white. You can add some other kinds of color if you want. You can change the color of the text and so on and so forth. Fine, I hope to get the point about adding animated headline to your section. 26. FlipBox Element - This is unique!: All right, let's try and make use of another element which will be flip box. I'm going to add a new section. We'll keep this layout. Let's increase the height to about 05:50 pixels. Fine. We'll change the background color. Let's give it an image here. I'll select this image. Find I can even make this cover and do not repeat it. Do not repeat. And here we have the image. Now inside this, first of all, wait a second. Instead of making use of this right here, this image could be used in background overlay. Right here, we'll go in background overlay. Classic Select the same image, same settings would be applied. That means we want the display to be cover, repeat, repeat. The opacity would be a little bit more to about 18. Now this is what we want. Let's add one element which is called flip box. I'm going to drag and place it right here. Now once I place it, I can first center align this by justifying the content and aligning items center. Now you will find that this has a heading description and a button and it flips, right, So it has two sides. Now this could come in handy when you are trying to offer some service and you just don't want to fit all the content in the entire card itself. You can add some flip kind of in effect here. You can display a few things. Now, this wouldn't necessarily be something similar to what we have done in pricing table, because price table has listed down all the features. But this would be just a brief overview about what the service is all about, right? You can find the use case, whatever works best for you. And this flip will only happen on hover. Whenever you move your cursor towards this element, the flip will happen. And when you bring back your cursor outside this element, the flip will take packet's original position fine. Inside this particular flip box, you have content. Here you have the content, and here you have the background. Here we can change the background to classic or gradient. I can choose the image, so let me select this image as my background. Now once I've done this, I can select background overlay. Also here I can choose different colors if I want. And what I would like to add is an image instead of the star icon. I can go to the content. And instead of making use of the icon, which is right here, let me first search for the elementary icon. Do we have? Yes, we do. Let's insert the elementary icon itself right here. Or else I could just click on Image and bring back the elementary image, which I have right here. You can see. But the image size is way too large and I have to adjust it. Instead of doing it, I can keep this as really small about medium. Working around the settings of it would not be feasible. So let's just make use of this elementary icon. All right, once we have done this, we can view this in a stacked format. This is the view of stacked, so that means it will have some circle. Or you could have a framed option as well. You have different options now, do you want the frame to be circle? Do you want it to be square? Do you want the stack to be in a square format or in a circle format? You can choose between different options. All right, I'm going to go ahead with this option now. Here you have the heading. I can change this to Elementor pro, fine. I can give description something like five stars to this course just for the description purpose. Five stars to this course. And I am enjoying watching this course. All right, here we have some description. Here you have back also in the content. So that means once you flip what the content should display here, we can choose between different backgrounds. You can play around different settings. Here you can change the different title tags that you have. For title, you can place H one and H23. Now that will help in SEO purposes. Here you have your description title which you can set to span tag or you can adjust the height and accordingly, let me just make it default. You can add border radius more. I bring this towards the right, you'll find that the entire flip box turns in a captual format. I can change this back to somewhat ten or 12. 12 is way too small. We can just make it about 16. Let's see how it looks like on 2020. Looks good. I'll just make this as 20. Now, what effect I want for flip? Do I want this to be flip like this? Do I want it to be slide? What happens when I move my cursor? You can see it appears like this. That's the slide effect you have. Push if I. My cursor. It pushes the original content to up. That's effect. You have zoom in. It zooms in, you have zoom out like this. You also have fade. Very simple effect. Let's just keep this slide. What happens if we have flip? You have directions also for each and every direction. You want it to be a flip vertical to the top. Do you want it to be bottom? This a flip? Do you want it to be right side like this or to left like this? You can even change that. I will choose this as right. We can even give this as three D depth. Let's see what happens when I choose as three D depth. If I bring my cursor, you'll see that it's having a byte kind of a thing. Let me just bring out any of the object I have near me here. I have this remote, I can just flip this around. This is how the flip will actually work. Fine. This is the three D depth, again for the effects and animation for the pricing table. Also, if you go back, not for pricing table, but I would say animated headline here. We discussed that in rotating, we have different options for animations, but we do have highlighted also here you have circle. You also have curly. You might not find the color of the curly to be very appealing because it's red and the background gradient color is also red. Let me just change the color of the shape to be about white so that it will be visible. Here you would find curly, you would find underline would be at the top and bottom. Both sides, you have double underline, zigzag, you have diagonal, it will be a cross. Now you can bring this in front also, instead of appearing, making this appear back the text, you can also make this appear in front by just going to the style selecting this toggle option. Bring to front and you'll see that this text is slash down. You can have rounded edges. Also you have other like strike through. You have X also, it will cross down your text. Fine, but we'll keep this as rotating and typing effect for the animated headline. This was just a few things that I missed out in the previous video. Now in this part where I have this flip effect for the flip box, what other options do I have in the style tag, in the style tab? I can choose between different colors of my text. In the headline, I have the text color set to white typography. I can change this to poppins. I can grease the font size to something about 35. I can even change the text stroke. I can change the animated text also to white. Let's see what happens. I can change the typography again to poppins. I have text stroke, I have select. Okay. All those things was happening for the animated text. My bad. All those things happening for animated headline. But we are working around the flip box. Let's go to style. And here you would find different alignments for your flip box. I can make it left, right, center line. I can change the position to be center to the top or in the middle. Let's make this as middle. I can even set the border type. Do I want it to be solid? Do I want it to be double? Do I want it to be dashed dotted and so on. But for now, let's just keep this as right now, you wouldn't find dotted border because we haven't added border width. If I do add border width, you'll find that there is some border. I can change the color to white, and now you'll find dotted borders across the entire flip box. Right? We can just make this default here. You would find some spacing around your icon. You could also change the color of the text. The icon primary color could be changed, and the secondary icon color can also be changed. But let's just bring this back to default. You have the icon size which you can adjust accordingly. Let me just bring it back to default. You can add padding to this. You can rotate this icon. You can add radius, border radius around your icon. You can add some spacing between your title and your icon. You can change the color of your title to white so that it would be visible. Now, coming to the description part, you can change this to this part white. Again, you can set the typography for both your title and your description. Right here we have text color, you can find text color to white. Also, whenever I move my cursor anywhere in the color, this is changing the color of my button. You can find right here. Okay, this is happening when we are under back, we have two options in style, front and back. In the back part, once you scroll down, you would find the color of the button. You can reset this. You can change the border color instead of white. You can change this to any other color that you would like to give. You can add border radius as you could add some border width so that the border appears to be a little bit fat. And you could change the color of the text of description. You could even change the color of the text of the heading to white. All right. You can change the typography to poppins for all the texts that you saw, either in front and back, for both of them. Here you have the title. You can change this to white. Here is how it looks like. Fine, I hope you get the point about working around. Flip box in element or pro. 27. Slides, Media Carousel & Gallery Elements - Content Packed Video!: Guys, now I'd like to move things forward really fast. In this video, we'll cover three elements provided by element or pro, plug in. First we'll look into the slides element, then we'll see the gallery, and then the media carousal. Let's add a new flex box. It doesn't matter what direction you have set, but we just want one container. We can make this as horizontal Here, I will add the slides element. I can just drag and drop it right here. Now you would find there is some title text, the description text, a button in the middle. Now at the bottom, you would find three ellipses, three dots, which represents how many slides are there for this element. In the left and right directions, you would find arrows which will help you to navigate between different slides that your entire element has. Now, when could this come in handy? Let's say you are trying to build a hero section for your E Commerce band, where you are showcasing different products that you sell or maybe different services that you offer that could come in handy when you are building a product page. And that product page needs to have a hero section. Hero section could be this, a slide format. Now if I try to publish this, let's see how this looks like. If I scroll down to this part, you might find that the width is not being occupied correctly. The width is not set 200% How can we change this? We can just close this pop up. Go back to our Elementor settings, select your Flexbox layout, select the Layout tab. And in the content width, we'll need to click on Full Width. Now if I save this, mind it very well, I have not changed this in the slide settings. I've changed this in the container settings, right? If I scroll down to the part where I have my slider, you'll see that the entire width is being taken up. Right? Let's go back now. I can change the content if I want. If I click on the next arrow, you'll find that there is some animation going around. There is some background color, and the text animation also appears nicely from bottom to top. All right, there are a few things that we can change here. If you would like to add more slides, you can just click on the add item. If you'd like to make a duplicate of them, you can select the document icon. If you would like to remove them, you can just click on the cross icon. Let's try to expand and see what each and every slide offers in terms of design layout. If I click on it, you can change the background color or you can add an image. Let me add an image here. I have three different product images. First, I'll add this image. Once I add this, the settings are applied for the first slide. You can see right here, Initially we were in the second slide. You just need to navigate between different slides. Now, the size display option would be set to cover. What happens if I change this to contain? You know the difference between contain and cover. Obviously, you can see that how it occupies the width. If I make this as auto, it will automatically adjust the sizing so that it is zoomed in. But we don't want that to happen, so we can just set it back to cover. We can play around with different effects. Here we have the Ken Burns effect. Let's try to toggle and see what happens. What happens in Ken Burns effect is that you can see there is some slight zoom effect going around whenever the slide is active. There is some zoom direction which you can set if you want this to be zoomed in. Zoomed out, you can choose between different options that you would like, but I think zoom in would look good. If you would like to add some background overlay, you can even do that. This image is there in the background, but the image has shade going around so that the text becomes visible. Otherwise it wasn't previously. You can see the white text and the bright colored background image with full saturation, full transparency and all those kinds of things was not working with the text that we had. Let's add background overlay. Now you can change between different blend modes. Now, what is blend mode? If you've worked around different photo editing software like Photoshop or even if you have gone through UX course on Figma, you must have learned about blend mode. What happens if I choose multiply? If I change this to screen? If I go back to the first slide, let's see what happens. There are multiple different options. You can dark, you can make this light, you can play around the saturation levels of it and stuff like that. If I play around the saturation for the first background overlay image, find that transparency. And the saturation is set such that the background appears something like this. It is not that bright, it is not very dark, but somewhere in between, it's giving like an old photo an effect, right? But let's just keep this as normal. You can play around between different options you have as well. Okay? You have color, you have exclusion, you have luminosity. You can play around between different options. I can choose normal, because I think this works fantastic. In our case, I can choose different settings for my first slide. Here I have background, which we selected. Moving on to the content part, you can change the title of this slide. Let's make this as Soaps. I can change the description if I want. I can change the text of my button. Let me just make this as by now. You can see by now button appears right here. You can add some link, or you could add a dynamic tag to the link so that it will automatically link to a new post or a new page which you have linked to. Now, same things could be applied for other slides too. If I go to the styling part of the first slide, you'll find that there is one toggle which is custom. Let's see what happens right here. Here you have an option to rearrange the content that you have. We have horizontal position. Now what does it mean? All the things that we have in terms of content with respect to the X axis, they can be changed. I think you all can agree right now that X axis, which is horizontal, Y axis is vertical, right? Right now, center align with respect to horizontal. That means content appears right here. If I make this left line, it will appear right here. If I make it right aline, it will appear right here. Fine. If I choose this or this, the content will work accordingly. Let's make this left aline or right aline in the first slide case, because you can see that the product appears left hand side. Obviously, it makes sense to move our text to the right hand side. I can change the vertical position as well. I can make this middle top or towards the end. I can even align my text. Whether I want it to be right aligned, I want it to be center align and so on. But I think, right, Aline works well, because we want the text to be shown only to the blank area of our product page. The background product image. Fine. You can change the color of your content. You can add some text shadow if you want. You can play around the typography of it by just clicking on this. You can play around blur, horizontal, vertical, and all. Or you could reset it back to default settings. Fine if you scroll down in the content part itself. Here we were working around the slides part. Now what other option do we have? We have slider options, one which you can see at the bottom. We have ellipsis option, right? Or the dots, which we can see arrows and dots. Here you have autoplay option. That means it will automatically keep on changing. Or you could have some of this pause on hover. That means whenever my cursor is hovering around that particular slide, the slide wouldn't change. If I click on it or if I to any kind of keyboard activity, then the interaction would be paused. Here you have auto play speed as well. In milliseconds, 5,000 is milliseconds. Here you have an infinite loop. That means it will keep on scrolling even after it has gone through the slide number three. It will again start from scratch, which is from slide number one. Here you have transition, whether you want it to be slide or you want it to be fade. What happens if we have fade? Let's just see here. You would find that it will show up a fade animation. You can see right here. And you can even change the speed of this particular transition. Now how do you want the content animation to be up, down, left, right, Zoomed in. You can play around between different animation types. Here you can see the animation of the text comes down. This was for the content part. Okay, here initially we had the up, so we can do that. Also, we can play around different navigation types. What we discussed right now was for arrows and dots. Let's see if we have just arrows, then we wouldn't find dots at the bottom. What if we just have dots? Wouldn't find arrows in the left and right directions. But if we have none of the above, then we would manually have to swipe through. If I move my cursor from right to left, then obviously it would change to the next slide. If I move my cursor, if I press and hold my mouse button and I move my cursor from left to right, then it will select the previous slide like this. I hope you get the point. Now let's just make use of arrows or just do whatever works for you. Even if you would like to keep this as arrows and dots, you can do that. Going to the style tab, you'll find different options. Whether you want to play around the content with, whether you want to add padding around it. Whether you want to align position of this. If I make this as horizontal position center, right, you can find different things. What happens for the slide? You can see right here, you can see that the content position changes. Here you have vertical position. Also you can align the text and so on. Here in the title part, you can change the typography color of the text, play around The spacing description could be same for button which we have right here. Here you can change between different button sizes. Again, add some typography to your button. You can play around the border width. If you want the border to be a little bit fatter, you can move the cursor towards right. If you want the border to be thin, then you can move the cursor towards left cursor, or I should say slider if you would like to add rounded buttons. You can increase the border radius. You can change the effects on normal and how you can play between different navigation. Do you want the arrows to be inside this or outside this? If you keep this outside, then you can change the arrow of the colors. Since the background of the container is white, we can make the arrows as black. I just reset this and I'll place my arrows inside. Right here you also can see pagination which is the three dots right here. Do you want this to be inside or outside? Play around them. You can change the sizing of it. You can choose the color of your pagination. The dots at the bottom, you can play around the different colors that you can set for active. The first two slides which are not showing up on our screen are not active state. They are like in an gray shade. The one which is being active, which is slide number three, is in a dark black dot. That's what we have right here in the style tab. Going to the advanced tab again, you would find the same things which you have seen earlier. All I'm not going to go in depth slides also, I'm not going to waste my time doing the same things which we have done for slide one. For slide 2.3 also, I hope get the point. All right. Now, what else we need to cover? Okay, this was for the slides element. Let's add one more element which is the gallery element. I'll add another flex box with a downward direction. I'm going to add gallery. Let me search here. You have basic gallery and a simple gallery. I think both of the functionalities are pretty similar. There is not much difference in it now. Basically the gallery element allows you to showcase all your work. Now, this could come in handy if you're building a portfolio website, a personal portfolio website, or just trying to showcase all your client work. The projects works whatever you have done so far or you're just trying to display all the images. Let's just say that you are a photographer and you're displaying all the images. Wildlife photography images or beautiful scenery images, You can just select multiple images from the media library or you could upload them or insert the image from a different URL. Or you could add and create video playlist and audio playlist and other things like that. Here I can just hold my command key, form systems and control key for window systems. And I can select multiple images and you would find multiple images which are selected right here at the bottom so I can create a new gallery. I can even reverse the order. If I want, I can rearrange them, I can add caption to each and every image. If I want, I can insert them as a gallery. Here you would find that we have four columns in one single row. Fine, I can play around with it here. You will find the type to be single multiple. What happens if I choose this multiple? Then obviously we are not going to see all the images right here. Let's just first see all the settings that we have for the single type here. You can order them by default or random here, you can enable or disable the load. Lazy load basically means that the images won't be loaded from the very first go. That means whenever you click on your website, the images won't be loaded first. Once you scroll down and once you reach to the part where the images should be shown, then the loading will happen. That way, the performance of the website could increase to some extent. That's what you have in lazy load. You can play around the different layout settings. Here it is set to grid. What happens in justified? Here you'll see the justified format, that means the image size is perfectly shown what happens in machinery. In machinery, you'll also find the same thing because the dimensions of all the images are pretty same. But if you have few images which are having some other height and width dimensions, then it will adjust the height and width of rows and columns appropriately. Here you can set the number of columns. I can drop it down to two so that it will enlarge the photos appropriately. Here you can add some spacing between different elements. If I move my slide towards right, you'll find that the spacing increases. It happens a bit slower, but you can just play around with it. You can add some link to this. You could add a light box. What happens if I'll add lightbox? Let me just select this. Yes. If I click or hover around any of the images, you can find that the image turns a bit darker. If I click on it, the image will expand and you can view the entire image properly. That's what light box actually means. Let me just click on the Element so that we can see different settings. You can play around the different image resolution that you have. Here you have an overlay. What overlay do you want to have? Some a background. Do you want to add some title to each and every image? If I hover, do you see any title? No. If I make this as a title, we can add here, you'll find the title of the image itself. This is taking up the name which we have set to our image. Add a description, the caption, or the alt text also fine. Let's just make this as non going to the style type you'll find normal. And obviously you can add a border width. You can add border radius. You can change the color of the border. You can add animation. If I hover around my cursor to the image, it will zoom in. It might zoom out. It can move left, It can move right. It can move up, or it could move down. I hope you get the point. You can even change the animation duration. You can change the overlay tiles if you want to add some blend mode, which we have discussed just right now in the slides element, Something similar could be done right here. You can change between different, how animations fine. You can set the animation overlay duration. You can choose the content style, whether you want the text to appear at center left. A line, right? A line at the middle or at the top or bottom. Do you want some padding for your content? Do you want to add some animation for your text? Do you want to give a sequence animation or so These are the things that you have for your gallery element. Now what happens if I choose up here, I can add multiple galleries. The gallery that we created right now for those four people right inside this gallery, I have this title for the gallery. Let me just give this something like people behind the company. All right. I can select different images. Now, this gallery, the gallery that we used earlier for the single type was different. It was saved just for the single type. For multiple, you'll need to create another gallery right here. You'll need to select again, a bunch of different images. I'll create a gallery. I can insert that right here, and here you'll find all the people. I can add multiple galleries right here. Here I have the filter to click, and only that gallery would be shown up. Let's say you're a photographer. You photos of models, you click photos of wildlife and wild animals. You click photos of cars and products. Here you can and create different galleries. You can add filters by using the multiple type. All right. You can order them however you want. I think all the things after that is pretty same which we have discussed for the single type. Also, I hope we get the point about using the gallery element. Let's see what we can do with the media carousal. Let's add horizontal flex box. We'll add an element called as media causal. If I drag and drop it right here, it's working similar to slides. The only difference is here it is working with our image gallery. For each and every item you choose, one image or a video. Here I can add three product images for each and every slide. For the first slide, this product image would be displayed for the second one. Here I can go to second. I can choose this one. For the third one, I can select this option, I'll just cancel out the other two items that I had. Now I can change the skin of this, whether I want it to be carousal, whether I want to have a show an effect slide show will basically show all the photos or gallery elements that I have at the bottom. And the main, which is being focused right now will be displayed in full width. Then you have cover flow, which will be like this, a three D format, which is pretty cool in my opinion. Here you can set how many slides per view should be shown, how many slides to scroll, what should be the height and width of this. But if you click on the additional options right here in the content part, you would find arrows which you have right here. You can change around the different pagination elements. You can make this as Autoplay and a bunch of different things which we have seen earlier in the slides or slides element. Also, by going to the style tab, I can click on the navigation. And I can change the color of the arrows to be black for navigation. Here you'll find arrows. The sizing of this is 20 pixels. I can change the color to black so that it will be visible, fine, change the pagination, Whether I want it to be inside or outside. I can play around different things which we have already discussed earlier. I hope you get the point and you have a great grasp and foundation about the three elements. 28. Reviews Element - Supercharge your Business Website with This!: Right. Now, let us see how we can make use of the reviews element. Now, the reviews element is bit similar to what we have seen for the testimonial element. The only difference the reviews element would have is it will include ratings. The stars element that you can see right here. It will have a link to different social icons right here, just below this product, Carrousal media. Carousal. I'm going to add a new section. I will give the Flexbox layout to be horizontal right inside this container. I would like to add reviews. Let's just drag and drop it right here. Now you would find that this review appears. Now what we can do, just select your container and make sure that the content is justified. Center items are also aligned in center. Coming back to the part where we have the reviews here, you'll find that the reviews, let me just change this to full width. Also, I would like to increase the height. I'm going to increase the height to about 50 so that you'll see that this has aligned center here. We have three ellipses here, you have the review and there are arrow icons at the left and the right side. Now, you might not find it very clearly at the first glance simply because the background color is grey. Let's try to change the color of the background. I can add one background overlay with some gradient. Let's try to see how it looks. If I make use of this color, I think it would just do its job. All right, for the second color. Yeah, let's keep this as red or maybe drop it down to let's change the color to somewhat like purple. All right. This is the color scheme that we'll go ahead with. Fine, here you'll find two on this one and this one. Now if I click on the Reviews, you'll find we have three reviews currently. Each and every review shows up the avatar, their name, the username, and the social media profile username, along with the icon of social media profile that it is connected to. Now, when can this come in handy as compared to the testimonial element that we have seen earlier? This review looks like very gimmick or fake. If you include this kind of an element inside your website to showcase that you have trust around your customers, then you can actually link social media profiles to their profiles. Essentially, it's going to give a vibe off that all these reviews are genuine and these are not fake reviews. If I click on any of the items, let's click on item one here. Let's select this person's image. This will display right here. And this person's name is John Doe. I can change the title. This title will represent their username of any of the social media profile that you're linking it to. Here, just below the image, you'll find the icon. That means whether you want to link to Instagram or Facebook or Linked in, it depends on what kind of social media profile they are very active on. You should leave their link. You can leave the link of their profile right here. Here you have the title. Now this title could be different, it could be CEO of the company, the company name and different kinds of things, you can add rating. If I add something like let's just say four, then you'll see automatically it shows up total five stars out of which they have given you four stars. If I give something like six, it's not going to display because the maximum value that it holds are five. Now you can even add in decimal values, basically, if you say something like 2.12 0.22 0.3 it's not going to cover the entire star. Once you reach the 2.5 mark, it will cover half of the star. You can see right here we have 2.5 stars. I would just keep this as 4.5 We have 4.5 I can change the review text as well right now. I'll just keep whatever it is. I can change the name, the image for review two and review three. Also, I can change the name to Emily Plant. Right here. We can change this to Instagram, because I believe most of the female population are active on Instagram. Now here you would find that the color of the icon is black. It's solid, it's not blue, unlike what we saw with Twitter. What can we do about this? You'll find that this particular icon, Instagram, is following one, a trend. It is only showing up this icon where there is the entire wig icon is having black border and the black lines, you cannot change the color. If you would manually would like to upload any of the icons, then you can click on this upload and you can browse the file where it is located in your system. Fine coming back to this part, item three. I can change this to Will Smith. I'll change the image to the sky. Now I will link Facebook. All right, here we are. Made use of three social media profiles, Facebook, Twitter, and Instagram. All right. I'm not going to change the review, I'll just keep it, whatever it says. I can make more items. Also, I can add more items. If I want, I can make duplicate of it. I could remove some of them. Here I have an option to choose how many slides should be displayed for view. So what if I have multiple reviews? Let's say instead of three, I have about six of them. Fine. Only two reviews should be shown. For the first slide here you can see we have two reviews. If I scroll here, you'll find another set of two, then another two. This one was there in the second slide also. It's repeating for the third slide. Let's keep on doing that kind of a thing. Right here you have the slides per view. Here you have slides to scroll. How many slides can you see? 12,345.6 So here you can drop it down to maybe, let's just say three. What will happen in that case? Only a few reviews will be shown correctly. These money reviews will be shown if you play around the slides to scroll. Let's make it to default here. You can set the width of each and every review if you would like to give this small review section, then you can set the width to 80% Here you have additional options as well, which we have seen in the media carousal as well, which is to enable or disable the arrow icon right here at the left and right side here. For the Pg nation, you can either use dots or fraction or progress bar. Progress bar will appear at top. Fine, for this review, I'll use the pagination. I can set the transition duration. You can see it's moving pretty fast with about 500 milliseconds. Here you have an option to play in automatically. You can set the autoplay speed. You can make this infinite loop or just toggle this off so that it won't keep on changing the reviews over and over again. If I move my cursor on any of the reviews, you'll find that it pauses. If I click, then it will make the same action. That means it will pause here. You can set the image. The image we're talking about is the avatar or the person's image. Here you have lazy load which we have discussed. I'm not going to go again, coming to the style section. You can change the spacing between the elements right here, if you just have one review in one slide, then this won't make sense to move the slider. Right here, you have spacing between different reviews. You can change the background color for each and every review. What happens? Let me show you. If I change the color, you'll see that it applies the color background settings to the review itself. All right, here you can add border if you want. What happens if I add something like, let's just say 2345? Even if I add five, you wouldn't see it because the color is very similar to what we have as the default background color. But if I change the border color to something like let's say black, then now you can see that the border appears to be very fat. If we drop it down to maybe, let's just say two, this would look good. Or maybe even three. I can add border radius if I want the testimonials or reviews to appear in rounded edges format and I can do it, I can add padding so that my content doesn't stick with the border. What happens if I just increase the padding size? This is what you'll get. Fine, you can undo by just adding zero to all the elements. But if you do this, what will happen? You'll just see that the content touches the border of your reviews. We could increase the to maybe, let's just say about 15 or so. 15 would look good here. You can set the background color just for the header. If I set color, you'll see that the background color will be applied to only that part, where you have the person's name, their position, or the profile URL, the social media icon, and their avatar. All right, fine. If I add gap, you'll find that the gap between the content and the header increases. Let's just undo this so that it resets back to the default settings again for the background color also, I'll reset this. We have a separator. You can see right here you have the separator. You can change the color of the separator if you want, but we'll keep the default one. And you could even change the size of the separator. If you want this to be fat, you can make it fat. If you want to be narrow, you can make it narrow. Find now this part, the John Doe and the Emily Blunt. You'll find that the content is appearing bit down than the header. That means there is some gap between the header and the content as compared to this review. Particularly because this review has the ratings right, it has given some stars, but not for this review. If you add ratings for all the reviews, you'll find that the content will be adjusted automatically, right? If we go in the text part of the style section, you can change the typography, you can change the color of the name, the person name, the title. The Review Review, right here is what is written in Laura Epsom text. Then you have image. Now for the image, you can increase or maybe decrease the size of the person here. If I make this around 70, this is how it would look. Light. Or maybe I think 40 to 50 will work just fine. Here you have gap between the name and the photo. Here you have the border radius. If you make this border radius to be zero, you have pointy edges compared to rounded edges. If you want to make this as rounded edges circle or rounded edges square shape, then you can play around with the border D just to about fit this settings which has ten pixels of border radius. If I go to, I can make this official or custom if I click on custom. Now for this I can change the color. You can see for Twitter, also the icon color changes to red. For Instagram changes to red, Ideally Instagram color is set to, I guess, purple or so, the purple or violet. Here you would find that settings applied for Facebook. Also, if I reset this, you'll find that official color is being chosen. You can increase or decrease the size of the social icons. Right here you have the rating. Which rating do you want? Font awesome, or Unicode. What happens with Unicode? You can see that there is different kind of stars layout. If I make this as unmarked, as solid settings. If I make this outline, you'll find a different setting, right? I choose fontosum and outline. There would be some minor difference between the rating that you will see. All right, here you have solid and you have outline. You can play around the sizing of these ratings. You could even add some spacing, if you want, between each and every individual stars. You could change the color of the stars from yellow to red, orange, anything that you would like, you could even change the color of the unmarked stars. Fine. Lastly, we have navigation. Now this navigation refers to the arrows that we have in the left and right directions and the bottom pagination dots that we have. I could maybe play around with the sizing of the arrows, change the color of it so that it would be visible. You can see right here, white is the most visible. Instead of having a light grey color, I could play around with different sizes of pagination. I can even change the color of it, just the color for the active slides. All those things could be done right here by going to the advanced section. You can play around with the margin and padding, you can align the content and so on and so forth. I hope you guys got the point about when and how to make use of the reviews element. Of the element or pro plug in. 29. Table of Contents for your Blog Posts: Guys, this lecture is going to be very helpful for those who are going to bill block post on their website. As you can see right here on my Wikipedia page. And I've searched for web press article in Wikipedia for any of the searches that you make, whether it be web press element or anything that you search, you'll definitely find table of contents on the left side. That is what we are going to use in our web press website. Table of contents is one element offered by the element or pro plug in. Which will allow the users who visit your block post to jump between different headings and different portions of your block post to skip the content that they find that is unnecessary for their research or just for their information collection purpose. If I just click here on Plugins, you'll find that automatically, the content jumps right to the part where I would like to read. Here I have the topic name, or I should say subtopic, and the content itself. The way this entire page is set up, that the title is tres, it is set in H, One tag here you have the content, which is ideally in the P or span tag. Then you have the overview divide. Overview, below which you have a separator. Basically, this means that it's an H two tag which defines the subtopics. Now inside the subtopics, you might have even more subtopics like themes, plug ins and mobile applications, accessibility and so on. These are your H three tags. All right. This is the hierarchy that any of block post follows, replicated the same. I've copied the entire content from this page and created a new block post right here. You'll find that I have title as address. Here I have some content. You can see that this is your title tag. This is two. You can see you can just change between different tags if you would like to give and if you would like to give any of the words paragraph, you can just highlight them and click on this button right here. This one is H three tag, right? I haven't added any separator between the H two tag and the content. If you would like to give, then you can do that. Here you have again this as H three. If you scroll down, you'll find that other H two tags are also there. This is the kind of post that we have and will work around this. Let's go back to our address dashboard. Now inside this, we are going to go under Templates and Theme Builder. Now once we click right here, we'll go to the single post and we'll import some of the pre made templates for the single post design. Here you'll find a bunch of different options. I would like to continue with this part. I'm just going to insert this, fine, although you can see it is showing up some pesto sauce recipe block post. But by default, it's not going to bring up any default content. It is basically going to apply the style settings for your existing block post. I hope you get the point. Let's insert them inside our page. Here you would find the latest block post was press, so that is what it has selected right here in this particular container. Ideally have some featured image for your block post that would appear as the background image for this container. Here you have two containers for this flex box. Here you have the title, Some description or I would say some post information that when exactly was this post published? Below that, you would find the details or excerpt. Currently, I haven't given any except for this block post, you wouldn't find anything right here. Then you have the content itself. You can see there are multiple different things. 23 tags. Once you scroll down, you'll find an option to share this and add comments if you would like to give. Just at the bottomost part of this block page, you'll find related block post or block post published by the same author. Correct. These are the things that you'll ideally find for now. I'm not going to change or maybe edit the style settings of the title and post information and all because that's not the purpose of creating this lecture. I'll just quickly add a new element and I'll search for table of contents, which I'll just simply drag and drop it right here in this container. Now as soon as I drop, you'll find that we have this H two tag overview. We have these many tags. Now it is also taking up the below, this part where this actually is part of our block page, but it is not part of our content, right? How can we remove them from our table of contents? Because this is not part of the Wordpress title content. These are the things which are part of the content, right, from overview to history. These are the part of our content. Inside Overview overview, you'll have themes, plug ins, mobile applications. You can see there is some, a hierarchy already forming up here. Let's click on the Table of Contents Element right here in the Editing Paint section under Content Tab, You can change the title to something like go to content, you can change. Whatever you would like to give this title. As here, the H tamal tag for this header is set to H four. Now obviously, if you change this to H three, it will be assumed that this is part of your block post content, but it is not that case. Basically, the table of contents is helping the users to navigate between different topics or subtopics that your block post content actually has. All right, we'll just keep the H tamal tag for this to be H four. Now below this, you'll find include and exclude. Under that you'll find anchors by tags. Now, what does it mean? Here you'll find 234h6 and all the different kinds of tags. Now, there are multiple, multiple, multiple tags. As we discussed previously, H 2.3 tags simply showcase what this entire subtopic is all about. Under the sub, what are the subsections? I would say subsections are like H three, and subtopics are H two. And the title itself is your H one tag. Fine, coming to the H456 are generally used for those which are not that important, but you would just like to add styling so that it comes across like this is also part of your block post. In my opinion, this H four tag should not be included. We can just remove this. We can even remove Hi because it is not part of block post contents. We'll just keep h two and h three. You also have exclude. That means you include H two and S three tag contents inside the table of contents element. You exclude some of the things. Now once I go here, below this, you'll find CSS selectors in a comma separated list. Now what does it mean? Now if you've worked around cascading style sheets, or you have some idea about overall web development using custom code like HTML, CSS, Javascript, then you must have learned about CSS selectors and ID selectors, right? There are a bunch of different selectors. I have covered this entire concept in my web development course. You can check out if you want. The purpose behind using CSS selectors is that, as I said, we do not want to include this section within our table of contents because this is not part of our block post. We can just click on this part. We can go to Advanced section right here. We can give CSS class to this CSS class classes just to simplify. What does class and ID mean? One element could have a class, class could be used for multiple elements classes. Let's just say that you are an engineering student, all right, And you are pursuing computer science. Now, your university has about three batches for computer science. Computer science, engineering students, those are three classes. When people say computer science, then there is possibility that all three classes students can raise their hands and say that, yeah, we are part of computer science. But if I say particularly that role number, let's say four raise your hand, then there would be only one student who will raise their hand, correct? That's ID. Id is unique. It will be only associated to one element, to one section, to one container. Like that, classes could be used for multiple elements. Whenever you call that class, when you apply some styling settings to it, the settings will be applied for all the elements which are associated with that class. If I give one element an ID, when I call that ID in CSS and I give some styling to it, only those style settings will be applied to that element, which will be associated with that ID. Because ID is only associated with one element because each and every element will have a unique ID. Whereas it is not the same case with classes. I hope we get the point here. We're going to add class something like related post. Let me give this as related post. All right, I could give this as a camel case also, but I would just going to keep this as related posts. Fine, I'll copy this related post. I'll copy this. I'll go back to this part, the table of contents and inside exclude, I'll put a dot first. Whenever you're using your class selector, you always put dot first whenever you're giving the name, whenever you're associating or whenever you are first defining an element with a class name. You do not have to put dot. But when you're calling that class, when you want to apply some settings to that class element, you put dot first and then you paste class name. Now you can see that this part is not included anymore. Fine. Although I can still see the operating system scores and the C plus mastery block post right here. Let's also check out what can we do about it, because these two are different sections. Here you can see if I click on Structure, Wait a second. Here we have related recipes. Okay, this is one section that we need to associate the class. We need to give the class related post to this container. What I did, I just gave the class to the heading. Which is not something that I had to do. What I'm going to do, I'll go to Heading, this is what I've selected. I'll scroll down in the advanced section. If I scroll down, I have CSS classes. I'm just going to do command X or control X depending on the operating system that you're using. I'll click on Related Recipes section. I'll click on Advanced. I'll paste the class right here. I'll go back to my table of contents exclude the same thing. And this now you can see that this part is not showing up. I hope you get the point about excluding some of the content from your table of contents element. All right, let's go back to include now you also have one container. That means this control confines the table of contents to heading elements under a specific container. What does it mean? We'll look into this later on, but we have a marker view as well. What does it mean? Currently you can see all the subtopics are given numbers under these numbers, like this two tag is Overview. Now inside overview, we have sub bullet points 1.11 2131 point 4.1 If I had some other subsections for the second the second subtopic also it would have been 2.12 0.22 point 3.1 I can make use of numbers or bullet points if I have bullet points. This is what I'll see. Now I can change the icon if I want or if I would like to make use of no icons. I can just click on none. If I want to change the icon, I can just click on the icon and it will show up the icon library. I can just search for arrows. Okay, let's just search for arrows, or I could just go on all icons and I could search for a bullet. Okay, bullet is not something that we have, let's search for forward. What basically I'm looking for is these two triangle icons, or what can you say these are called as your triangular brackets, right? We are looking for triangular brackets. What are the recommended bullet points? You can see a circle with a outline, an outline circle with a dot or square dot, right or square bullet point, I should say. If you scroll in different icons, you'll find many different options. I'm going to search for angle, this is exactly what I was looking for. Let me just make use of this here. You'll find that this kind of icon is applied to the entire table of contents list. Fine. If I go to the additional options, what can we see? Do you want to add wordrapow? None of my two or three tags have a really long text, right? Even if I try to add something, let me try to do it. But I don't think I would be able to, because here we do not have option to edit the text. We have option to play around the styling and advanced section of it. But if I would like to change the content, I'll have to go back to my theme Customize press editor. What essentially word wrap basically mean is that if your subtopic name is really long, the character limit or the word limit is very large. Ideally, it will adjust itself that the entire text length will appear in two or three lines. But if you toggle the word wrap, then it will mean it will just take up the entire line. And then the words which will be cut out, they will be given with ellipsis. That is what wrap basically mean. You have minimized box option, What does it say? Basically, if you have toggled this on, you can collapse and you can expand. This is the feature that you can get with minimized box option. Now you can even change the icon for this collapse and expand option. You can choose between different icons by clicking on the icon library. Or if you would like to upload your own custom SG. You can do it for expand, you can choose between different icons. But for now I'll just keep what it is showing up here. It will also show that this minimized version should be visible on tablet portrait. So what does it mean if I have desktop mode? I can see this collapse and expand. If I go to tablet screen, I'll again see this. But if I go to mobile device, I'll also see this part. Let's see what happens if I have desktop or smaller. That means this part will be already closed If I'm on my mobile device. If I'm on my tablet also, it will be closed. But if I go back to my desktop mode, it will be opened up. That's what basically this minimized on is. All right, I hope you get the point here. I'll just send it back to the default, which is tablet portrait. Now here I have the hierarchical view. What does it mean? Very simple. Under overview, we have themes, plug ins and mobile applications, right? These are part of this overview topic. If I toggle this off, it will appear that they are separate sections, they are not part of it. I'll have to click this so that people can understand that. Okay, in mobile applications are part of the overview section. You also have collapse of items. If I do this, I can click on this overview. And when someone clicks on overview, they will be given options to choose, themes, plug ins, and so on. Also, keep this part fine, coming to the style part. Okay, what else do we have for content? First, let me make sure that we are not. Not skipping any of the things. If I go in the exclude, again, you have the same thing marker and the icon that you would like to give. If I go to the style part, what I can do, I can change the box background color or add border color to the entire box. I can add the loader color. What happens if I add loader color? That means whenever you expand, let's say you have a bunch of different subsections, The block post is really long and there are multiple table of contents right here in this element itself over there, it might take some time to load the contents. Over there you can add a color if you would like to give. I can add a border it, I can add border radius. But let's try and do it. Try and do it only then we'll come to know whether it even looks good or not. For now, I'll add border color. Okay. This is background color. We want a lighter background color. I'll keep this as something like a dark gray shade. I think this would look good. Fine. We'll also change the color of the text. Done very here. I can add border color to something like, let's say black. All right. I have lodo color. Let's give this to something like bright yellow. Or I'm going to select a bright yellow color. Fine. I'll copy the text code. Fine, I can add border with. If I add border with, you can see that border around my entire table of contents increases and it becomes fatter. I can add border radius to make the edges rounded. All right, I think about 25 pixels looks good. In this case, I can add padding around the content. I can adjust the height of it. I can give box shadow I want, but I'm not going to give any box shadows. I'll reset it back. We can style of a header as well. Let's try to give the same yellow color to this heading. Fine, I can change around this to something like this color. I think this would look good. Fine. Now for the text color, what I'll do, I'll select white as my text, but it is not appearing that nice. We'll have to drop down our yellow color to bit darker. Only then it would be visible. And it makes sense right here. I can just play around to the part where I get the exact color that would go well with this. All right. So I think this color looks good, fine. Now, for the typography, I can set this to poppins. I can just search for poppins. I can even change the font size if I want, but I'm just going to keep it as it is. I can change the icon color here for each and every icon color that we have. We can change this to white, This icon that we have for collapse and expand. We can change this to white. Also, we can add separator width. That means how fat we want our separator to be. I'm just going to keep this as three pixels. Now, coming to the list part and a style section, you'll find that we'll work around these things here. You can adjust the height, that typography, we can set this to poppins. Here, you can change the color of the text. You can add indentation. Indentation is the space between this part. You'll find this right here. Whenever you are adding some topics which are part of one big topic, you definitely leave some space at the start. That's called a indentation. You can adjust the indentation, you'll find that the unit is set to EM, you can change this to pixels that it would be better to understand, right? You can adjust it. If you bring this to zero, then it's obviously as if you are not including this kind of a thing, which is called a hierarchical view, right? You can just go back, increase indentation or maybe even set this to default fine. But for now I would just like to keep this as 15 pixels because that looks good to me. Now for the text color, I'll change this to white so that it is visible. I can even add underline for each and every one. If I want, I can change the hover effect. If I hover around any of these, I can change the hover color. I can change the active. That means whenever that particular element is active, I can change its color to yellow. Whatever is set to this part, we can change it to that. Let's do that. For this, I'll click on Header. I'll copy the hex code. I'll go to List here inside Hover. Also, I'll use the same color for active. Also I'll use the same color. Here we have selected overview. That means currently overview is set. We are viewing the overview. If I hover around any of the other, you'll find that underline also appears and the color of the font also changes. Correct. Here you have marker, what does it mean? Let's try to find that out. Marker is basically the color of your bullet point icons. Correct. We can even set this to white. All right, And you can change the sizing of it. You can make this appear a little bit large so that it is visible. 12 pixels would be sufficient, in my opinion. All right, coming to the advanced section, you can align the items and you can make this. Sticky also. Now, how making this sticky would help us. Let's see. First, I'll publish this. And as soon as I click on Publish, you'll see that it prompts us that, would you like to give some condition? If I click on Ad, you can see I can include the table of contents for all my singular pages and post. But do I want to apply the same settings for my home page that we built using the element or pro? No, I just want to showcase this particular table of contents element for our block post. I'll just select block post. Now I can even add some other category that do I want to apply the settings for all the block post or if you select block post, I can do it. If I would like to exclude inside all the blockposts, I just want to exclude from one block post. But I would like to apply the table of contents element for all the other block post. Let's say I have 100 block posts out of which I would like to use this table of contents element in 99 of those block posts. But only one of that blockpost should not have the table of content. What would you do? Would you just go on and keep on typing the title of 99 block post? No, you can just make use of this all instead of include, you can add a condition and make this exclude. Now in the exclude, you can go to post and search for that particular block post. I can search for blog, let's say one. I do not want to include this part in log one. All right. I can add other conditions also, but for now I'll just keep it as it is. When cyclicon save, we can preview the changes. Cyclicon preview changes. Once I scroll down, you'll find that our table of contents is in its fixed position, right? It is in its fixed position here. If I want this table of contents to be sticky, which basically means that even if I scroll down, my Table of Contents should move along with my cursor. That means it should stick to its part. And doesn't matter if I scroll down or scroll up, it should be with me, like how it is there. Right here you can see the left pane itself. The left pane entirely is dedicated for this. No matter how much I scroll down, the table of contents element will be here instead of what we can see right here, which is at its fixed position. What changes we need to make? First of all, we'll need to adjust the width of this such that even if I make this as sticky, it doesn't overlap with our content. Otherwise, content wouldn't be visible. Correct. Over here, what are we going to do? We'll just select on this. We'll change the width of this to fit to about this part. Fine, publish this. After doing so, we'll click on this element table of contents. We'll go to Advanced Section. In the Advanced section, we'll have to scroll down to the part of Motion Effects right here. Under Motion Effects, you would find sticky. You want to make this as sticky at the top or at the bottom where exactly it should be sticky for all the devices or just for the desktop. Obviously, we just want it for desktop. Otherwise, the width of the tablet and mobile is not sufficient to fit the content and the Table of contents element. We're just going to cross out tablet device and we'll just keep this for desktop. If I scroll down, you'll find that the table of contents stick right here. All right, this is the thing that you can do right here. Now you can adjust the width also such that it can take up this much space. Because you know that table of contents is only occupying this much space, right? I can expand the width, fine. Here is what you will get. Let's publish this. Let's see if we can see the reflected changes. Now you can see, currently I'm on my plug ins. Plug ins is highlighted. If I scroll down to mobile applications, you'll see mobile applications, other features, accessibility, all the things will be highlighted. All right. I can even expand and collapse. This part is also collapsing. If we go to the next one, I can just directly click and it will scroll down to that particular part and so on. If I view some other block post like block one, then we wouldn't find this kind of table of contents. You can see there is no table of contents. What if I go to some other block post? Let's say I'm on my Fema block post? Let's see if we can see the table of contents. Here we can see the table of contents. Now the only reason why we cannot find any headings because the body of our block post doesn't have any H2h3 tanks and so on. Correct. That's the reason why you do not get to see any table of contents over here. You can work around your, um, as I said, this part, the right section container will have your featured image as the background. You can just remove them by just clicking on the flex box right here, the container. By going to the style section, you'll find the featured image. You can remove them if you publish this. Now the default settings of this template has been changed now. Even if I view the Figma block post, you wouldn't find a featured image in the background of the stable of content element. 30. Lottie - Make your Website Look Professional & Over the Top!: All right. Now I'm not quite sure if you've ever heard of the Lottie element while building your website using the element or plug in. But Lottie essentially is an open source animation file format which is based on the Javascript Object Notation. Json is something similar to Javascript, but it is a simplified version of it. Because of this, they have a really small size, they are faster to load than traditional animation file types like GIFs and all those. Now Lottie has also one more advantage as compared to GIF, which is that they can be interactive website, you make your website very appealing to the users. You can make it very interactive. And it's going to scale up your website design skills to the next level. That's why we will learn about it. Now, right here, you'll see that I'm on my Contactors page. Right here in the Contactors page. I would like to add a hero section for this page by just choosing the flex box. I'll select the two container layout. In the left side I will add the text. And on the right side I will add one Lottie animation. First, let me just add Lottie right here once I drag and drop it. Right here. By the way, this is a pro element. All right, so this is a default animation that you can see right here in the content tab. You'll find Lottie and Settings. In Lottie you'll find that either you can use your media file or external URL. Now what does it mean? And where exactly could you get these Lottie files? First, let's see how we can upload our media file here in Lottie Files.com This is not an open source, but I would say it's a marketplace where you can buy or download Lottie animations for completely free of cost, depending on which kind of animation and plan you are on. Right now I'm using the free version and I've just searched for play. Now there are a bunch of different animations going around and these are completely free, although you might find pro at the bottom. But these are just free to use. If you find any of them which are paid, they will have a circle, yellow in color with a crown icon inside it. I would say that's the pay animation. But right now, let's say I want to make use of this particular animation, right? So I can just click over here and you can change between different colors that you have. You can Erit animation. You can erit the background color. But we just want transparent background so that it's easy for us to embed in any of the section inside our website. So I can just click on Edit Animation. And I can open this in Creator, or I can open this in Lote Editor. So let me just open this in Lottie editor. And once I do this, it might take some time to load up. And here I can change the colors by just clicking all colors, you'll find that it's working around the shades of orange, right? If I change the color by just clicking right here, I can choose green or any other color. Whichever I am comfortable working around with, I can just select this green color and it will form the different kinds of green colors. You can see towards the end of the animation, the green color is at a much transparent state. Whereas when it starts off with the pulse effect, it is very dark. This is what you have. You also have the icon inside the play button. Now, this image, I'm not quite sure if you can edit this image because this is, it's not an animation here. You could replace the image with whatever you like or you could just download with what you have. I'm just going to save this animation. Once I do this, I'll get an option to save it in my workspace, and I can give any name I would like. Fine, so I'm just going to save this in my first project folder. Now this is the default folder that you will get along with your account. Now as soon as you click and you save it in your workspace, you'll get an option to download and export this in a Lottie Json format. This is what we want, although there are other options as well, like optimized Lottie, Jason, optimized Lott and many other formats like GIF, Webp, Four MOV, the other four formats which you can see right here at the bottom right corner of your screen. Now these are not interactive elements. Now, right here as you can see, I have different animations. Now these animations have some name going around. You cannot just preview them like this. Like how you could preview images or videos and other things. Here you'll have to embed them or while you are exporting, you have to give a name to your animation so that it's easy for you to import them in whichever section you like. For now what I'm going to do is I'll just select this part. And I will click on Select to see whether the correct animation has been pulled out. Yeah, you can see Contact us, animation is pulled out fine. Now, initially you saw that the animation did. For once, right? It is not going around. In loop, you can even adjust the alignment. First of all, you can either make it central line left, a line right Aline, But even if I changed the alignment, you wouldn't find any necessary change simply because it takes up the entire height and width with respect to the Flexbox dimensions. Right, We have two columns. This Flexbox container will have our title for the contact page and this will have the animation. All right, here you can add caption if you want. You can add a caption custom as title. Then whatever title is there for the animation will display right here. If I can just put caption, then I will have to give caption to this. Fine, if I make this custom, I'll have to enter the custom caption to this animation. But for now let's just keep it. None below. You'll find in now link, you can either add a custom ural, that means whenever someone clicks on this animation Lottie animation, they will be redirected to any web page. Fine, now we have covered the part of Lottie. Let's see what we can do with settings. Now settings part, you have different options like trigger in different viewport. First of all, I'll just also add one more flex box just to show that does the alignment even work or not. Here I have this vertical dimension. I'm going to add another Lottie element right of the bat. I'm just going to load, I'm just going to upload the latest animation which was the play button. All right now. Okay? Okay. I'm not quite sure why the image isn't popping out the play button. Like how we saw right here. What? We'll just replace this with some other animation. Let's see what we can get here. I think this looks good, but this animation size is way too large. But still, if we can try and align this left. Yeah, you can see it does align to the left. It does align to the right, and it does align to the center. You have different options to align your animation by going to the setting spart. What can you see? You can see the viewpoort settings. That means trigger this animation whenever you are in that particular viewport. Now what does viewpoort mean? Here you can see a viewport is a polygon viewing region in computer graphics. In computer graphics theory, there are two regions, like notions of relevance when rendering some objects to an image. Not necessarily complicated explanation, but what essentially basically means that the display size is depending on what kind of device you're using. Let's just say we are on the testtop screen and I'm particularly using the Macbook Air M, one the dimensions of my monitor, my laptop screen, in terms of width and height, whatever it is, it will take up the entire width and the animation will start whenever I'm viewing this on my Viewpoort screen. Now the viewport just below the trigger point, you'll find that the viewport, it's set from 0% 200% That means if I scroll my screen, it doesn't matter, my animation will go on. My animation will be 0-100% But what if I add that? Viewpoort animation should run from 50% to 65% Let's say for this part here, you can see in the rightmost part of our web page, any of the website, wherever you go, or even in your folders where you have multiple file items, you'll always find the scroll bar right here, correct. Now, the scroll bar is allowing you to actually scroll and view your entire viewport, right? Your entire viewport. So if I customize this lottie animation such that the viewport should start from somewhere about 50% and the animation should end at 65% Now if I scroll down, you'll find that I've covered about this part, but still the scroll bar isn't covering the 50% of the entire viewport. If I scroll down again, you can see that about 49% of the screen has been covered right here. You can see right here, that's why animation has started. If I scroll down again, you know what? I'll just keep this in loop so that the animation will keep on running. Now, once I go past the 65% of my viewport, the animation wouldn't run. You'll find that the animation has been stopped. If I scroll up again, you'll find that the animation is running again. That's what basically in this viewport actually mean. But the best practice is to keep on running it. Or if you would like to just the animation at a particular viewport scroll, then you can do it. The other triggers that we have are click, whenever I click on the element, only then the animation will start, correct. That is, click. And how many times do you want to run this animation right here? Loop is going to go in infinite. If I just change this to three, then it will animate three times in loop. After that it will stop. This is the second time it is running. Let's wait till it runs the third time. After the third time, you'll find that the animation won't run. This is the third time that it is running. Let's see if it runs the next time or not. Here, you'll find that the animation stops after running it three times. Right here, you can even change it. If you just leave it as blank, it will keep on running infinitely. Followed by you have other triggers on hover. Whenever you move your cursor inside the Lote element, then the animation will start. And once you hover out of the element still the animation will go on. You have just triggered the starting point, correct? It will start when you move your cursor inside the element. Here you have on hover out. Whenever you click on On as the trigger. You also have on hover out. That means what if you move your cursor outside the lote element. Then in that case you can either reverse the animation or you could pause it when I started the animation. First, let me just start the animation by moving my cursor. Now if I move my cursor out, you can see animation has been paused. What if I do reverse? I'll bring my cursor in. Now if I move my cursor out, you can see the animation is being reversed. This is how it follows. The other triggers that we have are scroll. Now what happens with scroll? First I'll just add one more flex box layout with downward direction. I'll add one more lot element for this one. This one which we saw. I'll go to settings. We don't want scroll for this, we'll just keep on over fine, reverse is what we want. All right. Now for the other section, the other flex box that we have. I'll add lottie element. Just drag and drop it right here. I'll upload a media file. Continue. I have a wheel animation also. Let's try to bring that. I think this might be the one. Let's see. Yeah, this is the Wheel one, but I'm not quite sure why the image isn't showing up. I'll have to go back to my dashboard of Lottie files. And once I go here, I'll need to check this animation right here. I have this. I'm going to change the title of this to something like Wheel so that it is easy to understand and reuse it. Okay, here we are. Seeing that there's some dot right here. I'm not quite sure if the image would be exported. Let's try and download this again. I'm going to go back. I'll upload a new file and I can just take this box that do not show this message again. Fine. I'll just select Wheel. Okay, the animation is not showing up. Not quite sure. Let's try to find out some other animation. I've just selected wheel initially, we had this incorrect. Let's try and find out what happens with this animation. All right, if we make use of this particular animation or maybe even this animation. All right, what happens then? Let's see. I'll just click on this. I'll click on Save two Work space Up, save it. And it will open a new tab. Now in the new tab, change the name of the animation to something like wheel two. All right, and we'll download the Json file. Let's download this. I'm going to upload a new Json file. Hopefully this should work. Yeah, here you can see that the wheel animation is showing up properly. The viewport setting to be scroll. I want the animation to last forever. That means it should be infinite In look more whenever you trigger scroll. What happens if you scroll up? You can see that the wheel will turn anti clockwise. If I scroll down, we spins in clockwise direction. That's what basically it means. Now if you change the viewport settings to, let's just say that you start at about 65 to 70% and you end at 100% Then even if you go down, if you scroll down till the part you don't cover about 67% of the viewport, you won't find the animation of the wheel spinning. If you scroll past the 67% of your viewport, only then the animation will trigger fine. But let's just keep zero to 100% Now here you have effects relative to viewport, or you want it with respect to the entire page. This is with respect to the entire page and not your viewpoint. That means viewpoint could be how many elements you add right from this part to the end part. But the page will be only from where your header ends and from where your footer starts, that's your page. All right, here, if I scroll down further where I can see my footer, then the animation wouldn't work. That's The entire page thing. Let's bring it back to Viewport. Now you also have start point and endpoint Now, what does it mean? I have also a few other animations using which you'll understand this in a much better way. I'll add another Lottie element. Okay, let me just search for Lottie here. I will upload the first animation which I had used. Is it this one? This one. Let's try and replace with this one. Okay, this is the wheel one, This is the contact one. Let's see this. Nope, not this as well. I had a car animation also. Let me see whether we could use that or not. I'm just going to type in car or I could type in motorcycle, cycle, anything. The only reason why I'm looking for car or any moving object is that I can show that how exactly this part works, the standpoint and the endpoint. All right, here I have this particular animation which I can make use of. I'll go to download, Save to work space. Yes, select this project as my folder. If you would like to add another folder, you will find that it is only available in the pro version. Okay, why did it not open up a new workspace? Let's say it again. Ideally it should open up a new tape from where we can download as a Json file. Fine. Also, it could be possible that we have used up all the free credits that were allocated to us in the free version. I'm not sure. I'll have to find out. Just give me a moment and I'll get back to you guys. Okay, here I am in my dashboard. I can just rename this to. Once it's done, let's download this and I'm going to upload it. I'll select this lot media file and I'll change this. Let's try and use this. Okay. Still I think there might be some problem with Lottie itself because it's not loading up the image. But here you can find the small square box. Are the wheels. The bigger box right here where my cursor is hovering, it's the car itself, and in the background you have the scenery. All right, now I can make the start point, let's say 50, and I can make this as 100. Now what happens? You'll see that this black bear appears right here. So it starts after the 50% of the animation right here. If I click on this animation here, you have the big tower going around, right? So that's the 50% of the animation length right here. You would find that in the background you have big skyscraper right from there itself, the animation will start and it will end at 100% You could even drop it down that the endpoint should be at 80% of the animation length. So these are the things that you can work around right now. It might not make sense to you all since we just cannot see all the scenery And the object that we have here, you can play around the speed of your animation, whether you want it to be running in one x or 1.5 or two x speed, that will just speed up the animation. Here you have two X and you can see how fast the animation animation rules. If I make this as 1.5 it will run something like this. But let's just keep it as one. You could even drop it down so that the animation is a bit slower. What else do we have? We can reverse this. Now, what does we have seen exactly right here. Whenever we hover our cursor out of the animation, the animation will be reverse. Something similar can be done. Here you have rendering option whether you want it to be G or canvas. If I change this to canvas, then let's see what happens. Now, Canvas is not particularly a good option to do, because Wig is the one which will contain all your necessary files, your images, and all the different kinds of things. It will also require less loading time compared to canvas. Fine, here you have Leasyload option. We will unselect this coming back to this part, now inside style, you can play around with the width and set the maximum width for your lot. Here you can change whether you would like to give some transparency to this or not. If I add something like 0.19 then you'll find that the animation is very transparent. It is not very opaque. The more you move your slider towards right, the more your animation would be visible here. You can even add CSS filters, just like how you could do with an image. All right here, I can just undo this so that everything is visible here. You can even add hover effect and you can change the transition duration. In the advanced section, you can play around the margin, padding settings and many different kinds of things. 31. Code Highlight: All right, now as you can see, I'm here on my blog post page. Let's just say that for some reason you are building a blog related to coding and you would like to add code snippets in your blog post. In that case just to give an example like how in Javat point website you can find that all these codes are in a snippet format and they have the syntax highlighted. Something similar could be achieved in our we press block post as well. By just going back to our website, I'll click on a new flex box. I'll choose this direction here. I will add a new element called as Code highlight. Let me just drag and rop it right here. Now, once I do this, you can select between different languages. Right here, the code which I have just to compare two strings, okay, this is in Java format. This is also in Java. What I can do, I can just copy this code. I can go back here, instead of Java script, I can select Java. I paste the code. Once I paste this, you'll find that all these lines have, you know, highlight highlighted in different colors. You can find the class appears in blue. Public static void appears in blue. The value that we provide to the variables S one and S two are in green. Then the main syntax, the string data values and the print LN functions are also in red. The comments are in gray format. This is the syntax that you have, right? And this is the kind of highlight that it already pastes, right? The highlight that it already applies. Now here you'll find a toggle to switch between showing the line numbers or not. So if I toggle this off, you wouldn't find any line numbers like how you cannot find any line numbers. Correct. But if you'd like to add, you can add it here. You have copy to clipboard. That means, let's just say, here I am here, Can I find an option to copy to the clipboard? Unlike geeks, for geeks, let me just go back. Instead of Java t point, let me just search for GFT, which geeks for geeks, I have the Javascript code right here. Now here you'll find a button to copy this to our clipboard. If I copy, you can see code has been copied, but it was not the same case in Java T Point here, you can add this. If I bring my cursor inside this particular code snippet, I can find the option to copy the code. All right, now let's also make a duplicate of this instead of Java. I will make this as Javascript. The highlight would be a bit different. Let me also copy the code for Javascript. I'll copy and I'll paste the code for Javascript. That way you'll find some different syntax correct. Now, for this part where you have the copy to clipboard, you have line numbers. You'll also highlight some particular lines. You have 13 hyphen six. Now what does it mean? That means these lines, line number one, line number 3456, they will be highlighted. All right, Let me change this to something else and it's just a placeholder. It is not some default value. If I add something like one, the first line would be highlighted. If I want line number three to be highlighted, I can just add and I can give line number three. If I want line number six to show, I can put coma and line number six. But qualify, I want line numbers 456, all three of them to be highlighted. I can just make four hyphen six from line four to six will be highlighted. All right. I can do the same, something like 325. That means these three lines are where we are creating variables and adding some value to this. All right, so we have highlighted the lines here, you'll find an option to add word wrap. Now, what does word wrap mean? Here you can find that the code has, what do you say, comment, which is taking up the entire width. And we have a scroll bar, horizontal scroll bar. We have to scroll this to find the entire thing. If I toggle this word wrap, you'll find that what do you say? Comment appears in a way that we do not need scroll bar anymore. This is what wrap actually means. You can disable this so that you'll get your scroll bar here. You can select between different themes that you have. Currently it is set to solid theme. If we change it to dark theme, you'll have brown background color and here you'll have text in white. If we choose this, Okada, this is what you'll see. We have solarized light. Tomorrow we have twilight. Now, tomorrow is something similar to what we can see right here in Geeks Ja script code snippet here. You can adjust the height, can adjust the font size. If I drop down my height to something around 115 pixels, you'll also find vertical scroll bar. You'll have to place your mouse cursor inside the code snippet and then you'll have to use your scroll wheel to scroll the code fine. I can undo this so that it takes a sufficient height here, you can increase or decrease the font size. Going to the style tab, you do not have style, you have advanced. Now, advanced obviously is going to show the same things which we can see for all the other elements. 32. Paypal & Stripe Integration - Collect Payments Easily!: Guys, now we're going to learn how we can accept payments using the Paypal and Stripe button. Now these two buttons, let me just search this and show you all. Here we have two buttons, Paypal and Stripe. These two buttons allows us as the website owners, to collect payments, whether it is to just collect donations or to set up your payment gateway for selling your products or services. Or it could be offering a subscription without having the need to understand and use Vo Commerce. Right here I'm on my block page. And I'll add a new section and a new flex box will be in vertical direction, right? Let's add the Paypal button. First here, I'll just drag and drop it down. Now under content, you'll find first the pricing and payments. Under this, you'll find Paypal account. You just enter your Paypal account, whether it is your personal or business Paypal. You'll just enter the e mail using which you use your Paypal. Obviously, if you're a Paypal user, you must know that account e mail should be here. In the transaction type, you have a bunch of different options like checkout, donation, subscription. Let's first see about checkout. Let's say I'm trying to sell an ebook. I can just call the item name to be book. Then I have SKU, which stands for Stock Keeping Unit, Which basically means that, let's just say you're selling a physical product in your inventory, you have about 50 items. If you put 50 over here, that means the maximum selling that can happen is for 50 times. All right, if you're selling a digital product and you want to sell this for just a limited number of users, then too, you can set this as SKU and you can give the number fine. You can set the price. It's up to you, whatever you want to keep. Let's just say I'm keeping $20 and this is in USD. You can change the currency to Australian dollar, Euros and so on. You can change the quantity. Now this quantity is basically whenever someone clicks on the Paypal button. How many items should be added in their card or when they purchase? Do you want the users to buy two or three items whenever they click on the buy button or is it just one quantity? We'll just keep this as one. And then you have a shipping price. You can add this. Let's say I'm adding $5 of shipping. I am adding tax of about 5% 5% of $20 would be $1.01 plus five which is the shipping price, will be $6 Now that $6 would be added to the selling price of item that is 2020, plus six would be $26 at the checkout. All right, here in the button part, you would find that you can change the text. Let's say instead of buy, now you would like to keep something like purchase. All right, then you can set the alignment for the button. Here it is left a line. I can change this to center, or I could write a line, or I can justify it such that it will take up the entire width. Fine. Here I can change the logo or icon of Paypal to something else by just clicking on it and ensuring that we upload our own. Or we can choose the ones which Fontawesome offers. But right now I'll just keep it as it is. I can click on this to remove the icon, or I could upload my own. Here in icon position, I can see that the papal icon appears before the text. If I change this to after text, see this papal icon appears after the text. Let's just keep back to before text. And then you have icon spacing. If you move the slider, you'll see that there is some gap between your icon and your text. Fine, here you have button ID using which you can track how many units are sold and so on. Then you have additional options. Now this is important, important in the sense that let's say once a user completes the payment process and that transaction was successful, where do you want to redirect the user to? You can add a thank you page in your website or a dynamic page where you can add a dynamic tag using which they will be shown an invoice for their purchase. You can add that right now. I'll just use cite URL, which is the home page. Here you'll find that. Open the Paypal in new tab. Whenever someone clicks on it, the Paypal will open in a new account. Here you have sandbox also, which we'll see in just a moment. But let me just cover what does custom messages mean, if I toggle this. Let's just say there is some error. You'll see an error occurred. But if the Paypal account is not connected from the seller point of view, it will be displayed. No payment method connected, contact seller. Now here we have sandbox. What does it mean if I switch this on? You'll find sandbox e mail account. And it says that this is the address given to you by Paypal. When you set up a sandbox with your developer account, you can use the sandbox to test your purchase flow. Sandbox is just a word to explain that you're working on a test environment in Paypal itself. When you log in, you have an option to go to developer.paypal.com Once you log in, you can go to testing tools under Sandbox accounts. You will get default two accounts here. I have these three. If I want to create a new account, I'll just click on this button and you'll find that I can create a personal account or a business account. And I can choose the region. If I put this as United States of America, I can just accept the payments in US dollars. Right once I create the account, you can see right here, business account would be created. You can just click on the account right here, the link which is there. And you need to copy the e mail and come back to your part and paste the sandbox e mail account in this placeholder. Fine. Now since we are using a zip file of the element or pro, and we are not actually relying on an element or subscription, this sandbox wouldn't work. What I would do, I will just enter my own personal Paypal account to see if the payment works or not. Just give me a moment till I enter my Paypal details. Now I'm going to publish. Once I publish, I'll just preview the changes. Now if I scroll down and if I click on the purchase button, you'll find that we will be redirected to a new tab where we saw that there was some payment gateway going around. But we are locked out of the system, log out again. And I'll show you all how it works here. As you can see in the card, we are supposed to pay $26 $20 is for the item selling price. $5 is for the shipping and $1 for tax total is 26. Right. Let's just cancel this out. You can use your sandbox. Coming to the style section, you can change the typography. You can change the text shadow. You can add some background colors if you want. You can add border radius. You could even add some other messages. The messages that you have, the error message and the Paypal not connected. You can change the color of it and typography also fine. Something similar can be done for the stripe button as well. I'll just search for stripe button, I'll just place it below this, and here you would find the product name again, I'll just go back to my Paypal button to show that other transaction types. Here we have check out. First, we looked into the checkout transaction type, which means you're selling at a service for the one time fee. Then you have donation. Now once you click on donation, what happens? You can choose the item name here. It would be donation, obviously. Now since this is donation, you're not selling anything. You are just accepting payments and there is not any stock left in your inventory. You can just give SQ something like N one, just two, just to associate donation. With this, then you have donation amount. Whether you want to collect fixed amounts of donation or you want it to be any amount. Whether you want it to be flexible for users to pay anything that they can. This is what you can select, then you have a subscription. Once you click on it, you can choose the item name. Let's say basic tier, right? We looked into the three tiers of pricing in the pricing table. Lecture right here. You can just give the name to your service. You can set the SQ to something like basic tier. And you can set the price. Also, let's say 50 bucks is what they will pay on a monthly basis. Or you could set it daily, weekly, or yearly. And there is auto renewal function as well. When someone clicks and purchases and they enter their Paypal details, they will be charged on a monthly, daily, or weekly basis. If you want this to be auto renewal off, then I don't think there is any point of making this a subscription. The only difference would be that once you make this a subscription and you don't have auto renewal feature, it basically means that you will be stopping the access to the service that your user will have access to so that they will have to make the payment. Again, if you make this as auto renewal basically means that the user doesn't have to enter the Paypal details over and over again. Fine. These are few things in your Paypal button coming to this stripe button, if you go here, you can set the product name. Let's give this something like book again, book. I can set the currency to other. Here I have a bunch of different options. Earlier we did not see INR which is Indian rupees for Paypal, but now for Stripe we do have this option. Then you have product price. You can set it something again, $20 You can set the quantity. You can set the shipping price. The tax rate. But for tax rate you'll have to first connect your stripe account and inside the stripe account you'll have access to products. For that particular product, you need to set the tax rates. All right. I'll show you how we can make use of the sandbox or I should say testing API of stripe. This will work with this particular file of our Elementor Pro without having the need to subscribe for the elementor Pro subscription. Coming to the button part here, you can change the button to something like, let's say purchase. I can set the alignment again, left, right, center, justified. Okay, I can just make the center align. I can change the icon. I can set if I want the icon to display or before the text, I can choose the icon spacing here. In the additional options, I can choose the redirection after successful payment. Here I can set the URL. Here we have open Stripe in a new tab, custom messages. Here you have set up stripe test environment. If I toggle this, you'll see that first we'll have to go to integration settings. If I hover around this, you'll see it will open a new link in our Wordpress dashboard right here under Wordpress Dashboard, you'll find that we are under Element or Settings. Under Settings, we have selected integrations. Now once you've selected integrations, just scroll down to the part where you find Stripe and under test secret key, you need to paste your API key. So I'll just go back to my Stripe dashboard. You need to first create an account. It doesn't take a lot of time to create your account. You don't have to enter a bunch of your personal details and wait for authorize and start your account. You can just get started with it and you just need to go to your dashboard settings. Once you go there, you'll find API key stab. Just click over there and reveal your test key. And copy and paste it right here under this test secret key. Once you do that, just click on valid test API. Here you can just publish this. Now once you publish this, what will happen? Let's see if I click on block two. Once I scroll down, I can click on this stripe checkout and you can see $20 of book is what we can see. This is under test mode, fine. Here you can enter your E mail card details card holder and so on. Fine, we'll just go back and yeah, basically this was about your stripe purchase. The only difference is in stripe and Paypal is that Paypal allows you to select other options as well like donation subscription or one time purchase. But for Stripe you can just sell one product. If you want to sell I think membership or anything like that. You'll have to change the settings inside your stripe account itself. Because right here as you can see under your pricing and payments, you'll have to first set up your products and then select the tax rates and so on. Currently, Element or Pro doesn't allow you as the website designer and developer to add the functionality of donation and subscription for the stripe buttons, But you can do so for the Paypal. 33. Hotspot - Have you heard about this before?: All right, now let me show you one cool feature which is called as hotspot. So what does it mean? So let's say that I have an image, preferably of a map or a product. And for that, let's say on a map you have multiple locations and you're just trying to display that where your offices or your shops are located. Right? So you can add hotspots so that whenever someone clicks on that hot spot or hover around it, then they would find the address of it. Let me just show you an example of it. I can just choose one image. I have this really cool photo of gaming PC set up right here. I can add few hot spots upon. However, we can see whether this product is a gaming chair. This is a gaming mouse. We have pillows, we have keyboard. We have a computer that is four at the very bottom, or poster of it, I can see. Then you have external monitors, You have controller at the back. You have the Funko Pops and the soundproof foams in the background. Right. You can add hotspot here and the content you would find image, you can choose the size of the image. You can set the alignment left, right, center, and so on. But for now it's just taking up the entire size of the container under hot spot. You could add one hot spot or multiple ones. I can just add multiple hotspots. But you wouldn't be able to see right now. Why? Because I think the color and the way it is fixed is not visible to us. We'll also look into how we can do it. Currently, I've added two hot spots, which is not sufficient for us. We need 1231 for our gaming chair, one for pillows, third for the monitor, fourth for the keyboard, fifth for the mouse, six for what do you say the keyboard mouse pad. Then you have for the desktop PC, that would be 12345678, Funko pops nine. For the form, we have ten, Let's add ten of them. 4,567,899.10 All right, I can add animation, but you wouldn't be able to find the animation over here. What we'll need to do, we'll just go to style. We'll go to hot spot. Under hot spot, you can see that no color has been associated. We'll have to choose one bright color so that it is visible. I'm going to select something like white. Would white be visible? I think so. Or we could set this to something like orange. Or we can add another image also. First, let's just stick with this image and see whether this works or not. First we have the white hot spot. All right. We can use this one or I could add something like an orange one would Orange visible. Yeah. What happens if we choose another color? I'm just trying to play around because the image itself has a lot of colors because it has an RGB strip in the background. There are a lot of colors in the image itself. So it becomes really difficult to add hot spot because then it wouldn't be very easy to identify from the user's perspective. Let's try to give this as a white hot spot. Now once I do this, I can just go to Image here under Hot Spot, we have multiple ones. If I click on any one of the hot spot here, I can add label. I can change the position of it. I can add a link as well. Which means if I add label something like let's just say Gaming chair. You can see right here I have the label which is Gaming Chair. All right, now I can add a link so that whenever someone clicks on it, they will be redirected to external link or internal link. I can add icon for this hotspot. Currently this hot spot doesn't have any icon, but by just the icon or uploading our own, you could set custom size of this hot spot. You can change the height, you can change the width, or you could reset it back by just toggling off. You can add content over here. There's a difference between the label and the content here. If I have this as the gaming chair, I can add something like I can see the brand name. I can just add brand name, Secret Lab, Gaming chair, white color. This is the product description. Now what happens if we go to the style part? All right, here you have tool tip also, which will just cover in a moment. If I go to the style tab under Hot Spot, I can change different animations. I can change different animations for hotspot. If someone hovers on it, do you want to display the text of the hotspot or do you want it to be clickable so you can choose between different options? All right, let me just go to tool tip and see Trigger is on click currently. If I set this to hover, you'll find that. If I hover on the gaming chair, you'll find that Secret Lab gaming chair White. Color is text is being shown up right below our hot spot. Here you have the effect you can set the position of the Tooltip, whether you want to display the text of the content at the top of your label, or at the bottom, or in the right, or in the left. You can set it however you want. You can set the animation, whether you want it to be fade in, fade out, You want it to fade, grow. If I said this, you can see it. It appears like this. If it's fade by direction, this is how it will come up. If it's slide by direction, you can see it slides up and slides down. You can set the animation duration as well. If I go to the style under hot spot, I can the size of our label, the hot spot. I can select the minimum width and minimum height for our hot spot. It has some height. All right. You can add box color also. What does it mean if I add some box color? You can see right here, if I have gaming chair with some box color, you'll find that this is our hot spot, this is our label. If I hover, that is when you'll see the content fine. You can set the padding, you can adjust the border radius for this. You could even add box shadow for now. We don't want any box color, We'll just clear this out. We'll also set the size to whatever it is right now. We'll go to here. You can change the image settings to something like I would like to drop down the transparency or I would like to drop down where it is its image CSS filters. I would like to drop down the saturation to zero so that I would get black and white image. Now over here, it would be easy to change the color of the hot spot and the text itself. Right under tool tip, you can select the text color. If I set this to something like red, let's see what happens. The content color, text has been changed to red. I can set the typography. I can even change the alignment, and I can even add some box fine, and I can change the color of the box. Here you'll find that there is some box for our content. This is what we want for the rest of the items. Let's try and do it. I'll go here, back again. In the content for this hot spot, the one which we have for the gaming chair, I'll just remove the label, because we want just this button to appear, right? This pulsating effect. Well, we'll change the position by just clicking on position instead of content. And I can set the offset, whether I want it to be towards the right of the image or towards the left. We want to display this right above the gaming chair, right, or just on the gaming chair. Fine. This is where we can set the vertical orientation. Whether we want it to be top or bottom, we can set this. But right now I would just like to keep this as top. I can select the animation. I want the animation of this hot spot to be of soft beat, expand overlay, or none. That will happen for the circle that you have right here. Fine, let me just go back to style. I'll change the hot spot color to something like red, or let's just say orange for that matter. Orange would look good. I think here we can add something like a bright orange. Okay, let me go here. I'll select bright orange. Fine. Back here under hot spot, we'll select the item. We'll go on position an animation would be set to expand, fine. Or we even said this to soft beat, correct. You have sequenced animation which means that you could, let's say you have multiple animations going around for your hot spot. There is one, there's two, there's three. Therefore, you can set this in clockwise direction. First this animation will pop up, then this hot spot will pop up. Then over here the hot spot will pop up and so on. That's what sequence animation is. Coming back to the Tooltip part here, you can set the trigger on or click here you have the animation for the content, for this hot spot button over here, we can select the other things. Also if we want now for the content that we have, you can see that it's appearing outside our image. We don't want that to happen. What can we do in that case? Just drop down the size the circle hotspot wouldn't be visible. This is the size of this. Coming to the part where we want to change the text. For this text where it is appearing somewhat little outside the hot spot, we'll need to go under Content Tooltip and change the position instead of top. We can change this to right here. It will appear something like this. Fine, let me just make a duplicate of the hot spot here. I have this one other one also, but I'll change the position. The other hot spot would appear just right here at the monitor part. Fine, I will change the content to something like External monitor, fine. External monitor just for this. For this we'll see the gaming chair and so on. I can make this tool tip text to appear at the top if I want by just going to the position. And I can set inside Tooltip, I can set this to top. Here is how it will display the text. You can do this for all the other items. Also, you can just play around and see what works best for you. This essentially can come in handy when you are actually trying to showcase different features of your product. Or just trying to showcase the different offices and different location of your shops across the entire world. 34. Do wonders with Elementor AI: Guys, the video that you all have been waiting for is finally here. Let's see how we can make use of the element or I feature. Now, element or I is currently in the beta mode at this point of time when I'm recording this video, which basically means that not all the features will work. You can see right here we have the beta, which basically means that not all the features will be working perfectly fine. Some of it might work fine and some of it might not just work. Nevertheless, elementor has just released it for public, and they are charging money for this. But we'll see, and we'll also see at the end that whether even if it's worth it or not, because I know there are so many free AI tools out there in the market. First of all, chat GPT has dominated the AI market. Then we have Google's powered, Microsoft's Bing. And I think Google is also coming up with Mini, right? There are so many I elements and tools out there. Now, how does AI of elementor stand out compared to the other AI tools? So first and foremost element or AI, helps in generating text, enabling us to add animations to our elements, adding custom CSS, and then editing images and changing the background radient layouts. First let's click on the Text editor right here. What I'll do is I'll just give specific prompts to element or AI, so that it generates somebody text for our website. Now we could do the same thing with ChagBT, but what elementor says, it basically understands what your website is all about. If you've just done added few elements in your website, then it understands the layout and it understands what the content needs. That way it will give a specific output for your needs. Let's go to Prost elementor.com and right here you would find a bunch of different categories. Here you have specific prompts for images, text code, and to build containers. Let's go to Text part right here. If I scroll down, I'll see a part which says make a description with three paragraphs. Now when I click on Copy prompt, I can just go back here and under this text editor, I can just click on Write It With AI. Now once I click here, you'll find that it might take some time. And by the way, this feature will only be accessible to those who have connect their Google account or created their account on Elementor, and they've connected with the website. And you'll be given free access to Element, or AI, for a limited period of time. Once that time period runs out, you'll have to pay for the subscription fee. Right here. I'll just pace the prompt. Now, if you notice here, you'll see that the prompt says, Make a decision for, in the square brackets, you have the niche that the website is built for and that contains three paragraphs. So let's go back here. I'll change this to, since you know that the reason why we built this website was to promote an application, a payment gateway application. We'll make a description for payment gateway application for just like we can say like when more so that people can pay internationally so that people can make payments internationally and domestically without having or I could say very easily. All right. And that contains only one paragraph, right? Let's generate the text. It might take some time depending on the kind of content that you want it to generate. Let's wait. And by the way, all the features that you will use will consume few credits. I'm not quite sure that how many credits would be allocated for the free version, but you can just see right here, you'll find that it shows up a really big paragraph. We can just click on this to make it shorter just because we want the content to fit for our hero section. Still it is way too long. Let me just click it again to make it shorter. All right, and here we have a payment gateway is a secure and fast solution for Bo Domestic and all these kinds of things. It's perfect choice for individuals. If we can skip this line, I think till this point it's good. Let's copy. Instead of copying and pasting, we can just delete the last line. And we can just click on Us Text so that it will be applied right here. All right, that is how the text part works. Let's publish this website. Coming to the buttons right here. Below this text, we have two buttons, right? Let's see if we have any AI features For the button, I'll just search code. Under code, I'll search for button. All right, let me just search for button. Let's go to. Page. Here you have this one. Buttons on, rotates and text moves on how we can make use of this. Let's copy this prompt. I'll go back to my website. Now, since this Learn More button doesn't have an icon, we'll just click over here, icon library. And we can choose any one of them. Since this is learn more, we can just click on arrow. We require an arrow, fine. I think this arrow icon would look good. Let's insert this right here. Fine, this looks good. Now to use this prompt, we'll have to go to Advanced. Scroll down to the part of custom CSS right here. You would find Edit with AI. Here we will paste the prompt. Fine, let's generate the code for this. Now it will generate a CSS code, which we will use it. We can change few things. If you are expert in CSS, fine. Here we have this thing. We can just click on Insert. Once we insert this, let's see here. You can see this is how cool our button looks. Let's publish this. All right, what other thing can we do with this? Here we have image and we have containers part. Right, Let's go down and we'll try to manipulate our images and change the background effect for this section. For this section, as you can see, we have a background overlay. There is white color, and there is green color. All right. Now this color scheme goes in a gradient part. It has a linear gradient, I think, let me just select this section here. I can go to style. Here you can see the location for the first is 35% and the second is 100% Let's try to change this. What can we do in this case? We can just search for three ingredient fine. What essentially you'll find is there are three colors and they will be animated in the background. Let's copy the prompt. We'll go here under Advanced. Under Advanced first we'll select custom CSS Edit with AI. Make sure you are selected the container, the background container, the flex box layout, and paste the prompt. Let's enderate the CSS code within a matter of few seconds. We can just generate the entire CSS code. Now you can find that it has been using some color by default, we can change it. What color I have actually selected is this. Let me just select this color. I'll paste it right here. Okay, I will just select this part. I'll paste it. This is my second color. I'll paste this also, the third color. Fine. Let's copy. We'll paste it right here. Now if I published this, you would find it is making use of the green colors. We can go to the style part, We can toggle this off. You would find that this is how the entire background works. Because we had the gradient style, it was overlapping with the custom CSS. That's why the animation and the gradient three radian color was not being that effective. But now you can see, this is cool to see. Fine, let's go back here. Other things can be built, we can play around the images. Also, I have this, I could I could change this image to something else. But let me just scroll down or yeah, something around this part where I have this guy's image. All right, I'll just replace this guy's image with this image where there is some background. And we'll try to remove the background for this image. Under Choose image or besides this choose image. We have Erit with AI here. I'm going to select this and remove Background. Okay, I'll just click on it. Although there is a website called This Removed Dog, where you can just simply upload any of our images and the background will be removed. It gives us pretty accurate result. It is taking some time and you can see it is very accurate, I would say, simply because the background for the image that we used was plain and it had some solid background color. I'm not quite sure if there would have been a few more images or objects in the background how well it would have performed. But for now, let's just try to use this image. Let's see if it works. Obviously, it is going to use this image in this section. This is how section looks like. All right, for the images part, we could even change it to something else If I have an image something like this. Let me just bring up a new image, the product image. Let's try to make use of the product image. Right here. Fine. Here I have this image. I can just choose this image. I can change the product itself. I could add variations. I can describe what variation or change I want in the product. I could say that the image is of hair. Care. And so the image image contains product images of hair conditioner soaps. We would like to replace these products. Again, it is not showing up many variations, I would say in terms of variations of the image. It's not working that great because I know and other tools like mid journey also very at a beta stage. Obviously we cannot expect wonders from element. Or let's leave this and we could replace this back with what we had used earlier, which is the sky. Fine, what are we left with? Let's try to see how we can generate a new container here. Instead of clicking on the plus where we have to build the entire container and entire section from scratch or imputing a new template. Let's try to generate a new section using AI Here, I could just click on that AI button and it is asking us to enter few suggested prompts. Now I want you to be very specific about your prompts for now. I just written down the entire prompt and I've divided my prompts in terms of what layout, what kind of color scheme I want to follow, what kind of typography I want to follow, what kind of images I would like, what kind of CTA actions and CTA elements I want, what kind of animations I would like, what kind of brand I want to showcase to my visitors. All these kinds of things I've actually written down already. You can just take help of Cha GPT and come up with a prompt that help us building prompts for Element or AI to create a new container. Let's just say a product company, fine that you're building a hero section, that's what you can enter. I'll just paste the entire prompt, and I will click on Generate. Let's see what kind of container it shows up, because I think design is very visual. You cannot explain it in terms of words. That's why products like Dvd and Figma exist. And they have collaborative features so that people can work collaboratively instead of typing in and explaining what kind of work you expect from each other. Here you can see it is showing up very, very basic stuff. There are two containers. The one has the entire text. In terms of text, I have no doubt it will excel because St GBD itself and the GBT model itself, it is very great in terms of text, but in terms of images and in terms of the animation and layout, it is not, it's not providing any accurate results. We could just delete this part or what the better way would be to import any of the premate templates either from theme forest or making use of the elementor pro templates. I hope you guys enjoyed this lecture. There are many other things that element could improve in terms of AI. Let's see if in future they could improve and roll out the proper version of element. Or I for public. 35. That's a Wrap - Ending Notes: Guys. Now before we end this course, I would just like to discuss a few of the things that we might have missed. Right here, I'm on my Wortress dashboard and under Elementor we have something called As Tools. When we go right here, you'll find under general tabs that there is something called a safe mode. Now this can come in handy when, let's just say that you're using a few of the plug ins, or maybe you have imported a theme from theme for us or any of the theme marketplaces and your website breaks in order to debug the problems. You could just enable the safe mode using which you'll identify which particular plug in or what exactly is causing your website to break, and then you can debug. So that's one important aspect to using safe mode. Then coming to the version control part, here you can roll back to any of the previous versions of element or by just selecting any of the versions and clicking on the reinstall button. All right, then here you have the maintenance mode. Now let's just say that once you upload or transfer this website from your local system to your hosting provider, then then you decide, let's just say that you want to update your website or a few of the web pages, then it wouldn't be a good experience that the visitors in your website and in that particular moment you're parallel updating the website. Then in that case, what you can do, you can just select the maintenance mode in something called as maintenance. Or coming soon, coming soon could come in handy when you're actually included a web page in your menu bar itself or navigation bar, or in your header. I would say that page itself is not live completely like in my website. Here I have. Let me just show you what I mean by that. Here I have something called as Blocks page. If I go right here, you'll find that there is one coming soon page because I haven't published any of the blocks. Something like that you can do by just selecting coming soon. Or you could just toggle to maintenance mode, which basically means that whenever someone visits your URL while you're updating the website, they will see that the website is under maintenance. And you can create the custom theme and design using the element or theme builder. And you can choose the different pages design layout for maintenance or coming soon. If I select maintenance mode, you'll see choose the particular template. Now if you have saved any template for the maintenance mode, that would pop up right here in the menu and you'll be able to select it. All right, here you have an option to import or export any of the kit, which basically means that, let's just say you have downloaded any of the theme element or theme from theme for or any of the theme marketplaces, you can import them. Or if you would like to sell your own theme which you built using the element or Pro elements and you want to start making money as a freelancer and sell your digital assets. Then you can export your entire theme and sell it on any of the marketplaces. All right, here you have users section. You can add multiple users. So if you can see there are multiple user roles like subscriber, contributor, author, editor, administrator. As of now, we are administrator, which means we have access to all the things that we can do in our press website. If you create a new subscriber, it basically means that they will be able to read the post and comment on your blog post. If you've given someone as a contributor role, then they can edit and delete the post. That means, let's just say that you have your company website or you have your own personal portfolio website and you have published blogs, but you have a copywriter with you and you've given them the contributor access so that they can edit the content of your post or maybe even delete it. If it's not up to the mark, you have an option to give someone author access, which basically means that they can publish their post, they can upload files to the media library. Let's just say that instead of an editor where editor basically means they're contributor, let's say you have a copywriter person with you in your team whose job is to just edit your block post and not create and delete and add content to it. You should give them contributor, but if you have a copywriter along with you, you should give them author access so that they can write, publish, upload media and other images, videos, whatever it's appropriate for the block post. Then you have an editor access. With editor access, what the person can do is that they can manage categories inside block post. They can moderate the comments, then they can even it and delete any of the post or a web page. This is another important thing because here you have given them the access of your web page also, which is different than your block post. This becomes like a full time job wherein they have an access to the block post. Now this editor access comes in handy when you're handing over the entire web design project to your client. That though, they don't manipulate the plugins or remove the users or edit the theme itself, which could cause some website breaking issues. It's perfect to give them the editor access and you should keep the administrator access by yourself. So here to give any of your user, let's just say a subscriber access, let's try to give a user name. I'm going to give this something like an editor. I'll write an e mail. Let me just include any of the e mail. So here I have the e mail. I can write the first name, last name, and here I can change the password if I like. Let me just put something like a very simple password and I can just enable or disable this notification bar. Since this is my own e mail ID. I know that I've been given the editor access, so I'll just untak this. And here I can choose the different role. Let me just give this as a subscriber role and I will add a new user. All right. Now, let me just log out and I will log in with a different user, which is the editor access or subscriber access, I should say. So here you can see I've logged in using the Editor Access. Right here you can see Editor Access. So in my dashboard itself, I just have only one option, profile collapse menu, And I can go to dashboard. All right, so if I go to a press website, I can select any of the block post. And here I just have access to read and add comments to my block post, which is very similar to any of the user who don't have any of the access to your website. They can even do the same, They can read the block post and they can leave comments inside your post. But just the difference is that whenever someone is leaving any comment, they need to login to your website. So that's what you have done by giving someone as a subscriber access. All right. So I hope you guys get the point and congratulations. Hereby we end this entire course. Seriously. Did you know that only 10% of the students make it past the first module? This means that you are literally one of the top students who have ever taken this course. And there are only two things for you to do now. First one is to take action. Today, I know it's going to sound a little bit cliche, but it's a fact that the journey on 1,000 miles begin with a single step. Start by building a simple website. It doesn't matter if you can't do everything today, but just get started at least. All right, second, I need your feedback. Take 30 seconds of your time to leave your honest feedback about this course here on the platform. And myself, as well as hundreds of other students, will be in your gratitude. So I'm so excited to see how this course will positively impact the rest of your life. So be sure to keep me posted on your results. I'm looking forward to your success. Take care. Bye bye.