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.
- 1
- Navigate to Dashboard > Appearance.
- 2
- Click on Hestia Options and start exploring the page.
- Navigate to Dashboard > Appearance > Customizer and start customizing Hestia:
- A
- 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
- 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
- Page Sidebar Layout - this option controls the sidebar position on internal pages ( Default template pages and WooCommerce Shop Page).
- 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).
- Posts & Pages - make the changes for each post and page.
- 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.
- 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.
- 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
- Visibility - you can turn on / off the visibility of the elements, by clicking the ποΈ button.
- Big Title Background - select image/parallax/video (pro) as hero background.
- Extra - choose from three possible layout options.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Image -
- 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.
- 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.
- 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.
- 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.
- 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.
- D
- 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.
- 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
- F
- 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.
- G
- 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
- H
- add a new widget
- reorder the widgets
- I
- posts in reverse chronological order (classic blog)
- a fixed/static page
- J
- K
- 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.
βοΈ 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.
π 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.
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.
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.
Appearance Settings
π Appearance > Customize > Appearance Settings
The Appearance Settings panel is organized in five areas:
More color options are available in Hestia Pro which you can get from here.
π Keep the size less than 1MB so that the website loads faster.
Frontpage Sections
π Appearance > Customize > Frontpage Sections
Here can be found the names of the sections of your website, with the following options available:
π 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 Section
πNote: Learn more about the big title background options here.
π Features Section
π 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
π 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.
π Team Section
π Ribbon Section
π Testimonials Section
π Clients Bar Section
π 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:
π 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.
π Contact Section
General Settings
Contact 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:
π Note: Check out some awesome usages of the Very Top Bar here.

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.
Blog Settings
π Appearance > Customize > Blog Settings
This panel covers two areas:
More options, such as grid layout, 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:
π 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:
Homepage Settings
π Appearance > Customize > Homepage Settings
Here you can choose whatβs displayed on the homepage of your site. The options are:
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:
π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.