Build a magazine front page

Tutorials Pro
This article covers functionality available to customers on the Pro version.

You have seen a demo, you want something like it, and the settings panel has hundreds of controls with no hint about where to start. This page gives you an order to do things in.

It is an example, not a canon. Sections can be combined, dropped, and added. The sequence is the value here, not the exact set.

By the end you will have a working front page in one sitting, one you can make more or less elaborate later without starting over.

#Three ways to do the same thing

Decide this first, because the steps below describe results rather than clicks.

The Customizer

The fastest route. The front page is assembled from the built-in settings in about five minutes.

The block editor

When the front page should be an ordinary page built in the editor.

Elementor

When you need full freedom over the layout.

See The front page, Registered blocks, and How Verba uses Elementor.

The choice of tool does not change the listing settings. The post listing is the same everywhere. You are choosing how the page is assembled, not what it can do.

#The six steps

Go narrow, globally

The cheapest change with the largest effect. A magazine feel starts with column width, not with blocks. Set it once in Basic settings and it applies to the whole site.

Put a featured section first

One short list at the top with a large card. This is what separates a front page from a feed. Three or four posts, not more: it is a display window, not an archive. See Customizing the look and the section title settings.

Make the navigation compact

Match the header to the narrow layout: compact pill navigation instead of a wide bar. See The header and Menus. With a lot of categories, add Mega menus or Category mega menus.

Add one long list with load more

The main body of the page: a listing with no small post limit, using load more or infinite loading. See Listing settings.

If a featured section sits above it, give the main list an offset. Without it, the first few posts appear twice on one screen, which is the most common mistake when assembling a front page.

Add a small taxonomy list

A tile of categories under the main list: a way out of the front page into the archives, and a second layer of navigation without another menu. Keep it compact. It is a hint, not a section.

Close with a minimal footer

See The footer. One column of links and a subscribe form. A long footer under a narrow layout looks heavier than the front page above it.

#Making it yours

Simpler: drop the taxonomy list and the featured section, leaving the header, one list, and the footer. That is already a correct front page.

More elaborate: add a second themed section between steps four and five, a promo strip, or an insertion inside the list. See Content zones and insertions, Call to action, and the promo bar.

Sections on the front page must not repeat the same posts. If two listings read the same category, separate them with an offset or with different sources.

#Check the result

  • The page on a phone, since the narrow layout and pill navigation behave differently there

  • No post appears twice anywhere on the page

  • Load more adds posts without the page jumping

Success looks like this: the front page reads as a selection rather than a feed, and it was assembled with built-in settings without a line of custom CSS.

Last updated

Was this article helpful?

FIND THE ONE THAT FITS YOUR PROJECT

Import a demo, swap the content, adjust the layout. Modern WordPress under the hood, fast even when the site fills up.