Add a Design Accent to Your Headings with GenerateBlocks

When working on a recent web design project, I wanted to add a bit of flair to my headings without going overboard. My solution was to use a slim border as a subtle accent, and today I’ll show you three different ways to achieve this: a top border, a left border, and a bottom border.

Step 1: Adding a Slim Top Border

For the first heading, we’ll add a slim top border using custom CSS.

1. Add a CSS Class: In the block editor, select your first heading, go to the Advanced tab, and add the class heading-border-top.
2. Custom CSS: Next, jump into the Customizer and add the following:
   .heading-border-top { position: relative; padding-top: 10px; } .heading-border-top::before { content: ''; position: absolute; left: 0; top: 0; border-top: 3px solid #3fa9f5; width: 40px; /* Set the width as needed */ }

This CSS adds a 3-pixel blue top border to your heading. The padding creates some space between the border and the text.

Step 2: Adding a Left Border Using GenerateBlocks

For the second heading, we’ll add a left border using the built-in GenerateBlocks options.

1. Select the Heading Block: Ensure your heading is a GenerateBlocks headline block.
2. Add Border: Go to the Borders settings and set a 3-pixel left border with the same blue color #3fa9f5.
3. Adjust Layout: If the border extends beyond the text height, select the outer container, enable Flex, and set Align Items to Top. This will adjust the border to fit the text.
4. Add Padding: Add 10 pixels of left padding to give the text some breathing room from the border.

Step 3: Adding a Slim Bottom Border

For the third heading, we’ll replicate the top border method but place the border at the bottom.

1. Add a CSS Class: Select the third heading, go to the Advanced tab, and add the class heading-border-bottom.
2. Custom CSS: In the Customizer, use this
   .heading-border-bottom { position: relative; padding-bottom: 10px; } .heading-border-bottom::after { content: ''; position: absolute; left: 0; bottom: 0; border-bottom: 3px solid #3fa9f5; width: 40px; /* Set the width as needed */ }

This will place a 3-pixel blue border just below the heading, with some space between the text and the border.

Final Thoughts

These simple border accents can add a subtle design touch to your headings without overwhelming the rest of the page. Whether it’s a top, left, or bottom border, these small details can make a big difference in your overall design.

If you found this useful, be sure to try it out in your own projects!