Today, I'm gonna show you how to make an Amazing Parallax Wordpress Website
(Music Playing)
Hi, my name is Hogan and welcome to the tutorial!
Today, I'm gonna show you how to make this amazing Parallax Wordpress Website
And this tutorial isn't for people who want to learn how to code a website
or build a website that is like Facebook or Amazon
But if you want a website up and running within a few hours
that is simple and clean and modern without learning a lot of code
then this is tutorial is for you. So this video is basically perfect for freelancers, online entrepreneurs,
small to medium sized business owners, or even if you want to be a future web developer
then it's great. So by the end of today, you'll have a fully functional website
that is SEO-friendly, WooCommerce Compatible, meaning you can add a shop to it
, it loads quickly, and is super mobile responsive
So let me give you a tour of the website
and show you how it works and what I'll be covering in this tutorial
Okay, so let me show you a demo of how it works. So basically inside the website and let's turn on that builder
and I'm super excited 'cause it's really amazing
Basically, you've got all these different modules which are built in, you can drag it to these different sections on your website
And it saves a lot of time. You don't have to download anything additional
But I'm gonna show you how to create this image which is the Parallax Scrolling Background
and it's really cool
But something that is really more cool is that you can add in, you know, gradients
free background, a video background, or a slider-type background as well
So you can just set that very simply. You just have to upload the images
and I'll show you where to get amazing images for free as well
So then I'll show you how to add in this text. Really simple to edit. It's just like a Word Editor
So if you delete that text, change the text, and you can just click on Save
And basically you're done. I'll show you how to add in your buttons
All the text here for your Quote Section. It could be a Mission Statement
Show you how to add in this image here
As well as this Featured module
So you can just drag and drop it. And if you make a mistake, then you can just undo it.
You can also save the revision and and if you make any big mistake, then you can load the revision
so you don't have to start over again
And for these different sections, you can actually drag the whole entire section
So for example, this gallery, you can move it up here
above the service section, like that
So it could be About Me and then Gallery section like that
That's really up to you, how you want to change the layout of  the page. You can change the colors like that,
But with the Gallery section, it's really cool because you can showcase your work
And when people click on it, it opens up in a live box
So when people click on it, they can view your work like that
And I'll show you how to add in this video section
Which is really cool because when people are watching that video,
the background is darker
to focus attention on that video itself
Okay, scrolling down. I'll show you how to add this Blog section
And I'll show you how to add in Blog posts as well
How to add in text, images and video and also how to customize the widget area
And scrolling down. I'll show you how to add in this Parallax background with these icons
and this map as well, this Google Map
And then I'll show you how to customize the Footer section as well as add in the social media icons
And when people click on it, it scrolls them back up so that's a really good user experience
And if you scroll down like that, you'll see the header design is also a sticky so it stays up there
and it provides a great user experience
And what's really cool about it is that it's a one-page website
So people can click on the different sections and it will scroll them down
But you can create as many pages as you want
But if you know how to create the first page, then you'll know how to create any other page
For example, you could create a page like this and this has a really awesome Parallax features
So this is a layout which is actually built-in
to the theme but I'm actually gonna show you how to build the website step by step
So you have a good understanding and the skills how to build your website
that way, you can enjoy a lot more
If you want to check all the layouts, you can check the demo website
in the description so parallaxdemo.com
and let's go back to our homepage
You can also add in a shop as well but I'm not gonna be showing you how to
set that up in the tutorial
because that's gonna make this too long
but it's actually really easy because it uses a really simple plug-in called WooCommerce
so if you click on that
and that shows your product and people are able to buy from your store
And this website is actually super mobile responsive
So it'll scale down really well on all mobile devices, on tablets and things like that
As you can see, it looks really awesome
And that's basically it. So basically if you like what you see,
follow this tutorial and I'll show you how to make this website step by step
and you can have an amazing, clean, modern website by the end of today
So I'm gonna go through an overview of what we need to get started
Okay, so before we get started, I'm gonna go through exactly what you'll need
So the first thing that you'll need is a domain name and, basically, that is your web address
So for example
Google's domain name is google.com. Your one will be basically your name or your business name.com
And the second thing you'll need is hosting and hosting is basically where all your website files,
for example, your text and your content, your images, are stored
so the people all around the world can access it 24/7
So those two things are must-haves
and all websites that you see online have those two things
So if you have those two things, then you can skip ahead
The third thing that we'll need is to install WordPress
So WordPress is basically a content management system and, basically, all that means is
a platform where you can build your website and you don't need to know any code
And installing the theme, this is basically the drag and drop builder that we'll be using
and that is amazing
So I'm gonna go through the cost. So for the Domain Name, normally it would cost you around $13.00 a year
but I have a coupon code which will get you a domain name for $5.99 for a year
And for hosting, it would normally cost you around $10.00 a year
I mean $10.00 a month, sorry
$10.00 a month but I also have a discount and I think it would be $8.00 or something
So around $8.00 per month
And Install Wordpress, that is free
And installing the theme, it's also free
So the total costs to start, it's around $14.00. So $8.00 a month would be around $.30 a day
So that's really affordable and it's really cheap to get started
So if you have any questions, make sure to drop it down in the comments section
And we're gonna begin
So you can open up your browser and then either click the HostGator link in the description below
Or you could just type it in here. So type in "host..."
"...gator"
".com"
and then hit on Enter
So I've basically been using HostGator for about 5-6 years now
And they've got amazing live support so you can contact them if you have issues
and they're affordable, and they've got a Money Back Guarantee
So let's click on Get Started Now!
Normally, I recommend getting the Baby Plan because yu can host unlimited domains
For the Hatchling Plan, you can only have one single domain name
So with the Baby Plan, you can share it with your friends and family
And it's just the best option
So Business Plan is probably a bit too much for what you need. So we're gonna click on Sign Up Now
So I've got to enter in domain names. So you to sort of choose a domain name
and sometimes it might not be available
So you might have to try again. So Parallaxdemo and then click on the outside here
If it's available, it will give you a tick. If it's not, it'll become an X
So I normally recommend that you pick a .com extension because people type that in
to their browser because if you get like a .club, if people type in a .com, they won't reach your website
then you've lost some traffic
So I'm gonna scroll down and for the Domain Privacy Protection, we're gonna untick that
and then we're gonna scroll down here to the package type
and we're gonna select the Baby one
And I recommend choosing 12 months because you get a bigger discount
but you can month to month if you need but
Normally, if you're building a website, you're probably gonna have it for more than a month anyway
So just get a bigger discount. So I'm gonna go 12 months
For your username, you just need to type that in. Security PIN, type that in
And then all you need to do is to just fill in your billing information here
And your credit card details
You can also pay by PayPal as well and you'd be asked to long in to your PayPal account
after when you check out
So I'm gonna quickly fill those in
So after you've filled your details in, then you can scroll down
and you get the additional services
so we're gonna untick all these services because you probably don't need them at the moment
And if you followed my channel, I actually made videos to show you how you can set these up for free
using some plug-ins
So scroll down and you'll enter a coupon code here
So type in Hoganchua
H-O-G-A-N-C-H-U-A. And then click on Validate
So this basically gives you a bigger discount. So, as you see here,
you get a 35% discount, you also get a $5.99 domain name
So after when you've done that, you can click on "I've read the terms and services"
And then just click on Check Out Now!
And then after when you've checked out, then you'll either get a Paypal Login
we have to log into your account and pay the amount or you get a confirmation page that looks like this
And once you've got that confirmation, then we need to go back to our email
to check our details, to login to our CPanel to install WordPress
So log in to your email account and you should get a email, something like this:
HostGator - Your Account Information
So just click into that and what I want you to do is click on the Control Panel URL
And then you'll need to copy over your Username. Copy that to your clipboard.
And then also copy over your password
And basically paste your password and username into here
So I'm just gonna type mine in 'cause I've changed mine and then click on Log In
So once you've done that, then I want you to scroll down
Let's just close that for now
Scroll down
to software and services and click on Quick Install
wait for that to load
So you can either click on Wordpress here to install Wordpress or you can scroll down
and click on Install WordPress here
And I want you to click on Install Wordpress
And click on this Drop-down
and you should only have one domain. As you can see, I've got  a few domain names
So let me try to find that
Parallax Demo
And leave this one empty
For your admin email, type in your email address
For the Blog Title, so this is the title of your website
I'm just gonna name it "Logo" for now
and you can change that later on
So don't worry about that. Your admin username, so this is your Login Username
That's about it and click in Install Wordpress
Click on No Thanks on the web designer
And that will take about 30 seconds to install
the WordPress on your new website
Once that is done, then click on View Credentials
And let's click on the admin area. Sometimes when you've just bought your domain, it might not actually
be up yet because it takes time for HostGator to set it up on the back end
So hopefully it's up by now
Click on that. So luckily it's up for us
If it's not up yet, maybe take a 15-minute break or something. Worst case scenario
would be about 24 hours
But normally it's pretty fast
So copy over your password and your username
Let's type in my username here -oops
and paste in my password. Click on Log In
So congratulations, we've basically installed Wordpress and this is your WordPress Dashboard
So it looks a little bit overwhelming at first but it's really not. We can close a lot of these things
This is basically our dashboard to control everything
Okay, so let's go to visit our website and see how that looks
So our website is pretty plain now and it's got no content or anything
So it doesn't have the drag and drop builder because we haven't installed the thing
So we're gonna go back to our Dashboard and we're gonna configure some basic settings
So let's close these things to clear things up a little bit
Dismiss that. Close that, close that
close that and close that
So that's cleared up everything
Now what I want you to do is to go to Users
and click on your profile
So we just want to set in a new password, an easier password so you can remember
Click on Generate Password
and I'm gonna hide that
I'm basically gonna set in a new password.You don't have to but then you'll have to remember
this password
But they've emailed you this password anyway. So let's go to confirm that and update profile
So once that is done, I want you to go to settings and click on Permalinks
And I want you to click on Post Name. So basically what this does is it sets the
title of the post or the page in the URL
Because you don't want a URL structure that has "?p=123" because that doesn't explain anything
to your user and it's not good for search engines. Scroll down and save
So once you've done that, then I want you to go to Plug-ins and click on Plug-ins
And basically plug-ins are sort of application that enhances the functionality of your website
So for example, on your phone you've got apps like Pokemon GO, you got WhatsApp, Instagram
those are all Apps for phones but plug-ins is sort of for websites
So we're gonna deactivate these so select all
and deactivate first, apply
And I want you to delete them because it might conflict with our WordPress Builder theme
So select it again and delete
Apply and that's done
So we've basically configured the basic settings
Now I want you to click on Appearance and click on Themes
So we're gonna install the Ultra Theme by Themify
that includes the drag and drop builder
So if you look the video below, in the Youtube description,
there's a link there to download that theme
So click on that theme and download that to your computer
And you also got another link there which includes the content of the tutorial so it's got the images
and everything so you can follow along, step by step, and it'll be awesome
So download that on to your computer and it should look something like this
It should look like Themify Ultra.zip
If it automatically compresses into a folder, like that, then you need to right-click it
and compress it back into the zip file. So I don't want that anymore
this one will appear in a zip file and then you can double-click it or you can right-click it to
open it up and it basically includes all images that we'll be using
So once you've done that, then we're gonna go back to our website and we're gonna click on Add New
And then we're gonna click on Upload Theme
Click on Choose File
And then we're gonna go to Desktop and then I'm gonna find the files
and click on Open
So make sure that its a .zip file that you're uploading
Click on Install Now
So that's gonna take a minute or two. You can see the progress down here
but if you have issues installing that theme, then make sure to go to my website
www.hoganchua.com and then go to my FAQ
scroll down to Theme Installation and if you read these, it will probably help you out
If you still can't fix it, then make sure to leave a comment down below
so let's go back here
So once that is done you should get a "Theme Installed Successfully". And I want you to click on Activate
and that will basically activate the theme for us
So I want you to click on X. So don't import that, click on X
And once you've done that, you can dismiss this notice up here
So let's take a look at our website now. So visit our website
So this is the website with the theme installed. As you can see, it looks a lot better
But we're still gonna configure it so before we actually start building the website
So the first thing that we're gonna be doing is adding in some pages
So to do that, click on the Dashboard again
And then hover over Pages, click on Add New. Just click on that
And then I want you to delete the sample page first 'cause you don't want that. Just trash that
And click on Trash again
and delete permanently for that page
and click on Add New
and I want you to type in Home. This will be our Home Page and that's basically all you need to do
So click on Publish and if you want to add additional pages, this is where you add your pages
All you need to do is click on Add New, type in the title of your page and then Update
Now because this is a one-page website, I won't be showing how to build and add these new pages
but definitely you can add it on later on
So what we're gonna be doing now  is I want you to go to Appearance and then click on Menus
So I'm gonna be opening up a demo website that I built before so I can refer to it
So let's click on that
So basically for the Menu Name, I want you to type in Top Navigation. It doesn't matter what
name you set it as. It's just for you as a reference. Click on Create Menu
And then what I want you to do is if you have pages here and then you want to add it to your menu,
this is your menu
then you need to select it and add to menu
And that will appear here
Because this is the home page, we probably don't need that because
people know that when you click on the logo, it goes to the home page so it's sort of a waste of space
So I don't do that but what we're gonna be doing is setting in some custom links
the custom links are the links up here which will link to our different sections on our website
So what we're gonna be doing is clicking on that and I want you to copy your URL
You don't want anything after that "/" so you don't want wp or anything like that
you just want your website URL. Copy that
Select that and paste that in
Make sure that is correct and then when you've done that, type in "#" and then in lower case "about"
For your link text, this will be About and then click on Add to Menu
Once you've done that, then I want you to repeat the process. This one will be for Services
Link text will be Services so the name, it could be work or anything like that
It doesn't really matter but probably just follow along for now and then you can edit it later on
Paste it in again.The next part will be Gallery, I think
oops, forgot to add in a title
Next one will be blog
Add to Menu. Okay, close that
and next one will be Contact
and then link text will be Contact
Add to Menu
So once you've done that, then if you want to, when you create new pages, you want it to automatically add
into your Navigation Menu up here, then you can select this thing up here which I will
And for the theme location, you have to select Main Navigation so it will actually appear up here
And then click on Save Menu
So once you've done that, then I want you to go to visit website
and that will be your website and your menu up here
And if we go back to our Dashboard, I forgot to show you something that is really important
let's go back to our pages
And we created the home page, if you click on View
You'll see that it has /home/. The Home page is not actually something just like that with the plain
domain URL
You want to set it to this URL here. You don't want to have /home at all
So to do that, what I want you to do is to click on Customize
Sometimes it takes a few seconds to load
or automatically take you to Themify Options. Click on That
click on Static Front Page
and you want to set a Static Page and for your front page you want to select Home
Save and Publish and then close that
So for your Home page right now,  it would be just your Domain URL.com
so that's what you want
And only then will you be able to see the Themify Builder
So now what we're going to do is configure some the Themify Settings
and also to set in the header and also to set in the page layout
So what we're gonna do is go back to our Dashboard
Hover over Themify Ultra, click on Themify settings
and then the first I want you to do is scroll down
And for the google Fonts, I want you to select Show All Google Fonts
So it'll show more fonts that you could use for your website
So you can click on save
And once you've done that, then I want to click on Default Layouts
And default layouts is basically where you can set up the default page layouts for your posts or your pages
So what I would like to do is I like to right-click and visit our website
open it in a new tab so you could see what's going on
And then, for example, if you want to set the page layout, you would scroll down
This is where you set up your post layout
page layout is down here
So we've got the sidebar here and we've got a title here
we don't want that
So for the page sidebar option, we want no sidebar
and we want to hide the title on all the pages
And we don't want people leaving comments on our pages so we want to select that
and then click on Save
And then I can just refresh that
and then you'll see that it should be gone
So basically you've got a blank canvass to work on
and that's great
Now what we're gonna be doing is setting in the header
So let's go to Theme Settings here
And if you scroll down to the Theme Appearance here, then you can look at Header Design
and I want you to select the...I think it was the 9th option
So this is the header that we want. So let's select that and Save
And let's give that a little refresh
Okay, and that is basically the headerdesign that I want
Okay, so you've got a lot of options there but I want mine just nice and simple
Okay, you can disable the sticky header if you want to. So the sticky header is
for example, if you are scrolling down, the header actually stays there
I feel that's quite nice for good user experience
But that's up to you
So I'm gonna leave that. I'm gonna exclude the side tagline
the search form, and exclude the RSS
So this is the tagline
This is the RSS and this is the search
So we're gonna exclude that
And then what we're gonna do is save it
and give that a little refresh
Okay, looking awesome
Since we're here, I'm also gonna show you the settings for the footer
Please scroll down, just a little bit. You'll see the Footer Design
So I'm gonna exclude the site logo for the footer
and this is basically the back to top bottom. I like that and I'm gonna leave that there
And some of you might want to remove this thing here. So I'll show you how to do that
Now we're gonna scroll back down and should see Footer Text 1 and Footer Text 2
So basically this is the Footer Text 1, this is Footer Text 2
If you want to remove this, then all you need to do is to hit on Space
And then just click on Save
and that will remove that for you
And let's give that a little refresh
Okay, that's nice and simple, and done
Now what we're gonna be doing is adding in the social links for your footer
So to get the important things out of the way first. So let's go to Social Links here
and basically all you need to do is paste in your Profile URL. So I'm gonna quickly show you how to do that
Okay, so copy over your Facebook URL
Go back to the website, paste the Facebook one into there
Close that, get your Twitter one
Copy that, paste that into there
If you have Google Plus or if you don't, then you just leave it empty and it won't show up
But if you do, then you can just copy that over
uh, Youtube
And make sure you can subscribe to my channel. That will be awesome. So let's paste that into there
And let's say you have Instagram or you have something but it just doesn't show up here
So you can add that on. All you need to do is click on Add Link
And let's type "Instagram". And the link, you can just copy over your profile link
Paste that into there and you need to click on Insert Icon
And we've got all the icons here. Just click on Brand
Scroll down to Instagram
And once that is done, then that is done. So you can rearrange everything just by dragging and dropping
And that's pretty much it. So you can set up the icon color and the background color
But for this tutorial, we don't need to and just leave it empty for now
So let's click on Save and what you need to do now is go to Appearance
Go to Widgets
And then you'll need to go to Themify Social Links. You need to hold it and drag it
And you need to put it into Footer Social Widget and drop it into there
Because these are External Links, linking out to another website, I want to open the link in a new window
Okay, and click on Save
Once that is done, we will then visit our website. Hopefully, that would show up
Okay, Awesome. So go to our social links down and I'm just gonna quickly close these windows
Okay, so the next step is showing you how to change the colors and where you can add in your logo
and things like that
So we're gonna click on Customize here
And then wait for that to load a little bit
So we'll be in Themify Options. Click on Advanced for more options
And then basically to change a logo, all you need to do is click on Site Logo and Tag Line
So click on that. Click on Site Logo
If you have a logo already, you can click on Logo Image
and you can upload your image through here
So your logo has to be a .png file. That basically means it's a transparent file
And that is the best file to use
Now you also want to change the size, you can change the size here. And if you want to move the logo position,
Then you can select this option here
But for now, if you don't have a logo, then what you can do is just select Site Title
and enter in whatever site title you want
And then you can pick from the hundreds of different fonts here. So for example, I'm just gonna pick on
Open Sans
And I'm just gonna save it as maybe 16 pixels or, I don't know, maybe 24 pixels. Like that
and then I can change it to bold
And I might change the color to white
Because I'm gonna set the header color to a dark gray
So once you've done that, you can close that like that
and then if you want to edit the background color of your header section, then you'll need to click on Header
and that will be your Header Wrap
So the Header Wrap Color would be probably be a 3B3B
It's a nice, neutral color
Either go for a dark gray or white
color. So I'm gonna be going through some design tips in just a moment
Because a lot of people, you know, they go off to build their own website, they don't really follow the rest
of the tutorial where I give these tips and things like that and the website doesn't turn out that great
I know that because a lot of people send me the URL because they have problems with their website
and things like that. And it doesn't look good, okay
and if your website doesn't look good, then people are just gonna click off your website
in a second and basically there would be no point in building a website in the first place
So I'm gonna explain those tips in a second
If you noticed that on the demo website, we actually have a transparent header,
the reason why we set a dark gray header is because not all pages can be transparent
So you're gonna have to have to set a background color regardless
So what we're gonna dow now is we're gonna close that. And close that
So I'm gonna explain some basic design techniques
I'm not a designer but these are some of the really important tips that I've learned
when building my websites
So these are like tips that top websites such as Apple, Uber,Tesla, they all use these techniques
You could ignore these if you're a designer or something like that but if you're just beginning
then I recommend that you watch this part
So the first rule or the first tip is that I recommend sticking to one font family
For example, if you go www.apple.com or if you go to www.tesla.com,www.uber.com
they don't use many different fonts
So this is a Chrome Extension called WhatFont and you can basically see what font they are using
They don't have 3 or 4 different fonts. You don't need to make it really fancy by using a lot of fonts
Just stick to one especially if you're just starting out
And there are two different types of typefaces. One is called Sans Serif which is sort of the modern and
clean type
Where Serif is a little bit more traditional and it's really good for long reading or blogs and things like that
But if you just want to build  like a modern website, then I got some recommendations
So open Sans, Roboto or Lato and you can also try Railway, Montserrat and PT Sans
So the second tip is to choose just one main colour. Again, you don't need a lot of different colors to make
a website look great. As you can see, Apple, they just keep it nice and neutral. It looks really simple and nice
So what I recommmend is going to a website called Kalua....I think that's how you pronounce it
let's click on that
And also check out some color meanings
So colors are really important because each color represents a different sort of perception or feeling
You don't want to pick the wrong color for your business. So read up on that and choose the right color
I don't know what's going on here but click on Advanced and proceed to that website
So you can look at this website and let's say you pick a blue sort of theme, you pick a blue color
Click on that and you can click on Edit, sorry
and then you can get the color code here
So after when you've done that, then scroll down
So I recommend using a lot of neutral colors especially to separate your content
For example, if you go to Apple and go to one of their pages
For example this map page
And if you see that the white background and it separate the content  at the back with a gray background
Scroll down and you'll see that they separate the content white background with a light gray background
and also divide the line with the gray which is a neutral color
And you can also use the neutral color for your header sections and also your footer sections
And also anywhere that you don't know which color to use
And also make sure to separate your content. So use a lot of white space because white space
makes things look really simple and clean
and also use divider lines and background colors such as this dark gray
And then make sure to crop your images before you upload
I'll be showing you how to do that in the tutorial itself
But if you don't follow along, then this is the ideal size to crop your images at
So 1800X1000 for your hero images and hero images are basically the image that goes from here
to the other side
And then for your blog featured image, I recommend 1165 pixels times about 665 pixels
So your blog featured posts are, for example, scroll down here
So that's your featured post. So that's the size I recommend
And for your body font, you want it to be between 15 to 25 pixels
So as you can see, like a 28 pixel font size is a little bit too big and it doesn't look very professional
So what I recommend is around 16 pixels. That is the best size that I found
And for your line length, you want it to be between 45 to 90 characters across
So keep it easy to read
You don't want a line of text which is like this
it goes from there to there and it's just really hard to read
So you want to make sure that it is between 45 and 90
And when you're using headlines and subheadlines, make sure to define some sort of heirarchy
Using your font size and colors and also the boldness of the text
For example, this is a good example
but this is not so good
The reason why it's not so good is because when you're first looking at it, it sort of like you don't know which line
to focus on
Because they're both the same colorand they're both bold
You want it to be something like this. Bigger, bolder, and with a lighter color like this
It just looks a lot better
And then I recommend not using Pure Black
for your backgrounds or with your texts. So I recommend using dark gray instead
If you'll notice like when you go to any website, you'll notice that they don't use pure 100% black
It'll either be like dark gray or just a gray color. So if you go to Apple
This is not a black font, this is like a really dark gray font
This is not black either. It's really, really dark gray
because the reason is it's just too much contrast between the white and the black
And then the last one is to organize all your content
and all your images before you actually build your website and it will make things a lot easier
and I also recommend taking a look at websites that you like and forming your layout
So that's pretty much it and I'm basically gonna start building the website now
So I'm just gonna close all those
And I'll leave that one
And back to our Main Navigation section right here
So this will be the Main Navigation
And the menu container is basically where we can edit the menu location
So we're gonna set that to relative
So once you've set that to relative
then we're gonna make sure that it's sort of centered
So I'm gonna type in 3 Pixels and you'll see that it moves down
We're gonna minimize that and for the menu link,
We're gonna click on that and we're gonna make sure that the menu link is Open Sans as well
So Open Sans is the font that we're gonna be using on this entire website
But the funny thing is, by default, it's already Open Sans
So whatever font that you've chosen, then make sure to apply it here
And the size, I'm gonna set it to 16
And then for the Menu Link, I want to change the color to white
But you'll notice that it doesn't actually change the color. So just set it to white regardless
Because we need to set the Menu Active Link for these colors here
Now for the Menu Link Hover, I want you to set this to sort of a light gray
So it will be E6E6E6
So this keeps things really professional. So when you hover over it, this link will actually be white
I'm gonna show you in a second
So this is the Menu Active Link. The reason why it is the active link is because
We're actually on the Home Page at the moment and all these links are actually on the Home Page
So I'm not sure if you know what I mean but, for example, if
If I'm on the Mac page, then the active link color right now is gray
So if we go back here and we change the menu active link color to white,
Then it'll be white. And when you hover over that, it'll show up as a light gray
For your Menu Active Link Hover, we want to keep it consistent
So make sure it's the same as the Menu Link Hover
So copy that
to..oops. To here
and paste that in there
And once that is done, then that is all good
For the drop down container, that basically means the settings
for the drop down box. So you can set the styling for that as well
Now the next thing we're gonna be setting is the footer section
For the Footer, we can click on the Footer and it's pretty nice having a white footer already
So you can keep it that way if you want to
But for this tutorial specifically, I'm gonna change it to dark gray
So I'm gonna change it to 2929
And 2929 is a little bit darker than our header
Now what we're gonna be doing is setting that and then going to Footer Font
And changing the footer font to white so we can actually see the text
And this is a link so we'll need to click on Footer Link
And also change that to white. And that looks pretty good
And that's about it. You've also got other  settings here but I'm not gonna play around with those
Everything looks good and we're gonna click on Save
Close it and that's pretty much it. So the next part is really important. It's the first row
where we'll be setting in our hero image
The Parallax Hero Image that you see here
And this is really important because this is basically the signage for your business
You want to make sure that it is clean and also the image is not blurry
And this is probably the most important part
So let's go and find our images first
So I've got some really good places where you can get images
And you can go to www.unsplash.com
And you also got another place called www.stocksnap.io and another place called www.pixabay.com
So all these 3 places, you can get the images from here and you can use it for free without
crediting the author of the image
or anything like taht or even for commercial purposes
So this is a really popular website and  you can use these ones too if you can't find any images
If you still can't find any images, then I recommend checking out www.photogene.net
Now this is where you can get images for a dollar and they basically have a bigger library
So choosing the right image is really important because you don't want to misrepresent your business
or your service
So for example, if you go to a restaurant or something and you see a salad. Like a picture of a salad, sorry
and when you order it and when you get that salad, it looks nothing like the one in the picture
So you're not meeting the customer's expectation and that's not a good at all
So you want to pick a correct image that represents your business
So for example, I'm gonna show you how to download it
and then we're gonna crop it
So let's say you like this image here. We're gonna click on that
All you need to do is click on Download and that should load up
Really awesome image. Right click and basically save that image on to your computer
Create a folder and make sure that everything's organized
But I've already got the images and you can basically download the images to follow along the tutorial
It's in the Youtube description
So once you've got that image on your computer, then I'm gonna close all these
And then we're gonna go to a website called www.fotor.com
So this is where we're gonna edit our images and I like this because you're able to add text
to it, you're able to enhance the image. The default WordPress one, you're not able to do that
So after when you've downloaded it, click on Open and I wanna go to my Contents folder
And this is the image that I've chosen so if you've downloaded to Contents, select your image uncropped
Open
And then close that. And you'll notice that the image here is really, really big
I don't want a really big image because it's gonna take too long to load
and people are gonna click off your website
if it takes too long to load
So click on Re-size
And click on the lock to make sure everything changes proportionately
And I want you to type 1800 and that's a good size
Then go to Crop
Type in 1800 again
And type in about 1000 in height
so I found that a good height for the hero image
And then I'm gonna move it to wherever I want. I'm gonna put it probably just above that person's head
And click on Apply. And afterwards when you've done that, you can click on Enhance to enhance the image
Or you can edit the basic settings, add text, or things like that but I think the image is good already
So I'm gonna save it
I normally say this is normal quality because you don't need a big image
And basically save that to your computer
And after when you've done that, then we can go back to your website and we can basically turn on the builder
So after when we've turn on the builder, then this is basically a row
we're gonna be adding in a row background. So click on the Row Options
And we're gonna change the row width to full width so it goes all the way across. From here to there
Click on Styling
And for the Background Type, we're gonna select image
But you can also select gradients, you can also add a video. So you can upload your video here
And if you want to know where I get my videos from, check out my website and go to my blog post
And click on my ultimate list for building WordPress websites
And I'll list everything that I used
So let's go back here and you can also add in a slider as well
And to do that, make sure to also set the image size to original and set it to full cover
if you do add a background slider
And we're gonna go to Image
and then we're gonna go to Browse Library. Don't click on Upload because
It will automatically resize your image and will make it really blurry
So upload that, select files and we're gonna upload the Hero image
this one here, 1800x1000
and open
And when you've done that, insert file URL
and it should show up. If it doesn't show up, then what I recommend is to just click on Save
or to refresh your page and redo it
Andonce you've done that, then for the background mode select Parallax Scrolling
And if you don't want the Parallax Scrolling feature, another popular option is the full cover option
which basically means that image is just static
it will bascially just stay there
And that's a popular option
For the background position, you want to select Set as Center
And then after when you've done that, then we can click on Save
So as you can see, there's a little gap up here and we want to close that gap
So let's click on Save first and let's close the builder
To do that, we need to go to Edit Page
And I want you to scroll down to Themify Custom Panel
And for the content width, you want to set full width
So you'll need to do this if you want to set a hero image on all your pages
So update that
And then click on View Page
And hopefully that gap will be gone
And now what we need to do is to add some text and buttons in there
So turn on the Builder
And then what we're gonna be doing is dragging in a text module
And then you can type in your title. So I'm gonna type in Parallax
And then I want you to highlight that text and click on Toggle Toolbar
So i want you to select Heading 1 for this and you can preview that to see what that sort of looks like
Again, that looks pretty good. And you can sort of set the heading 1 style in the actual module itself
in the text module itself
You can go to styling and then you can click on the Heading tab
Click on that
And you can actually set the font color and things like that here
What that basically does is it'll edit the heading 1 for this particular module only
So sometimes it's convenient but I recommend setting it for the whole entire website
universally because it is more convenient and it will save you more time later on
So I'm just gonna delete that and leave that for now
And then we're gonna set it in about 2 minutes
So we're just gonna click on Save for now
And then what I want you to do is to drop in a text module
And then this will be your subheadline. So Infinite......
....Possibilities
And for this one, I'm gonna go to Styling
And for the Font, I'm gonna set the font size to 24 pixels
ANd you can go to Text to sort of preview that
And that's what I want you to do for now and then click on Save
Next part will be adding in your button. Dop in a Button module
The text, we're gonna type in Begin. And for your link, so wherever you link your button to
Then this is where you paste in your link. So for example, I want to link it to Apple
I'm just gonna copy that link
Paste that link into there
And then if it's an external link, then I suggest that you select Open Link in a New Tab
So I might just do that and give it a little preview
So you've got your color optionshere, you've got your style, the button options here
But I don't really like the color options here so I'm gonna show you how to style it properly
So go to Styling and click on Button Link here
And what we're gonna be doing is changing the button so it looks like this
So it's an outline, a transparent one
So for the Background color, you want to set that to transparent
So this is basically the transparent meter thing. So drag it down to zero
For the Background Hover, so this is the color when you hover over it. So this is white
So change that to white
For the link color,
this will bascially be white. Like that
Anfd for the color hover, this would basically be gray. So when you hover over it, it turns gray, that link
So go back here and the color that we're gonna set is 3B3B
And for the Decoration, keep that as is
So as you can see, you don't have a border yet so you need to scroll down
And for your border, you want it to have a white border
And you also want to set the thickness of the border to 2 pixels and there you go. Looking great, click on Save
So now the cool part. Let's click on the Row Options
Click on Styling. Scroll down
And I want to set the font color to white
So what you'll see now is everything inside the row will turn white. So this is just the more efficient way
of doing things and that's how I do it
So I recommend doing it that way. And then you want to align everything in the middle so we just align everything
in the center like that
Now we're gonna add some spacing on the top and the bottom
To do that, we've basically got the Padding and we've got the Margin
So both of them add space but they're a little bit different
So imagine that there is an invisible box around this image
And margin basically adds space inside that invisible box. So if we deselect that and we set in 5% here
The it'll add space outside the invisible box because you don't want space
So make sure to delete that
And deselect this one and then put in 17.5%
padding to the top
So it adds space outside the invisible box and that's what you want
And for the bottom, 17.5% as well
I use percentages because it is more mobile responsive
it resizes better than using pixels
And once you've done that, then we can click on Save
Now the next part, we're gonna click on Save. We're gonna click on Close
So let's set the Heading 1 Font universally. So click on Customize
And click on Headings
So this is the heading 1 and if you need to double-check, you can right-click and inspect that
And you should see Heading 1 there
So what I want you do to is click on this and change the size to 80 pixels or whatever you want
And change it to the font that you selected. What I want is Open Sans
And I also want to change the font width to Bold to make it stand out a little bit more and, like I said,
it gives it a little bit more heirarchy. For example, this is most important
second most important , third most important. And that is basically it. And you can click on Save
and then you can close it
So what I want you to do now is to turn on the builder
And I want to move this Infinite Possibilities a little bit
So I want you to double-click on the text module. Click on Styling
And then for the margin, deselect that and you can actually type in -2%
and that will basically move it up. So - is the space in between
Click on Save
Okay, that's looking pretty good. Now I'll show you how to set the transparent header
So for every page that you want to set as transparent, you need to go to Edit Page
And then scroll down to the Themify Custom Panel
Click on Page Appearance
Scroll down and then for teh header background type, select transparent header
You can also edit the header color if you need to
So after, click on Update
And then we're gonna view the page
So that's a really nice transparent header now and I also have a really important tip:
Sometimes you might have chosen an image that is sort of a different color and you won't be able to
to see your menu items up here
So one way of making it stand out more is actually adding in an overlay color
So you can go to the Row Options
And go to Styling. For the Row Overlay, you can set in a more darker color. So set it to black
Change the opacity and, as you can see, your whites will stand out more
Because if you set in a overlay color and it's darker, it will stand out more
so your menu item will stand out a lot more
So that's one way of doing it
But the best way I recommend is using a gradient because with a gradient, you're able to set it
just for the top part. Make it darker just for the top part
So what we're gonna do is we're going to click on this black thing here
Click on that
And then drag the opacity down to about 25%. And then click on this white one here
And then drag it up to about 20%
And then once you've done that, then drag the opacity here down to 0
So what that does is basically it adds the darker shade up here only
So for example, it goes darker like that
So imagine that it's darker up there then it will make your whites stand out more
So let's click on Save
Save that
And close that
And that's pretty much it and everything looks great
And one more thing I want to show you is you can actually add in animation effects
So if you double-click on that, you've got your animation effects here
And what I recommend is just keeping it really simple
So for example, we just set in like a fade in
THis might be just a 1-second delay
And then I might set in another fade in which will be a 1.5-second delay
1.5-second delay
And the bottom might be a 2-seconds delay
And that actually gives it a cool effect when people actually land on your website
Set that to 2 and save
Save it. Close it
Okay. 1,2,3. Amazing. So Congratulations!
That is probably the hardest part of the tutorial and we're gonna be moving to the next part: the Quote section
So we're gonna add in a quote
So let's turn on the Builder again
And I want to set the background color to a dark gray
So click on the Row Options and click on Styling
For the Background color, set it to 2929. That makes it dark. And then click on Save
Now I want you to drop in a Text Module
And I'm just gonna go to my demo website
and copy over that quote
So copy that to your clipboard. Go back here
And you don't want to just paste that in. Anytime when you paste in
pasting in something in from another website, try to paste it in as plain text. So click on this icon here
Close that. And then you paste it in
So that will remove any styling on that text
So once you've done that, then I want you to the Styling tab
And for the font, because it is a quote, I might set it to a different font so PT Serif
And then we can change the Font Size to about 24 pixels
And then you can give that a little preview
I'm just gonna change that color to white here. Okay, that looks good
Now I also want to align it to the center. Like that
And thenI want to make this text a little bit smaller right here
So waht I'll do is I'm gonna change that to a Heading 6
And then what I'm gonna do is go to Styling
and go to Heading
And I'm gonna set the Heading 6 here
Because I'm probably not using it this much on the website
and this is just a little bit more convenient sometimes
so PT Serif
And you want to change the Font Size to 14 pixels which makes it a little bit smaller
Give that a little preview, see if that works
Okay, that looks pretty good and that's it. Click on Save
And all we need to do is add some spacing. So to do that, I just go to the Row Options. Go to Styling
Untick this and for the padding I want to set it to about 5% to the top
4% to the bottom and that is pretty good
And obviously you can add some animation if you want to. And click on Save
So in this section, you can put in a  customer quote, what you do, your mission statement
or anything like that
We're gonna move on to the next part. So the next part, we're gonna add a little About Me Section
And to do that, we need to set the column to this one here, the last one
Click on that. So you basically have one small column here and one big column
So this column, we're gonna drag in an image module. Drop that in there
And for the image URL, you want to click on Browse Library
Upload files, select files
and then you can put in your image but if you have been following along, then you can download this image here
Stare into the Distance. Click on Open
And then all you need to do is Insert File URL
And give that a little preview
And you've got a lot of settings here but I don't think it's really necessary so we're just gonna click on Save
And then the next part, we're gonna drop in a text module here
Basically, we're gonna type in About Me and then we're gonna change that to Heading 2
and then we're gonna click on Save. I'm not gonna set it here because we're gonna be using it quite often so
I want to set it universally
Set that in here and drop in a text module below here
You can type in about yourself or about your company so I'm just gonna copy the text over from my demo
And then paste as plain text
drop it in there like that
Give that a preview to see if that's what you want
And that's done, really simple. Click on Save
What you can do is you can also change the column width just by pulling it like that
So that is really useful and that looks about good to me
And what you can do is also hover over here
and select the column alignment. So basically it will align the image and  the text on the right hand side here
to the center
So that looks really nice
So once you've done that, then what I'm gonna do is click on Save for now
And let's go and edit the Heading 2 tag. I will also show you where you can edit the  body, text, fonts
and stuff like that
So close that and we want to go to Customize
And what I want to do is
I want to go to Headings. This is the heading 2 tag
Make sure that is open sans or whatever your default font is
And also I'm gonna change the color to about a 4D4D which is sort of a dark gray
And that makes it a bit lighter and I like that a bit more
And I also want to change the font width to I think 500. That looks about good
And then we minimize that. And if you want to change the body font, click on Body
Body Font and then change it to whatever font that you've chosen. By default, it's already in Open Sans
And make sure to don't change it to any font bigger than 25 pixels. I recommend 16
But by default, it's already 16 anyway
and then we can also change the color
but I find a dark gray color really nice and professional
But if you do want to change,  maybe change it to sort of like a 4D4D. Or something like that
Which is also a dark gray but I'm gonna keep it as default. That looks pretty nice
And then click on Save and Publish. Close that
And then we're gonna scroll down. We're gonna turn on the builder again
And we're gonna add in some padding and I also got something cool to show you
So let's add some padding first. So Options
Deselect that
And then for the padding, I want to set around 6% for the top and around 4% for the bottom
and then click on Save
And a really cool thing is, let's say you made a mistake, then you can actually undo things
And you can also redo it as well and you can also save this revision
So for example, your Microsoft Word can save it, well it's the same for this builder
You can click on Save Revision
Add a comment to it, About, and click on OK
And if you have any troubles, then you can Load Revision
So after when we've done that, we can add the services section
So we're gonna click on the Row Options and what we want to do is set in a background color
Now, we want to set in a light gray so F6F6F6
And that's a really nice gray to separate the content, to make things professional
Once you've done that, then click on Save
And we're gonne drop in a title. So text
This one will be services or it could be work or anythingthat you want.
Set it to heading 2 and the click on Save
So it's very convenient that you set it in the heading 2 already so you don't have to do it again
And then what we need to do is drop in a Feature module
Put over that and for the feature title, you're gonna type in your service or whatever
you want. So for example, it might be web design
Andn then here, you want to paste in a little description
So I'm gonna copy over some text here. Copy that
Select and paste this text
paste that in there
and then scroll down and you can give it a preview
and that's what it probably looks like. But for the layout, you want to select this one. The last one
And then we can add in an icon. Or you can add in an image. that's up to you
But I think icon is really good for this section
So for your icon, click on Insert Icon
And I want to look for a paintbrush. So scroll down. It starts with P
Okay, Paintbrush
And then you can give that a preview
Okay, I might change the color of the icon
to a light gray. 949494. Which looks great. Preview
And you can add a circle around it if you want to by setting in a percentage to about 2%
For example, 100% change the color to the same one
Give that a preview
So you can also do that if you want to as well. So I'm gonna delete that, actually
change the icon to medium. And what you might also want to do is to link that services to another page
where maybe you can describe a little more about your services
So for example, I'm just gonna copy in this URL here
paste it into there
And if you give that a preview, you'll see that the link changes to red
If you want to change the link color, which I recommend that you do, go to Stylinh
And scroll down to Link
For the link color, I might set it to 4D4D
like that, which looks good
And for the color hover, it is basically when you hover over that link
then you can change the color. I might change that to 3B3B and for the text decoration, set that to none
And then click on Save
And hopefully that's all good
That's all good and the next step is really simple
Hover over Feature and let's say you want to have 3 feature modules. Select the 3 columns
and hover here on the right. Duplicate
Duplicate again
and all you need to do is drag it
and drop it to the section that you want
And to change it, just double click it
And then you can change the title and text as well as the icons
and then click on Save
So I'm just gonna quickly do that
Okay, that's done. Now you need to add some padding. So click on the Row Options
Go to Styling and make sure everything is in the center
align that
And for the padding, I want to set around 5% to the top and about 2% to the bottom
And then click on Save
Now the next part we're gonna be doing is the Gallery section. It's really simple
First of all, drop in a text module, type in Gallery
Set this to heading 2 and click on Save
So for your Gallery, there are basically 3 options: You can use the gallery module which I'll be using
or a Image module, or a slider module
So for a slider, you'll have a slider and people can click on that and it'll open up in a light box as well
It's pretty simple to use but I just like the gallery options 'cause it's just nice and simple and it works well
So drop that in
And for the gallery layout, select Grid
Insert Gallery
And then I want you to upload files, select files
and then after that, I want to click on Gallery
So these are the images that I have cropped already to about 1000X666
So there are 6 images and I recommend cropping them all to the same size
So that everything is consistent and professional
Open that and it should take a minute or two to upload
So when that is done, click Add to Gallery
and then Update Gallery
And then you can preview that to see what that sort of looks like
So you've got 6 images and you can select these to display the image title
so give that a preview
You can do that if you want
But the important part is setting the Thumbnail Width
So for the Thumbnail width, you want to divide it by 2 of the original width
So for example, 1000 divided by 2 which equals 500
And you want to make sure to divide by 2 for the height as well
So that makes sure everything is resized proportionately
And won't appear blurry so 666 divided by 2 would be about 333
And after when you've done that, you can preview that
So it can be divided by 3 or divided by 4 depending on what you want
but it has to be the same. If you divide this by 3, then you're gonna divide the height by 3 as well
And for the columns, because we've got 6 images, I want to set 3 columns
3 images per column, sorry
and that will look really nice
And once you've done that, I'm just gonna deselect that actually
then you can just click on Save pretty much
and that is done
And then we're gonna go to the Row, add some padding
Styling, align everything to the center
Scroll down to Padding
Deselect that and we're gonna set padding to about 5% as well to the top
2% to the bottom
and then click on Save
So let's click on Save and let's see if that opens up in a light box
close that
And let's click on a Image. Okay, that works well
and that's really nice. And you can add this Gallery module to any page that you want
So let's turn on the Builder and let's move on to the next section. So that will be our Video
So for the video part, I'm gonna upload a background
that you see here
a Parallax background
So let's go her. Go to Row Options and go to Styling
and for the Background Image, I want to browse library
Upload files, select files
And go to the content folder that you've downloaded. So click on Background Video
Background for Youtube Video
Open
and then click on Insert File URL
And once that is done, then set it to Parallax Scrolling
And for the Background Position, maybe set to center
And what I want to do is add a Overlay Color
So I want to set this to black and then change the opacity down to about 20% or so
And for the Hover Color, I want to set that to a little bit darker. So I want to set the opacity to about 65 or 70%
So it goes darker when people hover over it
So if you just save that, then when you hover over it, it goes darker
So when people are viewing the video, the focus is on the video
not focusing on the background
The background will look great when you're scrolling but when you're watching the video,
the it'll be focused on the video
So let's drop a video module in there
And this is so easy. You just need to grab a video so just go to a Youtube Video
This is the video I found, it's pretty cool
Copy the URL and all you need to do is to just paste it in here
And then all you need to do is click on Save
And that is done
And we probably need to add some padding to the top and bottom as well
So go to your Row Options, go to Styling
For your Padding, deselect that and we're gonna set about 6% to the top this time and we want to set
about 3% to the bottom
Click on Save
Click on Save again and then we can save it
So let's have a little preview. Okay
When you hover it, it goes darker. And let's see if that video works
Okay, so that's awesome and that's really simple. So let's pause that video
and scroll down. Now the next part will be the Blog section here
But before we can actually add in a blog section is we need to add in the blog post itself
So right now, I'm gonna show you how to do that. How to add in a Blog Post
How to addin images and video as well
So what we need to do is we need to go to our Dashboard
So go to our Dashboard
And hover over Post. Click on it
And then we're gonna delete the sample post so trash that first
And click on Trash and delete that
So to add in a blog post, click on Add New
And then all you need to do is basically just add in a title
"Inspire the World". And you can paste in your text here. Your Blog Post
I'm just gonna grabe some text
So I'm just gonna grab this text here
Copy that
And I'm gonna paste it here as plain text
So if you want to link it to another page or another website
Highlight the text, click on Insert Link
And you can paste in the URL here
Or if it's another page or post, you can type in the title
but what I'd like to do is click on the Options here
And for example, you want it to link to this website here, copy the link
paste it into there and you can open link in a new tab
But if you have pages and posts already on your website, then you can just select that from here
That's pretty cool
So Add Link
And to add in a Image, we're gonna hit enter there and we're gonna paste in the image between here
So all you need to do is click on Add Media
And we can just upload files, select files
And click on the Blog folder
And for this one, we're gonna select this one: Blog 3
Body Image
And I've cropped this image to 1165X775
Click that Image and open
And then all you need to do is click on Insert to Post
And that image will appear, so it's a really small image but you can edit that by clicking on Edit
Changing the size to Full Size
And if you want it aligned to the center, click on Center. Update
Done. Super Easy. And if you want to resize it, you can just sort of drag it. Like that
And a video is even easier. Click on Enter
And let's say we got a new video
this one here
You can copy that URL
And basically just paste URL here. So in about a second, it will load up
Super, super easy
And that's pretty much all you need to know. Now we need to add in a category
So to do that, click on Add Category
and this oen might be travel, so type in Travel
And click on Add New
And for your tags, it might be, um, Peru
and this might be the place that you're traveling to
or something like that
and then you can separate it by columns, I mean comma
and click on Add
and that will add in your tags.Tags will basically help people who are trying to search for a specific blog post
and it will help for search engines as well
Now we want to set in a Featured Image
The featured image is something like this but this is the image in the blog post
So you can set it to the same one but we're gonna set it to a new one
So set that in
Upload files, select files
And we're gonna select this one, Blog 3 Featured Image
Click on Open. So I've cropped the image to 1165X665
So that's the ideal crop size
and you should crop it to that size as well
So set that in
And then pretty much you can publish that
And that is done and we can view that blog post
and we can have a look at what it looks like
So that's pretty much it and that's done and what I want to show you is how to actually sort of style it
So if you want to change some of these fonts and you want to change the color or if you want to change
the style so it just shows the date
And also show you where you can customize the widget area here as well
But before that, I'm gonna add 2 more blog posts
So you can actually hover over here and click on Post
So that's a shortcut. So I'm gonna completely add those in
So I've added it in my  last blog post. Now,  what I'm going to show you is how to edit this post date thing
because that's what a lot of people asked me to do and it's really simple. So you can go to Dashboard
And then hover over Themify Ultra
click on Themify Settings
And then you want to click on Default Layouts
And then scroll down and then go to Default Single Post Layout
And you'll see the post date thing. You can either hide the date or you can display it just as a in-line text
instead of that circle style
So you can select that
and you can save it
And let's go back to our  blog post so you can click on All Posts here
Ad let's go to preview that
and that would be disappeared. So you got your date like that
And yeah, let's show you how to edit it. So go to Customize
And once that is loaded up, then we can go to Post because this is a blog post. So click on Post
And basically this is a Post title. So we can change the Post Title here
So click on Post Title and we're gonna change the color to maybe a 3B3B-oops
'cause you don't want to select the black one, it's too dark
and that would be pretty good. It's a really dark gray and that looks great. And you can edit the size
and everything taht you want.This is the Post Meta and you can edit the Post Meta here
For the Post Date, you can click on Post Date
And what you can do is probably you might align it to the center
Click on taht and it will align to the center. You can change the size as well
to size 14. Like that
and that looks great
And what else you want to know? You probably might want to know how to edit the styling for the sidebar here
And that is also really easy
So that is what we call the sidebar here
So click on that and you're able to edit all the sidebar fonts and also the colors
And if you're scrolling down, you've also got the comments section
If you want to change the comment button color, you'll need to click on Forms
and this will be the Form Button and you can change the color here
So you've changed the color. I'm gonna keep it as defaut
And then that's about it. So I'm gonna save it
And publish and close it
And now what I'm about to show you is the widget area
So let's go to our Dashboard here
And then we can go to Appearance. Click on Widgets
And then what we can do is arrange the sidebar
So I'm actually gonna open this up in a new tab so you can see what is happening
So click on View
So if you look at the sidebar here, you've got the Search, Recent Posts, Recent Comments, and as you can see
and then what we're gonna do is I'm gonna remove these. Delete that
Delete the recent comment. You can keep those if you want to but I want to delete it
So I'm gonna delete that, I'm gonan delete the search and the categories there
And I'm gonna put in Featured Posts
So drag it up and put it in the middle
And you can just change the title to maybe Popular Posts
You can also set the thumbnail as well by selecting this
And then you've got a range of options here. Click on Save
And then that is done. So let's preview that
And see if that's changed
So taht is pretty good. So you can add a lot of different widgets here
And I'll probably be uploading more videos on how to customize this section here, for example
how to add an image, how to add in your Instagram feed
Facebook stuff and Twitter and things like
So make sure to subscribe for more videos but I;m gonna leave it at that
So now what we're gonna do is we're gonna go back here
and make sure you save that
And thenw we're gonna go to visit our website
And we're gonna scroll down to the bottom section and we're gonna add in our Blog Post finally
So we're gonna turn on the Builder
And then what we want to do is drop in a text module
And we want to type in Blog
Or you can type in Latest News. Whatever you want
And then we're gonna set a heading 2 tag
Save it
And then to show your blog post, we can drop in a post module just underneath
So you can show this on any page that you like. So the Post Layout, if you preview that
this is the current post layout
I want to select this one. This one is called I think it's the Grid 3 Layout. So as you can see
And you can set the specific categories you want to show, limit the number of posts but I want to display
none for the content
Excerpt is basically a littler summary of it. Give that a preview
And if that's what you like, you can keep it like that
I want to get rid of the post meta which is this section here
And you can hide that
And basically click on Yes
So that looks about great. Now let's go to the Row and let's align everything to the center
And let's add some padding, deselect that, and the padding we're gonna set here is about
5% to the top and 2% to the bottom
And that should be good. So click on Save
And that's looking good and the next part we're gonna be doing is the Contact section
So we're gonna be adding in a Parallax Background as well. So if you go to our Home Page and demo site
Scroll down,  a Parallax Background and some icons
So go to Row Options and go to Styling, Background Image, click on Browse library
Upload files, select files
And then after when you've done that, go back to the content folder
And select contact background
Click on Open and Insert File URL
Select to Parallax Scrolling, select the background position to set as center
And let's add in some padding now, so we're gonna set some padding
Deselect that and we're gonna change that to about 10% to the top, 10% to the bottom so we can see
more of that image
Scroll down and that's about it. We also want to set our overlay color
So the text in here is a little bit more visible. So I want to change that to a little bit darker
So change it to black here and then change the opacity to about 10% or something or 20%
And for the hover overlay color, you want to make a little bit darker so maybe about 30% or 35%
and then click on Save
and then you can drop in a text module
And this will be Contact
Heading 2
Save it
and then let's drop in the icon module. Icon would be dropped like that
And the icon, we're gonna put in the address first. So we're gonna select Icon
and let's look for a map. So M
Scroll down and that one looks okay
We might select the white map and for the label, we might select Melbourne, Australia
Click on Preview and that looks about great
And then you can link it up if you want to. You can also change the button style but I think that's pretty decent
So we're gonna click on Save
And really easy. Again, you just need to set in how many columns that you want
So 3. And duplicate these ones. So duplicate it
And duplicate it again
And basically arrange it here and then basically you can just double click and change it
So this one will be an e-mail address so I'm looking for a E. Envelop
this one here
Type in my e-mail
Change the color, maybe a green one
Click on Save and like your last, it will be a phone number. We might change that to orange
Insert Icon and let's look for a P
So select the phone maybe and type in your phone number
and then click on Save
And now all we need to do is align everything to the center
Row Options, Styling
and let's change the font to be white
And then align it to the center. Save it
And that is complete. So we can save that
And if you want to drop a map module, then all you need to do is drop in map underneath
And set in an address. It can be your street or anything like that
I might just type in Hawaii. And for your Zoom, let's zoom it to 3
You might want to zoom it a little bit closer and as you can see, there's something that went wrong
And basically you need to set in an API. I'm gonna quickly show you how to do that
But before we do, I'm gonna set the height to about 400
and I'm gonna save it and then I'm also going to set the options here
to Full Width so the map goes all the way across. So save that
And save that
And close it
So the map isn't shoing right now. Don't worry about that. Let's go to our Dashboard
Go to Themify Ultra, Themify Settings
And then waht you need to do is go to Google Map and you need to get an API key
So click on Generate API Key and basically you need to log in to your Google account
And then you need to click on Get a Key
And it might take a few minutes, maybe. So we can create a new project
And enable
Once that is done, it says that you're ready. Then all you need to do is copy the code
So copy that API code
And you can close that now and go back here and paste that into there
Click on Save and, pretty much, it should work. So let's visit our website
And let's scroll down to the bottom
And you should see the map work like that. And that is pretty good
So, okay - I don't know why that went Bold
But if you do want to change the thickness of that font, then we can go back to Customize
And that was a Grid 3 if you remember correctly and we can edit that font. So don't worry about that
So let's go to.....Scroll here, Post
And that was a Grid 3 so click on the Grid 3 Post Title
Scroll down and you want to set the font weight to Normal
and then that would change. And you can also change the size here as well
Save
Close that
And that is pretty much complete. Our website is pretty much complete
So there are still a little few things I want to show you which is really important
One of them is the Sticky Header. So if you go to the Blog Post
and you should see the sticky header here as white. You don't want that because you can't see it
So if you go to Customize
And then you can go to Sticky Header
You can basically set the background color
So scrolling down. You want to change the color to 3B3B. And click here
And bascially, the color will stay the same
But I like to add a little bit of transparency
Change it to about 75% or something like that. That looks pretty good
And then we can click on Save
Now once that is done, we can close that. Then we can go back to our home page
and we're gonna set in the Row Anchors
So the row anchors are basically when you click on the Menu Link, it will scroll down
to the specific section you set it to
To do taht, we can turn on the Builder
And basically, we need to set the name for the row
So click on the Row Options and for your Row Anchor, you need to name this section About
because we've named the Menu About to be About as well so when you click on About,
it will scroll down to About
But you dont want the hashtag # in front of it
Click on Save
Now the next one will be Services, Gallery, Blog, and Contact
So click on the Row Options here
this one will be services and it is really important that it is exactly the same
As the one that you set in. Services, and the next one will be Gallary
Save it
Next one will be Blog. Options
And lucky last will be Contact
Scroll down to Contact
And save that
Save it
And let's close it. And before you try anything, let's refersh the page first
So let's go back here and if you click on the About,
then it should scroll down to about, and as you can see the URL here is #about
Services, it will scroll to services and it will change
Gallery, Blog, Contact
Now one thing is if we actually resize the screen. Resize it, resize it
You'll see that the text is not as responsive and that's not great. And the background doesn't look great either
So I'll show you how to fix that quickly in about 2 minutes
So I'm gonna resize that back. Go to Customize
And then what you want to do is you want to click on Styling, Mobile
So click on that, click on Headings
Heading 1 font which is this heading 1 font
And you want to change the size to 50. So what that does is
when people are on a mobile, then the title of the heading 1 will be 50 pixels
But if they're on tablet, then the size will still be 80. Desktop will be 80
But when it's on mobile,  then it will be changed to 50. So you can take a look at anything else on your website
that needs changing
and you can edit it specifically for mobile devices. Alright
And that's pretty much it. Save it
close it
And now let's fix the background. So this is really cool
So let's go to turn the Builder
And then all we need to do is duplicate the row
Duplicate the entire first row. So Duplicate
And I want you to scroll down to the second one, the duplicate one, click on Row Options
Go to Styling and I want you to change the background mode to Full Cover
And basically what that does is that full cover is a bit more responsive and when it resizes,
it looks nicer as you'll see in just a moment
And what we'll also do is change the padding
to about 25% to the top
and also 10% for the bottom
So do that and the most important part is setting the visibility
So you want this row to be visible on mobile devices only
You don't want it to be visible on tablet and desktop so hide it. Click both that and save
Now, let's go back to our original row
Go to Options, Visibility
And you want to hide it for Mobile. So save it
Save it first and close it
And once that is done, if we actually resize to mobile size
then you'll see that is really nice. So the background is really responsive
The text here is also really responsive. So you can apply that principle anywhere on your website
Now the last thing I want to show you is how to add in new pages
and something really cool as well
So to add in a new page, hover over here. Shortcut. Click on Page
Let's say you want to create a new service page, Service Page number 1. And click on Publish
Really simple, new page
Ther's a new page and it will appear up here if you set it to automatically appear
But a really cool thing is you can turn on the Builder and you've got a lot of layouts that you can actually import
So if you go to Layouts her, you can click on Load Layouts
And you've got dozens f dozens of layouts that you can import
So the reason why I didn't show you guys these at the very start is because
If you've imported it, then you wouldn't really know how to use the Builder and how to use the theme
And you won't enjoy building your website and using it and in the end, you'd probably just give up
So I want you to guys to know how to use it and then you can do this later
So you can click on Parralax. You've got some awesome layouts. For example, this one here
you can replace it
And it should take a second to reload
So this is the Parallax Layout
And you'll notice that it doesn't go all the way across
And there's a white space here. you won't notice it because it's also white
But if you save it and close it, we need to go to Edit Page
And then you'll need to go to Page Options here. Set it to Full Width
for the contend width. Update it
And basically you can View Page
And then you have a really, really awesome layout that you can basically turn the Builder
and update anything that you want. So replace the image, replace the text
and you would be good to go
So to create a drop down menu, it's really simple
You can hover over here, click on Menus. This is a shortcut
And you want that to be a drop down of Services. Just drag it and drop it
It has to be sort of like indents so it has to move in like that
That means it's below services
Save it
and visit website
And then when you hover over it, you've got your service page like that
And you can also Build Your layouts and load it on separate pages or different websites
just by saving your layouts
and you can also export your layouts as well and that's another really cool feature that's built up
And the last thing to finish our tutorial is to add in the Favicon logo. So that's the logo up here, as you can see
And we can go to Dashboard
And then we can go th Themify Ultra, Themify Settings. And for the Favicon, click on Upload
I recommend uploading a PNG file again
And it has to be a size of 32x32 pixels
So click on that, if you've been following along
It's already included in the contents folder
Click on Open
Save it
Visit website
And basically you've got your Favicon
So basically the website is complete
Okay, let's a have a look at our website and it looks pretty awesome
We've got our Footer section and, yeah, that's pretty much it
So if you guys have enjoyed the video, make sure to give the video a big thumbs up
Subscribe for more videos, I'll be posting more videos and also make sure the share the video
with your friends. And if you have any questions, just drop it in the comments section below
and let me know what other videos you want to see
And yeah. See you guys in the next tutorial
