Hestia Pro 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:

  • Jetpack: You need to install Jetpack in order to use the Portfolio section.
  • 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 two options:

  • 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.
  • Footer Credits: Here you can put the credits you want to appear in your footer. There are no restrictions, and it can be anything.

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 Pro stand out from other Material design themes. You can customize pretty much everything in front-page, and here's how:

Section Ordering

We've used many layouts for section ordering in past, but this time we went all in and made the WordPress' Customizer sortable, which is one of the most awesome things about Hestia Pro. You can drag & drop sections to arrange them in whatever you want. 

Slider Section

In order to add a slider on the Home Page, you must go to Appearance > Customize > Slider and add as many slides as you want. For each slide, you can add the background image and the content inside each slide.

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.

Portfolio Section

Hestia Pro comes with a Portfolio section on the homepage. For this section to work, you would need to first install the Jetpack plugin , activate the portfolio custom post type and create your portfolio.

After you have activated the Jetpack plugin you can find the Portfolio custom post type in your site's dashboard. There you can add content to the portfolio. You must add a featured image in order for the portfolio item to appear on the frontpage section.

There are two layout options for the portfolio section. You can set this in the customizer under Frontpage Settings > Portfolio > Enable big boxes. You need to have at least 4 or 5 portfolio items displayed on the frontpage to be able to use the big boxes layout.

Team Section

With Hestia Pro 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.

Pricing Section

Hestia Pro comes with a beautiful set of pricing tables. It allows you to add unlimited options to your tables by separating them with a \n, as seen in the image above

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 Pro 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 class="col-sm-8">
	<div class="input-group">
		<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
		<input type="email" class="sib-email-area form-control" name="email" required="required">
	</div>
</div>
<div class="col-sm-4">
	<input type="submit" class="btn btn-primary btn-block sib-default-btn" 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.

Blog Settings

Apart from homepage, there are many options you can use to customize the blog pages, which are follows:

General Settings

  • Remove Sidebar on Single Posts: If enabled, the sidebar will be removed from single posts.
  • Remove Sidebar on Blog Index?: If enabled, the sidebar will be removed from the blog index page.
  • Enable Alternative Blog Layout?: If enabled, the blog page will use the alternative layout.

Authors Section

Author section allows you to put the authors you added to your Team section to your blog pages. You can pick the authors from your team and put them here, as well as change the background image.

Subscribe Section

Just like team section, you can also put your subscribe widget in your blog pages, using Sendinblue widgets. It also allows you to change the title and subtitle of the section.

The main content of this section is customizable in: Customize > Widgets > Blog Subscribe Section. There you must add the "SendinBlue Newsletter" widget. But first you will need to install Customize > Widgets > Blog Subscribe Section.

After installing the plugin, you need to navigate to Sendinblue > Home, and configure the plugin.

And then you need to navigate to its Settings, and use the following in Subscription form:

<div class="col-md-8">
	<div class="input-group">
		<span class="input-group-addon">
			<i class="fa fa-envelope"></i>
		</span>
		<div class="form-group is-empty">
			<input type="email" class="form-control" name="email" required="required" placeholder="Your Email...">
			<span class="material-input"></span>
		</div>
	</div>
</div>
<div class="col-md-4">
	<input type="submit" class="btn btn-primary btn-round btn-block" value="Subscribe">
</div>

That's all! Now just see more people subscribing to your mailing list.

Colors

Hestia Pro 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 Pro theme:

  • Slider Section - #carousel-hestia-generic
  • About Section - #about
  • Features Section - #features
  • Team Section - #team
  • Shop Section - #products
  • Subscribe Section - #subscribe
  • Portfolio Section - #portfolio
  • Testimonials Section - #testimonials
  • Pricing Section - #pricing
  • 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.

How to make Hestia WordPress theme look like the demo