Out of all the blog post layouts I’ve created using Gutenberg on this WordPress blog, the magazine style is the easiest. It just requires using one block, the Columns block.
By using only this block, I’ve made my posts look like magazine pages, with headings, paragraphs, images, and other blocks all arranged in columns. When you use it, I can promise your post won’t look like one of those long receipts we get at the grocery store.
You can check out my other posts for examples of magazine-style WordPress blogs, but this one should give you a good idea already. (Use a desktop to clearly see the magazine style applied to this post.)
There are several key considerations to keep in mind when designing, based on my experience with this blog post style. I’ll outline them to help you avoid design mistakes that undermine the primary goal of our blog posts: delivering a better reading experience for our audience.
Why Magazine Style?
One reason to choose a magazine style is to make the most of the screen space where the reader views the post.
Especially if most of our readers are using desktops to read our blog posts, they’ll likely appreciate being able to view content without scrolling too much. This layout should make it easier for them to find information quickly.
Another reason is that it’s easier for readers to understand and the design has more impact. With just one screen, the reader can get the full message or story, with photos, text, and even call-to-action buttons all displayed together.
Designing Blog Posts in Magazine Style
At the beginning of this post, I mentioned that a Column block is all we need to design blog posts in a magazine style. That’s because the Column block lets you arrange content into multiple columns and also gives you options to adjust the background color, spacing, borders, and the style of elements within it all at once.
Here’s the best part: Each column in the Columns block can be customized separately, giving you more flexibility in your design.
For example, if we add a Column block with two columns—left and right—we can set the left column to have a dark background with 10 pixels of padding and make the text inside it yellow Comic Sans. At the same time, we can leave the elements in the right column with the theme’s default settings.
For beginners, this might seem tricky at first, but after spending a few hours experimenting, it will start to feel easy.
If you’re new to this, I suggest looking at the documentation for the Columns block to speed up your learning. Key things to focus on: stacking on mobile, column width, alignment, dimensions, and CSS units.
In the next sections, I’ll go over a few important things to keep in mind when designing magazine-style blog posts.
1. Alignment and Number of Columns
When using a Columns block, the number of columns is essential.You can create up to six columns in a single block, BUT that doesn’t mean you always should. The ideal number depends on the content width allowed by your WordPress theme.
The general rule is simple: the wider the content width, the more columns you can use. Content width refers to the maximum space available for content, not including margins or padding.
This is important because each column needs enough room for other blocks to fit properly. If the content width is too narrow and divided into too many columns:
- the remaining space inside each column can become too tight. This can make paragraphs difficult to read, sometimes squeezing lines down to just two or three words.
- Images may also shrink too much, making it hard to see details.
- In the worst cases, blocks might even overlap into other columns, creating a messy layout.
- Narrow columns can also make the design look too cramped. Instead of a clean and organized layout, the page may feel cluttered and hard to navigate.
In my testing, these design issues mostly happen on tablets, monitors with low pixel resolution, or when browser windows are resized. Although these problems aren’t very common and aren’t a huge concern, we can’t ignore them since providing the best reading experience for our readers is a priority.
The solution is simple:
- avoid using the full content width and switch to a fixed width similar to a tablet screen or a small resolution monitor.
- Use only two or three columns.
This way, the blog will look consistent across different large devices, and the content in each column will stay easy to read and clearly visible.
In my case, my theme lets me choose from three content widths: narrow, wide, and full. I set the narrow width to 600 pixels and the wide width to 900 pixels. When I use the narrow width, I stick to 2 columns, and for the wide width, I use 3 columns.
When viewing on mobile, the content width and number of columns aren’t an issue because the Columns block is responsive. This means the columns automatically stack vertically, with each column placed below the one to its left.
This feature is enabled by default, but if you don’t want the columns to stack, you can turn it off by disabling the ‘Stack on mobile‘ option in the settings sidebar of the Columns block.
2. Padding and Margin
The number of columns, fonts, text styles, and background color aren’t the only things we can adjust in a Columns block to make our blog posts look good. We can also tweak the padding and margin settings to give the layout a cleaner look or to control where other elements are placed within a column.
In my designs, I usually set the margin of the Column blocks that contain a section of my blog post to 3 em, so they don’t look too crammed or messy with the other sections.
Sometimes, I add a background color to a column to make it stand out. When I do, I set the padding on all four sides to 1 em. This creates a small space between the edges of the blocks inside the column and the column’s borders, giving an overall cleaner look.
Note: Normally, when you add a background color to a column, Gutenberg automatically adjusts the padding. However, when I was designing, I noticed the padding wasn’t the same on all sides. The vertical padding was thicker than the horizontal padding, which is why I always adjust the padding manually.
Be careful when adjusting padding and margins, though. Sometimes, if they’re too big, it can create awkward spaces on mobile, especially when the columns stack with the ‘Stack on mobile’ option turned on. So, make sure to check the layout on mobile too before you publish!
3. Column Height
Column height isn’t usually a big issue, but it’s best to keep columns within the screen so the content is visible at a glance.
Awkward cutoffs and overflow problems should be avoided at all costs since they force readers to scroll while reading, which makes for a poor experience for a magazine layout.
Speaking of overflow and awkward cutoffs, they usually happen on devices with smaller screens, aside from mobile. On mobile, column height isn’t an issue, especially if the ‘Stack on mobile’ setting is turned on.
To avoid them, always test your design on small tablets—preferably in landscape mode—before publishing. You don’t need a physical tablet for this; the developer mode in desktop browsers like Chrome and MS Edge lets you virtually test your design on different devices.
Try Other Layouts
When designing blog posts, there are more layout options and features to explore beyond this Magazine layout. By using design blocks like the Group block and simple HTML functions, you can make your posts more interactive and engaging!
Check out the designs I’ve created in my guide to designing engaging blog posts.
Love this? Pin it and share it with your friends!
