AdvancedLesson 7 of 22 · 6 steps

Build a post grid or carousel with Themer

Design one reusable post card and repeat it in a responsive grid or carousel.

Video coming soon

Your next step is ready.

Follow the complete written guide below.
The video will join it here when it’s ready.

Start the written lesson

Before you start

Themer enabled under Modules → Content & design, then Save modules.
A practice page, published sample posts and Elementor or the block editor.
Free supports one Loop Item; Pro supports more and grid-widget alternate templates.

Let’s do this, step by step.

Step 01

Create the card template

Open EMCP Themer → Add New and choose Loop Item as Template type. Set a preview post type, post ID and canvas width. Over MCP, use create-theme-template with type loop.

A Loop Item is the card repeated for each post. Choose a sample post for the editor. The card does not need display conditions.

Step 02

Build dynamic card content

Add a dynamic post title, featured image, excerpt and post link. Build against the returned template ID and ensure the Loop Item is published before using it.

Use the current post’s title, image and link rather than fixed example text. Keep the card simple because it will be repeated many times. Only published Loop Items render in a grid.

Step 03

Place the grid or carousel

On a practice draft, add the EMCP Themer Loop Grid or Loop Carousel widget/block. Choose the published Loop Item. For AI edits, inspect the widget or block schema first.

Add the EMCP Themer grid or carousel to your draft and choose the card you made. A card created in one builder can be displayed by the other.

Step 04

Choose which posts appear

Start with Query → Source → Posts, then set post types, filters, order and items per page. Use Current query for archive/search templates, Related for a single template, Manual for selected IDs, or Products with WooCommerce.

Choose where the content comes from. For an ordinary page, start with Posts. Current query follows an archive or search page. Check that every card shows the intended post.

Step 05

Set layout and movement

For a grid, set desktop/tablet/mobile columns and a pagination mode. For a carousel, set slides per view, arrows and pagination; review autoplay and interaction behavior.

Check the phone layout as well as desktop. For a grid, test the next page or load-more button. For a carousel, test arrows, swiping and keyboard controls. Use movement only when it helps.

Step 06

Test the complete result

Preview post links, images, empty results and pagination. Open the native editor again to check saved values. Pro alternates apply only to the Elementor Loop Grid widget, not blocks or carousels.

Test every card link and an empty result. Reopen the editor to check the settings stayed saved. Alternate cards are a Pro option for the grid widget; the other loop formats do not have them.

You’re done when…

The card displays each post’s own content and the grid or carousel works across screen sizes.

Keep the reference handy.

The docs cover tool details and requirements for this lesson.