V4 Elements Loop Grid Estimated reading: 8 minutes 9 views Build your own post cards and show them in a grid. You design one card, and the Loop Grid repeats it for every post. It comes with ready-made card designs, filters, and page buttons. No code needed. WIDGET Loop Grid PARTS Loop Layout, Loop Item, Pagination PLAN Free A QUICK LOOK What You Will Build A grid of image cards. Each card shows the date, a short text and the title over a big photo. Point at a card and it changes color. Page buttons switch between pages without a reload. Point at a card to see it change BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: The cards show your posts. Give each post a featured image and a short excerpt, and the cards look their best. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Loop Grid is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Loop Grid under Dynamic Widgets and switch it on. Click Save Settings. The Loop Grid card in your dashboard (click to zoom) Note: Do not mix it up with Posts Grid. Posts Grid shows ready-made cards. Loop Grid lets you design the card. STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the Loop Grid in. Click the + button at the top left to open the Elements panel. Type Loop Grid in the search box. Drag the Loop Grid with the orange badge onto your page. The Loop Grid in the Elements panel (click to zoom) Note: A new Loop Grid comes with a simple card (a picture and a title), the page buttons, and your latest posts already filled in. STEP 3 Choose Which Posts to Show Select the Loop Grid and open the Query section in the General tab. Keep Source on Posts. Set Posts Per Page. The default is 6. Set an Offset to skip the first posts. The default is 0. Choose Order By (default Date) and Order (default Descending, newest first). Source (1), Posts Per Page and Offset (2), Order By and Order (3) (click to zoom) Tip: Posts Per Page is the number of cards on one page. With more posts than that, the page buttons show up. STEP 4 Filter the Posts (Optional) Want only some posts? Open Query Filters. Pick one or more Categories or Tags. Use Include Posts to show only certain posts. Use Exclude Posts to hide some. Use Authors or Exclude Authors to filter by author. Set a Min date and a Max date to show posts from a time range. Switch Only With Featured Image on to skip posts that have no picture. Categories and Tags (1), Include and Exclude Posts (2), Authors (3) and Date range (4) (click to zoom) Tip: You can also type a Meta Key Exists to show only posts that have a certain custom field. STEP 5 Design the Card Open the Structure panel. The Loop Grid has a Loop Layout. Inside it, the Loop Item is your card. You design this one card, and the Loop Grid repeats it for every post. The Loop Layout (1), the Loop Item (2), the card parts (3) and the Pagination (4) (click to zoom) Click the Loop Item. Open Presets in the General tab and click Apply a preset. Click the design you like. Apply a preset (1) (click to zoom) The five card presets Note: A preset replaces the card you have. Pick a preset first, then change the words. Bold Overlay Zoom A bold card with the text over the picture. The picture zooms a little when you point at it. Glass Frosted Card A frosted glass box with the text on top of the picture. Image Cover Card The picture fills the card and the text sits at the bottom. This is the one used on this page. Slide-Up Content The text slides up over the picture. Split Reveal The picture on one side and the text on the other. STEP 6 Fill the Card with Post Content A preset comes with the pictures and some texts already linked to your posts, like the Featured Image, the Post Title and the Author Name. Some texts may still say Type your paragraph here. You link them to a post field with Dynamic tags. Click the Paragraph that says Type your paragraph here. Point at the text box. A small database icon shows at the top right. Click it. Type a word in the search box, for example excerpt, and click Post Excerpt. The paragraph now shows the excerpt of each post. The Dynamic tags icon (1) and the Post Excerpt tag (2) (click to zoom) Tip: Other tags you can use are Author Name, Author Display Name, Author Bio and more. Use them for any paragraph or heading in the card. Note: To make the whole card a link, open the Loop Item and use Wrapper Link in Settings. STEP 7 Set the Columns and the Gap Click the Loop Layout in the Structure panel and open the Style tab. Open Layout. Display is set to Grid. Set Columns. The default is 3. Set the Gaps between the cards. The default is 10 px. Columns (1) and Gaps (2) (click to zoom) Tip: Use the tablet and mobile views at the top of the editor to give each screen its own number of columns. STEP 8 Add the Page Buttons The Pagination has three parts: Prev and Next buttons, the page numbers, and a Load More button. They show when you have more posts than fit on one page. Click the Pagination in the Structure panel. Open Pagination in the General tab. Choose the Load Method. The default is AJAX (no reload). The new cards load without reloading the page. Load Method (1) (click to zoom) Tip: Using only some of the buttons? Open the Pagination in the Structure panel and select the part you do not need. RESULT Final Result The Image Cover Card preset, with the date, the excerpt and the title linked to each post. Six posts in three columns Page buttons Here Posts Per Page is 3. Click Next and the next three posts show. Click Prev to go back. The page does not reload. Next and Prev switch between pages SETTINGS Options Source Default: PostsWhere the posts come from. Posts Per Page Default: 6How many cards on one page. Offset Default: 0Skips the first posts. Order By Default: DateHow to sort the posts. Order Default: DescendingDescending or Ascending. Query Filters Categories, tags, include and exclude posts, authors, date range, meta key, featured image only. Presets (Loop Item) Five ready-made card designs. Wrapper Link (Loop Item) Makes the whole card a link. Columns (Loop Layout) Default: 3How many cards in a row. Gaps (Loop Layout) Default: 10 pxSpace between cards. Load Method (Pagination) Default: AJAX (no reload)How the next cards load. ID Optional CSS ID. GOOD TO KNOW More Details One card, many posts You design one Loop Item. The Loop Grid repeats it for every post. Your own cards Besides presets, you can drag your own elements into the Loop Item and link them with Dynamic tags. Page buttons show when needed If all posts fit on one page, only the page number shows. The editor is a preview In the editor, the cards can look a little different from the live page. Always check your live page. HELP Troubleshooting I do not see the Loop Grid in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Loop Grid. Click Save Settings, then reload the editor. Type Loop Grid in the search box and pick the one with the orange badge. A card says Type your paragraph here That paragraph is not linked to a post field yet. Click it, open Dynamic tags (the database icon) and choose a tag, for example Post Excerpt. A card shows a broken picture That post has no featured image. Add one to the post, or switch Only With Featured Image on in Query Filters. The text is too big or too small Click the text in the Structure panel, open the Style tab and set the size in Typography. Your theme may set its own text sizes. I do not see the page buttons They show only when you have more posts than Posts Per Page. Lower Posts Per Page to test them. No posts show Check your Query Filters. A category, tag or date range that no post fits gives an empty grid. You Did It Your page now shows your posts in cards that you designed. If you face any problem, please contact our support team. We are happy to help.
