Writers Building Websites

Writers Building Websites

Create Slim Section Presets for Readable Author Websites

Learn to design Slim Section presets in Breakdance to improve readability of long-form text, reduce eye fatigue, and enhance engagement on your author website.

Last Updated: 23 November 2024

Introduction

In a previous lesson we set up a PRESET for a section that spanned the entire width of the site. In this lesson we are going to add another section PRESET to make our long form content more readable online.

Eye Fatigue

Wide sections on a page are great for showing off highly visual items including the book or post grids we cover later, but aren’t so good for the long form text of book descriptions, newsletter archives and blog posts.

Forcing the reader’s eye to drag across long lines of text on a screen leads to eye fatigue which causes the reader to stop, move and not engage with your website any more. The recommended line length for online reading is two and half times the alphabet or 65 characters.

We need to adjust the display to shorten those line lengths to stop eye fatigue on long form text.

If I go back to the style guide page, duplicate the Wide Section section and remove the ‘Wide Section’ preset we can configure a Slim Section preset that’s better for long form text

  • Edit the Style Guide page with Breakdance
  • Open the Structure Panel
  • Duplicate the Section
  • Relabel the new section Slim Section
  • Go to the design tab of the Slime Section
  • Click on the X to remove the WIDE SECTION preset

Clicking this X will remove all the Wide Section styling from our new Slim Section. Look at the live preview and you’ll see all the elements are squashed together again. We need to update the design tab.

  • Change the Slim Section layout to Vertical with a 3 rem gap
  • Scroll down the design tab and click on size
  • Set WIDTH to custom
  • Set CONTAINER WIDTH to 72 rem

Adjust the Colour Grid

That has shortened the text elements into a a more eye friendly size. The colour grid doesn’t look good because we’ve told it to fit 4 boxes in a row at desktop size. Let’s change that.

  • Click on the grid element
  • In the Grid design tab change the items per row from 4 to 3.

Bottom Border

I want this section to also have the BOTTOM BORDER set to a 2 PIXEL solid line using the Brand colour

  • Go to Borders
  • Set the Bottom Border to a solid, 1 pixel wide line with the Brand Colour.

I like how this looks on the style guide so I’ll save this as a preset for use throughout the site.

  • From the structure panel click on the Slim Section
  • From the DESIGN TAB click the CHOOSE DESIGN PRESET BOX
  • Select CREATE PRESET FROM DESIGN
  • Name the Preset Slim Section
  • Click SAVE

Just like the WIDE SECTION PRESET we created earlier we can remove this preset from the section by clicking on the X beside the preset name. This removes all the styling to the element applied by the preset.

We can apply it again be clicking the drop down box and choose SLIM SECTION.

Now, any time we want a section that focuses on ling form text can use the SLIM SECTION PRESET.

As well as speeding up site builds if we want to change this preset we just have to click on an element it is applied to and click edit.

This will replace the structure panel with a Editing PRESET panel where we can make changes that will apply to ALL elements that use this preset across the ENTIRE website.

Summary

This lesson guided you through creating a Slim Section preset in Breakdance, ideal for presenting long-form text in an engaging, reader-friendly format. You learned to adjust layouts, container widths, and design settings to improve readability while maintaining consistency across your site. With these presets, you can efficiently apply and update text-focused sections, enhancing your author website’s usability and professionalism.

Stephen Gordon
Stephen is the founder of Writers Building Websites and brings over a decade of experience as a freelance marketer specialising in publishing. He is also an author.

Index

Copyright © 2024 Writers Building Websites | All Rights Reserved.