Advanced Categories Widget

The Advanced Categories widget is designed to showcase your post or product categories with a modern layout, enhancing both site navigation and visual appeal.

Follow these steps to set it up perfectly :

1. Setting Your Categories

Before the widget can display anything, it needs data to pull from. You need to ensure your WordPress site (or specific e-commerce platform) has its categories organized.

• Add Product Categories.
• Click Products → Categories → Add New Category → klik Add New Category button.

• Add Post Categories.
• Click Post → Categories → Add Category → klik Add Category button.

2. Add the Widget

• Open your page with the Elementor Editor.
• Go to Menu RTMKit Pro, and you will be able to see the Advanced Categories Widget.
• or search “Advanced Categories”.
• Drag and drop the widget into your desired section.

3. Content Tab Configuration

Under the Content Tab, you can customize and manage how your content is displayed to meet your specific design and functional requirements:

Layout

Use this section to set the layout for your content. Select the Carousel, Grid, List, or Tiles option that best suits your project’s aesthetic and functional goals.

• Click Layout → Select your preferred layout.

General

In this section, you can toggle the visibility of styles, images, titles, and labels, as well as manage category counts and numbering to perfectly suit your design needs.

• Click Style → Select a style that perfectly aligns with your desired design aesthetic.
• Every layout offers distinct styling options. Choose the one that perfectly complements your creative vision and project requirements.

• Configure additional general settings to further customize your display and ensure all elements align with your design requirements.

Query

This is where you manage your data source.

• You can filter content by post categories, post tags, format, brands, product categories, product tags, or product shipping.

• Set the display order (by title, order by, or order : asc/dsc).

Navigation

Enhance the User Experience (UX) by adding intuitive controls. You can enable arrows to help visitors browse through your content seamlessly.

• You can filter content by post categories, post tags, format, brands, product categories, product tags, or product shipping.
• Pick the icon that best suits your design preferences.

• Set the display order (by title, order by, or order : asc/dsc).

Settings

Access advanced controls to fine-tune functionality. Use this section to enable autoplay features, slide to show, slide to scroll and adjust transition speeds, to ensure your content remains fully responsive across all devices.

4. Style Tab Configuration

Refine the visual appearance of your elements to meet international design standards. Use this tab to customize the following components :

Container

• Adjust the overall wrapper of your content. You can set the content spacing, background type, padding, border radius, and box shadows to create a structured and polished layout.

Refine the visual appearance of your elements to meet international design standards. Use this tab to customize the following components :

Image

• Manage the visual appearance of your images. This section allows you to adjust properties such as opacity, image aspect ratio, position and CSS filters to ensure high-quality visual consistency.

• Enable hover animations to add a dynamic layer of interaction to your images. This section allows you to engage visitors when they hover over your visual content.

Content

• Manage the styling of the body text and general information. Tailor each option to align with your desired design aesthetic and maintain proper hierarchy.

Title

• Elevate your headlines with advanced typography settings. Choose the right font weight, letter spacing, and colors to ensure your brand’s voice is clear and authoritative.

Count

• This section allows you to customize the numerical indicators that represent the total number of products within a category.
• Style the numerical indicators or category tallies. Adjust their position, typography, and background to make them subtle yet readable for a better user experience.

Dot (Pagination)

• Customize the interactive pagination dots. You can change their size, color, and active state to guide your visitors through your content seamlessly.
  

Navigation (Arrows)

• Design the directional controls. Adjust the icon size, background color, and border settings to create navigation that is both functional and aesthetically pleasing.
  

• Don’t forget to click Publish to save the changes.