Add a Hero Section to Your Book Template in Breakdance

Introduction

In this lesson, you’ll learn how to add a hero section to your Single Book Template using Breakdance. We’ll create a two-column layout to highlight your book cover and essential details, optimised for both desktop and mobile users. This structured layout will elevate your book pages, engaging readers from the moment they land on your site.

Add the Hero Section

Continuing from our previous lesson where we created the Single Book template.

• Hover over the Single Book Template
• Click on EDit in Breakdance
• Inside the Breakdance editor check we are previewing the Adventure Danger Book post
• So far we should only see the header, footer a blank space inbetween
• Switch on the structure panel
• Add a section
• In the Structure Panel I’ll name this ‘Book Hero Section’
• Set the design preset for the section to ‘Hero Section

Add the Book Hero Columns

• Add a COLUMNS element with two columns inside the Book Hero Section
• I’ll name this COLUMNS element BOOK HERO COLUMNS
• I’ll name the first column BOOK COVER COLUMN
• I’ll name the second column BOOK DETAILS COLUMN

Style the Book Hero Columns Element

• Click on the BOOK HERO COLUMNS element
• Go to the design tab
• Under layout set the columns to stack vertically on Phone Landscape

This setting will stack the book cover column on to of the Book Detials column at the Phone Landscape breakpoint and screen sizes below that.

• Close layout and go to spacing
• Add a column gap of 6 rem pixels to put plenty of breathing room between the BOOK COVER and BOOK DETAILS columns

Style the Book Cover and Book Details Columns

• Click on the BOOK COVER COLUMN
• Go to the design tab
• Click on size
• Change width to 30%
• When you check the size on the BOOK DETAILS COLUMN you will see it has automatically changed to 70%

Staying in the BOOK DETAILS COLUMN.

• Go to the DESIGN TAB
• Click on LAYOUT
• Set LAYOUT to vertical
• Left aligned
• Add a GAP of 3 rem.
• Click Save.

Summary

This lesson guided you through adding a hero section to your Single Book Template in Breakdance. By creating a two-column layout with clear styling, you can effectively showcase book covers and details in a professional and engaging way. The responsive design ensures a seamless experience for all users, whether they’re browsing on desktop or mobile. With this hero section in place, your book pages are ready to make a strong first impression and captivate visitors.