Complete Elementor PRO And Wordpress Tutorial For Beginners 2025

Key Takeaways

what is up party people my name is Daryl Wilson today in this video I'll be showing you all how to build a website step by step with WordPress and Elementor I'm really excited to show you guys how to build this website now this is an in-depth tutorial that teaches you the fundamentals of how to use WordPress and Elementor so both beginners and all WordPress users can create professional looking websites that look great that you can fully customize and the popularity of Wordpress is growing WordPress Now controls 45 of the entire internet powering more than 800 billion websites worldwide Elementor is the world's leading drag and drop page builder for WordPress Elementary now Powers more than 13 million websites worldwide because it's super easy to use and completely drag and drop so after learning how to use Elementor you can pretty much make any type of website you want with WordPress Elementor works by simply adding in elements these elements are fully customizable where you can then drag and drop these elements and adjust the size or color you can then add in your own background by using colors gradients or upload your own image you can get started by working from scratch or even import a pre-made template it's by far one of the easiest page Builders to use and doesn't require any knowledge of coding whatsoever we will also make sure your website is fast and fully optimized for all devices I'll show you how to optimize it for desktop tablet devices and on mobile devices we'll also make sure your website looks professional and modern when I first got started using Wordpress I thought all my websites looked amazing and then when I showed someone for feedback they told me the website needed a lot of work and it turns out I needed a lot of work as far as design so I'll make sure that you guys walk away today with a really professional looking WordPress websites we also offer more than 200 different template kits that you can easily import to make you and your business look really professional now we're going to make this website using free tools we'll be using Wordpress and a free page builder called Elementor now we have created this video for both free and pro users so in the first part of the video I'll be showing you all how to build a website with the free version of Elementor I'll first be showing you all the features within the free version this includes the new Elementor flexbox this new feature allows you to really push the limits of web design by inserting elements into any column type that you want that you can fully design so we're going to build your entire website using the free version of Elementor then I'll be showing you all all the features in the pro version for those of you who decide to upgrade in Elementor Pro you'll have access to the theme Builder the theme Builder allows you to create custom headers custom Footers and custom 404 pages that you can completely design yourself from the ground up so sit back and relax and let me show you guys the website that we're gonna make today in this video here is the website I'll be showing you how to make today in this video the website we're going to make today looks stunning we built this template from the ground up to make sure that it's Unique and multi-purpose for any type of websites and as an added bonus you will also get this entire layout for free just for watching our tutorial and as you guys can tell it's a great looking website with modern designs and this will really help give you a boost to have a professional looking website so after we create your website with the free version of Elementor I'll then be showing you all the pro features of Elementor for those of you who decide to upgrade the pro version of Elementor gives you tons of features I'll first show you how to use the Elementor theme Builder the theme Builder allows you to create custom headers custom Footers and custom four or four pages using the page builder I'll also show you how to create pop-ups with pop-ups you can create pop-ups using the Page Builder and also integrate your email provider to collect emails you can also use the new Elementor Mega menu Builder to create Mega menus on your website you can also add in page Transitions and even a preloader with your logo on it there's tons of really cool features in Elementor Pro so I'll cover all the options just to make sure you're not left in the dark and you'll know how to fully utilize all features in the pro version you know guys off the script and everything this has been one of the largest WordPress tutorials I've ever created here on YouTube me and my team we spent a few weeks making these templates to make sure that the very multi-purpose so everyone watching this video can use it to make their websites we also created an outline that step by step and really easy to follow from beginning to end so I really do hope you guys enjoyed this WordPress tutorial now if you guys feel like I'm going too fast or too slow there is a gear icon at the bottom right of the screen that you guys can use to speed up or slow down the video we also have time stamps in the description of this video so if you guys want to jump to a specific part of the tutorial you guys can use those timestamps in the description and with that said let's go ahead and get started and create your website with WordPress and Elementor now we're going to build your website in six simple steps in step one I'll show you how to get your domain and hosting a domain is the web address for your website like mycoolwebsite.com and web hosting will host your website online 24 hours a day in step two we will Design the website I'll show you how to design the website using the free drag and drop page builder Elementor I'll show you how to create your landing page add sections upload your images and learn how to use the new flexbox container in Section 3 the theme customizer the theme customizer allows you to decorate and design the header and the footer of your website you can also add in cool options like a website border or a scroll to top button in section 4 mobile optimization we are going to make sure that your mobile visitors have a good experience on your website we are going to fully optimize your WordPress website for desktop users tablet users and all mobile users in Section 5 the pro version Elementor Pro offers really cool features and I'll walk you through how to use all of them in this section of the video in section 6 free plugins and templates there's a variety of free add-ons and plugins you can use to extend the functionality of your website we will also introduce you all to more than 200 Elementor template kits that you can use to boost your website's creativity and make your website these template kits can easily be imported with one click an entire website will propagate automatically are you guys ready let's first go to section one now there is a link in the description of this video it'll take you to a page to purchase web hosting okay and this is hostinger.com now hostinger.com is one of the most affordable and also fastest web hosting providers available now if you guys want to change the language of this website you guys can actually click on the language tab right here and you can select your specific language so if you speak Spanish you can change it to Spanish or Portuguese or any language that you guys choose so go ahead and select your language now once you guys are here we're going to go ahead and pick a hosting package now one thing I also do want to say is that this page changes quite often in fact they probably change it once a month so if the interface looks different don't worry Don't Panic this happens quite often but you'll go over here under web hosting and then you'll click on web hosting now we're going to go ahead and scroll down right here and we're going to see some hosting packages we have the single the premium and we have the business web now I would personally recommend going with the premium web hosting because this has the best value you can host 100 websites it has a lot of storage and it allows tons of monthly visitors this one right here I would not recommend because you can only host one website however for those of you who want to upgrade to the business web where it gives you a little bit more performance and it allows more visitors you guys can also do that as well but I'm going to go ahead and select the premium web hosting so right here go ahead and click on add to cart all right and once you guys do that we're going to go ahead and scroll down right here and you're going to see different pricing options now this is referring to how long do you want to host with hostinger so we have one month 12 months 24 months and then we also have 48 months now my personal opinion I would always go with the higher plan because this is going to new at a higher cost later so you want to lock in that price while you have the opportunity I'm also going to give you guys a discount code where you can save even more money for your web hosting but just to get started out I'll go ahead and select 12 months and we're going to scroll down right here now you're going to go ahead and create your account so right here you're going to put your email address and after you do that we have the payment method so you can pay with credit card PayPal Google pay cryptocurrency and also alipay now here it's asking if you have a coupon code and I do so right here under have a coupon code if you guys enter the coupon code Daryl and press apply you guys will save 77 on your entire purchase so for a year of Hosting all you're going to pay is around 30 bucks which is great value because hostinger is very affordable yet it's also very fast go ahead and put in the coupon code Daryl and once you guys do that you guys will go ahead and select your method of payments so if you want to pay with a credit card you'll put in the name the credit card and so on and so forth or for those of you who want to use PayPal or other payments you guys can go ahead and select the payment method right here so what I'm going to do here is I'm going to go ahead and purchase a hosting package and I'll meet you guys on the very next page all right great and once you guys create an account it'll then prompt you to their Setup Wizard so right here I'm going to go ahead and click on start now and here they're asking some basic questions so they're asking who are you making your website for I'm going to put I'm creating it for myself now they're saying who is creating the website well I'm going to click on I'm building it myself what type of website do you want to build well I'm just going to put a Business website here they're saying do you need help building your websites I'm going to click on no thanks now you guys can actually skip this by clicking on these Skip and create an empty websites so right here it'll say create a new websites we'll click on select and now they're asking what kind of website and we're going to select WordPress WordPress is the most popular CMS on the internets and it actually Powers 46 of the entire internets so right here we're going to select WordPress and now we're going to enter in an email and then a administrative password now make sure you guys write this down because these are the login credentials that you guys will need to use in order to log in to your website so go ahead and enter your password and then click on continue now it's basically asking you if you want to add in plugins to your website we can do all this later so for now we're going to go ahead and click on skip I will manage plugins later next they're asking us for a theme however we can do all of this from the back end and skip this so click on skip I don't need a template now we're going to go ahead and select a free domain name so right here I'll click on select next we're going to enter in our desired domain name so go ahead and enter in the website that you would like to choose so for example mycoolwebsite.com or whatever it is is the name of your business you're going to go ahead and put that domain name right here so I put in darrellguide.com and then I'll click on search and see if this is available all right the domain is available so just make sure that your domain is available and once that's done you'll click on continue next I'll go ahead and click on finish setup now it's going to propagate and build your website to make sure that you can build your own WordPress website now it's going to ask you a few questions and these questions are important because it'll actually pick a server that's closer to your location so your website's even faster so for Country I'm gonna go ahead and select United States next you'll put if this is a personal or a company I'm just going to leave mine as personal and then click on next step now it's going to ask you to put in some contact details now these are actually required for icann policies basically whenever you register a domain the icon registration wants to know whose domain this is just in case later if you want to sell it or if you want to give it to another company this is where the contact information comes into play so I'm going to go ahead and put in my information here alright and once you guys enter your contact details you'll then scroll down and click on finish registration all right so just give this part maybe about a minute and it's going to propagate your new website all right cool so your website is now officially online now before we edit our website I do want to introduce you all to the control panel so before we go to edit website let's click on manage sites and this is going to take you to your new cpanel and this is where you can adjust your server settings and any settings that you want for your web hosting all right cool so this is your actual hostinger dashboard and this is where you can get more information about all of your websites so we can see that this is our dashboard we have our hosting package our domain and if you want to take a look at some of the information right here you'll click on WordPress and you can click on dashboard so here are just some general options that you guys can apply to your WordPress websites what I want you guys to do here is actually install the SSL the SSL is this little green padlock that you see whenever you visit a website right now our website is not secure so we don't have a padlock so I want you guys to install one on your website and don't worry it's completely free to do that we're going to go ahead and scroll down right here and here where it says SSL certificates I want to install the SSL certificates so go ahead and click on install here it's asking us which domain I want to select my new domain that I entered and then click on install SSL now hostinger is going to automatically install the SSL on our websites so let's click on close all right great so right now our SSL is installing on our website to make sure our website is fully secured now here at the top on the right side whenever you guys want to log into your WordPress website where it says edit websites you'll just go ahead and click on edit websites and this is going to log you in to your new websites so go ahead and click on edit website alright and congratulations this is your new websites now right now it's taking us to build a post but what I want you guys to do is go ahead and close this and then click on the W icon here at the top left and then right here at the top left go ahead and click on dashboard now this is your current WordPress dashboard and this is where you guys can adjust all the settings and where you can configure everything about your WordPress website now if you want to see what your website looks like right now on the internet here at the top left you'll click on visit sites and this is your new WordPress websites I know it's a little Bland a little boring you know it's using a default theme but not to worry we're going to make this website look fantastic now let's go ahead and log back into our websites now if this black bar disappeared on you all you have to do is click on refresh and then this black bar will basically let you log back into your website so right here I'll click on dashboard that bar actually did not show up all you have to do here is just type in dash wp-admin and that actually logs you right back to your WordPress websites and from here we can edit and build the websites now before we go on any further we also need to confirm our information with hostinger and we also need to verify our domain so whatever email that you guys use to sign up go ahead and check that email alright great so once you guys log into your email you're going to see some emails from hostinger so here it's going to ask us to verify our email address so first let's go ahead and verify our hosting your account so I'm going to click on verify email address and then I'll click on verify email and fantastic we have successfully now verified our hosting your account so let's go back over here to our email and now we need to verify our domain name now this is required for all domains no matter where you host because this is required for icann policy so right here where it says verify your contact information go ahead and click on this email from hostinger and then all you have to do is click on this link right here and then it should take you to an email verified and it has successfully verified your domain name now this is very important because if you do not verify your domain within seven days they will suspend the domain so just make sure that you guys click on this link it's very important so let's go back to our WordPress website alright cool so now that you guys got web hosting we're now ready to go to the next section so in this part of the video I'll show you guys how to adjust the general settings I'll introduce you guys to the page bowler and just some of the general options with WordPress you guys ready let's get started all right and as you guys can tell our SSL is now fully installed so it just takes a few minutes and if we visit our sites you can see that our SSL is fully secured all right so let's go ahead and go back to our dashboard now before we go on any further let's go ahead and adjust some of the general settings over here you're going to see settings and you're going to see General go ahead and click on General and from here we can go ahead and adjust some of the general settings for your WordPress websites you guys can also change things like the site language the time zone the date format as well now if you guys ever want to change your email to login this is where you're going to change the email so you'll go ahead and input any email that you want you'll go ahead and confirm it and this will be the new email that you guys will use to log into WordPress once you guys make those changes you'll scroll down and click on Save changes the next one is the permalinks right here you'll click on permalinks now this is actually very important and most people overlook this but for the permlink structure you always want to set this to post name now the reason why you do this is because you want it to say your website you know slash about us or slash contact us not a bunch of this numbers that don't really make any sense like the dates and stuff like that so go ahead and select post name and scroll down and click on Save changes all right party people now let's go ahead and change the theme for our website as you guys notice if we go over here to visit sites our site looks pretty dull and boring you know and it looks like that because it's using a default WordPress theme so let's go ahead and change our WordPress theme let's go back to dashboard and over here you'll see appearance and let's click on themes and at the top left right here you'll see add new click on add new now before I show you guys these themes let's first talk about what are themes and how they affect your website first let's talk about what is a WordPress theme every website you make with WordPress requires a specific WordPress theme without getting too techy a WordPress theme is a general style and layout of your current website each WordPress theme has different options in the theme customizer the options can range from a header and a footer Builder different blog post layouts controlling the width of your website like a blocks or a full width or specific eCommerce features like product layouts or different shot page layouts a WordPress theme generally controls the layout and style of your current WordPress website a WordPress theme does not build the website itself but it's more of an outside shell for the page Builders and a starting point to build your WordPress website feel free to check out many of the WordPress themes to find a style that fits for you and your WordPress website you guys got that so a theme is pretty much an outside shell of your websites it controls like the header the footer and other various parts of your websites however if you look at these demos right here the page builder is doing a majority of the work so when you're building your website a majority of the work is going to be done using the page builder Elementor and then the other parts will be affecting either like the header the footer blog layouts or shot Pages if you guys are using any Commerce websites now over here under search themes I want you guys to find the bloxy theme bloxy is a great WordPress team that you guys can use to build your website it has tons of features a lot of good demo websites and it actually works really well with Elementor so over here you'll find Block C go ahead and click on install now one thing I also do want to mention is you guys can always switch between themes and you guys will not lose any of your work so if you guys don't like bloxy or if you feel like it's not working out for you no problem you guys can go Venture off do your own thing and you know go check out other themes on your own time but we're going to use bloxy here just to get started out with so I'll go ahead and click on activate all right cool now once you guys install the bloxy theme if you guys scroll down right here uh you're gonna see the bloxy companion go ahead and install the bloxy companion this is a plug-in that will actually give you guys access to more demo templates extensions and a little bit more features for your websites all right cool now let's take a look at our website over here so if we go to visit websites you guys are going to see that the layout of the website has changed right and it's a little bit more structured and much better than that other uh white and black boring Bland style that we had before so now that we added our WordPress theme now let's create some pages for our websites so over here let's go back to our dashboard and we're going to scroll down to pages and then under Pages let's click on all pages now these are the demo pages that are created automatically when you guys install WordPress so we can delete these pages so let's get rid of them here we go I'm going to click on that and then for bulk actions I'll click on move to trash and click on apply so that's how you guys can pretty much get rid of Pages now let's add our own pages so let's click on add new here at the top left and for the title we're going to put home right home page click on publish and publish and on the right side you're going to see add new page so let's click on add new page and now we'll do the about us click on publish and publish and we'll do it one more time we'll create our contact page where people can send you uh you know contact forms and spam and all sorts of junk you know so let's go ahead and do our contact form contact us or just contact I guess contact is good right here click on publish and publish all right so now that we've created those pages now we need to assign them to a menu so let's click on the WordPress logo here at the top left now to create a menu you're going to go down to appearance and then click on menus now we're going to give our menu a name now don't worry about this name because only you and your staff will see this people on your website will not see this name this will be like the main menu right main menu we're going to click on the header menu one and then click on create a menu and then on the left side you're going to see pages so I'll click on view all and we're now going to add all these Pages there are two home pages but don't worry I'll explain what that is so this right here is just a custom link right and this can be anything you know for example if I click on this you can put your Twitter URL your Facebook page you can put anything right here and then you can just you know put the navigation label right there so for example this is your Facebook page you put in the URL and then just put in like Facebook right there so this can be any link basically but I don't want one so I'm just going to click on remove now I'm going to rearrange this using this drag and drop Builder right here so we got the home the about us and the contact you guys can also make a drop down menu if you add the about us below the home page and that'll create a drop down menu on your website if you want to go that route you know I don't like them but hey you know some people do like that so if you want to drop down that's how you would do it once you guys finish adding your menu we'll go to the bottom right and click on Save menu now let's take a look at our website so let's go back to our websites and click on visit site cool and now you'll see that we have the home we have the about us and then we have the contact so if we click on these Pages you'll see that they're blank pages and they're ready to be edited with using the page builder but before we do that I know I keep saying but guys but there is a lot of things we have to do before we use the page builder let's assign this home page as our default home page so when someone comes to our website I want them to go to this page first because you guys will notice here that it's actually taking them to this blog page which I don't want them to go to right so let's do that here here's the top left you're going to see customize go ahead and click on customize all right and this is the bloxy theme customizer now we'll talk more about the theme customizer a little bit later and I'll probably make a whole dedicated video on this theme because it's packed with features but it's not really related too much with Elementor but one thing I do love about this is we can actually change the layouts so it's easier on the eye and I really do love that but uh before we talk about the theme customizer let's just go ahead and assign the home page as our current home page and to do that under the core setting you'll see home page settings and then you'll see your home page displays you'll click on a static page and you want to select the home page as your default homepage and then click on publish and you're done congrats and these other options right here they pretty much control different parts of your website we'll be coming back to the theme customizer a little bit later it is a lot to go through so I don't want to just jump into that right now I'd rather just say on points and work with the page builder so I'm going to close the theme customizer now all right now the next step is we now need to download the page builder so let's go over here to dashboard and over here under plugins I'll click on add new now there are various page Builders with WordPress there's Divi there's Beaver Builder there's site origin there are tons of page Builders but the most popular one that we're going to be using is called Elementor you guys have probably heard of this page builder I mean if you haven't heard of this page builder you've probably been living under a rock or something like that but uh this is the number one page builder for WordPress there's tons of add-ons it's a free page builder and the pro version has a lot of amazing features which I will show you guys a little bit later in this video now here is the Elementor website builder go ahead and click on install now and then let's click on activate all right now when you guys install the Elementor page builder it prompts you with this Setup Wizard however you guys don't need to do this so let's just go ahead and close this it's just basically saying hi so just tell them hi you know all right so let's go ahead and close this at the top right now on the left side you're going to see Elementor this is the actual page builder and let's go ahead and click on these settings now Elementor has recently introduced tons of amazing features and in this video I'm going to be covering all of the features so right here let's click on features now these are their current I guess you want to say ongoing experiments and to keep this video updated I'm going to be activating all of these features right here because these features right here are in the works and they'll probably be released maybe within two weeks or three weeks so we're going to basically show you guys how to use all of the elements or features for this page builder so we have the inline font icons we want to go ahead and activate that the flexbox container this is actually one of the newest features that have come out with Elementor and it makes your website more responsive however there is a small learning curve to this so I'll go ahead and show you guys how to use this so for the flexbox container I'll click on active and then we have the upgrade swiper Library we're also going to activate that here we have the nestled elements and we're going to also activate this as well and then we're also going to activate the lazy load background images now in case you guys are not sure what that is lazy load is basically loading images a little bit later so it's less strain on the server technology has really increased guys I mean there's so many plugins and features that make your website faster today I mean but 10 years ago none of this stuff was available and today it's like at the tip of your fingers for free so it's it's truly amazing what they've done over there at Elementor and we're going to go ahead and scroll down right here and these are just performance issues and stuff like that but these aren't necessarily features this is just like you know uh improvements for accessibility and stuff so I'm gonna leave all those as default and then scroll to the bottom right here and click on Save changes all right here it's saying do you want to install our developer plug-in no no we're not we're not doing that guys thanks anyways we're going to close that and now let's go ahead and go to our website over here so I'll click on visit website and here we have our home page now to edit our page we first need to go ahead and click on edit page you only have to do this one time and after you do that edit with Elementor will always be there all right now there's one thing that we need to start before we turn on the page builder and that is to get rid of this homepage title when we're building our websites so let's go ahead over here under the bloxy and for page title I want to disable that that means I just want a blank slate for the page builder to do all of the work so I'll go ahead and disable the page title click on updates and now we'll click on edit with Elementor and this will turn on the page build so click on edit with Elementor all right party people so now we're going to design the website here you guys have noticed we have this container Tab and this recently replaced elementor's intersection now before we begin I just want to demonstrate the difference between the intersection of Elementor versus the container because some people might be confused as to why we're adding the container so now we're going to introduce you guys to the Elementor flexbox the limiter flexbox is elementor's newest feature that allows you to control elements inside a container now previously there was intersections right but there was a lot of limitations to intersections that I'll show you guys in this part of the video so in this part of the video I'll show you guys the differences between the old version and the new version and after that I'll show you how to fully design the website using the Elementor flexbox containers alright so here is a page that I quickly created using Elementor now let me demonstrate the old version of Elementor versus the new version of Elementor using the new flexbox containers so here we have this landing page you know it's just a it's a normal landing page right and I want to drag a button here but I want to add it to the right side so if I if I were to take this button right here and try to drop it you guys will see that I can only either add it below or above it making it a little limited on how I can add elements to my websites the new flexbox container changes that and gives you a little bit more flexibility all right now here's the new Elementor flexbox containers now let's say for instance I wanted to achieve that same result where I would just take a button right now you guys can see that if I were to take the button that it has the same thing right where I can only add it above or below the button however there is the container layout which allows me to drag this container and now I can add in the elements I want to add inside this container so I'll go ahead and just duplicate this really quick and I'll drag and drop these into the Container here now with the new Elementor flexbox container we can now control all the elements inside of the flexbox for example here we have the direction I want the direction to be horizontal and I want to put these in the center you can see that we can use these controls right here to position these evenly and you can also style these any which way you want you can also add gaps in between Elements which was not able to do before so as you can tell you do have a little bit more control using the new Elementor flexbox containers let me give you another example so here's another example here we have these three columns right now let's say for instance I wanted to align these items inside of this column with the old version of Elementor it was a little tricky for example I'll try to click on the edit column section and here we have some options where I want to make it middle right but if I want to put it in the center you guys will see that's where the problem starts I would have to go to every element and align these manually but there's a lot of responsive problems when doing that the new flexbox container fixes that here is a website with the new flexbox container and if I were to click on the container here you guys can see I have a lot more control over what goes on with the elements inside the container so I can Center this you know I can uh you know they have a bunch of little design options here but if I want to put it in the center like that you can see that I can do that and then I can use these and combine these so as you guys can tell you know we do have a lot more options and control over what goes on inside the containers let me give you guys one more example okay so here's the last example and then we'll move on with the tutorial so let's say for instance I wanted to take this element and I want to put it over here before I'd have to take this and then drag it over here and then with this element I would have to take it and drag it over there now I know that looks easy right but when you're building your website sometimes you might take an element and then drag it there and like oh you know what happened and then you try to drag it it back like that and then sometimes you know the website would easily get broken right now I know that's a little bit of an exaggeration you don't have to do this anymore with the flexbox you can control all the elements inside the columns so here's the flexbox and let's say for instance I wanted to actually rearrange these right so here we have the direction so instead of horizontal I'll say you know let me see what this looks like reversed and then I can also add in you know space here and then I can control all of the elements right here using the justify content and align items I know that doesn't look like much but when you're building your website the small things are kind of the big things so now that you guys have a good understanding of the difference between the old version of Elementor versus the new flexbox container let's go back to the tutorial and design the website alright so next let's take a look at the demo website that we're going to be making today in this video you guys ready and ta-da this is the website I'll be showing you all how to make today in this video now me and my team we spent a few weeks designing this template so both beginners who are new due to Elementor yet also users who are experienced with Elementor will learn how to use the new flexbox container and as you guys can tell this is a great looking landing page and it will make you and your business look really professional so this is a two column row right on the left side we have some heading text and then we have some supporting text and then we have these two call to action buttons here on the bottom left and then we have this image on the right side and of course you can change this image to anything right yourself or your business partner your your dog or you know whoever it is you want to change it to you guys will also get all the images for free that will help you guys follow along in this Elementor tutorial let's go ahead now and scroll down to the next section so next we have the services or the features section so here we have these three images and we got really creative here we put the images here on the background and then we added a gradient overlay on top of the image and then we added elements on top of that so users can read this text on the bottom so this is like your supporting text right we have a business analysts business strategists you know whatever and of course you guys can change this to anything to support you know your website or your business let's go now and scroll to the next section next we have the nestled elements the nestled elements is a new feature that will allow you to use the page builder to build within the actual tabs so here we have tab one this was all created using the actual page builder tab two you'll see we have another section and tab three we have this other section where we just have a little bit more information about our company so I'll show you guys how to use the new Elementor nestled elements in case you guys want to showcase parts of your business using these tabs and let's scroll down to the next section and next we have this section here we have this gentleman on the left side you know he's having a great day he's really happy and on the right side we have some general information about our company notice here at the bottom we have this gradient and as it goes up it fades so we implemented a gradient overlay on this background just to carry the color scheme and brand of our websites and also we have this image and as you guys can tell this image is actually overlapping this section now I'm going to show you guys how to do this the proper way or it's fully mobile optimized and it looks good on all devices so if you guys do want to implement this design on your website I'll walk you guys through how to do that and if we scroll down we now have another section so we have you know just some general upsells and general information about our company so this can be anything right we change this to Consulting and we're an innovating business you know all the corporate jargon that every website has today right and then here we have some blurbs and you can change these blurbs to pretty much anything that you guys would like and then here we have the bottom part where it says meet our partners and you can showcase your partners or even companies that you work with so I'll be showing you how to make those sections today in this video we also do have more sections here on this demo website but we're going to give you this website for free to download right there is a lot of sections here so obviously if we were to cover every single section this tutorial can easily get like six to eight hours long so we wanted to really keep it keep it brief yet also pack it with valuable content so we'll show you all how to master the flexbox container how to use the Elementor Page Builder and how to make really nice unique sections so if you guys are ready to learn how to use Elementor and use the new flexbox containers let's go ahead and walk you guys through on how to do that let's go here I'll click on the website alright so we're going to start designing the website using Elementor now in this part of the video make sure that you you have the Elementor flexbox active because I'll show you guys how to use the flexbox which is a new feature that Elementor has recently introduced we also do have demo images for all of you that you guys can download in the description below of this video and then you guys can use those to practice and upload those to your WordPress website making the website it's really simple alright so this part might take about like 60 Minutes or something like that but once you guys learned this part you guys pretty much know everything right so uh let's go ahead and get started [Music] hey party people real quick before we start this tutorial I just want to let you guys know that there was a small update by Elementor that just changed the color of the interface so nothing else really changed except the color of the Builder so let me show you guys what it looks like and what you guys are going to see from your ends so this here is the new UI that Elementor has introduced the only thing that really changed is they just changed the colors some of the icons might look a little different and they just change the update button so overall everything is identical they just change the colors of everything and made the UI look just a little different also Elementor is going to change this interface again in just a month or two and that is currently an alpha let me show you guys how that's going to look as well just so that we're all on the same page here Elementor tends to update their page but they're quite often so you guys are going to see rapid changes from Elementor so right here under the Elementor and the settings I'll go over here to features and if we scroll down you're going to see the editor top bar now at the current time making this video this is an alpha so let me just show you guys what this looks like just so we're all on the same page I'll go ahead and go to save changes you guys are going to understand all these options throughout the video but let me just go ahead and explain what changes in these updates so this here is elementor's Alpha interface where they are going to basically take the icons at the bottom and they're going to put them at the top the responsive mode will be in the center of the screen usually it's at the bottom left but in this new update they're going to change the position of it everything else is relatively the same all they've done here is just try to improve the UI so all the features all the things that we talk about in this video are all still the same so now that I've covered that let's go ahead and jump back to the tutorial now let's go ahead and first build the websites now over here you'll see that we have two containers right we have one and we have two so let's go ahead and click on the plus icon and here we have different boxes right we have this one with a down arrow and this one with a right arrow now you guys will understand this a little bit more but this is basically saying what direction do you want to Stack the elements but I'll show you guys a better example of that a little bit later but first let's just start out with a basic two column row all right so we have one column and we got two columns and with these columns you guys can drag and drop elements so we have the heading text right we have some text editor right we also have the button right here right and then maybe we have like a an image right there you go you know and we can drag and drop these by taking this pencil icon and holding it and then we can you know drag this over there and drag that over there and so on and so forth you guys can also right click and even duplicate these modules right so you can see it's a very fluid drag and drop Builder really simple to use these elements they've serve their purpose guys we're going to get rid of them now so to get rid of an elements we're going to right click delete right click delete right click delete and right click delete let's go and get rid of all this right so that is a quick rundown of how to use this uh drag and drop bill or all you have to do right here is go on the left side and drag in these elements now these are basic elements right these are pro elements we'll be talking more about the pro version a little bit later but you guys don't need the pro version to get started with building your website it's only optional here we have the general section and then we have some other ones which I don't really use these ones too much these are like Legacy and they're kind of they're kind of dated you know so we're not going to use the WordPress ones and uh woocommerce that's going to be for a whole nother video now before we add any elements and we designed this let's first add in a background right so I want to actually see what we're working on in the back right so right here I'll click on these six dots now for every element and section you're going to see three different sections you're gonna see the layout or contents which basically controls like the actual layouts here we have the style this controls like the color where you can add like a background image color you can also add like a shape divider or also borders to your section and then you have the advanced section the advanced section will control the position and you can also add in some really cool animations and motion effects to every section but I just want to change the background color just to get started out with we'll we'll get crazy a little bit later but let's just you know let's just stick to the basics here so for background type under the classic section so here we have the background section and this is where we can add a color or we can add an image to the background of our site so for color I want to go ahead and add in my own color now I use a specific color code so you guys can actually just you know do this right here if you want and you know you can find it on your own but the one that I actually used was called here I'll go ahead and type it in right here you have to enter the number sign and my color code is one eight one B one nine right so it's like a black but it's not like a Pitch Black it's just like a more subtle black now let's say for instance you know I want to actually make this a little bit larger right so we added the color but you know I want to make this you know spread across the whole page here under layouts you'll actually see instructions so here you'll see to achieve full height container use 100 VH so we're first going to change this to VH and then you'll see that uh you know we can actually move this right but for mobile optimization you just want to put it at 100. this will make sure that this spreads through the entire screen so this will be a full width landing page so if anyone visits your website they're going to see it from a full width Style and here you'll see that the width right you can actually change the width right here to any width you'll see that this can actually change the width of the columns but I just wanted a full you know full width so I'll just leave mine at uh you know as long as it's full width that's all I really care about and from now here we can go ahead and add in a background overlay image so let's go back to style right here and what's cool about Elementor is you can actually add stuff on top of the color so here we have the background overlay here you'll click on classic and we can also add an additional image on top of the background so if you want like an image on top of this you know you can do that and I actually have an image for you guys so right here I'll click on choose image and the image that we're going to use is called line so it's called line.png and hero insert media all right so you'll see that we have the background image but I want to actually change the position so for display size I want this to contain what that's going to do is that's actually going to force the image to actually uh stay within the actual page and not go you know outside of it and I don't like this repeat you know I don't like that so over here under repeat we're going to put no repeats and if you guys want to get a little bit more you know customizable you guys can actually move this to different parts right but I have mine at Center Left Right Center left is a pretty good right and if we click on the Arrow right here you'll now see that we are ready to build the websites right I mean it's already looking good right and let's go ahead now and add in some elements so over here you'll see we first have this text module so let's go ahead and throw in a text module so right here we have the text editor now for every element you're going to see three different columns just like the container sections right you have the content this controls the actual content of the elements the sty