How to Make a WordPress Blog | Step by Step for Beginners | 2016

Are you sick and tired of
cluttered, busy, ugly blogs and websites?
Unimpressed by complicated tutorials
confused and overwhelmed by all the possibilities
Afraid to build a blog or website, even though you know you need one.
Hi, my name is Hogan. And I'm going to show you how to make a blog in under 90 minutes.
Without any coding, css, html or any technical experience.
In about 60 seconds, I'm going to show you exactly how anyone can make it. Whether your 15 or 55.
if you want to spend months learn code or have a few thousand dollars to spend to hire an agency
then this is definitely not for you
But if on the other hand you are not a tech savy person and you've never built a blog
If you've tried and failed but you still want to make a beautiful blog of your dreams, quickly and cheaply.
If you want a step by step guide to walk you through from start to finish
If you're sick of free website builders that aren't really free and have a million limitations.
Then this tutorial might be the smartest investment you make with your time in the vital weeks and months ahead.
This tutorial was made because of popular requests from people who watched my other tutorial.
which is nearly 200,000 views in just a few short months.
thousands of people just like you found me on youtube have successfully built their blogs and websites already.
Anthony says this is by far the best free tutorial I've seen to date hands down.
It outperformed some paid tutorials on lynda.com, I'm not kidding.
Armin says for me personally this was the most helpful video ever in the topic of web designing.
And now you're probably wondering, Do I have to build this exact same blog.
You certainly don't, I've built some demos to show you that the possibilities are endless.
You can check them out a hoganchua.com/demo
the link is also in the description.
by the way I might say website instead of blog, because there pretty much the sam thing.
A blog is a basically a place where you write your story which is then displayed on a website for people to read.
Don't worry, if you're an aspiring blogger this is definitely the tutorial to follow.
I'm not going to waste your time. I'm going to log in and show you how easy it is to use.
So let's turn on the builder, as you can see everything is separated by rows and columns.
I'll you how to use it in just a moment.
If you don't like this specific design, you can move the things around and change it .
For example, you can move module up here
or you can move it back down here.
And to delete it we simply just click the x.
We can even copy and paste.
This uses a 100% front end drag and drop builder.
I'm sure you'd like to emulate and take inspiration from popular blogs and websites
but you held back because you thought you couldn't do it.
But now if you can dream it, you ca build it.
Over the years, websites have evolved
from 1998
to 2005
to 2010
and now 2016
And if you're building a website using code,
hiring an agency, or even following another tutorial without drag and drop
That's either going to be a headache or leave a hole in your pockets when you want to update it.
With this you'll be able to keep up with all the design changes and save that cash.
There are millions of websites today, so do you really want to have the same website as someone else.
How will your visitors differentiate you
Would you wear the same clothes as someone else to a party?
No you wouldn't, so why would you want to build the exact website.
So I'm gonna show how the layouts work and how to build something totally unique.
So as you can see, we have rows here and we're able to set the columns for each of these rows.
Now do you want to see how easy it is to add content?
If you want to add text, you can drop the text module inside the box
Add the text.
And you have an individual styling panel with over 600 fonts to choose from and then you can save and there you go.
If you want an image, you can drop an image module. Upload your favourite photo and then click on save.
And there you go.
If you want a video, you can drop a video module
and then you can copy your URL of your favourite youtube video
and
paste it into here and then click on save.
If you want a slider, you drop a slider module.
You also have the option to display either blog posts, images or even text.
So, if you want to add a map, you can drop a map module.
Add your address and click on save.
So as you can see, that's pretty easy to do anyone can do it
And, if you don't like this blog posts then you can change the layout for that aswell.
If you want to display all the blog content on the homepage, you can also select this layout
and the click on save.
if you want to display a smaller blog post and then you can select this one.
If you want to hide the feature image, you can also hide that really easily.
You get the picture.
Also, adding blog posts is just as easy.
If we head of to the back end
We can click on posts
Add new
Add title.
Add the text and images and video into the editor.
Which is very similar to word.
Enter in your categories and tags
and then add a feature image
and then click on update.
and then we can click on view posts and as you can see that's really easy to update.
Is it mobile responsive?
There are more mobile devices then there are people according to GSMA Intelligence.
These days everyone on the street, public transport, even in cars are starring at their mobile screens.
so you'd definitely want a website that is mobile friendly.
And luckily for you, it's also mobile responsive.
So it's gonna fit into any mobile screen really easily
And as you can see this is what it looks like on a iPhone 5.
You can also check it out on your mobile device right now.
Have you thought about adding an online store, later?
This is also WooCommerce compatible which means you can build an online store to sell digital products
such as ebooks
people can pay for it and then download it instantly after they've paid.
Or if you want to sell physical products such as clothing or shoes.
this is just a sample page I created show you as an example.
I'll also make a video on how to set it up.
I'll let you guys know where to find it at the end of the video.
On the homepage, you might want to change to a different sidebar.
And, you might want to show your most popular blog posts, along with some thumbnails.
And you can do that too, which I'll show you in the tutorial, which is really really simple.
for example, this is the one that I did for the travel blog.
And as you can see, it looks really cool as well.
Do you want to add extra functionality to your blog?
What I mean by this, is in the future you want to allow people to make appointments online.
Add a members area.
Add a forum.
Add tables or even a pricing table and you can do that aswell really easily.
You can extend the functionality of your website by adding the free or paid plugins.
It's just like the app store, you have for your iPhone or Samsung.
For example, this instagram feed is also a plugin.
Which I'll show you how to add in the tutorial.
So whatever business or brand you can find a plugin to help enhance your blog or website
without any technical experience
On this platform, there are over 40,000 different plugins while other platforms such as wix only have around two hundred.
Perhaps you want to have a different header or a footer design and you can change that with a few clicks.
You can even remove the footer or the header with a simple selection on the backend.
For example, this website here and yes you can even add a background video – just like this one as well.
Is your audience not english speaking?
This is also WPML compatible which means you can get that wordpress plugin
and translate your website into a different languages.
Did you want to know how easy it is to add advertisements? and make money?
Even though I don't like websites that display thousands of adds on the sidebar
You can do that very easily but just don't go overboard.
Drop a image module, add the logo or the ad of the website you're promoting.
And you can add a direct link or your affiliate URL right here.
And then click on save.
So you can either rent spaces out on your website for a few hundred bucks a month.
Even a few thousand if you're very lucky
or promote favourite brands with your affiliate link with just a few clicks.
Are you worried that it is not search engine friendly?
billions of people use search engines to find information
and if your website is not ranked highly on Google
then basically you're missing out on the best customer because their looking for exactly what you have to offer.
There over 1,000 people searching for food blogs every single day
and if you're here, that means you're gonna get hundreds or even thousands or more visitors to your website.
Isn't that what you want?
More readers, more followers and more money?
Obviously, this isn't an overnight thing – you'll still need to optimize it.
But since it's built on the wordpress platform you're building on a right foundation.
The same can't be said about other website builders which are built on flash.
Or just don't have a good search engine friendly structure.
In summary, I'll teach you step by step with no steps skipped
to build this entire blog in under 90 minutes.
You'll be able to see and build whatever type of blog you want in real time.
Be able to edit where ever or when ever you want.
Even on your tablets or mobile devices.
Join thousands of others who have built their blogs and website already.
Join top bloggers who are using the same platform WordPress to make six figures a month.
For example, Smart Passive Income by Pat Flynn.
And also entrepreneur on fire by John Lee Dumas.
Other sites such as Forbes, CNN, Jay Z and even Katy Perry use it.
Again, you can check out the possibilities at hoganchua.com/demo
And the link is also in the description.
As attractive as this tutorial and website builder offer is
only a small amount of people actually follow through and start building.
although that's okay for me, it still bothers me personally
because I know how much the people who have actually followed the tutorial have benefited.
I read their emails, I talk to them on facebook
I reply their comments on YouTube
and I also see their completed websites.
and hundreds of people have told me that my previous video was the best tutorial for making a website.
And this is no but it is for a blog.
Because of this I just hate the thought of someone not following the tutorial
because some error or omission in my explanation
So that's why I want you to not let fear hold you back and ask any questions that you may have.
But I suggest you to just try it
and you probably won't regret it because you'll learn something anyway.
And understand that build a website is like building a house.
You want to build your house on a very solid foundation that allows you to expand
Add new levels as your family grows
It's stressful and costly and a waste of time to move your website from one platform to another.
I truly believe that this tutorial will get you from A to B the quickest,
easiest and cheapest without compromising on functionality and also your ability to scale later on.
Anyways for those of you who want to act, lets go through what we need.
Okay, so I'm gonna go over everything that we need and also the costs.
The first thing that we're going to need is a domain name.
And basically what that is, is for example YouTube's domain name is youtube.com
Our one would be your business name or your name .com
Second thing we're going to need is hosting.
Hosting is where all your website files are going to be stored.
So people can access your website 24/7.
All around the world.
The 3rd thing is, we're going to install wordpress
The themes and also the plugins.
The forth thing, is we're going to configure those settings.
The fifth thing is the fun part, which is building the website
And I'm also going to be holding a competition for the best built blog or website.
And now I'm going go cover the costs.
And basically as you can see I'm actually in the website now.
And I'm going to turn on the themify builder.
So let's double click on this
So I just want to show you how easy it is to use again
Okay, so before I tell you the costs the truth is when I first started out
I thought, you know, making a lot of money, thousands of dollars a day without investing much money or even time
That, you know, It's very possible, you know, because you see all those ads and everything like that.
You think everything's like quick and you can get everything for free
So I've been the guy, literally, you know, trying to get free websites,
you know, free website builders, free hosts a free everything.
But sooner or later, you know, you realise that is no such thing as a free lunch.
Like for example, if you get a free domain on wix or any free website builder.
It's normally something like
your name .wix .com, so it has their extension on it.
So when people ask you, you know, what is your domain name
Like it's more professional to say you know, miamiller.com
Rather than miamiller.wix.com
And it's also easier to remember
And the thing is
they have alot of limitations if you don't pay, so you have to pay to unlock alot of the features
And most of the time, it's actually more expensive because your paying for the convenience.
So with that said, the domain only cost you $13 per year.
Which is about a $1 a month.
Also the hosting is $12 a month.
So, that's about 40 cents a day.
But, to get started I've also got a coupon code which will help you get started for about 1 cent.
For the first month. Okay.
And installing WordPress, the themes and plugins is free.
So of you may notice the theme, that we're going to use is the Ultra theme by Themify.
and it's actually a paid theme.
And you might be wondering, how can I actually offer that for free.
A long story is when I first started out building, I was looking for a builder
for my local website, I found Themify.
And I built a site using it, It took a long time to actually get the hang of it.
So I thought, why wasn't there any tutorials on it.
So, I asked Themify If I could make a tutorial to share it on YouTube.
And they were generous enough to allow me to do that.
Because it creates a win win situation for everyone.
you know, gets their brand more exposure, I can create tutorials.
You guys can learn to build the website using a really, really amazing theme
I think its the best one out there, honestly and if you guys don't believe me
Then you can either contact them or you can check out my comments on the other youtube videos.
And honestly, I would not make a video, spending hundreds of hours.
Doing it if it was illegal. So, just think of it another way. So just like beauty products
Where brands give youtubers their products to show their audience how to walk like Lady Gaga
But instead I teach people how to make beautiful websites.
Now, if you want additional support and updates which i think, if you're serious about blog and website
You'll probably get that anyway, so you have that option there
But if not, you want to try it out for free and use it for free without support
Then that is totally fine as well. And yes, this is the full theme without any restrictions
What I'm showing you right now, is what you are going to get
It's not going to be any up-sell or anything like that to unlock any of the features
You can get additional plug-ins but that is totally up to you
I think it is more than enough, it's more than, you know, what anyone needs
You can literally build anything with it and another thing I wanted to discuss is that
There are a lot of tutorials that are using free themes or themes that are built
By just one person. The problem with that is, you know, if they decide they
Don't want to make themes anymore and disappear. Then you have no where to go for any help
So you either have to hire a developer or you'd have to change themes, which is quite annoying and stressful
Which is like moving houses because you need to move all the content, you know, change everything
And that's going to take a long time as well. But since it's used by over 52,000 happy members
You can be sure that they're still around tomorrow. So you've got that safety net there
So, and the plug ins is free which I'm going to show you how to configure the settings
for the WordPress, the themes and plug ins. And then we're going to build the website
which is free. I spent you know hundreds of hours trying to create this tutorial for you guys.
Um, I incorporated some design aspects of really popular websites.
I tried to make it like sort of simple and modern and clean.
Because I feel that's how websites are going these days
You know, with like really simple, like instagram, pinterest
They, you know, are going for simplicity because people don't want to have so much
clutter and ads, and pop ups and all those things
It's really important, so that's why i made this design for you guys
And then we're going to have the competition
The competition basically we're going to giveaway $200 to the winners
of the best design blog or website
I'm not sure how that's going to structure
I might have 2 winners or 3 winners or 4 winners
Really depending on how many submissions we get
And you can submit your website at hoganchua.com/competition
The entries will close on the 31st of January 2016
And the winners will be announced the week after
So make sure you subscribe and make sure you follow me on facebook
as i'll be announcing the winners there
For more information, check out the website and also check out the links below
Ok, so the total cost to get started is about $13
Not $1300 or even $130
That's about a return investment of about 10,000% on the money actually saved
And one of the greatest entrepreneurs, Henry Ford said
"If you always do what you've always done, you'll always get what you've always got.
I understand a lot of people see blogging or making a website as an opportunity
to provide an extra stream of income, passive income, to create a better lifestyle
but the thing is, if you don't take any action, nothing will actually happen
And here is something that I read in a book called " Disrupt you"
and it says advances in 3D printing will allow anyone to print off anything
they need at home, which threatens the jobs of 320 million manufacturing workers around the world
Self driving cars, you know, trucks and drones will displace tens of millions of more workers
Automation of knowledge work will have a 5-7 trillion dollar impact on white collar jobs
So, as you can see, if thing are really changing really fast
theres massive disruption, and also the economy is changing
But, there are also big opportunities to be taking advantage of
And I think blogging and creating online business is one of them
But only if you act. If you don't act, you know, things are gonna stay the same
But I feel if you learn how to make a website, you'll still need that skill
because if you're hiring someone else, it's gonna take so much time, to like, communicate
what you want and the design you want with them
and then, they're gonna send you like a mock-up
and then you're gonna go back and forth, back and forth
And in the end, you're gonna waste so much time
it's like so much easier to wake up and you know, you want to change something
and you can do it yourself.
So, as you can see, like if I want to change this then I can log in and you know, change every thing myself.
Rather than sending an email to someone else or asking someone else to do it
It's just,you know, these days, I feel everyone needs to have these basic skills
Ok, so with that out of the way
Lets get started!
Ok, so we're gonna get our domain and hosting and we're gonna get them both at the same place
You can go to hostgator.com or you can click on the pop-up that's gonna pop-up now
that goes there.
So, hostgator.com
And click on enter.
So, I've been using hostgator for about 5 years or so
And haven't had any major issues using them
So that's why I want to recommend them to you guys
and they also host 9 million other domains
So they've got to be doing something right
As you can see on the top right here, they also offer live chat support
So, what that means is, it basically eliminates the need for submitting support tickets
So, you can get answers to your problems within a few minutes
if you use their live chat option
And also you get a 45 day money back guarantee
And yes there are cheaper options, but you gotta be aware of those ones which
say they're free or that they're super cheap
Because you get what you've paid for and posting something that you don't really
want to go cheap on because it's basically where all your files are stored
So if your host is having problems, then your site might not be live
So people go to your website, but they can't access that
So in the long run, it might cost you hundreds or even thousands of dollars
And your certainly don't want that because moving hosts is a another headache in itself
So anyways, lets click on 'get started'
And if you scroll down a little bit, you'll see that theres 3 different plans
Hatchling, baby and business plan
Hatchling basically means that you can only host one domain
Baby plan means you can host unlimited domains
And lets not worry about the business plan because I think the baby plan is enough
Because it lets you host unlimited domains
So basically, you can even share these hosting accounts
with a friend, or even two friends.
And then split the, you know, monthly bill.
So what you need to do next is click on here
Now, the first thing we're gonna do is choose and register a new domain
If you already own a domain, then you can click on this option on the right hand side.
But, right now, all you need to do is to type in a domain name for your business
or your name, just anyone you like
But, not all of them are available.
For example if i type in Mia Miller, and then click on the outside here
And it will show that it's unavailable.
So if it's unavailable, then you have to try to choose one thats available
And I highly recommend choosing a dot com extension because thats what people normally type in there.
So lets just try another one for example
and click on the outside
So, as you can see that is ticked and that is added to your cart.
Ok, so you scroll down a little bit.
If you wanna get domain privacy, you can get that.
But, I don't think you need that.
Ok, lets un-tick this
For the package type, make sure it's the 'Baby' one.
Or 'Hatchling' plan
So for the billing cycle, you can choose 36 months, which is 3 years
And you pay that up front to get a bigger discount
But, I normally choose just month to month.
So click on that.
And for your username, just type in any username that you want.
For example that
And security pin
Scroll down and this is where we enter our information
Ok, so type in your email address, your name, your phone numbers
And your address
So, I'm going to quickly fill all that in
Ok so after you've filled all your details in
Then you have to choose your payment method
So if you're paying by credit card, then you have to type in your credit card details
into here
So that's just an example
And the CV number is the number on the back of your credit card
Ok, and choose your expiry date
Or you can also pay buy PayPal.
So if select this then afterwards when you actually checkout
Then you'll have to log into your PayPal and confirm that payment.
So scroll down here and there are also additional services
that I'm going to un-tick
for now
And you can get these if you want later on .
So don't worry too much about that.
Now, you can use the coupon code 'SNAPPYDAY'
I think sometimes they might offer a better coupon code.
But you can use the coupon code 'hogan1cent'
So that basically allows you to get started, you know, with your blog
for the first month only one cent
Oh and if you use my coupon code.
I get a small referral fee for that so, that helps me support my channel and also
Ah, let's me create more videos for you guys and it's much appreciated.
So after you've done that then you can check all your details
and you can click on I've read and agreed to the terms and services.
And we're going to click on check out now, okay.
I'm not going to click on this because I've already have an account
but after you click on it, you should get a congratulations page.
And within 1 or 2 minutes you'll get an email.
To your email account that you put in here, so make sure you put the right email account.
And you should get all your details for your Cpanel login and that where we're going to install wordpress.
Okay.
So, I'm going to head over to my email now.
Okay, so login to your email.
And you should get an email, something like this and click on that.
This is where your control panel, they give you your URL and also your username and password.
So click on here.
And then just basically copy over your username and password.
So enter your username and also your password.
So you can just copy that password here, directly into here and click on login.
Now, scroll down a little bit.
To quick install, okay close this popup.
Sorry, click on quick install.
And we don't need this anymore, so we're gonna close that.
Ok, so scroll down a little bit, you can either click on wordpress or click on here to install wordpress.
Select 'install wordpress'.
And select the domain name that you just bought.
As you can see, I have a few domain names, so just select that.
And you don't need to put anything here, unless you want to install it on iammiamiller.com/test or another name.
Ok, so just leave that empty for most of you guys.
For the admin email, just type in your email address.
Blog title, just type in your blog title.
And you can change that later on.
For the username, so this is gonna be our log in username
And first name
And last name
Ok, so check the details there and then click on 'install wordpress.'
Select 'no thanks' and that's just gonna take a second to install
Ok, so it says your installation is complete .
And if you click down here, they'll give you an url.
If you have just bought the domain and hosting from hostgator
Then it might not be set up yet.
It might take 15 to 20 minutes.
Or you know, 2-3 hours and worst case scenario, it would be 24 hours.
But, generally, you can come back within 15-20 minutes
And your website should be set up.
And when you click on it, it should look something like a login page.
Something like that.
Ok, and…
Basically, you know, you can take a little break now and come back.
But, i'm just going to continue the tutorial.
So, click on your username and copy that over.
Paste it into here.
And for the password, just copy that directly.
And paste it into here.
And then, now log in.
Now, once we're logged in, we're going to see this little message here.
It says, "your site is currently displaying a coming soon page. "
So everyone besides you can basically see a 'coming soon' page.
So, when you're ready to launch your site.
You are gonna click on, ahhh, this button here.
Ok, so basically what we're going to do now is basically configure all the word press settings
And you know, basically have a fresh start .
To do that, first of all, we're gonna change our username, so go to users.
And….
Actually, we're gonna change our passwords, sorry!
Click on 'all users' and then click on 'edit'.
Scroll down a little bit, and generate password.
Ok, so type in your new password that you want and make sure you remember that password.
Ok, so confirm that password.
And then update the profile.
Ok, so once that is done, we're basically gonna so settings.
And permalinks.
Basically we're gonna change the link structure.
So its default is set to day and name. We don't want something like that.
We want something that displays only the post name.
So what that means is, when you add a page or add a post, it's going to be the post title or the page title.
So that's better for search engine purposes .
And also better for the user, so they know what your page is talking about.
So if your page has something like, you know, question mark p=1,2,3, then people can't tell what that page is about.
So, it's better to select this one.
And then click on 'save changes'.
Now basically now we're going to go to 'plug ins'
And, deactivate everything.
You know, cause we want everything
Clean and simple.
So we're gonna deactivate and also delete everything.
Now, after you've deactivated that, make sure you delete that, and click on 'apply'.
Ok, so click on 'yes delete these files and data'
Ok, so all those are gone.
Now what we're gonna do is go to our pages and also delete our pages .
So sample page, we're gonna go into 'trash' .
And, click on 'trash' up here again.
Then, we're gonna delete that permanently.
Ok, once that is done, we're gonna delete the sample posts as well.
So this 'Hello World' post, we're gonna click on 'trash'.
And then, delete that permanently.
Ok, so we're gonna check our website now.
Ok, so it looks pretty plain and simple.
But, basically we want to, you know, spend about 15 minutes configuring all the settings.
And, get everything ready before we actually start building our website.
It's basically like, you know, if you're cooking dinner then you have to go buy the groceries
And then, you know, you have to prepare the food and then you start cooking.
So, that's basically our process.
Now, what we need to do is, install the theme.
So, to do that, you can either go to the youtube description
Or you can go to my website to actually download the theme.
Ok so, hoganchua.com
And click on 'enter'.
So, what we're gonna do is click on 'blog'.
Ok, so it should be the first result here or you can find it here
So, it's how to make a blog tutorial.
So click on that post here.
And, now you can download the theme and also download the images as well.
Basically the images is what we're going to use for the tutorials.
So basically you can follow along in the tutorial.
Um, with all the images and things like that.
Ok, so download the theme to your computer.
And just click on that and it should automatically download.
And also download the images as well.
Ok, so, if you're using a Mac or a safari browser, sometimes, this file here
This file, the theme, it might automatically un-zip into a folder.
So, what you'll need to do is actually
basically right-click it and you'll need to compress it into a .zip file.
Before we can actually upload it to our website, okay.
So basically we are going back to our website now.
uh, Dashboard and click on Appearance
and Themes
So we're going to click on Add New
And we're going to upload a theme. Choose file.
So let's find our files
Okay, so that's our theme.
and we're gonna click on Open.
and Install Now
Sometimes people have issues uploading this theme because it's gonna show something like
"Upload Exceeded" or something like that.
And to solve that problem, make sure you check out my Frequently Asked Questions
as a lot of these questions has been asnwered already
specially for installing your website
Example, you might get a message like that so just click on this button here
and it'll scroll down and basically tell you what to do.
Okay, you can follow this tutorial Uploading via CPanel
Or if you're using something like Local Host, then you can upload your theme
um, directly into the WPContentThemes folder
Just by unzipping the actual theme first and dropping the folder into this folder here.
So if you have any problems with that, just ask in the Youtube section
Now, let's go to here and as you can see that's installed successfully.
Uh, click on Activate
and that's basically gonna activate our theme.
So, we're gonna close that and as you can see, it says:
"This version is available for update". Don't worry about this and follow along the tutorial.
You don't need to update.
Basically, I made the tutorial using this version of the theme and this version of the theme
the layout is a little bit different
So if you're finished building the whole entire website, you know,
Send me a message, send me an E-mail
um, send me your URL saying that you've used the tutorial
And for those of you who have finished, I'll send you the updated version
Or I think it's a really good idea to actually sign up for the support and you'll also get automatic updates.
So basically when you update now,
I'll give you a username and a password and you can log in and it'll automatically update.
Okay. So anyways, let's continue on with the tutorial.
So we're going to install the plug-ins so go to Plug-ins and….
Add New
Okay, so basically we're gonna search in some plug-ins and first one we're gonna search is for
for the Instagram feed so type in "Instagram Feed"
and click on Enter
And it should be the first result here and then click on Install now.
And activate that plug-in
Now we're gonna repeat the process for Easy Google Fonts,
the Mailchimp for WordPress and also Contact Form 7.
So I might go a little bit quicker. So go to Add New
and then mailchimp in for WordPress. Click on Enter.
And it should be the first result here with 300 active installs. Install….
..and then activate.
Now, the same for Easy Google Fonts. So Add New
Easy Google Fonts. Enter.
And this one here with 200 active installs. Install Now….
Activate plug-in
And the last one…
…..which is Contact Form 7.
Click on Enter.
And this one with over a million active installs. So, Install that now
and activate that plug-in.
Okay, so we've just installed all our plug-ins and right now, we're gonna configure
each of these settings.
So to start off first, we might configure the Mailchimp one.
so just click on Mailchimp and if you sign up with Mailchimp, you can get the API which is a
sort of a code which that you paste into here to connect your Mailchimp account with the Mailchimp for WordPress plug-in.
So you can get your API key by clicking here so you need to sign up for a Mailchimp account.
Um, you can get started for free so I'm gonna show you that in the tutorial because some people might
probably don't need it yet.
So I'm just going to show you how to configure the forms. So click on the forms.
And for Form Title, just enter any Form 1
Any title so just add the form, I guess.
And now you can basically preview the form to see what it looks like. Let's just close those. We don't need those.
Okay, so this is what the form looks like at the moment
and basically I want to delete this thing here 'cause
there's no need to add e-mail addresses and then you e-mail addresses again.
So to do that, what we need to do is basically just highlight here and delete.
Maybe just click on Delete.
So that moves up one.
And now what we can do is to save changes.
Okay, so basically we're gonna preview the font to see what changes have been made.
Okay so this is what we want. That's what we want.
And you can play around with the settings and variables here.
But I'm not gonna dwell too much on this stuff here so as you can see,
you can also change the messages and also the settings
and also the appearance.
So basically we're gonna leave all that now. That's all we need to do for this tutorial.
Now we're gonna set up the Instagram Feed. Click on the Instagram Feed.
Actually, go back for a second.
And I just wanted to show you the short codes; so where is the actual short code that we need.
So this is the short code. So if you copy the short code and paste it anywhere on our website,
It'll actually display our email opt-in box.
So I'm just letting you guys know this is where it is and I'm gonna come back and get this later.
So click on your Instagram Feed
And basically what we need to do is to click on Log-in and get my access token.
Okay, so basically when you click on that, you'll need to actually log-in to your Instagram account
and after that, you need to basically confirm that you allow this Instagram Feed app, to actually
give it permission to actually log in.
So, and it automatically adds the access token and the User ID here.
And then all that we need to do is copy in the Access Token
Copy that and paste into here
And for the User ID, we need to copy that and pase that into here
Now we're going to save changes
And as you can see, that was step 1. Now we're gonna move on to step 2 which is Customize.
So we're gonna scroll down here
And we're gonna go to the Photos tab
So for the number of photos,
we're going to show 6 photos initially
and you can change that to any number that you want.
We're also gonna set the columns to 6
and for the padding around images, I'm gonna select 0.
So basically what that means is this space around the images.
Now we're going to save changes
and then we're gonna scroll down
For the header, we're going to de-select Show Header
Scroll down a little bit and Show and Load More button.
I'm gonna de-select this because we want to keep it at a very minimal theme
So I want to remove anything that is sort of unnecessary
So that's why I want to remove all this stuff here as well
And show the follow button, we're gonna remove that as well.
and then scroll down
And basically that's it. So we're gonna save the changes.
And after you've done that, go to number 3. Step 3: Display Your Feed
and again, they have a short code so
If we copy this code here to our clipboard and paste it anywhere to our website,
then it'll show our Instagram Feed. So we'll come back and get this code later on.
So now, we've set up all our plug-ins and downloaded our themes
and set up everything on the back end
So we're gonna add some pages and add a blog post
and then we're gonna configure the actual theme settings and after that,
then we're gonna build our website.
Okay, so now we're going to add in the pages and also add in the blog post after that
So we're gonna go to Pages first and click on that
And there, we're gonna Add New
We're gonna add our Home Page first.So type in Home
and then click here on Publish
So we're gonna repeat the whole process for the rest of the pages
So click on Add New
Now we're gonna create the About Page
Publish
Now, Add New again
the Contact Page
Publish and then Add New
the Blog page and Publish
So to create any other pages,
then you just click on Add New and basically add in the title and then publish
Okay, so we're gonna check the website to see what it looks like now
So just click there and as you can see, those are the pages and it's in our Navigation Bar.
So now, we're gonna basically add in the post
So you go back to your Dashboard and click on Post
then we're gonna click on Add New
Now to add in the content, basically
it's much easier just to go to my website and go to my Blog
And click on the "How to Make a Blog" Tutorial
Okay, so scroll down a little bit. As you can see, we've got all the table of contents here
And just click on Adding Blog Post and it should scroll down here
And we got the text to highlight here for example "Summer Inspiration" for the title
So we can just copy that directly and paste it as plain text.
And the same goes for the text in the box
So let's just copy this
And paste that in. So as you can see,
it might be just a single line, the Toolbar here, make sure to click on this Toggle Toolbar thing
so you can actually see all the rest of the options, okay.
So when you click on that, it disappears and when you click on that, it comes back again. Okay.
Okay, so after you've added in the text, you can also add in your images really easily. So click on Add Media
And click on Upload Files
Select files
And for example if you want to upload this image, then just click on that. Open.
And it's gonna upload to your computer.
After you've done that, you can set this alignment to the center so its gonna centralize this image
And also make sure its linked to none
The size, you can change the size of that as well so for example Large
and insert that into the post
Okay, so that's inserted into the post.
And if you want to add a Youtube video,
then you can just go to Youtube and find in your favorite video. Copy this URL.
And basically just paste as plain text
And in a few seconds it's gonna load up like that. Okay.
And to center it, then select that and click on that to align center.
So it should align to the center once you've actually published it. Okay.
So I don't want to add any of that at the moment so I'm just gonna remove that
So you can do that really easily. Just click on the X here.
Now make sure you click Backspace. Like that.
Okay, so your cursor is here
Now we're gonna add in a new category. So we just add in a new category.
And for example this might be Inspiration
So, we're gonna click on Add New
And as you can see, that's Ticked, you want that. And for the Tags,
just add in some tags
So for example………
"Summer Favorites" and then Click on Add
And right now, we're gonna set in the Featured Image. So set Featured Image.
And this is the actual Featured Image that I want to set in which is for Blog Post 1
So, select that and set the Featured Image
Now, what we want to do is to ignore all this stuff at the bottom first
Um, don't worry too much about that
So click on Publish
And then we're gonna view the post to see what it basically looks like at the moment
Okay, so basically, that's what it looks like
without any customization
Okay, so it looks alright already. As you can see, it's taking shape
Now we're gonna add another post so you get used to it
So you can click Add New up here or you can go back to your Dashboard
So for example, Add New Post. Click on That.
And we're gonna basically go back here and we're gonna get the
Title which we're gonna copy and paste so it's really easy.
Okay, so basically paste in the Title here
Paste as plain text
Now, go back here
and copy this text here
Copy that and past that into here as also
Make sure when the cursor is blinking here to actually right-click and paste as plain text
If you click somewhere here, then it might not actually show up
So click where the cursor is blinking then paste as plain text
So basically its a word editor and you can set
the alignment here
And also, if you want to add a link
So to add a link, you just need to highlight the text here
And to click on Insert and Add Link. So you paste your URL into here
and add link. So when people click into this link,
then it should go straight into that Youtube video. And to un-link that,
just highlight that again and click on Remove Link
Okay, so you got your Bold, you got your Italic
and you've got your Color here. So that's really simple
And after you've done that, we're gonna add in a new category
So for example, Life, add in new category
and for the tags, we're gonna set that to Robert Frost
and click on Add
And then for Featured Image, set Featured Image. This one will be
Number 2 so Select Files and Blog Post # 2
Click on Open
Just wait for that to Upload. Okay. So click on Set Featured Image
And basically now,
um, we're done with that and you can also enable comments on the page
So to do that, click on Screen Options here
And select on Discussion
And then we're going to scroll down here
and it gonna show, you know, if you want to allow comments or allow the trackbacks and the pingbacks
on the page. And you can get the definition by clicking on that.
And basically we're gonna publish that and I'm gonna show you
what I mean by the comments. So you can leave a comment
on your blog. So we're gonna view that post
to see what that looks like
And I think I'm gonna scroll down
And as you can see, people can submit a comment like that. Okay.
Okay, so now what we're gonna do is go back to the Dashboard and we're gonna configure the actual
theme setting. So go back to your Dashboard
and hover over Ultra, that is the name of our theme,
and click on Themify Settings
Okay, so for your Favicon, basically what a Favicon is your little logo that shows up here
see here
that's my one and the Youtube one is here
And if you want to upload one, you're gonna make sure that you upload a PNG file
which means that logo is a transparent file
Okay.
To get your logo, I'm not gonna teach you how to make a logo. It's gonna make the video too long
and I really think it's way better to get someone else to do it for you
If you go to Fiverr.com
You can get a lot of services, for example, logo designs and a ton of other stuff
for 5 bucks and if you type in logo design. Oops. Okay.
and click on Enter
then you can browse by the Highest Rating or Recommended ones
and as you can see, this one has over
20,000 reviews I think
Okay, so 20,000 buyer reviews with quite a high rating
So spend $5 and you might get a good logo here
and then they're gonna send you a PNG file
as you can see here. And then you can upload that logo directly into here.
So upload your PNG logo here and click on Open
then you can have that little icon. Okay.
And if you go to Ultimate Website Resources
then you can also use a coupon code to actually get a further 20% off your first purchase
Okay, so if your scroll down here
and then we can go to here and use this coupon code "Hogan2016"
for 20% discount on your first purchase
but if you have a bigger budget, then I recommend that you use 99designs
Basically you submit a Logo Design Brief of what you want
After you've done that, people are gonna submit their design. So basically you're holding a little contest
and it's a little bit more expensive. So as you can see here
I want a good, meaty design. You've got a 140 entries so you got a ton of entries
and I think the quality's better
and also the price is a bit more as well
If you click on that, then you can see the samples here
of what other people have done
And you can launch your own contest and also watch the video to see how that works
So that shouldn't be a problem. Now what we're gonna do is scroll down a little bit
And as you can see here, you've got your header code and also footer code
you know, if you have Google Analytics
then you can paste in the Google Analytic code into here
Just make sure to paste into here as you can see here
useful if you need to add Javascript or a tracking code
paste the code into here and then scroll down
And for the Google Fonts, make sure you click on this one: Show All Google Fonts
And then we're gonna save
Okay now let's scroll back up
And go to Default Layouts
Now there are a ton of options here. Don't worry too much about it
Don't get too intimidated about it
So basically what we're gonna do is I'm gonna edit and talk about the things that I'm gonna edit
So for the default index layout,
This is basically for the pages such as the archive pages, the category pages
the search and tag pages
What pages that is, I'm gonna show you. So just click on that
And as you can see here,
there are archives here and category pages as well
Basically if you click on the archive page
then this is the default layout. So now if you change it
here like Index Sidebar Option
to something like this which is just basically a plain screen
then your sidebar here should disappear
So click on Save
And if I just refresh the page, it should disappear
So as you can see here, that disappears
This happens for all of the pages that it says here so for example, the archive pages
the category pages and the search pages. Also the tag pages
This is the category pages
and….yeah
So if you edit the settings here, then it's going to change the layout
for Default Layout Settings. Okay.
So basically I'm going to just keep it as that and scroll down here. Don't worry about all these.
Now I want to hide the Post Meta for the Author
So click on Hide and also the category, hide that as well, and also the tags
Okay, so these stuff are basically really just optional but for the specific design that we're creating
make sure these are selected and you can also hide the poste date as well
So what the post date is, is basically the……
..so basically when you click on that
This is the post date and we can hide that as well. So I'm gonna hide that
So click on Yes. Now scroll down
and for the Auto Featured Image
So if you don't select the Featured Image,
its going to use the image that you inputted in the Blog Post as the Featured Image
So I'm going to select that. Click on Yes
Now after you've done that, you're gonna scroll down and you're gonna see the Default Single Post Layout
And what the single post layout is basically is
if you scroll back up and you go to your Blog page
then these are your post. So "The Road Less Travelled"
and this is basically your default single post layout. Okay.
Every setting that we're going to change here is going to affect your post layout
Okay, so let's go back here
What we're gonna chose is the 3rd option so we're gonna have a blank one
We're gonna scroll down a little bit then we're gonna hide the author again for Post Meta
Hide the author, hide the category and also hide the tags 'cause I feel that, you know
it's not really required, you know, all these additional information
and it just adds to the clutter. So that's why I want to remove that
We're going to scroll down a little bit until the Post Navigation
Now for the Post Navigation, show only post in the same category and then we're gonna scroll down
to the default page layout
So what the page layout is, is basically these pages here so for example if we click on About
then as you can see here, the default layout shows the sidebar as well
I don't want to show the sidebar
and I don't want to show the title as well
So what we need to do is basically click on the option, the blank option
Hide the Title. Click on Yes
and page comments, we're going to disable all the page comments
And we're gonna click on Save
So now we're gonna go to the Theme Settings
and scroll down a little bit and basically this is where we're gonna edit the Header Design
The header design is basically the design here. So this is called the Header
and if you scroll down here, this is called the Footer
So, basically we're gonna change the layout of it and that's really simple. So just remember where it is
you know, Themify Settings,Theme Settings and then scroll down here to Theme Appearance
and for the header design, we're gonna choose the 3rd option
Okay, so it's like a skinny type of header
And we're gonna disable the Sticky Header. What the Sticky Header is when basically when you scroll down
the menu navigation still shows up there
So basically I'm gonna disable that. I don't want that. And I'm gonna exclude the side tagline
I also don't want the Search Form thing here
You can keep them there if you want
But I'm gonna exclude that and also exclude the RSS Feed thing
Exclude that. Now scroll down and for the Footer Design
We're gonna keep this as default and we're going to exclude the site logo
So scroll down here. That's basically the site logo down here. I don't need it so that's why I'm gonna remove it.
Select that and scroll down here. And the Image Filter.
So what the Image filter is, is basically when I change it. So Image Filter. I'm gonna change that to Grayscale.
And let's just say for example, now let's go back here and refresh this page
and I'll show you what I mean
So there you go
It adds a filter to that image. By default, it's gonna go grayscale
and when you hover over it, it's gonna show the color
What I'm gonna do is keep that as none and then
for the Image Hover Filter so when I actually hover over the image
then that's going to be a grayscale
and apply to all images
Now we're gonna scroll down. This is basically the Animated Background feature
so you can add in an animated background color
So what I basically mean by that is, okay
so I'm just gonna show you. Click to enable animated backgrounds in footer
Click on Save and then I'm going to refresh this page
and if you scroll down
Okay, so that's basically going to flash different colors
It looks really cool if you're building a very modern, funky, hippy website
But for this tutorial, we're not going to add that and you can add that if you want to
You can also set the different colors here as well
If you really want to set this, then I recommend watching my other tutorial
which is the How to Make a Drag & Drop WordPress Website
which I launched a few months ago. So if you check out my channel
Then yo can actually learn how to use it for the website
Leave that and for the Footer Text
So what the Footer Text is if you scroll down here,
that's Footer Text 1 and that is Footer Text 2
So Footer Text 1 and Footer Text 2
To remove this footer text here, all you need to do is to hit Space and then it's gonna remove it
And if you click on Save
Go back here and then refresh
And as you can see, the Footer 1 is gone
So that's how you do it. Basically, I want to retain that. So I want to keep that
So for footer text #2, if you like to support me and these free tutorials
Then you can give a small credit which will link back to my website and it will be much appreciated
But if you think it doesn't look good on the website, it's okay if you don't include it. Okay.
So for those of you who want to add in a small credit,
then go to my website and click on Configure Theme Settings and you'll scroll down. Scroll down a little bit
until you see Footer Text # 2
And then basically what we're gonna do is copy this text here
"Inspired By" and then you've got that code which links back to my website. So copy that
and go back to your Theme Settings here
and bascially paste as plain text. Okay.
So once you've done that, click on Save
we're going to refresh the page to see what that looks like
Okay, so we're gonna scroll down a little bit
As you can see, it's gonna say "Inspired by Hogan Chua" and then link back to my website
So as you can see, it looks pretty good. I don't think it's going to affect your website but
again, if you don't want to put it in, that's fine as well
What we're gonna do now is we're gonna add in the Social Links and I'll show you where to add that in
So for your Social Accounts
So click on Social Links tab
And basically you can add in a image, Okay.
Or you can use the default icons
So basically we're gonna use the default icons and add in the links. So you should add in your
unique link which links in to your Twitter profile so it should look something like – okay, so if I scroll down here
and Social Links tab. Then we copy that URL over
and paste that into here, it should look something like, you know,
"Hogan Chua", um, probably your name here. So it's gonna leave it as that default
And you can also change the icon here but by default, it's already got the correct icon
you can also add the icon color and the background color
But for this, we're gonna set everything to the same color. So icon color is gonna be white
and for the background color, it's gonna be black
Okay, it's really important to make sure all these colors are coherent
for a professional-looking designed website
So if your Facebook, then you can add in your Facebook link. I'm gonna quickly add those in
and quickly add in the colors as well. Okay.
And you can also delete it. So for example if you don't have a Google+ account, you can either leave that empty
and it's not gonna show up or you can delete it
For your Youtube
add that in
And for example if you have an Instagram account, as you can see here it doesn't show up,
You can add in your own link. So Add Link and title "Instagram"
and the link will be your unique URL so I'm gonna copy this for the time being
paste that into here
And Icon here, we're gonna select an Icon so click on Insert Icon
And scroll down a little bit. As you can see, there are tons of icons to choose from
But, we're gonna find the Instagram one. So scroll down and you can see Brand Icons
So it should be here somewhere
There you go. So Instagram icon. And again, change that color
And some of you might have a Bloglovin' account so I'm gonna show you how to add that in as well
So Bloglovin' and just copy that URL
Paste it in. Insert icon. The icon, I think it's some kind of square
Okay, I found it. So plus-circle. And then change the colors as well
So after you've done that, click on Save
And we're gonna go to our Home Page and it is time to start building
Okay, so this is our Home Page
We want a blank canvas and to do that, that's really easy to do
So we're gonna go to Customize
Okay, so we're in Customize. Click on this arrow button because, by default, it's gonna select Themify Options
Click on that button there
And we're gonna set a static front page. What that means is basically, it's gonna set a default front page
And we're gonna set that to our Home Page
So select a static page
Or you can just leave it to show your latest post as it is now
If you're happy with that then you're good to go
but for the tutorial, we're gonna select a static page
Front page is gonna be home and we're gonna click on Save and Publish
and once that is done, click on the X button to close
Okay, so as you can see, we have a blank canvas to work on now
I wanna congratulate you guys for reaching this stage.
We've basically done all the hardwork with getting the domain and hosting
um, installing WordPress and the themes, the plug-ins and basically configuring all the settings
So I encourage your guys to all follow along because it's really important, I think, to follow along step by step
because you're gonna learn where all the buttons are and where all the settings are and how everything works
So then later on, once you know where everything is, it's so much easier to actually build your website
And in the long run it's actually gonna save you a lot of time
So if you're tired, make sure to take a break. If you're not and excited, follow along
And basically I'm gonna start from the top-down
So the first thing that we're gonna do is we're gonna customize the Navigation Menu
as well as the Styling and then the Site Title and logo
Okay, so we're gonna do the menus first
And to do that, we're gonna go to the Dashboard and then can hover over Appearance and click on Menus
So this is where we need to create a new menu so just name this menu Main Nav
Okay
And Create Menu. And basically we need to get these pages that we've created.
Select these pages that we've created
or any pages that you have and Add to Menu
And now basically if we open up in a New Tab,
then you'll see this is the Navigation Menu and it goes About, Blog, and Contact and then Home
As you can see here. What we need to do is to reorder them so to reorder them you just drag it and then drop it
So, however you like and I think that's alright
And you can also reorder them like this so if you put it like that
that would mean when you hover over Home
then the About would actually drop down from a drop-down menu
So I might show you what I mean by that so before that anyways
make sure to click on these so to automatically add new top-level pages to this menu
and also Main Navigation. Okay, Save Menu
and if we refresh the page
then you should see it drop down like that
But we don't want that so we can do that or you can even do it another layer like that. Okay.
But for this tutorial, we are going to leave it like that and Save Menu
Now we're gonna head back to our website and we're gonna edit the site title as well as the navigation style
So we go to Customize. Okay. So make sure you're on Themify Options
as you can see here, Themify Options
and select the Advanced Tab for more options
So just click on that and let's go to Themify Options and site logo and tagline
So that's for the top part here. So click on that
and as you can see, you can change the site title to whatever you want so for example "Mia Miller."
I like to add a little dot there
Now you can also add in your logo here so with a logo, as I said before, you can get a logo from Fiverr for $5.00
Or you can get your logo from 99designs if you have a bigger budget and willing to spend a little bit more
And basically what you need to do is just click on this + button and then upload the files
and again, the file should be a PNG file
so it's a transparent logo type and then bascially click on the logo that you have and click on Open
And then it'll upload here and then you'll insert the image. Okay.
You can also change the sizes here so once you've uploaded the logo,
then you can actually change the size here. Okay.
So you can try like 50×50 pixels first and then adjust it to whatever you need
Now what we're gonna do is scroll down a little bit. Okay, scroll down here
and we're gonna change the font for the actual site title
So to do that,
this is where you choose the size so I want to change that to 16 pixels
And……okay, so we're gonna type it in here so I think it's "Montserrat", that's how you pronounce it,
And what we're gonna do now is change it to AA
So basically that is in capital. You can also change that around obviously
So you can change the Italic and all the settings here if you want
Also you can change the color and as you can see
this logo or this site title is a bit higher than the main navigation
but we can edit that a little bit later with the site logo position if we want later on but
we're gonna change the actual styling for this first before we edit that so let's go Save and Publish.
Now click on that
and basically we're gonna go to the main navigation
and we're gonna scroll down a little bit to Menu Link
and then we're gonna change the size of that to 12 pixels and also change the font to the same fonts
Okay, it's important to keep all the fonts the same
um, Maximum I think had, you know, 2 fonts
but generally just have one font for your basic headings and stuff like that and then
have another font for your body text. So don't make too many fonts
Now you can select AA for that as well
Okay, so that's all the same as well. On the top, we're gonna scroll down a little bit
So the Menu Link Hover. Basically what that means is
this is called the Menu Link and as you can see when you hover over the About link,
then it shows up red
So we're gonna change that color because we want a minimal look, Okay.
So we want to change that color to
you can select the colors here obviously. I've got a set code that I want to change it to
So let's change that to 4D4D4D
and as you can see, click on that once
and it should update
So when you hover over it, it's like a dark grey
You can't really see it. It's very subtle
and what we want to do now is also change the Menu Active Link
So what that is, is as you can see now, we're actually on the Home Page
so that's why it shows up red. So I want to change the color of that to just black
So make sure you don't change the background color. This is the background color
and when you do that, it basically adds a background to it.
So as you can see, something like that. Okay.
So we're gonna change this to just black just to keep it nice and simple
Then what we're gonna do is we're gonna change the Menu Active Link Hover
What that means is basically we're on the Home Page
And this is the active link and when we hover over the active link,
it's going to change this color that we set here
And normally we just keep it the same color here. Just copy that
and paste as plain text to keep everything the same
Now we're gonna Save and Publish
Okay, so as you can see, my site title is all squished up or I think that's probably because I set
this logo image size. So we delete that
And hopefully it'll go back. Okay, so let's just Save and Publish and hopefully that goes back to normal
Okay, so that's back to normal but as you can see it;'s not really aligned
So we want to move it down a little bit. So let's go back to Customize
We can go to Themify Options then we can go to the site logo and tagline
And we're can set this to relative and we can add about 10 pixels to the top to move it down to the center a little bit
And then we're gonna Save and publish and then close and exit out of that
Okay, so basically the top part is already done. That's really easy to do if you follow along
So right now we're gonna turn on the Builder and we're gonna set the main image
So what we need to do is actually go to our Row Options
And as you can see now, this is where you choose your layouts
This is where you can import and export and copy and paste
and this is your Options button and this is your Duplicate button
and this is the Delete button, Okay.
We need to click on the Row Options and we need to add a background image
So to do that, we can click on Browse Library. Make sure to not click on Upload
Because that automatically crop your image so it resizes your image
and that's not good. So click on Browse Library
and select files. And go to the folder that you've downloaded the image and click on the main image
and click on Open
and then we need to insert that file URL
For the background mode, select Full Cover and then you can also change it to Parallax Scrolling if you want
and then basically we just need to save and exit
So as you can see, you can't see the full image yet so what we need to do is we need to drop a text module
into the first row
So grab a text module from here and drag that in
And what we're gonna do is we're gonna add in an icon
Click on Icon. Now we can insert the Icon and we can scroll down here
and there are a ton of icons that you can use but I want the arrow that points down
um, I'm just going to add this in, the code, because I already know the code
As you can see, you've got the – when you click on it, it inserts this code here
Okay, so I already know what the code is so it's FA-
So you can type this in
Okay, so make sure that is that. Now what we need to do is we need to link it
So we need to link it to the next row so once people click on it,
then it'll actually scroll down to the next row. So you might be confused by now
but just copy this URL here. Your URL. Your unique URL
and paste it into your link section and then what I want you to do is
type in #row2 then we're going to select Style so this is basically the size of it
and we're gonna change that to large. For the icon color, we're going to change that to black
So this the Hex Code for black and to get the Hex Code, you can go to something like Color Picker
If you're unsure, so go to www.colorpicker.com. You might want to put that into your Bookmark bar
And then you can click on anytime. So you can choose any color here and you got the Hex Code
So for example Black is, um, 000s. Okay.
So what we need to do is to paste that into here, the Hex Code.
And the background color, we're just gonna leave that. We're going to Insert Icon
And then we can go to that styling tab then we need to align everything into the center
That basically aligns the text and everything to the center. Or you can highlight that and align center here,
it's gonna be the same thing
Now what we're gonna do is we're gonna set some padding. So if I save now,
then as you can see you've got that arrow button here
But we need to add some space so that we can display the whole picture. So..
what I mean by that is double-click this ting again and go to Styling
Go to Padding and then set this to 400 pixels to the top, 300 pixels to the bottom, then click on Save
So as you can see, that's added that in. So that's really easy
For most things, I basically use padding
The difference between padding and margin is imagine if the module has an invisible sort of box around it
So padding is inside that box but margin is outside that box
So imagine this icon here has a little box around it and padding is basically setting that invisble box
And margin is set in the space outside the box
So for most cases, you only need to use padding
So don't worry too much about the margin
So that all done and obviously you can add your own picture into here
Okay, so you might be wondering where I got my images and how I actually crop my images
So you can go to my website and then click on Ultimate Website Resources
And then scroll down a little bit and these are my top 5 recommendations as you can see
This is the Top 7 Free Image Sites that I found and that you can use to gather all your images
But I find the best one to be Unsplash because it's really simple and I also find that the images are sort of more real
not really fake stock images so I think using them on your site will make your site look a lot better
So for example you can click on this which changes the layout so you can scroll down
and it's in infinite scroll so it's gonna load up
as you scroll down. Or you can search your photos. For example, you want to search for clouds
then you can click on the Search button here and then you can download your images
And how I actually crop it, I use an online photo editing software. Basically, it's Fotor.com
and then I edit. And I basically open the file and I re-size it and then crop it
to the size that I want
And how I actually get the size that I want, I use a software called Jing and you can also find that here
Jing by TechSmith and if you click on that, download that for free
So what I basically do is I capture it
let's go back to our website
I capture it and I get the size here like that
I record down the sizes and then I crop the images to the specific sizes that I need
So that basically speeds up the website because sometimes we don't need a really big picture
I'm also gonna make a video on how to crop images and where to find images. I'm gonna upload it onto my channel
after I upload this video to Youtube.
So make sure to check out my channel to learn how to crop images. I think that's really important
because I think finding images and cropping them is probably the most time-consuming part
of building your website and hopefully it will help you speed up that process. Okay.
So we're gonna move along now and we're gonna move on to row #2
So that's row 1 and this is gonna be row 2
And what we're gonna do is we're gonna go to our Row Options first
and if you remember, we set this button here to #row2 so we're gonna name this row
So scroll down here and for the row anchor, we're gonna set this to the same name that you put
excluding the hashtag. Row 2
and I click on Save
So we're gonna click on save and I'm gonna show you exactly what I mean
So close that and let's refresh that page and basically what happens is if you click on this button here,
it's going to link to the row below that we've named Row 2
So if you click on that, the it should scroll down
So basically you can link it to any row that you want. You just have to change the link here and also change the name
to wherever you want to link it to. So turn on your Builder
So what we're gonna do is we're gonna separate this row into 2 separate columns
and the ratio we're gonna set it as is 2:1
Something like this because we're gonna put our sidebar here and our Main Content here
Obviously, you can change the layout to whatever you want
but for this tutorial, we're gonna do it like this. Okay, so what I want you to do is to drop a post module into here
and basically this is gonna add our Blog post that we set up a little early on
And we're gonna set up the Post Layout and as you can see, you can change the different layouts
We're gonna select the 3rd option here so click on this and then we're gonna set the display to None
So what that means is it's not gonna display the text. Okay, so select None
Or you can select Excerpt which is a little summary of the text
or the whole content which means all the text of the blog post
But for this, we're gonna select none
and then we're gonna save
So that's done there and now you can click on this
and you can change the settings here. For example, if you wanna hide the Post Meta
Which basically means the comment thing will disappear
Okay, so that's disappeared. Obviously, you can enable that if you want
but that's up to you and you can play around with the settings here
For example, you might want to hide the Post Title, unlink the Post Title, or you want to hide the Post Date
then you can do that as well
And what we're gonna do now is to add a profile picture. Let's grab in a image module and drop that into there
We're going to Browse Library and upload the file
So we're gonna upload this profile picture here and click on Open
Just wait till that uploads and click insert that file URL
And what we're gonna do is we're gonna remove this, the image appearance
You can select this which makes the image grounded
but delete that and delete this and also that
If you want, you can copy this URL and paste it into Image Link
Paste it in and you can open in the lightbox and I'll show you what I mean
So when you save it and when we close it
I'm gonna click on it and it's gonna open into a live box
Click on that and as you can see,
this picture here is too close to our row 1 so we're gonna add a little bit of padding
I'll show you how to do that. So turn on your Builder
and double-click on this
First of all, I'm gonna delete this lightbox. I don't want that lightbox
And we're gonna go to Styling. We're gonna scroll down to padding
And we're gonna set this padding to about 50 pixels for the top. So we click on Save
So that basically means it's gonna add a bit of spacing there. So we click on Save and close that
Then, as you can see, there's a little bit of space there so it looks much nicer
And as you can see, you can use padding for any. So we're going to turn on the Builder
And now we're gonna add in an About Me, a short About Me, so we're gonna drop a text module below the picture
And then we're gonna type in "Hi. I'm Mia Miller" or any description that you want. You can add that text there
It's really easy. So now we're gonna go to Styling tab. We're gonna align the text
Or you can also align the text here as well. Center.
but I'm gonna do it here. Center.
And then we're gonna add a little bit of padding 'cause we want a little bit of space between there.
We don't want it to be too close
So Padding. 25 pixels to the top and then were going to save
Okay, so that's really easy
Now what we're gonna do is we're gonna add in our Social Widgets
And what we need to do is we need to drop a widget module underneath that text
And then for Select Widget, we're gonna select this drop down and select in Social Links
And then for this, we're going to select Open Link in a New Window
so when people click on the social icon, it's going to open up in a new window
You can not select that if you want but I generally prefer to have it like that
And then we're going to Styling tab and we're gonna align everything to the center and then save
So as you can see, that's really easy to do and you can move these text modules anywhere you want
For example, if you want it up there, you can move it around
Okay, so that's really easy. You can play around the layouts later on but
I just want to show you how to add in the modules
What we're gonna add next is our sidebar
To add that in, we're going to drop a widgetized module
So we drop that into here below that social icons
and then it's going to automatically select the sidebar
so just keep it as that and click on Save
So as you can see, this is our sidebar and right now after this, I'm gonna show you how to edit
the sidebar and its contents inside and also the styling a little bit later on
So we're gonna click on Save and then close that. And to edit the sidebar contents,
we're going back to our Dashboard
We're going to select Appearance. Just hover over Appearance and go to Widgets
Now this is our sidebar so bascially I'm gonna open this up in a new tab
I'm gonna close these for the time being
And this is our sidebar thing here
What I'd like to do is I'd like to zoom out sometimes so I can see everything really clearly
Um, I can drag and drop really easily and I can zoom out to something like that
and you can see the whole website so clearly and you can drag and drop anyway you like. So that's a good tip
So we're gonna do that and we're going to the widgets here
and as you can see here, this is the sidebar and this is the search widget
recent posts, recent comments,archives, categories, and you can see that here. Okay.
So we can arrange these to any order that we like
but for this specific one, we want to delete some of them. So to do that,
we need to delete the recent posts.
So we're gonna delete that
And we want to delete the Meta as well
Delete that
We also want to delete the recent comments.
Delete that
And if you want to add that back in, you can add that back into here. Just like that
Just drag in just like that
and that's really simple
And now what we're gonna do is the Mailchimp one, so Mailchimp Sign-up Form
We're gonna drag this done here, below the categories
Obviously, you can move it up here if you want and we're gonna delete that title
So click on Save
And now what we want to do is I'm gonna show you how you can actually add in the little thumbnails
next to the blog post
So you can add in Themify Most Commented. So let's just drag that into here below, maybe, just there
To do that, we can change it, the title. So for example, we change this to Popular Posts
Or you can hide that post title if you want. You can just display the comment count
if you want to but we're gonna leave those out
And for the thumbnail size, we're going to change that to, I think it was……
120 times maybe 70. Can't really remember but we're gonna click on Save
And then we're going to refresh the page
Oops! I forgot to display post on there. Click on Save again
and then we're going to refresh the page again
Okay, so as you can see, the thumbnail has shown up now and you can do that for your website if you want to
And then we're going to save that and we're gonna go back to our Home Page
And as you can see now, the fonts and everything is not aligned properly and it doesn't look very good yet
But before we edit all this stuff here, we're going to add another 3 more modules for our wesbite
Bear with me as it is important to learn how to use the basics
And after we've done that, then we're gonna edit everything together so it's gonna save you time. Okay.
So basically right now, we're gonna show you how to add in the gallery
So turn on the Themify Builder
And then we're gonna drop in a gallery module. So drop that into here
and then what we need to do is we need to change the layout of the gallery to Showcase
And Insert Gallery Short Code, we're going to insert a gallery here
and bascially we're gonna upload the files
And upload the files that I've put in here.
Slider 1, Slider 2 and Slider 3. I think you can just Control and select all of them
So you can press Command or Ctrl and then select all 3 of them and upload them altogether
Click on Open
And wait a second for that upload
and then we're gonna add that to gallery. So you can select those. Make sure those 3 images are selected
and add that to your gallery
Okay, I think we actually missed one picture so we're gonna upload the last one
Slider 4 and open that. And then select these 4 images for the gallery
Add to Gallery. Update Gallery. And then it's gonna include the short code here
Okay, so that's done. Then we can change the image appearance if you want to but we're gonna de-select that
And go to Styling and align everything to the center
Which basically means we're gonna laign the thumbnails into the center as you can see
So as you can see the, thumbnails are all in the center. So we're gonna click on Save. Close that.
Okay, so your gallery here. So when you click on it, then it's gonna change the images. Okay.
So that's how you add a gallery in
And what we're gonna do now is we're gonna add a shop link
So I'm gonna show you how to do that. So turn on your Builder
Let's say you have an online shop and you wanna link that from your home page to you online shop
So what I'd like to do is I'd like to drop in a box module below the gallery
and I'm gonna type in shop
(oops)
And I'm gonna set this to our Heading 1 tag
So select that and if this is not showing up, make sure you toggle that thing
And then we're gonna insert a link so we're gonna link it to our shop page
So for example, we're gonna copy our URL and normally our Shop page would usually be something like that. Okay.
So our wesbite/shop
And we're gonna add a link and you an also set to open link in a new tab if you want to
But I'm just gonna leave that and add link
And obviously you can link it to any page that you want to
It might not be a shop page, it might be a blog page, it might be a contact page or anything like that
So after that, we want to scroll down and for the box color, just leave it as that
For the Appearance, we want to de-select these two things
And for styling,
we click on the styling tab and for the background image, we're gonna upload a new image
So upload a file and for this one, we're going to use Shop
And open that. Insert the file URL
For the background repeat, we're going to change that to Full Cover
And then we're gonna scroll down and we're gonna align the text to the center
Click on that
And then for the padding, we're gonna add –
Actually for the link, we're going to add the link color
By default, the link color I think might be blue or red or something like that but we're gonna change it to white
to make it look, um, really nice
So change that to white
And you can also change the text decoration but leave that as empty
For the padding, we want to add 50 pixels to the top
50 pixels to the bottom. And then we're gonna save
Okay, so we've added that in
And that looks pretty good already
Click on Save
And right now, we're gonna add in our Instagram Feed into our Row 3
So this is basically Row 1 and this is Row 2
Scroll down and this'll be Row 3
and we're gonna turn on our Builder
We're gonna drop in a divider module
So what that is, is basically a line. We're gonna add a little line to separate our content a little bit
You can…you don't have to add this in but I think it looks nice
So stroke thickness, I want it to be 1 pixel. For the divider color, we want to change it to a very light gray
So you can change the colors here but I already know the code so just type that in
EDEDED
And we're going to click on Save
And basically you might not be able to see it but there's a really light gray line
there and what we're gonna do is we're gonna our title for Instagram
You don't have to include this obviously but I wanna put that in
So add in a text module
And then type in Instagram and get aligned center here
And then we're going to save
Okay so that's done. Now we're going to add in our short code for Instagram so it's gonna display our feed
So to do that, just right click that and open in a new new tab
What I want to do is go to Instagram Feed
And copy that short code. It should be display your feed
And just copy that. And obviously there are tons of options here that you can play around with
And you can use these short codes to display a basically different display
But by default, I think this looks good already
So we're gonna drop a text module
into here
paste as plain text
And then we're basically just gonna click on Save. Hopefully it's gonna show up
after we refresh the page. So click on Save
here and close this thing here
And we're gonna refresh the page and hopefully it shows up good.
Okay, so as you can see, all our layout for our Home Page is done. Congratulations again
it's pretty easy to do
And obviously you can move everything about anywhere that you like
Um, if you like the tutorial so far, make sure to give the video a thumbs up and leave a comment down below
as it really helps me out and it's much appreciated
Now, we're gonna move on to customizing the page fonts
and also doing some styling work
um, changing the colors a little bit to make everything sort of match up
Okay, so click on Customize
Okay, so click on Themify Options and select the Advanced tab
So basically we're gonna start from the top down so we don't get confused
and I'll explain where editing and everything. Okay so
For the body, what that means is basically anything inside the website besides the footer and also the header
So the default font basically. So we're gonna choose 1 font and stick to it
The font we're gonna chose is Lato. We're gonna set the size first to about 16 pixels
for the body font and then change that
Lato. Okay, just type that in once you've clicked inside that box there
So make sure that's selected
We're going to center it. So we're gonna center all the text
So click on that. Align Center
As you can see, this theme here is aligned
So normally it's like that but when you change it,
then you can move around, okay.
So make sure that is centralized and you can play around with these settings here as well
We're gonna scroll down a little bit
to Body Link and basically this is all the links in the body
So, these are links. These are links. So when you hover over it, you'll see that it has like a underline
So we're gonna change that to black
So drag it down and as you can see, everything turned black. Okay
Now what we're gonna do is scroll down a little bit
Don't worry about this right now. We change the color after we've fixed everything. Really easily
So for the Bottom Link Hover, it's basically when you hover the link it's going to show the color
or the effect that you put on. So for example, put Bold
then we hover over the link, then it should go Bold
Okay, so as you can see. Something like that
But I just want to close that and I wanna change this color to a sort of really dark grey
And that code is…….that
and just type that in
Okay.
Then we're going to save and publish for now
So after we've done that, we're gonna move to the Form
So basically for the form, it's something like this. The buttons and also the e-mail field where you actually type it in
So we basically edit that and we're going to set the form fields here
the border to solid
And we're gonna change it to a light grey
and 1 pixel
So it basically edits – this is a field and it basically edits the border around there, that light grey border
So if you change that – hopefully, it'll go bold. So if you change that, then it grows a thicker border
I want to keep it nice and thin. That's up to you
Scroll down a little bit. I want to change the Text Size
to that. So 14 pixels
So as you can see, it went a little bit smaller. And then that's also lato as well
And then we're gonna align center so that aligns that text into the center
So the search bar, when you type it in, it aligns to the center
Scroll down a little bit and scroll down to Form Buttons and
Form Buttons basically means the button here
We're gonna change the default for it so all the buttons
will be changed to this default setting
We're gonna set the background color first to a black color
So hopefully that's gonna go black
Okay, so that goes black but when you hover over it
it doesn't show up, it doesn't show any hover color
So we need to change the Form Button Hover but before we do that,
We're gonna add a border so Solid. Change the border color to black as well
Change that and then change this to about..
oops
Scroll down to about 2 pixels. Wait until that loads up.
Okay, so now we're gonna edit the Form Button Hover
and we're gonna change the background color to a white color
So when you hover it, it''s going to be white
So as you can see, it turns up white like that
So that's all good
And then we're going to scroll down a little bit and we're also gonna set the hover as well
So set that to solid and set this to black
Set it to 2 pixels and when we hover over it,
it should stay something like that. Okay.
Then we're gonna change the text color inside as well
So we're gonna change to text color to black
So as you can see, it looks much nicer now
So after we've done that, we're gonna set the header. So click on the Header tab
And scroll down a little bit. We're basically gonna edit the hover color
for the side title
We're gonna scroll down to the Header Link Hover
And we're gonna set that to a dark grey. Sort of.
And hopefully, that will change
Okay, so you can – I'm not sure if you can see it
It's very subtle because we're already edited the rest
We're gonna leave the rest of them like that and just Save and Publish
And we're gonna scroll down and as you can see, it looks pretty good now
We're going to change the formatting and also styling for your post
So basically we're going to click on Post here
And scroll down to Post Title and we're gonna change the font size for it
to about 24 pixels
So it's a little bit smaller. And Lato again
Then we're gonna change it to – Capitalize it
like that and then we're gonna align it to the center
Then we're gonna scroll down and for the color of it, we're gonna change this to white
And for the background color, we're gonna change it to black
Okay, so it's pretty much that easy
You don't have to do it. You could keep it to maybe something like just black
or red
just any color that you want. But I think it looks good like that so that's why I did this
And we need to change the Post Title Hover
So this is the Post Title and once we hover over it,
we're gonna change the effect for it. So we're gonna add an underline effect
So when you hover over it, it should go underline but we need to change the color as well
So we need to change the color of that to white
So the default is red, as you can see, and there you go
You can also edit the other settings such as the Post Meta
Here. Post Meta
Basically, the Post Meta equals the date and also the tag, the category.
But I'm not gonna show you how to edit that. I just want to show you where it is
so you can play around with the settings here yourself
So basically we're gonna click on Save and Publish
And now we're gonna go to edit the Easy Google Fonts. So click on this arrow tab
Back arrow. And then we're gonna click on Typography
Default Typography. And as you can see here,
it basically helps you set a sort of default sizing and
fonts and also you can select the thickness of the actual font
So I think that adds a nice professional touch to it and we're going to edit the Heading 1
I'm gonna show you how to do that so click on Edit. And we're gonna change the fonts to the Lato again
So font family. Lato
And as you can see, you can change the font width and also the style here
As you can see, it's like really thin now but I want to change it to regular
Like that. Okay, so that looks good
And then what we want to do is also set a default size for it
So we want to click on this Appearance tab
here
And you can change the font sizes here
So we're gonna change this to about 70 pixels
And you can also change the letter spacing as well. So this is the H1 tag, I believe
So as you can see
And you can change the letter spacing which makes it wider a little bit
but you can click on reset to make it default
And make sure you never edit the positioning because what that does is
When you actually set a text, for example, to the H1 tag
automatically it will move to the positioning set here and then you will realize it's just not gonna work
So you just don't do that. You can edit the positioning by aligning to the center or whatever you want
or you can add in padding
anything like that. But don't do it here
and then click on Save and Publish for now
And if you click on this tab here,
You can edit the font for the paragraphs
from H1 to H6 tag
You could have several default fonts that you want to set it for
So it's really gonna save you a lot of time. So click on X and have a look at the website
Okay, so as you can see, the website is taking shape and it's looking pretty much almost done
So I also want to show you that you can also edit the styling for each individual module
And by turning on the Builder, I'm gonna show you how to edit the font for the sidebars
Okay, so if we double-click on this module here
double-click on that
And the you need to go to Styling tab
and as you can see here, we can change the font for here
So for this one, we change it to 14 pixels
And then we're going to click on Save. And obviously you can change some other settings as well
I'm just showing you that you can do it for each individual module. It doesn't have to be the default one
Okay, so click on Save
So there you go. And we're gonna click on Save here and also close it
I'm also gonna show you where you can edit the sidebar
because the archive pages and the category pages have a default sidebar
So they have a default side bar and to change the actual font sizing for that, you'll need to go to Customize
And go to Themify Options. Okay, that's already selected
And then you can edit that here, the Sidebar tab. Okay.
So that's pretty simple and you can save and then close it up
So congratulations again! We've basically finished our home page. As you can see, it looks very nice already
Now we need to build or About page, Blog page and then our Contact page
It won't take very long because you already know the basics and I'm gonna go a little bit faster
And we have already set the fonts and everything
Okay, so let's get started. We're going to go to our About Page
Just click on that and turn on the Builder
And then we're gonna split the row into 2 columns
Split that like that
And we're gonna drop a image module 'cause we're gonna add a image. So drop it here
And then what we're gonna do is image URL. We're gonna browse library
and upload a image from our computer
So it's this one here. Profile Picture, I believe
that we have already uploaded that
if you have followed the tutorial. So you can go to your media library
and just click on that and then insert file URL
Then we can deselect rounded and also deselect these ones
Just copy – Ctrl + A or Command + , I think
and copy that on to your clipboard
And paste that into the image link. So if you want to show it in a lightbox, you can do that
Or you can also show it in a new tab
And you can add a Zoom icon if you want to. Okay, so click on Save
Okay, so that's done. Now we're going to add a text module 'cause we're gonna add a little About Me
part. So drop a text module into there
And we're just gonna copy the text from my page here. So we're going to select About page
and go down there
Let's grab this text here. Okay. About Me
and all this text here and just copy that into your clipboard
Okay, so paste that in as plain text. Like that
And maybe hit a space here
As you can see here, we want to set the About Me to a H2 tag
We're going to edit the H2 tag in the Easy Google FontsTypography plug-in
in a second. So just delete that for now
Now what we're going to do is maybe centralize everything
Actually, maybe we don't because we've already set it to default for the body
to align into the center. So let's click on Save and see what happens
Okay, so that's already in the center. So let's just double-click this again
And I wanna show you how you can actually add an icon
Without getting the icon from some external place
You can just get it from using a short code
So let's just click on Enter here and click on Short Codes and Select Icon
And then you can insert the icon here. Any icon that you like
But the one we're gonna use is the heart icon, I think
Okay, so there it is. I finally found it
Um, click on that. And also you can add in a link
to the icon as well. For example,
If you want to link it to somewhere else, you can add in the URL into here
But for now, just keep everything as default
And you can also change the icon color as well. So let's just click on Insert for now
And let's just type in "Mia Miller"
And then we're gonna go to Styling and we're gonna add a little bit of padding
Because what I found was on mobile, the text is too close to the image here
Okay.
So I'm gonna add little bit of padding. Just 10 pixels. And then click on Save
And there you go
So right now, we're gonna save this and close it. And we're gonna set the H2 tag, Okay.
So we're gonna close that go to our Customize
So click on Typography
And Default Typography. And then Heading 2
And we're gonna edit the font. So the font family will be Lato again
So click on that, it's gonna change
The font weight maybe 300
And then for the Appearance tab, we're gonna change the size to about, a 36
Okay, and that's done. So we're gonna save
And click the X button
Okay, so that;s done for our About Page
As you can see, that was really quick and let's say you want to move this About text down a little bit
Then you can just turn on the Builder and sort of add some more padding
So that's really all that you need to do
Just add a little bit of padding and, yeah, or you can make the image a little bit smaller
To do that, you could do this probably. You could do something like that
And then you can have the image there or – actually, let's do something like this
And then for this image, you can also change the columns for each of the images. So you can do that.
to make it smaller
Somethig like that. You can do that
You know, so you can play around with it. So as you can see, it looks pretty good
So right now, we're going to head over to our Blog page
and edit that Blog page. So click on your Blog
Okay, so we're on our Blog Page and this is gonna take like 2 minutes
So just turn on your builder and then change the row columns
So we're gonna change it to this this one which is basically a 1:2:1 ratio
And what we can do now is to drag a post module into the middle
And then bascially you just change the layouts to the ones that you want
So I'm gonna keep it as the default one and basically you can also show the post by categories
Just post by each individual category if you like
And you can limit the number of posts it actually shows so if you have like a hundred blog posts
You don't want them all to show in the same page. You might want to limit that
So let's just scroll down and you can order them by descending or ascending. Order them by date
and all these other things here. And you can hide the Featured Images
You can also hide the Post Date which I'm gonna do. I might hide the Post Meta as well
So then all you need to do is click on Save and if you don't like this layout, then you can change it
And you can also display all the blog post content or just a little bit of it
Or none. Okay, so click on Save and that's pretty much it
Okay, so that looks pretty good. So let's just click on Save
Close that and now we have to go to our Contact page
Okay, so we're on our Contact page and we're gonna turn on the Builder again
And basically we're gonna set the columns to the same as we did for the Blog 'cause I like that layout
And what you can do now is drop a text module into here
And then we're gonna type in some text but I'm kind of lazy so I'm just gonna copy that text directly from here
And set that to H2 tag
H2 tag. Remember we set the Heading 2 tag already in the Easy Google Fonts
So that's gonna default into the font that we've set before
And then we're gonna click on Save and it should actually centralize
because we've set the align center earlier on
Now what we're gonna do is drop the accordion module
into here. Into the middle
This is a really cool thing. When you press it, it open up
So f or the module title, just keep all that empty
And for this, we're gonna deselect this for now
And for the accordion color, we want to set the transparent one
the last one here
And for the accordion title, we're basically gonna add 3 different accordions. So we're gonna scroll down here
And just click on this one
So business inquiries, you might put your e-mail in here
And then just – actually, we're going to put on the contact form. Sorry
The contact form short code into here
How we do that is basically just right-click and open this in a new tab. And we're gonna go get the short code
for the contact form. So just click on this here and then you've got the short code here
If you click on that, then you can just copy that
And come back and essentially just paste as plain text. So that's really easy
And then we're gonna add in a new row
The new row will be the business hours so you might want to put that one there
So Business Hours, paste that into here
Go back here
Monday to Friday or just set your own hours. It's up to you
and paste that in
Add in another one which is Where Am I?
so you could add your address for the business or whatever you want
Copy that. Paste this into here
Okay, so that's done.Then what we need to do is we need to go to the Styling panel
So we need to set the font color to black
If we don't, it's actual default will be set to dark grey
So I want the color to be black. So just set that to black for now
And then what we're gonna do is we're gonna add a little bit of padding
a little bit of spacing. So we want to add 20 pixels to the top
and then 20 pixels to the bottom as well
So I want some space to make that look good and click on Save
And there you go. So that part is done really quickly and now we're gonna drop a map module
'cause I'll show you how to add a map. So drop one into there
And then just type in any address so for example, Manhattan
in New York
And you can play around with the settings here. For example, you can zoom it in closer
You know, change the borders or anything like that
But I really don't think you need to mess around with that, to be honest
So just click on Save and there you go
So if you want to move this map, then you could just move it down here
Obviously it's not gonna show properly right now but if you go save it now and click on close
And then it'll show up fully. Okay, so let's click on this and as you can see, when we click on that,
this thing doesn't close up. So I'm gonna show you how to edit that and I'll also gonna show you
how to make the map sort of black and white; if you want that, of course
Okay, so turn on the Themify Builder. Now just double-click on this
the accordion module
And select this one, the Expand and Collapse the Accordion 1. And click on Save
So that would do it. So what happens is when we close this,
we open this and, for example, they might have to fill in some details, send you a message
they might click on business hours, and that thing closes up. Okay
And that thing closes up and that's really professional
really easy and simple
Now what we need to do is we need to edit the page
So we're basically gonna change the map into greyscale and to do that,
all we need to do is edit the Contact page
So this will basically only affect the Contact page. It wont affect any other pages
For the image filter, you might change that to grayscale and then we can just click on update
And as you can see, you can actually edit the page appearance
individually as well because you know how we set the Themify settings
default for all the pages before
But you can actually edit them for each individual page as well so if you don't want the specific header
that we have, then you can change it for each individual page as well
So just click on View Page and you'll see what I mean by the greyscale map
There you go. So that's pretty much done. So our Home page is done, About page is done, Blog page is done
Contact page is done and we've basically finished building our whole entire website in about 90 minutes
So let's click on our Home page. Okay, so before we finish, I want to go through a couple of things
and one of the is how to make it more mobile responsive.
So let's just double-click on this and I'll show you what I mean by that
And let's change this SHOP to SHOPPING
So……SHOPPING and let's link this again
and add link and then click on Save
And now the word is much longer now
So if we save it and actually close it here. And we minimize that screen
Then you'll see that the Shopping word cuts off. It doesn't show it fully
So we need to minimize the text size when the actual screen size changes so
when the screen size changes, then the text would also be smaller
So I'm gonna show you how to do that. It's gonna be really easy and quick
So what we're gonna do is click on Customize and then go to my Blog Tutorial
um, text tutorial. So we're gonna scroll down to the very bottom
and it's gonna say Tips and Tricks. And we're gonna copy in this code here @media screen
um, here and that one. So copy that and paste this into Custom CSS. Paste it on to the top
Paste as plain text
Now, we're gonna scroll down here and as you remember, this one is the H1 tag
So what this means is when the screen width is 400 pixels or less, then the H1 tag will actually go smaller
And the same with the h2 tag, it will go smaller
So we're gonna save and publish and I'll show you what I mean
So if we sort of go like that. If the screen goes smaller,
Then the text will go smaller as well. So as you can see, it it's less than 480 pixels the text goes smaller
You can change the sizes of that as well. So you only really need to edit this part, the font size
So you might want to change it to 2em. It'll even go a little bit smaller
But I think about 3 should be fine
And you can do this for your H3 tags, your H2 tags
And by simply just copying this code here, so just copy this code,
And if you wanna add a H3 tag, then you just hit Enter once. Paste that code in
Change this letter to H3 and then you can change the font size as well
So let me show you another example. Let me save and publish
And let's go to our About page
About page here
And then we're gonna scroll down. And this was the H2 tag
So we can change the sizing of that as well so you might be 2em, so you might want to change it to 2em
So that looks about good and, yeah, that's about it
So save and publish. And that looks good
So open it up. Okay, now for the images, sometimes it might not be fully responsive and that's because
when you turn on the Builder,
and this image is in a sort of a row container. If you actually add some code to make it responsive,
then it'll look something like this. When you minimize it, then the image will be like that
and the text will be like that
So to fix that problem and what I would do is to actually
I'll show you an example. So if you go to a shop like Missguided.eu
then if you minimize the screen, for example, pull this image here
Then the text actually goes smaller as well. Same with the image. So when you minimize it,
then everything goes small like that
So what you can do is let's go to Fotor and we got this image. Then we get some text
and let's just say we want to type in a title
And what I'd do is maybe change the color to white. Make it a little bit bigger
Okay, and then just click it like that
Move this into the center
In fact, maybe change it to a little bit smaller as it's too big. Then 150
Move this back into the center, if I can. Okay
And what we would do is let's just save this on to our computer as normal
Save it and we're gonna save it as this one here
Click on Save and Replace
We'll have to upload a image module so let's just drop a image module into this row container here
Or you could actually drop a slider module as well
So you can't add it as the background image. You'll have to drop the image module
So click on this and delete that
We're going to browse library and we're going to upload the file. Probably gonna delete this file first
And upload that file
Click on Open, Insert File and we're gonna click on Save
Okay, so we got the INSPIRE inside the image
And close that
Close this and let's say for example,we minimize this screen to a mobile screen size
Then it should shrink down perfectly like that
Okay, so if you wanna do that, then that's how you do it
But if you want to add a button inside there, then I recommend that you get the Slider Pro add-on
by Themify
I have tutorial on my Youtube channel for that as well
So make sure to check that out. I think it's really awesome because you can add a button, You can add
a text as well and it'll scale down perfectly
Yeah, so besides adding the image module in there, you can also add the slider module
So now I'm gonna teach you how to make the header or navigation bar here
sort of transparent without this line here
So to do that, it's really easy. What you need to do is go to the page that you want to remove the line here for
So just click on Edit Page and then this is the back end. We'll need to scroll down here
And click on Page Appearance
As you can see, you can edit a lot of the things on the page, specifically for this page
So what we need to do is change the header background here from solid background to a transparent background
Click on that
and then we can update
And then if we view the page, the line should be gone
Okay, the line is gone. So the About page, you might need to do it for all the pages as well if you want to
Or you could just leave it as that
Well this concludes the video. Thank you guys so much for watching
For additional videos on how to edit the mobile screen menu and also changing the post date color
Check out my Top 7 FAQ video on my channel
And for exclusive videos such as adding in a shop page, go to Hoganchua.com and join as a member
And don't forget about the competition. Check out Hoganchua.com/competition
and my Facebook page for more details.
And finally, if you have any questions, leave it down below
Make sure to Like it, Share it and also Subscribe
And I'll leave you with some inspiring words from Jim Carrey
"You can spend you whole life imagining ghosts, worrying about the pathway to the future
But all there will ever be is what's happening here
And the decisions we make in this moment, which are based on either Love or Fear
So many of us choose our path out of fear disguised as practicality
What we really want seems impossibly out of reach and ridiculous to expect
so we never dared to ask the Universe for it
I'm saying I'm the proof that you can ask the Universe for it
please
And if it doesn't happen for you right away, it's only because the Universe is so busy fulfilling MY order"


Filed under: Uncategorized

Like this post? Subscribe to my RSS feed and get loads more!