Build a Magazine Homepage in GenerateBlocks, No Page Builder
We may earn a commission if you buy through our links. It does not change what we recommend or what you pay. How this works.
A magazine homepage is a stack of sections, each pulling a different set of posts. Page builders make this easy and expensive. GenerateBlocks does the same job with a fraction of the output, once you understand three blocks.
The short version
- Container for sections, Grid for columns, Query Loop for posts.
- Build one section properly, then save it as a pattern and reuse.
- Set the page as a static front page, not the blog index.
- Expect ninety minutes the first time, fifteen thereafter.
The three blocks
| Block | Role |
|---|---|
| Container | A section. Controls width, padding, background. |
| Grid | Columns inside a container, with its own responsive behaviour. |
| Query Loop | Pulls posts by category, count and order, and renders a template for each. |
Setting up the page
1. Create a page called Home
Leave it empty for now.
2. Settings → Reading → static front page
Set Home as the front page and create a separate Blog page for the post index.
3. Set the page to full width
In GeneratePress, use the page’s sidebar layout setting and the Content container option so your sections can span the viewport.
4. Add your first Container
Set an inner max-width so content stays readable while the background spans full width.
The section pattern
Every section on a magazine homepage has the same skeleton: a container, a heading row, and a grid of posts. Build it once and reuse.
Container (full width, inner max-width 1180px, padding block 52px)
Grid (2 columns: heading | link, aligned baseline)
Headline — "Latest reviews"
Buttons — "All reviews"
Query Loop (category: reviews, count: 3)
Grid (3 columns, gap 20px)
Container (card)
Featured image
Headline (post title, link enabled)
Paragraph (excerpt)
Meta (date, reading time)Query Loop settings that matter
- Post type and taxonomy. Filter by category so each section shows different content.
- Count. Match it to your column count so you never get an orphan in the last row.
- Exclude duplicates. Enable it so your featured post does not reappear in the grid below.
- Offset. Use it to skip the posts already shown in the section above.
Responsive behaviour
Set column counts per breakpoint on each Grid rather than letting them inherit. A three-column grid should become two at tablet and one at phone width. Check at 1000px and 620px specifically — those are where magazine layouts usually break.
Watch out
Reserve explicit height on any advertising container. An ad slot that loads after the layout settles shifts everything below it and is the most common cause of a failing CLS score on content sites.
Saving it as a pattern
Once one section is right, select the outer Container and save it as a pattern. Every subsequent section is then an insert plus two edits: the category and the heading. This is what turns ninety minutes into fifteen.
Keeping it light
- Set image sizes explicitly so the browser reserves space.
- Use the smallest registered image size that fits the card.
- Avoid background images on containers above the fold; they delay LCP.
- Load fonts locally rather than from a third-party CDN.
Common questions
Do I need GenerateBlocks Pro?
The free version covers Container, Grid, Headline and Buttons. Query Loop and the pattern library are Pro features on most builds. [VERIFY which tier includes Query Loop currently.]
Can I do this with core blocks only?
Yes, using Group, Columns and the core Query Loop. GenerateBlocks produces tighter markup and more granular responsive control.
How do I edit this later?
In the block editor on the Home page. Everything is a block, which is the advantage over a builder with its own storage format.
Sumit
Writes everything on TechMozz.