WordPress loop using Ele custom skin

Post-loop to build beautiful archive page

An archive page is a very important page and is consolidated and combined within it the posts we want to view with an option to filter and directly to articles/products that we are engaged in.

WordPress offers a pre-designed archive page layout that looks great, but as website builders, we can not be limited in our capabilities so I am writing the following article.

We build the archive pages with a dynamic loop that we will design and after using a query of what we want to be displayed on the same archive page.

loop plugin

Working with the loop must go hand in hand with the Elementor template, so after installing the plugin we will move on to theme builder over select the loop tab where we will create a new dynamic and designed loop for all screens.

For the sake of the article, we decided to build a beautiful blog page, but everything said here is possible with any post-type like products.

  1. Add image widget and click on the dynamic icon so you would choose which dynamic image do you prefer.

dynamic image

2. Same for the title widget:

dynamic title

 

3. Add post excerpt and limit the digits (Use divider between title and excerpt)

4. Add share button so anyone could share it.

5. On publish settings, use the page/s that you want to present the loop (like blog or store page)

Feel free to use any design tools offered by Elementor, but the most important thing is to keep images and images and texts so that the loop is not damaged. Once we have finished building the loop we move on to the step of displaying the loop on the archive page there we will add the posts widget in the section of which we want it to show us the loop.

on the posts widget follows these steps:

  1. Change the skin to custom
  2. select the loop template name
  3. Set a columns and posts limit for page
  4. Use Query as you use from the dynamic content of the loop – what means if you chosen to present posts, set posts on the query source (same for products).

 

I just try to learn from every mistake that I make so that I never make them again.
Patrick Mahomes