Gutenberg feature section with three alternating image and text rows, each with eyebrow, heading, checklist and button, styled for a design studio.
Also known as: gutenberg media and text section, alternating image text rows, zigzag feature section, image left text right section, services section with images
An alternating image and text feature section as a WordPress block pattern: three Media & Text rows that switch the photo from left to right, each with an eyebrow label, heading, short paragraph, checklist and outline button. It works as a services section, a zigzag feature layout or an "about our work" block for agencies, studios and consultancies.
How it works
The outer Group is full width with a white background, charcoal text and a constrained inner layout of 1160px. It starts with a centered intro (eyebrow, H2 and lead paragraph) in a nested Group limited to 760px. Below it sit three Media & Text blocks set to wide width with vertically centered content. The middle row uses "Show media on right", so the image side alternates down the page. Each content area holds a coral eyebrow paragraph, an H3, a paragraph, a bulleted List and a single outline Button. On phones the rows use "Stack on mobile", so every image sits above its text.
Use cases
Design and branding studios: present brand identity, UX design and web design as three clear services
Marketing agencies: walk visitors through strategy, content and campaign work with one photo per service
SaaS product pages: show three key features with a screenshot beside each explanation
Consultancies and freelancers: outline the stages of a project and what each one includes
How to use it
Copy the block markup with the copy button.
In the block editor, click into an empty paragraph and paste; the pattern appears as blocks.
Replace the text, swap the images (Media & Text toolbar > Replace) and set the button links.
Customization
Outer Group background and text: Color > Background #ffffff and Color > Text #1f2937.
Space between the intro and the rows: outer Group, Dimensions > Block spacing 96px; Padding is 112px top and bottom.
Eyebrow paragraphs: Color > Text #e5544a, Typography 13px, uppercase, letter spacing 0.1em; change the color to match your brand.
Image side: select a Media & Text block and use the "Show media on left / right" toolbar buttons.
Image width: Media & Text settings > Media width (default 50%).
Buttons: Outline style with Color > Text #e5544a, Border #f97066 at 2px and radius 999px for the pill shape.
Row headings: H3 at 32px, weight 700, Color > Text #111827.
The photos come from Unsplash and are placeholders; replace them with your own project images.
Accessibility
Every image has descriptive alt text, set in the Media & Text sidebar under "Alternative text". Headings follow a clear H2 to H3 order, the lists are real list markup and the buttons are links with descriptive labels instead of "Read more". Charcoal and gray text on white and the darker coral #e5544a keep the text readable.
Alternating Image and Text Feature Rows at a glance
Can I use the Alternating Image and Text Feature Rows code for free?
Yes. You can copy or download the block markup and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.
How do I add it to my WordPress site?
Copy the block markup, open a page in the block editor, click into an empty paragraph and paste. WordPress turns it into regular blocks that you can edit like any other content. You can also paste it in the Code editor view (Options menu > Code editor).
Does it need a page builder or plugin?
No. The pattern is built only from core blocks such as Group, Columns, Heading, Image and Buttons, so it works without Elementor, Spectra, Kadence or any other plugin. Colors and spacing are set on the blocks themselves; headings and text use your theme's fonts.
Will it look the same in my theme?
The layout, colors and spacing come with the blocks, so they carry over. Fonts, link styles and the content width follow your theme, so small differences are normal. The live demo shows the pattern in the default Twenty Twenty-Five theme. It works best with block themes; in classic themes the block editor still renders it, with your theme's styles.
Does it work on mobile?
Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.
How to install
Copy the block markup above.
Open a page or post in the WordPress block editor, click into an empty paragraph and paste. The editor turns the markup into blocks.
Replace the sample text and images. To reuse it, select the blocks and choose Create pattern from the block toolbar menu.
Uses only core WordPress blocks, so no plugin is needed. Tested with WordPress 6.8 and later. Fonts come from your theme; the live demo uses the default Twenty Twenty-Five theme. WebDevSnippets is not affiliated with or endorsed by the WordPress Foundation.
Alternating Image and Text Feature Rows · WordPress Feature Sections
