How to Create WordPress Category Pages with Elementor Pro Recurring Grids

In WordPress, it is possible to create beautiful and powerful category pages by using a recurring grid or recurring rotation. This article will detail how to use these tools to accomplish this.

I. Why create category pages using a circular grid or circular rotation?

Cyclic Grid and Cyclic Rotationare very useful tools in modern web design. They allow you to display content on a page in a grid or rotated format that is both aesthetically pleasing and practical. By using them to create category pages, you can dynamically display content under different categories, such as articles, products, images, etc., thus enhancing the user experience.

Key benefits include:

• Dynamic display: Automatically display categorized content to reduce the hassle of manual updates.
• Flexibility: Layout, style and content display can be easily adjusted.
• User Experience: Provide a better visualization and navigation experience to increase the time users spend on the site.

II. Steps to create a category page

In this guide, we'll use an example to detail how to pass theElementor ProThe cyclic lattice (Loop Grid) to create a category page that displays article categories. Although we're using articles as an example, the same approach works for products and other content types.

1. Setting up and dragging and dropping the loop grid

First, we need to set up a circular grid on the page to display the content categories.

Drag and drop the loop grid:

• Log in to the WordPress dashboard.
• Create a new page or edit an existing page.
• In the Elementor editor, find theLoop Grid Widgetand drag and drop it onto the page's canvas.

Select the template type:

• In the left panel, find the "Select Template Type" drop-down menu.

• Select "post categorization" as the template type. If WooCommerce is installed, you will also see "product categorization"Options.

Create a template:

• Click the Create Template button. This will create a new template for your category page where you can add dynamic content.

2. Building templates with dynamic tags

In order for the template to display the category content automatically, we need to use dynamic tags. This will eliminate the need for you to manually enter information such as category names, descriptions, etc.

Add a title widget:

• Drag and drop the Title widget into the template for displaying category names.

Use dynamic tags:

• In the Settings panel of the Title widget, click the Dynamic Label icon next to the Title field.

• Select "File Title" from the drop-down menu. This way, the template will automatically display the name of the current category instead of having to enter it manually.

Delete unnecessary text:

• Normally, WordPress automatically prefixes the category name with "Post"etc. In order to remove these irrelevant texts, you can go to the settings of the header widget, find the "Include context" option and set it to "No".

Add a category description:

• Use the text editor widget to display the category description.

• In the content field of the text editor widget, select the dynamic label "Archive description", which will automatically display the description of the current category.

3. Making category items clickable

To improve the user experience, items in category pages can be made clickable so that users can go directly to the category's detail page by clicking on the category title or image.

Make the container clickable:

• When editing a template, select the container by clicking on the icon in the upper left corner.

• In the container's settings panel, find "Additional Options"Part.

• From the HTML tag drop-down menu, select the "Link" option.

• In the Link field, click on the Dynamic Label icon and select "Archive URL". This will make the entire container a link that, when clicked by the user, will jump to the appropriate category page.

Make individual elements clickable:

• If you only want the title or image to be clickable and theNot the whole container., which can be found in the widget's "element" tab to find the "link (on a website)" field.

• Click on the Dynamic Label icon and select "Archive URL". In this way, only the title or image portion will be changed to a link.

4. Exclusion of unwanted categories

In some cases, it may be desirable to exclude certain unwanted categories (e.g. "Uncategorized") from the category page. Here are the steps:

Open the query settings:

• Select either the Loop Grid or the Rotating Widget.
• In the left panel, open the Queries section.

Manually select the filter conditions:

• In the Filter By drop-down menu, select Manual Selection.

• Click on the "Exclude" option and enter the name of the category you want to exclude (e.g. "Blog shortcodes > FAQ").

Save the settings:

• After completing the exclusion settings, click the "Save" button.

III. Adding images to category pages

Adding images to category pages can significantly improve the visual appeal of the page. If you wish to add an image for each category, here are the steps to do so:

1. Adding image widgets

Add an image widget:

• Drag and drop the image widget to the appropriate location in the template.

Use dynamic tags to select images:

• In the Content tab of the Image widget, click the Dynamic Label icon next to the Image field.

• From the drop-down menu, select "WooCommerce Product Image Fields". This will allow you to automatically display the images associated with each category.

Setting up dynamic fields:

• In Dynamic Fields, click the key icon and select the field associated with the category image from the drop-down menu.

Save and preview:

• Once you have completed the setup, save the template and preview the page to ensure that the category images are displayed correctly.

IV. Designing and optimizing category pages

After creating a basic category page, the design and functionality of the page can be further optimized to enhance the user experience.

1. Page style settings

Use Elementor's styling tools to customize the layout, colors, fonts, and other visual elements of your pages. Make sure the page is consistent with the overall style of your site by adjusting these settings.

2. Responsive design

Make sure your category pages display well on a variety of devices (e.g., phones, tablets, computers). Use Elementor'sresponsive designtool that previews and adjusts the page inOn different devicesThe display of the

3. Performance optimization

Use lightweight images and clean code to ensure pages load quickly. Good loading speed not only improves the user experience but also improves search engine rankings.

reach a verdict

Creating WordPress category pages using a circular grid or circular rotation will not only keep your site's content more organized, but also provide a better browsing experience for your users. With features like dynamic tags, clickable containers, and image optimization, it's easy to create a category page that is both beautiful and functional.