Elementor PRO WordPress Tutorial for Beginners 2026

Key Takeaways

So, if you've been using WordPress for any amount of time, there's a pretty good chance you've heard of Elementor. Elementor is the world's leading WordPress page builder. You can design pages visually, drag and drop everything, and make your website look amazing. Plus, there's no coding needed. And the best part, it's completely free. But here's the thing. While the free version of Elementor is great and everything, the Elementor Pro version, that's where the real magic happens. With Elementor Pro, you lock more of the advanced tools like the theme builder. This allows you to custom build any part of your WordPress websites. Or the pop-up builder. This is where you can insert pop-ups anywhere on your website. Or the mega menu builder. This allows you to make custom mega menus using the Elementor page builder. Plus, there's tons of more powerful widgets that can make your website feel like a professional design studio. So, in this video, I'll walk you through how to completely build your WordPress website step by step using the Elementor Pro version. Now before I begin, let me give you a quick demonstration of Elementor Pro live on one of my websites. So here's the website that we're going to make today in this video. Now this website has Element Pro on it. Now the first thing that I've incorporated here is I added in this uh animated text right here where you can actually have animations on specific text. We've also incorporated a CSS AI with this text right here to give it this really cool 3D effect. Also, this menu up here is completely built with the theme builder. So, we actually built this menu from the ground up. On top of that, we've actually incorporated a really nice mega menu where users can go ahead and click on specific elements. You can incorporate videos here. I just added in some demo contents and just threw in an image with a button. But, of course, you can completely build your own mega menu from scratch. And I'll walk you through how to do that a little bit later. Now, another thing that I'll walk you through is how to use the CSS with AI feature. If I hover over this button right here, you're going to see that it animates to this gradient. And this was all done using the Pro version with CSS and AI. So, I'll walk you through how to do that as well. Another really cool feature is adding in pop-up menus. If I click on this button right here, we have this really sleek pop-up menu. Now, you can incorporate pop-ups on your website any which way you choose, but I like to use pop-ups as a menu. I just feel like it looks really professional and it's just really, you know, really easy on the eye. You can also incorporate popups when they click a button and just ask for, you know, their email or something else or even incorporate a video player right here to promote your products or services. You can also use popups automatically. So, if you just scroll down, you can incorporate pop-ups to just display on your website automatically. Now, scrolling down, there are some other cool things right here. We've incorporated this animated gradient text. So, you can incorporate this throughout your website. Also, if you want to get a little wacky, if I hover over these images, you're going to see that the images tilt and we can use the CSS feature to give specific uh images, animations or effects. Scrolling down, we also have a loop builder. Now, this is basically where you can custom build your blog post or any custom post type where you can custom build it from scratch. In this case, I built my own blog post templates and I built it from scratch. So, I'll walk you through how to build your own custom post templates from scratch using the loop builder. And the last thing that I want to show you all here is how to add in animated gradients using again the AI feature. You can incorporate gradient AI backgrounds using the CSS feature which is in the pro version and I'll walk you through on how to do that. And don't forget, we are going to import this same website for free on your website so you can follow along step by step. Okay, so let's get started. So, I'll walk you through this Elementor Pro tutorial in four simple steps. In step one, we'll get a domain and hosting for your new Elementor Pro website. In step two, we'll install a WordPress theme and import an Elementor templates. In step three, I'll walk you through how to build your website using the Elementor page builder. And in step four, I'll walk you through the Elementor Pro version. I'll walk you through each of the features so you understand how to use all the features with Elementor Pro. Okay, so let's get started. So, let's first go to step one. Now, there is a link in the video description. This will take you to step one and that's to get a domain and hosting for your new website. Okay. Now this is hostinger.com. Now hostinger.com is among the fastest and also the most reliable web hosting in the industry. They're also officially recommended by WordPress as well. Now before I begin, if you speak other various languages here at the top under this little American flag banner, we'll click on English. And here you can switch to your native language. So if you speak Japanese or German or French or Thai, you can select your native language and the entire website will be translated to your native language. So here I'll close this. Now here I'll click on claim deal. Now here we have a few different plans. We have the premium, the business and the cloud startup. Now I personally recommend to go with the business plan. With the business plan you actually get more resources, more storage and you can host more websites. And with the basic plan, you only get SSE storage versus NVMe storage. If you're not sure what that means, just know that NVME storage is four times faster than SSD. So, as a result, your website will be a lot faster if you decide to go on the business plan. And don't worry, you get a free domain, a big discount, and a 30-day money back guarantee for any reason whatsoever. So, once you decide on a plan, you'll then click on choose plan. Okay. Now, the next option you'll select is the period. So right here, if you click on this arrow, you'll see we have 48 months, 24 months, 12 months, and 1 month. I definitely recommend going with 12 months or more. This will actually apply the largest discount available, and you'll still get a free domain if you select more than 12 months. So go ahead and select the period. And on the right side, you'll see that we have this option for a coupon code. And don't worry, I got your back. If we scroll down right here and enter the coupon code Daryl 10, we will save an additional 10% on top of the discount already available. So right here, I'll click on apply. And there we go. So now we have 81% total in discounts and you'll only pay $4 to $3 for the entire year. And that's all you're going to pay. So once you enter in that coupon code, you'll then click on continue. Now the next step is you'll register for a Hostinger account. So right here you'll enter in an email address and also a password. Once you enter in your email and your password, you'll then click on register. So, next we're brought to our checkout page. And here we need to input our information for our billing address. So, I'll go ahead and fill out my information. Okay. Once you enter your billing address, you'll then click on continue. Next, you're brought to your payment method. So, here you can pay with credit card. You can pay with Mastercard or Visa, American Express, or for those of you who have Discover, you can use a Discover card. Also, you can pay with PayPal, Google Pay, Apple Pay, and Alip Pay. So, I'll go ahead and put in my credit card information. Okay. So, once we fill out our credit card information, we'll then click on submit payment. All right. So, after the payment page, it'll actually redirect us to the next page. Okay. So, now we're going to walk through the hostinger wizard. So, who is this website for? Well, it's for me or my business. I'll click on next. Do you want to create or migrate a website? I want to click on create a website and click on next. So next you'll create your login credentials and this is what you're going to use to log into WordPress. So make sure you write this down. You'll put in your email address and then also put in a password for WordPress and then you'll click on next. Next, they're asking us what kind of website we want to build. We can actually click on create a blank site and skip this section. So click on create a blank site. So next you'll enter in the domain for your new website and you get a free domain using our coupon code. So, this is the domain name that people enter in the address bar when they're browsing the internet. So, for example, I'll put darylutorial.com. After we type that in, you'll see this is our free domain and it's currently available. So, you'll go ahead and select your domain here. And then you'll click on next. So, next we're going to register your domain. And this is important because you're claiming ownership of this domain. So, is this personal or this a company? I'll select personal. You'll then select the country of where you registered this domain. So I'll put United States. And then I'll click on next step. And next, you'll enter in your contact details. This is important because this lets people know who actually owns this domain. So if you ever want to sell your domain later or something, they're always going to look at your contact details. So go ahead and put in your first name, your last name, and your contact information. And once you're done, you'll then click on finish registration. So next, you'll go ahead and select a server closest to your target audience. So, if you're in the Americas, you'll go ahead and select United States. If you're in Europe, you'll select Germany. Or if you're in South America, you'll select Brazil. This really isn't that important because you do get free CDNs with Hostinger. And that makes copies of your website and puts it on servers all around the world. So, your website will still be fast regardless of your location. But in my instance, I'll go ahead and pick Arizona right here. And then I'll click on next. So, now Hostinger is going to install WordPress on our new domain. So, just give this maybe like one or two minutes and congratulations. This is now your new WordPress websites. So, this is Hostinger's welcome wizard where they're just saying, "Hey, get started with your websites." And they offer some tutorials and all that cool stuff. Now, before going any further, I first want you all to check your email. So, going over here to my Gmail, you're going to receive very important emails from Hostinger. The first thing that you're going to do is verify your email address. This will make sure that you are a real person and this will actually verify your email with Hostinger. So I'll go ahead and click on verify email. Okay. And this is the Hostinger dashboard and this is where you can access the websites. You can make free business emails and a whole lot more. We'll talk more about the Hostinger dashboard a little bit later. But let's go ahead and go back to the email. There is one more email that we also need to click on and that's from Hostinger as well. Here, click on inbox. You're going to want to verify your domain right here. So verify your email address to use your domain. I'll click on this and then we'll click on verify email. So after you click on that link, our domain information has now been verified by hostinger.com. So let's jump back to our WordPress dashboard. So here you'll see at the top we have this preview domain. Now in order to access your website and get out of preview mode, all you got to do is type in your domain name. So type in darylutorial.com. And this is now your new domain where you see it's live on the internet. Now, if you ever want to log into your WordPress website, there's two ways to do this. You can either do this through the hosting or dashboard. I actually do this quite often cuz I get very lazy and I forget passwords really easily. Alls you'll do is go over here to the website tab and then you'll see your domain and you can just click on WordPress admin and this will log you directly into your website. And just like that, we are now logged into WordPress. And you'll see that we are now using our live domain on the internet. And if I click on visit site right here, you'll go ahead and see a copy of our websites. So next, let me show you all how to log into WordPress using your browser. So here you'll enter in your domain name and then you'll enter WP-admin and this will bring you to the WordPress login screen. So I'll press enter. This is where you're going to enter in your credentials. You'll enter in your email and your password. So just remember these are the credentials that you created when you installed WordPress. So I'll go ahead and click on remember me and then I'll click on login. So that's how you can log in and log out of WordPress so you can work on your website from any location. So next, let's go ahead and talk about the WordPress dashboard. So here you'll go ahead and see a list of your pages. So if I click on all pages right here, you'll see a list of all of your pages. These are just demo pages. So you can just go ahead and delete these pages if you don't want them. Also for post, the same thing for post. These are lists of all of your blog post. And you always get this cool one called Hello World, which is just an introduction to uh you know the blog, but we can go ahead and also trash this. So I'll click on trash. And that's how you can delete pages from your website. So let's go ahead now and jump into the important WordPress options. So let's go ahead and go over here to users and click on profile. So, the first thing you can do is you can go ahead and change the backend color scheme of your websites. So, if you like blue or coffee or midnight, you can go ahead and select one of these colors. I do like midnights. I feel like this is easier on the eye, right? If you scroll down, you'll see this is where you can um change your email. So, if you ever forget your password for WordPress, it'll always be sent to this email. So, make sure you have access to it. We'll go ahead and scroll down. Now, if you ever want to change your password for WordPress, you'll go ahead and click on set new password, and then you'll enter in a new password for WordPress right here. Once you're done with those options, we'll then click on update profile. Next, let's go ahead and go over here to settings, and let's click on general. Now, the first thing is you can give your website a name. So, I'm going to put Daryl's store, right? And then you have a tagline. This is kind of like the tagline of your website. You know how Nike has just do it, right? You can put a tagline if you want or you can leave it blank. You can also upload a site icon and this appears at the top of browsers when people visit your website. And scrolling down, you can always adjust your email address again right here. Now, for those of you who speak various languages, you can actually change the back end of WordPress to your native language. So if you speak Chinese or Russian or Dutch or Spanish, you can go ahead and select the language right here and the entire backend will change to your native language. Once you're done with those options, we'll then scroll to the bottom and then click on save changes. Okay, now there's two more options that I do want to check. Let's go ahead and click on the discussion tab right here. Now, WordPress started off as a blog, so people typically are going to leave comments on your website, but that's really annoying. So, right here, I'll click on allow people to submit comments. This typically will allow people to spam your website with like Viagra pills and all sorts of crazy stuff. So, make sure you uncheck that box, scroll to the bottom, and then click on save changes. And the very last option before we design our website is permal links. So right here I'll click on permal links. Now you always want to change the permal link structure to post name. This is optimal for SEO and it's a lot cleaner. You'll see these other links right here are really messy with the date and all this unnecessary information. Post name is actually optimal for SEO and is the best setting for your permanently structure. So go ahead and select post name. Scroll to the bottom and click on save changes. Okay. Now let's go ahead and click on our dashboard. All right. Congratulations on your new website. Pretty simple, right? Hostinger makes things like stupid proof, as you can tell. So, in this next step, I'm going to walk you through how to install a WordPress theme, and then we're going to import a starter template. Then, I'll walk you through how to use the page builder. We'll talk about the flexbox and other things about the Elementor page builder. With that said, let's go ahead now and jump back to the video. Okay. Now, the next thing we're going to do is we're now going to install a WordPress theme. So, over here under appearance, let's click on themes. Here at the top, I'll click on add theme. And then under search themes, we're going to type in Solace. S O L A C E. So this is the theme that we're going to use. And this comes with more than a 100 demos that you can use to create your website. So right here under install, click on install. Then you'll click on activate. Okay. Now once you install the Solus theme, it'll prompt you to install the plugin to import the starter templates. So right here under this blue button, you'll click on install starter templates. And after that, it'll redirect you to the Solus dashboard. So from here we can go ahead now and import some starter templates. So for starter templates I'll click on start now. Next you'll see this page with me. I'm saying hey how are you? And this is like a little video I made. But uh here at the bottom right I'll click on start now. And here is a list of free starter templates that you can easily import on your website with one click. Now we have a variety of different templates for a variety of different niches. On the left side you can also filter by category. So on the category section on the left side let's click on marketing and we're going to import a template called Pixel Pro. So, we're going to scroll down and you're going to see this template right here called Pixel Pro. If you can't find it, you can just type it in on the search bar. So, under Pixel Pro, let's click on this image. So, here's the website. Now, what's really cool with this WordPress theme is you can actually scroll down and actually take a look at what the theme looks like before you import it. So, you can go through any of our templates. You can check it out and then you can import it directly onto your WordPress website. You can also adjust the color palette. So if you don't want the green, you can change it to like pink or blue or something like that. You can also change the font style as well. But once you adjust your color palette and your font style here, I'll click on the check box. This right here will activate the element page builder. This essentially creates all the content. So you must check this box in order to import the websites. Once you've done that, you'll click on continue. Next, it'll prompt you to enter in your name and your email. You can always choose to opt into our newsletter. If you don't want to, no problem. You can always skip this step. So right here I'll click on skip this step. Now Solace is going to import your starter websites. Now this process might take anywhere between 1 to 3 minutes. All right, the import has been complete and now you can check your website. So right here I'll click on check website and just like that you now have a beautiful website. How about that? So we can scroll down here and make sure everything imported correctly. You'll see we have these images, you know, just general upsells and some content for your website so it's not so like naked. Right here we have just some like upsells about our company. Scrolling down, we, you know, you can obviously replace these images with your, you know, your team or your company. And then we have our frequently asked questions here at the bottom. And then we have a call to action with our footer there at the bottom. Amazing. So, let's go ahead now and talk about how to design this website using the drag and drop page builder. Okay. So, in this part of the video, I'm going to walk you through how to use the Elementor page builder. Now, before we go into the pro version, we obviously need to learn the basics. So, we're going to start on a blank page. I'll walk you through how to create sections, how to use the flexbox, and also how to use the grid layout. So, with that said, let's go ahead now and jump back to the video. So, let me give you all a 10-minute crash course on how to use the Elementor page builder. Now, I recommend starting from a blank page. So, over here under the plus new, let's click on page. And for the title, I'll put practice. At the top right, I'll click on publish and publish. And to turn on Elementor here at the top, let's click on edit with Elementor. And this will turn on the page builder. You might get notifications on your first time. So I'm going to close this. And I'm also going to close the structure box here as well. Also, you might notice that we have this page title. So I want to remove this. So to remove the page title, all you got to do is click on page settings. And then over here, I'll go ahead and click on the page layout and click on element full width. And this will make sure that we're only using the element page builder. All right. Cool. So now you can see that we have the header, the footer, and then we have the main content of our websites. Okay. So let's get started. Now the very first thing that we need to do is create a row. So right here I'll click on plus and here I'll select flexbox. We'll talk more about the flexbox and grid in just a bit but let's just select a two column row for now. Now here at the top left I'll click on add elements and let me explain how this works. So these are basically columns and you can drag and drop elements inside of the columns. So here on the left side you'll see that we have basic elements. These are using the free version elements and here are the pro elements. We will install Elementor Pro in just a bit and come back to this. And then below that, we actually have the general elements. And these are just more free elements you can use on your websites. So to get started with over here, I'm going to go ahead and drop in a heading text. Now, for every element, you're going to see that you have three different tabs on the left side. You have the content tab. This controls the actual content of the element. And then we have style. style changes things like the font color, typography, and also you can add in cool things like text shadow and just other graphic effects. Then we have the advanced tab. This controls things like the margin and the padding and also the position of the element. You'll use this sometimes for some elements, but for most elements, you're probably not going to use the margin and padding. Let's click over here under content. Now, you might also get these little pop-ups right here asking to install plugins. I recommend to just close any of those popups. Now, for example, here we're going to put in Daryl Wilson. Okay. And I'll click on the plus. And then here I will throw in an image. So, right here we have image. Okay. And then I'll click on choose image and select media library. And here we have demo images that were automatically imported when you imported the demo content. So, I'm going to select this one right here and then click on select. Now, for the image resolution, I'm going to select mine at 1536. However, if you adjust this, it can make the image longer or shorter depending on the actual resolution, but I like this right here. This is kind of like, you know, it's a slim fit. Here, I'll click on add elements. Next, I want to take the text editor and just drag and drop. Now, when you see that pink line right there, all you got to do is just drop the elements. And after we drop that in here on the left side, you can see that we can add in, you know, more content to this specific section. And here I'll click on add elements one more time. And then I'll just throw in a button module. So now we have this button. Pretty cool. Now what's really cool is for each element you can rightclick and you can duplicate. And then you can take this element and here we have this pencil icon. You can drag and drop it. So I can put it in this other column right here. And I can do the same thing for this one. Right? Take this, drag and drop it and keep going as you can tell. Now you can also go ahead and delete elements. So I can right click on an element, click on delete, rightclick, delete, and rightclick and also delete. Now what's really cool about duplicating things is you can also duplicate columns and also entire rows. So for example, I will right click on this, duplicate, rightclick, and duplicate. And I no longer need this column right here. So I'm just going to delete this column. And there we go. Now you can also duplicate entire sections. And so here you'll see that we have this edit container. I can right click on this duplicate and then the entire section will actually be duplicated. So yeah, there's a lot of really cool things you can do with Elementor. But I'm going to close this and let's talk about now how to design the background. So the first thing I want to talk about is you can actually change the color of each column. So, if I click on edit container under the style section, if I go to classic right here and select color, you'll now see that we can change the color for this specific background. So, we can change a specific color. Pretty cool. Now, you can also add in colors on the entire background. So, this section right here with the six dots, this is controlling this entire section. So, for example, for the style section, if I want to add in a color, I'll click on classic and then we can apply like a classic. Now, notice how this one is still carrying that one color because we selected that one color for this column. If I want to get rid of that, I'll click on the column and then just make that transparent. And voila. So, that is a quick little crash course on how you can, you know, design elements and style them a little bit more. But I bet you guys are all wondering about these controls over here on the left side under layouts. Now this is referring to the flexbox. So let me dive into that. So here I will go ahead and click on the plus and click on flexbox. Now I'm going to select a two column row. Okay. And here we have two columns. Now here's an example of where the flexbox really becomes useful. Let's say for example you want to build a landing page, right? And on your landing page you might have two buttons side by side very similar to my website. On my website derwson.com we have a heading text, a normal text and then we have two buttons. Now, if we go to this website over here and we drag a button, right, and I drag another one right here, you're going to notice that it's stacked on top of each other. And there's no way to put these side by side. And this can lead to a lot of frustration. Obviously, this is where we're going to use the flexbox. So, over here, I'll click on add elements and we're going to take a container and we're going to drag and drop it right here. Now, I want to take these buttons here and put them in the box. Okay. Take this one and take this one. So now we have these two buttons. So now we can utilize and manipulate these elements inside of the container. So I'm going to click on edit container. And then here we have those directions. Remember earlier how we had those directions for the flexbox earlier like the bottom and the right side. That's exactly what these are referring to. So if I select horizontal, it's going to place the elements horizontal from one another. To give you an example here, I'll click on horizontal. And now you'll see that we have these buttons side by side. We can also add in space between, space around, space evenly, or just put them at the starts. Now align items. This actually will work if we have a larger box. So we'll come back to that. Now I want to make this a little bit longer as you can tell. So this is kind of like, you know, this is kind of like uh, you know, it's very tight. So I'll click on this container. So I want to expand the height. So to expand the height over here under the minimum height, you can actually increase the size of this. If you want a full page, you're going to select VH and then select 100. Elementary even tells you this to achieve a full height container. Use 100VH. Full height is essentially having a landing page just like this. So this is 100 VH where the users are brought to a really clean landing page that is full width that covers the entire screen. So going back over here, if I now want to utilize the flux box again, I can manipulate these elements inside. So I'll click on this container. And now you're going to see that uh we can actually justify this. So I'm going to put this in the center. Now we can also create gaps. So now you can see that we can utilize gaps and we can space this exactly how we want it to be inside of this box right here. But uh I think we'll just stick with something basic. I'm just going to uh put maybe something like uh you know, center, right? And to finish this off here at the top, I'll click on add elements. I'll drag in an image and then I'll select an image. I'll go ahead and select this one here and click on select. Then I'll center this. So I'll use the flex box again and I'll justify this in the center. And there we go. So now I have a full complete landing page. So that is the flexbox summed up. On the demo website over here, you're going to come to find that we are using a lot of the flexbox containers with specific elements. So, uh, we'll come back to the landing page in just a little bit. But before we go into the landing page, now let's talk about the grid layout. So, I'm going to right click on this and delete it. And now, let's talk about the actual grid. And we are going to start from scratch. So, I'll click on the plus and click on grid this time. So, here we have different structures. Now, I think the one that describes us the best is probably going to be the four column row. So, here we have two rows and two columns. Now, if I click on add elements over here and try to drag in an image, you're going to see that it won't let us. You first must actually put an image in the first one and after that you can then put it in the second one. So, for example, if I want to add an element over here, like uh I don't know, anything. You're going to see that we can only add in one specific element and then it prompts us to insert something into the next one. I'll explain more on why that is in just a bit, but I'm going to put in four images. So I'm going to right click on this one, delete it, throw an image. So once we have that, we can now manipulate these boxes inside of this uh grid layout. So over here, I'll click on container. And right away, you're going to see that we have options. So for example, we can put something like, you know, four columns or three columns. And we can also add in more rows. So now you're going to see that we have more rows. Okay. But I'll do something like uh we'll just put in like maybe like four columns and just one row. Now, essentially, I believe this is best suited for portfolios, images, and other ways. But I'll explain another cool way how to use this. But let's say, for example, you want to adjust the width right here. You can make this larger. You can also add in gaps. If you don't want any gaps at all, you can just put zero gaps. And then we have this sort of effect right here. You can also add in a background image or a color to this. So, for example, if I click on style over here and go to classic, we can actually add in like a black right there. And then you can showcase images right here for the grid layouts. So, here we have four different columns and we also have one row. Now, instead of actually inserting a module where we only have the option for one, we can actually insert a container into each of these. And then we can add in multiple modules inside of that container. For example, if I want to throw in a text right here, change the text color to white so we can see a little bit better. Okay? And then maybe throw in an image and then throw in a button. We can do that for each specific one. So by doing this, it does give you a little bit more flexibility to add in more columns and rows. So for example, over here, we can throw in a container and then also do the same thing for this one over here. So essentially what you're doing here is you are creating grid layouts with flexboxes where you can have multiple elements. And don't forget you can always use the flexbox just like we did on the other sections here as well. So that is a quick little rundown on how to use the grid. I do recommend to actually insert flexboxes in the boxes and that'll just give you more control over your website. Now one more thing I want to mention is let's say you accidentally delete something and you make a mistake. over here under this history button. If we go to uh these revisions right here, you can always back trace and go to any part of when you're building your website. So, if you ever made a mistake or something went wrong, you can always go back into the history and uh build your website as you were building it before. And once you're done making all the changes on your website here at the top right, you'll click on publish. And this is going to now save all the content on your website. And if you do want to see what your website looks like on this page, you'll click on preview changes. This will open up a new tab where you can view all the changes you made to your page right here. We'll talk more about how to add it to the menu a little bit later. But with that said, let's go ahead now and talk about the actual homepage. So to go to our homepage, it's quite simple. Instead of actually closing the editor and going to the homepage here under the uh this arrow right here, I can now click on home. And this will bring us to the homepage with the editor still open. Okay. Okay, so now that you have an understanding of how to use Elementor, you can actually go to our demo content right here, click on any of these elements and adjust it. You can also take elements here and just drag them onto the page and you can further expand and build your websites. So feel free to go throughout the rest of the websites. And there are some images that you might not need like this one. So I'm going to rightclick over here and delete this because I think that's no longer needed. Also for this one here, I don't want this either. So I'm going to delete that. So feel free to go throughout the rest of the website, make any modifications you want, add in content, and fully adjust this templates to fit your business needs. Now, in the next section, we're actually going to now incorporate the pro version. So after you're done making changes to your website here at the top right, you're going to click on publish. And now, let's go ahead and talk about the actual pro version. Here, I'll click on save options and click on view page. And now we're logged out of Elementor, where we can view the websites and view any changes we've made to our website. So in this next section, now let's talk about how to incorporate Elementor Pro onto our new website. Okay, so now that we know how to use the Elementor page builder, now let's go ahead and purchase the Pro version. Now Elementor's pro features are really scattered throughout Elementor. And I'll be honest, it's really hard to know exactly what you're getting when you're buying Elementor. So we're actually going to go through each of the pro features step by step to show all the pro features inside of Elementor Pro. Now, there is a link in the video description. This will take you to the Element's website. And here we can purchase the pro version. Okay, so once you click on that link in the video description, it'll take you to this page right here and let's go over the pricing options. So right here, I'll click on view plans. Now, the very first plan is uh kind of garbage. Okay, I would not recommend the essential plan. The reason why is because they don't give you all the widgets, and they also don't give you the pop-up builder, which creates those really cool pop-ups that you saw earlier. Uh so I would not use the essential. Now, if you plan to only have one website only, uh the advanced solo might make sense. This gives you access to all of the pro features with Elementor. However, I think the advanced would be suitable for most beginners. Now, the difference between the advanced and the advanced solo is this gives you access to uh put this on three different websites instead of only one. This price is $84 a year, and these do not renew at higher prices. So, this is the price you're going to pay every year. And for the advance, this is about a h 100red bucks a year. I think a 100 bucks a year for the element page builder and all its features is quite fair. So I think uh for most beginners advanced is good. If you are starting an agency and you want to use elementor on multiple websites the expert might make a lot of sense for you. So for the expert plan you get access to you know all the pro features. However right here you'll see that you pay $200 a year for 25 websites. However, if you select a thousand websites, you can now put Elementor Pro on all a thousand websites and get support and updates for all those websites and you pay about $400 a year. I think that is a very fair price if you're running an agency and you're putting this on multiple client websites. So, I would definitely go with agency if you're running an agency. If you are someone that is just messing with Elementor, I would definitely go with the advanced plan because uh this will give you the ability to put it on three different websites versus only one. So once you get here, you'll click on buy now. The next is selecting a billing cycle. Now if you sign up longer, they will give you a small discount. So for two years, you'll see they give you about 14% off and for 3 years they give you 17%. That's really not that big of a discount. So I really don't think that's that great of a deal, but it's up to you. Also, one thing I want to mention is all of these plans will give you a 30-day money back guarantee for any reason. So if you use Elementor and you feel like it's not for you, no problem. you can always get your money back. So, you'll go ahead and select the billing cycle and then click on continue to check out. You'll then go ahead and add in your billing information. So, you'll put in your email, your billing address. Here you can pay with credit card or PayPal. And on the right side, you'll see a summary price. Now, once you go ahead and pay and you get Elementor Pro, I will then meet you in your customer portal. Okay, cool. So, once you actually pay for Elementor, it'll then bring you to your customer portal. Here you can access add-ons, other services, supports, and then also upgrade your plan. Now, right here, I'll click on sites. Now, at the top right, you're going to see this download button. Now, I recommend going this route, and I'll explain why in just a bit. Here, I'll click on the download button and then click on Elementor Pro. This is now going to download Elementor Pro onto your computer. Now, once you do that, you're then going to go to your website over here and upload that plugin. So, over here, let's go to dashboard. We're then going to scroll to plugins and click on add plugin. Here I'll click on upload plugin and then I will now upload that plugin. So right here I'll go ahead and select the plugin and click on install. Now once we upload the plugin we'll then click on activate plugin. Now you're going to see Elementor Pro right here under your plug-in section and you're going to click on the connect and activate. This is essentially going to sync up your website with Elementor and activate your plugin. So I'll click on connect and activate. Now it's going to connect our website. So earlier it mentioned to connect our website, but uh this way is a lot easier. So right here I'll click on connect and activate and then boom. Now you'll see that your license is now active. So now Elementor Pro is now active on your websites. Now let's go ahead and go to visit sites. Now before we actually explore the options, let me just go ahead and explain uh what's changed with the free version. So the first thing I'll do is click on edit with Elementor. Now over here on my other website, you're going to see that we have this animated headline. We also have this really cool effect with the text and also we have gradient buttons. So let me explain some of these uh pro elements and how to achieve this. So over here I'm going to take the animated headline and I will drag and drop it. So now we have this uh text right here. Now it is a little different than the heading text. So right away you'll see that we have the before and then the highlighted text and then after text. I'm going to put something like award-winning, right? We're just going to spell out what I have earlier, right? So, award-winning leader in and then over here under the highlighted text, I'm going to put digital marketing. Okay. Now, here you'll see that we have this um you know, this effect right here. But, uh what I want to do is go over to the animation shape and I'm going to change this to underline. So now it's going to add that really cool underline effect to that. And over here under style, we can now design it. So first we have the text. This is just the text right here. I think we're going to leave that standard. For the text color, I want to change this to black as well. And then here we have the highlighted shape. And this is essentially going to change the color of this right here. So I'm going to click on the actual default. And these are the global styles and the global colors. And these were created automatically when you imported the starter template with Solace. I'm going to select the purple one. All right. And I feel like that's pretty cool. So, we're kind of carrying that like, you know, that green and purple black white color scheme going on. So, I'm now going to right click on this element and delete it. Now, all I want to do is make this larger. So, for the text under the topography, we're just going to simply make this larger. Okay. And voila, we have now replaced that other heading text with something that looks a little bit more professional. And now we have this really cool like animated effect on our text. Now the next thing I want to talk about is the option to now explore CSS AI. So let's say for example on my demo website we have this text right here. But notice how it has that 3D effect. Also if we scroll over here we have this gradient button and also we have this gradient text. Now this is all done with the pro version with CSS AI. So, for example, I'm going to click on this element here and go to the advanced section. We're going to scroll to the bottom and click on custom CSS. And here, I'll click on edit with AI. Now, I know many of you watching this have no idea how to use custom CSS. Even myself, it could be a struggle, but now with AI, it makes things really simple. So, for example, add a 3D shadow to this text. Now, this is just one of the many different prompts you can insert. But I'm going to click on generate code. And it's now going to create this 3D effect for this specific text. And then voila. You'll now see it has this really cool uh 3D effect. And uh what this does is it just enhances original modules that don't really give you that option. So let's say for example, like all right, cool. We got this one done. Now we can actually go to any element and insert custom CSS. For example, uh we have this button over here. I'm going to click on the button, go to the advanced section, and then do the same thing, custom CSS, and then click on edit with AI. So, let's enter a prompt on button hover. Create a gradient background with cyan to purple color. Okay. Then I'll click on generate code. And now when I go over to this button over here and I hover over it, you're now going to see that we have that really cool gradient inserted on this button. Now you can also do this with text as well. So if you want to maybe add in a gradient for this specific text, same thing, custom CSS edit with AI. And uh let's just say for example, you want to add in a gradient right here. I don't want rainbow color. So I'm going to put So I'll enter this prompt by saying add a colored animated gradient with cyan to purple and click on generate code. And then this text will now change to a gradient. Okay. And I'll click on insert. And voila. Just like our demo, you now see that we have this really cool animated gradients. Now, you can also do this with images. Now, over here under my demo websites, you'll also notice that if we hover over these, we have this really cool effect. You can also apply the CSS effect with images. So over here under the advanced custom CSS edit with AI and then I'll just select the first suggested prompt and click on generate code. And now when I hover over this image, you'll now see that it rotates if I hover over it. So the Elementor AI is actually pretty cool when it comes to CSS. There's a lot of really creative things you can do with the CSS AI. Now the next thing I want to talk about is how to add in those gradient animated backgrounds to your websites. Now, we added in the CSS um options for elements, but you can also apply those to containers, backgrounds, or any other elements. So, I'm going to click on this background right here and go to the advanced section. And if I scroll down to custom CSS, I'll click on edit with AI. And we can actually now add in gradient backgrounds. Now, I actually got the color code from Elementor. So, this right here is an example. So, for example, I can copy this prompt. And if you do need access to this prompt, I'll leave it in the video description, but uh let's go back over here to my website and I'm just going to paste in this prompt. All I said here was uh let's go and take a look. Create a twocolor animated background from one color to another. Now, you're going to put your color codes right there. Here we put 5 seconds and make it infinity. Make it smooth. Now, obviously, you can update this prompt. You can add in different colors. You can put in different commands. But, uh I'll just go ahead and just insert this right here. And once I do that, you're now going to see that we have this really cool like animated gradient background that you can apply to your backgrounds of your website. So I'm going to re-enter that color code, but this time I went to this website called color.hex. And let's just say you find a color that you like here. I'll go ahead and grab in this blue right here. So we're going to paste this in. Okay. Make sure there's only one number symbol. And then also we have this color over here, which is like more of a purple color. We'll go ahead and paste that here. All right. And then I'll click on generate code. Now it should go ahead and use like a purple like uh to cyan sort of color for the background. So now you'll see that we have this uh really smooth background. You know, I really do like this color. So yeah, I mean you can achieve that if you want to go that route. I think this looks, you know, I think this looks actually pretty appropriate. Be very careful with gradients. So I like to show gradients, but just show a little cuz adding in too much gradient, it really is hard to carry throughout the rest of the website. But, uh, I just like the idea of adding in gradient backgrounds. I thought that was really cool. So, now let's go ahead and talk about the other pro elements. Now, I'm going to scroll down right here and use this section. So, if you want to experiment, you'll click on the add container and then you can use the flex box and then just, you know, drag in some elements inside of the columns. Now, I'll be honest, the only way to really learn how to utilize all these elements is just by trial and error. You just got to drag them in the columns and just practice, guys. Uh, for instance, over here, we're going to go ahead and take a look at the um we have the call to action or the flip box here. I'll drag and drop the flex box. And this essentially will flip the box when people hover over it. Now, for every single element, it's going to have its own unique styling options. So, these there there is no like universal styling option. They're all going to have different options. But, uh, here you'll go ahead and design the fronts. And then, if you want to design the back right here, you can actually design the content. And just remember the style tab. This will actually change the color for the front. And scrolling down, you'll see you can change the color for the back. So, for example, if I change this to like a a red, uh you know, this right here is now the back, right? So, uh this right here is the front and then also this is the back. So, you can go ahead and change the o