Simple and Seamless WordPress Blog Post Layout (Gutenberg)

The idea for this two-column blog post layout came when I was designing a new format for my reflective and storytelling posts.

After reading them several times with a different layout, I realized that the message came across more clearly when nothing interrupted the paragraphs, not even headings.

So, I decided to create a layout without those extra blocks, and the result was great! The thoughts flowed naturally from one paragraph to the next, which made a bigger impact on me in the end. I have to say, it really kept my reading momentum going!

Since completely removing headings wasn’t an option, I came up with the idea of a two-column blog post layout. The right column would have only paragraph blocks, while the left column would hold everything else, including headings and possibly navigational elements.

This layout helps readers focus more on the paragraphs while the headings on the side show where they are in the blog post. I think this design would also work well for blog posts that give step-by-step instructions or follow a timeline.

Because of its design, I can also call this Two-Column Blog Post Layout a less distracting option! So, how can you create a similar design?

In the Gutenberg editor, insert a Columns block. After adding it, you’ll get an option to choose the number of columns, with their sizes shown. Pick the two-column layout.

When setting column proportions, consider your theme’s content width, the maximum space from left to right that you can use for content.

• If it’s narrow, around 600 pixels, I suggest using a half-half column layout.
• If it’s wider, like 900 pixels or more, you might want to try a one-third, two-thirds layout.

The columns should be wide enough for long words to fit properly, otherwise, they’ll get cut off and spill onto the next line, which doesn’t look good.

This is especially important for the left column, where the headings go. Since headings usually have larger font sizes than paragraphs, they need enough space to fit longer words like “extraordinariness,” “existentialism,” and “circumnavigation.”

Important: each Columns block should contain only one section of blog post’s discussion. The heading should go in the left column, while the paragraph blocks with the main content should be in the right column. If the post has multiple sections, it should have multiple Columns blocks stacked together, forming a 2 by X table, where X is the number of sections or rows.

If you want, we can make the layout more engaging by keeping the blocks in the left column visible as readers scroll. It’s a cool feature for your post! To set it up:

1. Put everything in the left column inside a Group Block.
2. Then, go to the settings panel of the Group block, find the Position section, open the dropdown menu, and select “sticky.”
3. Check if it works: If the right column has more content than the left, the heading and other blocks in the left column will stay on the screen until they reach the bottom of the Columns block.

You can also add a navigation feature inside the Group Block if you want.

It’s easy to set up: just add a Paragraph Block and turn its text into an anchor link. Anchor links let readers jump to different parts of your post with a single click. They work by telling the browser where to scroll based on an HTML ID assigned to a specific block.

For example, if the anchor link “Go to Sample” has the fragment identifier “#sample” and an H2 heading has the HTML ID “sample,” clicking the link will take the reader directly to that heading.

In Gutenberg, you can assign an HTML ID to a block by going to its settings, scrolling down to the Advanced panel, and entering a value in the “HTML Anchor” text box. Just make sure the ID doesn’t contain spaces or the ‘#’ symbol. When adding an anchor link, always include ‘#’ before the ID.

Before setting this up, make sure the “Stack on mobile” option is turned on for the Columns block. This ensures that on smaller screens, the columns will automatically arrange themselves vertically.

This keeps text readable and images properly sized. However, in mobile view, the sticky feature for the Group Block in the left column will be disabled since the columns will be stacked and there won’t be space for it to stay fixed at the top.