Hestia Documentation

Video Tutorial


Install & Configure Your New Theme

After you have purchased a theme, go to  Purchase History to download the theme. After downloading the theme, navigate to Appearance > Themes > Add New > Upload, in your WordPress dashboard. Now, click the Choose File button, select the archive of your theme from your local computer and press the Install Now button. In few seconds, WordPress will upload and extract the theme archive for you. All you need to do next is to press the Activate link under the message for successful theme installation.

Required Plugins

You need to install the following plugins to enable some functionality of the theme:

  • WooCommerce: You need to install WooCommerce plugin in order to use Shop section.
  • Pirate Forms: You need to install Pirate Forms in order to put a contact form in Contact Section.

Setting Up Homepage & Blog

To setup Homepage & Blog page with Hestia, you need to create pages from your WordPress Dashboard. First will be a page named "Home" or whatever you prefer for your homepage. And second will be a page for Blog, which doesn't need anything but a page title.

After you've created the specified pages, you need to navigate to Appearance > Customize > Static Front Page >  Reading ,  and choose the "A static page" option in  Front-page  displays field. Select the appropriate pages, and save the settings. Now visit your website to see the magic live.

Appearance Settings

General Settings

In General Settings section, you have the option:

  • Boxed Layout?: It's enabled by default. If it's enabled the theme will use a boxed layout, else will use a  full width  layout.

Header Image

Here you can select the header for your posts and archive pages. The posts will use this if no featured image is present.

Background Image

Here you can select the background for your website. It will only appear on the homepage if the Boxed Layout is enabled. Once you select the background image, additional settings for the background will start appearing, like position and  preset .

Frontpage Sections

Front page sections are what makes Hestia stand out from other Material design themes. You can customize pretty much everything in front-page, and here's how: 

Features Section

In the features section, you can showcase an infinite number of features or services in the form of a repeatable box, containing an icon with the color of your choice, a  heading  and  a main  text.

About Section

The About section pulls content right out of the page content. This means that anything you add inside the content box on the admin side of the site will appear here. It also brings in the featured image as the background for the section.

Shop Section

The Shop section on  homepage  was designed to showcase your best products. For this section to work, you would need to first install the WooCommerce plugin and create some products.

Team Section

With Hestia you can showcase your team members on the homepage of the site, using the Team section. There you can add details for each team member, starting with an image,  name  and position in the  company,  to social links.

Testimonials Section

When your site looks so great, your clients will surely have a lot of things to say. You can put them in your Testimonials section from Appearance > Customize > Frontpage Sections > Testimonials.

Subscribe section

Hestia comes with a Subscribe section on the homepage. For this section to work, you would need to first install the  SendinBlue plugin ,  navigate to  Sendinblue  > Home and configure the plugin. After that you need to navigate to its Settings, and use the following in Subscription form:

<div> 	<div> 		<span><i></i></span> 		<input type="email" name="email" required="required"> 	</div> </div> <div> 	<input type="submit" name="submit" value="Subscribe"> </div>

After that you need to navigate to Appearance > Customize > Widgets > Subscribe Section, and add  Sendinblue  widget to it.

Blog Section

The Blog section on the  frontpage  is pretty straightforward to use. It will always display the most recent posts from your blog. You can choose how many posts to display from the Customizer.

Contact Section

Contact section works with Pirate Forms plugin, so you can  will  need to first install Pirate Forms plugin from Plugins > Add New, in your Dashboard. Once you install the plugin, you will start seeing the contact form on your website without any further configurations.

Colors

Hestia allows you to change the main colors of the theme. You can do it from Appearance > Customize > Colors. There, you can select the background and main accent colors,  headings  and main text colors.

Settings Up Your Menu

Hestia theme focuses on the one-page parallax design. And to do that, we have divided the front-page of our theme in multiple sections. And linking those sections from  menu  is very simple, all you need to do is assign section anchor to the menu. Here's how to do it:

Navigate to Appearance > Menus, in your WordPress Dashboard. And create anchors to the sections, as seen below:

Here's the list of all the sections for Hestia theme:

  • Header Section - #carousel-hestia-generic
  • About Section - #about
  • Features Section - #features
  • Team Section - #team
  • Shop Section - #products
  • Subscribe Section - #subscribe
  • Testimonials Section - #testimonials
  • Blog Section - #blog
  • Contact Section - #contact

Adding Icons To Hestia Menu

We love Font Awesome. We love it so much that we bundled it with our theme and you can use it with your menu items.

First  you need to enable Title Attribute for your menu items. After enabling that, you can add the Font Awesome classes to your menu items. It can be done from Appearance > Menus, as well as from the Customizer. You need to put two classes in that field:  fa  and icon class (fa-home for example). You can find a list of all the icons from here.

Adding Button Styles To The Menu

Just link icons, there are classes you can add to each menu item to style it. You must add the  btn  class to the CSS Classes field, followed by one of the classes from the following list:

If you add the  btn -round class to all of these, the button will get a rounded border.There is also the  btn -primary class. This one takes the color you set in the Customizer under the Colors > Accent Color option.