How To Make A Wordpress Website With Elementor PRO 2020

hey what's up party people my name is Darrell Wilson and today in this article I'm gonna 

How To Make A WordPress Website With Elementor PRO 2020 - NEW FAST & EASY WAY!

show you all how to make a website with Elementor pro and then the 

WordPress Elementor is the world's leading page builder 

with more than 4 million active installs because it's super easy to use for beginners and completely drag and drop

 so you can see why it's so popular and to be quite honest making websites today with 

WordPress and Elementor Pro has gotten really simple because you don't need to know any sort of coding 

so you'll have your website up and running in a few clicks ok so we're gonna build your new website in four simple steps so step one will get your domain and hosting 

so for example my amazing website com step two will install WordPress and big companies like eBay Facebook and also Mitsubishi 

all use WordPress because it's really simple to use step three will then 

solve the Elementor page builder the elementary page builder is the number one most popular page builder for WordPress and step four 

we are going to build your WordPress website with Elementor and I'll guide you through the process of building your website 

all the way with Elementor pro you can make any changes you want to your website like changing the text switching the fonts or color adjusting the

 size of the column adding any images you want to your website and even moving them to anywhere 

that you want you can also add these really cool shape dividers to your website you can change the 

style and also the color of the shape dividers you can add gradient backgrounds or even a really cool 

article background to your website Elementor Pro also allows you to add these amazing motion 

effects to your website which you can animate in any direction on your new WordPress website and 

let's not forget your website will be fully optimized or Mac PC tablets and all mobile 

devices plus with hundreds of pre-designed blocks and templates to choose from you'll have the 

the website you've always wanted up and running in a few clicks and the great part is these templates and blocks are completely free 

so elements are pro and not only allows you to build a website but you can just add some amazing functionality and design to your website unlike any other with no coding whatsoever 

so are you guys ready to start this tutorial huh what okay let's get started with this tutorial

 so step one will get your domain and hosting step two we'll install WordPress step three the elements

 or page builder and step four we are going to build out your new amazing website and you're 

gonna love it I promise you are gonna love it now if there is a link in the description of 

this article it'll take you to a page that looks just 

like this right here and this right here is the psych 

ground com now you've seen the other article I've been recommending Saigon comm for about four 

years now and that's because psych on comm came up as the number one as the fastest with the 

best uptime when you're hosting your website so I tested 15 other companies and sycron came up 

with a low time of around 1.8 seconds so you can be searching that your website will be very fast 

compared to other web hosting providers so we have three plans right here we have the startup we 

have the grow big and the go geek for most of you you probably want to go with the grow big plan 

because with the grow big plan you can host unlimited websites and you get a little bit more 

space rather than just a single website so you can see the difference right here and personally I don't 

think you need to go geek just yet that's for people like myself or who have a lot more web sites and 

stuff so right here under the grow big plan click on get plan alright and right here you're gonna give 

your website a new name so go ahead and talk it over with your friends or your buddies and give us 

some thoughts because this is going to be your new web address so for this tutorial I'll just do 

something like a website tutorial Darryl dot-com and then right here I'll click on proceed all right 

cool and this right here is the checkout page so right here you'll put in your account information 

and then here you'll put in the client information like your first name and your last name and then 

here we have the payment information so you can pay with a credit card and then also here you'll put 

in your social security number, I'm just kidding no social just kidding right here is the purchase 

information so right here we have a period and I recommend doing 12 months because 12 months 

will actually give you enough time to decide this is for you or not and you also get the largest 

discounts with 12 months and remember there's a 30-day money-back guarantee for any reason 

whatsoever and then here we have extra services now I require you guys to check on this domain 

privacy the reason why is because if you don't have domain privacy checked you're gonna get all 

these unsolicited emails and spam trying to sell you viagra sex pills and SEO packages and all this 

really weird stuff that you don't want so if you have this check this will protect your personal 

information so make sure you have that check right there and then scrolling down here we have 

the Terms of Service and Privacy Policy so make sure you have that checked so once you're all set 

Click on Pay Now and I'll meet you on the very next page all right cool so after you've purchased 

hosting it'll take you to this page right here and then right here click on proceed to customer area 

all right awesome so to set up your website right here just click on setup sites now right here we 

have two options we have started a new website and migrate website right here just click on start a new 

website and right here we have four options but we want to select WordPress so click on 

WordPress here you'll create some login credentials so make sure you break this down 

because you're going to need this information every time you log in and make changes to your 

WordPress website so I'm gonna go ahead and put in an email address and a password alright so I'm 

all set and right here once you're done you'll click on continue so right now it's asking us if we want 

to add this to our plan personally I don't need this right now and I don't think you do either so I'm 

gonna skip this and just click on finish and that's it and right now psych round is setting up your new 

website make sure also to check your email because you're going to get an email from psych 

round saying verification required open up this email right here and you're going to verify the 

the domain that you purchased so right here you'll have this link so click on this link and it'll take you 

to this page right here and you need to verify your domain basically saying that you're a real person 

and not some robots are also going to suspend your domain so all you need to do right here is just 

click on verify the information and you're done your domain is verified alright cool so the website has 

been successfully installed and we are all set so right here click on manage sites so this right here 

is the site ground dashboard so on the left side right here you'll see WordPress click on 

WordPress and then click on install and manage so this right here is going to show the installations of 

WordPress that you have for your website and right here on the bottom we can see our website 

and then right here you can see that WordPress has been installed right hereunder actions on the 

bottom right it's gonna say log in to admin panel click on login to admin panel alright cool and it'll 

take you to this page right here but I don't really want to go through the setup wizard so on the 

bottom right here where it says exit click on exit and congratulations your website is now live on 

the Internet now if you want to see your website right now on the top left right here you'll see my 

WordPress just click on visit sites and this right here is your new website it's a little plain it's a 

a little boring and it's really ugly so we need to make a lot of changes to it so before we go into 

the design process and start building our website we need to change some general settings so right 

here under my WordPress let's go back to the dashboard so the first thing we'll do is disable this 

plug-in right here we don't need this WordPress starter so right here in our plugins click on 

installed plugins you're gonna get very familiar with plugins as this tutorial goes on but right here 

we have a WordPress starter go ahead and deactivate the WordPress starter all right cool next 

let's go right here to users and go to your profile so in the future if you want to change something like 

the color or your email or your password this is where you're going to do it so right here I must 

select Midnight's I like midnight I feel like Midnight's I don't know I like it you can just go to 

these other ones and see which one you like scrolling down here so if you ever want to change 

your email this is we're gonna change your email and that's pretty important because that's what 

you're going to use to log into your websites and then right here we have the generate password so 

if you ever need to make a new password this is where you're going to do it you can just click on 

dinner a new password and then just go to update the profile and you're all set ok cool another thing 

I want to let you know is that if you speak a different language right here and our settings in 

general you can actually have the backend change the text right here to your specific language so 

many of my viewers asked me about a plugin for that and I said guys right here to the site language 

so right here you can select any language and they have pretty much any I think they have every 

language out there they have a lot of languages so you can select your language and then once you're 

done you'll click on Save Changes and it'll apply throughout the entire back end now there's two 

more things that we need to change right hereunder permalinks we need to change our 

permalinks and I'll explain what this is so right here we have our permalink settings and you want 

to have it under post name the reason why is because when someone comes to your website like 

for example your website com - about us right not a bunch of numbers and a really ugly permalink so 

post name is the best for SEO and it makes your site look a lot more cleaner so once you click on 

post name right here click on Save Changes next we need to fix this SSL right here so you notice 

right here on the top of your website how this says connection not secure and if you go to other 

websites like Google you're gonna see that this is a secure connection so we need to change our 

connection to a secure connection so we just need to install a free plugin right here in our plugins 

click on add new what plugins are guys there are essential applications for your website so there's 

an application slash plugin for pretty much everything out there just like your iPhone so right 

hereunder search plugins, you'll type in really simple SSL I'm not kidding that that is the name of 

the plug-in really simple SSL and this right here is a plug-in that you need it has 4 million active 

installs right here just click on install now and then you'll click on activate alright so right here 

it'll tell you that you're almost ready to migrate to the SSL now before you do this make sure that 

you have your password and email written down the one I told you to write down because it's gonna 

kick you out of WordPress and you're going to have to really laugh in so right here click on go 

ahead and activate the SSL alright cool so on the top right here you'll notice that the connection is 

secured now in the future I'm going to show you now how to log in to your website whenever you 

want to make changes to your WordPress website so right here you'll see your domain name so what 

I'm gonna do is just go ahead and delete all this and right here you'll type in WP dash admin just 

like that and then you'll click on enter so this is the address that you need to type in every single time 

that you want to make changes and login to your websites so right here I'm gonna enter in my 

username and my password okay and here I'll click on remember me and I will log in alright 

cool so all the general settings are done and your SSL has been activated so now your site is secure 

now as you guys use plugins and themes you're gonna get notices from the developers you can just 

close those messages they're just little things saying hey go give me a five-star rating etc so if 

you want to do that you can do that but you can always close all notices at any time okay so now 

we're going to move on to step three so we're going to download Elementor Pro so right here I'm 

gonna go to Darrell Wilson dot-com - Elementor now this isn't a feeling so if you guys do decide to 

use this link I do get a small commission and it helps me make these tutorials for you all for free 

alright so here we have the Elementor Pro pricing plan so we have personal plus and experts now 

with all these purchases you get a year of support and updates and you also get a 30-day money-back 

guarantee for any reason whatsoever so most of us that are just getting started out I would probably 

recommend the plus plan because with the Plus plan you can have it on three websites now 

personally, I think the best value here is the expert plan because for just a hundred dollars more you 

can get it on a thousand website so I think that is 

the best value as far as money goes and remember you do get full support and updates so if you have 

a problem with something or something's not working you can always go ahead and let them 

know and they'll fix any problems that you have on your website so right here I'm gonna click on 

Buy Now alright and this right here is the checkout page so right here you'll see that you'll 

be charged around $1.99 and then here you'll go ahead and put in your payment methods and all 

this good stuff now I already have Elementor so I'm gonna go ahead and log in to my account and 

I'll meet you on the very next page so once you purchase Elementor Pro it'll take you to your 

account so right here you can see your accounts your purchases your supports if you want to 

promote Elementor you can do that as well and then here you have your personal profile and then 

this is the experts tab the only thing that you need from this page is a download plugin so right here 

just click on download plug-in and we're going download elements or pro all right cool so now 

that we have elemental pro we can upload it to our website so right here in our plugins click on add 

new and we're just going to simply upload the plug-in to our website so right here you'll click on 

upload plug-in and then right now you'll go ahead and upload the zip file that you downloaded from 

the Elementor websites so this right here is the file I'll click on open and then right here I'll click on 

Install Now alright cool so the plug-in has been successfully installed right here just click on 

activate plug-in alright awesome we now have Elementor Pro on our website but we need the 

the base version of Elementor so right here it's going to say install Elementor now click on install 

Elementor now and then we'll click on activate plugin alright so right here saying welcome to 

Elementor and it's a little setup wizard but I'm gonna close this right here so right here on your 

dashboard it's saying welcome to Elementor Pro so I want to connect this to the Elementor website 

so I can get updates and support so right here I'll click on connect and activate and right here I'll 

simply click on activate alright awesome so now we have Elementor Pro activated so before we 

build out our website I want to install a few plugins that'll help us build our website so right 

hereunder plugins, we'll click on add new and right here under search plugins type in Envato 

elements everyone loves plugins because it's just a bunch of free stuff that helps you build your 

website so that's why everyone loves plugins so here we have the Envato elements right here we'll 

click on install now what this plugin does it gives us access to tons of free templates and blocks that 

we can use that'll really speed up the design process of our website and then right here we'll 

Click on activate alright cool and there's one more plug-in that we need to install so go back right 

here to add new under plugins and then right here type in peyote net Pio T and ET and then press 

enter and this is an add-on for Elementor so this gives us a lot of cool things like gradient buttons 

gradient backgrounds and also really cool stuff that we can add to our website so right here just 

click on install now and then click on activate alright cool so it'll take you to this page right here 

and this just has a list of features that we can add throughout our website like gradient text a 

gradient button sails pop article playlist all sorts of really cool gadgets and widgets we can use 

throughout our websites so there's nothing we need to do right here but right here you see this 

elements tab click on the elements tab now we install the first plug-in we need to actually go 

ahead and agree to the terms so right here click on agree to the terms and then click on continue and 

this is going to give you access to their library of templates that we can use for free on our website 

alright cool so this right here is our library of templates and blocks that we can use so we're 

gonna come back to this as we build our page the next thing that we're going to do is install our 

WordPress theme so we need to install the theme that we can use so that we can build our website 

on so right hereunder appearance click on themes so right hereunder themes click on add new and 

we're going to install a free theme so there are tons of free themes that you can use for your website 

and basically, every theme has a pro and a con so everything does something that may be another 

the theme doesn't and there's Astra hello Elementor 

ocean WP just tons of free themes that you can use and the great part is that once you're building your 

the website you can always switch back between themes without losing the content on your website 

which is really cool now we're gonna install a newer theme and it's called nieve so this is it right 

here so nieve is the newest theme out there and it has a lot of features like a header and footer 

the builder that a lot of themes like Astra at notion WP don't have so we're going to install this one 

right here it's called Neef so right here just click on install also if you can't find it right here in our 

search themes you can type in nieve and it'll take you to the theme as well and once the theme has 

been installed you can click on activate alright awesome so we now have installed nieve on our website so let's import a demo website and then 

we'll work off the demo website so right here it says try one of our ready to use starter websites 

Click on this alright and they have a bunch of free templates that we can use on our website so you 

can kind of go to this list and check out all these free templates that you can use and don't worry 

about it, you guys can always delete your entire website and then upload a new template later once 

you kind of learn how to use the page builder but we're going to install this one right here called 

web agency so right here click on import now right here it's asking us about what we want to 

import so the contents the customizer and also the widgets and then right here just click on import so 

right now I'm just installing the plugins and the content so it'll basically make the website for us 

automatically alright awesome so the content was successfully imported if you got an error you can 

just try again sometimes weird things happen you might get an error here and there and you can 

always just try it again and it should work so right here just click on view website alright cool so the 

the website has successfully been imported so we have our logo we have our menu we have our 

buttons let's go ahead and scroll down here just to make sure everything looks good and in order, 

everything looks clean everything looks good and 

it looks like we are all ready to rock and roll 

so let's go back up here let's check the other pages 

really quick 

so right here click on the about Us 

page and then we have our about Us page 

everything looks pretty good and then we have our 

contact page good and then our portfolio page 
so it looks like everything has successfully been 

imported so let's go back to our home page here so Nexis go ahead and build out our website let's go 

ahead and make changes and let's go ahead and modify our website to make it look like how we 

want it to look now there are demo images for all of you in the description below of this article that you 

can use to follow along in this tutorial so right here click on edit with Elementor and this is what 

we're going to use it throughout the article to build out our website alright so now we can start editing 

our websites on the left side right here we have a bunch of icons that we can just kind of drag and 

drop onto our website and then right here we have the pro features so these are here are the pro 

elements that we get with Elementor pro so we have animated headline we have all these other 

cool widgets and if you want to go ahead and drag something in you would just go ahead and hold it 

and then just drag it onto your page and then just drop it and that's and then right here to the left side 

you get a bunch of options where you can change the style and you can go ahead and change all the 

settings for the alignment and all this stuff so what I want to do first is we have this text right here I 

don't really want this text so right here we can change the text to 

anything but I don't want this text so right here under this pencil icon I'm gonna right-click and 

then click on deletes so that's how we can start deleting stuff that we don't want on our website so 

what I want to do here is I want to use this heading module right here because this is a pro feature and 

right here we have the before text and then we have the highlighted text which is this little red 

circle under this text so I'm gonna put make websites with Derril and then for the highlighted 

the text I'll put Wilson and then right here we have the option to do highlighted we can rotate and then 

here we have the shape so we can do something like curly or underline or double and you guys can 

you know to get the idea in the picture here so I'll just do a circle and then also right here we can paste 

the link so if you want to link that to somewhere else we can do that also right here we have after 

the text so I'll put an example so let's say for example that you want to have more text after this you can 

go ahead and do that if you choose to do that but I'm just gonna leave that there and then right here 

we have this style so the style is basically how you can style it so you can change the color 

typography and everything else and every single button and everything else on your website has 

the same style box so, 
for example, 

this one right here I can change the color to something like red or something like that so once you kind of learn 

one element you learn basically all the elements so one thing I want to do here is I want to go ahead 

and make this a little bit bigger because I think this is a little bit too small so right here under the 

the headline we have the text color where we can change the color of this and then also typography 

so right here under the family, I want to use Poppins I think Poppins is like the standard 

one and right here also we have animated text so here we can also change the fonts and everything 

else so maybe here I can do something like Montserrat I think by default the theme is actually 

using Poppins because it's a very friendly font and I find that most people see it and 

it's just it's easy to the eye so right here this text we want to make it bigger so right here I will 

increase the size of it like that something like that and then I can reduce this and then that's how our 

the site looks right now so it's pretty easy to make changes and everything now one thing I want to 

do here is I want to change this background image because it just you know it just looks a little dark 

and a little gloomy and I just don't really like it so if you want to add or change something to the 

In the background you'll click on these six dots right here and then right here we have a style here we have the 

a classic we have the gradients the article and then a slideshow so for example if I want to add a 

gradients I can click on this and then I can change the color to something like gradients so the first 

the color would be this and the second color would be that so now you can see it's a gradient color and 

then you can kind of go through these options and mess around with it like radial and you can 

actually do like you know where you want the start and the location so there's just a lot of 

different ways on how you can customize your website 

so right here I want to go to classic and me 

think standardized most people use images so what I'll do here is I'll go ahead and click on 

choose the image and then click on media library and these are like the demo images that you get so 

whenever you get images or you upload them to your website they're going to always be displayed 

in the media library but right here I'll click on upload files and I'll go ahead and upload the files 

that I gave you all for free into this article so here I'll click on select files and then click on open so 

right now the images are uploading to the server alright so the images have successfully been 

uploaded and the one I'm going to select is plants and stuff it's this file right here and I'll click on 

insert media so you can see now how the website it just looks a little bit friendlier it looks a little bit nicer it looks a lot cleaner than before but 

this button right here I want to change the color scheme of my website so right here under the Lord 

more button I'll click on this and I'll go to style so you're gonna notice right here that we have this 

gradient button feature and this is the plugin that we installed earlier so now we can actually apply 

gradients throughout our website so right here I'll click on the gradient button and I'll enable the gradient 

button so here we have some options we have the color and the secondary color and the location and 

all this stuff so what I'm gonna do now is I'm gonna kind of adjust this right here so for this one 

right here I'm gonna put 40 for the location to kind of add a gradient to it and then for the second 

the location I'm gonna put 87 and then right here for the angle I'm gonna put 150 just to kind of give it 

a little bit of angle like that now one thing you'll notice that this text is black and it just doesn't 

really look good so we've got to change that so right here under the button icon under the text 

the color we can change this to white and there you go so now you can see that the site looks a lot more 

friendlier it looks a lot more inviting and just really clean so our home page is done 

congratulations and one thing I want to notice to you all about your home page is a 

representation of your entire website so I will be having a web design course pretty soon and once 

you kind of make the style for your home page you need to kind of carry that throughout your 

entire website so it doesn't get tacky and ugly because let's say for example I scroll down right 

here and then they see yellow right there it's like there's no yellow right here so we want to go 

ahead and keep making changes to this so right here I'm gonna open this up and right here we 

have this plus icon now I want to add a new section right here in between these sections so I'll 

Click on this Plus icon right here and then if you want to just kind of build the site without using 

templates right here we have this plus section and here we have different columns so we can have 

one column two columns or three columns so I'll click on three columns I'll click on these little nine 

squares I guess that's to go back to the elements and then here we have Pro elements so what you 

can do here is say alright you know maybe I want to add in like a flip box so right here I'll take in the 

split box and I'll just drag and drop it until I see that blue line and then just drop it and there you 

go and then here you can kind of see how we can kind of decorate stuff so this actually has a front 

and a back and this right here controls the front and then this right here controls the back and if 

you want to style something just click on style right here and then you can kind of style it how 

you want it to look like you can make the icon bigger you can change the primary color you can rotate 

the icon to be a different part so see how the Stars kind of rotating so just go through these options 

and kind of just get an idea of what they do I don't really need to go into these in-depth because I think 

you guys know what these do right so you know it's just styling and making things look how you 

want it to look so let's go back over here to content and I'll click on these buttons again right here and 

let's say I want to add in something else so maybe I want to add an animated headline and then also I 

want to add in a button so I'll just drag and drop it under there and then here I can send our line as 

well and then right here under the Style section we can always go ahead and style that and you can 

always apply the gradient as well and then under the advanced features there are other options where 

you can kind of move it around so if you want to add space here actually I'll uncheck that if you 

want to add space so padding is basically space so you can see here how the buttons creating space 

and if I reduce it's it actually you know it goes back and forth so padding is basically space well 

a touch more we'll talk more about padding and 

margin a little bit later in the article but for right 

now let's just get comfortable and just use like the 

basic elements and then also right here we have positioning responsiveness and other things that 

we'll cover a little bit later in the Advanced section of the article but going back here I'll click on this 

and let's just go ahead and just drag in one more element to get you a little bit more comfortable 

here so I'll just grab in like a call to action right here and drop it and then for example right here 

just choose an image I'll choose this one insert media you know I'm actually really glad to 

introduce this module because before I had to actually create an image an image module a text 

module and a button module so when elements are first coming out it did not have this so I'm actually 

really glad they actually introduced this and they have different skins so they have classic and they 

have covered it's just different styles and how you can design your you know your website and 

everything so this is how you would build out the website in the basic way however we are going to 

use pre-made elements that'll make it a lot faster so I'm gonna delete this section right here so 

under this X little button right here I'll click on that and then right here on the plus icon I'll click 

on this green icon right here and this is the plugin that we installed on our website called in bottle 

elements so they do have a lot of templates that 

you can use but personally, I think that most people tend to use the blocks the most so right 

here we have blocked so click on blocks and here we have different blocks so we have hero which is 

the landing page call-to-action about and all these different categories for our specific blocks so for 

example right here let's go ahead and click on the About section so I'll click on about and here we 

can scroll down and we can see that we can just click on add this to the page and it'll add this block 

to our page so basically this plug-in will take care of all the design aspect so we don't have to build 

everything from scratch because that could take a long time you know it really really can so the one 

that I installed was the one on the bottom I believe I think is right here on the bottom on the about Us 

section this is it right here so this is the one that I installed right here and then I'll click on add this 

block to the page and you'll notice how this requires Elementor pro because it's using pro 

elements alright cool so now we have this really 

the nice section right here and we can make changes to this so I'll click on this right here and I'll just 

put Daryl Daryl Wilson alright and then right here we have the image so if you want to change this 

image right here you can always just click on choose image and then change the image in the 

back but personally I'm just gonna leave it standard for now and right here under style we 

have the style of everything and here we have content so what I want to do is I want to change 

the content actually so right here under the typography I'm gonna change this to Poppins 

now a big word of advice for all of you watching this please only have one to two fonts on your 

website if you have more than that your website will look very tacky and it won't look good so here 

again I'll do Poppins alright so you notice here how we have this style and you know it can be 

very tedious to actually do that again and again so let's go ahead now and just copy elements so right 

here I'm gonna right-click and click on the copy that we got copy right and then right here I'll right-

Click on this text and here I'll click on paste style so you notice what happened right there what it's 

gonna do is that whatever I did to this if I copy and paste it's going to take whatever settings I 

have and it's gonna paste it over here so you can see how that will drastically speed up the design 

process of your website without you having to kind of redo everything, in fact, we're gonna copy 

this button right here and we're gonna paste the style throughout our website so we can always 

have the same style button throughout our website any one thing I want to change here is the hover effect because when I hover over this one's 

black and I just something that looks good so if I click on this button right here so here we have the 

normal and then we have hover so click on hover here under the text color I'll change this to white 

so now when I hover over the button it's gonna stay white and I think that's a little bit better than 

what it was before also right here we have hover animation so if someone hovers over this for 

example shrink it'll get smaller and then here push it'll push and then you know bounce in the bounce in 

something like that you know just it encourages people to click on the button so now that we have 

this section right here I don't want this section right here because this is the default standard and 

now it just doesn't really thing with our website no more right so let's go ahead and delete this I'll just 

delete that and right here under plus let's add in another section right here so I'll click on the 

Envato elements button click on blocks and next let's go-to features and benefit so here we have the features and benefits blocks and you can see that 

there is a lot of blocks that we can add to our 

website and the one that I chose right here was the see if I can scroll down just keep scrolling just 

keep scrolling Pancho's all of them at the bottom of the page, huh that's kind of what I do that Daryl 

here we go so we have the benefits features and benefits slider so let's add this block 

to the page and I'll kind of talk about how you can move stuff around all right awesome so now I 

have added this to my website but I want to move this so I'm gonna take this and just drag and drop 

it like that now for features and benefits I want to change the colors of this so what I can do here is 

I'll just go to style and thing just to black and then for the typography I can put pop-ins or remember earlier how I can copy and paste styles if I want to do that

 so I can either go up here and copy the styles and paste it right here or I can just do it manually it really doesn't matter 

so here on this section right here changes to black as well because I don't have any blue

 so you want it you don't want to make your website really tacky and stuff

 so I think this right here is just fine maybe I can even change the typography remember earlier how 

I said keep it at like maybe one or two fonts at most I think even two fonts are pushing it personally but that's just my opinion

 so we have this title right here now I want to change this button scheme 

so what I can do right here is just go right here copy scroll back down and then pay style and then we're all done now I want to align this 

so I'll click right here and under alignment, I'll click to the left now you can also upload your own images right here 

so if I click on this right here you'll see these images and if I want to have my own gallery I can click on this pencil click on add gallery and then simply just add in any images I want to the gallery and click on add to the gallery 

so that's how you can have your own images rotating and display your own images instead of the demo images 

so I'll click on X now one thing I want to do here is I want to add a background to this 

so I like the whites but I just want to add a background just because I'm feeling you know if you're feeling dangerous

 so you're clocking these six dots right here and go-to style and also what we can do is add in an article background I didn't really show you all how to add an article background just yet

 so if you do want to add an article background just click on an article right here and just paste the link 

so for example, if there's like a 4k beach from YouTube you want people to see just go ahead and paste the link and you'll see that the article will start playing in the background like that 

so that's really cool but for our specific website it doesn't really match you know we have the beach and then we have black text and then there's like elegant stuff but that's just an example of how you can paste article  for your background 

so I'm gonna go ahead and get rid of that go-to classic and go to image personally guys I know beginners love article backgrounds but article backgrounds they don't really play well a lot of devices especially with different screen sizes 

so try not to use article backgrounds a lot they have a lot of issues and problems from what I've experienced 

so I'm gonna take this picture of the mountains and I'm going to insert this and there you go 

so now I have this picture of the mountains and it just makes it a little bit classier makes it a little bit nicer and I just like that feel and style of this

 so I think this part right here is done 

so what I'm gonna do now is scroll down and we have this section right here now you can choose to have this style in fact right here if I just click on paste style and then right here click on paste style you'll now see that we have this style applied through our websites and you know this now this kind of matches and correlates to the website

 so I can choose to leave this or take it away if I want now remember if you want to link someone with these buttons click on the button and then right here under the link just put your website or wherever page you want them to go to 

so you know who Wilson command then they'll go to my website if they click on this link which you can also do right here is under link options you can open it under a new window 

so that means if I click on this button it'll open up a new tab in my browser and they'll go to my website or whatever website you want them to go to or whatever part of the website you want them to go to so here I'll go ahead and say you know it's let's just add in a new section 

so right here I'll click on the plus icon and Envato elements and then we'll select blocks 

so next right here I'll click on services and this is the one I actually chose 

so I'll just click on add this block to the page alright awesome 

so here we have this text and here we have these icons 

so if I click on these icons right here we can change this to anything that we want we can change the alignments and right here we can just change the font

 so you can put in like amazing websites and capitalize that huh and then of course under the Style section we can go ahead and change the topography and the solve everything 

so what I want to do here is let's just go ahead and change this right here

 so under the style, we'll change this to Poppins Prada kind of fonts that huh but you know what's on this section right here I want to make this gradient 

so I have Poppins applied but I want to make this gradient 

so right here we have gradient text click on gradient text and here click on open 

so now you can see that we have this specific gradient applied to our text and I'll just change the same thing before

 so I believe right here we had a 240 right that's a 40 and then for the location I put 87 and then 150 right 87 and then 150 150 

so you can see here how that looks really good you know it just looked really clean it looks really elegant and it just looks really nice and you can always go ahead and copy this right here and then you can always paste it over here as well if you want to do that 

so that's up to you though you know it's gonna actually take the size of the font as well 

so I'm gonna do POG Rafi you might want to reduce the size but you know when you're using gradient guys you have to be very careful because if you use gradients it's very easy to make the site look really bad really fast 

so I wouldn't use too many gradients I know gradient looks really nice but if you just add a little bit here and there it really makes it look a lot better but if you have too many gradients it's gonna make the site look really tacky 

so I want to undo what I just did 

so right here on the bottom right here we have history and let's say for example that you did 

something that you don't want to do 

so we have the heading style that I see if I change here click on this there we go there we go

 so that's how you can kind of go back and see okay I made a problem let's go back and see our history

 so all of your histories right here is saved throughout Elementor 

so now that we've done that right there I want to actually bring this up 

so I want to take these features and I want to put it above you know I think on the demo website I have this part above this

 so let's do that 

so what I'm gonna do now is take these dots and I'm gonna hold it I'm gonna scroll up with my mouse and I'm gonna drag and drop it like that alright and now you can see that this section right here has now been applied and everything else looks pretty good

 so at this point, you can kind of go to this and make any changes you want 

so I think most of us are using Poppins right 

so yeah Poppins and then right here you can just copy this and then just paste the style and then paste the style and then there you go and then right here you can always go ahead and change the actual image to whatever image that you want now also if you want to use the icon library I recommend that as well 

so I'll take this icon right here and I'll just drag and drop it now this icon I'll line it to the left side and then right here we have the icon library

 so Elementor actually has a lot of different icons and a lot of different things that you can add

 so if you want to add that to your site you can do that

 so I'll just grab this one right here I'll insert that and now I'll just change this to black

 so here let's add in a new section 

so we're almost done with the home page which is the most important part 

so here I'll click on this plus button and then here I'll click on in the bottle elements also like blocks and the one that I chose is the image gallery 

so I want to start using the images throughout our website 

so here there are just different images now images can be the trickiest thing when you're building websites to be quite honest because image sizing is everything because if you have different images with different sizes it's gonna come out a little distorted 

so personally when you're making your website try to use the same image sizes if you don't know how to do that just go to fiverr.com and hire someone to just help you size the images correctly because 
 I build websites for a lot of and I've seen that they've given me like 50 images and they're all like you know they all of them are they look very different and the site looks terrible but the one that I chose was a see right here this one right here called image gallery carousel 

so right here I'll add this block to the page all right 

so you can see here how the gallery has been applied and people can actually go ahead and rotate and see all of our images like this right here and when 

I click on one image you'll see that the other images they just kind of slowly go and they kind of keep showing 

so that's pretty cool 

so right here is the image carousel and we can always go ahead and change the images right here if we want to do that 

so just like before if you want to add in your own image here I'll click on add to the gallery and I can just you know add in the stairs and add that to the gallery and then insert this into the gallery 

so here we can see the images slowly sliding and then we're going to see these stairs just pop up right there

 so that's pretty cool 

so that's how you can display images on your gallery and then right here you have different options 

so this is basically controlling this section right here 

so for example right here we have navigation do you want dots or arrows you want two slides to show you can show three images at a time like that's even four images at a time but 

I think one was good you know yeah that was well good and then right here style 

so remember whenever you want to style this right here this is the section that you're going to go to 

so we can style this and we can change the size of this we can change the color of it as well and then there you go

 so our navigation is now changing and then for the images, we can have a border to it 

so if you want to add in a border we can add it in a really cool border 

so here we'll give the border a little bit of width I'll click on link values together and I'll add in just like I don't know ten just give an example and now you can see that we have this really nice border effect to our images like that 

so there is that border and we can also change the color to anything that you want 

so something like that you know it looks really cool

 so that's how you can have a really nice gallery on your homepage next let's add in a call to action 

so when you're building your website you kind of wants to encourage people to you know to check out an offer or something like that 

so right here on this plus icon I'll click on this I'll click on the bottle elements click on blocks again and then we'll find the call to action module here it is the call to action and they have a lot of different call to actions and

 I chose this one right here and I'll add this block to the page you see the websites you want to go ahead and kind of introduce different styles on every block 

so we have this header section which looks good you know and then we have this section which looks good this section which you know it looks nice and then we have this section

 so essentially what you want to do is you want to go left to right and then maybe like three columns left to right buttons in the middle 

so for every section, if you had buttons in the middle the site would look very ugly you know but we since you change every section the site looks a little different and it just looks better than having just call to actions in the middle all the time

 so right here we have the button to the right here we have no background no buttons here we have buttons and background and you'll make it look a lot more professional than just having a call to actions and buttons on every single page because our section because that looks really ugly now I'm lazy guys I'm really lazy 

so I'm gonna go ahead and copy this and we're gonna paste this style right here and then here I'll make this Center aligned and then we're done 

so this can be something like getting 60% off and then this can be something like talking about your service and this can link them to your contact us page and if you want to build an e-commerce website 

I have a full tutorial that also I'll put that in the description below as well it's actually a really good article and it's really easy to set up 

so we added a call to action which just it just adds a lot of different styles and since this is a block right here and 

I think that kind of matches the scheme of our website 

so we have like a black white and gradient style

 so I think right here that just works just perfect next well go ahead and add in the last section which is the testimonial section

 so open this right here click on this plus icon and the umbrella mints under blocks we will find testimonials 

so right here testimonials slider now at this point guys you are pretty much pros and 

I think that now you can kind of go through these and pick something that matches for you but I'm gonna go ahead and select this one right here 

so a block to the page and of course this is using Elementor pro and we have elements or pro

 so that's awesome alright and here we have the testimonial section

 so what I want to do here is I want to go ahead and change this text to Poppins right and I also want to go ahead and add in a different background

 so hero Poppins and I'll go ahead and add in a different background

 so if I open this right here or close this I mean you'll see that the site has is kind of 

I guess you want to say this like a pearl white background and it looks like grandma's house you know it doesn't look that good 

so we're gonna change this here

 so I want an all-white crisp clean background 

so right here on the dots under the style, we'll click on image right here and I'll select one of the images and then 

I'll click on insert media it's called white background in case you can't find it and there you go 

so 

• I feel like this is a lot friendlier rights now another thing that 
• I want to do is 
• I want to change the gradient you know 
• I want to add this gradient

so what we can do right here is go back up here and I'll copy this cuz I'm lazy rights and I'll paste that setting right there paste that like that there you go 

so that looks a lot better now you'll notice right here how I didn't make this gradient and the reason why is because we already have too many gradients you know we have gradient here now when you just scroll down and they see gradients very close it looks tacky 

so that's why I did not edit gradient there because I'm a really good designer 

so I know the rules of web design 

so here we have this section right here and if you want to adjust these tutorials

 I'm sorry these testimonials right hereunder image one we have the image one and then right here to be the testimonial here you can put the name of the person in the title 

so for example right here we have a picture of this girl right here

 so what you can do is just click on choose image will select I don't know will select this guy right here enter that into media and then here I'll put Darrell Wilson and then for the title CEO

 so you see right here in Darrell Wilson CEO and then right here you can to change the contents of the testimonial to say oh this is the best oral on 

 I will give Darrell a like and a subscribe and if 

I don't then I suck that's what you're gonna put right there in the content section and then right here under the Style section you can change the background color you can change the the the image you can go to the content and you can kind of mess around with these settings like by adding a gap or border-radius a border-radius guy is essentially making it square or circle 

so that's basically what that does and then the content you can change the content settings right here such as the font and the typography and all that really cool fun stuff 

so that's how you can add in testimonials now right here we have the bottom section we can keep this or not I'm gonna delete it just because 

I feel like it's too much content on the home page and then right here 

I don't really want this either the featured work
I do want this actually but I want it up 

so I'm gonna hold these dots and I'm gonna drag it up like that's and drop it all right cool and right here we have testimonials now I already have testimonials 

so I don't really need this anymore 

so if you want stars you can just kind of drag them to different parts of your website like maybe I could drag them right there and then 

I can align them to the center and then right here I'll just make them really big you know something like this and there you go

 so that's how we can add stars but I don't want this section 

so I'm gonna delete it and then this section right here I do want it I think this is a good ending section but I want to change this button to gradient 

so remember how we did that's we can go to our button and we can copy this and then I'll scroll down and then we can go ahead and paste that salad right there and then we're done with our homepage 

so now we can go ahead and take a look at our home page and you guys can see that the website looks amazing 

so now you have this beautiful home page that we created for the very first time and for a beginner standpoint this is very impressive

 so congratulations on the home page now for the rest of the pages I have templates for all of you

 so I'm gonna show you now how you can export your work and then how you can upload it to your website 

so you can use them on different websites or even different parts of your website and don't forget once you make the changes you'll need to update it 

so right here I'll click on update 

so here we have this premade template that the theme made for us already however I want to show you all how to import and export templates

 so if you want to do this for other websites or if you want to import a layout that you created on another website let me show you how to do that

 so in the description of this article, there's a link to my website Darrell Wilson command it'll take you to this page right here where you'll see Elementor layouts now I'll just link you to the actual product in the future 

so right here is the Elementor web agency kits 

so I'll click on this right here 

so here is the actual complete website for you already made 

so what we're gonna do is we're gonna download this and then we're gonna upload the templates throughout our website 

so you don't have to remake everything from scratch 

so right here you'll simply click on add to cart now this is a free layout that I've created for you all

 so it's not gonna cost you anything at all and then right here you'll click on View the cart and right here you'll click on proceed to checkout and then right here you'll just put in your first name and your email address or put in Daryl and then right here I'll click on place order alright awesome 

so once you download it right here it'll say download Elementor web agency, Kids 

so click on that 

so let's go back to our About Us page and now right here I'll click on edit with Elementor alright and right here I'll click on this plus icon and I'll click on this right here the gray folder icon now with Elementor you do actually get premade and templates as well 

so right here is some blocks that you can get personally I think that the ones that we use are a lot better there are a lot nicer and these are just black and whites and although they can be decorated nicely I feel that's it would take a lot of work to make them look good 

so that's why I didn't really include them right here are pages you can use them throughout your website and since you're a pro user you get all of the pro templates now they do add a template every single month 

so there will be a new template 

so but I made this article there was probably only like four or five templates and they just added one this month

 so that was pretty cool of them 

so right here we have my templates and whenever you make a template it's going to be displayed right here

 so you can see here how there's some templates that we've already that we already have because of the involve elements plug-in now right here you'll see this little import template plug-in or import template button click on that so this is where you're going to upload the file now there's a really cool shortcut on what you can do 
so what I'll do is minimize this and here is the elements for Web Design kits I'll open this folder and here are the files that I need so I have the home the contact and the about us etc 
so what I can do here is just take this Jason hold it and drag it onto the page drop it like that here I'll make this a little bit smaller I'll close that okay so I uploaded the template and this is what it's called right here it's called the about US agency simply click on insert so here you go so now you have this fully functional about Us page that you can use on your website 

so everything's fully designed now right here we have the our team section so you'll see here how there's these four slots so what you can do is you can insert your team right here 

so you would just go ahead and upload the image that you can use for your clients or even your company and then just upload them 

so I'll just grab the scroll right here and insert media and then right here if we can do the same thing and so on and so forth 

so I didn't purpose I purposely left out the images because you know if it's your team I don't want to put the picture of other people because it's your company right 
 so here I'll scroll down and here we have partners so here you can just add something if you want about your company or whatever you want to add about your partners one thing I want to note that if you click on this right here you'll see this image but there's nothing there and you'll see the actual PNG file you can just delete it and it's gone

 so sometimes you're using Elementor and you export templates you just get some weird stuff you get weird errors so just there you go that's all fixed 

so that happens once or twice and then scrolling down here we just have this really beautiful call-to-action and we have the original about Us page still here so what you can do is just delete it 

so right here delete it delete it delete deletes deletes and then you're finished 

so you can scroll up and just take a look at your new websites of course you might want to change the actual images here yeah this really cool feature where we actually hover over this and the crew actually moves we'll talk more about that in the advanced features when we talk about advanced features of Elementor and that's it 

so you now have a beautiful about Us page that's already made for you so right here click on update so next let's go to the portfolio and the Contact Us page now there's a shortcut that I want to talk about 

so if you hold command + E or for those of you using Windows Windows and E you'll notice this finder box right here and what you can do is navigate your website without having to exit out of a page and having to go and exit the Builder

 so I want to go to the portfolio page 

so I'll type in portfolio and just by typing in Pilar t we have a list of pages 

so right here I'll click on portfolio page and there you go 

so now it's actually navigating through out our pages without us having to leave and next to the page which takes a long time and it give me a pain in the ass you know to be honest though let's now upload that second template 

so right here plus icon template and then right here I'll simply click on export template I'm sorry import templates and then right here we have the portfolio page and I'll click on open 

so now it's exporting I'm sorry it's importing the portfolio page for us alright awesome 

so you'll see right here portfolio page agency right here click on insert all rights awesome

 so you'll notice right here we have this portfolio section we don't need it 

so I'll close this and then I'll scroll down right here and you'll see that everything has been successfully imported everything looks really good 

so right here some images didn't show up and if that happens sometimes guys you can just use the demo images 

so for example I'll click on the Andreev le and then right here choose the image and then for example I'll just select the girl and there you go now right here we don't need any of this stuff right here 

so you can choose to keep this if you want and you can you know drag and drop stuff you can custom my stuff but for this article I'm just gonna get rid of it because I feel like this right here is just enough content for the portfolio page we have the gallery right here of whatever I want to show we have some more testimonials about how great it is and then we have like just go ahead and contact us you don't want to overwhelm your clients or your website with a bunch of unnecessary stuff 

so here I'll click on updates now let's say for instance you made some changes to this but you want to export it this time 

so you want to have your own layout that you can use and upload it just like I did to you guys 

so what I'll do right here is right here we have to save options right here I'll click on save as templates 

so this is going to be the tutorial template

 so this is examples of if you want to take the work that you've done and export it and maybe apply it to a different part of your website 

so right here I'll click on save now right here on these dots see these dots right here how it says export I'll click on export 

so now what I've done is I've exported that layout on to a JSON file 

so now I can take that same file and upload it on my websites and just use it on any part of the website 

so let's go ahead and go to the next page 

so this right here is done 

so we've done the portfolio page here I'll open up the finder by by clicking on the windows + e or for those of you on Mac ctrl I think it's command e yeah command E 

so let's go to the contact us page now aircon there is contact us contact pretty cool we don't have to keep exiting I mean that makes it really simple but let's go ahead and upload that layout that we exported just to see if it's working because maybe you want to see how I do it and if there's a mistake I don't want you guys to freak out and yell at me you know so let's go ahead and do that 

so you don't have to do this is totally optional but let me just do this really quickly for those of you who want to export upload your layouts 

so right here I'll click on the folder import layouts select the file and I'll select the file that I exported alright 

so here's the file that I exported now you might want to give it a name because it can be confusing

 so right here you can see I just actually exported that 

so right here I'll click on open now you'll see we have two files - the total template 

so I'm gonna actually insert that one right there and there you go 

so now we have that same page that we exported on our Contact Us page it looks like the image actually carried over there 

so you see that you know sometimes guys that just happens you know I don't know why but let's actually now upload the proper page

 so I'm gonna delete all this right here 

so I'm gonna delete everything on the contact us page because I don't want it and let's upload the Contact Us page that I gave you also same thing and then here is the Contact Us page let's click on open it's going down here we have the contact us agency and then I'll click on insert and there you go 

so now you have a beautiful Contact Us page already made for you and everything is ready to go 

so you can see here how the page looks great and let's make this expand it a little bit 

so you can see what we're doing here and there you go 

so now we have the contact us we have some information about the company we have a beautiful contact form and we have these happy people right here reassuring you that they are happy all right

 so let's now go ahead and test the contact form to see if it's working 

so first click on the contact form now you're gonna see email right here 

so you have form fields you have submit button you can change the button what it says - a different color or you can make it change to whatever you want 

so right here is email now right here it's going to this specific email and it's going to tell you a message 

so it's going to be from this email right here and it's going to reply to that email as well 

so go ahead and just put in the email right here as the email you want it to go to 

so I'm gonna put mine as I'll do Darrel  and I'll click on update 

so next let's test out the email 

so I opened up my Gmail right here and I'm going to go ahead and exit out of this and I'm going to submit a form on the contact form right here oh what's that man and then I'll click on submit message and then let's go to my email and right here you can see a new message from my blog and there you go 

so hey what's up man and then there is the information 

so now you can see how your website is connected to your email inbox 

so whenever you want to receive messages just make sure that you have this layout and it'll all work fine 

so lastly I'm going to show you all how to add pages and add them to the menu because we didn't really cover that just yet 

so right here click on the plus and click on the page 

so what I'm first show you all is how to make a blog page 

so right here blog click on publish and publish next let's make another page 

so I actually have to exit out it's kind of annoying they change that in WordPress 

so right here we have plus new and go to page and we're going to do the pricing page now and publish and publish here I'll close this 

so the first thing that we're gonna have to do is we're going to assign these pages to our menu so right now if I go to visit sites you'll see that we have the home the bouts and portfolio and contact but we don't have the blog or the other page on our menu 

so let's add that 

so there are a few ways on how you can add it 

so right here I'll go to the dashboard we have appearance and menus 

so right here on their pages you'll click on view all and you'll find the page that we made 

so also the blog page and add that to the menu and here I can rearrange it by dragging and dropping and then I'll click on save menu and I'll take a look at our website again and now you'll see the blog page is there 

so I'll click on the blog page and of course, nothing's there because we haven't added anything to the page but that's okay 

so we have another page and let's add that to the menu through the theme customizer now 

so this is an alternative way on how you can adjust things on your menu right here we'll click on customize now we're going to talk more about the theme customizer in just a little bit because there's a lot to cover with the theme customizer but right here we have a bunch of different options 

so right here under menus, we have our menu right here I'll click on the menu and right here we can add an item so I don't add them to the menu and here it lists our pages 

so right here we have the pricing page 

so I'm going to add the pricing page to our menu and then here I can also rearrange it and then click on publish and there is the pricing page next let's actually apply our blog to our specific blog posts so we're gonna make posts in just the bids but I need to tell the website where 

I want the blog posts to be so right here in our home page settings under post page you'll select the blog and then click on publish so now whenever you make a blog post it's going to display on your blog pages so right here I'll click on the blog and you'll see that there is some blog content right here it's really stylish 

I really like this theme it's really clean really needs so now that we have a blog page let's first go ahead and upload the last part of our website which is the pricing page 

so right here I'll click on edit page because you'll notice another Elementor is gone and here you'll see edit with Elementor so if it's if it's gone in the front end it'll be in the front and everybody in the back end for sure 

so one thing I want to note is that so we have some options right now 

so we made a page from scratch but we need to actually adjust this right here 

so we have the theme customizer settings you can have it contain or full-width also right here we have the option not to have a sidebar 

so if you don't want to use the theme customizer settings you'll need to change it to full width but right now we are using the customizer settings 

so I'm gonna leave it as customizer settings and click on updates right here I'll click on edit with Elementor 

so we can now design the page with the page builder 

so same thing guys simple right here I'll click on templates my templates import templates select File and then pricing page and click on open here I'll scroll down I'll find pricing page and click on insert alright awesome 

so now you can see that we have our pricing page here 

so the pricing tables have been made for you 

so for those of you who want to maybe become a web designer here are some prices that you can charge and I will be having a web design course coming out very soon and I'll leave that in the description below this article for those of you who want to pursue your career in web design because I myself the web design for I want to say 3 to 4 years and I met some crazy people 

so right here you can see here how some of this image - images it improperly export 

so what you can do again is just use demo images so if that ever happens just simply grab a demo image and there you go I'm like Elementor because it really sizes the images very easily

 so it's a lot of other themes have a lot of resizing issues but Elementor does really does a good job at that 

so there is the pricing page and we are all set 

so here I'll click on updates and at this point you not have a fully functional website 

so we have the home page the pricing the about is the portfolio of the contact and your site looks amazing 

so one last thing we want to do before we jump into the theme customizer is I'm gonna show you all how to create a blog page 

so here you can talk about your feelings like oh my girlfriend sucks or my boyfriend won't get a job or whatever you want to talk about in your little world of whatever 

so here under plus new will click on posts and this can be something like top 10 things women hate now one thing to note here is that featured image this is the image that your blog post is going to display 

so whenever you see like people will share stuff on Facebook and you see the image and the title this is the image that you're going to make people see when they see your title 

so right here make sure it's something that you know correlates to something that you're talking about 

so here I'll just paste in some demo content and then I'll click on publish and here I'll view the post and this picture is actually much better 

so you can see here how it's a little it's bigger and it just looks a lot cleaner and it's just a really nice-looking blog post 

so that's how you can make blog posts to your websites and under the blog section every time make a blog post is going to display right here alright awesome 

so now we have a fully functional website 

so let's move on to the next section where we're going to talk about the theme customizer settings 

so theme customizer now every theme in WordPress has a theme customizer 

so what a theme customizer does is that it controls virtually every part of the website that the page Buller does not such as the blog layout and the header and footer and other various parts of the website 
so for example right here we have layouts and here we'll click on blog archive and let's just go to the blog page really quick to give you an example 

so here you can see the layout of the blog now you can change the layouts by clicking on these little icons and it'll virtually change the style of the actual blog 

so you can see here how the blog changes and then right here the images are on other sides now right here you can actually take stuff off 

so right here it says by admin and the dates you can simply just click on that and take those off 

so now it doesn't display 

so you can kind of go through this right here and miss around these settings for the blog also right here for the single posts as well 

so for example on the actual post itself you can take off the title in the meta the thumbnail the content the tags and also the comments I'm not sure why you want take off the content but for the people out there might want to 

so if you want to adjust this you can you know drag and drop it or if you want to change anything you can do that right here with the theme customizer 

so let's go back here and also right here for the container you can change the actual width of the entire website by doing that but I think most of us want to use the page builder for that I don't want to mess around with the width because you've already design the website with the full width anyways 

so let's click back right here and back now we have the header option 

so you can actually build out a custom header with a knee which is really really cool 

so let me just go ahead and explain how this works 

so we have a top bar we have a middle bar and then we have the header at the bottom 

so right here click on the plus button 

so right here we have 6 icons 

so what I can do here is just add in something like HTML and then just go ahead and put in whatever you want 

so I can put and whatever I want and here I can actually drag this like that and I think I can even make it a little smaller too 

so the header builder with Nev is incredible because you can actually just say okay I added that let's add in a button and then right here we can change the style of the button maybe put in a background of black right something like that now personally 

I don't think it looks good there and you know we need to change the actual text to white that's really ugly yeah yeah right oh that's you know 

I think that's even worse I think that's worse there we go white 

so what I want to do now is I want to take this button and put it behind the contact 

so right here I'll take the primary menu and I'll just shrink this down a little bit smaller and here I'll take the button and then just drop here we go we've got to make it a little bit smaller and then there we go now if it's you see how cool that is 

so with this theme, you can just fully customize your menu any which way you want here we have the logo site and identity 

so if you need a logo there's a link in the description below to fiverr.com this website right here these guys I'll make you a logo for like five dollars it's really really cheap 

so right here just type in logo and I got my logo through fiber comm because they're really cheap and they're really good 

so for example right here you can go ahead and go to budgets just type in zero to ten dollars you know $1 to $10 and then apply and then people will make you a logo for as little as ten dollars and their logos are actually pretty nice 

so if you want a logo checkout fiber comm I'll leave a link in the description below to this website it's really cheap 

so here you can actually go ahead and remove it and upload your logo instead and then you can go through these options right here and just mess around with it and change stuff now also right here you see how the fiber has that green little circle that's what the site icon is 

so let me go and add one really quick so I'll just grab in a demo one right here and go to crop image

 so now on the top left right here you'll see there's an image of the actual phone 

so that's how you can have your own site icon here I'll go back 

so right now you can just kind of get an idea 

so if you want a third menu right here click on the plus button and then here maybe add a menu icon we can add in a search icon we can add in a secondary menu and 

so on and 
so forth 
so here a search form and then we can make this smaller now I don't have a secondary menu created 

so if you want a secondary menu created just go to menus and then just create a new menu and add it as your secondary menu 

so that's basically how you can kind of style your entire header 

so here in our style, you can change the topography you can change the weights and the font size and everything else 

so weight is just the size of the text 

so you can make the text really fat or you can make it really thin like that 

so go ahead and go crazy knock yourself out with these options and you can have just a really cool looking header also right here we have header presets 

so this is something standard maybe this is something where they creates and they're really good designers 

so maybe you want to use their designs 

so you can do that if you want to do that I think that looks really clean I don't know what do you guys think let me know in the comments below what kind of head are you guys like alright 

so let's go back over here and here we have footer as well

 so footer is the same exact thing guys it is the same thing as the header 

so for example right here plus here I'll put in footer 1

 so here we have footer 1 now what do you want inside of footer 1 well let's add a widgets right here a lot in a text widget and here I'll put in about us and then here you can put in some content about your company now let's scroll down right here to give us an example of what this is 

so right here about us 

so I'll put on some demo content there and let's add in a new widget 

so right here plus footer area 2 and then we can add in something else 

so you can add in a menu you can add in something else but I'm going to delete this and add in something else maybe you want to add in a calendar you and I'll drag that right there and then right here we can add in footer area three and then we can do something like a you know just like another text widgets 

so or a recent pose now this calendar is way too big 

so it's making our and you look a little ugly there 

so I don't want that there 

so we can delete that and then right here we can add a footer area for and what I'll do here is I'll make this bigger now what we can do as well is we can install plugins that gave us social icons 

so let me click on publish here really quick and let me go into the backend now you don't have to follow me here I'm just giving you an example of if you want to add different stuff to your footer and header 

so right here under plugins you'll click on add new here I will type in simple social icons now there's a lot of plugins that you can use for social icons or header in the footer and to be quite honest it's really hard for me to give you advice you'll just have to go through each one and just find out what you one you like to be honest but right here I'll install simple social icons and click on activate alright 

so let's go back to our theme customizer 

so here I'll click on visit sites and go back to the theme customizer I'll go to my footer and then here under footer area for all out of widgets I'll scroll down and now you'll see simple social icons 

so I'll click on this right here and now I can just add in the icons I want to the footer right here 

so here you would put in your behinds URL or your URLs for Facebook pages or Flickr or something like that and here I'll put like I'll follow us 

so you can customize this by changing the colors in the background but I'm just giving you an example of how you can add gadgets and widgets to your footer 

so next we have typography 

so this will actually change the fonts throughout your entire website 

so right here under general we have pop in 

so you notice earlier how our building on our website that a lot of this was Poppins and that's because you can actually display a global font right here through the general and typography section and then also for the heading 

so once you have specific heading tags you can display a specific font and style for those specific h1 h2 h3 tags etc 

so for example this right here to be h1 this right here would be h2 

so you can actually design everything and that applied to all of the h1 tags and then over here under h2 you can design this and this will be displayed through all of the h2 tags as well 

so that's just it's another one how you can sound design the font on your website here we have buttons 

so earlier we saw we have the buttons at the top

 so I took it out but if you want to add buttons to your menu right here this is where you can customize the buttons 

so let's go back menus we went through menus widgets we talked about widgets home page settings whenever you make a brand new website you always need to select your homepage as your homepage because you need to tell the website what is the main homepage of your websites and then for the post page we set it to blog and lastly we have additional CSS but this is more for developers and people who are serious web designers 

so if you're a beginner I really wouldn't worry about CSS right now 

so I made all the changes to my website but I do want to change the header back 

so right here under header I'll go to header presets and change that and then here I'll click on publish and that's it 

so that is the theme customizer and a nutshell  all right party people in this next section I'm going to show you how you can optimize your website for all devices 

so we're gonna optimize our website for tablet and also mobile devices 

so on the bottom left of your screen right here, you'll see this responsive mode 

so click on responsive mode and here we have the desktop the tablet and the mobile 

so right here well first click on tablet and we'll optimize our website for tablet users 

so right here you can see that this is pretty standard I don't really see anything that doesn't look like needs to be optimized except for this section right here 

so we have this padding-right here and the text is kind of scrunched right here 

so let's actually fix this so the first thing I'll do is get rid of this padding-right here s

o here I'll click on these six dots go to the Advanced section and here you can see tablet is selected 

so right here I'll just put 0 and then for the bottom I'll put 0 and that got rid of the padding next we have this text right here 

so I'll click on the text and I want to Center align this you know I want it to look a little bit more cleaner 

so here under the style I'll click on Center and then the same thing here for the divider we can Center this and the same thing here for the button there we go 

so this section looks pretty good 

so let's keep scrolling down just keep scrolling 

so as you go on through your website you want to make sure that if you see something that doesn't look correct make sure to fix it because Google will actually rank your website on the search engine depending on how well your website is optimized for mobile 

so it's very important now we have this section right here 

so we have this text on the bottom that we really can't read and then we have this image right here that displays first now personally I think the text should be just displayed first right 

so let's fix this section right here 

so right here I'll click on these 6 dots next I'll go to the Advanced section and go to responsive

 so right here we have the option to reverse columns 

so if I click on this right here it's going to reverse the columns right here 

so now the text displays first and then the image displays which is pretty cool 

so you can see here how this looked pretty good but maybe you want to centerline this stuff 

so it's very simple 

so just like you edit it on the desktop you would click on it and then Center a line 

so you can see right here how it's selected for the tablets and then right here the same thing and same thing now remember we're only making changes to the tablet version we're not actually editing the website 

so this is only for people who are coming to the website on tablet devices alright

 so that looks pretty much all good now this maybe we don't need this image right here because you know it's just I don't know I just don't want it so let's actually hide specific elements for specific devices 

so I'll click on this right here and go to the Advanced section here under responsive we have the option to hide on desktop hide on tablet and hide on mobile

 so I want to hide this specifically on tablets and also mobile devices 

so now the image is not displaying 

so another thing that we can do is if you have an image in the back that you just really don't feel belongs we can actually change the specific background image for specific devices as well 

so we have these mountains in the back but quite frankly maybe you just want a different color for mobile devices right

 so right here I'll click on these six dots and we'll go to style 

so right here you can see that we have this selected 

so there's a few there's a few ways on how you can do this you can either upload an image to cover this one

 so you can just upload a second image or you can go to background overlay and add in a specific color and then increase the opacity to 1 

so let me give you an example

 so here I'll click on classic color and I'll just put something like white so you can see here how the mountains are starting to fade out but they're not completely faded out yet 

so right hereunder opacity I'll drag this to 1 and now the mountains are gone 

so there's really no right or wrong way to do this 

so if you want to upload a white background you can do that or if you just want to have a color and increase the opacity as well you can also do that as well 

so I think the sections done and the best thing to do is to get on your phone and just go to your website and just see how it looks like on your mobile device 

so next we have the gallery section and then we have this call to action 

so there are a few ways on how we can optimize this you know we can even disable the gallery section maybe you don't want it to display the images on mobile or what we can do is add in some margin right here to actually make this not 

so close to each other 

so right here I'll click on this column under the Advanced section under margin a lot of some margin right here I'll add in like a 20 20 pixels 

so you can see here how this is starting from a lower point now 

so I could even go to something like 50 

so right here you can see that now we're actually creating space 

so if I take this off right here you'll see how it gets closer 

so if you want to actually use margin oh that's too much space 

so there we go 50 now you can see how it's just kind of like a little you know a little way form it or what you can do is click on this column and then you can actually optimize this entire column but that'll be a lot of work and I'm not gonna do that but I'll just give you an example you can either optimize this column or you can push this away and you know leave it at that scrolling down here this right here looks pretty good I don't really see anything we need to change the testimonial section looks good and I think that looks all good right there 

so yeah so our website basically looks just fine on the home page 

so what you want to do is you want to go through all of your pages and you want to go ahead and optimize your website for specific devices 

so we optimize our website for the tablet let's quickly go ahead and check out the phone 

so right here we have mobile 

so click on mobile all right let's scroll back up okay 

so there are a few things that we need to change right away 

so this title is way too big 

so let's actually change the text of the the size of the text right here and here will click on headline on our typography we can change this 

so right here you can see how it's set for mobile something like dad's right something like this and then here we can just disable this actually you know I don't really think we even need this 

so what I'll do is go to the advanced and responsive and I'll just disable this you know I just really feel like we don't need this text you know it's just really not important we just want the to see the title and then maybe learn more or hire us also this background is too much this background is taking away a lot of the emphasis from the text so let's disable the background 

so right here I'll click on the buttons we have the style and then what we can do here is you know I left this on the whole article 

so I change that so what we can do is the same thing for background overlay we can just go ahead and add in a white background overlay or we can do the same thing we did for the tablet one 

so we can either add another white background image or I can add an overlay just depends on what you want to do 

so here I put whites and they'll crease the opacity 

so I feel like this will be a lot better than what we had before scrolling down here you can see here how there's still padding for the actual mobile 

so that's why you always want to keep checking to make sure that there's an everything looks good and what we can also do here is maybe Center align this but that's strictly up to you you can go for this look where it's against the wall kind of or you can actually Center align it 

so here you can see that this is the centerline

 so what we can do is probably center line this or we can just disable this section just to say you know what I don't want to say I don't want to mess with everything 

so this one section is making my site like a little tacky

 so right here I'll just disable this section as well 

so right here for responsive we can hide this as well this is going down here this all looks pretty good text looks good this section right here we're actually disabling that on mobile and that's good because it's just a lot of empty space that looks really good gallery looking good everything's looking good 

so far and I think that is pretty much it yeah that's good 

so you want to make sure that every single page is optimized for mobile users because Google is very serious about it now because again you know there are more mobile users than desktop users now 

so having an optimized website is crucial into this business 

so I basically covered how you can optimize your website for tablet and mobile devices let's now talk about the more advanced features and what elements are pearl can really do 

so next let's talk about the more advanced features of Elementor like the elementary team builder which I'm pretty sure you've probably heard a lot of about the elements or theme builder allows you to have a specific header and footer that you can custom build ignoring the theme customizer settings 

so let's create a custom header and footer for our websites 

so right here I'll go to my blog and go to the dashboard 

so here I'll scroll to templates and click on theme builder next I'll click on the header and now I want to apply a specific header throughout my website 

so here I'll click on add new header and you can give your header a name but I'll just leave it blank for now and click on create template

 so here's a list of headers that we can use that we can customize throughout our website 

so what I'll do is just grab this one right here and click on insert 

so here we have this menu that we can fully customize 

so I can control the menu I can even add additional elements to it like if I want a button below the phone number here I can Center it and I can make it smaller 

so here we can actually go ahead and fully customize the header 

so you can go ahead and mess around with these settings on your own free time we can change the color we can change the fonts we can build whatever we want just like any other page 

 so the header is basically what you're building on this specific page 

so I'm just gonna go ahead and say publish for now and click on publish and now we want to go ahead and display conditions 

so where do I want this header to be applied on my websites 

so right here under add condition I can simply just click on entire sites or I can get a little bit more customizable maybe I only want this on specific pages 

so right here I can click on singular and right here under all singular I can select pages or I can select posts or I can select whatever else I want to add maybe just a 404 page right here under pages we have okay what pages do you want to apply this header to well here I can put my home page right now if I want to display this on another part of my website I can simply click on add another condition and include this on another page 

so for example here I'll add it to my contact all right and here I'll click on save and close and then update 

so now let's actually take a look at our website 

so right here I'll go to view the page here I'll click on home and there you go 

so now we have this custom header being applied on our websites however if I click on something like the about Us page it's going to be the default header because remember this header is only being applied to the home and the contact us 

so that's it 

so that's how we can kind of have a custom header throughout our website 

so usually people would probably want to select entire website because you know you really wouldn't want to have a different menu for different pages I mean you can and some websites do but for the average person I don't think we would have multiple menus for different pages but with the theme builder you can do that 

so you can totally build a custom menu with the theme builder 

so I've showed you all how to create a custom header but right here if I scroll to the bottom right here you'll notice that we have this really ugly footer that doesn't really match with the header so let's fix that 

so let's add a custom footer

 so right here I'll go to my dashboard go to templates and theme builder 

so here is the header that we created now right here under footer we can go ahead and create a custom footer

 so I'll click on custom footer and click on create a template the theme builder is actually very important for a lot of pages that you can't customize 

so as you're installing plugins like e-commerce and also lifter LMS or learning - courses or something like that you can't customize those pages

 so you want to use the theme builder for pages that you can't normally decorate or design with the actual page builder 

so here we can go ahead and select the footer' for our website 

so you can go ahead and just kind of just grab a pre-made templates because we're using the pro version and the pro version we get all these all for free which is really really cool 

so right here I'll just click on this one right here and click on insert and we can design this and customize it any which way we want so we can click on these dots right here and we can go ahead and change the color of it and vice versa but I just want to publish this right now 

so publish add a condition and I wanted this place on the entire website you know I don't think we would need different footers for different areas and as you're creating your website guys keep it simple don't get too crazy and start having different headers and footers for different pages that is a quick way to make your website look terrible 

so let's take a look now on our website

 so here we have the header and if I scroll down here we now have a custom footer 

 so this right here replaced the themed footer and now we have this as our specific footer and right here if I go to the blog page and scroll down you'll see that it is the same applied as well
 so if you want to go ahead and apply this throughout your entire website you can also use the theme builder to decorate your header and footer areas another thing to note is that the inaudible elements plug-in also has a library of headers and footers that we can use and add to our library and if we scroll down right here we'll see header and footer

 so right here I'll take a header and here we have a list of more headers that we can use throughout our website 

so I'll just go ahead and grab one really quick

 so right here I'll take this one right here and click on import to library alright now we can go ahead and edit this right here

 so click on edit template

 so here we actually have the header now 

so here you can go ahead and fully customize and design the header 

so this is where you would go ahead and make changes to it and whatever else you want to do 

so right here maybe we need to actually make a little bit more space it looks a little bit too scrunched 

so what we can do here there we go 

so now that looks a lot better than what it did before here I'll click on update now let's apply this to our website and here we have the templates being applied on our websites 

so let's make another one 

so right hereunder the header I'll click on add new and this will be the new header and click on create a template 

so right here I'll go to my library and the one I used was called header with nav which is this one right here 

so let's go ahead and preview that just to make sure and that is the one that we were using 

so right here I'll click on insert and then click on yes all right perfect 

so here I'll click on publish now right here a lot of condition and I'll apply this through the entire web sites 

so next we need to go ahead and disable the other theme builder because the other theme builder is being applied on the home and the Contact Us page remember 

so let's disable that

 so right here I'll go to exit to dashboard under theme builder we have header this one right here I'll just go ahead and trash this I don't want to know more there you go now let's take a look at our website all right awesome 

so now we have our new menu being applied on our website 

so here we can go to the home the blog the contact and everything looks really really good 

so this is why the theme build is 


so crucial because it allows you to have a custom header and footer throughout your website that you can fully customize next let's talk about the blog page 

so the blog page you can fully customize with the element or theme builder as well 

so right here I'll click on this and this right now is your default templates but wouldn't it be cool if we can make a template that we can use every single time and make a post we can do that with the theme builder 

so let's do that

 so right here I'll go to dashboard and here I'll go to templates and click on theme builder and right here we have single here I'll click on add new single and right here it's saying select the post type 

so I'll just say for every single posts I make and click on create template use on our website and the cool part is that this has dynamic content 

so you might have heard a dime add content before and not understood what it means but then that my content is basically having the ability to change the title depending on what you're talking about

 so for example also like this one right and I'll click on insert 

so this right here is our new title 

so you can see here how it's pulling the other information 

so here I have the image from my old blog post and then I have the exact same style and formats for my blog posts 

so this is what it means by having your content update dynamically 

so right here I clicked on the title and you can see here how it's being the post title

 so for your future blog post whatever you talked about the title is going to dynamically update to your new title the same thing right here for your featured image 

so your featured image will dynamically update to whatever you're talking about 

so let's go ahead and make a new post to give you an example 

so I'll click on publish right here now for the post conditions I want this to be on all of my posts and click on save and close all right awesome 

so let's make a brand new post 

so here first I'm going to go ahead and disable the sidebar

 so let's give this a name there's gonna be this is an amazing tutorial right guys right yeah yeah but hit that like button 

so right here we have the featured image

 so I'm gonna add a featured image here 

so I'll just put in something like this guy right here yeah this guy right here and then here I'll paste in some demo content and then paste a little bit more and we are all ready to rock and roll 

so here I'll click on publish now let's view the post and see what dynamic content has done and how it's being applied to our post alright cool 

so you can see here how it's dynamically updating all of our content

 so it's taking the format of the post that we selected and it's inserting our content here 

so here we have the featured image we have a post and then we have our contents and then we have the social icons at the bottom and then people can comment which is really really cool the theme builder also allows you to customize other parts of your website like the category pages the blog archive pages and also for or for pages as well

 so you can have a lot of customization with the Elementor theme builder alright 

so let's talk about another element or pro feature pop-ups if you want to add pop-ups to your websites in this part of the article I'm going to show you how you can do that now you can add pop-ups on virtually every part of your website you can also put pop-ups depending on what your visitors do so that's really interesting so let's go in now and apply a pop-up to our websites so right here I'll go to dashboard we'll scroll down till we find templates and click on pop-ups so here I have a pop-up but I'm gonna delete this one and I'm gonna start from scratch with you guys so right here I'll click on add a new pop-up and then you give your pop-up a name if you want to do that buts here I'll just ya know no name for my pop-up just create a template and then here we have like a list of pop-ups that you can use throughout your website so you can kind of go through these and check them all out so they have tons of them and they're really nicely designed to look pretty cool so I'll just grab this one right here and I'll click on insert so you can fully customize and design your pop-up just like you do any other page so right here under the little - icons you can go ahead and add stuff to your pop-up and you can build it how you want it to look so you know you can do that on your own time and you know you can have fun and you can go crazy and all that stuff so let's just say for example I'm done designing my pop-up so I'm done designing it and I want to publish it on my websites so right here I'll click on publish and right here we have conditions so where do you want this to be displayed at it's well I wouldn't put it on every single page because I can get really annoying really fast but here we can click on this and go to singular and you can apply it to specific pages so if you're a blogger maybe you want to put it on your posts if you are someone that's just selling a service maybe want to put it on your home page so for this example I'll just select pages and then I'll just select the home page alright so I have the pop-up being displayed on this page right here so right here I'll click on next now we need to go ahead and say okay so it's being displayed on the home page but how do you want it to be displayed so we have it on the page load so whenever the page loads I can say as soon as the user is on the website for five seconds I want the pop-up to be displayed or I can say I want it to be displayed on the scroll when the user scrolling down fifty percent of my page so when the user hits 50 percent of your website going down it'll display the pop-up or you can have it on scroll two elements on the click after inactivity or on page exit intent and this is actually a pretty cool one for sales so when the user is actually going away to click off their browser like this you can actually display a pop-up saying hey wait don't leave yet we'll give you 30 percent off you know something like that so you can apply this to people who are leaving your websites and then if they're inactive if they're just not doing anything you can say hey are you lost you know and give them a pop-up if if they're lost or whatever you want to do so yeah you can kind of go to these and strategize your little marketing campaign and find out how you can make people stay on your website using pop-ups so right here I'll just say page load we'll just keep it simple and then I'll click on next and here you have some advanced rules so you can go to these on your own time like you know show on specific devices etc how many times per person so you go through these and have fun and knock yourself out but right here I'll click on save and close are you guys ready let's take a look so here I'll click on that and go to exit to dashboard and I will now view the websites so let's count 1 2 3 4 5 oh let's see that 5 seconds so it is right on time so now we have this pop-up where people can go ahead and put in their email address and subscribe and you are all ready to rock and roll so this is how you can add a pop-up to your website and this is exclusive for Elementor pro so it's an amazing feature and if you're using Elementor pro which i think most of you are i highly recommend to add pop-ups to your WordPress website next we're going to talk about a feature called the Elementor theme style so wouldn't it be cool if you can design your entire website with one little area well with the element or theme style you can so here you can notice that we have these really weird - things above all of my images and that's because I'm using the elements or a theme style so right here I have the Elementor menu and I'll click on the hamburger menu and then right here we have the theme style so click on theme style so what the theme style does that this allows you to customize your entire website with this section right here so this way you can actually customize everything on your website without having to do it individually so let me give you all a crash course of the Elementor theme style so the elementary team saw allows you to basically change all the elements on your entire website from one location so here I'll change the letter spacing in the font and I'll also change the color now these changes are being applied throughout the entire website next I'll change the color of the button and the radius and all the buttons on my website will be changed here we have the form field so this is going to apply changes to all the contact forms on my entire website from one location and lastly right here image so if you want to change all the images on your websites these changes right here will be applied to all the images so here you can see I can solid differently I can add some saturation and some hue and just give my images a different look on the websites so first let's go ahead and take a look at typography so for example right here if I want to change the body text of the entire website I can do it from the theme style so right here on our typography if I click on this and change the font family to something like yeah I don't know what should we do this gamble here let's let's do I don't know atma you'll notice how the fonts changes for the entire website so it's going to apply through all of the body paragraph which is pretty cool so with the theme style you can decorate and design your entire website with this area right here but I'll leave this blank I think at m'as that's not a bad font you know that's actually really cool and I might actually use on my next article but to be honest it's pretty cool so that's how you can design the typography but what about something like the images so with the images right here maybe I want to add in something like a a I don't know a dashed border we can add a dash border and make it black all right so now I'm applying a border to all of my images so let's go ahead and find some images here so here we go we have some images and now it's being applied to all the images throughout our website so this is a pretty cool feature here you know and we can change the color of this to something else so any image that you have on your websites that you apply it or any image module I should say that you can go ahead and design it right here with the actual theme style all right guys in this section I'm gonna talk to you about the Elementor Pro widgets I'm also going to talk about some additional things that we didn't really cover like global styles etc so let me just give you a rundown of everything so far so these right here are the basic elements with Elementor so these are in the bass free version that you get with Elementor here is the elements or pro widgets so every single widget does something different and personally I think at this point it's just kind of like trial and error so for example posts these will display your blog or your blog posts so if you just dragons rapids it'll then go ahead and display your blog posts and then here you can change the the the style here you can change the actual you know the color you can add a background color to it or whatever you want to do so at this point guys it's just trial and error so just go ahead and experiment with the widgets and just go through each one to see what's for you and what looks good on your websites and then here we have animated headline and then also we have the you know what is this pricing tables or call to action pricing tables there you go so at this point you guys kind of understand a little bit about that and you can kind of you know have fun on your home time right so let's keep scrolling down here so we have the pro elements right here and right here under the general section we also have additional elements so here you can kind of go crazy and you can mess around with these and have fun and just see what works for you now scrolling down here we have additional widgets as well so we have this free widgets and then also for the sites we have additional site widgets and then also here for single which this is for the blog posts so you can go ahead and customize basically every part of your website so this would be something maybe for the theme builder rates and this would be something for like a blog posts so blog or post title post excerpt etc these are here are free widgets that you get wouldn't be installed that to plug-in earlier and this right here is also free widgets that you get when we installed the Neve theme now when you're using WordPress you're going to be installing plugins and you're going to be using themes and sometimes these themes and plugins will give you additional elements for element or sometimes they might even compete with element or pro so for example right here the orbit Fox add-ons also has pricing tables so let's take a look at their pricing tables of course they're gonna look different but here you can see this is element or pros table and then this right here is Neves pricing table so when you're using WordPress and you install plugins you're gonna get like there's I mean there's so many plugins out there with add-ons for elementals probably like maybe 200 plugins that give you additional elements and add-ons for Elementor all so a lot of themes out there also do offer elements for elements or as well so there's some one theme forest but personally I think all you need is the pro version don't overthink it don't try to get too crazy because that's a quick way on how to make your website look really terrible so I believe or about that in my web design course that I have coming up soon and then also right here we have the WordPress base widgets so these are like the default widgets that you get with the WordPress and quite honestly they're really poorly design and they're really ugly and I just really want to use them on my websites but I'll just go ahead and give you an example really quick so here I have a navigation menu I'll just drop it in there I'll select the menu and then put menu and there you go so now we have the menu and you know you really can't style this and it's just it's really not that good-looking and you don't have a lot of customization that's why a lot of people don't like using the the WordPress default widgets because there's not a lot you can do also right here we have simple social icons so this is from the actual plugin remember how we installed the plug-in so if you sometimes it's all a plug-in you will get granted more elements that you can use with the page builder and since there's like I told you before maybe to 300 plugins it's really up to you to kind of go through and see which one you like test them out because even myself I use plugins sometimes and then they break or they just suck you know or something like that so that's just a general overview of the elements and everything else on Elementor also right here we have a global and you'll see global right here and for you it'll be completely empty so for example right here I have this one elements so whenever you want to assign a global elements which is pretty simple let's say for instance I have this pricing table right and I want to take this pricing table and save it and I want to apply it on different parts of the websites so let's do that so here I'll put Darrell Wilson and then I'll right-click on this element and I'll click on save as a global and then here I'll put Daryl's pricing table and then click on save essentially what this is you're basically creating a template but in a much faster version so here I'll scroll down to the bottom of the page and I'll just drag in this new element and there you go so now I have this element that I can use throughout the website so that's really cool it's very you know it's quick and if you want to go ahead and edit it you can click on edit and then edit it however this is a global widget so remember it's going to apply to all of the elements so that's actually a quick way on how you can edit your website so for example right here if I click on edit and put Daryl or put I don't know Jessica Wilson and then click on updates if I scroll to the top right here you'll now see that Jessica Wilson is being applied right here because it's global and it's affecting every single element so it's a pretty quick way on how to edit your website next let's talk about these bottom icons so right here it says preview changes here you can just click on it and I'll just give you an example of the page right here we have the responsive mode which we're going to talk about in the responsive section here we have history so again you can go back to any part of the process of you building your website and then you can you know like okay I made a mistake back here I'll go back here and then I can work from here so it's just basically allowing you to go back and then right here we have the Navigator now I didn't really talk about the Navigator that much quite honestly I like the Navigator but I just don't really think that you're gonna use it all the time however people out there all like their own little thing and they all like to do with their own style so with the Navigator is essentially it's just displaying your website in a small navigator way so for example right here if I want to go ahead and say you know what's I want to go to the top section really quick and then I want to click on this column right here and I want to edit it right here so the Navigator is essentially just allowing you to edit everything through a navigator point-of-view so if you like this style you know if you want to go ahead and say oh I gotta edit this section here on the bottom the pricing tables just click on the section but this is a quick way on how you can kind of just see everything through a navigator point of view click on it and then edit it like that so that's what the Navigator is also if you hold ctrl e the finder will display and this way you can navigate throughout your website and maybe you want to go to the home page you can click on home and then just click on home and we'll take you to the homepage without you having to exit the Builder go to the menu click on home so it's a very fast way that you can navigate throughout your website so next on the bottom left right here we have settings so here we have the title the status the featured image and then hide title and the page layouts so this right here is the title of the page status is saying ok the page is live right now do I want to make this page privates or pending review or draft if you select any of these 3 the page will no longer be available for viewers or people visiting your websites featured image I wouldn't use it it basically oh it actually depends so when you share something to Facebook you can actually use this as your featured image and if you share this specific page this will actually be shown now there's also SEO plugins that do this a lot I guess you want to say better so I probably wouldn't use the featured image but if you aren't using an SEO plug-in I would use this so maybe you want to add in an image so if someone shares it to Facebook they'll see that image instead I do have a tutorial on Yoast SEO so I'll leave that in the description below if you're interested hiding title this will hide the title of the page however most themes out there offer this feature but if your theme does not you can hide the title of the specific page this right here is pretty important the page layout so you're gonna see that there is the default elementary canvas elements are full width and then the theme actually offers its own page layouts so Elementor right here offers a default layouts so a default layout is just default so it's just basically whatever the theme whatever the theme settings are that's really what its gonna apply to so here we have the page title the menu and then the content in the middle and then here we have the theme builder I'm sorry the footer as well so right here under settings we have other options like elementary canvas elementary canvas is pretty interesting it'll actually disable all of the theme features on your website and only have Elementor being applied on your website so for example you've noticed that the header is gone it's going to the bottom the footer is gone because we are only using at this point the page builder so with the elementary cannabis it disables all of the themed features so you're only using the elements or page builder here we have elements are full with this right here is pretty standard here we have elements are full with now the elements are full with is probably a very standard way of building your website so it's going to display the header and the footer and it's also gonna make your content full width like this so this has a pretty standard way on how to build your website to be quite honest page both are full with nieve you know guys there's teams out there that offer all sorts of different styles so I really can't say I know what I'm doing but I I would probably just stick with the elements your full width so I would just you know I would say you know it's I don't want to go with that I'll just go with elementary or full width it's a lot cleaner and easier so those are basically all the general settings here at the bottom at the top right here so here we have global styles so global styles are essentially basically acting as the theme so remember earlier how nieve actually has global default and colors and fonts if you want to have Elementor apply global default and colors you can actually go ahead and go to their settings tab and right here under disable default colors we can actually disable elementor's default colors and use the theme if you want to use Elementor as a default color we can go ahead and uncheck these boxes on Save Changes so here again I'll click on default colors and now you'll notice right here that we can actually have element or kind of style our website which is really really cool so here we can kind of get some ideas and color palettes from the actual elemental or color palettes and then here you can kind of go ahead and have fun and go crazy with all this stuff right here so right here we also have default fonts so for example if you want all of your primary headlines to be something like Roboto condensed you can do that if you want your secondary headlines to be something like rock salt you can do that so see here how it's only changing the secondary headline so if you want to use this to basically style your entire websites you can do that in fact I recommend it because this will be a lot easier and faster so for example you know make all of your primary headlines Oh sans and make this one Ariel and then make this one Roboto or something like that so you can see here how you can quickly solve your entire website using the global styles so here we have editing handles and if I turn this on so right here you can see that we have these three elements right here and if I turn this on right here you'll see that now we can go ahead and even duplicate it so I believe what it does that it just allows you to see your website in a lot easier fashion so it highlights everything and it brings up every option when you hover over an element so that's pretty much for the overview of Elementor pro widgets and all of these settings so let's go on ahead and move on to the next section next is a really cool feature that you can apply throughout your entire website called motion effects and mouse clicks so right here we have this image and then you can see here how it's rotating depending on where my mouse is now you can apply this to specific images you can also apply this to specific backgrounds as well so let me show you how I did this so right here I'll go ahead and open up the Builder so you click on an image and then go to the Advanced section here we have mouse effects and mouse track and then we have 3d tilt as well we also have the entrance animation which you can apply on virtually every single elements so right here I'll turn this off and you'll notice that the image now it doesn't make any movement so right here I'll turn on the mouse affects the mouse affects our best ideal for images or something that is already on the page so for example right here under Mouse track we can have something like opposites or direct and this will actually follow the mouse like that or we can go ahead and choose opposite which will go away from the mouse and then here we can control the speed of it so if you want it to be faster and longer we can always do that as well which is really really cool so that's an example of Mouse track and you can apply this on virtually every single part of your website which is really really cool so you can see how you can have tons of fun and you can go crazy and have a lot of fun now that's Mouse effects so we also have scrolling effects but I think scrolling effects is best applied to something like titles and it's also best applied to the background images so for example right here all select this Howell right here and go to advance here we have motion effects and then here I have scrolling effects so here we have the vertical scroll we have horizontal transparency rotate blur and scale so for example we can just go ahead and mess around with these settings right here so here I have the direction is up and I have the speed set to something like five so what happens here is if I scroll down the page it's going to scroll up into the place as I scroll and then we have that effect like that now if I select down it's going to have the opposite effect so it's going to actually go down as the page Scrolls down which is really really cool now this is actually best applied to something like background images maybe so you can see here how it's being applied for the text but here I'll take this off and I think something like transparency is pretty good or blur for text so here we have blur now here we have the fade in so as I scroll down it's going to fade in so here we have the level maybe I want to reduce the level or increase the level and then also here we have the bottom viewports and then the top viewport so this is basically saying where does the top want it to start and then where does the bottom on it or where is the bottom going to fade it in so the best way to learn guys is just by trial and error so just mess around with the settings and get comfortable so here you can see how is being blurred in and there it is so here maybe I want to go ahead and just see here if I can do it like that makes more sense so 52 to 0% so here if I scroll down there it fades in perfectly so that's a really cool effect and you can apply this to virtually every part of your website now let's say okay 

so I know how to apply it to images and titles let's apply it to the background 

so here I'll click on these dots and here we have motion effects so I'll turn this off and then turn it on again just to make sure everything refreshes 

so here we have horizontal and vertical in fact you can turn on both

 so what I'll do here is I'll say look I want it to scroll horizontally to the right as I scroll down on the page I wanted to go let me close that I wanted to go up as I scroll down on the page 

so let's see how this works 

so right here it's scrolling up into the right and then it falls into place like that 

so next we have a scale 

so what we can do here is scale it

 so we can scale it up

 so if I scroll down you'll see how it kind of scales into it and then it'll go back down like that 

so there's just

 so many different ways on how you can customize this and make it look how you want it to look so maybe even scale down 

so maybe right here we think oh my gosh this page is too big but if they scroll down it shrinks into play and you can see how we can use it in conjunction with other effects now personally I wouldn't go too crazy with this because this is something called JavaScript and the more JavaScript you have the more slow your website will be 

so you can add motion effects here and there but just be mindful and don't add too much because then your site might get a little slow 

so at this point, you guys are professionals you guys are really really good and you can see the power that you have with elements were pro now I do want to show just a few more features like one or two more features before I let you go 

so keep watching you know just bear with me here I just I want to make sure that you understand everything that you get with Elementor pro because it's an incredible page builder 

so right here we have Elementor and we have a roll manager 

so click on roll manager

 so if you have other people building your website you can actually choose them and you can actually apply for specific roles 

so, for example, we have editor what can the editor do right here I'll open this you can say you have no access to the editor or access to edit content only same thing for contributor the author etc 

so how do you actually have people sign up and how do you actually have how do you you know assign them 

so right here is your users and this is all of the users so here you can actually add users 

so right here you can add a user and let's say you hire someone to actually help you out with your website

 so you can go ahead and put no taste Elcom and then you can make them something like you know we'll make them an editor all right and then here I'll add the user alright 

so here I have a new user and this person got an email and it's gonna go to their email and they can go ahead and log in to your websites 

so now we can actually see that they are an editor

 so now that's where this comes in again and we can go ahead and use the role manager and saying okay 

so I hired someone from Fiverr to build my website or to help me with my website a developer, in fact, you can go ahead and say I only want this guy to have you know he can edit the content that's it that's all he can do he can't do anything else 

so that's a really cool feature that you can have with the role editor now lastly your website might break sometimes and that's just how WordPress is guys 

so if your website ever breaks when you update something 

so for example, if your website looks perfect right 

so it looks great but then you update Elementor and then your site breaks and you're like oh my god my slight broke and you know that's like the worst thing that gonna happen to trust me happens to me all the time there's a feature called an element or version rollback 

so let me go ahead and show you what that is 

so Elementor will update and your site may crash eventually now I can't guarantee you that it will or won't usually it does not but there are like maybe like the 5% people where your website will crash because maybe you're using a plug-in that's not compatible at Elementor or whatever the reason 

so here we'll go ahead and go to Elementor and click on tools 

so here you have some just general options where you can go ahead and run Elementor in safe mode and then here you have some other options that you might not need like maintenance mode where you can go ahead and run your website in maintenance mode and you can go to these settings 

so here we have some general options like regenerate CSS you can sync your library you can turn on safe mode on your websites and then also you have a maintenance mode

 so you can go ahead and choose maintenance mode 

so that'll basically like just cut off people from visiting your websites but right here we have version control 

so if your website ever breaks you can go ahead and actually roll it back to the other version 

so let's say for instance you used Elementor version two point nine point three and then you update it to two point nine point seven and it crashed well you can always go back you can also become a beta tester now this again is not Rick on live websites but Elementor always has new features coming out all the time 

so as you're watching this article right now from probably six months to a year they're gonna have a lot more features than they do when I made this article and I'll update it and make a new one of course but you can always opt in to be a beta tester if you want to do that but right here I'm just giving an example 

so if you're pro version you know crashes on 2.9 points too you can go ahead and roll it back to 2.9 etc 

so that's just a way on how you can protect your website because sometimes you're using these plugins right here sometimes you will come into plug-in conflict and that's just part of WordPress 

so for example maybe this guy right here doesn't update his plugin for a new version of WordPress and these plugins do then this plug-in right here might conflict with these other plugins

 so this is a very beginner problem that I see with most people building websites 

so don't panic you can always go ahead and change your version of Elementor to make sure your website does not crash 

so, guys, I'm really happy that you guys made it to the end of this article and I really hope this article helped you guys out I do spend a lot of time picking these article to make sure that you know I cover everything in general and I want you to walk away knowing how to use all the features with elements or pro now there maybe is like one or two features that we didn't cover like the WooCommerce builder but that's totally for e-commerce websites and also a CF integration that's also a third-party plugin that we use to integrate with dynamic content but I will cover that in another article 

so make sure to LIKE this article and leave me a comment below and let me know what kind of website that you built and 

if this is Horrell helped you out and 

if you would like to see more tutorials like this my name is Sarah Wilson and 

I will see all of you party people in the next article guys take care