Categories Element

Last Updated on

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.

Common uses:

  • Showing Blog Categories
  • Showing Portfolio Categories
  • Showing WooCommerce Categories
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. 

In this article


Displaying a Categories Element

To add a Categories element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Categories”.

4
Drag and drop the Categories element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
SkinSets a pre-designed skin: either Outer Content or Inner Content.
SourceSets the source of the categories: Blog, Shop or Portfolio.
Specific CategoriesChoose custom categories to show.

Settings

SettingDescription
LayoutSets the layout for categories section. It can be Grid or Masonry.
ColumnsSet the columns number of the categories. You can choose up to 6 columns.
Image SizeSets 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 EffectSets 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
  • Title
  • Sub Categories
  • Description
  • Button

When you show/hide these options in settings, they will automatically show/hide in Style tab.

Filter

SettingDescription
ExcludeExcludes custom categories you set in this setting.

Style

SettingDescription
Column SpacingSets the space between categories columns.
Row SpacingSets the space between categories rows.
PaddingSets paddings around the categories.
AlignmentAligns the categories content on a page.
Background Color TypeSets a background color for categories.
Border TypeSets the border around the categories.
Border WidthSets the width of the border.
Border RadiusSets a custom radius for the border.
ColorSets the border color.
Box ShadowSets 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
  • Title
  • Description
  • Button

Responsive Options

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket