Basel demo – homepage category

Hello,

We are struggling to design the category products row on our homepage.
We have 3 categories and would like the visuals to have different sizes (as shown on your demo, see picture attached). Do we need to edit the size before adding the visual on the site, or do we need to edit it in the dashboard ? Or edit the size picture with Bakery ?

Thank your for your kindly help on how to give different sizes for the visual’s categories,

Lorene

Hello,

As I understand you want a masonry grid: one big and two small categories images on the home page.

You can show categories with Product category element. The featured images for categories should be different. One category should have big size and two smaller. I cannot tell you exactly which sizes you should use. You will have to try several size options until you find the best one.

There is another way to show the categories: you need to create a template https://prnt.sc/popimn and show the categories by means of Promo Banners, here is the demo of banners https://demo.xtemos.com/basel/banners/

The second way would not be able to reflect the number of products dynamically. At the same time, it would be easier to configure images nicely.

Best Regards

Thank you

I will choose the first way but please, I don’t understant how it works. When I am an on the dashboard (doc attached), do I need to first add the element masonry grid (if so, which one ? Media, post ?) or directly the Product category element ?
In general, should I first select the row form and then add the element or the element first ?

Then, the media I use for the categories, can I edit the size directly with Bakery or should I resize the visual with Photoshop before adding it into the library ?
Does the visual used for product category is coming from the category visual itself : that means if I add a visual in the category with a certain size, I will not be able to change the size of the visual in the homepage ?

Hope you will understand what I mean…

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

No, your screen shows the wrong element. You need to add Product category element from Basel elements https://xtemos.com/docs/basel/shortcodes/

Here is the demo: https://demo.xtemos.com/basel/products-categories/

This element has two tabs: General and Design. General tab contains options for:

General tab – Data settings:

Number – number of categories to display on this element;

Order by drop-down: Date, ID, Author, Title, Modified, Comments count, Menu order, ID or slug order provided;

Sort by: designate ascending or descending order of data set in Order; besides there is the option to inherit the setting from the Theme Settings.

Categories – the list of categories which would be shown in the grid.

General tab- Layout

Layout dropdown: Default, Masonry, Masonry with the first big, Carousel;

Space between categories drop-down: 0, 2,6,10,20,30px;

Hide empty: Yes/No buttons;

General tab – Extra Options

There are lazy loading options and fields to add a class in this section.

Best Regards

Hello,

Thank you for your explanations and your time <3

I have another question : want to create a title for each columns in the footer (just as it appear in Basel demo) : how can I do it ?

Many thanks !

Hello,

You need to add widgets into the Footer columns and each widget has the title field, just insert the necessary title https://gyazo.com/d0d1de151e4782f5a32114181ebe76f9

Best Regards

[Author]

Posts