How Dividers can Create Stylish Headlines

Let’s continue this week’s Divider Madness with a few Ideas on how we can use the Divider Module in combination with headlines. It’s simple ! You will see – read on !

1. The In-Line-Headline

Let’s start off with an easy one. Create a new section with a 3-column row. At the outsides put one Divider Module each, in the middle place a Text Module. Like this:

This are the settings for both Divider:
Visibility: Show Divider
Color: Black
Divider Position: Vertically Centered
Divider-Width: 3px

This are the settings for the Text Module:
Alignment: Center
Type: Bold & Uppercase
Font-Size:20px;
Letter-Spacing:2px;

And here is the result – Perfect for keeping things simple but give the user’s eye a little hook at the beginning of a section.

2. The Hooks

Speaking of “Hooks”, there is another technique to stylize headlines in very simple, minimalistic way. Also: Let’s bring some color init, shall we? Here is the Layout:

This are the settings for the Divider:
Visibility: Show Divider
Color: #ff2361
Divider Position: Vertically Centered
Divider-Width: 5px
Custom-Css on Main-Element: (max-width:100px;)

This are the settings for the Text Module:
Let’s put in an H1 Headline and some blindcopy for the paragraph
We can leave the settings for this one by Default

And here is the result – With just a single line/divider we gave a boring paragraph an elegant, minimalistic look and could even apply some color. That’s the stuff of what Editorial Design is made off 😀

3. The Underline Clamp

For third example, the Divider line will not work for the headline directly. Headline and Divider will work together this time apply a bit more stability to specific paragraphs, to hold them together. Here comes the Layout:

This are the settings for the Text Module:
Let’s put in an H1 Headline again and some blindcopy for the paragraph
Headline Color: #ff2361
Headline Font: Montserrat
Type: Bold
Headline Font-Size: 40px

This are the settings for the Divider:
Visibility: Show Divider
Color: #ff2361
Divider Position: Vertically Centered
Divider-Width: 5px
Custom-Css on Main-ELement: (max-width:50%;)

And here is the result – With a colored Divider, this time below the paragraphs, we achieved a more “hold-together” kinda type. The text won’t flow away anymore (if this was even a problem) .

Conclusion

You see: the Divider Module can not only be used for a “divider”. It is a simple tool when it comes to editorial design – a fast and easy way to fancy up headlines and paragraphs.

Any questions ? Leave me comment !

P.S.: We recently started our teqme youtube channel – check by ! – https://goo.gl/S8v6v8