How To Make a WordPress Website – Elementor – 2019

How To Make a WordPress Website – Elementor – 2019

May 18, 2019 39 By Bernardo Ryan



hi guys it's Greg and in this video we're gonna learn how to make your WordPress website with the free drag-and-drop elementary page builder plugin alright let's check it out so here's the website you're going to learn how to make today in this tutorial and as you can see it turned out incredibly and I just want to give you a quick tour of the website features now so that we can be sure that it's right for you there are so many cool new features here you guys we're gonna learn how to set up this video background at the very top and this could be any video you create or just a huge image and then scrolling down we're gonna learn how to create featured sections for your products like this one with the computer we're gonna insert large fullscreen quotes and even more sections to show off your business your ideas your products like this really cool grid so we have a slider in it or a gallery some people like calling it I just call it a slider I don't know and then we have a featured video and then at the bottom another video background which is really awesome because it looks like you just open your laptop in the park here and the park is just doing its park thing in the background super cool we're gonna learn how to create a custom footer because footers are always annoying us and we can't get rid of what they say I want to get rid of it the footer disappears so we're just gonna create our own amazing footers with of course social icons and menus and whatever you want to say if we click on this helpful arrow we can go back to the top and I really do believe you're gonna capture your passions with this website because we've set up more features that more of you guys can enjoy than ever before so let's check out the about page and we can see you're gonna learn how to set up a huge hero image you can put text on top of it or videos or buttons and you can easily move this wherever you want in the old days you'd have to just put things where the theme wanted them to go but now they can go anywhere that's my dad by the way he's a really cool guy and then when we scroll down you can see we get this interactive feature like the moving progress bars the counter is the list the icons we're gonna keep it simple with a little three image section and then of course we got to add Instagram because instace huge these days and then we're gonna get the quotes again our footer and so this website truly has something for everyone well check out the services page where we're just gonna set a nice relaxing vibe with huge beautiful background images you can download for free I'm gonna show you how to alternate where the text goes with the headers and this nice little divider line so you can represent the different seasons or different parts of the world and of course replace this with what you do like marketing or hotel management or fitness or restaurants whatever it is this is going to be absolutely beautiful for you and your customers this guy's my favorite by the way I'm totally gonna try to find him someday and so going up we can click on our work and our work just has more cool features stuff you might not have even thought you could create but now we can because Elementor is just that good so this page is all about reviews so that people have no doubts that our work is the best we have some quotes and then this is like an actual exchange between me and a really awesome user and then another section so we're gonna learn how to create website features that you see on other websites like for example I bet you can guess where this one was created from and then just more stuff you get the icons of a theme like Vantage and all the easy stuff we've used on WordPress before that includes a contact page you'll learn how to set up this full screen map that could show off your business location more icons and cool contact form over here which of course works if someone fills it in then it'll just go right to you and you can go ahead and respond to business inquiries super easily so when someone clicks send I'll show you how it works we're precious thanks for a second and then it sends the message and it's just going to go right to the email that we set up so there's me sent from the Elementor website and perfect there's the message and super simple and it works and you can build your customer interactions with that close that and then we're back on the site and finally your website will include a blog where you can write about all your ideas and your different thoughts either way I really nice to have this marketing tool and we're gonna learn how to set up this Facebook like buck so people can like your site you can build your fans right here they don't even have to leave your site so really cool this site also has ecommerce capability you can easily add a shopping cart here and in a future tutorial in about a month we're gonna learn how to convert it all into an online store so if you want to set up the website now and learn about WordPress and design and how to create a website and then add the store later that certainly works you can click on the logo and go back to the main page now you might be wondering why we have more wordpress tutorials on our channel then i can even try to count and we've covered so many different themes and designs and the reason is because of the themes so this demo set we made use the sydney theme and of course it turned out really professional but we're limited by where the theme wants things to go for example the button has to go here the text goes here but in elementary you can move anything you can click on a button and go ahead and move it you can easily just drag it so wherever you want things to go they'll go there let's say you want to change where this text goes just click on the column settings advanced delete this up here boom done and we just moved some text or maybe you saw a really neat part of another website that you want to use like here on our Laurel website demo we want to create these three floating featured boxes with the button on top of them well boom we just did it and because we did it in Elementor we can change everything from the size of the text the font to the width of the boxes to even the amount of shadow around the boxes it's super easy you don't need to know anything about code and you can do this on a Mac PC or whatever type of computer you have or maybe you're spending your time hanging out on some other website like this random computer store and you're like well man these features are cool I want to learn how to make that one right there we just did it again all using elementary and more importantly with your own text your own ideas your own images all with professional tools that any of us can figure out so I hope to show you that the websites you browse on a daily basis aren't that complicated and with the right tools in this tutorial you can actually create almost anything you see on the web and make it all happen on your own website that does it for our tour if you'd like to learn how to make a WordPress website with Elementor and basically make any website you can dream of where you capture your passions and share them with the world then I'd be honored to be your teacher now let's go ahead and look at the steps needed to make this website and more importantly what each of them costs all right so I'm just gonna open up our game plan here it's gonna be really easy to make a website with this game plan and anyone can do it whether you have no website experience before or maybe you took some class before on computer stuff either way we can all learn a new skill it's just like learning how to make spaghetti sauce or carve a piece of wood we can all learn it so step one that we're gonna do is to get a domain name the domain name is your address on the web and you need one in the same way that an apartment or a house needs an address for people to find you you need a domain name so that people can type something into their internet and your blogger website will show up Facebook's domain name is facebook.com met flix as told my name is netflix.com and if you can't get the domain name you want then try inserting a keyword after the words you like like Netflix movies com or Facebook is really creepy com or whatever you can think of or if you don't have your perfect domain name idea just try to register your first name last name com that's a great place to start and really good for branding and domain name costs about a $7.00 per year once we have our domain name we can go ahead and get our hosting hosting is just a computer that's online 24/7 to host all of your files like your blog posts your images your logo your image slider is your copy of WordPress all of that it's sort of like when you have an apartment or a house the hosting is just the land or that apartment or house or townhome or whatever is built on so you visit the address to get to the hosting and then you see what someone's built which is going to be WordPress so if you get the domain name but you don't have hosting someone can visit your domain name but they'll just see the blank white screen well maybe they'll see some advertisements that your domain name registrar put up so either way if you have a domain name it's really important to get hosts you can really quickly but if you don't have either of them in this tutorial we're gonna learn how to set both of them up together Hosting is the same as self hosting it's the same as getting self hosted WordPress they're all just different names for one thing so again we absolutely need hosting so that people can actually see something when they visit your website and hosting costs about $10 per month domain name and hosting are the two basic things that all of us WordPress people pay for and once you have them you can install WordPress on to the domain name and hosting we're gonna install the wordpress.org version which is the full version so that we can create whatever we want we're not limited or missing features or something like that you'll be able to post advertisements raking Google monetize everything and make it an entire business and we're pressed despite what you might have heard is free once you have these number one and number two things WordPress is the number one content management system on the planet which means just it's the best way that people decide to manage their content online and we're going to use the best drag-and-drop technology available today so I think you're gonna find it really fun and really eye-opening how easy it's been all along alright so once we've installed WordPress onto our domain name and our hosting we just need to do step four which is make a website of course that's also free because you're doing it with a do-it-yourself youtube tutorial and I'm gonna walk you through all of it I think that's really the way to do it because if you pay someone to design your website hey you're out a few thousand dollars and B you don't know how to manage it and you have to call them up any time you want to make the smallest change which is extremely frustrating trust me I've seen so many people go to and you're going to be truly grateful that you made the decision to do it yourself because you'll know the knowledge you can make this website many more websites for clients family friends business partners start your own businesses whatever you want and by the way it'll be free because you know how to do the web design the free part includes elementary elementary is the centerpiece of this tutorial they are the celebrity cameo they are the meat and potatoes here and we're going to use the free version of elementary all right we'll just crunch the numbers here quick because I know when I was in your shoes and I set out to make website I was super concerned that I was getting the best price available so the domain name and the hosting together if we got both of those today would cost you 11 plus 10 which is 21 dollars but I'm gonna show you a nice discount we can use which is pretty darn nifty and that will reduce your cost today it down to eleven dollars and 46 cents which i think is a great deal we're gonna get that discount using my coupon which is big bonus big bonus is a coupon which is gonna reduce the price of both your hosting and your domain name at the same time and it's valid at hostgator.com my web host of choice they're not the only web host you could use but they're probably the best value for something simple easy to use that just plain works to set up WordPress and the neat thing is I started using them about eight years ago and I grew my entire business with them quit my day job all that and I still power all of my blogs web sites even client websites with Hostgator Hostgator is just the kind of place that every time you visit you like a little bit more sort of like your favorite park or lake or wildlife reserve or waterfall or wherever you go boating or play tennis or whatever that's how I feel every time I visit Hostgator so if you have to leave the tutorial now and come back later or something like that if you can't finish it at least you know about this deal that you can use to save on both your hosting and your domain name and we're gonna set both of those up at hostgator.com which is another nice feature they operate alright so now that we knew our game plan and we know what it's gonna cost us which is eleven forty six plus or minus a few dollars you know if you decide to beef up your hosting plan on your domain name or something but it's about the cost of I'd say a t-shirt and how many t-shirts do we have that we don't need even if you don't have time to make the complete website I really recommend you get these three steps out of the way because then you at least have a website you've saved yourself a ton of money as opposed to going with the web designer who would just do this for you but charge you like five hundred dollars or several thousand dollars and you have a website where you can start putting up your thoughts and writing some stuff and building your brand so that'll be better than most people have ultimately I don't want you to just have a website idea and say you'll start every day and then the universe just pulls you back into normalcy and you get sucked back into the daily routine and never start your dream you gotta fight the pull of the universe to go back to your average routine and be amazing instead and this in my opinion is just one of the first steps to doing that alright so let's get started enough my little rant there although I really do believe in that stuff and we're gonna get served with our website just by opening up your browser so I use Google and Google Chrome here I find it works best but if you're using Safari or opera or Internet Explorer or Firefox it will all work just the same you'll be fine and then come up to your browser bar and just type in Hostgator that's H OS t dat o R dot-com I've been visiting the India site too because we're working with them but we want host:2 LR CLM and hit enter all right and you're gonna get taken to the new Hostgator site so really nice site here I've been coming here for years and alright so the thing with hosting is there are so many options once you pick a web host which is hard enough as is there's different kinds of web hosting like cloud hosting wordpress hosting reseller VPS dedicated servers and you could really go any of these routes because they all have WordPress capabilities and that's all we want we just want to install WordPress now WordPress has helped me work on a lot of different projects with different clients and they say oh login to my web hosting at a4 or login to my hosting at Monster page or at green web or something like that and then I've lot and those aren't real names I'm masking the names because I don't want to talk bad about companies and then when I log into the web host then they look really confusing and Hostgator I know there's like a few buttons to get to WordPress and that's pretty much it so I wonder you're like why these companies are so outdated or confusing and I see the prices on some of them and they're like hundreds of dollars a month and in our case we can get a deal for 275 a month for hosting and so I just really can't stress enough that all hosts aren't created equally that's my lesson here for you guys Hostgator on the other hand I know is great because I've been with them for eight years I can explain any of their features to you at any time and of course you get this live chat feature and they're just always updating their software and their services to be the industry standard for web hosting if you hadn't heard of them before this it's because they are pretty low key they know they're one of the biggest web hosts and they don't really need to go hard with advertising or convincing one because they know they're pretty great and pretty awesome as is so that's a little bit about why I love Hostgator now to proceed with installing your WordPress software you might think you need to click a wordpress hosting but that's actually a more advanced version which just comes with extra features you don't need cost a little bit more and in fact the cheapest way to install WordPress is just by clicking on web hosting and getting one of their basic shared plans which is definitely what I recommend right here is to cheapest most basic option that gets you the full version of WordPress so let's do it let's click web hosting all right now you'll see the three bucket screen which all of us Hostgator customers are very familiar with and this is going to ask you to choose either the business plan the baby plan or the hatchling plan personally I currently started with the hatchling plan for my domain name honest college comm it was a college of Ice blog then it upgraded to the baby plan when I wanted to start do your blogger and run all these demo sites and power all sorts of other WordPress sites and create an empire and that is the main difference hatchling plan gives you all these amazing features like one click WordPress unmetered bandwidth and all that I know some web host charge for like bandwidth which is crazy or they only give you like 10 gigabytes of storage which is also crazy Hostgator never does it it's always unmetered unlimited and then the baby plan has everything hatchling does except for you can use unlimited domain names you can make totally different WordPress websites with different domain names now that's really cool it's cool to have a sister website or a sister blog or to make a blog for your parents on Mother's Day or Father's Day or something like that or make a blog for your college and you might want to do that but keep in mind you can always upgrade just click live chat tell them hey upgrade my plan to baby and they'll upgrade it for you whenever you want so at the end of the day it's up to you these are both really good choices it's like choosing a small popcorn or a medium popcorn if you get the medium I mean you're not gonna be unhappy you're probably gonna eat that popcorn but yeah up to you in our case right now I'm just gonna go with the cheapest possible option for you guys to install WordPress so you can pay the least amount anywhere on the web you know right now here today and that's where we're going to choose hatchling all right so but it's the same process and the same process going forward as what you set up WordPress for all these plans exact same process all right so once you've made your selection just come on and click this yellow button that says by now next it's time to either register a new domain or click I already own this domain so if you already bought a domain name at GoDaddy or somewhere else like you were in a hurry and you knew someone else was gonna take it or you had a really cool idea then just enter in that domain name right here and Hostgator will set up your hosting and Link it to this domain name and you'll be able to install WordPress and it'll all work perfectly if instead you need a new domain name then you're gonna get a discount on it which is cool just click register your new domain name and you can go ahead and start a wordpress website with your new domain names so that's pretty simple that's all you need for step 1 there's one more step which is to choose the extension so in our case I always like getting the dot-com if we can it's a really good idea if you can't get the com go ahead and enter in a little more descriptive wording there and you'll probably able to grab it so that's cool and then if you want to get one of the other ones like dot online or something there's nothing wrong it's kind of cool to have that sometimes like that online that's space maybe you can register like outer space you might be wondering of course whether or not these do for an extensions will affect your ranking in google and the answer is no you can rank in google with all these it's all about what content you create and how many other websites mention you to determine how well you rank in google among a few other important things however the dot-com is most recognizable if you're out at a business party or an event and you say my website is WordPress world or something like that they're usually gonna sue mr. Kham and they'll go ahead and look up the dot-com just a little bit more recognizable and therefore brandable however I've had a lot of success with the dot-org the.net is great too and also the dot-com will sell for the most money if you want to sell your domain name someday so just keep all that in mind obviously here to help you pick the best domain name in the comments so once you're stood on that just make sure you only have one domain name registered today they're gonna ask you to get the other domain names but I don't think that's necessary you might think that someone will register like all your other org and your dotnet if your domain name but that just doesn't happen usually so keep those costs down just get one domain name for today is what I recommend then once you don't with that you're gonna come down and see that there's an ad domain name privacy protection in a similar light I like unchecking that this part just makes it so like when you register a domain name people can't see your public information like your email and your name and your address and stuff like that I don't really mind that I trust people not to misuse it and I figure there's always like yellow pages if someone really want to do that so but it's up to you that just will also decrease your costs even more which is good if we uncheck that all right with our domain name entered we're just gonna come on down and choose our hosting plan and step two so we're gonna select the plan we want all right hatchling it's definitely a great move but babies pretty good too billing cycle you can choose any amount you want really and I'm going to show you a discount coupon that gets you a discount on this one month as three month at six a month and all the other ones so it's really up to you as you can probably tell the longer-term period or in other words the more months you register you're upfront the lower your cost is will be per month so it's whatever your budget allows for if you know you're gonna use WordPress for like three here five years like I did then 36 months is a pretty good guess or even 12 months I like that sweet spot because then you can really get a feel for blogging how to make money it took me about 11 months to generate my first fifty or so dollars with blogging and if I didn't give it that time I never would have gotten the money or knowing what it's like to make a living online so lesson learned for me at least but in our case today I think I want to just choose one month so that we pay the least amount upfront I don't know I don't have a ton saved up right now and I really just want to show you guys how to make this really cool website quickly so we're gonna pay the least amount today next just pop in a user name so whatever you want to do there and then security pin just has to be four digits super easy and scroll down and now for enter billing info we just need to make our payment here we're gonna use credit card we need to enter in our billing info like you would at Amazon Netflix wherever you shop online it's super easy next is scroll down to additional services and these are also things you can add on later on like moving from hatchling the baby plan or add net domain privacy protection and so we're just gonna remove them and plus like I don't even know really what these things do like site lock or professional email which by the way I can show you how to make an email on your own without this or backup I don't know if they do I'm one of those who always like wants to know like what something does if I pay for it and so I'd rather just like save that money to go on a cool vacation and blog about it instead but up to you so then we're gonna come down to step five and step six where you can review your order details alright but before you go ahead and pay whatever this amount is down here which will vary based on like how long you get hosting for and if you get a domain name or not just navigate over to where it says coupon code and delete whatever it says in there and we're gonna write in a better coupon code which is big bonus just like that alright so I like doing the capital B and the capital B but I think it's not case-sensitive so it'll work however you write it and then click validate alright it should work okay great so it worked that gets our discount down to that eleven dollars and forty six cents it's really cool it's really fun I love seeing our costs go down like when I'm at the supermarket or at the drugstore I love seeing those numbers go down and so yeah we get our domain name here down from its original price to $5.99 really cool hatchling for one month which is down from ten ninety five to five forty seven really cool and then our grand total which is just eleven forty six alright you don't really have to look at the black and the green numbers here if you don't want any those kind of confuse me but it's just this number plus this number equals this number alright and that is my coupon we created at dear bloggers specifically for you guys so if you use it I'll get a little bit of credit from Hostgator for referring you to their services so that's just really awesome it helps me keep making these videos and keeping everything free online that's why I make like all sorts of free tutorials on how to do anything in WordPress because you know hopefully like at least one of you guys per day will use my coupon and I'll get a little bit of credit from Hostgator and that keeps me going alright so again I really appreciate it and I'm definitely here to help so we can review our already one more time get the 24/7 365 phone live chat email support free account activation free money back guarantee 45 days we get our domain blah blah hatchling plan really cool and I'm on to is 1146 which could fluctuate if you get a longer or you know different sort of hosting plan that's totally fine we're all ready to go ahead and sign up for web hosting all you have to do now is just check this box and we can just come on down and click checkout now and we'll be all set we can proceed and install your copy of WordPress and of course I'll show you how to do it so let's do it alright so your hostgator customer portal is where all the fun takes place but not in my account tab actually in the hosting tab is where the fun takes place so here you can see everything you got with Hostgator you got emails databases add-on domains this is where you add like just other domain names if you get the baby plan you can add like second website com third website comm and so on and so forth and then install WordPress on those and you've got your file manager this is like a FileZilla sort of feature but even better hostgator site builder lego-like on quick install which we're going to use for wordpress and so on and so forth so really cool more tools up here I'm happy to help you with any of it just ask but the first order of business now is just to install WordPress onto your domain name and your hosting then make sure your domain name and hosting are happily connected and then go on and make the website so in order to do that we're just gonna scroll down and we're gonna click launch quick install right here alright and when you do a quick install you can see there's other 1-click installs like Magento and Joomla and Drupal but we just want to click on WordPress now we just need to select your domain from this drop-down list so I'm like super cool I've always domain names but we just want your domain name and should be maybe a little bit easier for you to find if you just have one or two or something so select it leave the directory box blank right here don't write anything right here and just click Next and we're not gonna let a pro do it for us we're not going to fall for that but you can see how much money some people do spend just to get WordPress working it's crazy so let's click Next alright now you should enter in a blog title which you can change later on so we'll just call mine element or next for admin user I like just going first name this will be your WordPress username so it'll say like new blog post by a blank so don't make this one too silly and then you know you can change the other stuff like first name last name later on just make sure your email in right because we're press is gonna email you your login details after we click install very good good job we're almost there so now you just need to click this box right here and we can go ahead and click install and Hostgator is gonna do all the techie stuff and all the code and install WordPress for us so just like I told you it's just a one-click install that you might have heard about and how we actually get to use it so let's do it all right WordPress is installing and in the meanwhile it's gonna show us a picture of snappy right here alright and it's gonna say get a theme but we have our own theme we have a really good one picked out and so great it was complete I'll let me know if you get any errors here but you definitely want this green checkmark good job congratulations if that was your first installation of WordPress now the best thing to do is not to click login or this button or anything it's actually just to copy your installation details and put them in a word doc or a notepad because sometimes people can lose the screen and they get all worried and it's not a big deal but want to make sure you have them so I'm gonna open up our handy little game plan here and just paste those in so we always have them and we can change that password later on all right very good so now like I said we just need to do that one step to connect our domain name to our hosting it might not be connected but we want to double check that it's working so that you can see your site when you look at your domain so in order to do that you need to go back to your Hostgator billing portal and if you got your domain name along with your hosting from Hostgator you can click on domains up here and then you're gonna see your domain or your domains right here and so for example I could click on nuraghe I you click on the gear and then it will tell you your name servers which are the tools used to connect the domain and the hosting what you want to do is make sure that these are the right name servers so how do you know the right name servers well Hostgator it will email you something called your account info it's an email that'll look like this from sales at hostgator.com your email might look a little bit different but the most important thing here is gonna be first name server and second name server so these will be your name servers and they will almost definitely be different from NS 119 and NS 120 unless you got that cozy little space in the server like right next to my website which could happen with a probably different so whatever they are you want to make sure that you have them written in in your billing portal right here name server one goes up here and name server two goes here right beneath it you just click change write them in make sure to get the NS and the dot and then the other comm and then just save it alright and that's gonna say cool you did it and you're gonna have your domain name connected to your hosting so that's kind of redundant if you got your domain name from Hostgator they might already be perfect I just like to show you where this is now if you got your domain name somewhere like GoDaddy you definitely have to do this name server step and that'll just look like well I'll show you right now so I don't wanna lose anyone I know a lot of WordPress tutorials just skip this and make you figure it out but I've been down this route and it's very confusing and I wish someone showed me how to do it so if you got your domain name at GoDaddy or somewhere else you just have to find your domain name at GoDaddy so let's say we use canned cats again I don't know what I was thinking here I've always told my names but you're just gonna click DNS and then I'll say name servers you want to click change and then it'll say default you want to make it custom and then you're gonna write it again the first one with all the periods and all the spaces and stuff actually no spaces just ns blah blah blah hostgator.com and then save it perfect after which you'll have to wait a little bit of time for your domain de character hosting hopefully not too long if you're in a busy city but what might happen is you might start visiting your website and you might be like hmm I just saw my site and the next time you visit um I didn't see it this is the right window to see but if you don't see this window then don't worry it just means that the web is updating so that it knows where your site is now is usually winding all our tutorials we take a break and go get some fresh air stretch the legs out a little bit so I'm gonna do that might still be able to catch the fish taco joint down the street we'll see but either way it's a really good time to take about a half an hour break so let's do that and then let's come back and we're gonna put the forward slash wp-admin after you're calm and hopefully we're gonna pray that we see your WordPress logon screen and we can go ahead and make a WordPress website all right we're back and ready to make a WordPress website for you by the way the taco stand was not open because it's well past midnight now but if you know of one and I am all ears so we have our wordpress details emailed to you it's gonna say hostgator marketplace you install complete and then it's just gonna have what you need to log in and this is exactly the same as what we wrote down on our notes so we're just gonna copy the password I've been a username paste that in click remember me to save his time in the future and I also like just bookmarking this page for future reference if you ever don't know how to log in it's always just your website com my website in this case is stored a WordPress website com very boring I know followed by forward slash WP dash admin when you click enter it that just takes you to the login screen so you never want to actually type in like all this stuff because that's way too much just type in /w P dash admin and you're good to go alright let's login all right very cool welcome to WordPress so they just updated some stuff here we're gonna dismiss the notifications and I basically just like closing anything that pops up like immediately so dismiss that very cool if you have a screen right here that says do you need help are you making a personal website or a business website just click the link for I don't need help because we're gonna do it ourselves and I truly believe that's the best way to do it you'll learn a lot more and value your website a lot more when you learn it alright next thing we want to do is it says your say is displaying a coming soon page we're gonna click here to remove that because the coming soon page totally doesn't match our site or our branding it's like green fonts and all sorts of weird links so get rid of that by saying click here and now we're gonna change our password so to change your password just click on users and we're gonna find you right here click on your name and then scroll down and click generate password and then just type in you know a new password right there and confirm it and update it good job alright this page also has your profile image you can upload a cool picture of yourself when you look young or I guess and then you can also do the color of your dashboard if you want I like default personally alright very cool that's your user profile next I'm just going to scroll up and click dashboard so this is where it'll show you and it'll take you right when you log into WordPress you always go to your dashboard that's just what they call the backend of your website where you make all the changes if you want to see how your website or blog looks to the entire world just click in the upper left or it says your site name and it says this home icon and it's gonna take you to the front-end so we have the WordPress 2017 theme here and we've seen it before and we're gonna get rid of it but just that's how it works so if you're editing you're on the dashboard side so you can click on the upper left or you click dashboard and they go to the same place and then if you're viewing all your changes you click there it just goes from one place to the other you can go back and forth and back and forth or you can open your site in a new window and keep one of them on the front and one of them on the back which I like doing alright so before we start building I want to just do a couple more housekeeping things to make sure we all have the exact same WordPress website and we're all on the same page literally alright so what we want to do is go to plugins so click plugins plugins are things that WordPress comes with there are things that the good developers out there build for WordPress the WordPress team makes them and they extend the functionality of WordPress so by default WordPress doesn't know that you want like cool social media icons they don't know you want to rank in Google they don't know that you want to add image galleries and sliders and stuff but there is a plug-in for that there's a plug-in for everything and a lot of plugins are also kind of pointless we don't want them and they take up space in your site and make it slow so we're gonna be really selective our site's gonna come with a lot of good plugins to start with and you could use them I think it's really nice of Hostgator for setting us up with these plugins because it wouldn't know about them otherwise and they do really good things like google analytics and Mojo and this is like a themed marketplace and forms but we sort of have our own way of doing all these things which we've tried and tested in our YouTube and blog community over here and so yeah we're just gonna do it that way because it's obviously better all right so we're just going to deactivate these plugins and then we're gonna proceed from there first off leave the Akismet anti-spam there it's just gonna help stop spam comments and other spam on your blog really good next up we're gonna deactivate monster insights cool we're gonna deactivate jetpack jetpack is good for connecting to wordpress.com if you have that you might consider it we're gonna deactivate mojo we're gonna deactivate optinmonster again these are all really great plugins they do amazing things we just have our own way of doing things all right very good with those deactivated we're gonna select all on select a kismet then go to bulk actions delete and apply and okay and it should SAP them one by one great job let's click plugins to refresh the list alright so now let's get the ones that we actually want so click add new and we're gonna search plug-in and the first one can you guess it that data is of course Elementor alright with oh right there and the e right there and it's right here with this cool e icon so we're gonna click install now and activate there's all sorts of cool features you can add on to Elementor if you choose to in the future but it also comes with a ton of features out of the box can't wait to use it it's like a Christmas present times – all right now we're gonna go to add new again we're gonna search for contact form 7 alright which we'll use towards the end of the video this one right here with the mountain install now and activate this is really good for your contact page so that you don't have to put your email up if you don't want people can just write in the form and get hold of you okay so our plugins look good for now and now we're going to install your theme so to install a new theme you want to hover on appearance and click themes this is where all the themes are that your site already has and this one's active 2017 is active as it says right here so your site shows this one you can look at another one and you can also delete it in the lower right but we'll keep these they remember the WordPress team they're really cool and we're gonna click add new so even though our WordPress site has the 2017 theme it's really kind of great and all and just looks pretty because these characters is I don't know they do it for me I have like ten of them you know as we may have mentioned earlier you just can't do that much with this theme it's super lightweight and basic and it's basically for blogging and the downside is a lot of other people use it and we want total customizability we want super unique and we want just our own look and why wouldn't we so to get our own look we're gonna go back to add themes and we're gonna do a search for a theme called ocean WP this theme is a godsend I am so amazed by it I can't believe it's free and I would bet that this might be the only theme you ever have to install and we're gonna get so good at it that you can build almost any website look you see online with ocean WP it's yeah it's just that good alright so let's click install to try to have it and of course use it and then click activate all right so you successfully change your theme if you refresh your site it should show ocean all right so we're on the right track and we got to fill it in with some pool content now but first go back to manage themes and it's gonna say if your theme recommends any plugins the ocean does let's go ahead and just get those out of the way click begin installing plugins just select them and click install apply alright so this will make your life easier later on alright now if we go to plugins we can see you should have 5 plugins active at the moment excuse me contact form 7 Elementary ocean demo import and ocean extra if your screen looks like mine then you're all set to proceed so the next thing I want you to do is create the page structure for your site because right now what we're looking at doesn't really help us when we build it we want to have pages live and also in a menu so that we can click around and get to the right page and just edit it right now we're showing is sort of the default wordpress blog layout this is just a sample post that WordPress made for you with the sample comment sample sidebar sample you know archive so we didn't write anything in mark to 18 no no it's March it's June right now in any case this looks like a default blog we want to get rid of it super quick so let's do it and we'll do it the right way the way a web designer would actually used to be a web designer by the way sitting down in coffee shops and pitching websites to people and then telling them all sorts of stuff I built for them that I had no clue how to build yet so of course I eventually figured it out and to get started with those pages we're just gonna come back to our dashboard and click pages and we're gonna trash these demo pages I think my cat is bashing the lamp with his paws to try to catch bugs interesting strategy and now to add a new page to your website just click add new all right and the first page I want you to add is super redundant we're just gonna add a front page and this will become your home page alright very cool now I'm going to show you some basic ocean WP settings that we're gonna apply to almost every page we make it'll just make our life easier and basically just help you get rid of anything you don't want on your site so those settings are right here in ocean WP and the first thing we're gonna do is make the content layout full width alright so that'll allow your content to expand to the far left and far right of the screen and get rid of the whitespace over here then we're gonna make your margins disabled get rid of more unnecessary space that can just confuse this when we're trying to make things full width next we're gonna go to header and we're going to disable your top bar which is just this bar right here just another WordPress site we're gonna go down and we're going to enable the header so we're gonna use the header from Elementor and that's we're gonna put your logo and your nav menu it's really helpful to do it this way that way all of our pages have a header above them and we can make it transparent or sticky or do it every one with it the alternative is custom Elementor headers that you make as a template and then you can two different places and we're gonna do that with our footer so you'll basically learn both methods and we'll see how that works header style just leave it as default for now then we'll go to title and we're gonna get rid of the page title cool we're keeping it really clean and simple here guys and now we're just gonna publish the first page all right so I'm gonna repeat this process now for all the pages on our site and you can follow along with me although I might hurry it up a little bit just to get us to the building content part so we click add new at the top and we're going to do our about page pretty cool everyone needs one of those now let's get those ocean WP settings out of the way so content layout full width disable margins we'll go to header disable the top bar enable the header and go to title and get rid of that page title and we can publish it all right now add new we're gonna do this for our work page it's once again content layout full width margins disabled header disabled top bar enable header and title disable the page title and publish so who's going to give us really clean layouts just simple pages where we can put in all of our elementary content and still use some of the best features from ocean WP at the same time alright so now that we've done a few pages I'll race ahead and finish the rest of them for us and those are going to be services contact us and we'll finish together with the blog page so our last page is blog and for this one it's even more simple all you need to do is just call it blog or whatever your blog is going to be named if you have your own name for it and then just publish it so we're gonna do something special now with the front page and the blog page and that would be to go to settings reading and in WordPress they give you the option to set up what your homepage shows and what your post page shows and if you do this option you have more control of your site if you leave it as your latest posts then on the home page you just see a blog post and this blog stuff over here so we want to get rid of that blog look at least when someone first visits your site and that's why in reading settings we're gonna click your homepage displays not your latest posts but a static page and that static page is just going to be our front page and that way we can drag and drop content into the homepage and make it look however you want when someone first lands on your site and then we're also going to make the post page the blog so that moves all the posts like this default post over to your blog page which will just be a totally different page and now save those changes all right so once you do all that you can refresh the site and you should see some pretty significant changes so now we have a totally blank canvas to make a website on great the last housekeeping thing I want you to do is just go to your settings and click permalinks and then just choose post name all right choosing post name is the best option here because right now by default if you look at the links to your pages they might have some like random Cody stuff in them like if you look at our work and you click view page at the top to look at it right now we have an index tab PHP in our link that sort of just standard HTML and website stuff which some sites on the web still use today but we're going to get rid of this section because I believe like a lot of other bloggers do that your links should be as simple as possible and should only include keywords like our work that's because Google likes simple they'll be able to read your links quicker and then you can rank better in Google hopefully as a result so go to permalinks choose post name and save it and now if you refresh that page you'll get rid of the index.php great so now we can click on your site title to get back to the home page and it's finally time to start creating our website so we'll try to follow as predictable of a workflow as possible and we're just going to start creating your home page top to bottom and then we'll create the next page and then the next page in the next page from top to bottom I'll make sure they're all linked together and they all look really good with a similar overarching style and yet that each one of them does their own unique thing each one of the pages that is alright so the first step is just to click Edit Page at the top and now we can click Edit with Elementor and what a lot of wordpress people's don't realize is that there's really cool templates here which you can install to make your website more powerful now we're not going to use a template even though we have in the past because this time we wanna learn how to build everything from scratch but if you do need to just hop away or if your boss is gonna look at the website you made tomorrow and you need something good maybe you even work at a law firm or something and you know this would be perfect then you just grab a template it's got some content you can just write in your own headers your own text put in your own pictures but it will all look like a real website right away and yeah if you work for a law firm it's even better and so you can make your website look like a real website in a lot of different categories there are a ton in the templates section and again to use them you just click on one like restaurant and then you click insert and then whatever page on your website you insert this into will become the entire template and it'll look really cool so even though we want to create every section of your website from scratch I've looked through all these templates and there's two exactly two sections that I really love and if you look through them maybe you can find more and I above all just want your websites to look incredible and so I want to show you how to use these two specific sections and this is one of them with the checkered pattern that's really cool I've never seen anything like this before in a WordPress website so I want to show you how to just grab this specific section if you think it's going to be good for your website which I definitely do think is good because they can make your website look really cool so this is one of them that we're looking at here and what I want you to do is just click insert here on this restaurant template all right and so it's gonna become our page Donald and Preston are sweets and of course you can choose any of these to keep if you want this is just like one of my favorite templates by far specifically this checkered box pattern area because it has the slider and then it has a video down here really cool stuff got the parallax section so what I'm gonna do for this website here we're building and again it's up to you if you want to keep like visit us or keep the whole thing you could just update it I'm actually gonna delete from top to bottom delete delete we're going to keep the checkered section so we keep this featured quote too I can practically hear you guys saying keep this section to you we'll just replace it with our own quote alright fine I'll keep this section and so then you have that featured quote and we're gonna get rid of this and get rid of that perfect so now let's update the page and now this stuff would be on our home page when people found it so you could replace this with your own branding or your own messages about your site your own video your own image slider and now we're just gonna click Add template one more time to get that second little template section that I really love for you guys and to get to this section you just have to scroll all the way to the bottom and it's called the hero UI kit right here so click on that and like I said you can keep any of these sections this is sort of like the one of the more stealth layouts that Elementor built for us so you could keep that iPhone you keep the image of the desert and when you insert this you get all the images and you get the laptop image and so on and so forth so it's kind of like we're importing demo content that you don't have to use but you can use at any time on your website so let's click insert and it's just nice because that way our media library has some cool images and you don't have to have that blank site feeling which I know a lot of you guys don't like and I don't like either all right so with this section I want us to keep the the laptop in the park right here I think this is super genius it looks like someone opened up their laptop and they're building an elementary like in Central Park and the park is just behind their laptop so I really like that it's really unique and I'm gonna keep that I'm gonna delete the sidewalk delete this and you can obviously recreate any of this stuff it's all done with Elementor in the free version delete that and then we're gonna create all of our own stuff all right we're gonna delete this alright and even when we delete it we get this laptop image in WordPress so we can use it again which we're gonna all right we're and delete this little footer here from the foodies perfect and let's update good job so we'll blend each of these elements into our finished product website but at least we have them to start with now I want to show you how to make that large image if it goes at the top of the website and it's actually a video background behind the image it contains our welcome message our subheading a button and all that and a really good place to start because we need a video background is actually just going where elementary got their video backgrounds so to find this video link we want to start by clicking on the settings for this entire element which are up here it looks like a little file cabinet up top click on that and then you click on style and that's where the video link is so we can double click on that and then copy it and then we're gonna see what other related videos are good background videos on YouTube because we know if Elementor is getting them somewhere it must be a good place all right so we're just gonna scroll down and I'm gonna look at this one which is cool and if you needed a typer there you go but we can also click lock them away sorry about all my other related videos by the way alright and to get to the point we can click on the cover beautiful free videos for your home page and you can see all their really cool videos alright someone to check out cheer up alright so that's really nice if your audience likes concert it's really cool and I'm gonna check out beach camera alright so if you're a photographer this could be a good place to start alright pretty cool okay so once you select a background video to use on your website you want to do two things we want to first just copy the background link and to get it working on our set we can go back to our front page scroll all the way to the top and just click on the plus up here which will open up a brand new section we can click add new section and we can give ourselves the one column layout and you can see this is the new section up here just sitting there at the top so now we've added a new section and we can drag some content into it like text a heading an image all that a button for example and then we can put the background on the entire section so that everything we put inside of it sits inside that video background alright so let's do it you can click on this little Rubik's Cube in the upper left corner to get to the elements that we can bring in and then we can just start bringing them in so I want to bring in a heading click on the Rubik's cube and then we're gonna bring in the text editor and it takes a little bit of getting used to because we actually want to hold and – okay excuse me so with it we want to hold the element right here and click and drag and get that blue line so that's where it's gonna go like not above the heading but below the heading takes a little getting used to alright but you know if I can do it so can you they were gonna grab a button bring it in and so pretty soon you'll get used to seeing that little blue section and just dropping it in great so now to insert that video background you click on the file cabinet for this section the hole settings of this section and then click on style and that's where the background goes and in background will get the option for a background type we get classic gradient and back video so of course we want that one now all you have to do is just paste in that video link right here and it should show up in the background the second thing we'll do with that video background is get a still shot to put us our background fallback which will work on mobile devices or anything that doesn't load quickly even though mobile devices do a lot quickly just anywhere where the video won't play they'll see a still image from the video and we're going to do that in a moment but for now let's give ourselves some space so we can see the whole video and we can work around with this stuff we put in this section so we'll come back to layout make sure you're still on the settings sections up here like that if you lose it go to layout and then just click stretch section very good let's leave this box for now leave the columns gap default but where it says height we can make it fit to screen and that's sort of the magical setting now we have a full screen video almost great and if you see some extra white space above the image you can try it like I just did going from columns gap to no gap but I don't think that did anything so let's put some simple styling on that heading and that text editor and that button that are inside this video we can click on the heading and then we can just change what says here and I'm just gonna write it capture your passions alright and then we can add some simple style like Center it we can also click style and what I like doing most is going to typography and this section you can make it bigger super easy to make it bigger you don't need to know any sort of code or anything like that just drag it so 80 I think looks good and now we're gonna go with a font of your choosing there are tons of them you can obviously try them out you know that ones like kind of crazy and this one's kind of straightforward you're gonna really have fun with the font don't go too crazy and I'll give you a recommendation now I really like the one called Roboto because your about has been really popular in the past few years on the web maybe longer and now we can choose it's lion head if we want you can make more space around the image but shouldn't need any more than about 1.2 as long as it's on one line on two lines then you know you might have to put it off that a little more next we can make that text color a nice white and now let's change that text editor click on the text below it now we're going to write out some new text so it can just delete it and all I'm gonna say is today and share them with the world all right so the old WordPress way of changing up these text editors like in a blog post is to click on the kitchen sink right now toggle toolbar and you can highlight it and change the color or center it and stuff like that but I don't want you to do any of that just leave the text blank because when you do those things it creates a little pieces of code around the text right here we don't want them because Elementary is gonna actually do it for us and it all works a little bit better we just have to click style and now you can Center it there and of course change the text color to white and then we can of course change the typography to bring that up so that it goes across the size of the header above it so something like 40 should work really good maybe 40 300 strong 48 perfect and I'm actually gonna click on the header above it and style and we're gonna make that one even bigger because why not we can all right so let's bring that all up to a hundred not a thousand all right and then that looks good for the text editor now let's just change the heading font to also Roboto all right keep it consistent now we're gonna click on the button beneath it and we're gonna Center that button we can make that button small or medium or large so a little bit bigger you see a little bit more attention grabbing and we're gonna click icon we're gonna give this one a little arrow that arrow is gonna go downwards so when people click it it's gonna take them down the site to another important section of your choosing and that will downwards arrow it kind of indicates that we can also make that icon go after the text looks a little better and you can just space it out so it's not quite so close to the lettering all right very cool so we're gonna get rid of click here click here just doesn't really jibe with people that much anymore I think they know they're gonna click something but something a little more you know descriptive of what they're gonna do like get started says a lot more and that should work with any niche you choose now we'll click style and change up that button style what I want to show you how to do is to make that button blue but also to make that button transparent when you hover over it so that background becomes the woman or the ocean so in order to do that make sure you're on normal not hover make sure on normal and click on background color and you can change the overall color to blue very good and you can click on the color itself to move away from this section open it close it open it close it now we're gonna give it a border which is solid we're gonna give the border that same blue color which might seem redundant but it's necessary we can change the border radius to make that button a little bit more round supercool 25 looks good and we need to give our border a width like two so it's actually a border alright now we want to click on hover it and we're gonna change the button settings when someone is hovering over it so I'm gonna go to text color and make that text blue on hover we can see it becomes blue it kind of goes away which is not but we're gonna make it all come together and now we're gonna choose background color and take this right slider here and drag it all the way down which makes it transparent and now we click away and you're gonna see that we have a nice transparent button now I realized I was a little foolish for making that text blue because it doesn't look quite as clear as white so we can just change that text color on hover back to white very nice and we could even change that border to a solid white all right which would possibly look even cooler make it a little bigger and make that border color white all right so I'll let you guys run with that we're just gonna update it now pretty cool if you wanted to look at your changes before you update them you can click on the preview button in the lower left down here which is this eyeball and it'll open your site in a new tab and then if you want to actually just get to the home page as it is now live you can just click on your site title or your logo or whatever is up here alright pretty cool so to complete this upper above-the-fold as they call it section of your website I want us to get a logo and a navigation menu and then we're gonna actually put those things inside the video background as well so that the video background has everything inside of it so it's going to be called a transparent header and what you need to do to create it is just go back to the elementary redditor we can get to our WordPress dashboard by clicking on the stack of pancakes in the upper left and then click and exit to dashboard now let's come to ocean WP settings and click header and make that header style and set a default make it transparent and update and let's check out the site very cool and now our site title sits inside the video background and the video background actually covers the entire screen all the way down to the bottom before it was kind of pushed down by the header so next to create that header of ours we can just go back to our page editor and we're actually gonna hop over to appearance customize if you hover on appearance you'll get this little drop-down and click customize this is where a lot of the old wordpress edits used to take place still do and now we're just gonna click on menus and we're gonna click create a new menu and give it a name so we're gonna call this main navigation it's gonna ask us where we want this menu so we're gonna say main and click Next main menu goes in the main and now we just need to add some items so click add items it's gonna give us that little bounce to tell us we gotta do that and we're just going to select pages that we've already made its we're gonna select home blog contact services and artwork all right give it a second and those will come in on the upper right we'll just change the positioning of them because we want the blog to be at the end and contact us to be down there too and we forgot our about page there it is all right really cool we're going to bring that up to the number two slot and so right now home and front page are the same thing so whichever one you want to use is fine to change what they say the text on them you can just click to open it up and you can change the navigation label right here you can also change the URL to where this goes if you want to go to like Google or Facebook or something like that although we're gonna add social media icons later but if you want to just change this from contact to contact you know get rid of the US you could do that really easily and if you want to make a drop-down all you do is just drag one of these items inwards and it will fall under the other one which it is underneath so about now would have like a drop-down with a drop-down in it really easy alright let's get rid of those dropdowns and we're just gonna publish our menu now I'm going to get you a logo or rather a couple logos that will go on a light background like this or a dark background like we're gonna set up later to get our logos I like going to logo maker com that's logo maker without the e.com and it's really easy to get started with it logo all you need to do is search graphics in the upper left and you could search something cool on tree those are probably never going our style or you could search something a little more abstract like triangle and you're gonna get all these really cool in triangles or you could search something which I usually end up going with which is a compass I don't know why I just like the compass it sort of says did our website give someone direction it's worked for us in the past I don't know and then you're just gonna want to find a really simple logo it's gonna be tempting to pick a complex one with a lot of features on it but for something actually look good on a background like this it's got to be simple now we're just gonna pick this one to pick your logo and we're just gonna pick this one right here to pick your logo just click it it'll fill on the screen and you might say that's not a compass to which I would respond are you will accomplish make your little rabbit okay so compass color we want the exact color to go on our logo whatever is if it's a compass or a palm tree or whatever it is so to find an exact color you can go back to your website so number of ways to do it but if we know we want this blue right here we can just click Edit with elementary click on the button to open up its settings and then we're gonna click on style we know it's the blue already but if you click on the background blue it'll also give us the six digit hex we want to highlight this copy including that pound sign and come back to logo maker then just put that hex in right here you just highlighted it and paste it and we'll get the blue now you can also click on it to make it a little bigger you just drag in the corners if you want to change the proportions of it hold shift and then click and drag and you can do anything like that if you don't like how it looks hit command or control Z to undo you can also add some text to your logo right here there's just a little logo tutorial by the way you don't know as this was how to make a logo but it's also how to make a website with a logo so if you want to write in some text that's super easy just go ahead and add your text and you can also make that text the same color just keep it selected and make sure that you paste in that hex again right there and now you have a blue logo and a blue compass to describe it or something like that once your logo is ready click on the crop button in the lower right that'll just crop it down but make sure to click enter so it actually crops now we can click Save logo in the upper right corner and we're gonna use the option on the right alright we're gonna do it for free but you have to make sure to give credit to the logo makers themselves so to do that click paste this code first this link right here now go back to WordPress and just come back to your dashboard by clicking on the pancakes it's a dashboard I know that's a little bit of work but we always got to make sure we're doing the right things with giving credit and go to pages add new and I'm just gonna help you set up your credits page all right so you can just call it credits all right then we can just paste those credits in the text tab here because it's gonna be a little bit of code with a link great so now it has a link you can go to visual and this is what the credits will look like then we're just gonna click publish and so yeah make sure to add this page to your website alright now let's get that logo posted back in logo maker we can click download and agree to give credit and it's gonna give us the download file for the logo it's we're just gonna call this star because it's really more of a star than a compass blue logo very cool and save it now before we leave this logo maker window I want to give us a light version of this logo so close this window click on the logo again and we're gonna drag that blue color into something more like a light gray a very subtle light gray that'll look good on a dark background alright I think it's gonna be somewhere in this corner is what we want perfect eebee f—one alright great now just save this one and we again copy the credits again just to be super complete alright and then paste them in and update the page and we're just gonna download I'm gonna close one star gray logo and save it so now you should have two more logos than you had when you started this tutorial and let's go and put one of them on our website let's go back to the editing window and we're going to be in customize here go back to the arrow and now we're just gonna click on header alright now we want to click on logo and in the logo selected no logo selected area click to select logo select files and this will start searching your computer and we're gonna click on wherever the logo went to in our case its documents and I'm gonna click on one and then the other one I'm just holding command here and then I'm gonna click open that's all you need to do to get both of them on your site alright and now we can try out the blue one because it's selected right here and we'll just click select we're gonna skip cropping because that would make the logo look different or smaller give it a second and there we have our new logo but it looks huge we definitely don't want to cover up capture and all that so go down here and drag that max width to something a little bit more appropriate all right so I like my logo small not too small but definitely not too big either I'd rather it's smaller than bigger because it can get distracting if it's too big sometimes you see people's blogs and like the upper one-third of their screen is a logo all right that says works for me you can also change the max height if you want but I'd rather just leave that one alone we won't change that so if you change one of them by accident and you want to make it go back to how it was just bring it back all the way to the left and it should reset all right now let's just publish super cool and if you want to get rid of this white line which we do we can go back and let's click on general and we're gonna uncheck header border bottom and publish now last but not least in our header we might want to change that color up here to a blue this is sort of our action color when people see blue it means they can click it they can click on the logo they can click on the buttons very good color for clicking so to change the color of the menu links click out a customize it's gonna bring us back to the ocean WP settings we can click on menu and then we can click on when we scroll down click on link color and we need to get that blue again from the button so click the button style if you forgot which you probably if you like me then you did then you click on this blue and copy and back in the link color just go ahead and paste that in and when you click away the color will populate and just update it so now I've changed the button link color for just this specific page all right so it's just going to be the settings for this front page and it looks pretty awesome alright so while I still have you before you start going crazy with all that Elementary can do I want to show you how you can replicate elements on other websites that you see on the web using obviously you see them on the web there websites using Elementor and using the power of so let's go to the Apple website and before they change the entire website I want to show you how to build this really cool section right here with the MacBook and then you have the nice font and the heading and then the button and the link so I hope to show you that if Apple can create on their website you can create it on yours and of course we could pick another section like if we had a couple kids to take a photograph of we could do this section or you know if we're in a business meeting I'm not sure if we create this section this one's pretty cool I'm gonna have to look into that for you guys that's very advanced but hey who knows for now we're going to start by creating this section on the Apple website on our website all right so let's go back to our elementary editors and so when we made the header transparent it just decides not to show but it's still there and we're gonna scroll down and we're gonna add a new section right beneath our nice little photographer here so to do that just hover on any section and click plus and a new section will come in right above it now let's look add a new section and for our structure this time we just want that two columns very cool so now let's click on the Rubik's Cube and it looks like Apple has a heading and some text and a link and a button so we're gonna get some headings just one and back to Rubik's Cube and some text and a button alright and that link can just go in the text that's really easy now for the right is where the fun part comes in we need that cool image that's like half of a computer and we need to be able to decide what goes on the computer so let's update this section and let's actually just open up WordPress in a new window like this go to the dashboard and let's see maybe we have a cool apt up image in our media so click on media you might be happily surprised to know that we do we got this cool half laptop image from the hero UI builder that Elementor made for us so we're gonna download this to your computer and then use a really beginner friendly photo editor that I used for almost all of my website photos and anything from YouTube thumbnails or advertisements or blog images that just needs to be touched up or add a little text on top of them something like that and that's PicMonkey all right so first we need to download the image copy that image link and then open it in a new tab and then just paste it in and we're gonna hit enter and I'll go to just the image itself now we're going to right-click on it and save image as to download it to a computer so we can call this one like half laptop antov all right I already had one so looks like we're gonna need the second one and save it now I'm just gonna open up PicMonkey and get to work all right so I'll give you a link to PicMonkey in the description beneath the video I definitely recommend you sign up it costs a very small amount but for that small amount you can basically become your own graphic designer you don't have to pay anyone on Fiverr or go and request some services you can design your own logos graphics collages whatever you want it's more than awesome and if you really don't wanna get PicMonkey you can also do this for free it using pixlr.com that's p IX LR dot-com but this is way more fun alright so once you're in your PicMonkey canvas right here just you just want to click open new at the top and grab from your computer and then we're gonna grab half laptop – alright cool so now we're in the editing window for half laptop – and I just want to put an image on top of it that looks like what Apple is doing here with an image of a laptop I don't have a laptop handy so I'm gonna grab an image of my desktop so I'm actually just gonna pull everything away and I'm gonna take a selective screenshot by hitting command shift 4 and I'm just gonna drag down am sorry you can't see well maybe you can see my icons alright so if you can't sorry but now we're just gonna get what looks like a consistent width on both sides doesn't have to be perfect and we're just gonna let go and take the screenshot now we're gonna go back and we're gonna come to PicMonkey and we're just gonna click on the butterfly now which is overlays things that go on top of your image anything there are symbols to arrows to Spiro graphs whatever you want now we're gonna add our own so click add your own click my computer now we're just gonna find the screenshot we took what should be on my desktop there we go double-click it or you can click open and now here's the screenshot so we just need to position it a little bit better just gonna make it a little bit bigger so that it covers the entire background area all right and then we can click away to see how it looks it looks good I just want the gray space beside and above to be the same push it in a little more and we did it beautiful now we just need to save this image and put it on our website alright so in order to do that click export make sure it's a PNG here so it's the highest quality and then just give it a title like a flap top too with background and export to computer and save now come back to WordPress in our media library and we can just close this half laptop and we can actually go to our elementary window here and we're gonna put it on the right-hand column so just click on the Rubik's Cube now we're gonna drag in our first image so it's just a simple image right here just click and drag throw it in and then click on top of it on the left to choose our image select files grab our half laptop 2 with BG very good and click insert media to make it come to life alright cool so now we just need to do some basic styling and we're almost there so I'm going to go ahead and change our heading right here and we're not gonna make it say exactly what Apple says but we're gonna call it like Mac OS dolphin cool that could be a thing and then we're going to come down and change the text to you know something descriptive about it we're not gonna use Apple's exact text but we're gonna say the dolphin is the future it's also underwater and is an Arctic dolphin okay we can also Center in our text click on style just Center it we can also click on the heading and center it if it doesn't senator to click on it a couple more times and we can click on the button and center the button and to make this section even more precise we're going to add another header above the header click on the Rubik's cube and one more heading and we're just gonna write another heading to go beneath the heading which is simply delightful alright now click on it and to drag a heading or move it just click on the pencil and drag it down and center it and now let's click style and we're gonna make this one a little bit bigger click typography make it bigger very cool and now we click on the text and make that text bigger so not too much bigger but style typography alright a little bit bigger and for our button we can just click on it and we can change the text to coming to stores near you all right very cool now let's just update and see what made ok so if we check out our website now you can see that we're getting there with our Apple section but we still need to add some other things we need to add the gradient and we need to add some padding around it so that we can achieve this exact look right here all right so to add that gradient you can just go to Elementor and we can hover on the entire section and click on the file cabinet for the settings now click style and in the background area we're gonna choose gradient so what we have here is a first color and a second color that belonged to the gradient the first color is right here and we just need to click like a blue maybe a darker blue maybe an even darker blue and we can just pull the wheel so it looks kind of cool but of course you want to go for that exact look just to prove that we can do it and so yeah we're gonna actually make it a little darker so we have to eyeball it a little bit but if you want to get really specific you could take a screenshot of that Apple gradient so just a command shift 4 on my Mac or you could do print screen on a PC and grab like a section including the whole gradient and then you can go to PicMonkey and upload it into PicMonkey and you can use one of their color selectors to find the exact colors in our case I'm happy with a dark blue for the color one and then for a color two just a black now to get more spacing around this section let's just go from style to advanced and I'm just gonna throw a 20 padding on the entire thing so we can see that it might not be quite enough and we can raise it to 50 let's say and that will just give space in between the content and the border of the section so it'll be like right in here and right in here right in here and right in here but we have a problem because our half laptop doesn't want to be floating in the middle of this element we actually want to be up against the side of the window like it is on Apple so what we can do is unlink the padding and that way we can remove the padding on the right and we can remove the padding on the left so it's just top and bottom spacing next we need to go back to layout and where it says content with boxed we want to make that full width so little stretch it even further and for columns gap just go from default to no gap and now we're touching the border we can click on the settings for the left-hand column here by clicking on this file cabinet that's darker shade on the left and then we can click advanced and we're going to Center this left-hand content using more padding so let's give this one some more padding how about 40 across the board now it's looking a little bit more like Apple we might want to bring that up to maybe like a 60 now we can just click the button and we're gonna make it so it's a white transparent button just click on style we're gonna make its background color nothing by remember again dragging this slider all the way to the right all right click away from it we're gonna give it a border type solid that border color will be white and for the border to show up it just needs a width perfect now we just need to add a link beneath our text so we can click on the text area and then you click enter right beneath the last word and then we'll just right see the preview with an open alligator bracket to set up a link right here you can just highlight the anchor text you want which is the text that the link goes around click on the insert/edit link button and then you can go ahead and just type in some very relevant linkage which is just www m to make this open in a new tab click on the gear and now let's open link in a new tab check that box and update now we just want to make everything inside the text editor white so click on style click on text color and let's make it wait and if the link color doesn't change you just need to go back to the content and highlight it and we're just going to manually tell that link that the color is white we're gonna give ourselves a little more space above and below the laptop so go to the Edit section hit that file cabinet advanced and then bringing our padding up to let's say 80 and 80 and update it and now when we go to our site and refresh they kind of look cool with the white background but now we have something much closer to what it looked like on the Apple website so let's compare it we have what we made and we have what Apple made what we made what Apple made pretty close I think they have the updated version in the MacBook Pro but we don't exactly want to spend like two thousand dollars so the last step would just be to add some spacing between this section and the one beneath and above it you can see Apple has that really subtle background for each of their sections which sort of lets you know you're like oh I'm on this section and then oh another section so to do that just go back to elementary click on the file cabinet for the whole setting sections go to advanced and we're going to give it some margin above and beneath of what's forty pixels and there you have it perfect now I've created a section that looks I would say at least ninety percent like it does on the Apple website if they change it pretty soon you know Apple loves updating their website then at least we captured it on video and now you know some of the web design skills that a near trillion-dollar company is using on their website let's make sure to update and we could of course go crazy designing the home page but I want to show you how to create those additional pages on our site you can of course edit the content in here but I want to show you how to create even more sections and then I'm pretty sure we'll figure out how to bring those back to the home page if we want to do that later so let's go up to the top and we're just gonna click on one of our additional pages like about alright so as promised we're going to work on our pages in a logical workflow and about has nothing on it so let's go ahead and add some about content and learn some new elementary skills so let's start by showing you how to set up a hero image with some text in it that's offset with a white background so it kind of looks like someone's either saying something or thinking it or it's just like a label for that image so to begin let's click Edit Page and now we're going to edit with elementary alright and we're going to click add new section we're gonna give it just one column and this is just going to be a text editor alright very cool I'm gonna paste in some text I already wrote here about my beliefs on blogging and family and how they go together now we need a background image for our text so let's click on the settings for the entire column and then style for a background type we want classic so we get the image and click the plus sign and then click select files and I'm going to upload an image that my dad and I took at the Taj Mahal alright I'll grab this image called Gardner on email marketing double-click it to open and then once it uploads we're gonna insert media there we go alright so just like the video background we're gonna go to layout and we're gonna stretch that image and the whole section now because it's an image we also need to go to style and we need to tell it that the size of it shouldn't just be the default size it needs to be the cover which actually will cover the tie your space and it'll make your image show like everything that's inside the image we can also go to repeat no repeat so the image doesn't show up more than once and in layout of course we can go to height which is fit to screen perfect now I'm going to show you arguably the best way to move a piece of text on top of an image within WordPress because you can move it in any direction if you know how to use this technique we want to click on the column settings right here and then we want to go to advanced and now we're gonna give some margin to this text but instead of pixels we want percent and by giving it a percentage will actually make it a percentage of the screen size so that this text should move to the right location whether on a desktop tablet mobile what-have-you it'll adjust to the amount of percents that we tell it to adjust we're also gonna unlink the values because we want to give it a different margin for a lot of these and let's start by giving it 25% distance from the top of the screen 10% distance from the right of the screen zero distance from the bottom of the screen and then 60% margin from the left of the screen and we can see that last one made it jump over here and condense perfectly so of course played around with those values depending on where you want your text to be floating on top of the image the next thing we can do is pretty cool we can just click on top of the text editor and we're gonna go to advanced and give this a background color so we can open up background and we can give it a classic background and a color which is just white all right now I'm not at all sure what part of that text got bigger than the rest of it so let's dig into that let's click on the text editor and click content and go to the text tab we can see somehow a little span found its way in here so we want to delete any funny styling in the form of a span on top of the text perfect and now we can just click style and in the style tab is where we want to make it bigger so we can make our text a little bit bigger alright maybe three lines is enough and then we can Center it pretty cool and we can also click advanced that we can give it just a touch of padding on the left and right side so that the words aren't flush up against the border so let's unlink our padding section and we're just going to give it two pixels on the right and two pixels on the left alright that looks great to me I don't know you think hope you like it we can just update it next I'm going to show you how to create a counter and a progress bar beneath this hero image on the about page it's a great way to show progress you made on any project or just give a visual piece of data that describes you so we're gonna click add a new section we're gonna get two columns and then we're just going to start drag and dropping so let's go to our Rubik's Cube we can scroll down and we're gonna get some fun features beneath here we haven't used yet we're gonna drag in the progress bar to the right and we're gonna go to the Rubik's Cube and we're gonna drag in another progress bar or instead of dragging in something cool you can do is just duplicate it so we can click on the progress bar and then in the pencil area just hover on the blue pencil and click duplicate and duplicate now in our left column let's go to the Rubik's Cube and I want to add in icon lists alright very good and back to the Rubik's Cube and we're gonna add a counter alright if I found it quick and I did and there's our counter alright very cool we're just gonna click on the settings for this entire section and advanced and give it a little bit more spacing in the form of padding I think 40 should be good now take advantage of that white space and now you can start editing to your heart's content so let's start with the easy ones which are just the icon list so we can click on one of them to expand it and then we can change the text I am vlogger check and we can click on the second one and you know just talk about what you do like your restaurant manager or your sculptor or a painter or maybe you're a fitness coach or a motivational coach or a financier whatever you are go ahead and tell people or right here and you tuber alright going along with the theme of that last one I'm gonna put the number of subscribers we have here you guys are all amazing without you I couldn't do what I do and we'll change the icon for each of those so icon just want that checkmark again because I'm not sure what the other icons would really mean although I'm sure we could think of something that would have meaning for the different icons so up to you there's all sorts of social media icons too and I'll just go to style and Center this section so the last check mark was youtubers still following that I'm gonna give a shout out to all our subscribers here thank you guys so much for sticking around over the years and helping out with my new videos seriously I do it for you guys and I couldn't do it without you so thank you love hearing from you even if you've been hiding out for months on end like me so that counting number here is gonna be like a nice twenty seven thousand even although I think we my inner broken it by now and that's a definitely cool number which is just subscribers so right over that now we can change up our progress bars on the right so I'm just gonna go with what I spend my time doing here which is answering questions and that's 50% of the day and then I think we can go to style it we can also make the title style a little bit bigger alright so it's something like 20 shoot perfect and then we're gonna click inside it we're gonna just go back to content and get rid of the inner text alright so I really like how that looked so much you're gonna delete the other two progress bars and then just copy this one again and this one's just gonna say word pressing and it's just gonna be 25% so 25 and this last one there's gonna be playing with kittens which is another 25 percent of my day go figure all right so 25 is good we're gonna update and this section is done next we'll see how to create a floating three images across the screen all right so we'll start by clicking add a new section and of course three columns here and each one of those columns will contain an image so click on our Rubik's Cube and we're going to pull it in three different images all right so image image and image now to get those images just click on top of them and then click choose your image upload files select files and we ideally want three images with the same dimension so in our case that's gonna be two to one with two height it's just these three images right here and I'm just gonna click and then command click and command click and open alright so the dimensions can be whatever you want as long as they are the same throughout the images and you can also edit and crop images within WordPress if you upload an image and you really don't want to edit it outside of WordPress you can just click on it and then click this edit image link right here and then you can edit the media file itself you just need to click on it and hold to crop or you can you know change the aspect ratio and then crop it really easy and pretty fun alright in our case I'm just gonna grab this first one of the bloggers the second image choose image that's Angela and I unveil third image choose image and kittens perfect so how do we make these images stretch across the full screen well we go back to the settings for the entire section we're gonna stretch this section we're gonna say content with be full width and we're gonna say columns gap and no gap and we're done and we can update alright next I'll show you how to add an Instagram widget to your website so let's click add a new section and give it two columns and we're going to put Instagram on the right we can do a search for Instagram there she is and we could just pull it in on the right and now we're going to start by getting rid of the title and we're gonna choose the images style of three columns and there's some other cool settings you can play around with here like what the button text says but for now we just want to make sure it's not adidas so it's not a Messi Instagram it's just us which is narai guy and we're gonna give it a number of images to show which matches with the images style we picked I pretty cool we can also change the link to so it goes to the Instagram image itself or your profile or a custom link and we just want to add in a heading because we got rid of it so let's click on the Rubik's Cube and then just drag in a heading right we're just gonna call this one Instagram and we can go to Center and style text color black and then typography we're gonna want to make this size bigger they're like 40 and then that'll be perfect all right so we'll update that it's done and now we're just gonna add some quotation marks on the left so it looks like we're all worldly and knowledgeable those are just text editors so we just put one in there and our first quote is by a cool guy named lasse so we can just paste it in and to make a quote you just got to put quotes around your text and say who it's by then highlight the whole thing and just click on the block quote button boom and done we can click style and we can actually make it bigger by going to typography of course and make it nice and large we should have to change the line height then so that it's not too wide alright once you have one good quote we can hover around the pencil and just replicate it and replicate it alright now I can enter in more quotes so the second quote is buy the ticket booked the trip and I believe Casey nice dad said that so it's pretty cool we'll give him credit for it he might have said that you know in a cooler way but it was something like that a third quote which is just be one with it it will be one with you and that's my favorite proverb of all time proverb because it says that if you want to become a part of something or something new then the first step is just to make yourself a part of it and adopt its practices into what you are and then the rest will fall into place and it will open its doors hopefully to you alright so with that done we just need to add some padding to each of these sections so that's pretty easy we just go up to this section and click on the settings for the whole section go to advanced and let's give it 4d all around and it'll be nicely spaced now let's just update and we're done with your about page great job so when i refresh our about page we see it looks really cool we have the hero image then we have our progress right here and three images and then we have instagram and quotes now you might be wondering what happened to our footer and really nothing we just have the default footer by ocean WP and Nick Edelman are finally done making our pages will add a really stylish footer alright so a nice order of business is just to create this services page let's click services and now let's go to add a page and edit with Elementor and add new section and this is just gonna be a bunch of big two column sections going all the way down the page the idea of this page is just to make your visitors really pleased and content when they think of your services and I know an easy way to do that is with images lots of images instead of lots of text which everyone does and then no one ends up reading it and people wonder why they don't get their services read or sadly sometimes used ok so let's start building this section from top to bottom the first thing we need is a heading and then a divider and some text and then a massive background image after that so let's go to the Rubik's Cube and let's drag in a heading on the right and I was going to drag in a divider alright dividers just a line the goats horizontally and Rubik's Cube and we're gonna grab in a text editor okay so let's do some basic styling here click on the heading we're just gonna call this a powerful heading and click style and we can bring that text size up click typography bring that size up to something you think looks good in this case I'm going to change the font family to another one I like and I know Elementary likes it it's called Poppins and we're gonna click on the text editor style do the same thing with it we're gonna click typography to make it nice and big just so it's legible you know no really small text that people have to squint at and then from the family drop-down we're just gonna choose a Laura elementary also loves a Laura you'll see that a lot on their site okay and then we can click on the divider and I like making that with something a little bit less 33 is perfect and then making the weight bigger and we're just gonna make that color of it a nice light gray something subtle all right that should do totally up to you and now I'll just update so enough of the text let's start focusing on the images so let's click on the settings for this overall section we're going to click style background tech classic and image alright we're gonna upload files select files and we're going to grab a ton of good background images for this page and others even though we have some already I want to give you more and by the way if you look in the description you'll likely find a link to download all the images so you don't have to go hunting around for your own if you don't want although most of these images did come from pixabay.com which is for you so I'm just gonna grab a lot of images here just a lot of them a lot a lot a lot a lot of them and it looks good and open alright so first let's go with this nice mossy green forest floor and intermediate now let's go to layout and stretch it and height we're gonna go to fit to screen perfect now we want to give ourselves a nice white background on this whole text section so that we can read it so let's click on the column settings we're gonna click on style background type classic background color white again that was by clicking on the column settings right this grayed out little file cabinet where my mouse is now we can make this white box float inside the column and we can make the text float inside the white box you just need to have the column setting selected and click advanced then we're going to give it a margin of 60 pixels across the board which pushes it inside the column because margin is space in between the border and the object itself and then we're gonna give it a padding of 20 which pushes the text inside of the object itself all right it's super cool I'm really excited about this guy's I just want to make sure powerful heading is on one line so style typography and a little bit smaller maybe 42 great job and we're gonna make the color of it black and update all right so you can add icons to these sections you can have links after each little text blurb like maybe this talks about architecture or your design portfolio or all the different desserts you've made or maybe just a cool company you've done consulting for and then there's a link to the full project or something that would be perfect for the services page in our case I just want to show you how to make this page flow beautifully top to bottom so we're going to add a few more sections like this alright so what we'll do to save ourselves time is just copy this section down the page so we're gonna click on duplicate duplicate duplicate and why not one more duplicate alright there you have it so now if you want to move this text block to the left hand column all you need to do is just delete this column click the X and then we're actually gonna highlight and we're gonna add another column and it just jumps over to the left alright so we're gonna make it go like right left right left so we can do that again go to this column settings hover right here just hover right here on the column settings click the X and then add one all right pretty cool now the good thing is we have more background images to choose from so the next one is our fall leaves we can just click on the section settings style change the background image and grab the red bench insert media and voila beautiful if the image looks a little bit too big or out of proportion you can now change the size to cover I'm gonna make sure that the image gets centered and you get the full image or at least almost all of it we can also do that with our mossy grass floor just make this style the size cover cool looks even better and if you're getting those duplicates of the image make sure repeat is set to no-repeat why is that happening oops I meant cover it not contain all right let's scroll down and keep moving on with the page keep making even more beautiful and diverse we can click on our third services and change up the background image just click on settings style change image we're gonna grab the three windows here really beautiful insert media and just make it no repeat and cover so it's consistent and awesome alright let's add our next service here it click settings style image and these images could be anything that could be photographs from your laboratory or your workspace you know they could be you out in the field or just cool photographs you took one traveling up to you and will change up this service click settings style change image grab the surfer and insert media no-repeat and cover beautiful and then we're going to move the text to the left remember just by deleting this column and then adding it back in let me change the background image for our final service to the dog intermediate alright perfect and update alright so once you're ready go ahead and fill in the descriptions of your services change up the headings and you'll have a beautiful service page to show off to your viewers and more importantly your clients all right so our services page is done it looks amazing and I want to show you a technique now that would create a page like this but even quicker so let's say that you set up another website on WordPress and you want to use your pages or your sections from elementary on that website you've already made the good ones you want to pull them over to the website maybe you upgrade it from the hatchling to the baby plan to make another website and you want to just make it super click with your sections or maybe you're just a little bit lazy like me and you don't want to make this entire website twice so I've already made a really cool our work page for you guys and I just want to go ahead and take this whole page with the background video and the quotes and all these different quotes from different places and these cool sections that I've made and then you can fill them in because they're really awesome and fun it's just too much to recreate from scratch and I know I put a lot of design thought into why these things go in these places over here the font sizes the text and everything so I want everyone to be able to take advantage of that well here's what we do to copy this section from one website to another and basically copy an entire page from one website to another which is something we haven't been able to easily do until now so we can just start by clicking edit with Elementor now in the control panel on the lower left you should see a little arrow that says save options open that up and then you'll see save as template click that we'll give it a name of our work entire page and we'll click Save here it is we just need to click on the 3 dots and click export and then save it as is alright so we could see I was on this other demo website here on 6-minute website comm and now I'm going to come back to our website or building here alright and we just need to open up the right page which is our work now let's click edit page add it with Elementor alright add template let's click my templates and we can see there's nothing here so we have to add the template into our WordPress dashboard let's click on the pancakes and exit to dashboard now he'll run elementary and just click on my templates and then at the top click import templates choose file and go ahead and click on the file and open the one that we just saved and import now all right and there it is to use the template we just need to go to the page we wanna use it on click pages let's choose our work edit with Elementor now we're going to click Add template my templates and there it is how to run our work entire page and click insert and there it is easy is that all the content came in and it looks just like we wanted it to perfect let's update it and we've created probably the quickest page ever in WordPress using elementary and of course I'll give you this template in the video description below alright let's just go to our home page and make sure it's working click on our work and beautiful great job so now it's time to get our contact page up you're probably gonna have a few visitors especially if you've been working on your site this much and making it look cool with cool features and those visitors need a way to get a whole you so let's click Edit page and let's start building our contact page and edit with Elementor and the first element we're gonna create it's just a full-screen map but it can show where your office is so let's add a new section and use one column and now we're gonna search for the map Google Maps what we want just drag it in perfect now this map is pretty smart we can actually just type in what are basically just words but Google will interpret the location as long as you spell it roughly correctly and there we go that's me so now we're just gonna click on the entire section settings stretch it make the content with full width and make sure there's no gaps in the columns and voila you've educated your first full screen map below the map we need a new section with two columns and on the Left we're gonna have our contact details so we can click on the Rubik's Cube and we can just drag in an icon list very good and below that we can just click on the Rubik's Cube and drag in an image just for fun so the icon list is really easy that's just gonna be email phone address so you can just click on the icons open the first one up and we're just gonna write email : and then our email which you can all use if you have any questions about the tutorials and I really do mean it I don't want any question to go unanswered so let me know how it's going although the YouTube comments are quicker for answers they really are because my inbox is like in the thousands all right so we're gonna get an icon that matches it you can just click the icon box and then right you know if email doesn't show up then how about envelope there you go so that's cool and we can do the second one which is just phone number list item – it's gonna be phone : all right there we go and then we do the icon phone there you go and then for the third one click on the list item three really easy just to address and then we can do all right address all right and then we can just do the icon which is just address book now for the image we're just gonna choose a fun image of some people out and about having fun so we're gonna grab this image a paddleboarding love paddleboarding people do that a lot around here oh that doesn't look like that but you know it's still pretty fun and updated perfect and then last but not least on the right we just want a contact form so you might remember we installed that contact form 7 plugin now we're gonna use it we just have to go to our dashboard we'll go back exit to dashboard and we're gonna click on plugins and now we're going to click on the settings for contact form 7 super easy you just want to click right here and then copy this entire shortcode including the open closed brackets you just need to click to highlight it and then copy it like that then just come back to our elementary editor window and we're gonna click on the Rubik's Cube and grab a shortcode shortcode drag it in and all you need to do is just paste in the shortcode and the form should appear if everything works and it does perfect and update and your contact us page is done so our Contact Us page is done and that leaves one more page for us to make which is the blog page the nice thing is this page makes itself as we publish blog posts so I want to show you how the blog posts work and how they appear on your page so to get this page with a blog post we don't want to click edit page we actually wanted to cover on new and click post ok so the first post I recommend bloggers pate is a welcome to the blog post it just shows you care about the readers and your kind of setting the tone with what they can expect what you're gonna give them and then what your plans are and I outline the next two types of posts you should write in our ebook add to your blogger 10 things today before your new blog goes live so that's a free ebook I deftly recommend checking out if you want to grow the blog so I'm just gonna write welcome to the blog Elementor style so it's kind of double meaning like Elementor style is how we're gonna do it but it's also a blog about elementary stuff so that's pretty cool and so the old fashioned way to make a blog is just to write in your visual text right here and you can also write text if you have like HTML to write in right here or paste in from another website and then you can just write like you would in Microsoft Word right here so let's walk through all the features in a wordpress blog post in about under a minute in the upper left you can set a heading so if you want to include a larger title or maybe this would be like the title of each paragraph or each chapter in your blog post just highlight some text and you can choose a heading usually heading twos are for inside the blog post but heading one is the blog post title in a lot of cases so I don't like using that it's a good idea to just go with 2 4 6 or 3 5 7 next we have bold in italics so B is for bold and eyes for italics and then after that we have the bulleted list and the numbered list to set up a list all you have to do is put your cursor where you want the first list item to be and click list then when you click enter the rest of it will become more of a list alright and the same goes for the numbered list of course if you want to insert a quote make sure there's some space around the text highlight the text and then click on the block quote you can also left align right align or Center text although left align is the standard and if you click the insert edit link you can add a link to somewhere like Google so it's really easy just to copy the link from wherever you are on the web and then you can put it in WordPress so copy and paste if you click on the gear you can add some settings for the link like open link in a new tab or you can search for existing pages or blog posts on your site and just click and create a link to them like that and update it one of the coolest features is the read more tag which can make it so your whole post doesn't appear on the homepage and instead you just get a read more button so wherever you want that button to appear you can just click on this little hamburger and they'll insert a read more link depending on your theme this should work and again it won't show your whole post then you can open or close the toolbar here this is a strikethrough on the upper left lower section and then there's a horizontal line to break up some text as well following that is the text color just click on the drop down arrow you can choose a color or you can add your own custom colors right here if you want to use them more often then we have paste as text if you highlight some text from word or maybe PowerPoint it comes with formatting and a lot of the times you want to use paste as text after you've copied it so just paste the text clear formatting and special character are rarely used although a special character does come with a large set of different ways to spice up your blog post like the infinity sign next you can decrease the indent or increase the indent although you probably won't need to unless you're really specific about the formatting and lastly we can undo although I just hit command Z or redo and then we have keyboard shortcuts which will show you a little more on what you can do with your keyboard like command V is paste and command X is cut a lot of the stuff you already know and some of the stuff you might not know pretty cool to add an image into your blog post we need to use the button we haven't covered here still which is the add Media button click on that grab an image and then there's some important settings the image title won't show up on WordPress but the caption will the alternate text is good for SEO it's good for describing your image description also won't show up but alignment is important if you do none that image will just sit on top of text to the left right will nestle the image in text senator will put it on top attack center and left will Nestle it you can link the image so people can click on it and you can change the size and insert in a post pretty cool lastly if you want to put in a video just go find a video on YouTube or Vimeo or wherever you like videos go to the video page and click share and then you can choose to either copy this link and paste it into WordPress which will allow the video to show up or click embed which I like doing cuz it's a little bit better for SEO and copy the embed code and then come back to your WordPress blog post go to the text tab because we're gonna paste in some HTML from YouTube and just paste it in alright and that'll make the video show up so you want to put that embed code in the text tab so that's a lot of what you can do with the blogpost blog post also new categories like welcome and how to use Elementor the format we don't want to mess with standard is good for now although if you find any cool tricks in formatting definitely let us know and lastly we need a featured image so that's different from the image in the blog post and I'll show you why we can choose this image at the puppy and set featured image there's also an image gallery you could set up later and we're just going to publish this post and let's see what we made we're going to view post now and we can see the featured image up top and then the image inside the blog post and then all of the content we just created so nothing fancy just a basic blog post you can also add promotional content to your blog post sidebar and one thing everyone likes to add is the facebook like box so I'll show you how to do that just go to Facebook page plug-in and Google because they change the name of it awhile ago and then click the first link for a page bullion then you just need to create a free Facebook page and put in the link to your page here like facebook.com/ slash your page you can change the width and choose what shows like the timeline the height the header and the cover photo and all that and then once you're good on what it's going to show you can just click get code and all you need to do is copy the step 3 code right here and we're going to put that in appearance widgets so you come back to WordPress and you hover around the dashboard button and you click widgets I know if you want to get rid of a section like maybe we don't have a ton of archives yet you can just open it and delete it and to add the Facebook like box all you have to do is click on the text widget and now add it into the default sidebar add widget it'll open up go to the text tab dismiss and now we're gonna paste in that code that Facebook generated for us and we can give it a title add us on Facebook and save it now let's see what we made we can go to our site and we need to go to the blog because that page has the sidebar and so Facebook's not showing up because there's one more step we need to paste in this code from Facebook that they made for us also in our blog so to do that come back to your site go to the dashboard and we need to install a plug-in that just holds third-party code from Facebook Google etc so go to plugins add new and we're going to install a plugin called insert headers and footers to do a search for insert headers and footers and just install this some bye wpbeginner and activate it so big things to dope you begin aren't there great blog and a tremendously good plug-in developer and now once you install that in settings you can click insert headers and footers and this is where you insert code from Google Analytics for example maybe Adsense wants you to put in code in this case Facebook wants us to put this code in the header box and save so that probably took me like several hours to figure out at first but now you know where that code can go and now you get a Facebook page plug-in so that's pretty cool it should show up now and people can like and comment and all that stuff in line with your blog alright now that our blog page is done we've completed every single page on our blog and the next order of business is just to set up our footer because that's gonna go beneath each page and will officially complete each page to add your footer you just need to go to any page like the home page is a great place to start and click Edit with elementary and we're gonna create the same footer then save it as a template and use it on every page you'll see what it mean so what I want you to do is come all the way to the bottom and just click add a new section now select your structure so I want to put three different things in our footer so I'm going to go with the three columns and now we just need to start dragging and dropping so the first thing we want are some social buttons you can just look for social grab the social icons and just drag them in the middle alright so that was easy we can of course change their shape like style I'm going to set a border radius of 25 so they're circles and in content we're gonna add one item which of course it's YouTube but you can see you have a lot of items to choose from super flexible and Elementary lets you really show off your social media swagger alright so YouTube you have apple that's pretty cool so YouTube and there we go we've seen our link which is just d'aww dot youtube.com slash the right guy all right and then if you want to add one more we can add item and then I'm also gonna do one more so WordPress looks pretty and all but actually just gonna do reddit because started posting a little bit on reddit I think it's a lot of fun you can learn so much and people just go nuts in those comments ok so now you guys can check out my Redis and but it's actually a great source of free organic blog traffic if you answer the right questions if you post really interesting links so all right we update that section and now for the right-hand column or footer we just want a menu so we're gonna click on the Rubik's Cube and we're going to enter your menu just gonna grab custom menu and drag it in now we'll just select the menu so we just have the main navigation then to get our whole menu on one line we're gonna play with the menu padding so we can bring it down you just have to write in pixels px all right very good now for the left-hand column I'm just gonna have a copyright which can just be a text editor so text editor and I'm just gonna write copyright 20:18 Greg 9 all right pretty simple and then we get the copyright symbol just from Google symbol and you can just copy and paste it right there from Wikipedia and yeah there we go put it after the word and update so we don't want our footer to be flush up against the section on top of it so we can add some padding you need to click on the Settings whole footer click advanced and we're gonna give it some padding of 20 everywhere and then we want to Center the text within the footer so you can go to layout and content position middle very good now we'll just update it and our footer is done but one more thing I wanted to stretch it so the footer goes across the whole page and now update it so how do we use this footer on all of our other pages well we have to save it as a template if you click this floppy disk icon right here whatever footer you make can become a global template so we're gonna call this footer version 1 and save it awesome now it's saved so let's just make sure our page is safe great it is and now we can just go back and now we can just go to our home page and open up a new page and that footer will be waiting for us there so we go to about edit with elementary scroll all the way down a template my templates click insert on footer and update and now to get rid of the footer that was beneath this page which is the default footer from elementary we just got to go back to the hamburger I see it's a dashboard and down in ocean WP settings click footer and just disable the copyright area and update it now when we view page we will have our own custom footer in place and we also want to disable this black area so we can go to edit page footer and disable the footer widget area and update MD page perfect great job so I'm going to go ahead and do this to all of our pages and then we'll have a consistent footer throughout alright so now you are done creating the pages in this tutorial and I wanted to show you a couple more tricks like how to add a link on this button so it clicks and goes down the page and then how to make our nav menu a little bigger and up here you also see we have a cart icon just because I secretly installed WooCommerce to show you guys in the intro hall will add products if we want but that's a tutorial for another day actually probably a day about a month from now in July that video should be ready so I'll be fun it's just kind of nice how that cart icon just comes in our menu and all I did was install the WooCommerce plugin so let's set up that link on your homepage video background and we're just gonna do that by clicking edit with Elementor and this will make your buttons work like the Sydney buttons do if you watched our Sydney WordPress tutorial those are super fun everyone loves those and now we get to learn how to create them so we just click our button and we're gonna set this up from scratch and then in link you just keep the pound sign the hashtag and just write in like my dash banker you don't even need the dash you can just write one word and then update it and so now when they click that it'll go to the anchor but the anchor has to be somewhere so we're gonna go down the page and we're just gonna put the anchor wherever we want like on writing made simple or you know even better we can just put it on our little custom Apple section so to do that just click on the Settings of the whole section and then we're gonna click advanced and then for CSS ID just write in without the pound sign my – anchor or whatever you put up top and then update it all right so we just follow those little directions there and now when we check out the site it should work so now when you click on the button with the nice little arrow that tells people where to go it goes down perfectly to the right section right to the very top of it just like Sydney but now you know how it all works all right very cool so next we're gonna install our or we're gonna increase re our navigation menu size so we're gonna do that in customize and then we're gonna click typography it's kind of hidden in here and then we're gonna click main menu and right here you can increase the menu size so it's at 13 and we're gonna make it 18 and make sure you write in the PX beautiful and publish so that will affect all our pages but if you just want to increase the menu size on one page you can do that in the page editor in ocean WP settings we're also gonna bring our logo up a little bit a little bit bigger now at the menus bigger so we'll go back and we're gonna go to header and my Minnesota accents coming out or gonna go to a logo and then here of course you can just make the max with a touch bigger and it should show up in a second it's just going slow okay and it looks like there's some kind of maximum height or maximum like amount that our logo can be which is contained in the header it looks like so I'm just gonna use the max height one and make it as big as possible perfect and we'll just set it right here and I'll have to look into why it's being limited like that and let you guys know but it looks like we made it a little bigger so that's cool and whatever it is it's just lined up centered with the menu so that should work fine all right so I'm super sad to say that's the end of our tutorial the person is still taking photographs but what changed is that you have now an amazing website that you can change the world with I hope you enjoyed it if you have any questions about Elementor WordPress or any of the features we created or even any feature that you are thinking about creating but aren't sure about or maybe a question about the whole process of registering a domain name getting web hosting setting up WordPress which hosts to use whether or not WordPress is right for you how to get cute kittens how to get Instagram working how to make the social media icon buttons or anything at all please drop those down in the comments below no question is too simple and certainly not stupid and I would much rather spend a half an hour discussing a question with you then have that question ever go unanswered of course please make sure to smash that like button if you learned anything here and also hit subscribe that helps a ton because when people click Subscribe or like then YouTube thinks oh maybe that video is actually worth something or maybe it's good and then YouTube rewards me because that's how their algorithm works so I really appreciate it it helps like more than any of us really even know I think I'm gonna go hop on a flight in about 4 hours so I got to go pack but it was a true pleasure spending this couple hours working with you because I really enjoyed making this for you alright guys that does it please again make sure to ask questions in the comments smash the like button and hit subscribe and I'm sure I'll talk to you soon I'm Gregg Narayan thanks so much for watching come on let's check it out all right let's go