Hestia Documentation

Hestia is a modern WordPress theme for professionals. It fits creative, or small businesses (restaurants, wedding planners, sport/medical shops), corporate businesses, online agencies and firms, portfolios, e-commerce (WooCommerce), and freelancers, with a multipurpose one-page design, widget area footer, and a clean look. The theme is: 

• 📲 responsive
• 👁️ retina-ready
• 📊 SEO friendly
• 🖌️ wonderfully designed

*Hestia uses Material Kit created by Creative Tim for its design.

📩 Download and Install Hestia 

To download and install Hestia, make sure you follow the steps below:

1

Navigate to Hestia's page and click on the Download button.

2

Once you clicked the button, you have two options:

• Enter your email address in the pop-up window and click on Subscribe and download.
• Just click on Thanks, I want to just download the zip ( the email address is not required ).

3

You’ll be redirected to a confirmation page, while the zip file ( hestia.zip) for Hestia will be automatically downloaded to your computer.

From this moment, you have to  install the theme by following the steps presented in this doc.

Compatibilities

Hestia is fully compatible with the most popular page builders on the market, Elementor, Brizy, Beaver Builder, and others. For adding more functionality to the website, like social icons, contact forms, the shop pages, check the recommended plugins within the options page presented in the next chapter.

⚙️ Hestia Options

Here you will find all the necessary  information about Hestia. From the documentation, useful Plugins recommendations, the Support, Changelog, Recommended Actions, and even a table with the differences between Hestia Free and Pro, this is the place to go.

1

Navigate to Dashboard > Appearance.

2

Click on Hestia Options and start exploring the page.

📝Note: More features such as shop options are available in Hestia Pro, which you can get from here.

 Site Identity

📍 Appearance > Customize > Site Identity

Hestia comes with a navigation menu with two different variations: a transparent state ( on the front page, before scrolling ) and a solid background style ( on the front page, after scrolling, and on internal pages ). This is why, in some cases, the Logo image you are using may not be very suited for both menus variations.

For those cases, you can use  different logos for the Logo and Transparent Header Logo options.

• Logo - suggested image dimensions: 150 by 100 pixels.
• Transparent Header Logo - displays only when the header is transparent
• Site Title - the main title of the site.
• Tagline - a short phrase, or sentence, used to convey the essence of the site. 
  • In Hestia, the tagline is also used as a title for the latest posts page (if in Reading > Settings you have selected the "Your latest posts" option).
• Site Icon - add a unique icon for your site.

 Appearance Settings

📍 Appearance > Customize > Appearance Settings

The Appearance Settings panel is organized in five areas:

• General Settings - mostly settings regarding layout.
  • Page Sidebar Layout - this option controls the sidebar position on internal pages ( Default template pages and WooCommerce Shop Page). 
    • full width / left / right

• Blog Sidebar Layout -  this option controls the sidebar position on blog-related pages ( Blog, Archive, and Single Posts ). 
  • full width / left / right

• Shop Sidebar Layout - this option controls the sidebar position on the shop page and products' archives. 
  • full width / left / right

• Enable Sharing Icons - choose to enable or disable the sharing options on Single Posts. The icons 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, which allows the user to easily navigate back to the top of the page.
• Boxed layout - by default, this option is selected and creates a boxed layout for all containers within the site. For full-width type containers, just deselect this option.
• Disable Frontpage Sections -  check this option to completely disable the front page template, so you can easily add your content.

• Typography - includes settings for two panels:
  • Font Family
  • Headings Font Family - select the font you want to use for all the headings on the site.
  • Body Font Family  - select the font you want to use for all texts on the site.
  • Font Subsets - select only the subset of fonts you want to use. In this way, only the characters you want to use will be loaded.

• Font Size 
  • Posts & Pages - make the changes for each post and page.
    • Title - Desktop | Tablet | Mobile
    • Headings
    • Content

  

  • Frontpage Sections - change the font size for the front page sections.
    • Big Title Section
    • Section Title
    • Section Subtitle
    • Content

  

  📌 The font size is defined in pixels.

  📌 You can always undo the changes by clicking on the ↺ button (reset arrow). 

• Colors 
  • Background Color - change the background color throughout the whole site.
  • Accent Color - controls the buttons and other small accent elements like the categories in the Shop Section and many more.

More color options are available in Hestia Pro which you can get from here.

• Background Image - here you can add an image and customize it with the following options:
  • Preset - Fill Screen / Fit to Screen / Repeat / Custom.
  • Image Position - select the arrow that corresponds to the desired direction.
  • Image Size - Original / Fit to Screen / Fill Screen.
  • Repeat Background Image - enable / disable.
  • Scroll with Page - the image will appear as you scroll the page.
  • Header Background - you will be redirected to the header's options and there will appear settings like post/pages layout, products layout, current header, header gradient, enable Header Image Sitewide.

📌 Keep the size less than 1MB so that the website loads faster.

• Button 
  • Padding  - in PX, with a link button, so that the value will be applied to both directions.
  • Border Radius - rounds the corners of the buttons, for the majority of the buttons on the site.

 Frontpage Sections

📍 Appearance > Customize > Frontpage Sections

Here can be found the names of the sections of your website, with the following options available:

• Visibility - you can turn on / off the visibility of the elements, by clicking the 👁️ button.

📝 Note: Furthermore, you can add custom frontpage sections to your website, by following the instructions presented in this doc.

📝 Note: Please note that some of the following sections do not work without Orbit Fox. To make sure that all of the sections are available, enable the Hestia Enhancements module.

📝 Note: More front-page sections are available in Hestia Pro which you can get from here.

📑 Big Title Section

• Big Title Background - option to select either 
  • a background image for the Big Title Section:
  • the Parallax effect with two layers of images:  
  • make sure one of the images has some transparent portions to be able to see the full parallax effect.

Each of the options contains the following customizations:

• Title - displays the main big title.
• Text - shows sub-content.
• Button text and Button URL - add a text and a URL to redirect the page to the desired location.
• Extra
  • Layout - choose from three possible layout options:
    • Text aligned to the left or right side or text-centered.
    • If left / right is selected, it enables the "Big Title Section Sidebar" options at the bottom where you can add widgets such as contact form, subscription form, etc.

📑 Features Section

• Disable section - option to disable the section. 
• Section Title - the main title of the Features Section.
• Section Subtitle - subtitle for the Features Section.
• Features Content - in this area you can add as many Feature boxes as you want. Each Feature box has the following options:
  • Icon - option to select from a list of FontAwesome icons.
  • Color - option to change the color of the icon.
  • Title - title of the Feature box.
  • Text - add content to the Feature box.
  • Link - link to the Feature box.

📝 Note: Some FontAwesome icons may not be listed in the Feature box, but you can always select the one you want from the full list of icons at Font Awesome.

📑 About Section

• Disable section - option to disable the section. 
• About Content - main content for the About Section. The control supports text, HTML elements, and media attachments.
  • if you press the Edit button, you will be redirected to the WordPress editor.
• About Background - here you can add a background image for the About Section.
  • you can undo the changes by clicking on the Default button.

📝 Note: The content of the About section is synchronized with the content of the page set as Frontpage. This means that the control will also be updated if the page content is changed.

📑 Shop Section

📝 Note: The Shop Section requires the WooCommerce plugin to work, so make sure it's installed.

• Disable section - option to disable the section. 
• Section Title - the main title of the Shop Section.
• Section Subtitle - subtitle for the Shop Section.
• Number of Items - control that allows you to change the number of products displayed in the Shop Section.

📑 Team Section

• Disable section - option to disable the section.
• Section Title - the main title of the Team Section.
• Section Subtitle - subtitle for the Team Section.
• Team Content - in this area, you can add as many Team boxes as you want. Each Team box has the following options:
  • Image - image for the Team box.
  • Title - the title of the Team box.
  • Subtitle - the subtitle of the Team box.
  • Text - main text of the Team box.
  • Link - link to the Team box.
  • Social icons - This is repeater control, that allows you to add as many social icons as you want to each Team box. 
    • For each social icon, you need to provide the icon and the link.

📑 Ribbon Section

• Disable section - option to disable the section. 
• 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.

📑 Testimonials Section

• Disable section - option to disable the section. 
• Section Title - the main  title of  the Testimonials Section.
• Section Subtitle -   subtitle for  the Testimonials Section.
• Testimonials Content - in this  area , you can add as many Testimonials boxes as you want. Each Testimonial box has the following options:
  • Image -   image for  the Testimonial box.
  • Title - the title of the Testimonial box.
  • Subtitle - the subtitle of the Testimonial box.
  • Text - main text of the Testimonial box.
  • Link -   link to  the Testimonial box.

📑 Clients Bar Section

• Disable section - Option to disable the section.
• Clients Bar Content - In this area you can add as many Client boxes as you want. Each Clients box has the following options:
  • Image - image for the Clients box.
  • Link - link to the Clients box.

📑 Subscribe Section

📝 Note: In order to work properly, the Subscribe Section needs to have the SendinBlue free plugin installed and activated, so make sure you do that first. After installing the SendinBlue plugin, navigate to SendinBlue > Home and configure the plugin (Create a user, enter your API key and log in). 

The plugin will provide a default form (that can be found in SendinBlue > Forms) that you can use, with a few customizations. To get the same style as the subscribe form on the Hestia demo, you need to edit the default form, by replacing its content with the one provided below:

<div> 	
<div style="width:100%"> 		
<span style="margin:0; vertical-align:middle;"><i></i></span> 		
<input type="email" name="email" required="required" placeholder="Your Email Here"> 	
</div> 
</div> 
<div> 	<input type="submit" name="submit" value="Subscribe"> </div>

After saving the form:

Step 1: Go to Appearance > Customize > Frontpage Sections > Subscribe

Step 2: Click on the SendinBlue Plugin tab.

Step 3: Add the SendinBlue Widget. 

📝 Note: Make sure you choose the Default Form for the SendinBlue Widget. That should do it.

Apart from the main subscribe widget, the section also has some general settings:

• 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 Subscribe Section.
• Section Title - the main title of the Subscribe Section.
• Section Subtitle - subtitle for the Subscribe Section.

📑 Blog Section

This section consists of the latest blog posts (articles) published on your site. Make sure you set featured images for each post if you want images to be displayed in the Blog Section.

• Disable section - Option to disable the section.
• Section Title - The main title of the Blog Section.
• Section Subtitle - Subtitle for the Blog Section.
• Number of items - Control that allows you to change the number of articles displayed in the Blog Section.

📑 Contact Section

General Settings

• Disable section - option to disable the section. 
• Background image - background image for the Contact Section.
• Section Title - the main title of the Contact Section.
• Section Subtitle - subtitle for the Contact Section.
• Form Title - title of the form displayed on the right side.

Contact Content

• Instructions - how to install and activate WPForms Lite.
• Shortcode - you have the possibility to add any shortcode you would like to use for the contact form.
• Contact Content - add and customize content.

📝 Note: You can remove the opacity / overlay of the frontpage section, by following the steps presented in this doc.

 Header Options

📍 Appearance > Customize > Header Options

Here are the options for customizing the header area ( which has that pink color by default ). There are three subpanels:

• Very Top Bar - the Very Top Bar is the highest positioned section on the site, just above the navigation area.

  

  • Disable section
  • Very Top Bar Menu - you will be redirected to the Menus panel.
  • Add a widget -  you have the possibility to choose one of the numerous widgets.

📝 Note: Check out some awesome usages of the Very Top Bar here.

• Navigation - the Navigation area is formed by the Logo ( or Site Title ), the Primary Menu, and the Navigation widget area. 
  
  • Transparent Navbar
  • Enable Search in Menu - a 🔍  symbol will appear.
  • Layout -  change how the three components are aligned (three options).
  • Add a Widget - you have the possibility to choose one of the numerous widgets.

• Header Settings

• Posts / Pages Layout - three options
• Products Layout - two options
• Header Image - add an image if you desire
• Enable Header Image Sitewide - make the image available on every page
• Header Gradient - is used as a page header background, if there is no image set.
  • it can be changed by selecting a custom color. You can also undo the changes, by clicking on the "Default" button.

 Footer Options

📍 Appearance > Customize > Footer Options

This panel opens the Footer Credits area. Here you can add an HTML code.

More options such as footer layout, palette color, and customizable widgets area are available in Hestia Pro which you can get from here.

 Blog Settings

📍 Appearance > Customize > Blog Settings

This panel covers two areas:

• Featured Posts - will display on top of the normal blog page the most recent three posts from the category you choose. 
   
  • Categories - choose what categories will be displayed.

• Blog Settings 
  • Blog Layout - Post List / Post List with alternative positioned images.
  • Display Blog Categories - control the number of categories displayed for each post.
  • Blog Post Content - use either the content or excerpt of the post.
    • If you choose the Excerpt option, you will have to set the Excerpt Length.
  • Post Pagination - choose the pagination type: Number / Infinite Scroll.

More options such as grid layout, infinite scroll, and others are available in Hestia Pro which you can get from here.

 Menus

📍 Appearance > Customize > Menus

In this panel, you have the possibility to configure your current menu, create a new one or set the menu locations.

Hestia supports three menus:  Primary Menu, Footer Menu, and the Very Top Bar Menu.

If you want to link menu items with the front page sections, you can just create Custom Links with the IDs specific to each section. The IDs are listed below:

• Big Title Section - #carousel-hestia-generic
• Features Section - #features
• About Section - #about
• Shop Section - #products
• Team Section - #team
• Testimonials Section - #testimonials
• Subscribe Section - #subscribe
• Blog Section - #blog
• Contact Section - #contact
• Ribbon Section - #ribbon
• Clients Bar Section - #clients

📝 Note: Here is a doc about how to link menus to sections.

 Widgets

📍 Appearance > Customize > Widgets

Hestia supports six widget areas. As the name suggests, the Footer One, Footer Two, and Footer Three widget areas are situated in the footer of the site and can be filled with the widgets of your choice.

For each area, you can:

• add a new widget 
• reorder the widgets

 Homepage Settings

📍 Appearance > Customize > Homepage Settings

Here you can choose what’s displayed on the homepage of your site. The options are: 

• posts in reverse chronological order (classic blog)
• a fixed/static page

To set a static homepage, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.

📝 Note: The theme's sections will appear on the front page only if the page set there has the default template. 

 Additional CSS

📍 Appearance > Customize > Additional CSS

If you want to customize specific areas of your website, you can try to add custom CSS in the additional CSS section.

 Header / Footer Scripts

📍 Appearance > Customize > Header / Footer Scripts

This panel allows the user to write code to customize the header and footer of the website.

📝 Note: This option is available only with the Orbit Fox plugin installed.

💬 Translate Hestia

Translating Hestia can be done by using any of the following plugins:

Single Language:

• TranslatePress
  • a dedicated article on how to use this plugin with Hestia is available on this page.
• Polylang
  • a dedicated article on how to use this plugin with Hestia is available on this page.

📝Note: We also have translations available for plenty of popular languages here. You can simply download and use the translated .po and .mo files.

Multiple Languages:

For a fully multilingual website with Hestia, you need the premium version which you can get from here.

Read more about Hestia Free vs PRO