Category Showcase Shortcode

Updated on December 29, 2017

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


Displaying the Category Showcase Shortcode

To add the category showcase shortcode:

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

Category showcase shortcode - Visual Composer section

3In 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

4When 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

4Configure the settings as required. Other settings are explained in next sections.
SettingDescripiton

Choose Loop FeedDefines from which post type to show categories. 4 options are available: Post Category, Portfolio Category, WooCommerce Product Category, News Category
Select Specific Categories To ShowDetermines the visible categories. If nothing is selected all the categories of the post type will be shown.
Image SizeSets the image size dimensions.
Show DescriptionToggles the visibility of a category description.
5Click Save Changes and publish or update the page to check the result.

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:

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

Category showcase shortcode - edit category showcase

2Click on Styles and Colors tab.

Category showcase shortcode - Styles and Colors

3Configure the layout settings as required.
SettingDescripiton

How Many Columns?Defines the number of columns for categories.
Layout StyleDefines the layout style. Two options are available: Grid and Masonry.
Item SpacingSets the space between category items in pixel.
4Configure the styling settings as required.
SettingDescripiton

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 ColorSets 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.
5Click 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.

Did this answer your question?