Hestia Theme Basics: What you Need to Know.

This is an introduction to Hestia theme basics. It provides a brief overview of the most important settings in Hestia WordPress theme.

And don’t forget, to begin your WordPress adventure by exploring our homepage for the start of a friendly Hestia theme tutorial that simplifies the website building process.

The site title, logo, tagline, and transparent header options.

• The logo size is 150 by 100pixels.
• When the homepage is set to display the blog page, the tagline replaces the page title.
• When you use an image logo, the site title AND tagline can be displayed at the side or below the logo. The tagline will not display unless you use an image logo.

To avoid displaying the site title, the documentation says do not add a site title via the customiser.

On the free version of Hestia, the transparent header only displays on the front page. You can toggle the homepage transparent header off via the customiser.
Customise > Header Options > Navigation.

Hestia Recommended Image Sizes.

Hestia documentation says. “There isn’t an exact image size that would always fit, because that depends on the layout of your website”.

This is what I do.

• I make all featured images 1920×1080 pixels. Which is 16:9 aspect ratio.
• I place the focal point of the image in the centre, because Hestia crops the images when displaying them as hero header images.
• If I want to ensure Hestia displays the hero header image without cropping it, I upload a featured image of 2000×500 pixels. However, I only do this for the featured images of pages, not posts, and for Header Images uploaded via: Customiser > Header Options > Header Settings. Because Hestia does not use these featured images in post archive listing pages.
• For images I insert into the content area of blog posts or pages, I crop the image to the aspect ratio I need before uploading the image.
• If I intend to use an image to span 50% of my page width, I make the image 1040 pixels wide.
• If I intend to use an image to span more than 50% of my page width, I make the image 1920 pixels wide.

Hestia specific patterns.

Hestia includes 14 bundled patterns. These patterns are professionally designed, look great, and can be customised by you. I always look through these patterns before building my own page layouts from scratch. Patterns are one of the most useful Hestia theme basics any new user needs to know.

You find the Hestia patterns via the blue block inserter icon at the top left of the post editor. Select the patterns tab, then look for the tab labeled Hestia.

Blog page layout.

Customiser > Blog Settings.

The blog settings tab in the customiser is divided into two parts.

• Featured Posts.
• Blog Settings.

Featured Posts.

The three featured posts display above, and larger than, the other blog post excerpts.

The featured posts setting has two options. You can enable or disable the featured post section that displays at the top of the blog archive page. And, if you enable feature posts, you can select the category to draw the three featured posts from.

Blog settings.

You find the blog settings by going to: Customiser > Blog Settings.

There are five blog settings.

• Blog layout.
• Display blog categories.
• Blog post content.
• Excerpt length.
• Post pagination.

Blog layout lets you stack the post listing featured images on the left, or alternate the featured images left and right.

Display blog categories inserts a text link into each post excerpt. That link takes you to the category archive page the blog post was drawn from. This makes it easy to find more posts on the same topic.

Blog post content is the amount of text to display with each post listing. You can display the whole post text, but on blog archive listing pages, most people choose to list just a short excerpt of teaser text that links to the full blog post.

Excerpt length. If, in the blog post content drop down, you choose except, you can choose an excerpt length. I usually choose 25, 50, or 75 words. This is the amount of teaser text your site visitors see about each blog post on your blog archive listing page.

Post Pagination. Pagination is the way you navigate to the next page of your blog. If for instance, you show excerpts of 10 blog posts on each archive listing page, you could see a list of numbers at the bottom of each blog archive page. These numbers let you know where you are in the list of blog posts. For instance, you are viewing the 3rd page of posts in this blog. You can choose between number and infinite scroll. If you choose infinite scroll, you do not have to click to view the next ten blog posts, WordPress will continue to display blog post excerpts as long as you scroll down the page until all the post excerpts have been displayed.

The blog settings are a vital part of any Hestia theme basics guide, experiment with the settings and organise your blog and archive pages just the way you like them.

Other settings in the customiser.

Below I list the Hestia settings and options and the path to find those settings in the customiser.

Customiser > Appearance Settings.

General Settings

Customiser > Appearance Settings > General Settings.

• Sidebars.
• Sharing icons.
• Scroll to top.
• Boxed layout.
• Disable front page sections.

Typography: heading and body font and size settings.
Customiser > Appearance Settings > Typography.

Accent colour and content background colour.
Customiser > Appearance Settings > Colors.

Background image.
Customiser > Appearance Settings > Background Image.

Button: border radius and button padding.
Customiser > Appearance Settings > Button.

Header Options.

Customiser > Header Options.

The header options customiser tab has three sub tabs.

• Very Top Bar.
• Navigation.
• Header Settings.

Header Settings.

This setting controls how the hero section looks, it’s the top section of your posts and pages.
Customiser > Header Options.

Options include:

• Overlay the featured image with the post title.
• Display the featured image as a hero image, and display the post title below.
• Do not display any hero section, place the post title above the featured image in the content area of the page or post.

The header style is a site wide setting.

You can set a site wide default or fall back header image that displays on any post or page where you have not assigned a featured image. If you have assigned a featured image to a page or post, the image you have assigned will be used.

The free version of Hestia does not have a disable post title option.

Add a search icon to navbar.
Customise > Header Options > Navigation.

Header Layouts.
The header layout refers to the logo and navigation bar. Logo left with navbar right, logo above navbar, logo and widget area above navbar.
Customise > Header Options > Navigation.

Very Top Bar.
This is an optional widget area where you can display an extra navbar or one of several other blocks or widgets. However, it is fixed at a bout 60 pixels high. So you’re limited as to what content you can add here. The official Hestia video tutorial shows adding phone number, email address, and social media icons. You can also add icons to the clickable phone number and email address using tel: and mailto:.

Adding social icons to menus: Activate the very top bar menu via: customiser > menus > view all locations > very top bar menu. Assign a menu to that location. To convert some links into social icons, add custom links to social media URLs and use the platform name as the text.

The header settings help any Hestia theme basics newbie design their website’s header just the way they want it.

Footer Options.

There are three footer widget areas that only display if you add content. To populate the footer add content to these widget areas.

Front page sections.

Customiser > Frontpage Sections.

Hestia theme comes with a ready made front page layout. To customise this homepage, go to:
Customiser > Frontpage Sections.

Then open each of the sub tabs to find the settings for each front page section.

The front page sections are:

• Big Title Section.
• About.
• Subscribe.
• Blog.
• Contact.

Unless deactivated, the front page sections will form the homepage of your website.
The page you set as the homepage via Dashboard > Settings provides the content of the Hestia front page “about” section.

The front page sections consist of several predesigned page sections. Each section has a toggle on-or-off tick box. The easiest way to customise the Hestia front page sections is to view the front page when the customiser is active. You will see pencil icons in the editor window, click them to open the corresponding edit page for that page section. The content you added to the page you assigned as your home page via customiser > homepage settings, will display in Hestia’s front page settings about section.

Big Title Widget Area.

The homepage hero, header section, includes the “Big Title Widget” area option. Here, you can place an image or video at the side of the heading and sub heading text. Big Title Widget area only activates if you set the homepage hero text left or right. Big Title Widget area does not display when the homepage hero text is centre aligned.

The options for most homepage sections are predefined, you can only change the text and background images etc.

Brevo Plugin.

There is a subscribe form in one of the homepage sections. This needs the Brevo Plugin. I think Brevo is an alternative service to Mail-chimp. I don’t cove setting up Brevo in this Hestia theme basics guide, but you can learn all you need from the Brevo plugin page on WordPress.

Homepage blog section.

You can choose how many blog posts to list in the blog section of the homepage, but you cannot specify the category.

Homepage contact section.

The contact section at the bottom of the page needs WP Forms Lite plugin.

The easiest way to access the homepage sections settings is to view the homepage, open the customiser, then click the pencil icons in the page. This jumps you to that setting in the customiser.

The homepage settings are some of the most important Hestia theme basics and are well worth learning.

Hestia settings in the post editor include.

• Three sidebar options.
• Disable navigation.
• Disable footer.

Responsive settings.

In all settings check for responsive icons to choose.

Social media icons.

You can add social media icons to the very top bar menu and to other menus. The Hestia specific patterns include social icons, copy those patterns and paste them into your page or post.

Making a navbar link look like a button.

In screen options make sure CSS classes is activated. Then add this code to the link:
btn btn-primary
btn-round

Advanced CSS Classes.

To target the page header I used this code.

.page-id-63 .page-header {display:none;}

Wow! That’s quite a list of Hestia theme basics, but you now have a good understanding of what Hestia theme is and how it works. Practice, practice, practice and you’ll soon be making great looking websites that compete with sites built by agencies and freelancers.