Make a Website with Elementor and the Hello Theme! (Free Version)

how to create a website with elementor let's get to it [Music] what's up everybody it's david from website creativepro.com and now in this tutorial video i'm going to walk you through step one to step down on how to create and design a website using elementor this tutorial is perfect for anybody who is brand new to elementor and just wants someone to lay it out and explain how elementor works so you can go forward and design your own very beautiful impressive looking website we're going to be using the free version of the elementor page building plugin as well as the hello theme which is also designed by elementor these two things work really well together to make creating a website quick and easy the only design limitation of this tutorial is that because we're using the free version of the elementor page building plugin we don't have design control over the blog archive page as well as individual blog posts so they are going to kind of look a little bit weird and ugly so if blogging is important to you you definitely i definitely recommend upgrading to elementor pro however if you're a creative professional or a small business and you're just looking to create like a very beautiful 10 to like 30 page website and you're cool with like designing each page individually then this tutorial is for you now the tools and resources used in this video are obviously the elementor page building plugin we're going to be using namecheap as our domain name register we're going to be using bluehost as our web host then we're going to install wordpress and design our website like always make sure to check the links in the description for any resources mentioned in this video so let's begin okay so in this tutorial i'm going to be instructing you on how to use elementor to design each of the three sections of your website so elementor breaks your website up into the header section the body and the footer and i'm going to show you how to edit each one using just elementor the free version there's nothing additional to pay for i'm going to show you how to add this nice header how to add buttons how to make the button be an anchor link so you click it it takes you somewhere on the site how do you add this nice uh hero image in the background with a text overlay and then how to make it so the image stays put as the website moves how to add different blocks and different design ideas uh how to add an email opt-in form at the bottom how to adjust and edit your footer how to add social media links google analytics and some thoughts on blogging as it relates to elementor so anyways let's begin welcome to namecheap.com so namecheap is a domain name register that means this is a place where you can go and register domain names so to get started is very simple you just type in the domain name that you want to register and click the search icon now the reason i recommend namecheap is because they have the lowest prices around for registering a domain name so just go ahead and put in the domain name that you want click the search icon and then on the next page it's going to tell you whether or not the domain name is available to register and so this one is so let's just go ahead and add it to our cart now if the domain name is not available you have to come up with something else now let's go ahead and check out and there we go so now we're on the checkout page right here and so the domain name registration you can register for one year up to 10 years in advance you can set on auto renew if you want so after like when the domain name is ready to be renewed if you have auto renewal it will just charge your credit card again uh so it's totally up to you and you get who is guard for free and this keeps your contact information private because part of i can rules when registering or domain name is that you have to provide accurate uh contact information and so whose guard keeps all that information private and you get it completely for free so anyways just go ahead and confirm your order and you'll have to create a namecheap account and that's it after you get your domain name you are going to need a shared hosting account so what a hosting account is it's just a server that's on 24 7 so your website is available 24 7. uh it's just a requirement of having a website and so i personally like and recommend bluehost bluehost is the number one recommended web host by wordpress so to get started is very simple you just come here and click on this button that let's get started super duper simple okay so now right here they have a bunch of different plans so they have basic plus choice plus and pro so pro is for large established websites that get a lot of traffic you don't need pro basic is pretty good but you only can have one website on the account which is very very limiting so the ones i like and like and recommend would be the plus and the choice plus plan i personally like the choice plus plan because uh this plan is powerful enough to allow you to grow a high traffic website but again it depends on your needs so if you're just like a small business and you just need to get a website up and running i would say the plus or basic are fine uh personally probably the plus because you can multiple websites but it's totally up to you now if you're someone who wants to like maybe build a high traffic blog then i would prefer you go with choice plus but again that's it's just your decision so i'm gonna go with choice plus and all you have to do is click on select okay so now on this page you can create a new domain name or use a domain name you own so if you go with create a new domain name this is going to register a domain name through bluehost which i don't recommend because whereas namecheap was 8.88 a year bluehost charge is 17.99 a year for domain names so that's why we're using namecheap because it's just cheaper so we're going to use a domain name you own okay so put in the domain name that you just registered at namecheap right in here okay so once you do that go ahead and click on next and here we go so this is just an account information okay so i'm not going to insult your intelligence and walk you through how to pay for something online uh just fill in your account information oh go away fill in your account information and the package information right here so you can choose 12 months 24 or 36 months personally i would probably go with the 20 24 month price plan uh if you're if you're wanting to build a blog because usually it takes two years to build up a high traffic blog and then you can make a decision whether or not you want to stay with bluehost or not again this is totally up to you now we come down here package extras site lock we don't need site lock and then right down here we have payment information and that's it and so go ahead and click this little check mark that you agree to host these terms and then click the green submit button and you are good to go welcome to bluehost.com so after you submit payment you're going to be presented with some sort of like onboarding process you can just skip through everything and this is going to be your dashboard now up top here is your website you may be noticing something like temporary box one two three four uh the reason that's popping up is because you have to set name servers at namecheap to be pointing to your uh bluehost account it sounds way more complicated but i'm gonna show you how to set everything up now you have your domain name at a domain name register and you have a shared hosting account with bluehost so how do you connect it to it's a very simple process you just have to change the name servers at namecheap to be pointing to your hosting account at bluehost now that sounds way more complicated than it is but it's a very quick and easy thing to do it takes about five minutes and i'm going to show you how it's done right now let's set up name servers so every single web host will send you a welcome email when you buy a hosting package and bluehost is no different so you should have something that should say like welcome to bluehost and then like your domain name that you use as the primary domain name on the account and so here we go so i have choice plus web hosting so as we scroll down here uh right here your in your dashboard it should say this like temporary box whatever well we have to set up the name server so for bluehost the name servers are very simple it's ns1 bluehost and ns2 bluehost and so all you have to do is just highlight this and then copy and paste it into your namecheap account so you have to log into namecheap and go into your domain name list and click on the manage button for the domain name that you want to edit then you want to just come down here where it says name servers now right now yours should say namecheap basic dns what you need to do is come down here and select custom dns then all you have to do is type in ns1 bluehost ns2 bluehost.com and that's it and then make sure that you click this tiny little green check mark and so once you click that little green check mark it's going to come up saying effects may take 48 hours personally i've never seen it take 48 hours it's usually like 10 minutes so maybe take a break make get a cup of coffee come back in 5 or 10 minutes and everything should be propagating correctly so you should be seeing your domain name over here but anyways that is how you adjust name servers now it's time to launch wordpress so once you set up name servers and give it like five maybe ten minutes max this should propagate as appropriate and you should be able to see your domain name here so all you have to do is kind of like just launch your site and bluehost will install wordpress for you and everything but i don't recommend doing that because i want to have control over like my username my password recovery email all those little details i want to have control over so i'm gonna go ahead and click this and i'm going to delete the site yes delete the site it's okay because we're going to be installing everything from scratch so with my sites boom click add site okay so now we have wordpress and we have bluehost builder so i have another tutorial video on the bluehost builder if you want to check out but we're going to be using wordpress so click use wordpress alright so now we have to create a new wordpress site so site name the site name should be the name of the website so i'm going to be using my name so i'll be just put that in right here now site tagline you can just put in anything so put in hello world now you can always change these things later once you're logged into wordpress so don't worry too much about it now the important thing is to click the advanced tab right here now email address this is going to be the recovery email so if you ever forget your password you know what email it's going to go to and then your wordpress admin username and admin password which i personally like to set myself i don't want to have bluehost just automatically generate me a username and password so anyways i'm just going to put in my email okay there we go and admin username okay and wordpress password okay and so now we are good to go go ahead and click next okay so now you can install blue or you can install wordpress on a directory i don't recommend that uh we want to install it on what's known as the root domain name so wordpress is installed on the entire domain name uh not only on like say slash blog for example anyway so just leave this blank now helpful free plugins we can just uncheck all of these because we don't need it next go to click next and wordpress has been successfully installed yeah it's really that simple so go ahead and click on log into wordpress welcome to wordpress so this is your wordpress dashboard and you are now logged into your website so let me go ahead and log out now whenever you want to log into your website you just have to go to the domain name slash wp admin and that's it okay and then you'll be presented with this screen and all you have to do is put in the username that you just created in the password that you just created and that's how you log into your website every single time permalinks and settings so now that we have wordpress installed on our website there's just a couple boring technical things that we gotta do on the backend so i'll make i'll keep this brief and we'll get right to the point so the first thing i want you to do is to navigate to your permalink section okay and so permalinks can be found under settings and then permalinks okay and so permalinks means like the permanent link for your web pages so and this is particularly important if you're going to be vlogging and so you can here's where you can change the url structure of your blog so you have plain day and name month the name numeric etc now the best structure is you know it really depends on what you're doing and so like month and name or date that's good if you have a news oriented website if you don't have a news oriented website using dates is a terrible idea next we have post name post name is good too i mean this is ideal if you're going to have like 50 blog posts maybe but in general i recommend doing something like slash vlog slash post name if you're going to be uh blogging because this gives a nice site architecture but it's totally up to you i would either go with post name or custom structure now you could also include uh categories within this so for example i could just keep going with what add in category okay and so we have blog category post name that's ideal if you're going to be building out like a a really massive website that's going to have like thousands of pages and you're going to have multiple categories for most people that's pretty excessive so i would just do something where it's like post name custom structure click here slash blog slash post name and just leave it at that okay so now the next thing i want you to do is navigate to where it says users and all users now right here is where you have your different users for your website so right now we have one account which is the administrator but if you ever want to add new users you can just click this button and it says add new okay and so right here within wordpress you have a bunch of different roles you can subscribe to people so for example like say you bring on someone who's just going to be an author and all their their jobs only to publish content you can just create a new wrong new role and call it author okay and that's it and so you know that's kind of like what you'd want to do if you're going to be bringing on writers uh et cetera now i just want to bring up another little thing too so if we notice right here it says uh the username let's go ahead and click edit and so right in here this is where you can set like a display name publicly as something else so you know for example if i don't want this david99 i just want to say i just want to be david i don't need the 99 just put the nickname there and then you can select name there and so display name publicly as your name for example so you'd want to do this because you've seen like on blog posts at the very bottom post is written by david or whatever you don't want to say admin or something random like that you want to have it like actually be a name so right here we have the biographical information this is the paragraph that will be coming up within your blog post so for example like david is a web designer and seo expert blah blah blah that sort of thing that's where this is populated from and then right here you have your profile picture and so you can change your profile picture on gravatar and so let's just open gravatar and so what gravatar is it's just a service where you can associate a picture with an email uh so that's where this is being populated from and then right down here is where you can set a new password for your account so you know your wordpress login password if you want to change it you can just change it right in here and that is it delete themes and plugins so with any wordpress installation you just get a bunch of themes and plugins already pre-installed so we just we're just going to go ahead and delete some stuff that we don't need on our website so anyways the first tab i want you to navigate to is your theme tab so again you have to go to appearance and then themes now these are your wordpress themes up top here you can search for different themes or you can add new themes as you want and so for example we come over here to wordpress.org themes this is where we can come and install a brand new theme so you just come over here and search for the theme so the theme that we're going to be using is the hello theme from elementor so just type in hello literally just called hello and right here so it's hello elementor so let's go ahead and click on install all right so now it's been officially installed and we can just go ahead and click on activate alright fantastic so now the hello theme is activated and we can go ahead and delete all these other default themes okay so again we have the 2017 2019 2020 theme i have tutorials actually on each one of these themes if you want to check them out if you want to learn how to design with them but for this tutorial we're going to be using elementor in the hello theme so anyways let's go ahead and delete this so we click this and then we click down here the red button that says delete click ok and there you go let's do that for each of these themes and there we go so now we have our theme installed now let's navigate over to plug-ins so you go to plug-ins installed plug-ins what's a plug-in the plug-in is like an additional little piece of software that's like an add-on to wordpress that adds some sort of functionality so we are definitely going to be installing quite a few plugins with elementor but right now we have a bunch of like just default plugins we don't need so akismet is an anti-spam plug-in i recommend activating and using this if you're going to be blogging if you're not going to be blogging then you can just go ahead and delete this next we have bluehost so we don't need this bluehost plugin installed we can just click on deactivate and we want to go ahead and click on delete next is creative mail by constant contact so we don't need this installed go ahead and click on delete and last is hello dolly so hello dolly just leaves like quotes within your wordpress dashboard it's not particularly helpful so just go ahead and delete that okay and last is jetpack so jetpack brings a lot of like wordpress.com features onto your wordpress.org installation with your bluehost account uh so the thing that i like most about jetpack with regards to blogging is that like it it you can add related posts so you know what i mean like you come to the bottom of a blog post then you see like squares relate linking to other blog posts that's one thing i like about jetpack and they also provide analytics et cetera uh totally up to you whether or not you want to keep it or not i'm going to keep it for now because i find jetpack really helpful but it's totally up to you but anyways that is all you have to do with regards to what themes you have to delete and what default plugins that came with your wordpress installation that i want you to delete and that's it now it's time to install the elementor plugin as well as a few other essential plugins i recommend so let's get to it so to install plugins is very simple with wordpress you just navigate over here where it says plugins and we just go to add new okay and now under here we want to search for plugins and we want to type in elementor there we go and so you can download and install elementor on your wordpress installation completely for free right here elementor website builder click on install now and then click activate [Music] okay so now you're going to be presented with this welcome screen because you just installed elementor now this is the first essential plugin that we need we're going to install two more that are really helpful so again we want to navigate back to plugins and you want to go to add new so we'll click on the add new icon up top there now first plugin i want you to install is the yoast seo plugin so what yoast seo does it just allows you to have a little bit more uh control of your on-page seo description okay so go ahead and install and click on activate so what i mean by that let's just do a quick search website creative pro so we do that for example we see like this little description right there and like this title right there all this is powered by eos like with yoast you have the that little specific control over your site where you can like set things up like this is called your meta description this is your title for the page yoast seo allows you to have all the lists a little detailed control over the on-page seo so it's a very helpful useful plugin definitely recommend installing it as we're getting ready to get everything set up for the tutorial anyways let's continue so one more plugin so again go to add new and the next plugin is called the smoosh it there we go okay now go ahead and search okay so right here this one smush lazy load images optimize and compress images let's go ahead and install this now this plugin is very important because it optimizes any type of image you upload to your wordpress installation and you're like well why is that important well it's because you're going to have a lot of images okay and so like when you click and open a website what the server is doing is loading all these images so it has to load this image and this image and this background image whatever we add to our site so you want to make sure everything's optimized so everything loads quickly and that's what smoosh it does it helps optimize your website for speed so your website loads more quickly now one additional plugin i also recommend installing after the tutorial is called total cash okay total cash there we go okay so this plugin is important because it sets up a cache w3 total cache it sets up the cache you're like what's that well it just means like your web it's going to save a version of your website on someone's web browser so like when they revisit your website it loads way more fast and provides a better user experience google likes it because your site is uh loads more quickly now i recommend installing this after the tutorial because uh it's going to be a little bit annoying editing the site constantly with a cached version and then like you have to like reload the page etc so it's best just to install design your website get it done and then once it's like mostly done then go ahead and install w3 total cache but i would leave this uninstalled for now as we're just in the process of designing our website but i just want to mention this be so you're aware that this is another essential plugin that you should have on your wordpress installation now it's time to set a home page and a blog post page so what am i talking about so if you visit a wordpress powered website like websitecreatorpro.com this is a page this is just one page that has a custom design and then because wordpress is more of a blogging tool they also require you to set a page to be the blog post page so this is the website createpro.com blog this is like the blog post layout okay and so if we take a look at our website with the hello theme from elementor looks fantastic okay this needs a lot of work but this is our archive page so your archive page is this okay so elementor for whatever reason they call the blog roll they call it the archive page uh so we don't want to edit the archive page we want to make a home page okay and so to do that we need to create two pages so anyways let's let's come down to settings we'll come down to reading let's open it up all right so here your homepage displays a static page okay so the home page now we have a sample page so we actually have to go in and create a dedicated homepage and a dedicated blog post page okay and then set it here so anyways let's go ahead and do that click on pages all right so go ahead and click on add new and now i'm going to create a page and call it the home page right so home page there you go okay so the next thing i want you to do is come down here okay because we installed yoast seo right here you can give a page description okay so for example the home page it should be the site title page separator and then a keyword description okay so just go ahead and delete that okay so it should be the website i'll just say website name page separator keyword description okay so this depends on whatever site you're you're building okay and that's it and so the meta description again as i said earlier that's like the little paragraph that pops up underneath here definitely put something in here uh that explains what your website is about and then go ahead and click on publish then publish again and there you go so now you've just created your first page so click on the wordpress icon okay now add new now we need to just do that one more time and we need to create a blog post page and i'm just going to call this blog okay now if we come down here make sure to check the url description so it's domainname.comblog so again you should have already set up your permalink so it should say like the page title blog if it says like number or something make sure to set your permalinks and i want you to do the same thing again come down here because we installed yoast seo now you have a little bit more control over the search uh description for your blog page so if you just take a quick look like with website create pro i call it the website creator pro blog case studies tutorials and you know making money online uh so you you can just set something right here so the the all right whatever i'll just call it the travel blog okay whatever it is okay so give it a description page separator and then your site title whatever and then go right in here meta description describe your blog in a few sentences then go ahead and click on publish and publish again alright so now we have those two pages click the wordpress icon go to settings go to reading all right a static page home page i want to be the home page post page i want to be the blog page all right so right here blog pages show up most 10 posts what's that talking about that just means right here okay so how many blog posts do you want to show okay so you can set it right there i typically go with nine because the way i like to design a blog is like by this three by three grid so it's totally up to you that's what they're that's what this is talking about right here then each post and feed includes a full text summary so this is rss this is kind of a data technology that nobody really uses anymore then search engine visibility so right here make sure that this is not clicked because we want our website to be indexed uh anyways go ahead and click on save changes and that's it okay so now you've just set a homepage so let's just go ahead and take a look at our website now oh wow so beautiful okay so now we're going now we're finally ready to begin the process of designing our site with elementor and the hello theme okay so we finally have our website set up we have the hello elementor theme installed we have the elementor page building plugin installed now we're ready to design our website so i just want to create a quick introduction just to explain to you how elementor works so you can conceptually understand what we're doing because it does work a little bit differently than other wordpress themes now elementor breaks your website up into three sections you have your header your body and your footer so your header is where the logo goes in the menu then you have your body where you can put in elements or blocks whatever you want to call it then the footer is where you're like your privacy policy terms of use disclaimer disclosures all that legally stuff goes so we're going to be designing each section one by one we're going to be starting at the header then we're going to move into the body then i'm going to show you how to design the footer so if you're ready let's continue hiding the page title with elementor so the very very first thing that we need to do is we need to get rid of the page title why well if you take a look at like a home page do you see anywhere where it says home page no well i can tell you like because i created this website like the home page for website great pro is actually called home page okay but i have it hidden from the actual page itself so i can add in my own titles as i see fit and you can do the exact same thing with elementor so anyways you just want to click on edit page come over here now it's time to edit with elementor so this is wordpress's editor okay this is called the gutenberg editor now if you click this button where it says the edit with elementor what's happening now is elementor is taking over the complete design of the website okay so now we can start designing with elementor we can just drag and drop things into place as we see fit but right here it still says home page and it's like how do you get rid of this like do you delete no you have to have a page title you can't delete it if you say if you delete it it'll just say uh let's just say like no page or something so to hide it is very simple but it's again kind of confusing so within elementor you want to come down here where it says this little gear icon right here that's your settings okay you want to click on that the title is home page status is published we want to hide the title okay we want to hide the title there we go and there you go it's literally that that simple okay then go ahead and click on update okay and that's it so that's all you have to do to hide page titles let's edit the header of our website so the header is this top section right up top here uh and so there's two ways to do it there's the manual way and then there's the way where you can just download a template quickly and easily i'm going to show you how both work now i'm just creating this section because i know people are going to be like click on the customize and then be like where where's the header i don't get it like okay you have to install a plugin okay let me just text out that all right so we want to come over here and you want to navigate to where it says plugins and then you want to add a new plugin and so what we want to add is like elementor headers and footers blocks something like that so anyways let's go to lmn tour header let's put that in now the correct plugin should come up okay boom right there elementor header footer and block template so what this plugin does particularly with the hello theme is it allows us to edit the header and the footer of our website so go ahead and click on activate alright fantastic so now we can navigate to appearance now we have an option called header header footer and blocks all right there we go so over here is where we can now set a header so let me just go ahead and trash that okay so to begin designing a header you just go here and click on add new okay and now this is where you can edit a header with elementor so we can select the type of template that we're creating so we have header before the header footer custom block okay so like what do they mean like before the footer so let me just open this up right here before the before the footer it would mean this section right top here now the reason why you would want to edit like before the footer is because sometimes you'd want like a message like this or you want to have an email opt-in form whatever that's kind of like that section that you'd use there now we're designing the header okay and now we want to display on so here you have a ton of options with elementor elementor it's fantastic in a sense that gives you this type of like really specific control so you can have it you can have your header display on your entire website on only on the 404 page on specific posts whatever for most people watching this like you just want everything to be displayed on the entire website okay and that's it so user rolls right there top here so this what this does is like that sets who can edit the header okay so you know if you have other if you have a team of people coming logging into your website you want to have this set to limit people who have access to specific things for most people watching this you're probably just a guy or girl editing your website so that's not really that important now to edit the actual header we'll just give this title actually we'll just call it this header manual okay whatever just click on edit header or edit with elementor all right so now elementor should load and this is okay now what you're looking at right here is not a page on your website what you're designing here is you're designing a header section for your website okay and so you can do it manually so you know if we take a look at a header how should a header be laid out you know you have your like logo over here and then you have the menu over here right so that's kind of like how you want to it's all it's totally up to you however you want to design your header but i would do something like that so we want to click on the plus sign add a new section what kind of layout do we want well i kind of want this kind of layout right where the logos that kind of look could be smaller and fit on the left than the menus on the right just go ahead and do that all right so now up top here is where our logo is okay or where our menu is so up top there we want to add in a logo so we can type in like something like logo okay and then we have these sites logo we can just drag that drop drag and drop that in there okay now you're just gonna have this generic box why well that's because we need to actually create a header and upload it to the sites okay so we want to just to edit and upload an image you have to click on this little pencil icon right there got it okay let's click on that all right now we want to go to style over here and underneath this oh sorry we want to stay under content okay so now we have custom image yes there we go that's what i mean the elementor has a lot of controls there we go so now we can choose the image that we want to upload so we actually have to create a logo i'm going to show you that in a bit later in this tutorial but if you have a logo ready all you have to do is click on choose image you can drag and drop it into this space and it should populate the logo as appropriate and you can set the image size the alignment your caption i would probably leave that off etc all right now we want to add an element to this over here so we click on this so what do we want to add we want to add in a menu so you can just type in like menu all right so now you have a bunch of different things over here i recommend the navigation menu drag and drop that right there okay so nothing should be in here because we don't have any menus on our site and so there are no menus in your site so we have to go to the menu screen and create one so let's go ahead and do that so creating a menu for your website it's very easy you have to go to appearance and then you want to go to menus let's open this up all right so let's just take a quick look now typically most websites have two menus you have your main navigation menu at the top and then at the bottom you typically can have a footer menu so we're going to do that so right now we're editing the header menu and so now we need to create a new menu and so right now we have the home page sample page cetera and so i kind of want to have i want to delete this okay so i don't really need the home page link in the menu so we can maybe just call this home rename it okay so that says home now we have the blog okay that looks nice and then we have sample page which is just like a default page that came with our wordpress installation so we can go ahead and like remove that we'll just leave it right there so we'll call this instead of menu one we'll call this main main menu you can call it whatever you want and so anyways let's go ahead and create menu okay very good and so display location this will be our primary menu so we'll go ahead and click on save okay so now within this menu you have edit menus and you have managed locations okay and so right now we have a primary and because we only have one we only have one menu location designed so far on our website which is this one we just created okay and so now we have the main menu that top there okay so let me go ahead and reload this and we'll start from scratch all right so again let's click on the plus sign boom right there now we'll go here we'll type in the logo again site logo drag and drop that right there all right so now we'll click on this and we'll go to menu and navigation menu right there okay so now we have our menu populating this section right there top there okay and it's really that simple okay so anyways to begin editing you always want to make sure to click uh click on the little pencil icon because this edits the what's the items within this section right top there all right so now we take a look we have content style and advanced so we come over to style for example we have horizontal padding so we can change the width okay in the space between we have vertical padding if we want to move the menu down so say if you had like a bigger logo and you wanted to like to move the menu down just a little bit you can do that space between okay you can kind of play around with this on your own so text color is over here now we want to make this black we can go ahead and do that to make it you know stand out a little bit more okay and so that is it so you have a bunch of different options so link hover effect so for example like link hover for example like when i mouse over the link yeah it should do something so typically we can have the underline over line double line framed whatever so you know maybe we'll have it underlined okay and so like when i mouse over it underlines does something to kind of give an indication that it can be clicked on uh etc okay so that's that's really it so we can come down here menu trigger and icon so over top here we can uh change additional items for the menu all right so anyways let's go to advanced so right over here we have different margins so margins like you know just you can just play around with this as you see fit so it does the same thing where you know it gives space between up or down so you know and also we have padding right up top there so what padding does is it gives this whole entire element it's a little bit more space if that makes any sense all right so motion effects is really helpful because motion effects you can have entrance animations so if we want to have it like fade in for example the site loads the menu fades in like that okay so anyways let's navigate back to the content all right so now we come over here main menu all right okay now we come down to well there we go now that got it all right so under content layout this is where you can change the layout and so for example it's horizontal we want a horizontal but maybe we want it off on the right like that okay maybe we don't want it on the left whatever or we want it centered like that this is kind of like where you can kind of change things like that okay and then like the break point like what is the break point so break point means like when does this become a mobile menu okay so you can change this to whatever you whatever you see fit i personally would just leave it as is so let me just open up like website createpro.com just to show you this so like for example like this is the menu right and so if i go to inspect and now look at that it's a hamburger menu okay why does it do that well that's because everything's compressed and that's the break point so that's what this means right here the break point so when someone visits on a tablet will this be a hamburger menu or display like this that's kind of how you make that decision okay and so that's really it it's really that simple okay so it could be a little bit confusing um but it's not too comp it's not too complicated okay so you just gotta create a menu in your wordpress dashboard over here make sure this is the the menu that you want so i called this main menu i literally just named this main menu you can name it whatever you want you want to name it abc123 menu go right ahead okay just call it whatever you want now under the content you want to pay attention to layout because the layout is where you can change the layout of of the menu items whether the left or right typically i would put everything on the right and we come over to style and style is where you can change specific elements of the menu like the color uh any type of animations underlining uh etc and it's really that simple so anyways let's go ahead and create a logo let's design a logo so i definitely recommend you stick to simple elegant looking logos you don't need some big complicated difficult to read logo i mean we can just take a look at like website createpro.com this is such a simple logo it's literally taxed with the capitalize the pro uh word so it's not that you don't don't worry about having some overly complicated design even look at the logo for canva it's literally a circle with the word canva logos today should be simple so you have a lot of different options with editing a logo i have other tutorial videos on how to use this website logo maker but one set i really like is actually canva so let's just go ahead and get started so i want you to type in youtube thumbnail okay and this is going to be our blank canvas to create a logo for all right so there we go so now we just navigate to text and i just want to create text okay so i'm just going to call this my name because that's the name of the website okay and we'll put that in a second okay and we'll move that over there oh there we go it's got to fix that okay so let me go ahead and fix this so i'll just make this we'll make this 150 there we go put that right there and i want to make this 150 as well so i'm paying attention to this number up top there so we'll just scale this up to 150. all right so now canva helps you line everything up quickly and easily there you go so let me just move this over give this some space all right so now we just have to design this so let me go ahead here and i think i'll make this poppins light and i think i'll make this one i'll just do pop and spool totally up to you whatever you want to add and so keep it like that i think that looks nice and simple and elegant but you can add more to it if you want so for example if you want to add in an element okay and i want to type i want like maybe a globe for whatever reason i could put a globe here you know and i could make this position this backwards behind everything okay so you can just come in here and add in elements as you want i'm going to leave it simple but again to add elements you come over to position here you can move things forward and backward okay and so you can like play around with things and add things as you want as you think they look good so let me just go ahead and delete that but it's really that simple now in terms of editing the actual text you have a lot of you actually have a lot of different options so it's really nice so you can come over here to effects and so effects you can add in like a lift or drop shadow or none or a glitch and have it look weird like that uh you can also come over here to uh right here this drop down right here we can have the letter and the line height so for example if i want the spacing of the letters to be a little bit bigger i can come over here and maybe maybe we'll make this five okay and we'll leave it like that and i'll come over here we can do the same thing you know just eyeball whatever you think looks good so maybe that's too much we'll do we'll do like just a little bit like maybe again we'll do five there we go i think that looks nice okay so now we have our logo set up so just go ahead and download now typically for websites i definitely recommend you download things as a png but because this is our logo we want it to be high quality and crisp and sharp and also it's not going to be that big of an image so png is okay so go ahead and download the file okay so now the file should be successfully downloaded get that out of the way alright so drag and drop that right there okay so now we need to edit this open this up and i'm going to open with uh office picture manager you can use whatever photo editor you want the only thing that we need to do only thing we need to do is just crop all this white space we don't need all this way space boom like that bring it up from the bottom right there okay and in from the right just a little bit there we go and in from the left there we go okay next come to edit pictures and then you just want to resize the image so we don't need this big massive image we can resize this down to something like you know 500 450 300 uh you know something like that not too big not too small so we'll bring this down to i'll do 505 okay all right so that's looking good and we'll click yes save that as is all right now that has now as you can see the way it looks on my desktop that has a white background but look this one doesn't so how do you do that well there's a lot of tutorial videos on how to remove backgrounds from images uh but honestly you can just use a website it's that's super simple it's called remove.bg and you just come here you can upload an image and it automatically uses machine learning to remove the white background from any image that you upload or actually just removes the background from any image so you can just use this you can use this website if removing the background is important to you so like why would you want a transparent logo the only time you'd want a transparent logo is if you think that your header is going to be a colored background you're going to be playing around with different colors you want to change it whatever but if you're not going to be doing that if you know for sure 100 that your header is going to be white then just leave it white okay anyways so now we have our image so we want to go ahead and call our image something logical like like uh like logo you know something like that so we know what it is okay so now we're back into our elementor and now we can upload our image okay so again we have to go to site logo again you have to click on custom image and then again you have to click on choose image okay and so now we can just drag and drop our image into place alright and so there we go so now we come down here we have the alt text so the alt text we should put in logo okay so that describes the image now right here we can go ahead and insert media all right and so there is our logo looking good so right down here we can change the size as well so for example it's 300 by 300 but you notice that it's not as crisp and sharp and so you definitely just want to leave it on full personally okay because full will have the image look its best and so honestly you're gonna have to probably play around with the size of the logo what i mean is i come in here open with and then literally edit the size the logo to the size that you think looks best where it's crisp and sharp etc okay so that's what you kind of need to play around because if you come over here and adjust the image size as appropriate it's gonna just make it look like not crisp and sharp okay that's the only way i can describe it like that that just looks a little bit blurry and so i like leaving everything on uh full okay so everything's nice and sharp and it looks fantastic okay so in general that's all you have to do to edit the logo with elementor so you have to install the headers uh headers and footers plugin and then now you have access to just add blocks as you see fits to you know create your logo okay and one last thing is like i always get asked is how do i change the font size of the menu so it can be very frustrating with elementor because you're clicking the icon here you're coming into content style advance i don't see anything that changes the size well the reason is because that's what you want to edit is the typography okay and the typography option is not here we have to do is click on the hamburger menu now here are your site settings theme builder user preferences so you want to go into the site settings once there next you have to go to typography now what you want to edit is you want to edit links okay so now we have to come down here and so i don't see size well that's because you have to click the pencil icon now we come down here to typography now here we can change it to something else so for example my logos pop in so maybe make the menu pop-ins okay there we go and next i want to maybe make the font size a little bit bigger okay so maybe to match the logo a little bit more we could do something we can do like a big bold design like that maybe like maybe like that's okay come down here the letter space and spread it out just a little bit okay so let's go ahead and click on update okay and so let's go back to the editor and there you go okay so if you want to know how to adjust the menu items at the top that's kind of how you do it you have to go into typography and that's where you can kind of adjust the size uh letter space and as well as the font family uh with ease okay so once your menu is done just double check and make sure you have it activated at the top okay so right now the menu is not activated uh so let's come down here so this is the header that we've just created so make sure that you come down here select option header display on entire website there we go and go ahead and click on update okay and so that saves the header that we just created as the header of our website so we will reload the site and there you go so there's our header okay and creating a header is that easy with elementor so we just designed the header section manually but is there a way we can just do it quickly and easily by just uploading a template and the answer is yes absolutely so one of the cool things about elementor is that there's a lot of third-party uh developers out there who make a lot of really useful plugins that allow you to create like your header and footer quickly and easily at the click of a button so one header designer that i really like is a plug-in called envato elements so let's go ahead and install it so we go back to plugins and let's go to add new okay so now you want to type in n vato elements there you go so envato if you don't know they're the company behind theme forest so themeforest is this website right here they're one of the most popular wordpress theme developers in the world actually they're not a theme developer but they're a marketplace for wordpress teams and they offer a lot of other random things are really helpful like audio video graphics etc so anyways they have a plug-in that's really great envato elements photo and elementor templates we'll go ahead and install that and click on activate okay so now that it's ready to go so let's go back to our home page and let's go ahead and click on edit with elementor now one thing you're going to notice that's been added is envato let's oh wait there we go so this little green icon this leaf thing see this is how elementor normally looks now that we have the elements plug-in we have this loaded now we want to adjust the header so we have to go in and go back to our section where we can edit the header so let's back out of this and back out of this and back out of this okay so again go to appearance go to header and footer there we go so header and footers let me just go ahead and delete this one okay so let's go ahead and add new all right so i'm just going to call this envato header there we go and now we're going to edit with elementor so let's go ahead and click that okay so all we have to do is click on this icon right here and up hops envato so we want to navigate over to where it says free blocks now what block do we want well we're installing a header so we want the header block and right here you have a bunch of free header blocks you can just click and install right here and that is it that's how easy it is it's really nice and so they have a lot of different options right like if you want like a black logo right there blue you know you can obviously you can just upload this and adjust as you want uh i'm gonna go with this one right here that has a nice button so let's go ahead and insert a template and so now it's going to import the template and wonderful so now we have a couple different elements right here we have a button over there we have a section for the menu we have the website name and we have this icon so if you want to just have a text based logo here you go so you can just come jump in here and adjust as needed if you want to update this image and make it your own image you can go ahead and do that personally i'm just gonna delete this entire section and the thing that i want to add would be like a logo okay so logos say logo drag and drop that in there and we want a custom image yep and i want to choose the image great and so i'm going to upload a version of my logo that i made a little bit smaller so this one's like 300 by 50 pixels let's go ahead and insert media and that looks fantastic okay so we don't want it on medium we want it on full and there we go okay so that is that for the logo now let's go ahead and click on the plus sign over here and what we want to add is the menu and so navigation menu drag and drop that in there okay great and so let's go to layouts and i want that off on the right side now again i just previously showed you like on how to adjust the size so like i think that looks a little big i'd rather like make that a little bit smaller so again we're gonna go and take care of that so anyways let's go to publish and there we go all right so let's have a look all right that looks great so that looks good but i'd rather have the these menu items kind of match the button text a little bit better so let's go ahead and edit with elementor and again i just showed you guys how to you know adjust the menu so we have to jump back into the typography so let's go ahead and do that okay so let me click the hamburger menu let me go to site settings let me go to typography there we go let's come down to the link let's click typography again let's make the font size a little bit smaller something like that yeah that looks that looks great so it kind of matches the button a little bit better and i really like that so we can just leave that as is i think that looks really nice so i'm going to go ahead and click on update and there you go so you can easily update this section uh just by using envato element so now we have a bunch of different elements up top here so let me just back out of this okay so now for this specific button if you want to adjust it again like always click the pencil icon when you click the pencil icon here are your options for the button and so here you can change the type okay default intro success warning danger so we just want default the text you just change the text so it's like click here okay like or like whatever courses we just say something like that a link we can have this link to a page or we can make an on-page anchor link which i'll get to later in the video you can change the alignment right here and you can change the how the size of the button so if you want small extra small whatever you can just quickly and change it there icon spacing okay how big do you want it and so you can adjust that there let's jump into styling again styling it changes how the button actually looks personally i really like the way that looks like i mouse over it becomes black but again you can just change that as you want so we have the text color so that changes the text border type is solid so that means the border of the button is a black line again if you want to change that to like double you can just you know select whatever you want and then that's it and then you have box shadow and you can add padding uh whatever you want and so that is it for how you update the header section how to add a favicon to your website that's powered by elementor so you're maybe wondering what's a favicon a favicon is a little icon in the tab up top there so you definitely want to create something that's brandable for your website because like when people visit your website on say like their iphone and most recently visited site you want an icon associated with uh your website it's also just a hygiene thing where just a small little detail that you don't notice but when it's not there you do notice it and so right now our favicon is just the wordpress icon so let's go ahead and change that so you want to click on the hamburger menu right there and then you want to navigate over to where it says site settings okay now we want to find something that says like sites identity right underneath these settings so let's go ahead and click on that alright so here you have your site name and your site description and so you can change that as you want from right here but i would just leave it and so we have the site logo but we already have that up top there so we don't need to adjust anything in here the only thing we need to adjust is the site favicon and so how do you create a favicon now it's up to you you have to create your own image you have to create your own image that's associated with your brand and so personally what i have is i have this little image i'm going to use i have it has i have it as a png with a transparent background again you can just use remove beat to remove that bg to remove the background from any image so you know just use your favorite picture editor maybe make a circle have some type of design that doesn't need to be anything complicated and just create something okay so let's go ahead and choose image and i'm just going to drag and drop that into place okay that looks good and we're gonna go to insert media and let's click on update okay and let's go back to editor all right so let's let's go back to exit dashboard and let's see ah very good so perfect so as you can see uh our favicon has been updated to something a little bit more brandable and it's that simple now it's time to add a big gorgeous hero image with a call to action to our website so uh i'm already assuming that you kind of played around with your header section okay so i went ahead and made my logo a little bit smaller change the color over here you know just adjust as you see fit when you're ready now you want to just add in a hero image so what are we talking about hero image is like something like this okay a big gorgeous image that takes the top section of the website a call to action that tells people what the website is about etc so how do we do that very very simple so the first thing is you need to source an image so i definitely would recommend maybe check out like something like unsplash.com and you want to find a bunch of like images that you think are would look fantastic these are completely free to use so you don't have to worry about any type of attribution or whatever and so but just one caveat is just to make sure to resize the image as appropriate so for example like this is like a 1500 by 1 500 image if i have to download this it would be like 6000 by 6000 pixels which is a huge image and the reason why you want as small as possible is because you want people to open up the website and have everything load really fast and so you can't do that if you have some massive image so anyways let's go to edit with elementor because we're going to be editing the home page okay now this is there we go so okay so let's begin editing our page so the first thing that we need is we need a heading okay why heading well that's what these sentences are right here like this like plan build promote profit websites made easy these are headings okay then this is like body text and so let's add in a heading boom there we go okay so right up top here you can add in your call to action so this sentence structure right here should be something like a call to action that tells people where they are what's going on what the website's about don't make it long and wordy quick and to the point maybe a subheading if you want etc so i'm just going to put in something uh find your edge comma enjoy life there we go okay now the next thing i want you to do is to navigate to where it says html tag you want to change this from h2 to h1 yh1 well h1 means that this is the page title okay and so for example like this is a blog post this is your h1 tag your h1 tag is the title of your blog post this is h2 h2 is a subheading of h1 etc and so that's why we want this to be the h1 because it's the title of the page now i don't want it off to the left i want it centered so just go here to alignment and click center there you go it's that simple now you can click on style and again the style tab is exactly what you think it's where you change the style of the text so we click this and we navigate that to black or whatever whatever color you want it to be and now over here you can kind of change the typography as you want okay to whatever you want so like for example i'm going to use poppins we'll just change it to that okay we can change the way transform style decoration you can come in here and play around with this if you want to revert anything you can just click back to default to start over if you made a mistake it's really that simple okay then text shadow okay if you want to have a text shadow if you don't want to have text shadow you know that sort of thing so let me click on it revert to default i'll just leave it like that okay and so i think that looks really nice now how do we add an image it's like i don't see an option to add an image anywhere it's like content no style no advanced tab right yep uh nope all right well the thing is with elementor is like you're editing the heading you're editing with the element inside this blue box but now we need to actually edit the blue box so we have to click this little dot section right there and see how this changes to edit the section if i click the pencil icon now i'm editing the heading we want to edit the section simple as that okay so now we need to have we have our whale option in our structure option and so layout changes the way that anything is laid out within this section but we have to add style to it which is our image you click that now we have background okay so we have background overlay border shape divider etc click on background normal okay so now you have classic gradient video and slideshow so you if you want to add a video you can do that from here but personally i definitely would recommend going with classic all right so that's classic i'm going to choose an image now i'm going to choose an image i've already uploaded so here we go this is my background image again you can use something like unsplash to source your own image whatever but just resize it okay this is like 1800 by 1200 it's big but it's not too big okay so now we've just successfully added an image okay and that looks terrible it's like why is it so small like you have to add padding to it okay so you have to add space to it so padding is the phrase you use to describe like the space between elements so for example like this is a text sentence here this has a lot of padding above this text and a little bit below it so it kind of pushes everything away and separates everything out if you don't have any padding everything gets compressed together so that's where you want to go to layout okay so you want to go to layout now you want to come here to heights and we want something that can maybe like fit to screen okay that looks nice or maybe minimum height and when you click on minimum heights right here you'll get this little dial right here and so i really like this because it's just very easy and intuitive for beginners where you can kind of just play around with the way that this looks okay so it's totally up to you so what another thing i like about elementor is that i said this says fit to screen and so that's going to fit to the screen no matter what device the person is on so if they're on a mobile device it's going to fit it automatically to their phone etc i'm just going to do this minimum height because obviously you know the way i like to design sites i don't want this image to be a super massive image i just want a little bit a little bit like watch some little little bit of white space underneath and there you go so i really like the way that looks okay and so let's come back here to the text okay and so i'm gonna come back here to the text now i'm editing the heading style all right so now i can come over here and we can come to the content and so we have default and size maybe i want to make this like bigger we'll do like extra large yeah that looks much better alright so uh now it's a little bit difficult to read so style and so black and let's do white or something let's do a different color all right so i may need to add in an overlay on this uh the image okay because like oh well i can't really see with the text on this so let me go back here let's go back to style okay now we can play around with the background image so you have your position there now your position there you gotta minimize this and make sure that the image is fitting correctly okay and so we can change different things like center center okay i kind of like that because maybe the text would look a little bit more clear and easy to read if i made it white over this section of the image you know if you have a top sensor right there ah that looks nice okay so i can keep it like that if i want alright so now we have the attachment so here we can have scroll or fixed okay and so if we uh you just play around this so scroll okay that means the image stays put if we come to fixed that means the image stays fixed it behind it and then the you know kind of gives that nice little feature of you know the image moving behind and i kind of like the way that that's working so i think i'm going to keep it as fixed all right so now we kind of want to come down here to where it says background overlay so what's an overlay one overlay is like adding color to an image why would you want to do that well for example i want to use white text on this image can you read white can you read white on like a uh this specific image not really because it's a black and white image so i had to make it like a dark blue so the text really pops and stands out so we want maybe if you want if you have to do this you can come over here and do that so background overlay kind of click on classic here you have opacity okay so you can kind of change things as needed right there okay so let's come over here to background all right so now we have a bunch of different all right actually let's go back to background overlay all right so we have color if i want to click on color there we go so now if i want to change this to something else like maybe black a little bit like there we go just like maybe make it a little bit darker totally up to you so i'm not going to add any type of overlay i'm going to kind of leave it the way it is okay next thing that we can add is kind of like a shape divider so if we come over here to shape divider now here we have top and bottom so we come over here to type and then you have a bunch of different types of shapes that you can add in so for example triangle now this is selected for the top that looks kind of weird so we'll get rid of that okay we'll click on none let's go to bottom okay so now i can come down here and go to triangle right there okay and so that looks pretty good so we can invert this right here okay just click on this one to invert it as you want and so i think that looks kind of nice like that but again you can just kind of play around with this as you see fit okay so you can just come in here click a bunch of different ones and so like my one of my favorite ones is like uh i personally like the tilt opacity one and i personally like the uh triangle one okay because the triangle one kind of points down points the user down to like the a new section right here so i'm going to kind of leave it like that okay and so that's kind of basically all you have to do to add specific elements and add a hero image with text with the text overlay it's really that simple how to add a button to our call to action at the top okay so i know a lot of you are going to want to add a button i'm personally not going to add a button but let me just show you how it's done all right so right now i'm editing the heading and you're like how do i get back to the blocks like what do i click on like you gotta click on little squares right there there you go now you're back to like where all your blocks are okay and so now we want to add in a button and that's it you just type in button drag and drop and it's that simple there you go so now we can come over here and we can change the alignment we can change the size so i'll make that extra small i think that looks nice right there and so we can come here to change the button type so we have like info we have success okay we have warning now if we want to come i'll just leave that as a info now if we come over here to style here is like where we can kind of change the text color if i want to make that different color background color we can also change as well okay and so that's kind of just it you know really simple as that so you can change the text color there type background you can change the typography over here you can add a text shadow you can change like the different elements for what happens when people mouse over the button etc okay and it's really that simple now if you're like well how do i separate it like maybe you think like oh well the button's a little close to the text right is there any way i can give it a little bit more space and like yeah absolutely and so now while this specific option the button doesn't have any way to add like padding just above it you can all elementor does come with something called a spacer and so spacer is just this like drag and drop it here boom and now you can push it as far as apart so i think like just the spacer at 10 already looks nice where it's like okay got a little bit of breathing room that looks really nice and you can just leave it like that so if you want to add a button that's pretty much all you have to worry about in doing okay and so we come over here to content and then the link right there this is where you can like link out uh to other websites if you want and you can change it to open a new window or add no file so only links that are off your website to another page should be open a new window but if you're linking to a page on your website i don't have it open in a new window if that makes any sense but that's basically it that's all we have to do to add a button all right now it's time to continue adding blocks to our website so now it's really coming together we have this menu at the top we have a nice little call to action and so now you can add in blocks and this is where your own design and creativity can come into play with elementor so you have a few different options so first off you can either click this plus sign and then here you can change the site structure or this the structure of this specific section and so it's kind of obvious like this if you do this one it's going to be like two blocks okay so right here i can come over here click this plus sign i can add in any block i want over here and then click this plus sign and then add in any block i want if that makes sense okay and so that's kind of like how elementor works and that's the way that's why like when you get the techy stuff out of the way like the header and this thing right here then it's like all right cool now i can like do whatever i want and so what i recommend is either you custom design things yourself with the plus sign or you can just add in a section quick and easy and so if we click this little folder icon uh we'll have the elementor plugin pop pop-up and it comes with a bunch of different block uh block libraries that come in here now the reason why i had you install the envato elements plug-in right here is because the the library for that elementor provides well unfortunately they don't provide the header in the footer section for free but envato does so it's really the only way you can get the head a nice looking header quickly and easily so anyways if i come over here and i click on this uh folder icon we have a bunch of different options so i like this is fantastic like this looks so good so i'm gonna click on insert like this let's click on get started now it says connect to template library access this template library okay and so i have to approve and connect my email and just you know you have to create a free account so you have no option you can't just do it for free yeah you do have to create an account without a mentor not a big deal because then you can just boom there it is done wonderful and so how would i use this section right here so this section should be your introduction section okay and so this should like hey welcome people to say you know hey welcome to coffee maniacs.com our web dedicated website about coffee whatever your website's about okay and so for me like if this was like a a personal blog for example or personal website i could say like hey money hey um uh i'm a professional blogger youtuber highly rated ux consultant on fiverr blah blah blah i just you know you use that whole section right there okay and so you want to click on this and make sure that this is see that says h4 we want that to be h2 actually okay why do you want this to be h2 again because this is a subheading of this and so we want this to be h2 now this text right there it's up totally up to you whether or not you want to leave it as this light gray i actually kind of like that actually i think it looks quite nice but if you want to change that you can just come over to style and change it and you know make it something maybe a little bit more readable maybe just slightly slightly more readable there you go and then right here we have a read more link and so we click on that and so what i personally would do with this is this should link to either a dedicated about page or whatever and i think it's fantastic i mean i literally do that on website creativepro.com because like boom people come here this is what this website is about learn more boom click over here and then you're on the about page where you can learn more about uh website create pro how to use the site and about me okay and so that's why i really like this section the way it just just drag and drop like just click a button and there you go and i think it looks really nice because now we have this hero section up top there we have the triangle section right there kind of pointing down boom it kind of overlap kind of the i like how the site kind of overlays the image a little bit then we get right into the welcome message right here so anyways that's how you get started with adding specific sections up particularly the welcome message elementor essentials so i just want to briefly mention that there is one plugin that i really like to add to elementor because it adds a bunch of different blocks so you want to come over here and you want to go to add new then you want to type in elementor essentials and then it's going to be essentials essential add-ons for elementor now what this does it just gives you a bunch of brand new elements to add to your site okay so it gives you options to like add a creative button testimonials info box advanced accordion advanced tabs uh so you have they have their both versions they have their pro versions where you have to pay for to get access to and then they have a bunch of like helpful free versions like post grid uh fancy text all this good stuff okay so if you want to add more blocks and more specific extensions this is what essential add-ons does whether or not you use it it's totally up to you but i just want you to be aware of it and so let me just go back to my plug-ins because i know with elementor you do end up having quite a few plug-ins so so far we have elementor elementor header footer and blocks which helps us adjust the header and the footer of our website and vital elements which gives us helpful blocks to add in very beautiful looking footers okay so like the elementor header and footer blocks just gives us the ability to control the header and footer section okay it doesn't give us blocks but gives us the ability to control those sections and vital elements i like because it actually gives us like pre-made footers and pre-made headers that we can just throw in really quick and essential add-ons just adds in more helpful blocks uh and elements to help design your website quickly and easily so you can kind of explore this plug-in on your own to see what elements that you end up using maybe you don't use anything you can go ahead and uninstall it but just something that you should be aware of let's continue designing our website so i want to add in like an image gallery and like maybe a little introduction to the image gallery so how do we get started so again now you've kind of got again like i said you got the basics of how to design your website now you're kind of free to experiment and be creative because you got the essentials out of the way so i'm going to start off with i'm going to add in a new section and so what kind of layout do i want i kind of maybe this layout right here would look good so now i have two blocks right here and so what do i personally want to do i want to have like some type of like image over here and like maybe a little image gallery and then like a little text introduction over here so let's go ahead and begin with adding the text in so we'll click on plus now again you know it's a text paragraph so we probably want to have a heading right so let me go ahead and do that and so uh we'll take that out and let's just type in like uh i make i make youtube i make youtube videos ah i gotta spell youtube correctly i make youtube videos there we go so again go to style go to text color black there we go now we want to make sure the content not h2 either we want h2 or we want this to be h3 i probably make this h3 totally up to you but again this is h1 this is h2 i would make this person like h3 so now i want to add in a paragraph so we come over here and we just want like text editor okay and so why text editor because we just want to add in text simple as that so let me take this content right there i will just double that a couple times and so just the just for demonstration purposes you can go ahead and write your own paragraph down now the next thing is we need to make sure that this text matches this text because it looks weird right like why don't use two different fonts it's a big mistake so let's come up here let's click the pencil icon style all right so what typography should we use well it's set to roboto i'm going to be using pop-ins now i want to edit this one and i want to come to style typography again i want to put in pop-ins now you don't have to use poppins you use whatever you want just i'm using pop-ins so we'll make it a little bit like that okay so they kind of match looks a little bit nice you can eyeball it or you can get the or you can check this out to see the exact number but i'm just going to eyeball it because not a big deal alright so that looks good so let's go to content all right and so i think that looks really nice and so let me just come back up top there all right now let's come over here to again typography so maybe i need to change the weight just a little bit to make it ah there we go that's perfect so now this kind of matches this looks nice okay so now we need to add in images so let's click this all right so you have a lot of different options with elementor and i really like it so we type in image so you have like image image box image carousel basic gallery now you'll see something that says ea that means that that that's the elementor's add-on plug-in so this has become this is coming from that plug-in that we just added because it just gives you more blocks and obviously the things with a lock are obviously elementor pro so it's totally up to you you can play around with this with whatever image you want to add i personally like the image carousel so i'm going to go ahead and take that drop that in right there awesome now we need to have images so i've already gone ahead and uploaded a bunch of images so you can just upload images as you want and let me go ahead and create a new gallery insert gallery alright so let me just show you quickly one of the images how did i make this so again 100 with canva super duper simple all i did was take a screenshot of a video i made then i went to canva youtube thumbnail uh template i just added this play button on top of it and added text that simple it's really that simple okay and now we oh that looks fantastic okay and so now we have a nice little image gallery over here that kind of shows off our videos a little bit with the thumbnails and so you can come in here and change the content style as you want so again you just gotta eyeball it and play around with things so if i come over here and come to like medium how does medium look i don't really like the way medium looks i think i'm going to go back to thumbnail you know uh you know we can go over image stretch how does that look okay it's like oh that removes the white space no i don't really like that again that's what you have to do just come in here and play around with things now what i like is the link you can have your own custom url so you can link this section to like whatever you want so if i come over here to youtube and we'll just type in we'll go back we'll visit my youtube channel and we'll just take this one and then let me copy the link address go back here then all you can do is just put in your youtube channel or youtube video and now i know you're going to be asking like hey can i have this image linked to a video and then this image linked to a different no no you can't this image carousel can only link to one video not a big deal you just pick your best video and so when anyone visits your site and you do this they come down here they click this they're watching your best video that's the way i would set it up and it kind of introduces the concept that you make videos and just get the focus should be more about getting people onto youtube and onto your channel watching your videos more so than having them like on the home page of your website go scrolling through a bunch of different videos and clicking individually to watch videos people don't do that so you know that's basically it so the way that this works now if someone clicks this section right there it's going to be a nice overlay of the video on our website okay and so let's go ahead and click on update all right fantastic so now everything is saved and that's it so that's how you kind of add a image gallery and some text to your website now i want to add in another like image to kind of break up the design so what i mean is like we open up the site got this nice image up top there paragraph and then a nice another text and image section right here that kind of introduces the youtube videos for example uh we don't want this to be too text heavy which is paragraph paragraph paragraph we want to have a little design to it right and so let's get started so i want to just do the same thing i did up top here okay i just want to have another image and text over that image and i already showed you how to do that so you should already kind of know what we're going to be doing so again all you have to do is start with your heading and so we just drag it the heading over here boom now add text to your heading so what i want to do is kind of like create like a anchor link on the page so when people click the course button up top there they come down here to this section but first let's create the section first before we create the anchor link so this is going to be for our courses so yeah you could call it courses but like always make sure to create compelling copy that grabs people's attention so i'll do something like courses that courses that work there we go okay html tag h2 yep do i want it centered yep okay style let's come over here let's change this from the blue to the black and let's go to typography roberto roboto no i want this to be popping so you know with your fonts okay you should have two fonts you should have one font to be your titles and then one font to be your body paragraph now you can have the font be the same but if you're gonna have multiple fonts just pick two okay one font for your your titles and your menu up top there another font for the paragraph anyways now it's time to add in an image so let's go ahead and do that click the buttons right there okay and so again we come back to style and we want to go to background and we want to add in a classic now you want to just upload your own image again so i've already gone ahead and done that so i have this image i got from unsplash and that's it so let's go ahead and insert media there you go okay so now we want to come to layouts and now we want to change the height so i want maybe fit the screen i don't want to take up that much space like that's a lot of space i just want this to be kind of something a little bit more low key so it's like let's just like ju yeah maybe like that you know something something minimal all right so that's so far looking really nice now uh we can change the way that this is uh positioned okay so let me just click out for that all right so for example we come over to style okay so the position we want maybe center center okay so why do we want that so we'll just go to default we come this as you can see the image is kind of clipping so that looks just weird we don't want that so we want to go over here and we want to make sure that it's center center for example okay let's see this all right so it's still doing this like where it's repeating the image so how do you make it stop doing that easy so you have to go to repeat and you have to say no repeat okay well now it's just white and so we want to have we want the size to fit okay so we want to cover okay and so it's automatically kind of kind of zoom in on the image okay so now we want to take a look yup that looks good okay so now to fix this if like you don't like the way that this looks then you gotta source a bigger image etc okay so maybe if you don't like how it's too cropped in like that you want to change it you know again you gotta get a bigger image then okay that's your only option and so you know i'm gonna leave it like that i think that looks okay uh now but i'm not happy with like how tiny that text is like let's make this bigger so it's cool here click the click the pencil icon now we're editing the heading all right so content go to style typography click on that right here is the size so here you can just make change the size as you want so i'll make it something like big and bold like that all right so courses that work so we come down here we come down here all right maybe that's a little too big we'll make it like there we go okay there we go and there you go okay so again you can play around with this section as you want so let me come back here and so again if you don't want the attachment to like uh you know you want it fixed for example then like when people kind of move and the image moves in the background if you want to do that again just do that by changing the fixed attachment but i actually kind of like the the image to stay put for this one personally but it's up to you you can make that decision on your own but now we have a nice little section and so now we can add in say uh like links and images to our courses for example how to add in anchor links on your website so you're like what's an anchor link an anchor link's one of those links where it's like okay so when it's on your website boom they click the courses then boom it takes them down here automatically how do you do that that is called an anchor link okay so now to get started with that elementor again fantastic makes it so easy all you have to do is search for a specific widget called anchor so menu anchor then you just drag that drop drag and drop that into place so i'm going to put that right underneath the courses that work so the course id for this you can name it whatever you want so i'll just type in course literally course now we'll click on update so that's step one okay so now we just set the anchor link right there now we have to just link this to this anchor link section right there really that simple so how do you do that well we got to jump into our header so go back to your elementor dashboard you want to go to appearance we want to go to there we go we want to go to we're going to go to appearance there we go header footer and blocks all right and so now i have my envato header that i created i want to go to edit and then we want to edit this with elementor okay so let's go to edit with elementor and once you're in there all you have to do is find your a button and then link it to the uh section there we go okay so let's just click the button click on that and so the link the link is hashtag course why all right let's go back to the homepage so i have this called course now to link to it as an anchor it has to be hashtag course that simple it's really that simple then go ahead and click on update and just make sure that this is all set and you're good to go okay and that's all you have to do in order to set an anchor link so now when anyone visits your site and you have a menu item up top there and they click it and you want them to go to a specific page on the site that's how you set it up all right so now that we created a like a section for courses now it's time to like upload our courses for example what you what you could do for example if you had like a udemy course or a skillshare course or a teachable course for example you could put a thumbnail and then what i would do is put like a quick little title so for example let's just open up websitecreatepro.com so the way i like to structure images like this where i like that the image and then quick and to the point not super wordy so it's like you you can go with like a title and just a title an image or a title and then a paragraph that explains what the image is all about that makes sense now the first thing though i want to fix though too is like because we have this anchor wing there you can see that's kind of pushing the text up so it's like i kind of want the text a little bit more centered how do you do that well you know you got to just do that uh spacer thing so there we go put that right there all right and there we go so now now this is centered once again in the middle okay so just if you're just wondering that like how do i move that around okay and that's all you got to do so anyways let's add some images so i want to click on this plus sign and now you have a lot of different blocks so if i come over here to blocks and i type in image we have a lot of different options we have wordpress we have image carousel which is this basic gallery image box image i personally am just going to use the basic old image because that just allows me to have a little image and then add a text etc i don't need a carousel i'm not adding in a gallery so that's not what i want so i'm going to go with like a three by three grid right here so click on three boxes right there alright so what do i want to add in i want to add in an image just a plain old image we'll just do that okay drag and drop that there there we go okay so now we just need to add in our image so we go here to choose image okay and i'm gonna upload this image so insert media there we go all right so we'll go ahead and click on this one do the same thing again go to image drag and drop that in and we'll click on choose image and let me just upload this image i got all right got a bunch of images with dogs okay there we go now one more and we'll do image drag and drop it in and again choose image drag and drop there we go and go ahead and insert media boom now one little piece of advice is that you are going to have to make sure that the images are all the same size okay don't be uploading one image that's like 1000 pixels by 1000 and this one's 800 by 407 make sure that they're all the same size so they fit nicely uh accordingly now we can just add text okay so again very simple so come over here and we want to add in a little heading so just drag and drop a heading and so i would make this maybe like h3 for example and so learn how to we'll just create that and say learn how to create a website learn how to create a website we'll keep it simple actually create a website create a website there we go okay and so again go through the same process change this to black make it readable you know go to content center this there we go then we can just come over here and add in again text editor right underneath this and there we go and that's all you have to do so you can just do this for each one of these items and just go ahead and quick create a quick little title make sure that the title is like whatever this is like this should be h2 i definitely would make this h3 and just add in a little title for each and then an associated paragraph okay so this came out quite well i really like the way it looks now again to create links it's very simple you just go to the pencil icon and over here where it says link this is where you can put in a url to say your specific course wherever it's located again you can come down to the text again and to create links within the text it's very easy to just highlight the text and click this link sign and that's it and so also one other thing is like oh well this is a little bit close right these are kind of like scrunched together if you want to add more space that's pretty easy to do too so we just have to go up top there to the square icon and again we just want to use our handy dandy spacer put the spacer in there okay so now you can just drag and drop this into place so what's cool about elementor is that you just drag and drop sections into place and there you go and so now we have a nice little spacer right top there to give a little bit more breathing room and i think that's coming together quite nicely all right so here's our website and now the main thing that we're missing is the footer so what's a footer let me just open up websitegreatpro.com so the footer is the bottom section of the website where you typically have like your privacy policy in terms of use like a sub menu that sort of thing that's what you just you just need stuff in the footer you need like your social media links whatever you want to add and so to add with elementor to add a footer with elementor is quite easy and it's the same process that we followed for the header section up top there so anyways we want to navigate back to headers footers blocks templates and we want to click add new okay and so now i'm going to just call this like an avato footer now it's the same process as before with adding the header but i personally recommend using uh like envato for example because they just come with some really nice built head of footers that make like designing your website quick and easy so anyways we'll do that in let's wait for elementary to load all right great so let's go ahead and click on the envato elements right here and we want to go to free blocks and then we want to look for something that says footer and so footer's right there click on this and now we can insert any of these templates quickly and easily and so i like this because like yeah you can design this yourself or you can just jump in here and just automatically insert a footer of your choosing so i really like this one we'll go ahead and insert template okay and that looks great so now we have our social media links we have about us and we have specific pages and so what this means like we can come in here and like make these little links to like our privacy policy terms of use etc okay and so we're just going to leave this as is okay and we'll come back and edit the specific elements of this a little bit later but let's go ahead and click on publish okay so there we go so now the footer is good to go now if we want to change specific elements of this we have to click this icon right top there under style under style is like where you can come in and change the color of this and you can change the links and you can you know that's how again that's how you come in here and just change these elements but again you could totally design this yourself with elementor but that's why i like invalid elements because boom it's here it is it's good to go so we can add in our social media links all right so anyways now let's go back and let's add exit to dashboard okay and so let's open up our website and let's just take a quick look all right so we'll come down here and the footer is not there oh no so again you're forgetting the last part you have to add it to the site so for example this is the invital footer what do i want this is the footer okay and so what do i want i want to apply to the entire website okay there we go now let's go ahead and click on update all right go back to the site let's reload this bad boy and there we go it's that simple and so that's looking quite nice where we have a nice looking footer at the bottom of our website where we can add in some branding adding an email opt-in form to the footer of the website so a lot of a lot of designs have the email opt-in form like right here and that's a terrible spot because like a throwaway spot if you're serious about getting email subscribers you want to add an email opt-in form right here above the footer it's one of the highest converting spots for getting emails now to add a form is quick and easy with elementor because because of this a fantastic header and footer block template so anyways let's go ahead and add new all right so now i'm going to call this like email above footer there we go all right so let's go ahead and click on edit with elementor alright so now we have a bunch of different options here now we're going to be using envato elements but i just want to quickly show you why so elementor does provide their own library of blocks but all the good stuff is pro you have to upgrade to elementor so for example we come over here to subscribe it's all pro pro pro pro pro same with their headers and footers this is why we're using envato elements because we can get around that so let's just click on free blocks and let's go to newsletter subscription now sidenote you can absolutely design any of this stuff on your own you don't have to use a template i just like using a template because it's just quick and easy so anyways let's just come down here you have a lot of options that you can install i would suggest picking one that obviously blends into your site and so let me just take a quick look uh oh yep perfect this one looks great so let me go ahead and click on insert template okay that looks good but this text is totally off now this text looks nice but just doesn't fit my site the way i've designed it and so uh what i want to do is i want to go to style and typography and play fair display nope we want poppins that's what i've been using and now white gray no i want it to be black there we go now sidenote also check out the advanced tab because you can also add in motion effects don't overdo motion effects it just gets annoying for the visitor but just a little bit's okay like this is set to fade in you know animation duration normal fast so you can just play around with this so i think that looks nice just leave it like that okay so now you're noticing like hey where's the where's the opt-in form i don't see that anywhere well you have to add that in yourself okay because you get opt-in forms from whatever service provider you're using so this is convertkit you can use whatever you want but uh this is my dummy account for convertkit so anyways go ahead and click on create new and we want to add in a form and we want to go to inline and so you want to find a form within your email marketing service provider that's like just the simplest one like this okay a basic inline form no frills now obviously you can edit this form change the color buttons as you want within convertkit but this is not a convertkit tutorial so i'll just leave it there this looks good let's click on embed and we want to use html not javascript and not wordpress you're like why not wordpress well that's a wordpress plugin we're not going to install convertkit's wordpress plugin we're just going to use html click on copy right click copy there you go done alright so now we want to navigate over here and we want to add in an html block underneath that so again click the squares and go to html html drag and drop it in drop it right there all right paste it in and there's our form and looks good so go ahead and click on publish all right great so now let's go and exit back to our dashboard and let's go to before footer and we'll just say entire website okay click on update there we go okay so let's reload our website and there you go okay so that simple so now we have a nice couple different sections of our site and we have a nice opt-in form sitting right at the footer right there and then the the footer at the bottom and it looks great all right so adding specific pages to your footer and so now what's important to put in the footer are your legal pages primarily and specifically your privacy policy and your terms of use and so in order to do that with elementor it's very simple we just click the pencil icon right here and now it says list item one and so like we don't want to say list item one we want to change it to say something else so you know just change it literally just jump in here and say like uh you know privacy policy privacy there we go so how do you add a link the add-a-link option is right there and so if we jump into our pages you know with our default installation of wordpress we come it comes with a privacy policy page okay and so you can just come in here and go ahead and publish this page let me click on this publish in publish okay and so now we have our privacy policy page we come over here and i add a link to my site and that's it okay leave it just like that and so now we have a privacy policy so you can notice down here that we're linking to this now what specific legal pages do you need okay so i have a whole guide on this website creative pro legal pages there we go uh where is it okay one second oh whoops what up if i spoke my website correctly there you go how to write your legal pages all right so you know i'm not a lawyer obviously but you know you need a few essential pages so you need a privacy policy and so your the point of your privacy policy is to tell people like what the information gathering process is for your website then you're gonna have to have a terms of use page so what are people agreeing to abide by when they visit your website and you may want to include a disclosure if you're going to be engaging in affiliate marketing so you've seen it when you're on a blog post this postmate contained affiliate links please read our disclosure from no that's that site sort of page that you need to create and so at the footer definitely recommend you have at least your privacy policy in terms and conditions and so you can come in here and just edit these options as you want okay and so let me just minimize that and so really right it's very simple so you want to have privacy another item another item if you want to add your another item again you can just come in here and then you can just change the icon library to match the icon right there etc so it's not too it's not too difficult okay and so you know you can either delete this entire section if you want or edit these links make it like a sub menu maybe make it your about page contact page whatever then obviously your social media links are pretty self-explanatory so we come over here so for example like google plus that doesn't exist anymore so i'd go again and get rid of that then it works the same way so you can click on your facebook and then like add in your facebook link right there uh et cetera and just click on the icon and make sure it opens in a new window because it's off your website if that makes sense and that's pretty much it that's all you really have to do for this section right hop there so about us again welcome people to the site whatever you want to do and that's it for how i would recommend adjusting the footer all right so now adding pages to your site with wordpress is very easy so again what you first have to do is navigate over to pages and just go to add new and so i went ahead and created like an about us page now with elementor you have to design each of these pages individually so i just went ahead and made an about us page drill is a the url structure is about actually just change that and make it about there we go all right so let's just open this page up and so again i'm not going to walk you through how to design this because we just went through how to design the homepage the process is exactly the same okay so again like you have to just go edit with elementor so click here or sorry click here edit with elementor when you're in the about us page or whatever page you're editing whether it's the about contact page all that good stuff same process and then you begin the whole process over again with a blank slate so again we have the title right there the page title we want to hide that click the gear icon again hide page title and there you go okay so just follow the tutorial again because now you have the ability to customize the look and feel of each page individually and that's what you have to do with elementor okay it's not like you get a bunch of templates okay you have to kind of design each page individually but it's not too hard and it allows you to have a lot of fun a lot of creativity once you really understand how elementor works which you should understand and so that's what you have to do for each additional page going forward be it your privacy policy about contact etc all right so the last page i'm going to show you how to add is a contact page with its own dedicated contact form so let's go ahead and do that let's click on add new alright so we'll just call this page the contact page and we'll call it contact okay now click on publish there we are all right so now we need to have an email form so we have to have another plugin for this and plugin i really like is wp form so we'll go to plugins we'll go to add new and then you want to search for wp forms there we go okay this is wp forms click on install and click on activate and here we go so this is a quick little introduction to wp forms we want to go ahead and click on this button where it says create your first form okay so now we have a bunch of different options with templates we want to just create a simple contact form okay so here's our simple contact form all right so i want to change this i don't want to have to have people put in their first and last name so we just want to change this to simple format so we have name email message looks good to me now we go over to settings and now the settings is you can where you can change the form name we come to notifications under notifications send to email address it's going to send it to your admin email now if you want to change it to something else you want to have a different email whatever this is where you can input it right there but as as by default it's going to come up as admin email now email subject will be new entry simple contact form so that means like when someone emails you it'll come up with this entry okay so you can change to something more customized like uh my website email form whatever so you know when someone emailed you anyways to embed the form is easy you click on embed now we select the existing page create a new page you can also embed the form manually or use a short code and so i want to use a short code and so we're going to highlight this code right there okay back out of this we'll back out of this actually nope we have to save make sure to save the form there we go all right so now we come over to pages and we want to come over to our contact page that we just created click on edit all right now there we go now make sure to click with edit with elementor okay and let it load okay so this looks good so let me just go ahead and click the gear icon let me go ahead and uh hide the page title there we go all right so first thing i want to add in a couple of different forms so i'll just click on elementor elementor's library and let me go to blocks and i really like this block i don't know why i like it but i like this block a lot so i'm just going to go ahead and use this block okay so i can just take care of this and we'll just there we go all right let me call this uh need to get in touch question mark so obviously this is the page title so this should not be h4 that should be h1 okay then again you can just adjust this text as needed okay so like yeah hey thanks for your interest in the website i probably emails in 24 to 48 hours blah blah blah cetera and so we don't need this read more link anymore we can get rid of that okay and so now what do we need we just need to add in another block to enable our short code so what you just need to do is click the little square icon again and then you want to look for something that says short code okay there we go short code so let's take this drag and drop it right there all right click on paste and there we go and our form has appeared and now this looks fantastic and so again if you want to hide this email opt-in form on the contact page you can do that just need to go into the above the footer section that you edited this and just make it a rule so that this is hidden on the contact page but if it's not a big deal to you just leave it like this and there you go you just created a nice looking contact page quickly and easily let's go ahead and click on update fantastic okay so let's go here let's exit to our dashboard now we want to edit to our menu at the top or you can put it in the footer it's totally up to you so again i just showed you how to edit things in the footer but if we want to add something to the menu again you have to go to appearance go to menus and then you can add in like contact add new all right so we can adjust this like that boom click on save menu all right so let's open up our website one more time okay and so we've successfully added contact to our menu up top there now within this menu section see how i can have it like that what that does is it creates a drop down uh so if you're just curious like how do i create a drop down you can create a drop down by doing this so underneath home it'll be a drop down link for contact and blog in general i shy away from drop downs whenever possible so you know it's up to you but that's how you would do it and that's it and so that's how you add new things to your menu item how to add google analytics to your elementor-powered website so i'm assuming that you've already created a google analytics account if you haven't already done so you have to go to google analytics okay it's called google analytics credit account it's pretty self-explanatory but you want to get to this page something like this depending on when you watch this video where you need to get the tracking code okay and so you want to come down here and you want to get the script okay and take this copy now we need to put this script into the header of our website and so to do that i definitely recommend installing another plugin so let's go to plugins and let's go to add new okay so now we want to install headers and footers all right so insert headers and footers here we go this is the one we want so go ahead and click install and click on activate all right so now we're good to go so just navigate to settings and then click on insert headers and footers now i really love this plugin because it's just plain so simple so scripts in the header okay so google analytics goes in your header so that's what all you need to do done that's it and go ahead and click save and you've just successfully added google analytics now once you've added google analytics you're going to be able to verify your website with google search console so just navigate to google's google search console and log in to search console using the same email that you have your analytics account with and that's it and so it should verify your website and google search console is really powerful because it gives you a lot of specific information about how your website's uh ranking and index within google uh et cetera so anyways that's how you add analytics to your website how to add social share buttons to your website so one service that i personally like is called add this so you have to just go to add this and log in okay you're gonna have to create an account create uh do what you need to do now once you're in you all you have to do is navigate to where it says tools now we want to go ahead and click on add a new tool and we can want to add share buttons so do that and now here is where you can adjust what social share buttons are up here so you can have inline or you can have floating we're going to do floating so let's go ahead and continue and i want to select the button so maybe i want to have pinterest move it up there so we have facebook twitter pinterest let's get rid of add this and let's get rid of email and just keep these three that looks good let's go ahead and oh sorry let's continue adjusting so so the mobile buttons large i want them to be small okay so that means like when someone's on a mobile device the buttons appear at the bottom of the website you can just turn this off completely uh if you want so we come down here uh to the let's go here three colors all right so very good on mobile at the bottom or hide okay if you don't want them at all so we'll just leave it like that 3k this shows how many social shares for each item and so share count i'll probably leave it as like 10 and so don't show a number unless it's 10 or greater or you could change it to whatever you want if you wanted to be like 50 whatever so anyways once you're done go ahead and activate tool click on activate tool there we go so that is it okay so let's go ahead and oop let's go back there okay let's go to settings all right now we need to get the code there we go okay go down here and all you need to do is highlight this script copy now we want to go back to our headers and footer so we just did this for google analytics so now we want to put this in the footer of our website so go ahead and do that and click on save all right so let's go back to our website we'll reload the page and there we go so we've just successfully added social share buttons to our website and lastly just make sure that your website looks good on mobile and so for example let's come over here to websitecreatorpro.com if i go to right click i go to inspect now this is set to look like a phone okay and so you just want to go through and make sure that everything is in place it looks good nothing's weird and so with elementor you can do that as well so what you need to do is go down here right and go to responsive mode now here you can select tablet or mobile in general you know you don't worry too much about tablet but definitely like 50 of your traffic is going to be on mobile and that's it and so you want to just take a quick look now whenever you edit anything now it's going to only be affected by mobile if that makes sense okay because you now we have mobile turned on so for example if i come down here and we'll say like courses at work i'm like oh actually that's a little bit too big and i want to come over here and i want to come to style perhaps and go to typography and maybe make that size a little bit a little bit bigger whatever like that maybe i want like that okay and this will only be applied to the mobile version of your website and so it won't be applied to the desktop so if you go back and go to desktop it won't change it so it's only you're only changing things on mobile so that's why you just want to go through and just make sure everything looks good everything's in place nothing's weird nothing's out of place and that's it vlogging with the free version of elementor is really bad i'm just going to be honest with you because you know you're my audience i'm not going to just not not going to sugarcoat it so this is kind of like the thing that elementor puts behind the paywall to get you to upgrade to elementor pro okay so if you look at like website createpro.com blog you can see like a nice beautiful grid layout very nice you don't have that control with the free version of elementor that's why i said in the introduction that this tutorial is perfect if you're cool with like designing like a bunch of different pages individually say like you're a creative person you're just creating like an online portfolio or like you're a small business you just like you're happy to design like 20 30 pages individually one by one perfect now if you want to blog you are to have to pay for elementor pro because you really do need that kind of control over the design and layout of your blog as well as your individual blog posts so this is a limitation but in this section i'll give you some ideas of some like workarounds you could potentially do but in general the whole blogging experience is really poor with the elementor free version so again like i strongly emphasize that you upgrade to elementor pro if blogging is important to you but if it's not don't worry about this so anyways let's continue alright so the blog page on your website this is the one thing that they put behind the paywall so that's why i said in the very beginning of the tutorial that this tutorial is ideal if you want to use the free version of elementor and you're cool with just individually editing each page for example like the contact page home page about page and just adding elements and blocks into the page and doing whatever you want then elementor is fantastic but for blogging it's good for blogging but not the free version because they just they put this behind the paywall so you can't adjust this this is the way it looks you're stuck with this you know don't try like there's nothing you can do even if you come in here and you click on edit with elementor you're gonna get an error so here we go sorry the content was not found so we click on learn more and so some some some people i've worked with like oh no is my site brokers no no no you're just using the free version so right here are you trying to edit the blog archive page or the home page that shows the latest posts these are archive pages and they can only be intimate edited with the pros theme builder function and so that means you have to have elementor pro which is you have to pay for it and so that's why so you're kind of just again that's why i said you're stuck and then the individual blog posts look like this and it's not they're not the worst okay looks okay i mean you can get by but again it's not if you really want to blog if that's really important to you then upgrade to elementor pro but again like i said in the very beginning if you're cool with just like individually designing each page and you want to get very creative you should you have the ability now because i just showed you how to edit a header how to edit an email opt-in form edit the footer you know and then you're now you're you know you have free reign over the uh content area of your website and so anyways that is it for this tutorial all right that's it for this tutorial video on how to create a website with elementor so you know my goal with this was just to create a a very helpful quick and to the point guide and to give you some design ideas for your header footer and body because i know personally like when i was using elementor for the first time and the specific themes are said to work well with it like astra ocean wp hello i was confused i personally was confused and i'm a web designer and i was like how do i edit the header how do i edit the footer how do i like this is like in it there is a learning curve so i hope this video really helps you and gives you just ideas on how to structure and lay out your website anyways my name is david webster createpro.com if you enjoyed the video consider subscribing hit that like button and i'll see you next video bye [Music] you

Channel: David Utke

Views: 15,964

Keywords: elementor hello theme tutorial, make a website with elementor, create a website elementor, make a website hello theme, hello theme tutorial, hello theme elementor tutorial, elementor tutorial, elementor free tutorial, elementor free hello theme, website creative pro

Id: vok1-S2LaqA

Length: 121min 22sec (7282 seconds)

Published: Mon Nov 30 2020