Masonry Blog layout with different sized rectangles instead of same size squares?

DanielNolan · June 2020

Hello,

Can I please have Bryan answer this when he has an opportunity. Please not Pablo.

Is there a way, when using the blog muffin builder item or shortcode in masonry 4 column layout to have maybe one or two of the squares larger or smaller? I have included a diagram to explain what I am trying to achieve. I want to use the masonry blog layout but think it would look cooler on my site if there was some kind of variety to the layout instead of all squares being the exact same size.

https://imgur.com/3XWfO6d

DanielNolan · June 2020

Sorry to add more to the question, could you also help me to add two columns to the blog masonry layout when viewed on a mobile device? The layout is currently single column but I would need two columns. I have included another quick image to show what I currently have by default, and what I want to achieve next it. Thanks

https://imgur.com/dvOp7FR

Pablo · June 2020

Hello,

Bryan works only on weekends, so he won't be able to answer your question quickly.

1) What you ask for is just a masonry type of layout which is available to set in the Blog and Portfolio post types.

Of course, what you send is most similar to these elements:

https://themes.muffingroup.com/be/theme/portfolio/masonry-blog-style/

https://themes.muffingroup.com/be/theme/portfolio/masonry-hover-details/

https://themes.muffingroup.com/be/theme/blog/masonry-blog-style/

These are all of the masonry types of layout that we have in BeTheme.

2) Right now, BeTheme is limited to the single grid on mobile, so it's not possible to achieve.

But, we have in plans to extend it to two columns in nearest future

I cannot tell when it will be ready, but it surely will be included on that page:

https://themeforest.net/item/betheme-responsive-multipurpose-wordpress-theme/7758048#item-description__changelog

Thanks

DanielNolan · June 2020

Awesome work Pablo, I went with masonry-hover-details as I like the description part too. Could you advise on the best way to achieve the different sizes? Or is this automatic? It seems to me that it uses the height of the image and then is constrained to the width of the columns. Is this correct?

Also I can not see the settings using the muffin builder blog widget to recreate this. Any help would be fantastic

Thanks.

DanielNolan · June 2020

Basically can you help me to make a blog that looks exactly like the one you showed me at masonry-hover-details as it is awesome haha.

Pablo · June 2020

It is automatic, you just have to upload regular and some thin and tall images to make them fit like on the example

Thanks

DanielNolan · June 2020

v

DanielNolan · June 2020

Do you have a tutorial on how to achieve that blog layout as I can not achieve the same. The descriptions are below and not appearing on hover

Pablo · June 2020

The title and description are available to fill right here, in the WP Editor:

https://prnt.sc/t8h096

And it should appear after hovering the featured image on the main portfolio page.

https://prnt.sc/t8h25d

Also, please attach a link to that page.

Thanks

DanielNolan · June 2020

OH ITS A PORTFOLIOOOOOOOO! I THOUGHT IT WAS A BLOG POST!!!! haha

DanielNolan · June 2020

Thank you for answering me. Can I add this portfolio layout in muffin builder, like you can a blog?

Pablo · June 2020

Yes, but you should use the "Builder" template to use the Muffin Builder there.

https://prnt.sc/t8y8au

thanks

Masonry Blog layout with different sized rectangles instead of same size squares?

Comments

This website uses cookies