How to build a WordPress website visually

List the pages you need before opening the editor. A small business site normally starts with Home, About, Services, Blog and Contact. Decide which page will be the homepage and which page, if any, will display your posts.

Prepare your logo, brand colours, fonts, photographs and calls to action. This prevents you from building a layout around temporary content that later changes its height and spacing.

For the built-in visual route, install and activate a block theme, then go to Appearance > Editor. The Site Editor can change the header, footer, templates, navigation and global styles with blocks. It is only available when a block theme is active.

If your theme is a classic theme, use Appearance > Customize for the controls that theme provides, and edit individual pages with the block editor. This route is genuinely fine for a simple site, but the available layout and typography controls vary by theme, and you may not be able to redesign every site area visually.

Create each page under Pages, add a title, then insert blocks such as Group, Columns, Heading, Paragraph, Image, Buttons, Gallery and Query Loop. Use a Group block to keep related content together and set a consistent content width instead of adding empty paragraphs for spacing.

Open the inserter and check the Patterns tab for ready-made sections. An unsynced pattern is useful when you want a starting layout that can be edited separately on each page.

In Appearance > Editor, open Styles and set the site-wide colour palette, typography, layout width and spacing. You can also set the default appearance of individual block types, which keeps headings, buttons and other repeated elements consistent across the site.

Edit the Header template part to add your Site Logo, Site Title and Navigation block. Add the main pages to the navigation, create submenus where needed, and check the Navigation block’s responsive menu behaviour on smaller screens.

Use Templates when you want to change the structure shared by a page type, such as all pages, blog posts or archive pages. Use the page editor when you only want to change one page. A template change affects every page or post using that template, so editing the wrong one can alter the whole site.

Before changing a template, check its name and purpose in the editor sidebar. If a single page needs a different structure, create or assign a custom template rather than removing blocks from the shared Pages or Single Posts template.

Use the editor’s View menu to check desktop, tablet and mobile widths, then open the front end in a new tab. Check the actual site rather than trusting the editor canvas alone, especially for navigation, fonts, image crops, buttons and sections with large spacing.

• Check every menu link and form.
• Test the layout on a real phone.
• Confirm headings follow a logical order.
• Optimise oversized images before launch.

If saved changes appear in the editor but not to logged-out visitors, purge the browser, WordPress, hosting and CDN caches before changing the design again. Caching is a recurring cause of this problem in WordPress support threads.

If the built-in editor is too restrictive or you want to assemble a complete site visually in one interface, install a page builder such as Breakdance. Upload its plugin ZIP through Plugins > Add New > Upload Plugin, activate it, and follow its setup screen.

Choose a template or start with a blank page, add sections and elements by dragging them into place, set global colours and fonts, then adjust the desktop, tablet and mobile views before publishing. Keep one system responsible for the layout: mixing a page builder with extensive theme-template edits can make it unclear which editor controls a header, footer or page section.