Three Column Elementor Blog Section
This Elementor blog section shows three post cards in a row under a short heading, each with a date, a category pill, a title, a short excerpt, and an author line. Blog Section Three Column is a free, responsive block shared as JSON files and built only with native Elementor widgets, in a static version for Elementor Free and an automatic version for Elementor Pro.
What's Inside the Block
- A left-aligned H2 heading ("From Our Blog") with a short gray line, followed by a thin divider.
- Three equal cards in a grid, with a 2 rem gap between columns and a 4 rem gap between rows.
- Each card has a small date, a rounded category pill, an H3 title, an excerpt, and an author row at the bottom.
- The author row stays at the bottom of every card, even when excerpts have different lengths.
- Inter font. On tablet and mobile the cards stack in one column. Titles and pills have a soft hover color change.
Tip: Keep excerpts and author lines short so the three cards look balanced. In the Pro version, write a short author bio such as "Founder / Owner" in your WordPress profile, because the whole bio is shown on every card. Give each post one main category so the pill stays small.
Which Version Should I Download?
- Elementor Free version: three static cards that you edit by hand. It needs no Pro, but the posts, dates, categories, and authors do not update by themselves.
- Elementor Pro version: two files that work together. The section file holds the heading and a Loop Grid widget, and the Loop Item file holds the design of one card. The cards fill in automatically with your three latest posts.
The layout, colors, and fonts are the same in both versions.
Requirements
- A recent version of Elementor with Flexbox Container available. The Free version also needs Grid Container.
- Elementor Pro for the Pro version only, because it uses the Loop Grid widget, Loop Item templates, and dynamic tags.
- For the Pro version, at least a few published posts on your site, and author profiles with a photo and a short bio.
- The Inter font available on your site (otherwise a fallback font is used).
Note: In the Pro version, the Loop Grid has no template selected after import, so you must choose the Loop Item template manually, and the file order matters (see the setup answer below). In the Free version, every title, category pill, and author name links to #, and the three author photos are empty Image widgets, so replace them with your own links and photos. The Pro date uses the GMT date of the post, so a post published near midnight may show a different day than your local time. Back up your page before importing a template into an existing layout.
Widgets Used
| Element | Purpose | Pro? |
|---|---|---|
| Flexbox Container | Section wrapper, cards, and rows inside each card | No |
| Grid Container | Three-column card layout (Free version) | No |
| Heading | Section title, intro, dates, titles, excerpts, and author text | No |
| Button | Category pill (Free version) | No |
| Image | Round author photo | No |
| Loop Grid | Shows your latest posts in three columns (Pro version) | Yes |
| Loop Item template | Design of one card, reused for each post (Pro version) | Yes |
| Dynamic Tags | Date, category, title, link, excerpt, and author data (Pro version) | Yes |
Frequently Asked Questions
How do I import this Elementor JSON template?
First, download the JSON file you need using the buttons above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.
Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.
How do I set up the Pro version?
First, import the Loop Item card file (step 1) in Templates, Saved Templates, Import Templates. Second, import the Blog Section file (step 2) the same way and insert it into your page. Third, click the Loop Grid widget and open its Content tab. Fourth, in the Choose a template field, pick "Blog Card Loop Item by Dindin Design". This last step is manual because the template ID changes on every import. If you import the files in the wrong order, import the card file again and choose it in the Loop Grid.
What does the Pro version fill in automatically?
Each card reads its content from the post: the publish date in the format "Sep 22, 2026", the category as a clickable pill, the post title linked to the article, an excerpt cut to 25 words, the author's profile photo, the author's name linked to their archive, and the author's bio. Nothing needs to be typed by hand.
How do I change how many posts are shown?
Select the Loop Grid widget and open its Content tab. It is set to show 3 posts, sorted by date with the newest first, in 3 columns on desktop and 1 column on tablet and mobile. Change Posts Per Page and Columns to show more, and use the Query settings to filter by category. Pagination is turned off, so the block has no link to older posts.
How do I change the text, colors, and links in the Free version?
Click any date, title, excerpt, or author text and type the new copy. Each category pill is a Button widget, so edit its text and Link field. For each title and author name, set the destination in the Link field. All of these point to # until you change them. Select an Image widget to add the author photo.
How do I add or remove a card in the Free version?
Duplicate or delete one card container inside the grid. The grid is set to three columns on desktop, so if you use a different number of cards, change the Columns value. A fourth card wraps to a second row.
Why are the cards the same height?
Each card is a column container set to space its content apart, so the author row sits at the bottom. In the Pro version, the Loop Grid is set to equal height and the Loop Item is set to a minimum height of 100 percent. A long author bio or a long title makes every card in that row taller.
Why does my category pill show several names?
The Pro pill shows every category assigned to the post, separated by commas, inside one pill. For a clean look, give each post one main category,.
Where should I place this blog section?
Place it on your home page or landing page after your main offer, and before the footer or a final call to action. It works as a doorway to your latest articles. Because its heading is an H2, use it after the page's H1 and main content.
Do I need Elementor Pro?
Only for the Pro version, which uses the Loop Grid widget, Loop Item templates, and dynamic tags. The Free version uses native Heading, Button, and Image widgets inside Flexbox and Grid containers.
Why won't the file import?
Make sure the file has a .json extension and hasn't been unzipped or edited. The Pro files also need Elementor Pro active on your site. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.
Why do the Flexbox or Grid settings look different or missing?
Update Elementor to the latest version. On older versions, the Flexbox Container and Grid Container features may need to be enabled first in Elementor's feature settings.
Why does the font look different?
The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.
Looking for more blog sections? Browse all Elementor blog section templates, or see every free block in Elementor Templates.
Comments
Post a Comment
Post a Comment