Categories

The Categories Widget allows you to display post categories, product categories, or blog categories with an attractive look.

Content Tab

Content

• Skin: Select the layout skin for your categories. Options include 'Outer Content' and 'Inner Content'.
• Source: Choose the source from which the categories will be displayed. Options could be 'Blog', 'Portfolio', 'Shop', etc., depending on what types of content are available on your site.
• Specific Categories: If you want to display only certain categories, add them here. Categories not added will not be displayed.

Settings

• Layout: Choose between a 'Grid' or 'Masonry' layout for how the categories will be displayed.
• Columns: Set the number of columns for the grid layout.
• Image Resolution: Select the resolution for images in the category display. For example, 'Large - 1024 x 1024'.
• Hover Effect: Choose an effect that occurs when the mouse hovers over a category item.
• Sub Categories: Toggle 'Show' to display sub-categories.
• Featured Image: Toggle 'Show' to display the featured image of the categories.
• Title: Toggle 'Show' to display the title of the categories.
• Category Count: Toggle 'Hide' or 'Show' to display the number of items in each category.
• Description: Toggle 'Show' to display the category description.
• Button: Toggle 'Show' to display a button on the category item, which could be used for linking to the category page or a custom link.

Filter

• Exclude: Add categories that you wish to exclude from the display. Categories added here will not be shown in the category list on your site.

Style Tab

Container

• Column Spacing: Adjust the space between columns.
• Row Spacing: Modify the space between rows.
• Padding: Set the padding inside the container on all sides (top, right, bottom, left).
• Alignment: Choose the alignment of the container's content (left, center, right).
• Background Color Type: Select a solid color or gradient for the container background.
• Border:
  • Border Type: Choose the type of border (solid, dashed, dotted, etc.).
  • Border Radius: Set the border radius to control corner roundness.
  • Box Shadow: Apply a shadow effect to the container.

Featured Image

• Image Ratio: Define the aspect ratio of the featured images.
• Spacing: Set the padding around the images.
• Hover Effect: Choose an effect for when the mouse hovers over the images.
• Opacity: Adjust the opacity of the images.
• Overlay Color Type: Select a color or gradient for the image overlay.

Title

• Typography: Customize the font settings for the category titles.
• Spacing: Adjust the margin around the title.
• Alignment: Set the alignment of the title text.
• Color: Choose a color for the title text.

Category Count

• Border Type: Select a border style for the category count badge.
• Border Radius: Determine the roundness of the category count badge's corners.
• Padding: Adjust the padding inside the category count badge.
• Spacing: Set the margin around the category count badge.
• Text Color: Choose the color for the category count text.
• Border Color: Pick a color for the category count badge border.
• Background Color: Select a background color for the category count badge.
• Typography: Customize the font settings for the category count.

Description

• Length: Control the length of the category description text.
• Typography: Configure the font settings for the description.
• Spacing: Adjust the margin around the description.
• Alignment: Align the description text within its container.
• Color: Choose a color for the description text.

Button

• Text: Enter the text for the category button.
• Width: Set the width of the button.
• Height: Define the height of the button.
• Spacing: Adjust the padding inside the button.
• Alignment: Align the button within its container.
• Color: Choose the text color for the button.
• Typography: Customize the font settings for the button text.
• Background Color Type: Select a solid or gradient background for the button.
• Border:
  • Border Type: Choose the border style for the button.
  • Border Radius: Adjust the button's corner roundness.
  • Box Shadow: Apply a shadow effect to the button.