Category Showcase Shortcode

Last Updated on

The category showcase shortcode allows you display either specifically selected categories or all categories from different post types such as Post, Portfolio, WooCommerce Product and News.

In this article, we will explain how to display the category showcase and configure the categories and style.

To see the category showcase shortcode in action, check out the demo page.

Category showcase shortcode - demo

In this article

Displaying the Category Showcase Shortcode

To add the category showcase shortcode:

Add or edit an existing page.
In the Visual Composer section, Click on the + button.

Category showcase shortcode - Visual Composer section

In the Add Element pop-up screen, search for Category Showcase and click on it to be added to the page.

Category showcase shortcode - Add element

When the shortcode is added, a new pop-up screen called Category Showcase Settings will open that allows you to configure the shortcode settings.

Category showcase shortcode - Category showcase settings

Configure the settings as required. Other settings are explained in next sections.
Choose Loop Feed Defines from which post type to show categories. 4 options are available: Post Category, Portfolio Category, WooCommerce Product Category, News Category
Select Specific Categories To Show Determines the visible categories. If nothing is selected all the categories of the post type will be shown.
Image Size Sets the image size dimensions.
Show Description Toggles the visibility of a category description.
Click Save Changes and publish or update the page to check the result.
Note: In order to show the category images, you need to add an image to each category first. To do that, please navigate to Articles -> Categories and add a thumbnail image for each category.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Configuring the Layout and Styling

There are some more settings in Category Showcase Settings pop-up which allow you to configure the layout of categories.

To configure the layout:

In Visual Composer screen, click Pen icon to open the Category Showcase Settings pop-up.

Category showcase shortcode - edit category showcase

Click on Styles and Colors tab.

Category showcase shortcode - Styles and Colors

Configure the layout settings as required.
How Many Columns? Defines the number of columns for categories.
Layout Style Defines the layout style. Two options are available: Grid and Masonry.
Item Spacing Sets the space between category items in pixel.
Configure the styling settings as required.
Title / Description Color  Sets category title and description text color.
Title / Description Animations ( On Mouse Over) Defines how category title and description appear on mouse over. 5 options are available: None, Simple, Framed, Modern, Editorial
Image Animations ( On Mouse Over)  Defines the category image animation on mouse over. 5 options are available: None, Blur, Gradient, Zoom, Slide
Overlay Color Sets an overlay color for the category image. It covers the whole image. It’s best to define a transparent color so the background image can be visible.
Click on Save Changes button and update the page to check the result.

Configuring the Visibility for Devices

To make the Category Showcase shortcode visible only for some devices such as Phones, Tablets, Mega Tablets, Netbooks, Desktops, there is a setting in Button settings pop-up which is called Visibility For Devices. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read Configuring the visibility for devices article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket