This tutorial provides three easy ways to improve the look of your blog posts.

Video Of Three Easy Blog Design Changes To Improve Reader UI

If you create great content but your blog is an eyesore, your readers won’t give you much of a chance. As content creators, we need to acknowledge the reader just as much as we make efforts to impress the search engine. This post demonstrates three easy ways to improve the look and design of blogs doing simple things that won’t create major pain in your writing process.

Benefits Of Improving User Interface

Aesthetically pleasing posts make for happy readers.

Color-coded breaks in posts give readers less text.

Readers more likely to sub or return.

Your blog design is like your storefront curbside appeal. If you have the best content but it looks terrible, your readers will not dive into your content.

Let’s look at three simple ways to improve your blog’s user interface and design. You might have noticed this post already has used all three design improvements!

Table Of Contents

1. Use Gradient Heading
2. Highlight Text and Background of Headings
3. Add Feature Boxes To Your Post
In Summation

1. Use Gradient Heading

The first easy trick is to make a gradient-colored heading. With solid colors, the design can look uninteresting and flat. With a gradient touch, you instantly add life to the look of your headings.

How To Add Gradient Heading

The easiest way to add a gradient to your blog heading is to use the Spectra plugin, which adds many helpful blocks to Gutenberg. The Heading block from Spectra has a gradient option.

Install Spectra Plugin
Add Heading Block
Select Styles > Color > Gradient

spectra heading block — *When adding the block, Spectra Heading has a blue border.*

spectra style tab with gradient option — *To add gradient, select Heading, Style > Text Color > Gradient.*

2. Highlight Text and Background of Headings

The second easy tip to improve your blog’s readability is to highlight body text and paragraph text. This will help break up your post into manageable parts. In short, it breaks up your post in a similar way a chapter breaks up a book. If you highlight body text, you draw extra attention to the content by making it stand out. Try highlighting text on your blog, but try not to overdo it. It can get addicting!

How To Add Background to Headings

If you are still using the Spectra plugin, all you need to do is select the heading, style tab, background, select color.

If you are using the Gutenberg Heading, you can still add background color by selecting the heading, then background.

background color for heading — *Settings for adding a background color to a Spectra Heading.*

gutenberg heading background — *Settings for adding a background color for the Gutenberg Heading block.*

How To Add Background to Body Text

Adding a background color to emphasize body text is done in the native Gutenberg paragraph block.

Select the text you want to highlight
Click the down arrow icon to see more options
Select Highlight > Background > click a color

*An example of highlighted background text from using the Gutenberg paragraph block.*

3. Add Feature Boxes To Your Post

Pick a topic you mention in your post, and give an interesting tidbit about that topic. This will help break up your post and make the post seem less daunting.

Americans Preserved Tidbit And The United Kingdom Changed To Titbit

You might like to know that Americans say tidbit because tidbit first appeared in the English language in the 17th century as “tyd bit.”

How To Create A Feature Box To Break Up Your Posts

A feature box is just some content you make that is within a group block. In this post, the group block is given a gradient background to go with the theme.

Add Group block into your post.
Add content to the area. It can be text, photos, list, button, or anything.
Select Group block, background, select gradient.

*In the settings of the group block, select background > gradient. Click each color and you can decrease opacity on the slider, as well.*

In Summation

Blog posts with nice design create happy readers! Improving blog design can be as easy as adding gradient to headings, adding highlights to text, and adding featured boxes with interesting tidbits. If you are using WordPress for your blog, you can easily add all of these changes to your blog and give your readers a nice user interface.