Looking to customize and set up Hestia WordPress
theme?
In this video, I will walk you through a step-by-step
guide to make Hestia look like the demo, including
how to use a logo, create the navigation menu
and so on.
If you already have Hestia installed on your
WordPress website jump to the timestamp below.
If you are just getting started, follow the
steps until the end.
First, you need to install and activate the
Hestia WordPress theme.
To do that, click on Themes under Appearance
on your dashboard and then click Add New.
Here, type Hestia in the search bar then you
will see three themes as a result of your
search. You need to install only the multipurpose
Hestia WordPress theme.
After the installation occurs, activate it
and then click on "Get started with Hestia"
You are redirected to an onboarding flow where
you can import pre-built site demos.
Click on "not right now" link below.
As you can see here, we recommend some plugins
you should install right after installing
the theme.
So, install and activate the Orbit Fox Companion
plugin and WP Forms.
I will show you why later in this video so
keep watching.
Orbit Fox Companion is required in order to
have access to some of Hestia front page sections
like Team, Testimonials, Features, Ribbon
and Clients Bar.
More of that, this swiss-knife plugin comes
with a quality template library, simple Google
Analytics integration, Menu Icons module,
Social Sharing etc.
Remember that you can check the timestamps
in the description box below to navigate directly
to the step you want.
Now that we have everything in place, we can
start the setup process so your Hestia WordPress
theme will get a personal touch.
To do that, head to Appearance then click
on Customize.
Here, on the left, you can access the options
every section and piece of content comes with.
Also, you can hide the controls if you want
to see the entire page and you can toggle
through different devices so you can see how
your website looks on a mobile device.
If you want to customize exactly what you
see on the screen without guessing where that
piece of content can be changed, click on
this pencil icon of the area you want to edit.
Let's start by changing the Site Identity.
If you have a logo, you can upload it here
by clicking "Select Logo", then "Select Files",
choose the file you want to upload and then
click on open.
The recommended file type here is .png and
you can see the recommended dimensions here.
Once the file is uploaded click on "Select",
crop the image if needed or simply click on
"Skip Cropping" then you are done.
You can see the logo instead of your website
title.
Cool, right?
If you want to get rid of the logo, click
"Remove" or "Change Logo" to replace it with
a new one.
Further down, you can change the Site Title
and tagline.
This is not what you see in the big title
section, is your site title which you can
see if you remove the logo.
Try words that describe your business very
well.
Finally, if you want to display an icon in
browser tabs, bookmark bars and within the
WordPress mobile apps, select the file you
want to upload here following the recommended
dimensions.
Publish the changes once you finish and move
to the next step.
The first menu you access in the Appearance
Settings allows you to set the Page Sidebar
Layout.
You have the option with no sidebar, then
you can have the sidebar on the left side
of your screen or you can set it to be shown
on the right.
Let me show you how it works.
If you go to the blog page, for example, you
can see the sidebar on the right.
If you click on the left sidebar option you
will notice that the sidebar will move to
the left and if you click on no sidebar at
all, the sidebar will disappear.
This will affect your single post page template
too so choose it wisely.
The page sidebar layout will only affect your
pages.
I think we have a sample page here so I can
show you how it works.
If you have the sidebar on your pages on the
left, you can set the same sidebar to be shown
on the right side of your blog page and single
posts.
If you choose one of the two layouts with
sidebar, please make sure you have also added
widgets in the corresponding sidebars.
I will show you how to do that later so keep
watching.
Furthermore, you can enable the Sharing Icons
you see on your blog posts and the "Scroll
To Top" button which will appear once you
scroll down close to the footer area of your
website.
This will help your visitors to scroll back
to the top with one click.
Two options left in this area.
One is the "Boxed Layout".
If enabled, the theme will use a boxed layout
like so.
Are you using Hestia for your blog?
Don't need the custom frontpage?
Just check this option to completely disable
the front page, so you can easily work on
your blog.
Two tabs here.
Font Family and Font Size.
You can change the font family with Standard
Fonts or with Google Fonts.
To get a professional help I recommend you
use a tool like fontpair.co.
One of the featured pairs here is Lora & Merriweather.
To use that pair of fonts on your website
search for Lora in the Headings Font Family
drop-down and then find the Merriweather for
the Body Font Family.
It looks awesome, right?
Furthermore, you can change the Font Subsets
if needed.
In the Font Size tab, you have options to
change the size of your Title, Headings and
Content on your posts and pages.
The best thing here is that you can set a
different size for your fonts on a mobile
device, like so.
Cool, right?
Further down, you can change the font size
of your Big Title Section, Section Title,
Section Subtitle, and Content.
Once you finish customizing the fonts, click
on "Publish" then move to the next step.
The Background Image is what you see in the
background of your content only with the boxed
layout enabled.
If the boxed layout is disabled your visitors
won't see that image at all.
If you want to keep the image in the background,
you can change its preset in this drop-down
to Fill Screen, Fit To Screen, Repeat or Custom.
Further down you can change the Image Position
and then you can check if you want that image
to be repeated in the background.
Finally, you can upload a header image as
well but we will talk about this in the Header
Options later.
See the button below your blog posts that
say "Post Comment"?
You can change some settings of it here.
The vertical padding like so and the horizontal
padding too.
You can use the arrows to go up and down slightly
or you can type a fixed value in the text
box like so.
You can link or unlink the paddings and you
can reset the values to its initial state
like so.
The border-radius set to zero makes the button
look like a square and 50, which is the maximum
value, makes the button rounded.
See the button near the search function on
your sidebar?
These settings will affect almost all the
buttons you have on your website.
The button in the Big Title Section and the
Submit button on your contact form too.
Publish the changes on finish then move to
the next step.
First, you can disable this section like so.
If you want to keep it active, though, you
have the options to set the background as
a simple image or as a two-layer parallax
effect.
If you choose the second option you need to
upload the First Layer image which will be
the background and the Second Layer which
will be the moving object over the background
that will create the parallax effect when
you hover over the big title section with
your mouse.
Further down, change the Title here, the Text
here and the Button text here.
You can also set a Button Url here.
This can be a link to a page, or a post or
an anchor as well.
Choose an anchor that will navigate to any
section below the Big Title, the #features
for example.
After you click "Publish" click on the button
to test it out.
I will show you how to use the anchors of
each section later in this video so keep watching.
As an Extra feature, you can align the content
in the big title section to the left, center
or right.
If you choose the left or the right alignment,
you can see that you have an "Add a Widget"
button which you can use to add a video in
this section, for example.
That's it with the big title section.
Save the changes and move on.
Now move down to the first section below the
Big Title.
The Features section has three content boxes
by default which you can change, delete or
you can add new features as well.
First, change the Section Title and Subtitle
here.
Then change the content of the features.
The icon and the color of the icon like so,
then change the title, the text and finally
add a link if you want that icon to redirect
to a page or post.
Leave the link field blank if you want to
deactivate the hover effect and click on the
icon.
Alternatively, you can set the link to redirect
to a section as well.
The About Us section for example which is
the upcoming section below.
You can set those icons to redirect to other
pages as well.
Change the content in each feature box then
publish the changes.
Let's start by changing the background image.
Click on "Remove" or "Change Image" below,
upload the image you want to use and then
click on "Use Image".
That's it!
Furthermore, to change the content of this
section, click on "edit" here.
Use the classic WordPress editor or any page-builder
you want to make this section as awesome as
you want it.
If you want me to show you how to make this
section look like the demo using the Elementor
page-builder leave a comment below and I will
prepare a video on that topic.
If you have installed and activated WooCommerce
and added some products to your inventory,
you can see those products here.
Change the Section Title, the subtitle and
choose the number of products you want to
show.
If you want to see how to add a product to
your inventory, a variable product, for example,
check the recommended video above or the link
in the description.
That’s it.
We are done with this section.
This is the section where you show off your
team.
Four boxes here by default which you can edit,
delete or you can "Add New Team Members" as
well.
Start by changing the Section Title, Subtitle
and then you can customize the content of
the boxes, one by one.
Upload an image like so, change the title
which will be the name of your team member
then change the subtitle, text, and ad a link
if you want it, like the personal blog of
your team member for example.
Set the social icons with a link to his or
her social profile.
If you don't want to show all these social
icons you can remove them like so.
If you want to get rid of the facebook icon
too, just delete the content of the field
like so and then publish the changes.
Do the same with each box until you finish
adding all of your team members and finally
click on "publish" to save the changes again.
The Ribbon section is hidden by default but
you can activate it like so.
Click on the eye on the left and you'll notice
the section becomes active immediately.
Alternatively, you can activate or deactivate
any section by unchecking or checking this
box inside the section options.
Changing the content in this section is easy.
Here is how you can change the Background
Image, the Text, and the Button Text.
If you want to set a link that redirects to
a subscription form, for example, enter the
link here.
You can use this section to promote a special
offer or to navigate to the subscribe to our
newsletter section or to the contact section
as well.
Use your imagination to get the best out of
it.
Testimonials are strong marketing tools.
In this section, you can write three, two,
one or even more than three testimonials.
You can modify the default content by uploading
a new image here, changing the title which
is your client name, the subtitle and the
text then if you want it, you can add your
client website here, for example.
More of that, you can add a new testimonial
by clicking this "Add New Testimonial" button.
Then you just need to fill up the blank fields
and you are done.
This section is meant to show the logo of
your clients.
It is as simple as uploading an image here,
.png type preferably, and then, optionally,
you can add a link to their website, if you
want it, here.
Feel free to use this section for other purposes
as well.
Here is a nice trick.
Delete the fields until the last one and upload
a button instead of the logo.
Make the link redirect to the contact section
by adding the #contact anchor there.
As you can see, if you click on the Contact
Us button, you will scroll down automatically
to the contact section.
Cool, right?
Let's move to the subscribe section.
This section uses the SendinBlue service to
automate your email marketing efforts so the
first step should be to install and activate
the plugin.
Click on Install and activate here then wait
until the plugin will be installed.
Once the installation process occurs you will
notice the "Create SendinBlue Account" button.
Click on that button and create your account
for free.
Enter your company name, your email and choose
a strong password to access your account then
click on "Sign Up For Free".
Check your email to activate your account
and then log in to get the API key you need
to connect your account with your WordPress
website.
Find the API key by navigating to API & forms
and then click on "Manage Your Keys".
Here, copy the second key and then go back
to your WordPress dashboard.
Click on SendinBlue > Home link suggested
here, paste the access key and then click
Login.
After you get the confirmation message go
to the Forms here and edit one of your default
forms so you can have a simple subscription
form with only one field - the email address.
To do that, delete the code that stands for
the "Name" field, change the name of your
form to "Subscribe", for example, so you can
easily recognize it if needed then save the
changes.
If you want the form to be exactly how it
looks on the demo, you can copy and paste
the code from the documentation - you will
find a link in the description box below.
What you need to do next is to go back to
Appearance/Customize then navigate to the
Front Page Sections/Subscribe and click on
the SendinBlue Plugin tab.
Add a SendinBlue Widget here, select the form
you want to use in the drop-down then click
Apply.
If you feel like the button is too big and
you want to change its appearance, remember
that you can change that in the Appearance
Settings/Button menu of your customizer.
Adjust the padding and border radius as needed
then save your changes.
Just remember that all your buttons on your
website will get the same design, ok?
Here comes the blog section which shows your
latest blog posts.
A great way to engage with your visitors.
If you don't want to display this section
yet, you can deactivate it as you do with
any other section by checking the box here
or by clicking the eye on that specific item
on your FrontPage Sections, remember?
The last section on your front page is the
Contact section.
You will see some default content here that
you can change as needed.
To do so, head to the Contact Content tab
and click on Edit.
Change the "Find us at the office" info with
your own address and the "Give us a ring"
content too.
Once you are done, click on Publish.
If you want to change the "Get in touch" title,
the subtitle and the "Send me a message" text
in the header of your form, access the general
settings tab and you will see three fields.
Close the editor so you can have a better
visual on what you do next and start by changing
the Section Title, Subtitle and then change
what you read in the header of your contact
form.
Type in something like "send us a message"
or "send me an email", for example.
Do you see a shortcode instead of the contact
form?
Stay with me because I will show you how to
create a form, which you can use in this section,
with the WP Forms plugin installed earlier
in this video.
Close the customizer and head to WPForms on
your dashboard.
Click "Add New" to create a contact form.
Enter the name of your form, something like
"Contact" for example, and then choose to
create a "Simple Contact Form" below.
That's it!
Your contact form is done and you can save
your work.
Actually, before saving our contact form we
should set the name section to be simple,
with only one field like so.
It will look better in the contact section.
Now, click "Save" here and then copy the shortcode
you see after you click on this button.
Close the pop-up window and the WPForms editor.
Go back to the customizer, open the contact
section and in the Contact Content tab paste
the shortcode you have copied.
If everything works well, your contact form
should look like this.
Cool, right?
Finally, change the Section Title and the
Section Subtitle if you want something different
in those fields and save your progress.
We are done with the front page sections so
we can go to the next step.
You can see three options here:
1. The Very Top Bar.
2. The Navigation Options.
3. Header Setting.
The Very Top Bar is the highest positioned
section on the site, just above the navigation area.
You will find the following options here:
Option to enable/disable the section.
The Very Top Bar menu and The Very Top Bar
widget area.
The Very Top Bar menu can be selected directly
from Header Options > Very Top Bar.
I have created a menu named "Contact" with
contact details before so I can choose it
in this drop-down.
See how it works?
If you have no menu to choose from, please
pay attention cause I will show you exactly
what you need to do.
Just click on "Create New Menu".
Name your menu, make sure you check the "Very
Top Bar" location and then click "Next".
Now click on "Add Items" here and use the
Custom Links to create your new menu items.
First, we will add the phone number, ok?
Type in tel: followed by colon In the URL
field right after http:// and then enter your
phone number in the Navigation Label.
Once you finish, click on "Add to Menu" and
then create another Custom Link for the email
address.
This time you need to type in mailto: here
followed by colon, and then enter your contact
email in the field below.
Add it to the menu and publish the changes.
That's it!
Now you can see those contact details.
Cool, right?
Furthermore, I will show you how to add a
Social Menu here, ok?
Click on "Add a Widget" then select the Navigation
Menu.
If you already have a Social Menu you can
select it in the drop-down.
If not, here is what you need to do.
Go back and click on Menus in the Customizer.
"Create New Menu".
Name it then click on "Next"
"Add Items", Custom Links and paste your Social
Media Profile link in this field.
The link text should be the name of your Social
Media channel - Facebook in this case.
Click "Add to Menu" then create as many items
as you want.
Youtube, Twitter, Instagram and so on.
Once you finish creating the Social Menu click
on publish without checking any of these boxes
below, then go back to the Very Top Bar in
the Header Options.
Select the menu you just have created and
you are done.
These menu items will show only the icons
of your social media channel automatically
based on what you type in the URL field.
If you see something wrong, no problem because
you can edit that menu like so...
We are done with the Very Top Bar so let's
move to the Navigation options.
Here, you can enable the search function on
your menu like so.
This is how it works once is activated, ok?
Then, you can choose three different layouts for your main menu:
1. Logo on the left and menu on the right side of your screen.
2. Logo and menu in the center of your screen.
3. Logo to the left, a widget on the right and
with the menu displayed right below these elements.
You can add any available widget here, a Custom
HTML, which can be an advertising banner,
for example.
Just copy the code of your banner and paste
it in the content field like so.
Keep in mind to use a banner size that fits
your menu.
That's it with the options in the Navigation
area.
We are going to the Header Settings now.
The header layout of your pages can be changed
here.
Let's go to the Sample Page to see what I
am talking about.
The default setting here is with the title
of your page over the image.
If you click on the next option, you can see
that the title will go below the image and
the third option will push the title above
the header image.
To see exactly how it works, we need to add
a new image here.
Select or upload the image you want, crop
it to make it look better on the header area
and that's it.
If you want to have more images shown randomly,
just add new images as many times as you want
and click on "Randomize uploaded headers"
If you want to have a color instead, set it
here then publish the changes.
You can change two colors on your website.
The Background Color and the Accent Color.
Choose white for the background and green
for the accent color so you can see how it
works.
Choose your preferred colors here and move
to the next step.
This is where you can choose what category
to display on your blog page.
By default, your blog page shows your latest
blog post no matter what category.
We've done this option available so you can
choose what you want to show on your blog
page.
Further down, you can choose your Blog Layout
between tow models, like so.
Then you can choose how to display your blog
categories; None, First or All.
The blog posts on your blog page show only
the excerpt by default but you can choose
to display all the content in the blog posts
too.
If the excerpt option is chosen on the drop-down
above you can set how many characters will
the excerpt length have here.
Finally, if you want to set your blog page
to infinitely scrolling until the last article
on your blog, choose the infinite scroll in
this drop-down.
As you can see, you can add a new menu here
like so, or you can edit your existing menu
as well.
Although you have the menu icons enabled in
the Orbit Fox plugin, your way to add icons
to the menu items is only by accessing the
settings of your menu through the dashboard.
To do that, close the customizer and head
to Appearance/Menus.
Click on the plus sign on the left side of
your menu item and choose a house for home,
write-blog for the blog and so on.
Set the display location of your menu, Primary
Menu, in this case, save the menu and you
are done.
Want to see how to create the mega menu?
Follow the steps in the recommended video
above and you will learn exactly how to do
that.
Now, it's time to see how to use the menu
anchors and where to get them.
You will find them all in the Hestia documentation
which you will find in the description box
below, ok?
The "Sections" menu item in the demo is what
I will create so you can see how it works.
To do that, head to appearance then click
on menus.
Select the Primary Menu and start by creating
a new Custom Link.
Enter # in the URL field and name it Sections
then just add it to the menu.
Drag it to the place of your choice, add an
icon to the menu item like so, then continue
to create the submenu items, which you see
in the drop-down.
The first element uses the #features anchor
so you need to create another "Custom Links"
element, but this time the link will be the
anchor of your section you want the menu item
to navigate on click.
So, enter #features in the URL field, type
in Features below and then add it to the menu.
What you need to do next is to drag the element
slightly under "Sections", to the right.
This will set that menu item as a submenu
which you will see only when you hover over
the "Sections" with your mouse.
Now, add a specific icon to that subitem and
then continue with the second subitem, which
redirects to the about section, ok?
Start with the #about anchor in the URL field,
type in About below and then click "Add to
Menu".
Do the same with all the elements you want
to have in the submenu and use the anchors
you see in the documentation of the Hestia
WordPress theme...
Just like the icons, you can style each menu
item by using various classes.
Let's add a menu item called ”BUY NOW” to the menu an make it look like a button so you
can see how it works.
The URL field should be the link to the page
you want your visitors to see the product
or service you want to sell.
Sure, you can add an icon to this item too.
Then, you must add the "btn" class to the
CSS Classes field.
If you see no CSS field in the options below,
go to the Screen Options and enable it by
checking this box.
Now, add the "btn" class here followed by
"btn-primary".
If you visit the site now, you will see that
this one takes the color you set in the Customizer
as the Accent Color.
If you go back to the settings of your menu
and you will add the "btn-round" class, you
will see that the button will get a rounded
border.
ok?
Furthermore, if you want to create a menu
in the footer area of your website, go back
to the menu section on your dashboard and
create a new menu called footer, add the items
you want to have in that menu, set it as your
"Footer Menu" then save your changes.
That's it.
We are done with the menus.
If you have activated the widgets area on
your blog posts and pages, you can add widgets
there like so.
Head to the Appearance then click on Widgets.
This is the place where you’ll find all
your widgets.
By default, you have six widgets here which
you can edit, delete or you can add new widgets
as well.
For example, if you drag the SendinBlue widget
here, you can see the SUbscribe option active
on the sidebar of your pages and your blog
posts too.
You can see that we have three independent
widget areas here.
Footer one, footer two and footer three.
Let’s add a text widget in the Footer One
whit a demo content, an image widget in the
footer two
and an Instagram feed widget in the footer
three.
To have that Instagram widget available you
need to install and activate the Instagram
feed plugin, connect it with your account
and that’s it.
Check the recommended video above to see how
to do these integrations step by step.
Finally, your Hestia website is done.
Now you need to start promoting it and send
traffic to it.
Make sure you activate the social sharing
option on the Orbit Fox plugin so your visitors
can share your content.
On the screen, you are going to see some other
recommended videos so watch them next to grow
your brand new website.
Hopefully, this tutorial was helpful.
If it was, give it a thumbs up.
Also, consider subscribing.
I publish WordPress tutorials & guides weekly and I answer all the questions you guys leave
in the comment section below.
