SLB — Section Layout Builder: Section-Based Website Builder

SLB (Section Layout Builder) is a section-based website builder for WordPress and WooCommerce. Developers describe each page section once, as a PHP template with a JSON schema in its header. SLB turns that schema into a clean full-screen editor, so editors and clients can change text, images, colors, links and products without touching code. There is no drag-and-drop clutter, no shortcodes in your content and no lock-in.

Who is SLB for?

• Agencies and freelancers who build custom WordPress and WooCommerce sites and hand them to clients.
• Theme developers who want a safe, structured editing experience instead of a free-form page builder.
• Store owners working with a developer who need to update landing pages, product sections and promotions on their own.

How it works

1. Write a PHP section template with a @section JSON schema in the comment header.
2. Define fields (text, image, select, toggle, color, URL, range, and more).
3. Editors place sections on any page through the SLB full-screen editor.
4. Your theme calls slbuild_render_page() in its page template (one line). SLB resolves the field values at render time and outputs plain server-rendered HTML — no page-builder shortcodes in the database.

Key features

• Schema-driven editor — form controls are generated from your JSON schema, no custom editor code needed.
• Instance-based data model — two instances of the same section on one page are fully independent.
• Repeatable blocks — define child blocks (e.g. feature cards, FAQ items) within a section.
• WooCommerce integration — built-in product picker, category picker, and product-grid sections.
• Conditional fields — show/hide fields based on other field values using visible_if rules.
• Named presets — multiple pre-configured starting points per section via the presets array.
• Section limits — max_per_page schema key prevents duplicate unique sections.
• Preview tokens — share a 7-day preview link with clients without giving them admin access.
• Global regions — manage header and footer layouts in one place; auto-seeded on theme activation.
• Theme settings — color palette, fonts, and shop settings saved once and applied site-wide.
• Spacing controls — per-instance margin and padding via a visual spacing box.
• Field validation — min/max length, min/max value, required — validated in the editor and on the server.
• WooCommerce wrapper notice — editor clearly flags sections that only wrap WC output.
• No lock-in — section templates are plain PHP files in your theme. Move to another setup any time.
• No build step — plain PHP, vanilla JavaScript, no Composer, no npm required for the plugin itself.

Starter sections included

Marketing: Hero, CTA Banner, Features, Stats, Testimonials, Pricing, FAQ, Video, Rich Text, Logo Bar, Steps, Sale Countdown, Trust Badges, Promo Banners.

WooCommerce: Product Grid, Product Tabs, Featured Product, Recently Viewed, Cart, Checkout, My Account, Order Confirmation.

Content: Blog Grid, Team Grid, Categories, Text + Image, Single Product.

Global: Header, Footer, Announcement Bar, Mobile Nav, Cookie Consent, Back to Top, WhatsApp Button, Theme Settings, Product Settings.

External Services

The built-in starter sections are styled by a precompiled CSS file bundled with the plugin (assets/slbuild-tailwind.css, generated from the starter sections with the Tailwind CSS tool, MIT licensed). It is a normal stylesheet: no script is loaded and no external connection is made. It is loaded only on pages that have SLB section data.

To disable Tailwind loading entirely (e.g. if your theme already bundles Tailwind), add this to your theme’s functions.php:

add_filter( 'slbuild_load_tailwind', '__return_false' );

This plugin also loads Google Fonts from fonts.googleapis.com when a font pairing is selected in the Global Settings → Theme Settings section. This is optional and only active when a font pairing is configured.

What is sent: A standard browser GET request for a CSS file with font definitions. No personal data is sent.

When it loads: Only when a font pairing other than “Default” is selected in Theme Settings.

Service information:
* Provider: Google LLC
* Service URL: https://fonts.google.com
* Privacy Policy: https://policies.google.com/privacy
* Terms of Use: https://developers.google.com/terms