The right layout can make your website look sleek, visually appealing, and well organized. With Toolset, you can create engaging magazine-like layouts and customize them for your content.

News sites, sport portals, famous blogs, or even some small-business sites like to present lists of posts laid out in a way to catch the viewer’s eye. Many feature the first post by making the image bigger or by choosing different layouts for different categories.

These are called magazine layouts.

It’s easy to create layouts like these with any theme if you use Toolset.

The View block allows you to create virtually any magazine layout you’ve seen and populate it dynamically with your site’s content. Today, we’re sharing three simple hints to help you get started.

Hint #1 – Display Content in a Custom Collage Layout

A collage layout is an eye-catching way to display recent posts and an easy way to “feature” certain posts by making them larger. With Toolset, you can choose from 9 preset collage layouts or create a completely custom layout.

When creating a View, use the Collage loop style and create a custom collage design to display your posts.

Once you’ve decided how you want the posts to be laid out, the View block pulls in the content automatically. Here’s how our custom Collage View looks when filled out with content:

You will also need to limit the number of posts displayed to just a few. Use the Limit and Offset parameter of your View settings.

Hint #2 – Create a Dynamic Background Image with a Semi-Transparent Gradient

If you want to keep the focus on your site’s images, you can use your posts’ featured images as a background for the post titles and categories:

To do this, add a Toolset Container block. For the container background, choose to display an image from a dynamic source, and set the source as the post featured image.

Because it can be difficult to read text on bright images, it’s a good idea to create some contrast. To do this, add another Container block inside the one you just created to add a semi-transparent background. This way, we can have a light title show up by layering it on a darker background.

Add a Toolset Heading block to display the post title and Single Field blocks to display the category and post date. Set the color of the post and category titles to white.

Then, to make the white text show up, set the background of the inner Container block to use a Gradient with Color 1 as transparent and Color 2 as black.

To make sure the gradient covers the entire image, check your outer container and remove any padding.

Notice that we display the post date only for the first post of the View. This is possible thanks to the Conditional block. Read more about interesting applications of the Conditional block.

Hint #3 – Create Different Layouts per Category or Tag on the Same Page 

Magazine-like sites often use a combination of layouts for different types of content. You can achieve this by using more than one View on the same page and arrange a different layout for a specific category or tag.

The screenshot above uses three Views on the same page: 

• View #1 displays 5 recent posts with the Tutorials tag
• View #2 displays 2 recent posts with the Case studies tag
• View #3 displays 4 recent posts with the Case studies tag but with a 2-post offset

To display posts only from a specific category or tag, use View Query Filters. You can find them under the Content Selection section of your View:

Wrapping Up

Magazine-like layouts are very visual and often use a variety of layouts. You can create lots of these kinds of layouts using Toolset’s Views block.

• Use a Collage type of output for your View. It allows you to create more sophisticated layouts for your posts.
• Use the Toolset Container block to display your post featured image as a background for your post title.
• Create a separate View for each of your categories to make your layouts even more interesting.
• Use Filters to select posts from a specific category/tag. 
• Use the Offset parameter of your View to skip the first few posts.

There’s More!

This article is a part of an ongoing series where we present interesting and powerful ideas of what you can build with Toolset. We’re publishing these every few weeks, so stay tuned!

Other articles in this series:

• How Block Patterns Can Help You Build WordPress Sites Easily
• How To Let WordPress Users Create Their Own Profiles in Your People Directory
• How To Create a Custom WooCommerce Checkout Experience
• How To Create a Custom List of WordPress Pages
• 3 Non-Obvious Applications of Post Relationships in WordPress
• Design Beautiful Headers and Footers For Your Toolset Site
• How To Build A Custom Category Tree With Toolset
• How To Build A Truly Custom WooCommerce Store
• 3 Dynamic Designs Using Kadence Blocks To Inspire Your Website
• 5 Advanced Uses of Toolset’s Conditional Block in WordPress