How to create home page shop CATEGORIES masonry like on the demo

im having a very hard time creating a home page shop CATEGORIES masonry like on the demo. can u please assist on how to make this happen? how do i get the large and small photos, etc… also, can i do more categories than 4?

Hello,

Thank you so much for contacting our support center.

You can increase your products and categories images via Appearance -> Customize -> WooCommerce. Images for categories you can upload via Dashboard -> Products -> Categories.
This element’s options can be changed with WPBakery page builder while editing it in Dashboard -> Pages -> edit page.

Kind Regards
XTemos Studio

thanks for the reply but i know all that, i just cant get it to remotely look like the demo, can u pleas assist?

On what step do you have difficulties? What exactly you was not able to achieve?

all steps! i cant make my 4 categories look anything like yours! please help!

im getting closer but i dont know how to make the blocks the different sixes like the demo. also by blocks dont line up properly like yours do. and my masonry grid is not perfectly centered like yours.

please help.

Attachments:

You must be logged in to view attached files.

Your images are rectangular and our demo has squared images. That is why they look different. And you need to increase their size more in Appearance -> Customize -> WooCommerce to make them fit the space well.

my images are all square 1200×1200 and im attaching a few screen shots. i dont know what to do and its frustrating. i change all the images to be SQUARE 1:1 but i dont really want that because it changes every page on my site to be square and i didn’t want that.

please help.

Attachments:

You must be logged in to view attached files.

1 more image

Attachments:

You must be logged in to view attached files.

You need to increase your images width to make it look better. As we can see from your screenshots, you have 190px width at the moment. They are too small.

we are closer. can you just tell me the exact numbers to put in proper fields? all your grid items line up perfectly. mine dont. isn’t there an easier way to help me…

again, all my red category images are 1200×1200

Attachments:

You must be logged in to view attached files.

Try to use 300px or 350px for the width.

PERFECT, last question, how can i control the width of the name titles on the masonry blocks? is like to make them a little wider to try to fit the words on one line

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS area for desktop devices only in Theme Settings to do this

.cat-design-default .hover-mask {
    white-space: nowrap;
}

[Author]

Posts