Astra Pro + Spectra Pro: Complete WordPress Site Building Guide (2026)

By /

Why Astra + Spectra Pro?

If you’re building WordPress sites professionally, the Astra theme + Spectra Pro combination gives you a page-builder experience without the bloat. Astra runs under 50KB on the frontend with zero jQuery dependency. Spectra Pro adds 30+ Gutenberg blocks with advanced layouts, animations, and dynamic content — all native to the block editor.

This guide covers everything we’ve learned from building and managing 100+ WordPress sites with this stack.

Astra Theme: The Right Way to Configure Pages

Content Layouts (Critical Decision)

Astra offers four content layouts per page. Choosing the right one determines whether your content flows edge-to-edge or gets boxed in:

  • Page Builder — Removes ALL container wrappers. Content goes completely edge-to-edge. Use for landing pages, homepages, and any page with full-width hero sections. This is the one you want for most marketing sites.
  • Full Width — Container spans 100% but still wraps content in .ast-container with padding. Content respects the theme’s max-width setting.
  • Plain Container — Standard boxed layout at 1200px max-width.
  • Boxed Container — Similar to plain but with visible background box.

Pro tip: Set your homepage and key landing pages to Page Builder layout via Astra Settings in the page editor sidebar. This eliminates the need for CSS hacks to force full-width sections.

Setting Page Layout via REST API

For remote management (or automation with OpenClaw), set the layout via post meta:

POST /wp-json/wp/v2/pages/{id}
{
  "meta": {
    "site-content-layout": "page-builder",
    "site-sidebar-layout": "no-sidebar",
    "theme-transparent-header-meta": "disabled"
  }
}

Header Builder

Astra Pro’s Header Builder is a visual drag-and-drop interface at Appearance → Customize → Header Builder:

  • Desktop header: Set height 70-80px, add logo (left), primary menu (center/right), CTA button (right)
  • Sticky header: Enable “Shrink on scroll” for a polished effect
  • Transparent header: Only use on pages with dark hero backgrounds. Set per-page in Astra Settings. If a page has a light background, disable it — otherwise menu text goes invisible.
  • Mega menu: Enable in Header Builder, then check “Enable Mega Menu” on individual menu items

Common mistake: Enabling transparent header globally then having invisible menus on light-background pages. Always set transparent header per page based on the hero background color.

Spectra Pro: Building with Blocks

The Container Block

The uagb/container block is Spectra’s most important block. It replaces columns for most layouts and handles backgrounds, spacing, borders, and responsive design in a single wrapper.

Key attributes in the block’s JSON:

{
  "layout": "boxed",
  "contentWidth": "1200",
  "align": "full",
  "backgroundType": "gradient",
  "backgroundGradient": "linear-gradient(135deg, #1F0A0C 0%, #2A1014 100%)"
}

Block Serialization: How WordPress Stores Your Content

WordPress stores blocks as HTML with comment delimiters:

<!-- wp:uagb/container {"layout":"boxed","align":"full"} -->
<div class="wp-block-uagb-container">
  <!-- wp:uagb/advanced-heading {"headingTag":"h2"} -->
  <h2 class="uagb-heading-text">My Heading</h2>
  <!-- /wp:uagb/advanced-heading -->
</div>
<!-- /wp:uagb/container -->

The #1 rule: Always use content.raw (not content.rendered) when reading or writing page content via the REST API. Writing rendered HTML back destroys all block settings.

Full-Width Hero Sections

The correct approach — no CSS hacks needed:

  1. Set page to Page Builder layout
  2. Disable sidebar
  3. Use a Cover Block or Group Block with align="full"

Block markup for a dark hero:

<!-- wp:cover {"dimRatio":50,"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"100px"}}}} -->
<div class="wp-block-cover alignfull" style="padding-top:100px;padding-bottom:100px">
  <span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"textAlign":"center","textColor":"white"} -->
    <h2 class="has-text-align-center has-white-color">Your Headline</h2>
    <!-- /wp:heading -->
  </div>
</div>
<!-- /wp:cover -->

Custom CSS: The wpautop Trap

The Problem

When you put <style> blocks directly in page content, WordPress’s wpautop filter injects paragraph tags (</p><p>) inside your CSS. This silently breaks selectors and declarations.

The Fix

Always wrap custom CSS and JavaScript in Gutenberg HTML blocks:

<!-- wp:html -->
<style>
.my-custom-class { color: red; }
</style>
<!-- /wp:html -->

The <!-- wp:html --> block outputs content verbatim — wpautop is completely bypassed.

Even better: Put site-wide custom CSS in Appearance → Customize → Additional CSS instead of inside individual pages. Reserve inline styles for page-specific overrides only.

Complete Spectra Pro Block Reference

Block ID Use For
Container uagb/container Layout wrapper with backgrounds, spacing, borders
Advanced Heading uagb/advanced-heading Headings with tag control, separator, description
Buttons uagb/buttons Multi-button with icon support
Info Box uagb/info-box Feature card with icon, title, description, CTA
Call to Action uagb/call-to-action CTA section with heading, description, buttons
FAQ uagb/faq FAQ accordion
Testimonial uagb/testimonial Testimonial card with quote
Post Grid uagb/post-grid Blog post grid display
Pricing Table uagb/pricing-table Pricing comparison (Pro)
Forms uagb/forms Contact/registration forms (Pro)
Popup Builder — Popups with exit intent triggers (Pro)
Loop Builder — Query loop for posts/products (Pro)

AAWS Plugin Skills for OpenClaw

At All About Web Services, we’ve packaged deep expertise on 8 key WordPress plugins as OpenClaw skills — giving your AI assistant expert-level knowledge on each:

  • Astra Pro — Theme configuration, header builder, layouts, transparent headers
  • Spectra Pro — Block-based site building, container layouts, responsive design
  • LiteSpeed Cache — Server-level caching, SPC configuration, purge strategies
  • SureRank Pro — On-page SEO, schema markup, content analysis
  • SEOPress Pro — SEO optimization, sitemaps, redirects, WooCommerce SEO
  • SureForms Business — Form building, validation, integrations
  • SureCart — E-commerce, checkout, subscriptions
  • OttoKit — Workflow automation, integrations, triggers

These skills auto-update weekly with new features from plugin docs, WordPress.org changelogs, and YouTube tutorials. Install them from hub.openclaw911.com.

Quick Setup Checklist for New Sites

  1. Install Astra + Astra Pro + Spectra Pro + Starter Templates
  2. Import closest matching starter template
  3. Replace logo, colors, fonts in Customizer
  4. Build custom header: logo + menu + CTA button (use Header Builder)
  5. Build 3-4 column footer (use Footer Builder)
  6. Set homepage to Page Builder layout + No Sidebar
  7. Build full-width hero with Cover Block (align="full")
  8. Add page-specific overrides via Astra Settings sidebar
  9. Install LiteSpeed Cache, configure server-level caching
  10. Set up SEO with SureRank Pro or SEOPress Pro
  11. Clear all caches and verify mobile + desktop

Troubleshooting Common Issues

Hero section not full-width

Check: Is the page set to Page Builder layout? If using Full Width, the .ast-container will still constrain content. Switch to Page Builder.

Menu text invisible on some pages

Check: Is transparent header enabled on pages with light backgrounds? Either disable transparent header or ensure the page has a dark hero.

Custom CSS not working

Check: Is your <style> block wrapped in <!-- wp:html -->...<!-- /wp:html -->? If not, wpautop is corrupting it.

Changes not showing up

Purge LiteSpeed cache: POST /wp-json/spc/v1/cache/purge. Also check browser cache (hard refresh with Ctrl+Shift+R).

Updated May 2026 by the AAWS team. We manage 100+ WordPress sites with this stack — get in touch if you need help with yours.

Related Posts

Scroll to Top