Blog post lists become asymmetric

We support a lot of asymmetric layouts since the normal grid layout has come into the years. After the past few years grids become a standard in web design. Use a limited number of columns to divide your website into squares and spaces to have similar widths for the content, pictures, headlines, footer and other stuff. To get more variations with your content you can place each n-th post a bit ‘out of the space’. With the current widget version ‘out of the spcae’ means simply not each n-th post is the same as others. But that will brings you a lot of variations. Just place posts with a bigger width on top of your posts area and posts with a smaller width beneath. There is an example at our demo page.

Asymmetric on post areas

What makes sense and what doesn’t. With more posts in a row as three which post areas normally have ‘broken grids’ are very difficult to understand for your user. The ‘broken grid’ comes mostly within a single page or a single post. Otherwise, the ‘asymmetrical layout’ is much easier to understand.

Each n-th row of posts can have a different number of posts, a different image width or show different post details. Your table and grid layouts become a much more interesting feeling for your users.

With a lot of posts with each have the same look your readers get boring. Give your grid a bit of variation and your readers will give all of your posts more attention.

Styles, Layout and Template

However, it is the way in which the posts are displayed to each other. How individual posts are arranged is selected and changed using our Template feature. We will definitely offer ‘broken grid’ options for our template. It should just be such design layouts that you can give your blog more clarity.

Asymmetrical number of images per rows
Asymmetrical number of images per rows

Under the Styles tab you will find the ‘Alteration’ option, which can be selected here in combination with the ‘Layout’. You can find a great example of the Masonry layout and alteration patterns on our demo page.

A cool Masonry grid with asymmetric image sizes
A cool Masonry grid with asymmetric image sizes

We called that Style option ‘Alterations’ in your documentation. It’s not the perfect name – but it’s just a name and does what it should do. Two options can be used: ‘Last item’ and ‘Repeat pattern’. ‘Last item’ effects a number of following posts and ‘Repeat pattern’ gives more options like ‘repeat after’ an n-th number of posts or ‘Items should occupy’ picks the number of posts in a row after that the normal option settings start again.

Leave a Reply