How to create custom layouts with the WordPress block editor
You can create custom layouts in WordPress without code by nesting Group, Columns, Row, Stack and Grid blocks, then adjusting widths, spacing and alignment. The manual route is fine for most pages; use a block plugin when you need reusable templates or more advanced layout controls.
- 01Plan the section structure
- 02Add a parent layout block
- 03Build the layout inside
- 04Set width and spacing
- 05Check the mobile layout
- 06Save repeated designs as patterns
What you need
- A WordPress site with the block editor enabled
- Editor or administrator access
- A theme that supports block layout controls
Plan the section structure
Decide what each section needs before adding blocks. For example, use a full-width background section, a constrained content area, then a two-column feature row inside it.
Keep each section as a separate parent block. This makes it easier to change spacing, colours and alignment without disturbing the rest of the page.
Add a parent layout block
Click the block inserter and add a Group block for a general container. Choose Row for items side by side, Stack for items arranged vertically, or Grid for repeated items. WordPress treats these as layout variations of the Group block.
For a simple split layout, add a Columns block instead. Select a starting arrangement such as 50/50 or 33/66, then change the number of columns in the block settings.
Build the layout inside
Add headings, paragraphs, images, buttons, covers or other blocks inside the parent container. You can nest a Columns block inside a Group, or place a Stack inside one column, to create more detailed sections.
Use the List View when selecting nested blocks. It prevents the common mistake of changing the inner column when you meant to change the outer container.
Set width and spacing
Select the parent block and adjust its alignment, content width, padding, margin, block spacing and background settings in the sidebar. Use a constrained width for readable text, and reserve wide or full width for background sections, galleries and hero areas.
If the width controls are missing, the active theme may not expose those layout settings. A block theme provides the broadest Site Editor controls, while classic themes can provide fewer options.
Check the mobile layout
Preview the page at a narrow viewport before publishing. Columns and row-based layouts can become cramped when text, buttons or images are wider than the available space. Enable the available mobile stacking option where the block provides one, and avoid forcing several narrow columns on small screens.
Check the published page as well as the editor preview. Theme CSS can change the final width, gap or breakpoint, and a fixed-width image or long unbroken text can still push a layout sideways.
Save repeated designs as patterns
Select the completed section, open its three-dot menu and choose the option to create a pattern. Use a synced pattern when edits should update every copy; use an unsynced pattern when each inserted copy should be edited independently. WordPress supports creating patterns from selected blocks and managing them in the Site Editor.
Fast way: insert a ready-made pattern, replace its text and images, then save your finished section as a pattern. If you regularly need more prebuilt sections, responsive layout controls and global styling, Stackable Premium is a practical plugin option for Gutenberg sites.
Let Stackable Premium do it
Prebuilt blocks, templates, and global styling for Gutenberg sites; choose it when you want flexible layouts without coding.
Sources
- wordpress.org /documentation/article/group-block/?utm_source=openai
- wordpress.org /documentation/article/columns-block/?utm_source=openai
- wordpress.org /documentation/article/site-editor/?utm_source=openai
- wordpress.org /documentation/article/block-pattern/?utm_source=openai
Questions
- Can I create custom WordPress layouts without a plugin?
- Yes, the block editor can create most custom page layouts without a plugin. Use Group, Columns, Row, Stack and Grid blocks, then adjust width, spacing, alignment and colours in the block settings. The manual route is usually enough for landing pages, feature sections and basic card grids; the main limitation is that advanced responsive controls depend on the active theme and core block settings.
- What is the difference between Group, Columns, Row and Stack blocks?
- Group is a general container for wrapping and styling other blocks. Columns creates defined columns, while Row places child blocks horizontally and Stack places them vertically. Grid is intended for repeated items in a grid-like arrangement. Choose the simplest parent that matches the structure, then nest other blocks only when the design needs another level of layout control.
- Why does my block layout look correct in the editor but break on mobile?
- Mobile breakage usually comes from cramped columns, fixed-width content, long text or theme CSS overriding the editor’s layout. Preview the published page at a narrow width, enable mobile stacking where available, reduce the number of columns and check images for fixed dimensions. If a parent Row contains several nested layouts, inspect each one in List View rather than changing only the visible child block.
- How do I reuse a custom block layout on other pages?
- Select the blocks that make up the section, open the three-dot menu and create a pattern. Choose a synced pattern if every copy should stay connected, or an unsynced pattern if each page needs independent content. You can manage saved patterns from Appearance > Editor > Patterns when the site uses a block theme.