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 We're going to 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 going to 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 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 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 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 and so this website truly has something for everyone Let's check out the services page where we're just going to 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 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 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 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 Super simple and it works and you can build your customer interactions with that 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 elementary 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 the steps to make our website with Elementor today could not be easier in this elementary tutorial The first one is going to be to get our domain name So domain name is just your address on the web just in the same way that Someone lives at 1 2 3 Malibu way your website lives at your domain name.com or org or dotnet or whatever you choose a Domain name is actually going to be free today because we're gonna use Bluehost to set everything up so they give you a free domain As a way of saying thanks for joining them. So that's really cool then we have our hosting so the hosting is just like a plot of land if the domain is the address then the hosting is like the plot of land where you find when you visit the address and this is gonna cost us about 4 dollars per month as you'll see on the next few screens So once we have our domain name aka our address and our hosting aka our plot of land We need WordPress which is gonna be you might have guests it our house.
So we have an address when people visit it They see some land Which is the hosting and then?
What people actually come for like when you'd come to your family reunion or go to visit a housewarming party is the actual house?
itself, and that's WordPress and of course once you have your domain name and hosting WordPress is despite what a lot of people think free to use We're gonna get a free theme and a lot of cool free plugins So your website has good stuff on it right away from the moment you get started Once we have our domain name and our hosting and our WordPress installed and by the way, all of this goes on at Bluehost So you can rest assured that all of this stuff above is taken care of at the same secure place It's actually the number one recommended place to do it by a wordpress themselves You'll be happy that you don't have to worry about moving anything at all And then lastly come to the content and that's going to be built with Elementor The web's best drag-and-drop page builder and you don't have to know any coding to build a website I'll also show you how to get free background images change the fonts for free to a ton of cool different fonts Make a logo for free and generally design a whole website for free so the amount that you'd save as opposed to going with the web designer in your town is going to be Thousand and if you don't believe me go out and get a quote. I guarantee you'll be amazed Alright guys, so if you're ready to get started, I'm ready to let's open up our google browsers here. I'm just gonna open up a Totally new window here and to get the best discount available today that I've negotiated with Bluehost for you guys. Just type in HTTP colon slash slash WWD or blog org?
That's my blog forward slash Bluehost and hit enter Alright folks so welcome to Bluehost and you're probably wondering what's the best plan for me today?
Well, it's sort of like throwing darts at the side of a barn because every planet Bluehost works great for WordPress You can hover on WordPress and see they have WordPress hosting derpy Pro ecommerce under normal hosting They have shared VPS dedicated and so on and so forth But if you're wondering what the most affordable plan is, then there's two options and they're both and they're both called the basic plan so I'll show you those right now the first one you can find if you click get started and You can see the first version of the basic plan that we've really loved in the past So you get all these features for a great price and honestly, this is how most people set up WordPress at Bluehost Of course, there's plus choice plus and pro if you want to spend a little more those are great, too But a lot of people have gone with basic and given me really great reviews However Bluehost with all their amazing technology recently created a wordpress Specific basic plan that we can find if we go back And then hover on WordPress and click WordPress hosting So with this version of the basic plan, if you scroll down we get all the features from the other option But we get cool features too like $200 marketing credit Which obviously I want to take advantage of today and if we scroll up you can see it Automatic wordpress install and updates and so on and so forth other Hosts that are worse than bluest would charge more for these advanced WordPress features, but Bluehost charges them for the same price so it's really cool and I personally want your blog or website to be a super charge as Possible from the first day you make it and that's why I think this is our optimal plan here So under this wordpress basic option. We're just gonna hit select and move forward and Now we gotta get a new domain name or we can use one that you might already have But I have a pretty simple idea for a domain name, which is just Bluehost Tutorial com, I'm pretty surprised.
No one got that yet if you need tips on until my name keep it simple keep it something you could tell someone at a conference or at the bar at an after party and they'll remember it and Don't use any dashes or weird science or anything like that?
You want the calm because most recognizable if someone says, you know, my website is called Facebook You're not going to be like oh That's obviously Facebook tech you're gonna think of dot-com and you can sell it for the most money If you get the dot-com so we'll click Next And it looks like Bluehost. It's already gonna try to teach people some tutorials on this account from their example.com Which I bet they own So they beat us to it. That's kind of funny But if you get an error like that, you can just add, you know some different letters to the end of it Like, you know Bluehost tutorials would be perfect because we're gonna make more than one and now click Next So what about even shorter we could do guide and if that doesn't work We're gonna have to resort to doing just our first name last name Alright still not available. So how about Blue was Set up and next One of these has got to work Alright, we got it through and we're good to go I'll leave that part in the video though because I bet you guys are struggling a bit for your domain name, too And now we're excited that we got one. We're not gonna do the Google sign on I don't really didn't even know why that's there and then we're just gonna do the account information first name last name business name If you have one, so I just incorporated and put that in and then we're gonna do the address All right, and then I'm gonna come down and do you a package information?
So this basically just says how long you want blue eyes for it and the price goes down per month if you get more months Up front.
So obviously want the least price per month because I know I'm gonna keep Bluehost forever I'm gonna go with that one. Then we have our hosting price. That's the number of months times that cost per month Primary domain is free and get free SSL for security Then package extras is really easy that part we just unchecked like everything Because these are just additional features Bluehost obviously has a lot of upsells and they have good services But we can add those later if we want and we want to keep it on a tight budget All right I'm gonna jump up and put in that address and then we're gonna put in our payment information here and then we're gonna get our Bluehost account Okay. Got the adderson now, let's do the payment So I'm just gonna pay blue house like we would for any online payment like Apple Amazon eBay Craigslist wherever you shop And I think I remember my credit card number, yep All right. I'm just gonna blank it out just so no one goes on a shopping spree here Although I pre generous if you meet me ever at a conference.
I'll get you a drink or something and now we're gonna Check this box right here. And Next step is just to hit submit and blue the list will basically register your domain for you. Take that process off your hand So no one else can get your domain name They're also gonna set up our hosting so clicking submit is going to do the first two things domain name and host We install wordpress for free super fast the way that the pros do it at Bluehost. All right, so let's click Submit together Alright guys and gals so that was really easy It's probably a lot easier than you first thought when you heard of wordpress.org and Bluehost But it really is that easy and now we just got to hit create account Alright just a few boxes here so they have our domain name look and get create a password Very good, and then I've read and agree and we're gonna create account boom Next click on go to login All right, we're gonna do the hosting login here and it's gonna test us to see if we remember the password we just made So hopefully we can pass that test and click login and for your reference if you get lost and that page closes the link is just my bluehost.com And that's where you log in Alright so here we are in the Bluehost. Let's create a website screen and sorry I'm just reading exactly what it says I guess I like stating the obvious So you want to do what do you want to name your site and usually you just want to call it Whatever your domain name is.
So blue host setup is good But feel free to be as creative as you want. You can change it anytime There you go to read things again. And then what's your sales tagline?
So This I have an awesome Bluehost setup guide of me easier for VPN Aires All right, we can all be beginners at some point in life. Not a big deal If you're afraid of being a beginner, you probably aren't learning very much out there. Do you want to blog?
Yeah, of course and we're gonna display our blog posts on a Different page how about that?
No, let's just go with homepage that makes the most sense So there's like a list of blog posts on the homepage And I'll show you how to change that later on.
If you want then we're gonna go if do you want an online store?
So They will actually install and activate WooCommerce and e-commerce plugin for WordPress for us Which is great because we do want to sell things. I'm thinking at some point We might want to sell an e-book or maybe a coaching package something We can sell a lot of and then help people with on the internet make a little passive income, you know So perfect and now we're done here so we can click continue and then it says do you want a online store?
Whatever you want to say, really?
I mean you have me here so we can go with like a Three out of four sure, you know, let's actually do a little one out of four it just so you don't miss any steps Alright, so they said if you want to extra help you can design it for you.
They're probably gonna charge you a little fetus so we'll do it together and That's really what that's all about All right, cool, so we're gonna continue to theme selection now click on that Alright so I'm gonna zoom out real quick on my screen so we can see everything here It's time to pick a theme that inspires you at Bluehost. All right, so what are they trying to do here?
They're actually trying to do us a lot of good and offer us the best themes and I can tell you a little bit about them Aster is amazing for websites storefront is the default ecommerce theme Ocean WP is just like Astra for websites. Sydney is an amazing one-page theme or you can click and go up and down the screen Generate press is a little bit more business corporate Hestia's for travelers Elementor is super basic really beginner friendly just like a drag-and-drop page builder and then serif light is Also good for travel bloggers and adventurers. Of course, you can click to the right and as you can see it There's like five hundred and fifty nine options, so I don't know much about these but I'm sure they're great The thing is, I want you to see the default WordPress setup and theme So that you start with like the most basic set up and you don't miss any steps And for that reason we're gonna actually pick our theme later. I have one in mind that we want to use and That means we can just skip this step and you can get all these later because they're free and you can just get them from inside your WordPress dashboard So let's skip this step All right a little welcome to Bluehost notification here use your Bluehost dashboard to monitor manager States emails and Dominions Be sure to stop by the marketplace to find the tools.
You need to empower your site cool. Let's get started um, alright, we're gonna not do additional charges right now, although Thank you anyways Click, I don't want privacy So they're gonna offer you a free month trial of domain privacy protection if you want to take advantage of that, go ahead Just keep in mind that I think you'll have to pay after 30 days So we just want to keep it on a budget right now. I'm gonna click I'm sure turn off All right, very nice guys, you've done a great job you've gotten further than like 97 percent of beginners who never take this initial step and make a commitment to actually get their own domain name and hosting and wordpress and join The ranks of all those professional bloggers out there trying to make it so you really set yourself apart from the pack There's a Craigslist to launch over here. So recommended skipped completed Kind of a cool little checklist here but what I'm most curious about and YouTube probably is what is our site look like right now, so You can click on view my site and WordPress either one if you want right now, it's really tempting if you do it You know just go for it, whatever happens happens, but I'm gonna open a new tab and check out Bluehost set up calm So we don't lose That initial screen right here Alright so cool. It says a new WordPress site is coming soon this is what anyone visiting your site as you build it would see and If you want to actually log into WordPress, you can just click on admin login so, of course we do let's click on admin login and then we're gonna go to our email and we're going to try to retrieve That password for WordPress They should have sent it to us.
There it is So you get a few emails from Bluehost and it's gonna say probably the one you want to do first is the action required one Just click on that and verify your email Thanks, alright that's done now we're going to go to in box again and click welcome to Bluehost so this is just like a receipt email and now back to Bluehost again and then Alright, so nothing from WordPress. Alright, so we're gonna close our email and in order to get our Bluehost username and password Let's go back to our portal and click on my site. And now let's click on manage site So this is like a basic overview of your site what's going on now?
How many themes plugins users you have?
And we're gonna manage us because we're the one user All right, and there's our username. So it's just great. Narayan 1 Alright now we got our username.
So that's just showing right here and we're gonna hit login Alright guys, and we're in cool so we're just gonna clean things up a little and close these notifications because we don't want to use Optinmonster plugin or this one for now?
And we can get rid of these other ones, too just so we can see the normal or press dashboard as anyone would and Now the first order of business is just to change our password. So we're gonna click along users And there we are we're gonna click on edit and Now scroll down and now it's time to give ourselves a new password under a cow management So just click generate and I'm gonna go with height and then create a new password for yourself make sure it's strong if you can and then just scroll down and Update profile. Alright now we can scroll up and to view our site and WordPress Everyone just clicks on this Bluehost setup button, which is your site title So it'll say whatever your site is called up here with the home icon Just click that and it takes you to the front end which is how the world sees your new website or blog Super basic doesn't look that great, but we're gonna make it look amazing And then you can click on that same button to go to the back end or the dashboard So that's just how that button works really important Of course, you might notice that our domain name looks all funky right now and that's because it's a temporary domain at Bluehost they start you off on a temporary domain now because they don't know if you're going to come from a Domain name at a different place or buy a domain name that so we have to click on bluehost And this takes us back to our Bluehost WordPress panel and now we're going to click on hosting And go back to manage So you can see how the WordPress area is connected to the Bluehost area all right, and now let's go back to home and We can see that there's this temporary box blah blah blah domain in here, which doesn't look good We want to get rid of that and you can change that by clicking on my sites Hover on your little site card and click manage site then we're gonna hit settings and for set URL right here just highlight it and delete it and then write in what we wanted our site URL to be So, it's HTTP Colon slash slash and Then Bluehost set up Com, so just write in whatever your domain name was right here without the www But with the dot-com or whatever extension it is and click Save updates Alright and as you can see there's a lot of other fun advanced settings here that we can play with later on Let's click on my sites again. So we get our site card and now let's go to login to WordPress one more time Alright so now it should take you to the traditional wordpress login screen right here And if it doesn't then I want you to just open up a new tab Type in your domain name whatever you chose And do a forward slash and then a WP dash admin a dmin and I want you to do this because this is the standard Way to log into WordPress just through your browser window like through Google so before we were logging in through the Bluehost panel, but now we're logging in just through Google and Hit enter Alright here we are at the normal WordPress window Pop in our username and our password and now most importantly We're gonna hit remember me in the safest time in the future and also bookmark this login screen if we forget it and click login Alright guys, so just two ways to log into WordPress day or whatever works better for you in the future You can go through your Bluehost panel, or you can go right through Google Alright folks. So here we are on our dashboard This is just where you'll be taken every time you log in to the WordPress dashboard And the first thing I want to do is manage our plugins So that we're literally all on the same page and have the same WordPress install going forward.
So let's click on plugins and we can see we have some default plugins some we might want and some pollutants you might not want and if you delete a Plug-in you can always get it back by clicking add new at the top. There's no harm to your site Especially if your site's not running on that plug-in, you can just get it back for free So we're going to go about activating and deleting We're gonna click activate on a kismet cuz that controls the anti-spam make sure you don't get spam comments Or at least they don't get published on your site. All right. Now we're gonna go back to plugins And for the Bluehost you want to keep that active because that helps your site connect with the control panel security update features all that For Google Analytics by monster insights. We're going to deactivate just because I like doing That part manually and I'll leave you guys a video below on how to manually set up Google Analytics Actually using Google Analytics site So we can delete it now and it enter and zap it And delete hello deli That's just putting like a quote in the upper right corner of our screen kind of keep, but we don't need it today we're also gonna deactivate jetpack and Deactivate optinmonster We're gonna keep WooCommerce because that lets us turn our website into an online store and we're going to deactivate Derby forms Lite don't need it and submit deactivate really great plugins We just don't need them now and it saves space on your site to make it faster if you get rid of them If you have a lot of plugins to delete you can just click check both of them and then go to bulk actions delete and apply and enter all Right now for the plugins we need so of course We're gonna build our website with elementary at the best drag and drop plug-in out there So we want to go to add new and get the plug-in.
That is elementary. All right, we're gonna do a search plug-ins for elementary And Thar she blows and install now?
So three million activations three million plus so, you know, it's good Alright, so we have to activate elementary to get it working and then we'll probably taken to a beautiful elementary screen All right, welcome to elementary so it's gonna ask us if we want to get the full guide which is a really cool resource we can right click and open that in a new tab and save that for later because that's from the awesome people at elementary a Lot of tutorials like this one on how to use their page builder Or you could click create your first page, but in our case we need to finish our list of plugins So we're gonna actually just go back to plugins and you can find this button right here just by going to pages It'll just be the same thing. So We're gonna go back to plugins and we do need a contact form plug-in So we're gonna click add new and I want to get you guys the best contact form plug-in ever called contact form 7 Works with so many different themes. It's been around forever and like yeah, it's even bigger than elementary. So instant install and activate Alright, and now all of our sites should be on the same page if we go to plugins We should have 5 plugins right now and let me know any questions you have about additional ones Or maybe you found a plug-in you absolutely need but you aren't sure if it's good for your site I can confirm it below in the comments next we want to check out our themes So if we look at our site by clicking on the site title button, we see we're running the 2019 WordPress theme It's a wordpress theme built by the wordpress team And like I said before it looks ok, but we want to make this site look amazing And the problem is so many other millions of WordPress blogs and sites.
They're installed use this theme and there's nothing wrong with that There's nothing wrong with trying to figure out how to make this look good Adding images and blog posts, but it's not exactly gonna stand out among the pack and that's something I want for all of us so to change our theme we're gonna go back to the dashboard and we're just gonna hover on appearance and click themes and You'll get to the same place if you just click appearance Same place right here. So now in our theme panel we can see we have 2019 active We also get 2017 and 2016 if you wanted to switch to 2017, for example, you can just click and open it and click activate Supercool and now I want to click on our site title. You can see everything will look different automatically So you get a lot of really cool templates and looks for free in WordPress just by installing WordPress Let's go back to the dashboard though and come back to appearance themes and I want to show you how to delete a theme if you want to save even more space on your site Maybe you like things really neat and tidy You can just click one to open it up and then click delete in the lower right corner And okay, and if you want to get it back just like a plug-in. There's no harm. No foul Just click on add new theme and you can search for it and get it back Alright, so now it's time to get a wordpress theme that works perfect with Elementor.
So Elementor is the plugin and the page builder But it needs a theme to operate in and we can find the perfect theme by clicking Add new theme right here big plus icon next to get ourselves a brand new theme that will stand out Let's just click on the huge blue plus icon 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 it out and of course use it and then click activate Alright, 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 five plugins active at the moment Excuse me, cutting form seven 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 archives we didn't write anything in March 18. No, no No, it's March its 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 Alright 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 us 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 gonna 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 assign them to different places And we're going to 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 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 gonna 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 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 home page and make it look however You want when someone first lands on your site and then we're also gonna 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 see if those changes Alright 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 Alright 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 type PHP in our link That's 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 like 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 peoples 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 read 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 Alright and so it's going to 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 going to 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. All right, fine we'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 sight feeling which I know a lot of you guys don't like and I don't like eat it and 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 elementary and the free version Delete that and then we're gonna create all of our own stuff All right, we're going to leet this All right, 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 Alright, 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 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 tag 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. All right, 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 going to bring in the text editor and it takes a little bit of getting used to because we actually want to hold And do it Okay, excuse me. So with that 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 it takes a little getting used to All right, but you know if I can do it so can you they were gonna grab a button bring in and So pretty soon you'll get used to seeing that little blue section and just dropping it in Great. So now to enter 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 We'll get the option for a background type.
We get classic gradient and background video So, of course you 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 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 going to write 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 fonts. Don't go too crazy and I'll give you a recommendation now I really like the one called Roboto Because Roboto has been really popular in the past few years on the web maybe longer And now we can choose its 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 if it's on two lines then you know You might have to put it off at 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 we can just delete it and all I'm gonna say is today And share them with the world Alright, so the old wordpress way of changing up these text editors like you know, blog post is to click on the kitchen sink Right now a toggle toolbar and then 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 43. Oh I was wrong 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 200 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 down words.
So when people click it, it's gonna take them down the site to another important section of your choosing and that little downwards arrow 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 jive 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 Oshin So in order to do that, make sure you're on normal not hover Make sure I'm 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 All right, 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 edit to sit 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. It's very much like home blog contact services and artwork Alright, 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 gonna 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 gonna 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 can search something cool like palm tree Those are probably never going out of 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 can 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 that 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 to 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 look and we're just gonna pick this one right here to pick your logo Just click it It'll fill in the screen and you might say that's not a compass to which I would respond are you will accomplish maker a 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 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 Just highlighted it and paste it and we'll get the blue now You could 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 I'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 All right, 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 a WordPress and just come back to your dashboard by clicking on the pancakes.
Thanks to dashboard I know this is 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 Alright, so you need to call it credits Alright, 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 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 company 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 can 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 All right.
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 It's 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 All right 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 gonna 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 elements are made for us so we're gonna download this to your computer and then use a really beginner friendly photo editor that I use 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 antic 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 Alright, 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 using pixlr.com That's P IX l are.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.
I 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 going to 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 or symbols to era's 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 two 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 two 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 remove 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 we can just pull the wheel So that 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 wanted to get really specific you could take a screenshot of that Apple gradient so I just hit 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 to 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 a 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 gonna 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 WWE Apple comm 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 $2,000 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 the what?
Forty pixels and there you have it perfect Now we've created a section that looks I would say at least 90 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 homepage 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 look at a 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 All right. 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 All right, 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 entire space and it'll make your image 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. I made it jump over here and condense perfectly so Of course play 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 All right, 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 All right, 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.
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 now we can click on the second one and You know, just talk about what you do like. You're a Restaurant manager or you're 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 order right here and youtuber 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 will 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 so 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 27,000 even although I think we may end up 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 All right, so it's something like 23 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 I'm actually 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 going to be playing with kittens Which is another 25% 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 let's just see 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 blogger 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 going to say columns gap 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 Neriah And we're gonna give it a number of images to show which matches with the images style. We picked All right, 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 dragging 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 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 Lassie 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 all right, once you have one good quote we can hover around the pencil and just Replicate it and replicate it. All right. Now I can enter in more quotes. So the second quote is Buy the ticket book 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 All right. 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 the 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 we 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 Allen 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 elementary 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. We're also going to drag in a divider all right 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 sites 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 I'm just gonna make that color of it a nice light gray Something subtle Alright, that should do totally up to you and now 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. I'm 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 All right, 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 here. 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, 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 amore duplicate?
Alright, there you have it So now if you want to move this text book 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 Alright 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, it looks even better and if you're getting those duplicates of the image make sure repeat is set to no-repeat Why is Jack happening oops, I meant cover it not contained All right, let's scroll down and keep moving on with the page. Keep making it 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 work space 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 color Beautiful and we're gonna 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 all right, perfect and update all Right, 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 upgraded 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 artwork 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've 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 animal click Save Here it is, we need to click on the three 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 want to use it on click pages Let's choose our work Edit with Elementor now, we're gonna click Add template My templates and there it is, I'll 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 ahold of 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 is 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 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 just created 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 alright, so we're gonna get an icon that matches it you can just click the icon box and then right in 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 lista, and – It's gonna be fun : All right, there we go and then we do the icon phone There you go and then for the third one click on list item 3 Really easy just to address and then we can do. All right dress 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 of paddleboarding love paddleboarding People do that a lot around here. All 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 gonna 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 hover 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 a deathly 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 going to do it, but it's also a blog about elementary style 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 of them 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 I'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 attacks 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 blog post blog posts also need 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 gonna 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 cuz they change the name of it a while 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 search for insert headers and footers and just install this some about wpbeginner and Activate it So a big thanks to w beginner at their 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 we'll 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 going to create the same footer then save it as a template and use it on every page You'll see what I 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 We 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 gonna set a border radius of 25, so they're circles and In content, we're gonna add one item which of course is 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 w w dot youtube.com slash Narai 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 direct questions if you post really interesting links So, alright, 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. I'm 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 Alright 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 can 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 footage from elementary we just got to go back to the hamburger exit to dashboard and down in ocean WP settings click footer and just Disable the copyright area and update it Now when we view page, we'll 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 All right 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 how we'll 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 – anchor you don't even need the – 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 going to 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 pull it up top and then update it Alright, 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 sorry 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 wanted to increase the mini 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 width 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 .
Read Our Written Bluehost Guide:
Today I'm proud to present you guys with an Elementor WordPress tutorial featuring Bluehost web hosting. So now you can build a website using the #1 Page Builder, the #1 WordPress recommended hosting, and of course the #1 CMS. Enjoy!
Just starting web design with Elementor? Crush that SUBSCIBE button and ding the bell. I publish Elementor tips and tricks all the time and am here every day CST to help out.
Learn Elementor page builder from scratch and make every element to life! We use OceanWP theme in this guide.
Can't Watch? Follow our Written Guide to Install WordPress at Bluehost Step-by-Step:
*Secret to Getting 66% OFF Your Bluehost Signup: Details of this offer are as follows. Use our link above (thank you!) then at anytime during setup for example after you enter your domain name, move your mouse to the edge of the screen and you'll be offered a 66% off deal for staying around with two handsome Bluehost staff in the picture, click Claim Offer. It should look like this for you: Done and done, best Bluehost discount / coupon is all yours. If this works for you just let me know below but keep it on the DL 🙂
You will enjoy this video if you have searched for:
Bluehost wordpress tutorial
Bluehost wordpress install
Bluehost web design
Elementor page builder guide
Bluehost wordpress blogging tutorials
Finally, a YouTuber asked if I had a Patreon for "tips" so I just made one if you wanna tip me for WordPress support 🙂