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.
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.
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
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.
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.
I want this section to also have the BOTTOM BORDER set to a 2 PIXEL solid line using 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.
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.
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.