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

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.

Download and Install Hestia
 Customizer Options
Hestia Options
 Translate Hestia

📩 Download and Install Hestia 

1
Navigate to Dashboard > Appearance > Themes.
2
Click on Add New and search for Hestia.
3
Once it appears, click on Install and then Activate.


⚙️ Hestia Options

Here you will find information that will help you get started with Hestia, such as recommended actions, useful plugins that will enhance your experience, support information, a changelog with the latest updates, and a free vs pro table. 

1
Navigate to Dashboard > Appearance.
2
Click on Hestia Options and start exploring the page.


🖌 Customizer Options

Hestia's main features are its stylish, unique material design, and the ability to customize everything from just one place, which is the Customizer.

  • Navigate to Dashboard >  Appearance > Customizer and start customizing Hestia:
Site Identity
 Appearance Settings
 Frontpage Sections
 Header Options
 Footer Options
Blog Settings
 Menus
 Widgets
 Homepage Settings
 Additional CSS
Header / Footer Scripts

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

A

 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.

B

 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.

C

 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.

Big Title Section
 Features Section
 About Section
 Shop Section
 Team Section
Testimonials Section
 Subscribe Section
Blog Section
Contact Section
Ribbon Section
Clients Bar Section

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

  • Big Title Background - select image/parallax/video (pro) as hero background.
  • Extra - choose from three possible layout options.

📝Note: Learn more about the big title background options here.

📑 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.

D

 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.
E

 Footer Options

📍 Appearance > Customize > Footer Options

This panel only displays information about the branding label, which can be customized with the pro version.

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

F

 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, are available in Hestia Pro, which you can get from here.

G

📍 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.

H

 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

I

 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. 

J

 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.

K

 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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.