How to use Blog components

Blog components are split into three parts that work together: the archive component (your blog page or section), the blog loop (how each post card looks), and the blog post (your single post template). You can set each one up separately and connect them easily.

Part 1: Blog archive component

This is the full blog section – the layout including any headings, texts or other widgets and a Loop Grid widget that displays your posts. You can paste it onto a dedicated /blog/ page or drop it into any existing page as a section.

Steps:

1. Copy the archive component from Element UI
2. Open the page you want to use (or create a new page, e.g. “Blog”)
3. Paste it directly into Elementor
4. Click into the Loop Grid widget and connect your loop template (you’ll create this in Part 2)
5. Publish the page

Part 2: Blog loop

The blog loop controls how each individual post card looks inside the grid. It’s a container that lives inside an Elementor Loop Item template.

Steps:

1. Copy the blog loop from Element UI
2. In your WordPress dashboard, go to Templates → Theme Builder → Add New
3. Choose Loop Item as the template type
4. Name it (e.g. “Blog loop”) and click Create Template
5. Paste the loop container directly into the editor
6. Customize any styling to fit your website
7. Save and close
8. Go back to your blog page, click into the Loop Grid widget, and select this template

Part 3: Blog post

The blog post component is your single post layout – the page visitors land on when they click through from the blog loop grid.

Steps:

1. Copy the blog post component from Element UI
2. In your WordPress dashboard, go to Templates → Theme Builder → Add New
3. Choose Single Post as the template type
4. Name it (e.g. “Blog post”) and click Create Template
5. Paste the component directly into the template
6. Customize any styling to fit your website
7. Publish
8. When prompted, set the display condition to Posts

Mix and match

Once your archive page is set up, you can swap the loop at any time – just open the Loop Grid widget and select a different Loop Item template. The section stays the same, only the card style changes. You can use Element UI loops or build your own.