Page Building Tips

Hestia Theme Page Building Tips.

These page building tips explain how to make your Hestia web pages look great. With these useful tips you’ll soon have professional looking web pages and blog posts you’re proud of. Read on to see how it’s done.

Photo or text intro?

Hestia theme has three layout options for the top of your web pages and blog posts.

• Page title overlays the featured image.
• Page title displays below the featured image.
• Page title displays above the featured image.

The 3 Hestia page headers look like this:

You choose one of these 3 options and then every page or post on your website uses that layout.

The intro section.

Option one and two above use a full width image, these layouts are called hero headers.

Below a hero header you need some text that introduces your web page and orients your reader. You should briefly explain what’s on this page, who should read it, and what they’ll get out of it.

Start with text.

When my site uses a large hero header image, I start the body of my web page or blog post with a text intro section. I do this because using a photo heavy intro section below a large hero photo can be over whelming. Using a text bridge between the large banner hero image and any image heavy page elements is one of my favourite page building tips.

If you use a large text intro headline, and optionally, a one line sub heading. Your intro text:

• Stands out.
• Is easy to read.
• Get’s your message across quickly.
• Doesn’t overwhelm the reader with unnecessary graphics.

Too much “Eye Candy” can hide your message in a maze of photos and colors. Your introductory text is very important and should be very easy to read and understand. Steve Krug’s book Don’t Make Me Think explains this principle.

Elements of a text intro.

Text intros are made from some, or all, these elements:

• Eyebrow headline.
• Main headline.
• Introductory paragraph.
• Button.
• Separator line.

An eyebrow headline is an all caps headline, above the main headline, in a small font size. Your main headline should be big and bold so the reader cannot miss it. Below the main headline I add an introductory paragraph with slightly larger font size than the paragraphs in the body of my page. And, if it makes sense, I include a button in my intro section. Sometimes I also place a separator line below the intro section if necessary.

Don’t overdo it.
Most of the time, my intro section consists of a large font headline followed by a one line paragraph set to 22 pixels. I only include the eyebrow, button, and separator if I need them.

White space.
Below the intro section and before any large graphical or photo blocks, I make sure there is plenty of space. This gives the reader time to absorb my headline and figure out what the page is about before they’re distracted by more headlines or fancy attention grabbing graphics. Whitespace is one of those page building tips all designers must remember.

Fancy blocks below the intro.
After my main headline, introductory paragraph, and some white space, I have free rein to build the rest of mt page layout as I wish. However, I only add fancy blocks if I need to.

The image below shows a good page intro section:

After the intro text headline.

What we’ve got now is a hero image overlaid with the page title followed by a bold unmissable intro text that briefly explains what this page is about.

If you’re writing a text heavy web page, all you need are headline, paragraph, and image blocks.

However, if you want to add some eye candy to your page I recommend you use the built in Hestia patterns.

Patterns make page design easy.

Patterns are ready made page sections that you can insert into your page with one click. First place the cursor in your web page at the point you want to insert the pattern. Then:

1. Open the block inserter.
2. Select the patterns tab.
3. Scroll down and select Hestia patterns.
4. Click any pattern to insert it into your page.

Changing the demo content in Hestia patterns.

To replace the demo text with your own, select it and type your new text.

To replace images, select the image and click the replace button.

Editing button text and button URL links.

To replace button text just select it and replace it with your own.
To add a URL or link to a button use the button tab in the toolbar.
When adding a link to a button you must press ENTER before WordPress will accept the link.

Using any other WordPress or “Gutenberg” block.

WordPress comes complete with many blocks. You use these blocks to add content to your website. You can see a list of the blocks and information about how to use them on the official WordPress website.

View the WordPress blocks list.

Hestia has extra block settings.

WordPress uses a block editor to insert blocks of content into your web pages. Hestia adds some extra settings that are not available in the default WordPress blocks.

My favorite Hestia block settings are padding, margin, and block spacing. There is also a space between setting that I use to place space between blocks in rows.

Learning WordPress.

Hestia theme has a lot in common with the default WordPress theme Twenty-Twenty. The two themes are different, but if you need an introduction to WordPress the Twenty-Twenty theme videos will help you get started.

WordPress themes vary massively in how they work. Hestia and Twenty-Twenty theme are similar to each other and are (relatively) easy to use. Elementor and Divi are more powerful but much more complicated to use.