Hestia Pro Documentation
Install & Configure Your New Theme
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.
WPForms Lite: WPForms allows you to create beautiful contact forms, subscription forms, payment forms, and other types of forms for your site in minutes, not hours!
Recommended Image Sizes
- Slider - 1920px × 1080px
- Logo - 150px x 100px
- Header - 1920px x1080px
- Blog thumbnails - 360px x 240px
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 >
- Disable Frontpage Sections - Are you using Hestia Pro for your blog? Don't need the custom frontpage? Just check this option to completely disable the frontpage, so you can easily work on your site.
- 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.
Those are general controls, meaning that they apply for all pages. If you want a specific page/post to have a different layout, you can choose it on each individual page/post in the Hestia Pro Settings metabox.
- Sidebar width - Option to control the width ( in pixels ) for the sidebar.
- Container width - Option to control the width ( in pixels ) for all pages across the site.
By adjusting the sliders, you can increase or decrease the width of the containers according to your preferences.
- Enable Sharing Icons - Choose to enable or disable the sharing options on Single Post Pages. The options are Facebook, Twitter and Email.
- 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.
Special note for any page builder lovers out there: Hestia PRO is also fully compatible with the most popular page builder on the market ( Elementor, Brizy, Beaver Builder, etc ). If you want to learn more on how to use Hestia's custom homepage with your favorite page builder check it here.
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.
Big Title Section
To add a slider on the Homepage, you must go to Appearance > Customize > Frontpage Sections > Big Title Section and add as many slides as you want. On each slide, you can add a background image and the desired content (copy).
Extra options for the Big Title section:
Parallax effect with two layers of images. Select an image as First Layer and one as Second Layer to enable a parallax effect between the two images. Make sure one of the images has some transparent portions to be able to see the full parallax effect.
Video header: You have the possibility to either upload a video or enter a Youtube link here.
Note: On smaller displays, the fallback image (Header image) will be displayed instead of the video. ( to keep the bandwidth in mind )
Choose the layout of the Big Title Section, left, center or right aligned.
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.
Use Hestia's custom homepage with any Page builder
In order to be able to edit Hestia's custom homepage with Elementor or any other page builder, make sure you have the About Section enable. This is required, as otherwise, it will cause this error: "Sorry, the content area was not found on your page. You must call the content function in the current template, in order for Elementor to work on this page."
- Disable section - Option to disable the section. (This option is also synchronized with the Enable/Disable option mentioned before.)
- About Content - Main content for the About Section. The control supports text, HTML elements, and media attachments.
- About Background - Background image for the About Section.
Note: The About Content control is synchronized with the page set up as Frontpage. This means that the control will also be updated if that page suffers some content changes.
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.
There is also an Open in Lightbox option available for the portfolio section. When enabled, this will open each one of the portfolios in a lightbox, unlike the normal behavior where the single portfolio page is opened.
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.
NEW FEATURE: For each pricing table you now have the option to also add an awesome icon.
- Disable section - Option to disable the section. ( This option is also synchronized with the Enable/Disable option mentioned before. )
- Background image - Background image for the Ribbon Section.
- Text - Main content text for the Ribbon Section.
- Button Text - Button label for the Ribbon Section.
- Link - Button link for the Ribbon Section.
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.
Clients Bar Section
- Disable section - Option to disable the section (this option is also synchronized with the Enable/Disable option mentioned before).
- Clients Bar Content - In this area you can add as many Clients boxes as you want. Each Clients box has the following options:
- Image - Image for the Clients box.
- Link - Link to the Clients box.
The contact section works with WPForms plugin. First, you need to install and activate WPForms plugin in Dashboard->Plugins, Add new, WPForms Lite.
After creating the desired form you can add its shortcode in the contact section field.
For a step by step tutorial, please check this guide.
Apart from the homepage, there are many more options you can use to customize the blog pages, as it follows:
Choose from three layouts for the Blog page: Post List, Post List with alternative positioned images, and Columns.
If you decide on the third layout, with Columns, you also have options for:
- the number of columns ( 1 to 4 )
for a number of columns bigger than 1, you also get an option to Enable Masonry, which works by placing the elements in optimal position based on the available vertical space, sort of like a mason fitting stones in a wall.
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.
Choose from two different layouts for the products style: Boxed or Wide.
Apart from that, you can also control the Category ( either to show it or not ) and the type of pagination ( Numeric or Infinite Scroll )
Feel that the Checkout page is too crowded?
With this options, you can Disable the Order Note section, Disable the Coupon section or even have a Distraction Free Checkout that will remove the navigation menu.
The header gradient color is used as a 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.
Here are the options for customizing the header area ( which has that pink color by default ).
There are two controls for the layout of the header area: one for posts and pages and one for WooCommerce products.
The Posts/Pages header layout will apply on all posts and pages and has three options ( Title in header, Title outside header, No header ) to choose from.
The Products header layout will apply on all WooCommerce products and has two options ( With header, Without header ) to choose from.
You can also choose a Header Image and a Header Gradient color.
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 of
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
- Ribbon Section - #ribbon
- Clients Bar Section - #clients
If you have multiple pages on your site, you need to make sure you use the full link of your site before the ID, to be able to navigate from one page to the other. Something like this: https://www.sitename.com/#features
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.
If the CSS Classes field doesn't appear on the menu items, it can be enabled in the screen options.
White labeling is mostly used by agencies and developers who are building websites for their own clients and want to prove they are the developers of the theme. Using the White Label options provided by Hestia Pro, you can easily rename and present the theme as your own.
To enable the White Label feature, just navigate to Appearance > Customize > White Label. There you will find a link to the White Label Settings.
There you can add your own branding elements: Author name and link, Theme name, description and custom screenshot.
By clicking Save Changes, we'll automatically replace Hestia Pro's and ThemeIsle's references from the theme with your own custom names.
Furthermore, if you wish to also hide these settings from your clients/users that might have access to your site's back-end, you can click on the Enable White Label toggle. After saving the changes, the options will disappear from Appearance > Customize. To enable the options back in the future, you would just have to deactivate Hestia Pro and activate it again.
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 translate Hestia Pro with Polylang
- How to translate Hestia Pro with WPML
- How to translate Hestia Pro with TranslatePress
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]
- Ribbon: [hestia_ribbon]
- Clients bar: [hestia_clients_bar]
- 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.