The Categories element allows you to display categories loop from Blog, Shop or Portfolio post type. It also offers many features like a layout, filter, skin styles, etc. You can change the featured image size, set hover effect and other settings.
- Showing Blog Categories
- Showing Portfolio Categories
- Showing WooCommerce Categories
In this article
Displaying a Categories Element
To add a Categories element to a page:
|Skin||Sets a pre-designed skin: either Outer Content or Inner Content.
|Source||Sets the source of the categories: Blog, Shop or Portfolio.
|Specific Categories||Choose custom categories to show.
|Layout||Sets the layout for categories section. It can be Grid or Masonry.|
|Columns||Set the columns number of the categories. You can choose up to 6 columns.|
|Image Size||Sets image source size between the WordPress Image sizes or define a custom size. More information can be found here. This is different than the Image Ratio option in the Style tab for the Featured Image.|
|Hover Effect||Sets the animation on hover.|
You can show/hide the element parts in the settings. Here is the list of things you can show or hide on the categories element:
- Feature Image
- Sub Categories
When you show/hide these options in settings, they will automatically show/hide in Style tab.
|Exclude||Excludes custom categories you set in this setting.|
|Column Spacing||Sets the space between categories columns.
|Row Spacing||Sets the space between categories rows.
|Padding||Sets paddings around the categories.|
|Alignment||Aligns the categories content on a page.|
|Background Color Type||Sets a background color for categories.|
|Border Type||Sets the border around the categories.|
|Border Width||Sets the width of the border.|
|Border Radius||Sets a custom radius for the border.|
|Color||Sets the border color.|
|Box Shadow||Sets the shadow around the categories.
There are also general settings for the options that you enabled in the “Content” tab in “Settings” section:
- Feature Image
You can choose to have different settings on different screen sizes for some of the Categories element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.
At first you’ll see the icon for desktop layout only
But when you click that icon, you’ll get two more layouts: for tablet and phone.
To learn more about it, please check this article.