Hestia Pro Documentation
Install & Configure Your New Theme
After purchasing a theme, go to Purchase History to download it. When the download is ready, 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 Install Now. In a few seconds, WordPress will upload and extract the theme from the archive. The last step is to press the Activate link that comes with the message confirming the installation.
You need to install the following plugins to enable various functionalities of the theme:
- Jetpack: Adds a Portfolio section to your site.
- WooCommerce: Adds a Shop page to your site.
- Pirate Forms: Allows you to add a contact form in Contact section.
Setting Up Homepage & Blog
To set up the Homepage and the Blog with Hestia, you need to create new pages in your WordPress Dashboard. The first one will be a page named "Home" (or another name by choice). The second will be a page for Blog, which will only need a page title.
After you've created the aforementioned pages, you need to navigate to Appearance > Customize > Static Front Page >
In General Settings section, you have two options:
- Enable Alternative Blog Layout - This option allows you to use the alternative layout we have prepared for the Blog page. In this layout, the articles are displayed in an alternative way, one to the right, followed by the next one, on the left side, and so on.
- 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.
- Page Sidebar Layout - This option controls the sidebar position on internal pages ( Default template pages and WooCommerce Shop Page ). It can be either full width, left sidebar or right sidebar.
- Blog Sidebar Layout - This option controls the sidebar position on blog related pages ( Blog, Archive, and Single Posts Pages ). It can be either full width, left sidebar or right sidebar.
- Sidebar width - Option to control the width ( in pixels ) for the sidebar.
- Container width - Option to control the width ( in pixels ) for the containers across the site.
- Enable Sharing Icons - Choose to enable or disable the sharing options on Single Post Pages. The options are Facebook, Twitter and Google+.
- Enable Scroll to Top - Choose to enable or disable the option to add a Scroll to Top button at the bottom of each page, that allows the user to easily navigate back to the top of the page.
If the default fonts don't suit your needs, you can change them easily from Customizer -> Appearance Settings -> Typography. The theme is providing a large number of beautiful fonts you can choose from.
It's time to 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, you get a set of additional settings to tailor it to your liking.
The Front page sections are those that make Hestia Pro stand out from other Material design themes. You can customize pretty much everything on the front-page, and here's how:
We've used many layouts for sections ordering in the past, but this time we went all in and made the WordPress Customizer sortable, which is one of the most awesome things you will find in Hestia Pro. You can drag & drop sections to arrange them the way you want.
To add a slider on the Homepage, you must go to Appearance > Customize > Slider and add as many slides as you want. On each slide, you can add a background image and the desired content (copy).
In the features section, you can showcase an unlimited number of features or services in the form of a repetitive box, containing an icon with a color of your choice, a heading, and the main text.
The About section pulls content right out of the page content. This means that anything you add inside the content box via your admin page will appear here too. It also brings in the featured image as the background for the section.
The Shop section on the homepage was designed to showcase your best products. For this section to work, you need to install the WooCommerce plugin and then add the products.
Hestia Pro comes with a Portfolio section on the homepage. For this section to work, you need to install the Jetpack plugin, activate the portfolio custom post type, and create your own portfolio.
After you activate the Jetpack plugin, you can find the Portfolio custom post type in your site's dashboard, from where you can add content to this section as well. You must add a featured image to make the portfolio item appear on the front page.
There are two layout options available for the portfolio section. You can choose your favorite one via the customizer under Frontpage Settings > Portfolio > Enable big boxes. You need to have at least 4 or 5 portfolio items displayed on the front page to be able to use the big boxes layout.
With Hestia Pro you can showcase your team members on the homepage of the site, using the Team section. Here you can add details about every team member, such as image, name, position in the company, and social links.
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.
With such an appealing website, your clients will surely have nice things to say to you. You can beautifully display their words in your Testimonials section via Appearance > Customize > Frontpage Sections > Testimonials.
Hestia Pro comes with a Subscribe section on the homepage. For this section to work, you need to install the SendinBlue plugin, navigate to Sendinblue > Home and configure the plugin. After that, you need to go to its Settings and use the following lines of code in the 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>
The next step is to navigate to Appearance > Customize > Widgets > Subscribe Section and add the Sendinblue widget to it.
The Blog section on the front page is pretty straightforward to use. It will always display your blog's most recent posts. You can choose how many posts to display here via the Customizer.
Contact section works with Pirate Forms plugin, so you need to first install Pirate Forms from Plugins > Add New (found in your Dashboard). Once the plugin is installed, a default contact form - without any configurations - will show up on the front-end of your site.
Apart from the homepage, there are many more options you can use to customize the blog pages, as it follows:
- 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.
The Author section allows you to transfer the authors from 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.
Just like Team section, you can also put your Subscribe widget on your blog pages, using Sendinblue widgets. You can also change the title and subtitle of the section.
The main content of this section is customizable via: Customize > Widgets > Blog Subscribe Section. There you must add the "SendinBlue Newsletter" widget. But first you need to install Customize > Widgets > Blog Subscribe Section.
After installing the plugin, you need to navigate to Sendinblue > Home and configure it.
Then, go to its Settings and use the following code in the 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 wait for the people to subscribe to your mailing list.
The header gradient color is used as page header background if there is no image set. There are 3 ways to set an image instead of the gradient color. Below are listed from the highest to the lowest priority.
- The page featured image.
- The header image that can be changed from the customizer by navigating to Appearance->Customize->Header Options->Header Image
- The background image that can be also changed from the customizer by navigating to Appearance->Customize->Appearance Settings->Background image.
Header Gradient color can be changed from the customizer Colors panel.
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, the headings, and the main text colors.
The Header Options section allows you to modify the Very Top Bar section and the position of the Navigation.
Very Top Bar Section
Hestia comes with a Very Top Bar Section, that appears at the top of the site. You can find more details on how to enable this section and some really cool examples with it here .
Here is where you have the option to change the layout
Also, here you have the option to add a search icon in the Primary Menu.
You can easily choose the number of widgets and the position directly from Customizer -> Footer Option.
- Footer Credits: Here you can put the credits you want to appear in the footer. There are no restrictions, it can be anything.
Settings Up Your Menu
Hestia theme was built with one-page parallax design in mind. To add this feature, we have divided the front-page of our theme into multiple sections. Linking to those sections in the menu is very simple, all you need to do is to assign the section anchor to the menu. Here's how:
Navigate to Appearance > Menus in your WordPress Dashboard. Create anchors to the sections, as seen below.
Here's the list of all 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, so you can use it with your menu items.
First, you need to enable Title Attribute for your menu items. After enabling it, 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 the list of all the icons here.
Adding Button Styles To The Menu
Just like the icons, you can style each menu item by using various classes. You must add the btn class to the CSS Classes field, followed by btn-primary. This one takes the color you set in the Customizer under the Colors > Accent Color option. If you add the btn-round class, the button will get a rounded border.
We also have translations available for plenty of popular languages here. You can simply download and use the translated .po and .mo files.
How to use shortcodes in Hestia Pro theme
Go to your Dashboard's Appearance -> Customize -> Frontpage Section and hover on the desired section until its shortcode appears.
These are the shortcodes you can use on other pages:
- Features: [hestia_features]
- About: [hestia_about]
- Shop: [hestia_shop]
- Portfolio: [hestia_portfolio]
- Team: [hestia_team]
- Pricing: [hestia_pricing]
- Testimonials: [hestia_testimonials]
- Subscribe: [hestia_subscribe]
- Blog: [hestia_blog]
- Contact: [hestia_contact]
Then you have to install the Elementor plugin https://wordpress.org/plugins/elementor/
Add the shortcode using the Elementor plugin.
This can be done easily with drag-and-drop options. Here you have to paste the shortcode from the desired section.
Hestia Pro is based on Material Kit created by Creative Tim.