Category Grid
How to Configure and Style Category Grid #
Category Grid Widget Elementor offers you plenty of customizing options so you can display post category beautifully in the Grid. It helps to make your WordPress website interactive by including a variety of ready-designed layouts. Let’s follow the step by step guidelines below to configure and style Category Grid:
Before you begin, make sure that you have installed and activated Sastra Addons Pro plugin on your website. Without the Sastra Addons Pro activated, you cannot use this elements.
How to Activate Category Grid #
To use this Sastra Addons element, find the ‘Category Grid‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Category Grid’ into the ‘Drag widget here‘ or the ‘+’ section.
After you have successfully done with step 1, this is how the element is going to look like.
How to Configure the Content Settings #
After you have completed adding the Category Grid in your Elementor Editor, now all you need to do is to configure the ‘Content’ tab. From here, you will get five sections to design your Category Grid: ‘Query’, ‘Layout’, ‘Elements’, ‘Media Overlay’ & ‘Image Effects’.
Query #
From this section, you can choose the ‘Source’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your source: Posts & Pages Selection. Than you can use drop-down for taxonomy.
After choosing your preferred ‘Source’, you can filter your contents by ‘Categories’ & ‘Tags’. If you do not want certain post categories to appear, you can simply ‘Exclude Categories’ those contents as well.
Furthermore, you have the option to select multiple custom fields for images. Additionally, you can utilize toggles to hide or display empty and child categories.
Layout #
From this section, you can use the drop-down to select one of these as your layout: FitRows – Equal Height, List Style & Masonry – Unlimited Height Selection. Than you can change image size, columns, animation, animation duration and amination delay.
Besides, you can use slider bar for change horizontal gutter and vertical gutter with supported all devices.
Elements #
From this section, you can use the drop-down to select one of these as your element: Title, Description, Count & Separator Selection. Also you can use drop-down for change location, display type, title HTML tag, extra text display position and extra icon position.
Moreover, you can change horizontal alignment and word count. Than you can use toggle for display or hide on this devices. To include additional elements, just click on the ‘+ ADD ITEM’ button located at the bottom
Media Overlay #
From this section, you can use the slider bar for change overlay width and height with support all devices. You can use toggle for enable or disable link to single page and animation transparency. Than you can use drop-down for select animation, animation timing and animation size. You can change animation duration and animation delay.
Additionally, you have the option to select GIFs according to your preference and adjust the GIF width.
Image Effects #
From this section, you can set image effect. Than you can change animation duration, animation delay, animation timing and animation size as well.
Click to see Live Demo #
How to Style Category Grid #
To customize Category Grid, click on the ‘Style’ tab, and you will find many different options here.
Grid Item #
From here, you can change grid item style, background color, border color, even background color, even border color, border radius and padding. Moreover, you can styling to border and box shadow as well.
Grid Media #
From here, you can styling to border and border radius as well.
Others #
From the ‘Media Overlay’ settings, you can you can set background color, styling to border and more. On the other hand, customize your ‘Title’, ‘Description’, ‘Count’, ‘Separator 1’ and ‘Separator 2’ from these settings as per your preference.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Category Grid as per your preference.
This is how you can simply showcase your post categories with a stunning Grid on your website by using Category Grid.
If you need any help, feel free to contact our dedicated support team for further assistance.
