Customising Your Pages with Spectra

Once your AI Starter Site is live, you’ll likely want to tailor the content to better reflect your project or business. You might already have customised your global styles (like colours, fonts, header layout, etc.) using the Astra Customiser. But when it comes to editing the individual pages of your website—the actual content your visitors will read and interact with—that's where Spectra comes in.

Spectra is a powerful, intuitive page builder that works right inside the WordPress editor. It gives you extra design control, more creative blocks, and a straightforward visual editing experience without the need to write code.

What is Spectra?

Spectra is an extension of WordPress's block editor. It enhances the native experience with a library of beautiful pre-built layouts, advanced styling controls, and powerful design blocks—think sliders, tabs, testimonials, pricing tables, and more.

Everything built by the AI is created using Spectra blocks, which means every page is fully editable and customisable.

Editing a Page with Spectra

To start editing any of your pages:

1. Go to your WordPress dashboard
2. Click on Pages in the sidebar
3. Hover over the page you want to edit and click Edit

You’ll now see the block editor. Each section—your hero area, about section, services, testimonials—is built with Spectra blocks.

Click on any element to select it. The right sidebar will show all the styling options: spacing, background, border, shadows, animations—you name it.

Don’t See the Header or Footer?

If you're wondering where the menu or footer went while you're editing, don’t worry. The WordPress editor only shows the content area of the page. Your header and footer (which are managed by the Astra theme) will appear as normal on the published site.

Use the Preview button to view the full page with all global elements included.

Creating a New Page

Want to add more pages to your site? Here's how:

1. In your dashboard, go to Pages > Add New
2. Give your page a title
3. Click the blue "Design Library" button at the top of the editor

This is where Spectra really shines: it gives you access to a huge collection of ready-made content blocks, page sections, and even full page layouts that you can drop right into your site with a click.

You’ll see tabs for:

• Patterns – individual pre-styled sections like hero areas, testimonials, service grids, etc. You can even create your own reusable patterns (see below).
• Pages – complete single-page layouts, great if you need to add new pages.
• Kits – full website kits grouped by industry or style. You’re less likely to need these as we’ve already built most of the pages for you.

Use the sidebar to filter by type (e.g. About, Features, Contact) or browse them all, then click Insert to add it directly to your page

You can also switch between colour styles at the bottom left to see how the layouts look with different variations on your existing colour palette. This means that you can mix and match different layouts but maintain a cohesive theme.

These blocks are fully editable once inserted—text, images, layout, everything. It’s a great way to build out a page quickly and stay consistent with your site’s design.

Can I Duplicate an Existing Page?

Not natively. WordPress doesn’t include a page duplication feature out of the box.

If you want to recreate an existing page layout, you have a couple of options:

• Manually re-create it using the same Spectra blocks
• Install a plugin like Duplicate Page.
• Save key sections as Spectra Patterns (Reusable Blocks) so you can use them across different pages (see below).

Responsive Editing

Want to see how your site looks on mobile or tablet?

Spectra lets you toggle between views (desktop/tablet/mobile) using the device icons at the top right of the editor:

You can even adjust certain settings specifically for mobile devices, like font sizes, padding, and element visibility, or use Responsive Conditions so you can hide or show blocks for specified devices.

This is also where you can preview your website, complete with its full header and footer, before saving your changes. Just press Preview in New Tab.

Helpful Beginner Tips

🎛️ Block Settings Are in the Sidebar

A lot of people new to Spectra expect to edit everything directly in the block—but many of Spectra’s customisation options (like spacing, animation, shadows, and visibility) live in the right-hand sidebar.

Make sure the block tab is selected (not the page tab), then click any block and explore the General, Style, and Advanced panels.

✨ Create Your Own Spectra Patterns (Reusable Blocks)

Creating beautifully styled sections—like contact details, testimonials, or calls to action—takes time. Spectra Patterns let you save any block or group of blocks so you can reuse them anywhere on your site.

They’re perfect for keeping your design consistent across pages, and they’ll save you loads of time. Just create it once, save it as a Pattern, and insert it again whenever you need it.

Need help creating your first Pattern? Spectra’s official guide walks you through the steps.

📅 Don’t Forget to Save

Once you've made your edits, click the blue Save button in the top-right corner to apply them.

To see your page with the full header, footer, and styling, click View Page — this will open your published site in a new tab, so you can check how it all looks live.

🔄 Undo & Revisions

You can undo changes with Ctrl+Z (or Cmd+Z on Mac), but also remember: WordPress saves page revisions, so if you make a mistake and save over something, you can go to Pages > Revisions to restore an earlier version.

🧩 You Can Nest Blocks

Spectra Container blocks let you group other blocks together. This is helpful if you want to apply spacing, background colour, or animation to multiple elements at once (by applying it on the containing element).

🖼️ Background Images Go on Containers

If you want to add a background image to a full section of your page—like a hero banner or service area—you’ll need to apply it to the Container block, not the text, heading, or image inside it.

To apply a background image across the whole section:

1. Click near the edge of the section, or use the List View within Document Overview (left side of Spectra menu, just next to the Design Library) to select the parent Container block
2. Once selected, in the right-hand sidebar, switch to the Style tab
3. Under Background, choose Image and upload/select your image
4. Adjust position, size, and overlay if needed
   
   

Trying to apply a background to a heading or paragraph won’t work the same way—it needs to go on the container that holds those blocks.

🤖 Spectra AI – Built-In Help, When You Need It

Spectra AI is an optional assistant that lives right inside your WordPress editor. It’s designed to make content creation, editing, and even light coding faster and easier—especially for those moments when you’re not quite sure what to write or how to tweak something.

Here’s what it can help you do:

• ✍️ Write or improve your website copy – From headlines to full paragraphs, Spectra AI can help you craft better content.
• 🔍 Fix spelling and grammar – Get quick suggestions to clean up your writing.
• 🌍 Translate your text – Easily reach a wider audience by translating content into different languages.
• 💻 Generate basic HTML or CSS – Need a little custom styling? Spectra AI can help with that too.

You’ll get 1,000 free AI credits per month just for signing up—no cost, no commitment. If you want more, paid plans are available through Spectra directly.

You can enable Spectra AI from within your editor—look for the ✨ icon when editing content blocks.

🔗 Learn more about Spectra AI →

⚙️ Want More Control?

Spectra has a lot of hidden depth. For more advanced options, check out Spectra's official documentation for tips on animations, block-by-block walk-throughs and more.

Spectra is where your words, images, and structure come together—and it makes editing feel more like building with Lego than wrestling with a CMS. Whether you’re rewriting your hero copy, adding a services section, or tweaking a testimonial, you’ll find Spectra both powerful and beginner-friendly.

For more on styling your site globally (fonts, colours, layouts), head back to our Astra Customisation Guide.