How to create custom block layouts in WordPress

Sketch the layout as nested sections before adding blocks. For example, use a full-width outer section, a constrained inner Group, a Cover block for a hero area, Columns for side-by-side content, and Buttons or a Query Loop inside the relevant section.

Keep the hierarchy simple. A common mistake is adding several Groups inside one another just to control spacing, which makes the List View difficult to navigate and can make width settings appear to be missing.

Create or edit a page, then add the blocks from the inserter or type shortcuts such as /group, /columns or /cover. Use Group variations such as Row, Stack or Grid when you need horizontal, vertical or grid-style arrangements. Add the content blocks inside the parent layout block.

Select the parent block when you need to change alignment, justification, orientation, wrapping, content width, background, padding or block spacing. The List View is usually the quickest way to select the correct parent in a deeply nested layout.

Use the block toolbar to choose the default, wide or full-width alignment where your theme supports it. A Cover block can extend to full width, while a Group can provide a full-width background with a narrower inner content area. For rows, columns and other parent blocks, check the Layout settings for justification, orientation and whether child blocks can wrap to another line on smaller screens.

Preview the page on an actual phone before publishing. If columns look correct in the editor but stack or stretch incorrectly on the front end, the theme CSS may be overriding the layout. Also check whether a parent Group or template container is preventing a child block from reaching the screen edge.

Select the outer Group, Columns or Cover block and adjust the available Dimensions settings for padding, margin and block spacing. Apply colours, typography, borders and shadows to the parent block when the whole section should share the treatment. Use the theme’s preset colours and font sizes where possible so the layout remains consistent.

If a spacing control is unavailable, that is normally a theme or block-support limitation rather than a missing editor command. Adding arbitrary CSS to fix one page can also create unwanted gaps on mobile, so first check the parent block, theme styles and responsive preview.

Select the finished block or group of blocks, open its three-dot menu and choose Create pattern. Give it a descriptive name and decide whether it should be synced. Use an unsynced pattern when each inserted copy will have different text or images. Use a synced pattern only when changes should update every instance across the site.

Manage saved patterns from Appearance → Editor → Patterns on a block theme, or from the editor’s pattern management option. A synced pattern can be detached later if one page needs to diverge.

Use the Site Editor’s Templates area when you need to change the structure used by posts, pages or a specific content type, rather than just designing one page. Templates can contain the header, post content, sidebars, query areas and footer, and are edited with blocks.

The Template Editor is available with a block theme and may also be available with a classic theme that has enabled it. Before changing a template, confirm that you are not editing the layout for every page unintentionally. If you need reusable custom layouts but not site-wide changes, use a regular page pattern instead.

Core blocks are enough for many landing pages, service pages and reusable sections. If you need more ready-made layouts, detailed row and column controls, responsive settings and global styling without building those controls yourself, use Kadence Blocks Pro Add with the Gutenberg editor.

It is a better fit than a separate page builder when your site is built around blocks and you want templates, responsive controls, spacing options, dynamic content and consistent styles in the same editing workflow. Install it through Plugins → Add New → Upload Plugin, activate it, then use its blocks and templates in the Block Editor.