Overview of the Blog Categories module

This page shows you how to add the Blog Categories module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Blog Categories module displays your post categories as styled cards or links, with images and post counts. For more details, view the demo.

How to add the Blog Categories module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Blog Categories in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Content

• Number Of Categories: Specify the total number of categories to display.
• Order By: Specify the order in which the categories will be displayed.
• Order: Specify the sorting categories for the brands.
• Hide Empty: Choose whether or not hide the brands which does not have products.
• No Result Text: Define custom no result text.

Display

• Layout: Select the layout to display categories.
• Number Of Columns: Choose the number of categories you want to display row.
• Items Gap: Move the slider or input the value to increse or decrease the gap/space between items.
• Show Post Count: Choose whether or not the post count should be visible.
• Show As Super Number: Enable or disable to display post count as super number with category title.
• Post Count Text: Specify the text to display with post count number.

Design tab settings

The Design tab lets you style each part of the module:

• Title: styling options for the title.
• Post Count: styling options for the post count.
• Category Item: styling options for the category item.
• Sizing, Spacing, Border, Box Shadow, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.