Split hero
A two-column hero with a clear headline, short explanation and image. Core blocks give a service or studio homepage an editable starting point.
The copied blocks, shown with a neutral baseline. Your theme controls fonts and widths.
Use this layout in WordPress
- Copy the blocks and paste into an empty location in a draft page. If they appear as plain text, paste using the editor’s Code editor, then return to Visual editor.
- Replace all sample text and example.com links. Replace demo images through Media Library; remote image URLs do not create local attachments.
- Use List View to select the outer Group and inner blocks. Review colors, spacing, headings and button links.
- Preview on desktop and mobile before publishing. For a header or footer, paste into the appropriate template part.
Why the arrangement works
- The small label establishes context before the heading.
- Text and image share a two-column structure.
- One primary action follows the short explanation.
Customize the starting point
- Replace the studio name, headline and description with your own.
- Replace the demo image through Media Library; the copied image URL is not an attachment.
- Update the button URL and review the Group colors.
On smaller screens
Core Columns stack at narrow widths. Keep the text column first so the explanation precedes the image. Check long headings on a phone.
Accessibility checks
The section heading is H2; use an H1 for your page title. Keep informative image alt text and enough contrast on the button.
Theme defaults affect the final appearance. The live preview is rendered from the copied markup with a neutral baseline and does not promise pixel-identical results across themes.
Read the official pattern instructions and RoarWP pattern guide for syncing and customization.