Elementor Loop Grid Tutorial: HappyAddons Dynamic Grid User Guide

Designing attractive and highly functional websites is key to attracting visitors, boosting engagement and driving conversions. To simplify this process, websites like Elementor and its add-ons, such web design tools continue to introduce innovative features and modules.

Loop Grid(Circular Grid) is the new component recently introduced by Elementor and its plugin team, which allows us to display content on web pages in a neat, elegant grid.

What is Loop Grid in Elementor?

Loop Grid is a feature-rich Elementor widget that supports the creation of dynamic layouts for displaying various content in a website, which can be modified at any time. This type of component is very useful when displaying blog posts, merchandise and portfolios.

The advantage of it is that the content is automatically updated. When you publish new articles or products, they will be displayed directly on the page without any manual action. Also you can customize the templates to match your brand's style.

Go to the operation step.

Preparing for the Loop Grid

To use this component, you need to install the following plugin first:

Elementor
HappyAddons
HappyAddons Pro

When you're ready, follow the steps below to get started.

Step 01: Drag and Drop the Loop Grid onto the Page

Open the page to be edited in the Elementor Search in the editor Happy Loop Grid, drag and drop it to the desired area.

Step 02: Create Loop Grid Template

After adding a component, you will be prompted to select a template. If a template already exists, you can select it directly; if not, click "Create Template".

The system will jump to a new page, under the "Loop Template" tab, click "Add New Template".

Name the template (e.g. Loop Template One) and click "Create Template".

The system will open a new canvas and you can start dragging and dropping components to build the template layout.

Step 03: Designing the Loop Grid Template Layout

To display a blog post, for example, you can add the following components in order:

Post Featured Image

Used to display article thumbnails.

Post Info

Display of author, date of publication, etc. is recommended to be placed below the image. Unwanted information elements can be deleted or new content can be added via "Add Item". Color, thickness and alignment can be adjusted in the style options.

Post Title

Drag and drop below the article information component. Content settings can be changed in the HTML Labels, font size and alignment, adjust font color and typography in style settings.

Post Excerpt

Placed below the title for displaying a summary. Color and font can be adjusted in the style settings.

Step 04: Adapting the template layout for mobile devices

In order to display properly when accessed by different devices, you can click the "Responsive Mode" button at the bottom of the editor to view desktop, tablet, and mobile modes.

Adjust the size and position of elements in each mode as needed to fit different screens.

Publishing Templates

Once the template is designed, click the "Publish" button to save the template.

Step 05: Go back to the main page and select a template

Back on the main page, click on the Loop Grid block and select the template you just created in the Layout Settings.

Enter a template name and when selected the template will load in real time, displaying the content of the published article.

You can make further adjustments to it.

Step 06: Configure Loop Grid Settings

Adjustable in the layout settings:

Columns per row
Number of contents displayed per page
Is the height uniform

In this example, 3 articles per page, 3 columns.

Configure query conditions (Query)

Go to the "Queries" tab and select the type of content to display, such as articles, pages orofferingsThe

Use "Include By" to filter content by author, tag or category. The system will display relevant content based on the selection.

Step 07: Pagination Settings

Go to "Pagination and Load More" settings and select the pagination style, e.g. Number + Previous/Next.

When the setup is complete, the paging buttons will appear below the grid.

Step 08: Style Settings

In the "Style" tab, you can set it:

Row and column spacing

Margins, backgrounds, shadows, borders for each item

Pagination button colors, fonts, margins

Step 09: Adjust the template details again

If you need to make changes to the template, you can access it in the background:

HappyAddons > Theme Builder > Loop Template

Click on "Use Elementor Edit" to open the template, for example, modify the style of the "Continue Reading" button. Click "Update" after modifying.

Step 10: Preview and Release

Click "Save Draft" on the main page, then refresh the page to see the template effect.

Finally, click the Publish button to publish the entire Loop Grid design.

It is recommended to double check the display on your phone and tablet to ensure compatibility with each device.

Loop Grid Common Application Scenarios

Here are some scenarios where Loop Grid is appropriate:

1. Blog post layout

Showcase Articlescaption, summaries, images, author information, etc. for a neat and organized page layout.

2. Commodity display blocks

Used for e-commerce websites to display product images, prices and descriptions for easy browsing and shopping.

3. Portfolio presentations

Showcase design works, cases, articles and other content to enhance professional image.

4. Calendar of events

Graphic display of event name, date, location, etc. allows visitors to quickly access information.

5. Introduction to the classification of services

The grid displays service names, descriptions and pictures to convey information in a concise and intuitive manner.

summarize

Now you've got Loop Grid in full operation. This component is easy to use and powerful, allowing you to build rich and flexible content blocks on your web pages, improving visual presentation and page performance.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off