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?
And this is where we create our e-commerce website by checking this little tick box
They'll actually install and activate WooCommerce meaning you get a cart your account check out all those pages
Including some demo products and the ability to add products all for free
So like in the olden days you'd have to create those pages from scratch
You'd have to really know how to code a product onto your website
Which was so much work, especially to connect it with a check out and do all the JavaScript to accept payments
I won't say anymore, but they're gonna do it for us and that's why we like using Bluehost to create an online store
It's super awesome
and of course WooCommerce is the best e-commerce plugin for WordPress plus I mean
Why not make your website even more powerful right away with this cool WooCommerce plug-in installed. All right. Now, we're just gonna hit continue
So this page is pretty funny because they want you to tell them a little more about you and your goals
but what they actually want is to be able to recommend use some plugins and the best themes for your site and
I just know that you guys are going to want to see the most plugins and themes possible and get all the options
so we're going to check all of these boxes and
Plugins, you know extend the functionality of your site help you do more while themes are the template or the look the skin
Whatever you want to call them. Then it says are you comfortable creating websites? 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
