Key takeaways
- On a block theme, design lives in Appearance > Editor. Styles set colours, type and layout for the whole site. Templates set the layout of a page type. The page itself holds only its content.
- Editing a shared template, such as WooCommerce’s Single Product template, changes every page that uses it. Find the layer and how far it reaches before you edit anything.
- When a live page stops matching the editor, regenerate the builder’s CSS first. Then clear the plugin, host or CDN and browser caches, and test in a private window. This fixes many cases but not all of them.
- Some baselines are fixed numbers: text contrast of 4.5:1 (3:1 for large text), content that reflows at 320 CSS pixels, and Cumulative Layout Shift below 0.1.
- Builders like Elementor store spacing and visibility separately for each device. Fixing desktop does not fix the phone.
A WordPress site rarely has one place where its look lives. A page’s header might come from a template, its colours from global Styles, its spacing from a page builder and its final look from whatever CSS file the cache decided to serve. That is why “just change the layout” can take five minutes on one site and an afternoon on another.
This article covers two things. First, what a good layout does for the people using it. Second, where each part of that layout is controlled on WordPress, so you can change it on purpose and fix it when it breaks. If you already know the basics of editing pages in WordPress, this is the layer underneath.
What layout and design decide on a page
Layout is order and arrangement: what appears first, what sits next to what, and what happens to that arrangement on a narrow screen. Design is the visual system on top: type, colour, spacing, imagery. Visitors feel both as one thing. Either the page answers their question quickly or it doesn’t.
Practitioners on r/marketing, r/smallbusiness and r/woocommerce give much the same advice. Make the offer clear on the first screen. Show proof, such as real photos and reviews. Keep each page focused on one next step. Design for the phone first. Cut animation and video that make people wait. That advice is consensus, not measured conversion data, and most of it is about structure and copy rather than visual polish.
Some of it can be measured. The W3C’s guidance on contrast asks for a ratio of at least 4.5:1 between text and background, or 3:1 for large text. The WCAG reflow criterion expects content to work at a width of 320 CSS pixels without scrolling in two directions, except where a two-dimensional layout is needed. Google’s Core Web Vitals treat a Cumulative Layout Shift below 0.1 as good. That metric measures how much things jump around while the page loads, so it is a layout number as much as a speed number.
One more check. Headings that only look like headings, such as bold, large paragraph text, give screen readers and search engines no structure. A page can look fine and still be broken underneath. This often happens on sites where content is pasted in from documents by several editors over the years.
Where a WordPress site’s layout actually lives
Start by finding out which kind of theme you run. WordPress.org’s documentation says the Site Editor only exists when a block theme is active. If Appearance shows an Editor item, you have a block theme. If it shows Customize instead, you have a classic theme, and design settings live in the Customizer, the theme’s own options panel or a child theme.
On a block theme, the layers look like this:
| Layer | What it controls | Where you change it | How far a change reaches |
|---|---|---|---|
| Global Styles | Colours, typography, content width, spacing defaults | Appearance > Editor > Styles | Every page |
| Templates | The layout of a page type: single post, page, product, archive, 404 | Appearance > Editor > Templates | Every page using that template |
| Template parts | Header, footer, other shared regions | Appearance > Editor > Patterns or Template parts | Every template that includes the part |
| Page content | Blocks inside one page | The page editor | That page |
| Page builder | The page’s layout, in the builder’s own data and CSS files | The builder’s editor | That page, or the builder’s global settings |
| Plugins and caches | Extra CSS, optimised or combined files, cached copies | Each plugin’s settings, your host, your CDN | Anything they touch |

WordPress.org describes the Styles panel as the place that sets the overall look and layout of a site at a global level. Change the body font there and every page changes. Change it inside one paragraph block and only that block changes, and it will ignore future global edits. Most “inconsistent design” comes from many small one-off overrides like that. Our article on why a font change is not showing walks through one common case.
Why a shared template edit changes every page
WooCommerce’s documentation is blunt about this. Editing a template changes the layout for every page, post or product that uses it. Move the price below the gallery in the Single Product template and you have moved it on every product in the store. That’s usually what you want. It isn’t what you want when you meant to change one product.
The reverse problem is just as common. Someone tries to change the header on one page, edits that page and finds no header to edit, because the header lives in a template part. Before you edit anything, ask two questions: which layer owns this element, and how many pages use that layer? Our guide to customizing a WordPress template safely covers assigning a different template to a single page.
Why the live page stops matching what you designed
Support threads on wordpress.org and Reddit point to the same few causes, roughly in this order of how often they come up. That ranking comes from how often people report each one, not from a survey, but it is the order worth checking in.
1. Stale generated CSS or a cache serving old files
Page builders write CSS to files. Elementor’s sit in /wp-content/uploads/elementor/css/, one per post plus a global file. Caching plugins, your host, a CDN and the browser can each keep serving an old copy, or a cached page can point at a CSS file that no longer exists. The result is a page that looks unstyled, half-styled or styled with last week’s design.
The fix Elementor documents, in this order:
- Take a backup.
- In wp-admin, open Elementor’s Tools screen and run Clear Files & Data (labelled Regenerate Files in older versions).
- Clear your caching plugin’s cache, then your host’s or CDN’s cache.
- Load the page in a private browser window, logged out.

The most common mistake is doing step 2 without step 3. The builder makes fresh files, but cached pages still point at the old ones. In the wordpress.org thread “Site look and feel is gone”, an OceanWP site lost its styling across every page and the host blamed the theme. A missing set of Elementor assets after a URL change turned out to be the cause, and regenerating them fixed it. The owner noted that the button was not where anyone would think to look.
Optimisation features can be the cause in their own right. One LiteSpeed Cache user reported that turning off its CSS and JS optimisation fixed their layout only for about a day. Deactivating the plugin fixed it for good, at the cost of speed. If your layout breaks after caching settings change, turn off the CSS optimisation options (combine, minify, unused CSS, critical CSS) one at a time to find the one responsible.
2. A plugin, theme or version conflict, often right after an update
If the layout broke when something updated, suspect a conflict. WooCommerce’s conflict-testing guide sets out the standard method: switch to a default theme, deactivate other plugins, then reactivate them one at a time until the problem comes back. Reactivating everything at once tells you nothing.
Doing that on the live site changes what visitors see. The Health Check & Troubleshooting plugin avoids this: its troubleshooting mode disables plugins and switches the theme for your logged-in session only. A staging copy works too. Also read the changelogs of the builder and its add-ons. A known bug that a newer version fixes beats regenerating files ten times.
3. A setting that only applies to one device
When a page is fine on desktop and broken on a phone, the cause is usually a setting that only applies on mobile. Elementor’s mobile troubleshooting guide points to margins under Advanced > Layout, which are stored separately for each device, and to visibility settings that hide elements on some screens. Fixed pixel widths are the other usual suspect: a 600px-wide box cannot fit a 390px-wide screen.
Switch the editor to the failing device view and fix that breakpoint specifically. Prefer percentage or flexible widths. Then check on a real phone. Previews are close, but not the same.

4. The change went into the wrong layer
Sometimes nothing is broken. A global style is overriding a page setting, or a page override is ignoring a global one, or a theme file is overriding the template you edited. Go back to the table above and trace which layer owns the element.
When to stop and get help
Stop when the standard steps have failed twice. In one 2026 wordpress.org thread, an Elementor and LiteSpeed site on Hostinger kept returning 404 errors for CSS files. The breakage moved from page to page through repeated purges and regenerations. Cases like that need someone who can read server logs, check file permissions on the uploads folder and compare plugin versions.
Error messages tell you which direction to look. “Preview Could Not Be Loaded” is an Elementor editor problem. A 500 error is a server or PHP problem, not a spacing problem. “Broken theme and/or stylesheets missing” means the theme upload or install went wrong. A 404 on a post-1234.css file means a generated CSS file is missing.
How to keep a layout consistent as the site grows
Sites drift. New editors paste content, campaigns add one-off sections, plugins add their own buttons in their own colours. Three habits slow this down.
Change the global setting first. If every button needs to be darker, change the button style in Styles or the theme’s settings, then remove the one-off overrides that now look wrong. Don’t fix forty pages one at a time.
Build repeated sections once. A pricing row, a call to action or an FAQ block that appears on many pages belongs in a synced pattern or template part. Then one edit updates every copy. It takes longer the first time and saves time every time after that.
Check structure, not just looks. A short review every quarter catches most drift: real headings in order, contrast on new colours, forms usable on a phone, nothing jumping as the page loads.
The bigger decision is whether to refine or redesign. Refine when the theme supports your content, URLs work and the problems are hierarchy, spacing, mobile behaviour or tired images. A rebuild is worth its cost and risk when the theme stops you doing the job, templates have become impossible to maintain or the builder’s output is too heavy to fix. Our article on theme customization that survives updates covers the middle ground.
What changes when an agent makes the layout edit
Most layout work is small: a darker button, tighter mobile spacing, a section moved above another. The process around it is not. You find the right layer, check how many pages it affects, make the change, clear the caches and confirm it on the live page. With an agent, you describe the outcome and the agent does those steps.
Example request: “On the Services page the contact button sits below a huge image on phones. Move the button above the image on mobile and make the button colour match the one on the homepage.”
On a block-theme site, SiteSelf would work out whether the button and image sit in the page content or in a template. It would say what is about to change and whether that change can be undone. If the colour lives in global Styles, it would say that changing it there affects every button, and offer to apply it to that page only. After the change it fetches the live page, checks that the new order and colour are in what is served, and reports in chat what changed. The work is recorded.
Access depends on where the change lives. Content, template and Styles work runs through the SiteSelf Connector plugin from the WordPress.org directory. Edits to theme files, child-theme CSS or anything on the server need hosting (SSH) access.
There are limits. Pages owned by Elementor, Divi or Beaver Builder are refused at the moment of work, with the reason, so builder pages stay with the builder. The check is a fetch of the page and a plain-language report, not a screenshot or a test on real devices, so look at the page on your own phone too. Nothing runs on a schedule: the agent works when you ask. The page on website edits through chat shows what this kind of request covers. Larger visual work, such as new typography or brand colours across the theme, is covered under design changes on your existing site.
Frequently asked questions
Do I need a theme if I use a page builder?
Yes. The theme still controls the templates and global styles around the builder’s content, such as the header, footer, archives and default fonts. Its CSS can also clash with the builder’s. That is why Elementor’s conflict tests use its minimal Hello theme or a default WordPress theme.
Is the block editor or a page builder better for layout?
It depends on who maintains the site and how complex the layouts are. Published benchmarks from 2023 onward generally show block editor pages lighter than Elementor pages, but setups vary and no single ranking holds. If you have no builder yet, see how far the Site Editor and patterns get you first.
Why does my site look different when I’m logged in?
Many caching setups skip the cache for logged-in users. You see the current version while visitors get an older cached copy. Always check changes in a private window while logged out.
Can I change my layout without touching code?
On a block theme, mostly yes. Styles, templates, template parts and patterns are all edited visually in Appearance > Editor. Classic themes depend on what the Customizer and theme options expose. Anything beyond that means a child theme and some CSS or PHP.
How do I hide something on mobile without hurting the page?
Hide decoration, not substance. Content that matters on desktop, like prices, contact details and key text, should still be there on a phone. Search engines index the mobile version, and visitors on phones need the same answers.


















