The loop grid (grid loop) allows you to create very personalized lists of articles, giving a unique style to your site. You see him. widget Posts For example? Well, you could create much more beautiful (and efficient) templates with the loops precisely.
Note
The loops are created with dynamic content – i.e. information derived directly from the articles themselves. For example, you can use the widget Title of article to automatically extract and display the titles of the articles. You can also use other widgets by choosing the appropriate dynamic tags.
Contents
Build a grid loop
Using the Loop Grid widget
There are two ways to create and modify a loop:
- Via theme builder.
- With the widget.
In this section we will review the creation of a loop with the widget.
- Create one new page.
- Drag widget Loop Grid On the canvas.
- When you create a loop grid, you must first create a model. (You can also start from an existing model).
- Click on Save.
- You are now building a model that will be duplicated to display a list of all articles in a uniform manner.
- Use containers and widgets to create the model. Use widgets associated with articles (such as widget) Picture at the front page, widget Title of article, widget Extract from article and widget Article information) or other widgets with dynamic tags. You can also add widgets for design reasons (for example, add an icon to your model).
- Stylise the elements in the loop to match your design.
- Click on Save then on Return to get back to your page.
- Your page is now filled with a archive all your articles, designed according to your specifications.
If you want to change the design, select «Edit Template» top left, and make your modifications. Any changes you make in the template will affect all elements in the archive. Wherever they are on your site.
Note
When you modify a page with a loop grid, the first element of the loop changes color to indicate that you can modify the template by clicking on it.
From a white page with the theme builder
- Select Models > Theme Builder from the WordPress dashboard.
- Click on Loop element.
- Click on Modify to modify an existing loop.
- Click on Add New to create a new loop.
- Use containers, widgets and other elements to create the model. Most of the time, you will use widgets associated with articles (such as widget) Picture at the front page, widget Title of article, widget Extract from article and widget Article information). However, you can also add other widgets to create your loop (if you want to add icons, images, flip boxes, etc.).
- Stylise the elements in the loop to match your design.
Note
When you modify a page with a loop grid, the first element of the loop changes color to indicate that you can modify the template by clicking on it.
Note
If you don't define a pagination style, visitors will only see one page of articles.
Here you go, now you have all the information to build a custom loop grid for your site!
This tutorial has been translated and adapted from Elementor documentation: https://elementor.com/help/how-do-i-build-a-loop-grid/
