3 Tips For Creating Magazine-Like Layouts

   Agnes Bury

How to

April 7, 2022
2

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.

BBC.com/sport uses a magazine-like layout to present recent posts

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.

Designing a custom collage layout for a Toolset View

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:

View with the Collage output – custom design

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:

View using the Collage layout with background images and gradients

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.

How to display post featured images as a background

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.

A subtle transparent-to-black gradient layered over the background image
Configuring the gradient in your site’s backend

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.

Layout with 3 Views with tags

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:

How to add filters by tags and offset the posts

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:

 

Comments 2 Responses

  1. These tips look quite handy. I need some time to dig deeper into this.

    By the way, what have you been developing during the last months? It became very quiet around Toolset in the last months. No updates for a while. Just curious what you are preparing.

    • Hi Christian,
      Thanks for your comment and sorry for my late reply. I missed your comment. To answer your question: we’ll soon share more about our Toolset plans (here on this blog).