The Category List block displays the blog’s categories and the number of posts that fall into each category.
After you have chosen the Category List Block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:
General #
The settings section mainly consists of four options, as listed below:
General #
- Preset – The Preset refers to the way in which the blog posts are organized or rearranged. Currently, the Category List block provides three layout styles with various styles on each layout for displaying the post.
Query #
It consists of the settings related to the Category Count. You can choose the number of categories displayed on the page/post according to the site requirement.
Heading #
The Heading area refers to the title that gets displayed at the top of the posts and comes with the following option to customize it:
- Enable – Switch the Toggle to the right area to enable the heading on your site. Enabling the option will display the Heading on your end.
- Preset – The Preset refers to the styles for displaying the heading area. Currenlty, it has two layout styles with various styles on each layout for displaying the heading.
Post Title #
The options work for the post title of the category list block and provide the following options:
- HTML Markup – It changes the heading tag for the post title. Under the HTML Markup option, select the required markup for your post title. You can set your post title to be in H1 – H6.
Count #
It determines the width of the area where the number of posts counted under each category is displayed. Moreover, you can also set the width area to be different on various devices (Desktop, Tablet, and Mobile).
Style #
Under the style option, you’ll find the following options available:
General #
- Gap – It refers to the space between each category list displayed on your site. You can enter a number straight into the field or use the slider to change the gap value in pixels. Moreover, you can set the gap value to be different on various devices (Desktop, Tablet, and Mobile).
Heading #
- Text Color – It allows you to change the color of the heading Text in Normal and Hover modes.
- Border Color – It allows you to change the color of the heading Border in Normal and Hover modes.
Post Title #
The options work for the Category Title and provide the following options:
- Typography – It allows you to control the Highlighted Post Title Typography, such as Font Family, Weight, Font size, Line height, and other related styling properties. The options are listed below:
- Font Family – The option allows you to choose the appropriate Font Family for the heading block.
- Weight – It refers to the thickness or boldness of the heading text.
- Size – It controls the Font Size of the heading text.
- Line Height – It manages the space above and below the heading text.
- Letter Spacing – It controls the amount of space between characters in the heading text.
- Style – Using the property, you can set the heading text to be Italic or Oblique.
- Transformation – It changes the case of the text such as Lowercase, Uppercase, and Capitalize.
- Decoration – The styling is applied to the heading block to make it more visually appealing. The options include underline, overline, and line through.
- Text Color – It allows you to change the color of the category title on Normal and Hover Mode.
Count #
- Text Color – It allows you to change the color of the number of posts falling under each category on Normal and Hover Mode.
- Background Color– It sets the background color for the Count Area. You can change the visual appearance of the background by changing its color or adding an image. Moreover, you can set the different background colors on Normal and Hover Modes.
Advanced #
The Advanced section consists of four options for the Category List block.
Spacing #
Under the spacing section, you can find the following options available:
- Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile),
- Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
Z-Index #
It allows you to set the priority of the Category List block according to the site requirement.
Responsive Condition #
Using the option, you can enable/disable displaying the block on various screen sizes:
- Hide on Desktop – It hides the Featured Post block on the Desktop.
- Hide on Tablet – It hides the Featured Post block on Tablet.
- Hide on Mobile – It hides the Featured Post block on Mobile.
Advanced #
Under the option, you can set the CSS ID and Classes for this particular Category List block. The available options are listed below:
- Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element such as Address, Article, Aside, etc.
- CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
- Additional CSS Class(es) – It allows you to add a CSS class to your block, letting you write custom CSS to style this particular block.
For example, if you want to change the width of the Banner Posts block only, you can add a class such as category-list-width to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:
.category-list-width{
width:70%
}Upon adding the code, it will make the changes only to this particular Category List block and not other blocks.
