Design Hero Section Presets for Author Websites

Introduction

The above-the-fold area of your website is critical for capturing attention and driving visitor engagement. This lesson focuses on designing Wide and Slim Hero Section presets using Breakdance. You’ll learn to maximise screen real estate, establish visual appeal, and guide visitors to take action. By crafting well-optimised Hero Sections, you’ll ensure your author website effectively showcases its primary goals, whether that’s promoting a book or growing your mailing list.

The Most Important Website Area

The most important area of every webpage is what the visitor sees when they land on your website. That initial onscreen space that’s on display without the visitor have to click or scroll. 

Let’s look at a couple of examples.

Netflix

Netflix do not mess about. When you arrive on their home page they want you to do one thing.

Sign up.

It’s right there up front. Here’s what we have to offer, here’s a big call to action telling you what to do.

Audible

Staying with entertainment let’s look at Audible.

Again there is no messing about. As soon as you land on the home page you’re being guided to sign up.

Authors

What about authors?

Let’s start with one of the earliest Indie Success stories. Amanda Hocking.

As soon as you get to the website you’re presented with a call to action to buy the latest book. 

How about multiple million selling Mark Dawson?

The above the fold area on his website is dedicated to getting us to sign up to his mailing list.

Our very own Dirk Volcano has the same primary goal to build his mailing list as Mark Dawson by offering a free book in exchange for signing up to his newsletter. It’s juts pitched in a different way.

Just like the heavy hitters of entertainment all three of these self-published authors use the most important real estate on their websites to do one thing.

That’s it.

They’ve each picked a marketing strategy and put it as the lead content on their websites.

Amanda Hockings primary call to action is to buy her latest book.

Mark Dawson’s is to sign up for his mailing list to get his starter library and Dirk Volcano is giving away the first book in his Dylan Danger series

.

One thing.

That is the best place for authors to start with when deciding what to put on their home page and we’ll talk about that more in the lessons around the homepage and other major content areas.

Right now we are focusing on the section itself. Not the content. Kind of.

Screen Real Estate

I’ve already mentioned screen real estate and that’s a thing. We only get a short amount of time to connect with visitors to our website, especially new ones so it’s important to get the balance of content and layout.

In the wide and slim sections I made a point of having lots of space in the top and bottom of the sections to give the content inside room to breath and make it easier for the visitor to translation from one batch of information to another.

But when I look at the style guide on a live browser there is a lot of white space between the first heading and the top of the screen.

That’s a lot of wasted screen real estate.

We should be using that space as part of the over all effort to nurture the visitor towards taking our primary calls to action.

Here comes the Hero

If you’ve spent time around web designers you’ve most likely heard the term ‘Hero Image’

Originating from the theatre term Hero Prop a “hero image” in web design refers to a large, attention-grabbing picture with text typically shown in the above-the-fold area of the webpage, directly beneath the website header.

Typically, a hero image takes up practically the whole pre-scroll full-width area on the page. The other layout components (call-to-action button, text, etc.) are placed in the header and on or adjacent to the hero image to create a unified and harmonious visual composition.

The hero image may be either stationary or interactive (videos and animations). It could be a theme picture of technology, a structure, a landscape, or even an abstract model or piece of art. The fundamental goal is to establish a rapid visual, emotional, and educational connection with the consumer through a picture that immediately attracts their attention. The idea is not to explain the complete topic, but rather to introduce it in such a way that readers will stop scrolling and click to read more.

Over time designers began referring to the Hero Section to denote the entire above the fold area, excluding the header which have always been its own thing.

That’s how the hero section was born.

Making a Wide Hero Section Preset

The Hero section does a lot of heavy lifting so we are going to make life a little easier by creating a preset to give us a little more screen real estate without making the top of the page look cramped.

• Go back to the Breakdance editor editing the style guide page.
• Duplicate the Wide Section
• Click on the top Wide Section in the Structure Panel
• Change the label to Hero Section
• Remove the Wide Section preset from the Hero Section
• Change the Hero Sections layout to
  • Vertical
  • Left aligned
  • With 3 rem of gap.
• Under Spacing
• Change the padding to
  • 6 rem top padding
  • 18 rem bottom padding

We’re also going to give the hero section a branded border.

• Go to the Borders Subtab
• Set the bottom border to 1px, branded colour and a solid line.
• Create preset from design
• Save the current section style as Wide Hero Section

This new hero section claims back valuable screen real estate to use on the most important area or our most important pages.

Making a Slim Hero Section Preset

We’ve got a Wide Hero Section preset but we are also going to need a Slim Hero Section Preset

• Go back to the Breakdance editor editing the style guide page.
• Duplicate the Slim Section 
• Change the label on the new section to Slim Hero Section
• Remove the Slim Section preset from the Slim Hero Section
• Change the Slime Hero Sections layout to
  • Vertical
  • Left aligned
  • With 3 rem of gap.
• Under Size
  • Change Width to Custom
  • Change Container Width to 72 rem
• Under Spacing
• Change the padding to
  • 6 rem top padding
  • 18 rem bottom padding

We’re also going to give the hero section a branded border.

• Go to the Borders Subtab
• Set the bottom border to 1px, branded colour and a solid line.
• Create preset from design
• Save the current section style as Slim Hero Section

Summary

In this lesson, you mastered the creation of Wide and Slim Hero Section presets in Breakdance. By optimising the above-the-fold area, you reclaimed valuable screen space and ensured a professional, engaging presentation of your website’s key message. These Hero Sections enhance usability and visual impact, making them indispensable tools for building an effective author website that converts visitors into readers.