Utopia includes a dedicated “Layout Settings” screen where you can adjust content width, sidebar visibility and position, and spacing across your entire site, all without writing a line of code. Separate from the “Design Settings” screen, which handles colors, heading styles, and fonts, Layout Settings governs the structural “bones” of your pages. You can reshape how your site feels without building a child theme or touching CSS.
Ten width presets, plus a custom option
The “Content Width” setting offers ten presets ranging from 640px to 1400px, along with a “100% (full width, responsive)” option. If none of the presets fit, choosing “Custom” lets you enter your own value, such as 850px, 90%, or 60rem. Whether you want a narrow, easy-to-read column for a blog or an edge-to-edge layout for a landing page, the width is yours to choose.
Set width independently for posts and pages
What sets this screen apart is that width isn’t just a single sitewide value. You can override it separately for posts and for pages, via “Post Main Column Width” and “Page Main Column Width.” Both default to “Use default (same as content width),” but either can be customized on its own. For example, you could widen your pages to work like landing pages while keeping blog posts at a narrower, more readable width, all on the same site. That flexibility is useful if you’re running service pages and a blog or news section side by side and want each to look right for its purpose.
Toggle the sidebar, and choose which side it’s on
The “Enable Sidebar” checkbox turns the sidebar on or off for blog-related pages, and when it’s enabled, “Sidebar Position” lets you place it on the right or left. That means you can run a traditional layout with a sidebar, or a simpler, wider layout without one, depending on what your site needs. If you change your mind later, switching is just a checkbox away.
Spacing presets, plus widget and sidebar colors
The “Spacing Preset” setting offers three levels — Compact, Normal, and Spacious — controlling how tight or generous the space is between sections and content blocks. A content-dense site might lean Compact, while a site aiming for a more relaxed feel might use Spacious. Beyond that, you can set background and text colors separately for widget areas (above and below content, and on the front page) and for the sidebar area. Between the structural settings and these color details, a lot of layout customization is possible from a single screen, without needing a designer or developer.
Built to work alongside Design Settings
The Design Settings screen we covered previously handles color palettes, heading styles, and fonts. Layout Settings is meant to be used together with it: use Design Settings to establish your visual identity, then use Layout Settings to fine-tune width, spacing, and sidebar structure. Combined, the two give you meaningful control over how your site looks using only what’s built into the theme.
Try it in the Layout Settings screen
Layout Settings is available right in your dashboard. Start by adjusting content width and sidebar visibility, save, and check how the change looks on your live pages. Since settings can be changed at any time, feel free to experiment until you find the layout that fits your site.
