Hello everyone, and welcome to our channel.
My name is Robert and in this video, I will
show you everything you need to know about
our Hestia WordPress theme, and how to use
the customizer to create your first WordPress
website step by step.
By the end of this video, you will understand
what is the difference between the free and
the pro version of Hestia and which version
would fit perfectly to your needs.
If you are here to learn more about a specific
feature or section of Hestia, feel free to
use the time stamps below and jump to the
desired step.
The easiest and fastest way to install it
is by going to Themes under Appearance on
your dashboard, click Add New, and search
Hestia in this field.
Now you have to click on Install and wait
a couple of seconds until the Activate button
appears.
Once activated, the theme creates a new menu
element under Appearance named Hestia Options.
But before accessing those options, let me
check out the look of my website as it is
right now on the front end.
If your website is new, it will probably look
like this but don't worry, I will show you
how to make it look like the demo in just
a couple of clicks.
The next step would be to do some Recommended
Action like installing and activating the
OrbitFox by Themeisle plugin which will give
you access to even more features and sections.
As you can see right now, in the Customizer,
you only have five sections available, but
if you click Install and Activate over here,
or here, it will give you everything you need
and even more.
In the General Settings of the plugin, you
can enable features like Social Sharing, Gutenberg
Blocks, Uptime Monitoring, Google Analytics,
and the Menu Icons module is the feature you
need to get access to the menu icons you see
in our demo.
The last module will enable this bottom bar
with info about your website's Privacy Policy
and it can be linked to the Default Core Policy
or a custom page.
Ok
Now I will go back to Hestia Options and show
you more recommended plugins which could be
useful for improving your website's speed,
automatic blogging, the so popular and advanced
frontend drag and drop page builder plugin,
a simple way to create responsive charts and
tables and embed them into your site.
Last but not least, we recommend WPForms as
your form builder and TranslatePress for multilingual
sites.
Now, let's go to the Sites Library, import
the Original Demo of Hestia, and see how it works.
Before importing that demo, let me go to the
homepage and reload it so we can compare how
it looks right now with the new design.
Ok, now I'll go back to my dashboard, Hestia
Options, SItes Library, and preview the Original demo.
So, this is the homepage with many sections
where you can see some products too which
means that the importing process will put
together some products and the WooCommerce
plugin too.
Yes.
Your website will become an online store where
you can start your own e-commerce business.
The contact form in the last section is made
with the WPForms plugin which is not there
on your dashboard yet, but it will be installed
automatically once everything is imported.
Also, if you keep the Content option turned
on it will import these demo blog posts too.
So, click Import, disable what you don't need
in the pop-up window that appears next, and
click Import again.
There are four steps in the importing process
which should take under ten seconds to complete.
Installing required plugins, importing content,
setting up the customizer, and finally, importing
widgets.
Once the process is finished, you can go back
to the Sites Library, View your Website, or
add custom content.
For now, let me check out the homepage which
is already open in this tab.
If I reload this page you can see that the
demo content is fully available now on my
website, including the product section and
the contact form in the last section.
Let me access my dashboard and show you what's
new.
As you can see under plugins, you have two
new elements; WooCommerce and WPForms lite,
which you can use to create any type of form.
You can speed up the process though by unlocking
the pre-built form templates among other features.
But this video is about Hestia, so I won't
go deep into this right now.
Let's see what other new things we get once
a demo website is imported.
Under posts, click all posts and you will
notice three new articles besides the default
hello world post which I would move to trash
and delete forever.
These posts are there for demo purpose and
you just saw how to get rid of them.
Alternatively, you can edit those posts but
keep in mind to edit the permalink too, and
if you don't see the edit button near the
permalink of your post, go to Settings, Permalinks
and choose the Post Name structure.
Save changes and go to the following step.
In the media library tab, you will see all
of the images imported from the demo, and
the pages you need are under All Pages over
here.
The Sample Page is again something you can
move to Trash and Delete Permanently to keep
your site clear from unneeded content.
Now I will click on Customize under Appearance
to show you step by step, how to change the
content.
This is the place where you can adjust the
global settings of your site, edit the content
of your Frontpage Sections, access the Header
and Footer settings as well as create or edit
your menus and widgets.
There are some interesting WooCommerce features
too and in the Additional CSS tab, you can
use custom CSS to change the appearance and
layout of your site even more.
Let's go up and start with the Site Identity.
Obviously, this is the place where you can
select your custom logo for both versions;
main and transparent header logo.
Below the logo, you can change the Site Title
and Tagline, but the tagline never shows up
so don't worry too much about it.
It can be useful for SEO though.
If you select a Site Icon over here, it will
show up as a custom graphic near your website's
name in places like the header of your browser,
in the bookmarks tab, and the recently visited
sites on this window of Google Chrome, for
example.
In the General Settings of this tab, you'll
find options for full-width Layout, sidebar
on the left or right for pages, blog, and
let me go the blog page to show you how it
works with the sidebar on the left and right.
The shop sidebar is empty for now but you
can populate it with useful features like
product filtering, search form, and recent
products, for example, but I will show you
more about this in the widgets tab.
Next, I'll show you the place where these
built-in Sharing Icons are displayed, if the
feature is enabled.
If I go to a blog post, for example, and scroll
down to the end of the content, you will notice
three sharing icons for Facebook, Twitter,
and Email.
Remember the Social Sharing Module of Orbit
Fox?
You can use that to give people options to
share your content on even more social media
platforms like Pinterest, Linkedin, WhatsApp,
and so on.
If you switch to the Inline After Content
desktop position, after saving your changes,
it will show up like so in your blog posts.
The following options in General Settings
are for Typography and with the Pro version
of Hestia you get even better control over
the font size options, for each specific mode:
Desktop, Tablet, and Mobile.
Moreover, you'll be able to adjust the size
of the characters in the navigation menu.
As for color options, you can change the Background
Color as well as the Accent Color but within
the Pro version, you'll get access to even
more settings.
The Background image will replace the white
background behind your sections but if you
disable the Boxed Layout in General Settings,
you won't be able to see the background.
And yes, you can upload a header image that
can be displayed sitewide once this box is
checked, but I will show you more about this
in the Header Option menu.
There is only one option remained under Appearance
Settings which is for your Buttons, and it
will allow changing the padding and border-radius
for all of your buttons globally.
It will affect only the buttons that belong
to Hestia, though.
In its free version, Hestia offers eleven
beautiful sections, filled with demo content
you can easily customize, or delete, and this
is exactly what I'll cover next.
For sections like Pricing Plans and Portfolio
by Jetpack, I would recommend the Pro version
which will give you the ability to reorganize
your frontpage sections.
So, this is the Big Title Section where you
can upload a new background image, change
the title, the text below the title, the text
of your button, and the button URL.
In the Extra settings tab, you can move the
content to the left or right, and use widgets
for adding more things like a contact form,
for example.
As a pro user of Hestia, you can create a
slider in this section or use a video in the
background instead.
To disable a section, any section, check this
box or click on the eye near that section.
Let's go to the following section which contains
the features.
This section's title and subtitle can be customized
in these fields and a feature contains three
elements; the icon, the title, and description.
The color of the icon is adjustable over here
and you can redirect your visitors to specific
links that can be pasted in this field.
You can add new features as well, and delete
features that you no longer use if you click
the delete field over here.
The about section is disabled for some reason
by default so check this box to enable it.
This is the most versatile piece of content
on your front page.
I mean you can edit it with the Block Editor
of WordPress and use any type of content provided
as blocks.
Alternatively, you can use page-builder plugins
like Elementor or Beaver Builder to create
custom content.
A good way to tell people more about you and
your business is with a video that you can
embed in this section by using the YouTube
block of WordPress and paste in a video link
in this field.
The shop section displays the available products
in WooCommerce and you can change its title
in this field, the subtitle below, and the
number of items you want to display over here.
Let's go to the following section which is
the place where you can show up members of
your team.
If you have only two people in your team,
you can delete these elements and then edit
the content of the remaining two team members.
Upload a new image, change the title, subtitle
which could be the position of that member
in your company, a short description, and
a link to his or her website for example.
If applicable, you can paste links to Social
Media profiles below, ore you can remove these
Social Media icons to keep things simple.
The title and subtitle of this section are
editable in these fields, obviously.
Subscribe to our newsletter is an example
of the call to action you can use in the Ribbon
section.
To replace the background image click here
and select a new image, change the call to
action text below, the button text and link
URL then click Publish.
The color and border of this button are editable
in the Appearance Settings, but I already
mentioned this earlier.
Testimonials are very useful pieces of content
on your website where you would display what
people think about you and your business.
So easy and straightforward to use, as any
other piece of your Hestia WordPress theme.
Here comes the Clients Bar section where you
can upload logos of the clients you work with,
and redirect people to custom links for each
client.
I think you can create a portfolio page where
you can showcase more about the service or
product bought by your clients.
Instead of the subscribe to our newsletter
call to action in the ribbon section, you
can use the Subscribe section powered by SendinBlue,
which works with a plugin you need to install
and activate first.
Then you have to create a SendinBlue account
and connect it with your website by using
the API key in your SMTP and API section.
To finish this step, add the SendinBlue widget
to this section choose the form you want to
use, and click publish.
To edit the way your form looks, go to SendinBlue,
Forms on your dashboard, and click edit.
Now you can go ahead and finish the setting
of your last two sections, Blog and Contact.
The blog section is simple and it will display
your latest blog posts but as a Pro user of
Hestia, you will be able to do even more things.
Last but not least, the contact section contains
the Get in Touch information where you can
upload a custom image and change the text
in these fields.
The contact form is provided by WPForms and
it is generated using the shortcode you see
over here.
To change info like address and phone number
below the get in touch text, click Edit over
here and use the visual or text editor of
WordPress.
If you want to change something in the contact
form, you need to go back to your dashboard
and click on All Forms under WPForms.
Edit the form in that section and save your
changes.
I will close the form editor now and go back
to the Customizer, Header Options.
I would like to start with the Header Settings
where you can use an image instead of color.
As you can see, there is no image set yet
so go ahead and upload a new image or use
existing images in your media library.
Crop the image and enable header image sitewide,
if you want that.
If this feature is enabled, it means that
this image will show up on every page instead
of the featured image picked separately for
each page.
Also, for the single product page, you can
choose between two layout options, with or
without a header image.
The posts and pages layout, though, have three
different formats; the default layout shows
up the title over the image, the second option
put the title below the image and the last
one is the classic look with the title above
the featured image.
Navigation is the place where you change the
look of your navbar which can be transparent
and you can enable search in your main menu.
The following thing you should do here is
to change the layout and use a widget like
custom HTML to display a banner over here.
Want to show up email, phone, or social media
icons above your header menu?
Enable the Very Top Bar and use a menu or
widget to do just that.
Check out the video recommended above or in
the description box to learn more about how
to use this section step by step.
See the footer credits over here?
Go ahead and change the content in Footer
Options.
For example, you can keep the existing text
and replace only the link to the Hestia theme
with your affiliate link.
This way you will make money when people buy
Hestia through your link.
To make your footer area look like in our
demo, use the Widgets tab and populate footer
one, two, and three with any widget you want,
but I will show you more about this later,
so keep watching.
By default, your blog page looks like this
but if you want to feature a specific category,
choose that in this drop-down and it will
turn on this nice looking masonry design for
the last three articles in that category,
followed by your latest posts in any category.
Your blog has two types of layout settings
in the free version but as a Pro user of Hestia,
you can switch to a modern layout that looks
like this if your sidebar is turned off.
Then you can go ahead and play around with
some display settings for categories, content,
excerpt, and pagination.
If you pick none in this drop-down, your categories
will be turned off and if you have multiple
categories level set for a blog post, you
can display the first category or all categories.
Just for your latest articles below the featured
section, you can turn on the entire content
but for a better visual experience, I would
recommend the excerpt selection with just
30 words.
Or turn off the category above the title and
use 40 words as your excerpt length.
For a big blog with a lot of news, you can
set up the post pagination as Number or Infinite
Scroll in this drop-down and we are done with
the Blog Settings.
The Menus tab will take you to the settings
of your default top menu, footer menu, and
main menu.
You can create and assign menus in this tab
exactly as you do it in Menus under Appearance
on your dashboard.
But, if you turn on the Menu Icons module
of Orbit Fox, that option will not show up
in your customizer.
It will turn on this plus icon near the name
of your menu elements on your dashboard.
So, if you want to create a good looking menu
with icons just like the one in our demo,
pick your preferred icon or filter them out
in the search field.
For the shop element, you can use a cart icon
and after clicking Save Menu it will look
like this on the front end.
For a full WordPress menu tutorial with icons
please watch the recommended video above or
check out the links in the description box.
WordPress widgets are displayed on your blog's
sidebar usually but this type of content can
be displayed in your footer area as well,
and near your header navigation as a banner,
for example.
On your dashboard, widgets settings are located
under Appearance but for a visual experience
when building your blog's sidebar, for example,
you should use the Widgets tab in the Customizer.
To create a footer close to the one you see
in our demo, use Footer One and add a text
widget, Footer Two with any Social Media feed
widget, and Footer Three will be populated
with pictures from your Instagram account
but you'll have to use a plugin to connect
your website with your Instagram account.
This is just for inspiration.
I would recommend using your imagination to
create something unique.
There are a lot of widgets available for almost
any type of content.
If you will use Hestia only for blogging and
you want to display your latest blog posts
on your homepage, choose the Latest Posts
under Homepage Settings.
By default, the selection of a static page
is made out of your Front Page in the Homepage
drop-down and the Blog page as your posts
page.
Just keep in mind to push the Publish button
above from time to time so you won't lose
changes if something goes wrong.
Here comes a very important section for Online
Store website owners.
Under WooCommerce you have four menus and
the first one is useful if you just started
building your e-commerce website and want
to let people know that no orders shall be
fulfilled.
If this is enabled, it will show up a notification
bar at the top of your website on every page,
which can be something different, like "huge
sale" or "big discount" for specific products.
The Product Catalog settings will give you
access to Shop page display variations, Category
Display, Default Product Sorting and in the
last two fields, you can choose how many products
per row will be displayed as well as how many
rows per page.
To adjust the default look and size of your
product images, change the thumbnail cropping
settings over here.
For example, if you want to adjust the height
of your images, set 30 instead of 35 in this
field and it will make your images smaller,
as you can see in the preview.
The checkout options are for the checkout
page and once you go there it will redirect
straight to that page.
If you want to sell your products only for
individuals, turn off the company field, foe
example.
Feel free to play around with all settings
below until you get the best out of your Checkout
page.
I think the Privacy Policy and Terms pages
are mandatory for every online store so make
sure you create and pick the proper pages
in these drop-downs.
I think I am done and I hope that every aspect
of your Hestia WordPress theme is completed
and now you know exactly what you can create
with this theme.
There is one more tab below WooCommerce, the
Additional CSS which you can use to finetune
your website if you know how to code.
Alternatively, you can go to our Hestia theme
documentation and use the provided custom
CSS, link in the description box, to change
the height of your page header, for example.
To adjust the height of your website's header
where the image is located, paste, or type
in this custom CSS over here, and you will
notice that your header becomes taller.
For a full-screen height keep the value 100
over here but you can make it 50 or 70, for
example.
Just keep in mind that it will affect every
page, not just your big title section.
If you go to general settings and disable
the boxed layout it will give you a clear
vision over the full height look of the big
title section.
This is it, guys.
Thanks for following me until the end with
patience.
If you have questions, feel free to leave
a comment below.
I will answer each of you guys.
Keep up the good work, and see you in the
next video.
Cheers!
