Why I Use Editorial List Layouts Over Card Grids for Webflow Service Pages in 2026

Why Did I Stop Using Card Grids for Webflow Service Pages?

I built service grids for B2B Webflow sites for five years. Three columns, four columns, sometimes a six up grid for the agency clients who insisted they did everything. The grids looked tidy in Figma. They never converted. A consulting client in Bengaluru showed me her heatmap data in April. Out of twelve service cards in a three by four grid, only the top two received any clicks at all. The bottom ten cards might as well have been background texture.

A 2026 NN Group eye tracking study on long form business pages found that users scanning a grid of more than six cards spent on average 1.1 seconds per card, compared to 4.7 seconds per item on a vertically stacked editorial list of the same content. That is more than a four times difference in attention. For a service page where the goal is to make a buyer understand what you do, four times the attention per item is the conversation worth having.

This piece walks through why I switched to editorial list layouts on Webflow service pages, what the pattern actually looks like, and how to migrate without losing the visual structure your design team built.

What Is an Editorial List Layout?

An editorial list is a vertical stack of service entries, each one taking the full content width, with a clear hierarchy of title, short description, supporting media, and a contextual call to action. It looks more like a long form article than a marketing brochure. Each entry gets its own breathable section, with white space between entries that signals the boundary.

The reference for the pattern is the way a magazine treats a list of essays. Each one stands on its own. The reader expects to move through them in order. Compare that to a card grid, where the reader expects to scan and click the most interesting one, which inevitably means the first one or two.

How Does This Compare to Other Patterns?

The editorial list sits between the card grid and the long form single page. It keeps the structural clarity of the grid while restoring the depth and breathing room of an article. Compared to a sticky pinned scroll pattern, like the one I wrote about in my piece on why I replaced service card carousels with stacked pinned sections, the editorial list is less choreographed and more readable on slower devices.

I now use stacked pinned sections for product feature pages, where the visual choreography reinforces a product capability. I use editorial lists for service pages, where the goal is to explain what the buyer gets, in their words, without making them feel like they are being marketed to.

What Does the Editorial Pattern Look Like in Webflow?

Each entry is a section, full content width, with a 12 column grid inside. The headline sits in the first four to six columns. The body copy sits in the next four to six columns. The supporting media, usually a single image or a short loop video, sits to the right or below depending on the breakpoint. The call to action lives at the bottom of the entry, aligned with the body copy.

The vertical spacing between entries is 96 to 120 pixels on desktop. The horizontal alignment alternates entry to entry, with media on the right for odd entries and media on the left for even entries. The alternation breaks the visual monotony without resorting to garish color blocks. I build the alternation using Webflow CMS items and a conditional visibility setting, so the marketing team can reorder services from the CMS without touching the Designer. The same restraint I describe in my piece on why I replaced logo strips with weighted client names on Webflow homepages applies here. Trust the content, not the chrome.

How Do You Pick the Order of Services in the List?

Order matters more in an editorial list than in a grid. In a grid, the visitor scans the whole thing in a glance. In a list, the visitor reads in order until they decide to stop. The first three entries determine whether the visitor keeps going.

I order services by two criteria. First, by which service best matches the buyer who lands on this page. Second, by which service has the strongest proof. The order is rarely the order in which I built the offerings. For most B2B consultants, the discovery offering goes first, the highest ticket retainer goes second, and a productized package goes third. Lower ticket and self serve offerings come later in the list.

Should the Editorial List Have Anchor Links?

Yes, but quietly. I add a small in page navigation at the top of the page that lists the service titles and anchors to each entry. This pattern is invisible to mouse users who scroll, useful to keyboard users who tab, and helpful to AI agents that parse the page structure. The same anchor pattern is described in my piece on the sticky table of contents for long blog posts.

The nav should sit below the hero and above the first entry. It should not be sticky. A sticky in page nav competes with the global navigation and creates a visual chord that fights the editorial feel. The nav appears once, the visitor uses it or ignores it, and then the page reads as a continuous article.

What About Mobile?

The pattern simplifies cleanly on mobile. The 12 column grid collapses to a single column. The media moves above the body copy on every entry, because the alternating left right pattern does not survive a narrow screen. The vertical spacing between entries tightens to 64 pixels.

The mobile version is actually where the editorial list earns the most ground against the card grid. On mobile, a card grid degrades into a vertical list of cards anyway. The card chrome that justified the grid on desktop becomes dead weight on mobile. Skipping the chrome means each service entry on mobile is a clean editorial unit, which is the format mobile readers expect.

How Do You Handle the CTA on Each Entry?

One CTA per entry. The CTA should be specific to that service, not a generic "contact us." For a consulting service, "Book a 25 minute discovery call about this" works better than "Get in touch." For a productized package, "See the package details" works better than "Learn more." Specificity earns the click.

The CTA should be a text link with an arrow, not a button. Buttons compete with the visual weight of the headline. A text link with an arrow respects the editorial format and still earns the click. I use a 16 to 18 pixel link with a 1 pixel underline that thickens on hover, animated with a short GSAP tween for clients that want a softer micro interaction. The same restraint shows up across every editorial list I have shipped this year for clients from Bengaluru to Berlin.

How Do You Migrate From a Card Grid Without Losing Content?

Build the editorial list as a new page on staging. Move each card's title and description into the new format, then write an extra 80 to 120 words of body copy per entry. The card grid forced you to compress. The editorial list rewards you for being specific. Use the extra space to name actual deliverables, timelines, and outcomes.

Publish the new page to a separate URL first and run it as an A B test against the existing card grid for two weeks. I use Webflow Optimize for the split, or a simple Cloudflare Workers script if the client is not on a plan that includes Optimize. The clients I have tested this on saw the editorial list win on time on page, on scroll depth, and on form submissions in both Google Analytics 4 and Plausible. Two weeks of data is usually enough to make the call. If the editorial list wins, redirect the old URL to the new one with a 301 and archive the card grid.

How Do You Ship This This Week?

Pick the highest traffic service page on your Webflow site, sketch the new editorial layout on paper or in Figma, build it on staging, and write the extra body copy for each entry. Plan two to three hours per entry, including the copy. Ship to staging, run a two week A B test, and let the data make the call. Most of the time, the data calls itself.

If you want me to look at your service pages and recommend whether the editorial list is right for your buyer, I am happy to walk through it. Let's chat.