In this video I'm gonna show you how to make a beautiful parallax WordPress website
Hey you guys
It's Hogan here and welcome to this tutorial where I'm going to be showing you how to create this
amazing and beautiful parallax website using WordPress
So WordPress is the most popular way to create a website and it allows anyone to create a website without any coding
So it's used by millions of small business owners and individuals like you and me
But it's also used by some of the biggest companies in the world
for example
CNN Forbes UPS eBay Sony and some celebrities use it as well like jay-z and Katy Perry
So it's extremely flexible and customizable and you can create any website using it
So in this tutorial, I'll be showing you step-by-step how to create this website
for example
I'll show you how to get your domain name and hosting which is basically like your website's address.com or yourbrandname.com
And then I'll show you how to install WordPress and login and then I'll show you how to install a amazing drag-and-drop builder
So you can literally create any website and you have total control of your website
so for example right now we're inside the Builder and if you want to change the text we can click it and
then we can just change it like a word editor so inspire and
then we can also move things around like we can drag and drop like that we can also undo
Like that, and we can also scroll down over here. We can adjust the column sizing
So this is perfect for people who want to create their first website
but it's also great for people who want to learn a new skill and
Maybe help their friend or maybe a client to create a website as well
And you can also move these different modules around just by dragging and dropping on the Left here
You've got all these different types of modules from like buttons images Maps
Like an opt-in form as well
testimonial modules
It's super easy to create a website these days
So we can scroll down over here and I'll also show you how to add in a gallery
So that you can basically like sort of showcase your work as well
So people can click into that and that opens up in a lightbox, right?
So it's super cool and you can also add in a video which is really cool
And then you can also add in blog posts
so blog posts are great for driving traffic to your website because you can create content and
you can also add in a contact form and
People can also upload like an image so you can give them like a quote or anything like that
And you can also add it in map as well
so people can find your business and you can also add in your social media links and you can customize the bottom section here as
Well, so this is also a one page website
So your customers can click?
Into the different sections like your services your gallery your blog and your contact as well
You can also create as many pages as you need
But I'm going to be showing you how to create this website
So you can learn the basics of creating a website and then you can really expand it later on
So the best thing about this tutorial is that you don't have to purchase anything expensive
Everything that we're gonna be needing is online and you can create this website using a Mac or a PC
And it's also going to be fully mobile responsive
Which is important because fifty percent of the traffic these days come from mobiles, so it's going to fit on mobile
It's gonna fit on your tablet, your laptops and also desktops as well. So that's pretty much it
So if you do have any questions or you have any issues
Then you can always comment down below and I'll try and get back to you as soon as possible
I've also got the timestamps listed in the description as well
So before you begin, I also want to thank people who follow my video four years ago
I really appreciate all the kind of feedback and it really inspires me to keep on creating these tutorials for you guys
So hopefully we can inspire more people to create websites and it's gonna be super amazing. So let's get started
So let's go over exactly what we need it to create our website and also the cost to create our website
So step number one is we need to get a domain name and a domain name is essentially just your website's address
For example your business name com your brand name com. The second step is to get hosting
So hosting is like a computer that is on
24/7 and that allows us to save all our website files, for example
Our text and images and all the content related to our website step number three is we'll need to install WordPress
So WordPress is a open source content management
system and it's the most popular way to create a website and that allows anyone to create a website without learning how to code and
It's also extremely versatile and customizable. For example, you can create a website
You can also create a blog and also an e-commerce website on WordPress as well
Step number four is I'll show you how to create your website and also design your website
Step-by-step. So how much does the main name cost normally a domain name cost around fifteen dollars every year hosting cost around ten a month
But I do have a discount link below
WordPress is going to be completely free and creating our website is also going to be free as well
So hopefully we going to be saving a few hundred or even a few thousand dollars to create this website
Ourself and it's gonna be super amazing
So what we're going to do now is to do step number one and two and we can do that at the same place
So you can click the link down in the description below or you can open up your browser and here we can type in 
siteground.com
forward slash go forward slash unlock
So this is a discount affiliate link
So if you do purchase through it
You'll get a discount and I'll get a commission for that sale and that basically just helps me to create these free tutorials for you
guys
so there's mainly three different plans that we can choose from we've got the startup plan and the grow big plan and also the go
geek plan
So generally the go geek client is probably a little bit too much for what you need unless you are building an agency
So with a grow big plan, this is also a really great value as well where you can create unlimited websites
So if you want to create a website for yourself your family, maybe a few business clients as well
You can host it under one account
So generally what I recommend most beginners is just the startup plan
Because it's the cheapest and you can also upgrade later on
So one of the main biggest benefits of siteground is that you can choose a data center closest to your audience
So for example if you are located in Australia, they have a data center in Australia
So that basically means that your website's going to load super quick for your audience
They've also got multiple data centers like in Asia, United States and also Europe as well. So it's super amazing
so what we're going to do is just click the get plan for the startup plan over here and
Here we're going to select register a new domain now
If you do have a domain already, for example, you purchased it through like Namecheap or like GoDaddy
Then you can select I already have a domain. So here we're gonna put in our new domain name. So for example parallax
tutorial and
Then once you have that you can click over here and you can also select a country specific domain name for example.com
.au or .co.uk in this case? I'm just going to go with the dot-com extension and
Then we're going to click on proceed
So over here for the account information you just need to put in your email as well as your client information
As well your payment information. So I'm going to pause the video and quickly fill that out
Okay, so I just filled out all my information
So for the data center, you want to select a data center, which is closest to your audience
So for example, I'm located in Australia
I would go Australia if your main audience is the United States you go with the United States data center
So I'm going to select that one and for the period I generally recommend 12 months or more
That way you're gonna get the biggest discount, but you can also go month-to-month as well
So normally I would select twelve months but for this tutorial because I already have a few accounts in siteground
I'm just gonna select a month plan over here. Domain privacy is basically it's going to hide your information from the public
so sometimes people can find your information for example your email and also your name if they search up your domain name and
That's gonna basically help prevent any spam
Like normally there's a lot of marketing companies that might contact you if you do want to
Sort of hide your information then I recommend it but it's not necessary
so we always going to keep that as empty we're gonna scroll down and confirm all these and
Then we're going to click on Pay Now
Okay, so the account was successfully created click on proceed to customer area
So from here, we're gonna click on setup site and then we're gonna click on start a new website. Click on select
scroll down and we're gonna select WordPress click on select and
Here we're going to enter in our email address that we're going to create our login to our wordpress account
So here i'm gonna type in parallaxdemo
91@gmail.com then i'm gonna set in a login password and
Then here we're gonna click on continue and it's asking us if you want to add in this thing over here
We're not going to do that. So we're gonna click on finish and
That's going to take a few minutes to create our website installation
So while Siteground is creating a new WordPress installation
What I recommend is going back to your email and you get two different emails one
Which is asking you to verify the domain name and one to set in the data use consent preferences
So make sure you verify the domain name and make sure you set in your data consent preferences
And normally I just save the consent preferences without consenting and should be all good to go
okay, so we're basically all done and
here we're gonna click on manage site and
Then we can click on WordPress on the left and
We can click on install and manage
So scrolling down here
Your WordPress installation has been created on our new domain name so over here we can click on login to admin panel
so click on that and
What you want to do is you want to scroll down and
We want to exit out of this WordPress starter because I'll show you everything that we need to know step-by-step. So click on exit
Congratulations, we've installed WordPress and this is your dashboard area
So this is basically what you'll see
So what your customers will see or your visitors will see is you can hover it over on the top here and click on visit
site and
This is what they'll see
So obviously it doesn't look anything like what we want it to look like at the moment and that's because we haven't installed the theme
Yet
So what I do want to show you guys is how to log out and how to log back in to your dashboard area
so on the right over here click on logout and
This is your login panel. So for example, if we share our URL this is going to be live
So to log back in to our dashboard to our WordPress dashboard type in forward slash
WP dash admin and then click on enter and
We'll be back here. So just put in your email that you signed up with before as well as your password
So fill that in and then click on login, and it will basically log you back into your WordPress website
So I'm just gonna save that password
so what I recommend you guys do is to just bookmark your page so that whenever you want to log in you don't have to
Login to siteground and then click into that button
Right you just log in directly via the WP dash admin login area
So what we going to do first is basically just go through some basic settings to get you guys on the right page
so the first thing I recommend is going to settings and then
Going to permalinks and we always want to make sure for the permalinks settings
That we've set in the sample post or the post name
So basically what that means is if we like a about page or services page
The title for example about or the services will be included in the URL. So this is great for search engine purposes
We don't want our page to be like equals P equals. One, two, three, that's not very good, right?
So make sure that it's set at post name scroll down and save changes
The next thing we're going to do is go and click on plugins
So plugins are essentially apps that add extra functionality
For our website. So for example on your phone, you've got apps to like, you know
Dating apps you've got social media apps you've got apps to edit photos or videos
Anything like that plugins are essentially the same thing but for our website
So what I recommend you guys do is to deactivate all your plugins
so we're gonna deactivate the WordPress startup and
I know a lot of people are following another video or something like that and you might have a lot of plugins
What I do recommend is selecting all and then clicking on deactivate and clicking on apply because sometimes you might conflict with
building our website and
Sometimes it might just be really really overwhelming your dashboard area. So you do want to clean it up a little bit. So because
We've installed SiteGround this is the Siteground optimizer plugin
I'm just going to keep that activated for now so we can click back on our dashboard area
You can also click on the screen options here. We can hide certain things on our dashboard
so it is a little bit messy so we can click on that to sort of close it or
what we can do is go back over here and we can just
Hide the display settings. All right, so I just want to keep that one
That's fine and close that like that
Now the next thing we want to go to pages and we just want to delete the pages which were pre created
Just move that to trash and click on apply
click on trash again and let's just delete that permanently and then we're gonna go to post over here and
If you have a sample post, then you might want to delete that as well
So I'm gonna go to trash over here and I'm gonna delete that permanently
And close that and click back onto our dashboard and there we're pretty much good to go
I'll show you how to install the theme now
So to install the theme what you want to do is hover over appearance and click on themes
And then click on add new
so below this video there's a link to download the theme so this is the themify ultra theme and
Once you download it onto your computer
It should look something like this themify - ultra dot zip and if it does come into like a folder
you might need to right-click and
Compress it back into the zip file because we have to upload the zip file as our theme over here
So click back over here and click on upload theme
choose file and
select the theme open and
Then install now so on the left it is uploading and once it is uploaded we need to activate our theme
Ok, so what you want to do is click on activate
So for the skins in demo I don't recommend selecting it
So if you do select it
It will basically import the skin
Onto your website and your website will look like this but sometimes I think you know for most beginners
It's a bit overwhelming because you don't really know how to use it yet
So what I'm going to show you is how to create your website from scratch and it's going to be super easy
anyway, so click on X over here and
Then let's go and view our website. So click on visit site
Alright, so website is taking shape. Now. This is an amazing theme. It is a premium theme themify ultra in my opinion
It is a lot simpler to use than Elementor and Astro
mainly because you've got all the features that you need so you don't really need to download anything additional and
I feel like it's a little bit overwhelming when you have so many different plugins and additional things on your website
So I partnered up with themify to share with you guys for free
If you do have any problems installing the theme then make sure you drop a comment down in the comment section
I'll also leave an FAQ link in the description below as well
So what I'm going to show you now is how to add in your pages. So we're gonna click on pages over here
So to add a page we want to click on add new
And
We want to close this so here we're going to add in a title server
For example, we're gonna add in home a home page. Then we're gonna click on publish and publish again
So that should say page published. So what I recommend doing is closing this over here and over here
They've got three dots so click on that and then click on full screen mode. So deactivate it
So basically we can see the left panel now and I think that's a little bit easier so that you guys don't get confused
So click on the title one more time
And then you can click on the link and that's going to take you to that specific page
So if you want to create more pages
You can also hover on the toolbar on the top here and click on page to create a new page
So let's go back over here. And what you're going to notice is that home is going to have forward slash home
so what we want to do is we want to take this home page and just have it as our
Com like that. Ok. So what we need to do is hover over here click on customize and
We need to set the home page settings. So we want to click on back here and
then we want to click on home page settings and
set a static page and
then for the home page you want to select home and then click on publish again and
Then we can close it. So what we're going to be creating is just a one-page website for this tutorial
But we can actually create more pages if you do want to as well
So we're just gonna stick with this for now and let's go back over here
So again, if you do want to create more pages
You can click on all pages as well and you can also manage all the pages over here
So for example if you want to create additional services page
Then you can create and click on add new and that will be added in
so what we're going to do is we want to make sure that we have a blank canvas to work with so if we turn
The builder right now, then what's going to happen is we have the modules on the left we can drag it over here
but if we start building
We've only got this section to work with we don't want the sidebar and we don't want the heading over here
So I'm gonna show you how to remove it. So let's just close the builder
Let's go back to here to our dashboard and go
hover over themify ultra themify settings and
You want to scroll down to default layouts, so essentially you just want to set in a default layout for our pages
so default page layout
And what I like to do is just open it in a new tab
So I like to show you guys with what we're doing. So let's remove this and remove sidebar so over here remove sidebar
No sidebar hide the title. It's like yes, and you do also want to hide the page comments as well
So set that one in and click on save
So if we go back over here
Refresh the page then it should be gone. Okay
So while we're here, I do want to show you how to edit your header section your header layout as well
so let's go back over here and
Scroll down a little bit and click on theme settings. So click on that and then click on theme appearance
Scroll down and over here
We've got over a dozen different header designs, but generally what I recommend is sticking to the second one or the header top bar
Okay, so generally this is probably the best option
the other ones aren't as great in my opinion and
This one is just the best for user experience as well and a lot of top websites use this one over here
So select that one over there and we can just click on save
We're back and refresh it. Okay, that's done
So I'm gonna remove this tagline and maybe the search icon over here as well
So people can search things if you do want to keep that, but I want to remove that so go back
scroll down and
let's remove let's say that the tagline and
remove the search form and
let's click on save again and
Refresh it. Okay looking really great. So here this is the footer section. This is the header section
So I want to remove this over here as well as the logo. So let's go back
scroll down to the bottom arrow over here and remove site logo and
Let's scroll down over here to the footer text. So the very bottom and
I want to remove footer text - okay. So footer text - is this
so let's select that and hide it and
Save, so we have that then we can go back over here and just refresh the page
So I think I want to change this layout as well for the footer so you can go back
And let's go back over here and you can also adjust the footer design as well
So I'm going to select the footer block and click on that and click on save
So let's go back over here and refresh the page and this is looking really really awesome
So now we've got a blank canvas where we can start building our website
so what I want to show you guys first is we can set in your logo and
Also how to set in your main sort of navigation links as well
So for example, if you go back over here, how do we set in the links that scroll down to each of the different sections?
So this is very simple. So I'm gonna close this one over here and close this as well
so here we're gonna click on customize and then we're going to click on back and
then click on menus and
Then going to create a new menu. So this is going to be our sort of top navigation menu. So I'm gonna name it top
Now it doesn't really matter what you name it, but this is just for your own reference
You want to make sure you set in the main navigation, which is the top over here
The footer navigation is if you want to create a menu for your footer section
so if you want to create a new one, then you want to select footer click on next and
Then you want to add your items in so you can add that in
Like that now if you want to add in the homepage
So basically you can click on that and that's gonna add it to the menu on here, right?
So it's not showing right now, but if we added in so let's say for example
When people click on it, then it's gonna navigate to the homepage
So I generally don't do that because when people click on the logo, then it will take them to the homepage anyway
So it's a waste of space
So what I want to do is I want to create these links here
So about services gallery blog and contact so go back over here and that is a custom link
So that is not a page because it's linking down to each of the different sections on the page
So what we want to do is you want to copy your URL
So copy the URL from the top here without the other stuff. So copy that so ctrl C
Or you can just copy it like that
Paste it in so control V paste
it in like that and then here I want to put hash and then the first section is gonna be about and
Then for the link text is going to be about
So we're going to add to menu
so, just in the url again and
Then this one is going to be hash the next section maybe
Services, so make sure to keep this lowercase all lowercase
link text is gonna be
Services add to menu. The next one is going to be we're gonna paste that in again
Hash so the next one might be let's say blog or maybe gallery
so gallery and
then put in the link text add to menu and
Let's paste it in again
Hash and then this one could be I think blog
so the link text is blog add to menu and
Then paste it in again. So last one so hash
contact okay, make sure that's lowercase and
Add some menu
So once you have that we're gonna click on publish and you'll see the links up here
So if you ever want to create a drop-down menu you want to click it and then just indent it below
Whichever you want to drop down from so for example, if you want the link to drop down from about
Then that's how you do it, right?
So if you want it to drop down from gallery
So you just put it under like that and you can also do another drop down if you do it like that. So it goes
Services and then like that. Okay, so let's put it all back and
That is pretty much it for our menu, okay. So once you've done that we can click on publish and we can go back
let's go back again, and then we can go to themify options and
Then I want to click on advanced more options over here
So here we can navigate to site logo and tagline so this is where you enter in or put in your logo
So click on that click on site logo and then here we can change the site title
so for example
I'm just gonna put in logo for now and I'll show you guys how to create a free logo as well as a favicon
So for example the icon up here how to create that for free and add it in a little bit later
We're not gonna do it now, but you can add it in here if you do have one right now
But I'll show you how to do it later because we do need a set in the sizes and things like that
So just leave it for now. So let's go back over here and
Just put it in a logo right now and you can also choose a font as well
Okay, so there's 100 different fonts to choose from now
I think one of the most important things about designing a website is knowing which font to choose
So what I want you guys to do is go to my website. So Hoganchua.com and hit on enter. I
Want you here you can hover over resources and then click on website design guide and
this is just a simple guide that I created for you guys so that you can
Sort of refer back to it and sort of understand a little bit more about Web Design
Because I think that when we're creating a website in WordPress
You know years and years ago it was about we didn't have the tools to create it now
We have like so many different drag and drop tools. It's not really about the tools that we use to create it
It's more about you know, how do we design it? Like how do we make it look good every single time?
so with this design guide you can actually use it for
Designing other things as well like for your business card or maybe like your logo you can use the same tips
For it as well. So it's really really important to understand
So the first tip that I recommend is to just choose one font
now the reason why I recommend it is because years ago when I was creating my first tutorial everyone choose like
You know three four different fonts, and it didn't look very good. So I do want to explain it
So if we go to like apple or some of the top websites in the world and you can actually download a Chrome extension
it's called wha font so you can download that and you can hover over the websites that you like and
What you're going to notice is that they basically just use one font and maximum probably two fonts on their website
So they just use the size as well, as you know, the boldness of the text to sort of differentiate the text a bit
So as you can see, it's very very consistent. They don't use, you know, a lot of different fonts
So same thing if you go to like Rolex as well. So click on that you hover over here, right?
So the same as well scrolling down
same and
The same as well. So let's go to Tiffany and Co and let's click on that and over here
They do have two so they've got a different one for their heading and a different one for like that body text as well
So I'll explain a little bit about that
Second so same thing with uber it's a table over here uber move. It's pretty much the same one. So these two
Yep, so they use the same as well. So here so you want to go back over here?
There's two different typefaces that you have to understand
So these are the main ones now, there's a sans serif and also a serif typeface
So if you follow my other videos older videos
I have explained it before but
Everyone's probably you know new so I do want to explain it now
If you look at the text on the edges
It's plain and also the strokes are even with
So on the other hand, the serif typeface is they've got curves on the side and also it's thick and thin strokes
So this one looks a little bit more traditional elegant and it's got a handcrafted look
so if you go to Tiffany and Co you're going to notice that they have it for their logo and also for their heading because
Mainly because they want to appear elegant and maybe it's like a handcrafted feel to it. So that's why they have it
So same thing with Rolex how they have it in their logo
So that is a serif typeface let us  go to Apple right they obviously want to appear modern
It's not really like a elegant type of handcrafted thing. Right? It's more about tech. So they use a sans-serif typeface
so you have to think about your brand and think about how you want to appeal to your audience like is
What you're creating maybe something you are creating by hand. Maybe you want to use the serif typeface
Maybe if you just want to have a simple and clean website
I personally just recommend its answer for 80% of the websites that you guys can create
So this is your simple clean and modern and most websites actually uses. Okay
so these are some of the top five that you can actually use that I recommend for most beginners that start off with and you've
Also got some to start off with as well for the serif typeface, okay?
So now if you do want to choose like let's say this one over here
What I do recommend is only using it free headings like for example
If you go to Tiffany and Co using it for your headings down here headings
scrolling down
Again headings over here and then also for your logo as well. So same thing for Rolex
They only use it for their logo and they just use the sans-serif for their body heading
Fonts and everything like that
Okay, because if you have too much of that font
Then it's just going to look really sort of old and I don't think that personally looks very very good. So that's why I recommend
But what I do recommend, most of the time is probably sticking with a sans-serif and then you won't go wrong
So scrolling down over here. So for the body font size you do want to keep it between 14 and 18
You don't want it to be too small or too large too large is this gonna look really really ugly?
Especially if you have a large body of text like this, so this one is pretty good. Right sixteen fifteen
That's very very good
and also for the line length
so
Sometimes I see a lot of people create a website and you've got one huge block of text and that doesn't look very good
So you want to try and break that up into?
Maybe two different sections like this or you could have maybe a little bit wider
but I guess you guys get the picture but just don't have like
You know huge paragraphs from left to right so you want to break it up
Now the next thing is which is really really important is the text hierarchy
so if for example you want to create a heading and a subheading
You don't want something like this because you want something where when people look at it. They know what to focus on
so first of all
You want to focus on the headline and then the sub headline, right?
If you look at that one you like looking at two different things at the same time
Okay, so same thing over here. So you do want to differentiate this a little bit better
By maybe having something like this
Having a color and maybe you can also increase the line or letter spacing and then scrolling down
You can also do something like this
where you've got the heading where it's sort of a little bit more neutral color a little bit lighter than the heading over here and
You've also capitalized it as well. Alright, so it just looks a lot better
So if you go to Apple, they've got really really good hierarchy. So new and then smaller big and then not so big
alright
so people focus on this first then this and then maybe over here and then the button you don't want something like
This over here, okay
So let's go back over here and scroll down and what I personally do recommend is just choosing one
accent color to start off with
because a lot of people you don't know which color to choose right and then a lot of people choose like three different colors and
Use it not consistently throughout your website and that just looks really bad
So what I do recommend is maybe reading up on color meanings?
So like google it and find out you know, which color suits your brand. You also got to think about your competition as well
So you can go to this website over here and let's say for example, I want to choose maybe this pink color over here
Just copy that and then you've got the color code so you can just basically choose sort of one color and use
sort of different shades of that color on that website so you can actually go over here and
you can also go to Adobe and what you can do is find an image on unsplash and
Let's say if you like
Classic and
We scroll down and maybe you'll like a certain picture with a certain mood so you can download that image download that image
Let's say for example, let's just download that and I'll show you quickly and the head back over here. Close it
select file and then we can select that file open and
Then we can choose a color palette basically by selecting on the left here, right?
Different moods that we can extract from the picture and then we can use these colors consistently on our website
So that's what I recommend if you do want to go that route, but if you're just starting out
Maybe just choose one color and then use sort of the same shade, right?
It's going to make your website look more consistent and gonna look really good
Now if you don't know which color to choose like for example when you're building a website
You might be thinking what color to choose now generally for the header section and for the footer section
You want to keep these?
neutral colored like for example header and footer
you want to either keep it white or maybe like a dark gray or something like that or a
Transparent header because you don't want to choose. Let's say a color
Let's say if you do choose a color, for example, we choose a random pink color and when we add an image over here
It's gonna be harder to match
Alright, so think about if you're building out your own house if you're painting your room pink
Then it's going to be harder to match with the furniture
But if you have just a white wall, and you have a very very neutral color, you know, flooring and things like that
It's gonna be very very easy to match. So any picture would be good
So that's what I don't recommend, you know choosing like a colored
Header and footer section. So if you go to the top website same thing very neutral colored. The Rolex is transparent
Which I'll show you how to make
Tiffany and Co is white it's uber neutral. Well, it's not like some pink color or orange color
That's gonna be really good ugly. So that's when you use a neutral color
If you don't know which color to use especially for like buttons or you can also use it to separate content
So if you go back on my web site over here
So I use a neutral color to create a background to separate content. So this is very very useful
so if we zoom out of our website a little bit more
So you can see that I sort of break up
Each of the different sections with either a neutral background color or an image and then white color and then image like that
same thing for Apple and we scroll down over here and
They break it up with some neutral colors like that
Same thing and a lot of websites do it. So that is the basics of it and for the button styles and colors
I'll show you that a little bit later on. So let's get back into
Creating our website. So let's go back over here
So right now we're on the header section and the header wrap
So here I would either keep it a white background or maybe a dark background
So in my case, I'm going to change it to a dark gray
So the color code for this dark gray is maybe two to two. So type that in like that
So that looks really really good. Now. Obviously we need to change this to blue white and also the links to be white
So to do that we can
minimize that and
First of all, we can change the header link, which I will leave is over here
so here we're gonna change that to white so bring that to white now if you have like let's say a
White background you might need to change this to a dark gray. So scrolling down over here
You can also change the link hover as well to something like a lighter gray
So when people hover over that then people know that's a link
So here once you've got that we can minimize it we can minimize that as well. Here is a menu navigation
so you want to navigate to main navigation so click on that and
These should be your menu links over here so we can change it over here
But I do think these are the active links as well
So let's say if we changed the main link scroll down over here
Let's change it to white
Oops, let's just type in the color code white ffffff. Right so it's not going to change now
the reason why it doesn't change is because this is the active link and
Basically what that means is that let's say if I am
Let's say I clicked on iPad over here. So I'm gonna close this for a second click on iPad and
You'll see that this is the active link color. So I'm on the iPad page. The active link color is a light gray
So these ones are white
So if I click on iPhone active link color is gray because I'm on that actual page
So if you go back over here we are on this page for these links
so we want to go and click on menu active link and
If we want to change it probably to a white color so you can type in
FFF and that's going to change
So once you do that, we're going to click on this one over here. So I'm not sure why that is not removing
Give me a second to publish that so let's close that for a second and we want to change the active link hover
So when we went back over here when we set the header link hover
So we can click back over here
And what we can do is click on plus that's going to add this to our sort of color palette thing on our website
So we can reuse that same color. That way we can keep our design consistent throughout our website
So we can go back over here. Click on color. Okay, so I'm not sure what is going on
Okay, so you can't actually click it. I'm gonna close it for a second and let's come back and click on customize
Let's go back to where we were so we were at the main navigation
So let's click on that again and click on active link over click it back over here. Ok, that should appear now
Let's select that. So when we hover over that then it should give a light effect
So this is the same effect that we see on Apple
So when you hover over it, it gives a white color a little bit. Right so it's very very subtle and
That's very very nice. So let's go back over here and then
We can also change the drop-down container
So if you have a drop-down container or the links, you can edit the colors over here as well
so let's just close that for now and
What we can do is you can also scroll down
To the footer section over here and click on footer you can change the footer wrap color
so for example
You want to change it to a darker as well, and you can change it like that
So we can keep it like that or you can keep it white
Sometimes the white color looks a little bit more friendlier as well, so, scrolling down over here. We can change the
footer font to white because we want to make sure that's visible so we can type or just pull that in like that and
For the link, let's just change that to white as well pull that in and I think that looks pretty good
So once you have that we can click on publish and we can close that
So so far that is pretty good
What I'm gonna show you now is how to have in your social media links down in the footer section
So let's go over to our dashboard section
themify ultra themify settings
scroll down and click on social links
So all we need to do is paste in our Twitter profile or Facebook profile and all our social media profiles in the link area
so, for example, we can copy over our
Facebook profile URL just copy that like that come back over here and
Paste it in like that. All right, so obviously this won't be Twitter
I'm just gonna paste in a dummy URL so paste that all in and paste it in for Pinterest as well
So now if we don't see let's say you want to add an Instagram. You don't see it. We can click on add link and
Instead we can type in our own title. So Instagram and
paste in your Instagram profile and for the icon click on insert icon and
We can search for
Instagram
So hopefully we can find it that does look a little bit old
I think that's the old version of it, but we can click on front awesome and we can select the new version here
So click on that and that should be good
So for the icon color and background, we're going to leave it as default for now. Click on save now
That's not going to display yet on our page
What we want to do is we want to navigate to a widget section to display it. So
Hover over appearance and then click on widgets
Scroll down
So we want to look for
Themify social links, which is over here on the bottom
so click it and we're gonna try and drag it up sort of wiggle it up and
put it into the footer social widget drop it in and
Then what I recommend doing is selecting open link in a new window
So when people click on that, it's going to open up in a new tab
Right because I don't want people leaving my website and I want people to stay on my website
So that's probably what I recommend and is best. So let's click on save
Then we can head back onto our website and then we've got our social links down here as well
So that is looking really really great what I want to show you guys now is how to add in your hero image
so I'll add hero image over here and also show you how to crop your image and also how to add in text and
Really build out your website for this part is gonna be really fun. So make sure you stick around
So what I want to show you guys now is how to create this hero image section over here
So the first step is to find our image
I've also got all the images that we're going to be using in the tutorial in the description below
So if you do want to download it, then it is in the description
so if you want to find your own image, you can go to a website called unsplash.com and
Here you can find free images that you can use for your personal or commercial projects as well
so let's say for example, we want to search for nature and then click on enter and
I'll show you how we need to download the images because we can't download an image, which is too big
So let's say for example, you want to download this image over here. So just click into it first and
instead of downloading free here
You want to click on the drop down and you want to select on the medium size?
Because if we download like this
Original size is probably a little bit too big for our website and that's gonna make it load really slowly. So click on download and
That can be your hero image
So now if you do have your own images then what I recommend you guys do is to make sure to crop your images
So go to fotor.com and this is a free sort of image editor, which allows you to easily crop your images
so click on edit photo and then for example, we can drag in our image from our desktop into here and
We can crop the image easily
So step number one is scrolling down the resize so for example on my web design guide
I've also got a image size guide which you can follow so you don't need to get exactly that size
But it is sort of a good sort of guideline that you can go by so for the hero image
This is probably a good size. So
1,800 times about a thousand then we can go back over here. So here click on resize and we can change the size
So here make sure this lock is selected. So that resizes
Proportionally, so let's say for example, we crop it to
1,800 like that and then as you can see, it's 1072. So I show how to crop that off. So click on apply and
then we'll go back over here to crop and
then we need to change this number over here on the right to be 1000 like that's and I'm gonna click on got it and
Here we can arrange it to where we want to crop it
So it's really really important that we do crop out images
Because creating a website is sort of like building a house and your images are sort of like the wood or the bricks
So if you can't really cut the wood to the right size and you put onto your website, it's not gonna be good
Especially if it's like not big enough, right because it's gonna be super blurry and your website's gonna look low-quality
so save it onto your computer so we can just save it as
0 and then click on download and then that's fine. So that's the basics of cropping an image
Then we can go back onto our website over here. And I do also want to show you guys another resource, which is important
so if you can't find free images on
Unsplash then what I do recommend is if you do have the budget then go and pay for some images
Because you're gonna find a larger variety of images
So for example, if you are a carpet cleaning business or any type of sort of more
Specific business you won't really be able to find the right images on unsplash and you'll be able to find much better
Images here as well. So let's go back over here. Click on turn on builder
You can also turn on the Builder on the top over here as well
So when you hover over here, this is your row. So the purple is your row
so what we want to do is add a row background so hover over here and
Then click on the paintbrush styling. So click into that
On background and here for the background type. You can select image. You can select gradient
You can also upload a YouTube video so you can paste in your YouTube URL into here and that video will start playing
So let's go back and you can click on slider as well to add that in
but what I recommend is just adding a static image like that and click on plus to upload your image select files and
Then I'm going to upload the images which I've prepared already
so you can download it in the description and what I'm gonna do is I'm just gonna
Sort of hold and select all so I'm gonna upload all these images because we're going to be using it anyway
So I want to upload it all at once so click on open
So once that is done, I'm gonna select this image over here
So the here image and this is the size
So it doesn't exactly have to be like 1800 if it's below sort of 500 kilobytes. That should be good to go
So click on insert file URL and that's going to add in our image
So what we're going to do for the background mode is you either want to select full cover or you want to select parallax scrolling?
So we're going to select parallax scrolling because it looks quite nice
So what we need to do is we need to stretch that image because we can't see him right so we need to hover over
The row and if you see it, it's like this light sort of opaque
Purple color and that's the row and we can click it and drag it
So that's going to add some padding or some spacing to that image. So we're able to see that image a little bit more
So I'm gonna do it to about 150. So that's about a hundred fifty one. That's fine. And what do you want to do?
So that's the top what you want to do is hover over the bottom and click it and drag it as well
So make sure you try to keep the spacing even so we're going to drag it down and make it maybe 250 as well
So let's scroll down and drag it down to 250
Okay, so that looks really really nice
Now the next thing that you want to do is you want to make sure that you stretch the image from left to right?
so what we need to do is hover over the row again and
hover over the gear icon click on row options and
For the row width it's like full width
so that essentially means it goes from left to right so over here the gear
Icon and row options for width then the next thing that we want to do is we can add in our text module
So we can click on done. So that's our background image done. We can scroll down and we can look for the text module
So click it and just drag it and drop it. So very very easy
So here we're going to add in a text. So parallax like that
Highlight the text and what I recommend is setting its a heading one so normally for each page
I only recommend one heading one font
Okay
So make sure to set that in and then we can also click on
Styling and this is where you can change the style of it
So for example the color and everything like that, but what we gonna do is just click on done
So I'll show you that in a second. So the next thing we want to do is add a sub headline
so drop it below there like that and let go and
I'm just gonna copy over the text cuz I'm kind of lazy. So copy that and let's just paste that in
So learn how to create a beautiful website and then click on done
So to add a button very simple again. So look for button somewhere over here and
Drag it below that so here. You can change the button size. I'm going to leave it as default
You can also choose the shape. So generally if you choose like a circle sort of button, it does look a little bit more friendlier
Rounded as well. This one looks very very modern
So if we go to like let's say uber.com they use the sort of they're the square one over here
So it looks very very professional and modern
So we're gonna go back over here and that really depends on your brand
So I'm gonna keep it maybe round it right a little bit more friendlier and here you can select the background type
I'm gonna keep it as solid and then we can scroll down and for the button text
I want to type in begin now. So this could be like shock now or contact me or get a quote here
We need to put in the link. So basically what I want to do is I want to link it to
Maybe my contact section on the page or a different page
so to do that we need to hover over contact and then right-click and then
We can copy the link address. So copy that and
Go over here and just paste that in
So basically when people click that it's going to link to the contact section. So if we
That it's gonna link down over here. Now, you can link it to any page that you want. This is just an example
So we can go over here and we can change the button color
But personally I don't like to change the color of your here because the colors don't look that great
I'll show you that in a second. So click on done now. The next step is to style it
so what we're gonna do is we're going to hover over the row again click on styling and
we're going to click on the font and
Then we're going to scroll down and click on text align. So we're going to align everything into the center. So
Basically what that means is that if we sort of set in like the font for the row
It's going to affect everything within that row so we don't have to set it individually for each of the modules here
So sometimes that can be a lot easier and it's a little bit less confusing
So here we can set the color to be white and that just make sure that it's visible
So let's go back over here and click on done
So let's click on save first and you can also click on here on the drop-down to save as revision
so for example, if you finish like a section and your home page
we can do like here done and then you can put like a date or something like that and then click on OK and
If you do make a big mistake
then you can go over here and load that revision so we can click on save and close it and
What you're going to notice is there is a gap on the top over here
so to remove that gap we can go to edit page and
We need to remove the gap every time if we do want to have a full width
Content width, right? So we want to set here to full width like that and then click on update and
Then we can scroll back up and click over here and then click back. It's our new page and
Then that should be done. So you guys are probably wondering how do you change it to a transparent header?
So I do want to show you that really quickly since we're here already. So go back over here and
Scroll down to themify custom panel again. Click on the page appearance and click on header
scroll down to header background type over here click on transparent
so sometimes you do need to edit the header text color because the background
Is a different color you might need to make sure your links are visible. So keep that in mind click on update
Let's refresh that page and that's looking really good. So
the next thing I want to show you is how to change the size of the text and
also the button color so click on turn on build up and
Then click into the module so that one over here. So what you can do is we can change the heading one size
so go back to styling and
Click on the tab and click on heading and here you can change the heading 1 font
So generally there's two ways of doing it and personally I recommend the second way which I'll show you later
but this is the first way so click into that and
Here we can change the font family because we reset the body fonts and once around I don't really need to change that again
So we do want to change the size. So make it a little bit bigger maybe like
70 let's just click it and drag it maybe a little bit bigger. Let's try
80 so 80's decent-size here
We can also change the letter spacing so I might want to make it a little bit more modern so we can change it to
1 letter spacing like that and you can also text transform it like that looks really good
Scrolling down to the text shadow. So the text shot is very very useful
So try to keep this in mind when you're building your website because you always want to make sure the text is visible
When you're putting it on top of images and this is a really great way of doing it so you can do 1 1
Oops, so that's meant to be that's meant to be one
so it's good to leave that that's 1 and then for the blur we're gonna set 5 and
As you can see it adds sort of like a white
Shadow, and that does look really really nice
it sort of enhances the text a little bit and what we can do is click on the color and we can select black and
then that just creates a really really nice shadow so we can see the text drop the opacity or the transparency down to like maybe
0.1 something like that, and then that looks really really great
so what we're going to do is sort of want to reduce the spacing over here and
We can sort of click on the bottom here so we can change it to 1 for the margin for the bottom area like that
So we can click on done and that's going to reduce the spacing so you can actually click
The next text module and we can change the sizing over here as well. So click styling font and
Then here we can just type in the size. So like 24
Maybe a little bit too big so maybe 22 something like that looks pretty good. Then we can scroll down
We could also go back over here
To the margin. So let's say you want to move the spacing over here so you can reduce the margin like this as well
so - maybe like 3 and
maybe minus 5 so that's going to move the button up a little bit because it's going to
Create a negative margin. So padding is
Similar. So padding for example is let's say we do 100
So basically think of the padding as the space inside the box, so that's padding
Margin is sort of outside of the box. So for example, we do like top sort of top margin
100 that's gonna appear outside of that box over there
okay, so sometimes that does take time to get used to but generally I only do sort of margin when I need to reduce the
Spacing like that and padding. Normally I only add it like when I need to add spacing like that. Let's click on done and
We can click on save and then
For the button we can click into that
Click on the styling click on button link click on background and here we can change the color
so before when I was talking about the web design
what I recommend is either using a neutral color like a neutral dark gray or maybe a white color or
Just a sort of ghost button like this or you can just go to the website over here and pick an accent color
So let's say for example
I want to pick this maybe pink one or maybe let's try maybe yeah this one over here sort of red color
Okay, and then we can go back over here
Oops, go back over here
Paste that in so that might look okay. Maybe let's change it to pink. I think it does look a little bit nicer
We're back and close it
paste it in and
Then you can add the color like that. And then for the link we do need to change that to white so it's visible
Okay, then we must set a whole the color. So when people hover over what color does it turn into?
So generally what I recommend is either hovering it back into a neutral color or a different shade of the same color
All right, so you don't want to hover it into like a random color at all
Because this is gonna look really bad
So what we're going to do is make a lighter version of it. So click on there
Come back and let's paste that in
Like that, so when people hover over it's going to be a lighter effect
So this is essentially the same effect that you see on uber as well like that. It goes lighter
So on a lot of websites, that's what they do. So you don't pick a random color. Otherwise, it's gonna have a bad design
So once that is done, I might change the sort of font as well within there
So let's go back and click on general. Click on the font
Here, I'm gonna change it to text transform
maybe make this size a little bit smaller if I can maybe 14 and
Then I'm going to let's add some letter spacing. So let's try one. Maybe two like that
Okay, so that looks nice and modern in my opinion looks really really good
So we're gonna click on done and then we're gonna click on done and close
Okay, so that looks really great. And that's probably the hardest part of the tutorial
The rest of the stuff is going to be super easy
So we're going to speed through that but the next section that we're going to create is where we're going to put in our quote
This can be like a mission statement or a quote that you believe in. So I'm just going to copy it over the text and
Come back over here. So what we're gonna do is add a new row so we can click on the plus icon and
Select the row with just one column so you can select two columns three columns as well
So for example, this one will be one column and two columns. This one is just one
So let's go back over here and click on that and that's a column so to add in a text drop in a text module
So what we're going to do is we're going to paste the text and match style or paste as plain text
So there's no styling to it
Okay
So you can also click on toggle toolbar over here and click on that and paste it in as well
So you don't copy any styling over?
So the first thing that we can do is maybe add some spacing so we can add some spacing we're gonna hover over the top
Here and sort of drag it down
- maybe 75 and then we're gonna do the same thing for the bottom 75 as well
That's all good. Then what we could do is maybe we can align the text into the middle
So let's click over here and click on font and then we can align it into the center
So what we're going to do is adjust the size as well. So we're going to adjust the size for the quote
so we're going to change the font to 20 - I think that looks okay and
Maybe we can leave it as that
The only thing that I do want to change is if we go to text is I want to change the font size over here
So sometimes if you have you want to have two different sizes, for example, this one over here and this one over here
You want it to be different then? What you need to do is go back over here
We're gonna set this one to maybe heading 6 like that
so then what we could do is go back to styling and
Then click on general click on heading and then click on heading 6 font
So that basically means we can edit the heading 6 font in here as well
So I'm going to adjust the size a little bit. So maybe let's say 12
I think that looks okay and maybe adjust the letter spacing to 1 like that
So that just adds some nice sort of hierarchy in terms of the text because we sort of want to differentiate it
So remember, I sort of mentioned it before something like this
So we do want to make sure it looks really nice by doing something like this. Okay
Let's go back over here. And I think that looks okay
So the only thing I don't want to do is maybe change the font color. So let's go back to
the general
So here for the font color. I might change this to a dark grape
So to do - and I think that looks a little bit better
Okay, so let's go back over here and compare it
Maybe let's try and make it a little bit smaller or maybe add some letter spacing
Something like that. Okay. I think that looks really really nice
So here we can click on done and that is done
So to add in the next section we can click on plus and click on two columns
So on the Left we're going to add an image. So drop that in here and
then we're going to select let's say
I think this one over here and I've cropped the size to about 800 to 533 click on insert file
And then we've got her image so then we can go over here
click on done we can drop in a text module into
The right-hand side like that and I'm gonna come back over here and just paste in everything. So copy that and
Come back here. And let's just paste that in
Like that, and I want to change this one to heading 2, so let's change this to heading 2
Like that's okay. So as you can see it might have edited everything
So I'm going to ctrl Z or command Z to undo and I want to hit on enter one time
So I think I accidentally set heading 2 to the whole entire paragraph
So let's set it hanging - like that and that should be fine
Now the next step that I want to do is I sort of want to align this into the middle of the image
so what you can do is hover over here and
Hover over the gear icon and then select align into the middle so over there and that looks quite nice already
so the next thing that we can do is we can zoom out of the page a little bit and
We can also rearrange the column sort of width of that so we can hover over the image
Just on the outer line and then we can sort of drag it inwards like that
So I think that looks a little bit more balanced. So maybe let's try around 35% like that so we can zoom back in and
That's looking really really good
so the only thing that I want to show you to do is maybe add in a
Divider line to sort of separate our content a little bit
so as I said before
we sort of want to separate our content with divider lines and maybe like a background and then white space and then a
Image so here we're gonna add a divider line. So let's go back over here and let's drop in a divider
so click on done look for a divider drop that below that like that and
Here what we're gonna do is change the color. So basically what we want to do is either keep it like a neutral color
So like a maybe a dark gray or light gray, but in this case, I'm gonna use this color over here
So let's click back over here
So the button so I forgot to actually click on the styling and the button link. I forgot to set in that color
so
What you probably want to do is click into it and add it to your color palette like that so we can reuse the color
anytime let's go back over here and
Let's click back into the divided line
Sometimes it can be quite challenging but you should be able to get it and let's click back onto that line
just like that set the thickness to two and
then what we're going to do is we're going to change the divider width to custom and
Then we're going to align it into the middle like that. So I do want to add maybe some spacing
So what we going to do is hover over that and click
It and sort of drag it. So we're going to add maybe
Mm a be 20 or 30 pixels. I think that looks okay
Sometimes you need to play around with it a little bit. So let's have a look. Okay, so I think that looks quite decent
Let's click on save and that's done. So the next section is over here
We're scrolling down and you can see this section over here. I'm also going to show how to add in a link
so let's just add in the link go back over here and
then let's
Create a link
so hover and select the link that you want to create the text and then click on insert link and
Then depending on what you want to link it to
So for example if you want to link it to my website
so copy it from URL copy that and then we can go back and
Paste it in like that. So generally what I personally like to do is click on link options and open link in a new tab
Especially if it's linking outside of my website and then click on update. So that's done
So here we're going to zoom back in to our page and we're going to create the next section
so the next section is we need one two three, so we need three different columns and
What we can do is let's go and drag select this one first
So one column first and what we're going to do is create a text module
Drag it in and there like that change the two services
Set it to heading two
like that and then I might add some spacing above that to that row, so maybe 75 again and
Then the next section that we're gonna do is click on
Come back over here. We're going to drop in three rows. So on the left here rows
We're going to select three and drag it below services like that
So you got one two, and three then what we're going to do is add in the feature module. So drop that in
Like that, and I'm going to come back over here and just copy over some of that lorem ipsum text
Web design sort of come back over here. So for the feature title, this can be like the services that you offer so web design
paste that in
And we're going to scroll down
For the layout we can change it. I'm going to keep it as default
I'm gonna sort of remove that circle because personally I don't really like it and remove the stroke as well as
Well as the color and then we're gonna scroll down over here and you can change the icon
so you can click on the icon and
Then we can search for desktop
So this is maybe something to do with web design so find an icon that relates to your title
You can also upload your own image as well
Then once you've done that then we can simply just you can link it to your specific page as well
But we don't have any links at the moment. Now, we can simply just duplicate the module two times like that and
Drag it in to the respective sections
so here what we're going to do is we're going to first we're going to go to the styling and
then we're going to go to font and we're gonna make sure we aligned everything in the center first and
Maybe we could let's add some padding to the bottom seventy five
like that
So what we can do now is what I recommend is maybe adding some sort of divider background to it
So since we're here we can go to the background and instead of image we can put in background color
so what I recommend is a light gray so f6 f6 f6 and
That can really separate your content area. So
Let's refer back to the top module again over here. We do want to add some spacing over here. So make sure everything's even
Just like that
Should be pretty simple to do so
Whenever you have trouble
then you can zoom out and you can look at your
Sort of page from a bird's eye view and that way you can sort of adjust it to what you need it to do
So what you can do is obviously just click into that and maybe change it to you know
Whatever service you offer it and change the icon as well that is done the next section. We're going to add in our gallery
So we can just duplicate the text module over here and let's just zoom back in to maybe 75%
So here we can add in a new row so over here. We're just going to add one and
Then we can drag this and drop it into here like that
And let's just change the title so gallery so this could be like your work your portfolio
It doesn't really matter
We can also align it into the center over here as well if you do want to
so we can also add some spacing so 75 and
Then we can drop in a gallery module so click on done and
Over here you can drag in like an image module maybe a gallery you can also
Use let's say video as well as a slider as well to display your sort of work
So we're going to use a gallery module so drag that in and put it below and I'm gonna select my images
so I'm going to use let's say this one over here gallery 5 and
I've already cropped these ones for you to about a thousand and six hundred
so generally that's a pretty good size and I recommend cropping them to the same size if you do want to sort of upload a
Gallery, so we're gonna select this one over here. And I think this one over here and then
Maybe this one and this one
so one two, three four
Five six images click on add to gallery and then click on update gallery and that's going to share out images
So what what I want to do is I want to change the columns to maybe three because I've only got six images
so let's change it to 3 and
That's displaying good. So the only thing I want to change is a thumbnail width and also the thumbnail height
so if we go back to the gallery and
If you notice that I've uploaded as 1000 in width and 600 in height
so what I want to do is Harvard, so that'll be 500 and that will be 300 and
Then what we could do here is change the thumbnail width so I don't want it to be let's 300 and 200
I want it to be 500 and
also 300
so that's going to ensure that the quality of the images is retained because it's cropped sort of proportionally to how I
Resized it. So let's say if you upload the image to be 800 and maybe
600 or something like that, then you still want to have it. So be 400 and
300 okay, so let's scroll down and that's done. Let's add some extra padding on to that as well if you do need to
so that's all good and
Let's add some over here on the top if you can
So accidentally added the sort of the top margin over here
So I do want to click on this one and click on styling
And I think I accidentally added to the margin on the top. So it maybe let's just remove that anyway like that
Okay, so I think that's done. Now. The next section is we're going to add the video
so this is really great because you can put in a video here and you can also
Do a sort of really really nice parallax on the background just showcase your work. Let's go back over here
And this is just one column as well. So click on that and
We can add in a background first. So click on styling
background
image and select background image and we're going to select this one if you so for video background section and then insert and
Then that's done. So here we're gonna select the background type to be parallax scrolling and
Then we're going to stretch the image a tad to maybe let's say 50 or 75 again
So same for the bottom 50
Then once you've done that then all you need to do is click on done and drag in a video module
so, for example, we can just grab a video drop it in there and
Then we can paste in the YouTube URL. So we're gonna paste in this one over here. So I'm gonna grab the URL
So copy that you can also click on share and grab the URL as well. Let's go and paste that into here
just like that and then we've got the video and
Sometimes when you upload a video sometimes you have different thumbnails, right?
Because when you upload to YouTube you want to create a thumbnail that stands out and a lot of times people add
text over it and if you do want to cover over that which I do recommend is clicking on overlay image and
Clicking on select and then you can overlay it with your own sort of background image
So for example, I might overlay it with the same one like that
And click on it and I think that just looks really a lot better
Right so you can overlay it with a nice image and it's gonna look a lot more cleaner and professional so it suits
influencing with your website design
so what we're gonna do is click on done and
I want to create sort of a background
overlay, so I want to go to styling and
wrote overlay
So here I'm going to select a black so it covers that and then I want to drop the opacity down to maybe
let's say
0.5 like that, so it's a little bit darker right because you don't want it to be that's
Colorful, like if you leave it like that, it's just too much. Let's do it 3.5 and
Then we can also set a hover overlay. So click on that
let's drag that back through black and
Maybe let's drag that down a tad to 0.8
so let's click on done and
We're gonna click on save and close
it so
scrolling down to our video section
So let's say when we hover over it when someone is viewing that video then it sort of creates a cinematic effect
which I think is really really nice and when I click on the video and
They click on play
Then they can be well liked that
Okay, so that looks really really nice and we've done the video section
What we're going to learn now is how to add blog posts to your website. So adding blog post is really important
Not just because you want to write something and you want to share your story. It's mostly about driving traffic to your website
So for example, if you are a carpet cleaning business and if people are looking for you, right?
Sometimes they don't search for carpet cleaning or your brand name
But instead they search for something like how to get rid of
carpet stains or something like that so carpet stains and
Then they can scroll down and maybe this one over here
So this is a blog post right so you can create a blog post and that's going to drive a lot of traffic
to your website
So people looking for maybe getting rid of coffee stain or a wine stain and they might read your article
But it might be your business. So they might read it and might think again, maybe I don't want to clean it myself
maybe I want to hire someone so it's definitely a really really awesome way to drive traffic to your business and I highly recommend
Learning a little bit more about SEO as well. So I do you have an SEO tutorial on my channel
So make sure to check that out
But right now I just want to show you guys how to add in post and display it on your page
So what we can do is hover on the top over here and instead of page. We're gonna click on post
So here we can put in a title so I might just put in we are unique
So the purpose of this is just to show you how to add it in
So that's your title and here we can on the right we can click on categories we can add a new category
So this one could be
education and
Then click on add new category
Scroll down you can put tags as well go get add in a featured image
Click on set featured image and we're going to add in this picture over here
So again, I cropped the sort of blog post images to around
1100 by 700 click on set featured image and then that's pretty much it
so once you've done that click on publish and publish again and
Once that is done. You can click here and click on the link. So this is your blog post and
To add our content because we're using the themify builder. It's going to make it a lot easier for us to add it in
so we can click on turn on builder and
Here we can start adding all these different types and modules. So let's say for example, we can go to
Or if SCIM to just get some dummy text
So we're going to copy over some dummy text and click on that and let's click over here
Copy that. Let's come back over here and
We can drag in a text module just like that and we can paste in the text like that
We can also arrange the sort of padding as well so we can maybe add some padding like let's say 25
Okay to make its paste nicely
So what I want to show you is click on done and maybe if you want to add an image
Let's say you want to add an image to describe a little bit more about to what you've written
So here let's say we want to add maybe this one over here
Insert file URL and then you got your image
And then click on done and maybe you might want to add this thing
so a box module we can drag this over here below that and
what this is useful is like let's say if you have a
blog post about how to clean a carpet and maybe there's like seven different ways and
You might want to put maybe some tips or something like that. This is a really great way to do it
So for example tips, maybe tip number one
like that, and then what we could do is change that to heading two and
Then what we could do is maybe click on that and styling for the background. I might set it to yellow
Drop the opacity down to zero point one like that. Then I might add some spacing above that as well
So, maybe let's try
35 so I think that looks pretty good and then we could add obviously some content into there
So for example, just the recent contents the actual tip, so let's just delete some of that maybe
Like that, so I just wanted to show you how you can do it
You probably see this on a lot of blogs or I want to show you the basics
So that's pretty much it so you can obviously add some more text and fill it up with different content here
is your comment section that people can add and
I'll show you how to change the post date. So this is probably one of the most common questions I get asked
So let's click on save and we can close it
So to change the post date display we can go back to our dashboard
click on themify ultra themify settings and
Then default layouts over here. So instead of the page layout we want to navigate to single post
And then here we want to adjust the post date. So instead of
The round thing we can change it to the inline text or you can also hide it as well
So you can also hide certain things
so for example
you can hide the author as
Well, and then we can click on save so you can come here and sort of adjust it to how you want
Now if you want to go to post over here, then you can see and manage all your post
So to display your post I'll show you guys how to do that
But in the meantime, I'm going to add in two more blog posts really quickly
So that's done. Let's navigate back to our home page and
Turn on the Builder
So we can scroll down over here and click on this and select one row
then what we could do is we
Can drop in a post module so you can create any page like a blog page and you can display the post module to display
Your blog post like that, so it's very simple
what we could do is change the post layout to three three and
perhaps we can arrange it and limits to three posts and
Then we can also change the display layouts over here
So maybe I want to sort of hide the content and hide the post metal, which is this one over here. So
Let's try and change the display to
none, so that's gonna hide the text and I also want to hide this so scroll down to post metal and hide it so you
Can play around with the different display settings over here as well? And I might just add some spacing on the top so maybe
75 and let's try and do 75 on the bottom
Just like that and then you're pretty much good to go let's just duplicate this gallery and let's drag it down here and
Paste it in
We're gonna change the title to latest post
Latest
Post
so I might want to add a little bit of padding to space it out a little bit better and
The next section is I'll show you how to add in a map
So if you want people to find out
You know where your business's adding a map is also a really great option
So you can also drop in the map module over here
But the problem with that is that you'll need to get the API
From Google and do need to put in your credit card details, even though it's free. There's a quicker way of doing it
so we can go over to Google and
We can just type in like Google Maps
hit on enter click in the first results and
Then here so maybe you can put in you know where your business is located. I might do let's say halong bay
So this is somewhere where I want to go. So I want to click into that and
okay, that's all good, and we can click on share so click on share over here and click on embed map and
then copy HTML
So once you've copied that to clipboard by clicking onto that come back over here
And we just need to paste it in to a text module
so click on text and we're going to
Sorry about that. We do need to add in a new row
Drop the text module into here and we're going to instead of pasting it into the visual tab
so you'll see visual click in the text tab and
paste in that
HTML so make sure you paste it into the text tab. Otherwise, you won't see it
So as you can see the map is not sort of moving to the edges of the page
what we need to do is adjust the width so over here you
Can see the width is 600 pixels so you can obviously adjust it to let's say 1000 pixels if you want to
But if you want it to sort of take up the whole entire row, then we can change it to 100%
So what that means is it's going to be 100% the page with and
then we can hover over here on the top and for the row options select full width' and
That's pretty much it. So click on done
So you can also click on preview over here to see your map. And I think that is looking pretty good. So
What I want to is how to add in a contact form. So contact form is going to allow anyone to contact you
so we can go back over here and
Disable ads
so what you need to do is there's a link in the description below and that is going to be the contact form plug-in which
You'll do need to install so what it's going to look like is it's gonna look something like this once you've downloaded
Builder - contact nip. Okay. So it's in the description below make sure you download it and
We're going to come back and save here and we're gonna install the plugin. So close it
Come back to dashboard
Navigate to plugins add new and then click on upload plug-in choose file and then
Navigate to the plug-in so over here and then click on open
Install now click on activate so that's activated. So we need to go back to our website turn on the Builder and
What that is going to do is going to add an extra module here
So as you can see the contact module and we can drag it and drop it in on our page
So we can click on plus and click on maybe this one over here. So then drag it in just like that
So that's our contact form really really simple
The only thing that you really want to make sure is make sure you send it to your email
So make sure you send it to your company email or your Gmail
Whatever it is. Alright, and here I like to select this one over here where the placeholder is in the box
So it does save a lot of space and we can scroll down over here so you can play around with the different settings
Now we can scroll down to the send button we can align it to the center
like that
Which I think it looks a lot nicer now if you want to let's say you want to add?
Maybe something where people can upload a file or maybe they can select a time. You can add additional fields. So for example
we can click on head field and
for the field name we can do like upload and
Then for the field type we can select a upload file
So over here so people can upload that so that's really really good
You can also add in another upload if you do want to as well. That's completely fine
But if you want to do like so like time where people can select a time or if you want like different options
So we can go and do maybe a time
Then here we can do checkbox. So it's sort of displays in a checkbox. Let's do maybe 9:00 to 10:00 a.m
Like that and then we can add another option
10:00 to 11:00 a.m
Add another option 11:00 to 12:00 p.m
So I guess you guys get the picture and we can also click on it and you can drag it up as well
so we can move it up just like that and
That is looking great
So you can play around with the different sort of fuel types and create a custom form
Where people can contact you or make a booking as well?
so if you want to adjust sort of the look of it, then what we could do is click on styling and
click on general click on send button and for the button I might do let's say
The pink color or something like that, or maybe I might do a neutral color. So let's do like a 2 to 2 and
Then for the hover, I'm gonna do a 333 or maybe a 444. It's a little bit lighter and
Then click on done
so let's go ahead and add maybe a background to that so background it select an image and then
I'm gonna click on this turtle over here
so I'm going a little bit faster because I
Think you guys sort of get the picture and just want to understand sort of the basics of how to do it
And maybe just add some spacing on the top. So 75
Drag it 75 on there as well and then we could do
We do want to make this a little bit transparent. So it's gonna look and blend in with our theme of our website
For the background image. I'm going to select maybe parallax and
Then what we're going to do is click into the contact form
Styling and then here we're going to select the field
labels and
We can change the color of that to white and then I'm going to change sort of the field input fields
background change the background to maybe transparent
Something like that
So 0.1, which I think is good
And then for the input fields, I do want to change the font color to white as well
so when people type it in that's the white font color and
Then I also want to click on general font change that to white as well
So make sure everything's white. So when people type it in then everything is white
So maybe if you can see over here, no file chosen
we can also go to the row and then font and then arrange that to be white as well and
hopefully that's going to adjust so I click on done and save and
Then we can close it so let's scroll down to the bottom and
That's looking pretty nice. So obviously can add a contact
Title over here and there is some spacing over here
So what we can do to fix it is to add negative margin. So turn on a builder and
Let's click into this module styling it's very margin and let's try a negative margin sore
Trying to give 20. Okay, that's not enough. Maybe negative 25 still not enough 30 that's looking great done and
maybe I might zoom out and then
I'm going to
Rip this and put on top and just have the map on the bottom and I think that's looking great
So that is looking really awesome
So what I want to show you now is how to ensure that when people click on your links
They actually scroll down to hav different sections and that is what we call the Rohtang kurz
So we just need to set in the locations
so if you haven't set in so the menu Road anchors yet over the top here you want to go back into the description and
Make sure you go to the timestamps and create your menu
So when we click on the menu, you'll see that the URL has changed to hash about
Same thing if you go and gallery is hash gallery and it's all lowercase
All right. So what we need to do is set in the location of
where we want people to scroll to so we can click on turn on builder and
We're gonna hover over the row
So this is the row the about me row
So we want to cover here click on here and then click on row options for the row. Anchor
We're going to label this as abouts. So that is the location
So as you can see on the right-hand side here, it's hash about so that's the location for about the next section
so hover over here row options and this one is going to be
Services, so make sure it's all the same as the link that you set in before. So without the hashtag in front
scroll down the gallery section
Row options and this one's going to be gallery
Scroll down again, and this one is going to be the blog so row options
Blog and the last one is going to be the contact section. So hover over here row options and then wrote anchor
contact so that's pretty much all you need to do so we can click on save and make sure you
Test it to see if actually works so click into abouts
gallery
services
the
Contacts yeah. Oh good
So if you do have any problems, it's mainly because you haven't set in the link correctly
For example, we didn't put in the lower case or you've just messed up the sort of labels
So make sure to check that
So what I want to show you guys now is to ensure that your website is fully mobile responsive on
Mobiles as well as tablets. So if you resize your screen and
we scroll down you can see that it resizes pretty nicely as well and
Over here. It doesn't look very good. Right? We've got the image over here. It's like nice and small
It's squashed with the text. But generally the theme does do a good job in making it responsive
But sometimes we do need to edit it. So I do want to show you guys exactly how to do that
So let's go and turn on the Builder and there are a few ways of doing it
so I want to show you all the ways of doing it so over here we can select mobile and
What this is going to do. It's basically going to save the settings for mobile settings only
So if we hover over here you can see this is what it looks like on mobile
So what we want to do is instead of having two columns. We sort of want to just have one
So hover over here and select one like that
Okay. So what you can also do is maybe add some padding as well
Maybe I do want to have the text on top so you can hover over here again
And then you can change right to left and that's basically gonna adjust it a little bit
So that you have the text on top and then you've got the image
So you can always always adjust that like that. And then let's say if you do want to keep it like that, that's fine
We can click into the text over here
Styling and then click on padding and then we can set in some padding on the top. So maybe let's try
25
So that's going to save just for mobile devices only. So if you go back to desktop
Then it's going to sort of readjust to what we have before
So let's go back over here that's going to change
so you need to readjust everything on your page that needs adjusting like that and you can also click into let's say
This video module section or this entire row?
So maybe on mobile you don't want the video for some reason or you just want to hide something?
Then let's go over here. And then we can click on the sort of three dots over here and click on visibility
So essentially what that is it is if you want to hide certain things certain rows or certain modules
We can hide it for the mobile or tablet or anything like that
So now that we've hidden it then on mobile people won't be able to see the video this entire row
so as you can see, it's hidden and
You can definitely play around with the settings over here
You can also navigate here by clicking on the I icon over here as well
Okay, so click on that and that should be done now the other way of doing it is also from your customizer section
so save the settings and
Maybe I do want to maybe make this one the padding just reduce it a tad for a mobile
So maybe that's 350
So let's pull it down
here
150 and same for the bottom maybe making 150 as well
Okay, perfect done save and close
So before we move on I do want to give you guys a quick tip
So for example on the parallax scrolling for desktop what I generally recommend for the hero image like the first image on your website
Maybe instead of parallax scrolling set it to full cover and then you can set the background to the fixed
so the background attachment so it's a little bit more responsive on mobile when you set that in and
That's why I personally recommend now if it's like the sort of like the middle images
Like for example the sort of the turtle image before so let's just close it and it still creates the parallax effect
And if we scroll down over here the turtle over here, so that is still okay on mobile
But sometimes you may need it to be a little bit more responsive for mobile
So that's why I recommend the sort of fixed scrolling one
Click on customize on the top
So over here we can also click on the styling here as well
So for mobile
we can click on that and
We can adjust the sort of the size of let's say maybe the body text or maybe the heading text specific for mobile as well
so let's say for example, we can go to body and
Body font and by default the body font. I think it's 16 so we can reduce it to let's say 14 then
You can see here. It's changed for mobile
So before it was like 16, but we can adjust it to maybe 15 and that's only going to be specific for mobile
So if you click back onto the desktop, it's going to readjust as well. So sometimes you may need to readjust
The body font as well as the headings specific for mobile by clicking on here
So I do want to show you guys how to edit some stuff as well. You customize a section
So for example when I mentioned when we were creating the hero text over here
You can click on headings and you can edit the heading one
Sort of headings universally for your entire website as well so you can do that over here
And that's why I personally recommend because that way you don't have to always set it
You know to the specific font all the time. You've got the standard font
so for example, this is the heading two we can go to heading two and
Then we can do
Make sure we set in Monserrate or maybe you want to change a different font or anything like that and then we could do
For the font weight, we could be bold something like that and then we could do letter spacing maybe one
And then that might look okay
then you can also adjust the color and everything like that click on publish and
Then we can scroll down
The only other things that I want to show you guys before we create our logo is maybe we can go to
The blog so let's say for example
Click into the blog
So over here we've got the forum so to edit the styling that you can edit it here, right
This is the sort of the widget sidebar area
You can also edit the sidebar you can edit any section of your website as well
So for example when we're scrolling down the sticky header
You can't see the text so you can also go to sticky header and then we could do the sticky header link
change it to maybe two to two so hopefully
That is going to display right so we can adjust everything that we need sticky header and everything like that
So what I want to show you now is how to create your logo for free as well as their favicon
Okay, so to create a logo what I recommend is going to canva.com
So canva is really really awesome. I highly recommend it for any type of design work
So we're gonna create a logo
So on the right over here click on create a design
So you probably need to log in first with your Google account or Facebook. Click on custom dimensions
So the dimensions that I recommend is five one two
And then for the height is one to eight create design. So we're gonna be creating a logo that fits into here
So it needs to sort of be like a horizontal logo rather than sort of like a square one
So for example Apple it fits into their sort of navigation area same with Tesla and same with Nike
So we're not going to be creating like a square one
But you can adjust it later on if you do want to use it for sort of other
Marketing materials and things like that as well. So what we're going to do is first of all, add some text
So click on text on the left so over here, you can choose a text that you like that suits your brand
So previously I talked about like the San serif and also the serif typeface so think about which one you want to pick
So I just want to create a modern design so I might pick this one over here
So it's a sans-serif drag it in and just drop it
And then I might just delete the bottom like that's and then just keep that
So here we're gonna type in like a title. So I'm gonna call it parallax. Oops
Something like that. And then what you can do is just drag it into position and
Then we can resize it just by dragging and just pulling it over like that
So we're gonna make sure that it fits in there and you can also change the color as well as edit the font over here
the next thing that you want to do is add in maybe like a little icon for
Your brand so you can click on elements over here and you can search for different elements
So if we search for let's say the Infiniti logo
So there will be plenty of different logos that you can choose. So for example, let's pick maybe is one over here
okay, so
As you can see when you hover over it
It has sort of like a icon that says pro and that is for pro account only
So what I do recommend is signing out for the free trial
I think it's like a 30-day free trial and you get to download all the pro sort of elements and everything that you need for
You know your logo and anything that your business needs as well
So I think that's good enough and it may be perhaps I think that's good. So you can also change the color
now what I do recommend is first of all, we're going to download that so click on download and
What I recommend is downloading it as a PNG transparent file. So basically the background there is no background
So we're going to click on that and I do think you might need to sign up for the pro account for that
So make sure to do that and then click on download
what I do recommend is creating a black version or a colored version and
then you also want a version which is white as well because sometimes
When we have a background we need to use the white version of the logo
So change your text and change your icon to white and then download it again as a PNG
So you can also create a colored one as well in case you might need it later on
So we're going to go back onto our website over here, and we're going to add in a logo
So click on customize and then you want to navigate to site logo and tagline
click into that and click on site logo and
Then click on logo image and then click on plus and
we want to upload files select files so we can upload the new logos that you just created and
they should be a PNG file and
here I'm going to select maybe the white version of it and click on insert image and
Here it is
so what we need to do is we're going to set in I think this is the width of it to 1 to 8 and
Then that is good. Okay, so that's going to scale down proportionally
normally
I only sort of edits one of these boxes over here and 1 to 8 is perfect for the size that we just
Added in so sometimes you might need to sort of play around with the different settings like might change it to like 48
You can use so normally I just you know resize one of them like for example, or maybe try 38
I think that's that's ok as well
So we can also click on the site logo margin click on that and these are like that and sometimes you might need to add
Some margin on the top of that logo or maybe minimize it like that
So it really depends so you might do maybe three
Let's see and how that looks maybe let's try
Edit that a little bit maybe 10
So you might need to adjust it so what I'm gonna do is I might just change it to let's say 32
Let's have a look at this. So we're going to adjust it. I think that does look okay at the moment
So then we can click on publish. So with the sticky header as you can see the links are dark gray
Which we've changed before so sometimes we need to edit that
So let's go back to the sticky header and for the sticky header wrap. I might just change it to like a white version and
Now we can't really see the logo, right?
so what we need to do is edit the sticky header logo to the black version of our logo select it and
then here we're going to change it to 32 and
Hopefully that's going to change. We just need to publish it and probably close it for that to sort of update for us
So now that is set in really really nicely
So sometimes you do need to play around with it. But if you followed the tutorial then it should be okay
So everything looks okay at the moment and we might want to change the font as well
Because I think it's sort of like the default font. I thought I changed it to monster wrap, but I don't think it's edited
So I'm going to go ahead and change it
click on the body over here and
Then for the body font, let's change it to
Montserrat over here and select it and that should be all good. We might need to change the font way to
normal, and
I think that is looking great
So let's change maybe the font size to 15. So a little bit smaller. I think it looks quite nice like that and
Then for the body link over here, so this is red right now
So I'm gonna click on body link and we're going to change it to the pink color
So basically it is very very consistent with our design over here. Same thing for the body link hover
So generally what I want to do is probably get the correct color code from before
But in this case, I'm just gonna sort of freehand it it's gonna click on it
and then we're going to make it a little bit maybe darker so drag it down a little bit and
Then when your hover over it, so it's a little bit darker, but it is consistent. So it's not like some random color
Where you pick like a blue it helpers like that. That's not good
You want to take a little bit darker or a little bit lighter? So I think that's okay and then click on publish and
Then we can close it. The next step is to add a 5 icon. So we do need to create that again
So let's go over here
And what I want to do is maybe create a new file so file and then we're going to create a new design
Set a custom dimension 64 by 64
create new design and
Then let's search for the elements as you can see
there's a lot of different templates which you can use as well, but let's click on elements over here and
infinity again
So let's drag in that same one drag that in and then we're going to make sure that is nice and large
So that it shows up properly
thing like
That's alright. So obviously you can try and make it a little bit better. So you can also add a background to it
So maybe if you want it to edit and change the background then it's gonna look something like this
But I sort of just want it to be like that
So we're gonna just undo that and then we're going to download it save it transparent and download so we're gonna go back over here
Navigate to dashboard
navigate to themify ultra themify settings and
Then click on the favicon upload
choose the favicon open and
then sometimes if you can't click on upload doesn't open up what you need to do is click on media and upload it there and
Then copy the URL and paste it into here and then click on save and then you should be pretty much good to go
So let's go and refresh that page and there you go. So you got your favicon you got your logo
Everything looks great. And if anything does not look good
Then you can go ahead and customize and edit all the different sections
So what I want to show you now is how to ensure that your website shows secure
so right now it says not secure and that's not good for search engine purposes and sometimes when people land on your website
It doesn't look very trustworthy when you've got not secured. So I'll show you how to secure it with a lock icon
so what you need to do is log in to your site count account and
I'll also show you guys how to do it. If you're not using site count as well. So click on web sites and
Then here you can click on site tools. I think you can also click on add SSL over here as well
so click on that and
Here you can scroll down and
Basically, we have selected the let's encrypt SSL so scroll down over here and then we can select the domain name
Over here. Normally you'll only have one and then you can click on activate and
Then that's going to take you to the sort of site tools area. Anyway, so we're going to go and click on SSL manager and
Select your domain select. Let's encrypt and click on get
Ok, so once that is finished installation
Then we can go back over here. Click on the dashboard and then we can go to plugins and
We're going to download a new plug-in. So it's called really simple SSL
so really simple
SSL and he don't enter and then install now and then
click on activate
So you should get this message over here so we can go ahead and activate
SSL now generally if you're using another host, it should show the same message as well
Now if you don't see this message over here, it says like it's error that you don't have an SSL certificate
Installed on your domain then what you need to do is contact your web host and they should be able to install it
Let's encrypt on your domain for free. So generally it should work. Then. I'm gonna click on go ahead and activate SSL
And then once that is done then we might need a log back in so let's try this our website and
Then okay, so we don't need to log in
Alright, so if you do then log in we're going to turn on the Builder because it says not secure over here
So what we want to do is we want to click on save and then we want to close it
Alright so that ensures like all the images that we upload before sort of has gone into HTTP
So for example, if we sort of move that in there we can click on styling background
So the sort of image URLs have changed. So that's what the plugin does click on save and then we can click on close and
Then you're pretty much done
Okay. So before we finish off this tutorial
I do want to show you a couple more things
For example how to add in a new page and use the layouts as well as updating your theme
so to add a new page we can hover over here on the top and then click on page and
Then we can add in a new title
So for example, I'm just going to name it service one and then click on publish publish again
Click on the title again. Click on the link and
then we can turn on the Builder and
then over here next to the modules we can click on blocks and
Then we can scroll down and we can use one of these blocks to sort of speed up the process of creating our website
So, for example, we like this over here. We can click it and drag it and just drop it into our wrote
Okay
so the reason why I didn't show you guys this earlier is because
If you didn't know how to use the Builder
then you're gonna find a hard time sort of using the templates because you don't know how to arrange things and don't know how to
Design it and things like that
so now that you do then this is going to be really easy so we can click into it and
then we can change it just
like that
So really really simple and you can hover over here and then click on styling to change your image and things like that
So we can click on done. So they've got some nice sort of templates as well
blocks, so for example the FAQ sections which you can use and change the text and then let's say we've done it we can let's
Just click on delete for this
All right
And then we can add in a layout so you can hover over here layouts
Load layout and this is sort of like a whole page layout which you can import onto your page
So let's say for example this really really cool one here
we can click into it and replace layout and we can go into here and
We can change the text and change the images. All right, so this is not very very practical
But it is really really cool and you can take inspiration from it
So we could also go back to layouts over here
and if you create your own layout
You can also save as layout so you can create a new page and then sort of load layout and use your own layout
Same thing with the blocks
So for each sort of road
We can save it as a road and then when we create a new page we can use that same road
so this is really going to speed up your process if you're designing websites for your clients or
Maybe for yourself as well
If you've got like a lot of service pages and things like that
so we can click on save over here and we can close it and
As you can see the page might appear on the top now
if it doesn't appear then what you can do is we can go over here to
menus and
This is the backend page where you can edit your menu structure as well. So make sure you select your menu
so sometimes if you've got two menus you might need to select it from the drop-down and
Here we can click on the pages and we can add it to our menu
so because we've selected
order to add pages
Then it automatically will add new pages once you create it so you can create like a drop-down or anything like that
You can also click on 'contact on the drop-down here. You can also highlight that link
so if we save the menu, then we can go back over here and
You can see that is sort of highlighted. So that's really really nice. And then what I want to show is we can also use
Animations. So for example, click into that module click on here animation and do an entrance animation
So for example, we can set it to fade in
Like that and then we can do the second one
Another animation to fade in as well. So normally we want to keep this very very simple
You don't want to over animate your website. So we're gonna set a delay one second delay click on done
Second one over here
animation
Set this one to fade in as well. And for the delay. It's going to be 1.5 seconds
So you've also got all these different types of modules which you can use as well
but don't go crazy because adding too many animations is going to make your website slower and
If you don't do it sort of nicely. It's gonna look a little bit spammy
So I don't really recommend it too much we can click on save and then we can close it
And that's gonna look really really nice. So another thing I do want to show you guys
Maybe we can go over here and turn on the Builder
I think this is a really great way to keep your website consistent and that is to use the copy
Styling function. So for example if you want to copy this button over here
We can click on the copy
Okay. Now if you have let's say you're creating a new button on another page or anything like that when we drop in a new
Button, let's say for example
Drop that in and pretend. This is a new page and
then we put that in right so we can obviously
Reconfigure it but that's probably the slow way we can click on done
we can hover over here hover over the three dots and
paste the styling and
that's gonna sort of keep that same styling and then all you need to do is change the text and also the the link
Alright so that everything is going to look super consistent with your website design
If you do get an update notice in your dashboard area of your WordPress, then what you can do is go to my website
so Hoganchua.com/update and then you can download the themify ultra theme if you're following this video and
Then you can download it onto your computer. And what you can do is go back to your dashboard and
we can go to appearance themes and
What we need to do is activate a new theme. So for example this one over here anything so just click on activate and
What we need to do is to delete the old theme over here and we can click on delete. Okay?
So now your website's going to lose sort of everything the content everything, but we can restyle it back
so let's go back to our dashboard and
Then we're going to re-upload the new theme that you downloaded
The update link. Okay. Go back over here
add new upload theme choose file and
Then just upload the theme that you just downloaded click on open
Install and you can also go back over here now
If you do want to backup your website, you can watch this video over here
but normally all the settings will remain and the site will be back after we activate the theme that we
are installing right now and then click on activate and then we can go back to our website and
Everything should be all good. Now you can also get automatic updates as well as support as well
So if you visit the link over here
You can get access to the theme of our membership where you can get a license key and that way you can automatically update
Without sort of deleting the theme and reinstalling it again and you also get access to the support forum
So if you have any questions and you have any issues, then you can ask the support forum
And basically they can help you out
So this is really really useful if you're creating websites for clients
Or you are serious about creating website and you can also use the discount code Hogan and that's going to save you 30% off
Okay, so if you have any issues or any problems?
Make sure you drop it in the comment section down below and I'll try and get back to you as soon as possible
Then we can go back over here on our website and that is pretty much it for our website
so the last thing that we can do is we can log out of our page so we can click on logout and
then we can visit our home page and
This is the website that we created and thank you guys so much for following this tutorial. I really really appreciate it
And if you did find some value in this video, make sure to give it a big thumbs up
It really helps out the channel and if you have any questions drop it in the comment section below
I'll also have an FAQ link in the description as well
With the most commonly asked questions. So thank you guys so much. See you guys in the next video
