WordVibe Studio Docs

Everything you need to build faster with the AI-powered visual editor for WordPress. From installation to advanced section workflows — we’ve got you covered.

Get started
Overview

Getting Started

WordVibe Studio is a visual, AI-native page builder for WordPress. You design complete layouts by composing sections — each is a self-contained block of content and styling. The assistant generates production-ready HTML from natural language prompts, and you can edit every element directly in your WordPress admin.

Core concepts

  • Sections — independent layout blocks with unique IDs
  • AI generator — create sections from short text prompts
  • Brands — reusable color, font, and spacing presets
  • Inline editing — click any text or image to change it

Requirements

  • WordPress 6.0+ (self-hosted)
  • PHP 8.0+
  • Modern browser (Chrome, Firefox, Edge, Safari)
  • Active internet connection for AI features
Setup

Installation

From the WordPress repo

  1. Go to Plugins → Add New in your admin
  2. Search for “WordVibe Studio”
  3. Click Install Now → Activate

Manual upload

  1. Download the .zip from your WordVibe account
  2. Go to Plugins → Add New → Upload Plugin
  3. Choose the .zip file, click Install Now, then Activate

After activation, you’ll see a “WordVibe” menu item in your admin sidebar. Click it to open the editor.

AI Features

Using the AI Page Generator

Describe the page you want in plain English, and WordVibe Studio will generate a complete set of sections instantly.

Generate a page

  1. Open the WordVibe editor from the admin menu
  2. Click “Generate with AI”
  3. Type a prompt like: “Landing page for a SaaS tool — hero with CTA, feature grid, testimonials, pricing, footer”
  4. Press Enter — sections appear within seconds

Refine a section

  • Hover any section and click “Edit prompt”
  • Rewrite your instruction to change style, content, or layout
  • The section updates in place — no full page regeneration needed
Workflow

Editing Sections

Every section in WordVibe Studio is fully editable. After generation, you can modify content, styling, and behavior without touching code.

Inline content editing

  • Double-click any heading, paragraph, or button text
  • Type your new copy — changes save automatically
  • Drag and drop images to replace them

Style & layout controls

  • Use the right-hand panel to tweak colors, fonts, spacing
  • Adjust responsive breakpoints per section
  • Duplicate, reorder, or delete sections via the toolbar
Brands

Managing Brands

Brand presets let you define a consistent look across all pages. Each brand stores colors, font pairings, spacing scale, and border radius preferences.

Create / edit a brand

  1. Navigate to WordVibe → Brands
  2. Click “Add New Brand”
  3. Set primary, secondary, and accent colors
  4. Choose heading and body fonts from the Google Fonts library
  5. Define spacing scale (tight / normal / relaxed)

Apply a brand

  • While editing a page, open the “Brand” dropdown in the top bar
  • Select any saved brand — the page updates instantly
  • You can override individual section styles without affecting the brand
Help

Frequently Asked Questions

Can I use WordVibe Studio with any WordPress theme?
Yes. WordVibe Studio outputs clean HTML that works independently of your theme. We recommend a lightweight theme like Twenty Twenty-Four or GeneratePress for best performance.
Do I need coding skills to build a page?
Not at all. The AI generator builds sections from natural language prompts, and all editing is visual. CSS and HTML knowledge are optional — but power users can access the source if they wish.
Where are my brand presets stored?
Brands are stored as custom post types in your WordPress database. They are exportable via the standard WordPress export tool and safe to sync across staging / production environments.
Can I add custom CSS to a section?
Yes. Open the section settings and look for the “Custom CSS” tab. You can write per-section CSS or target the section’s data-wpb-id attribute for fine-grained control.
Does the AI generator support multiple languages?
The editor interface and default output are in English. You can write prompts in other languages, and the AI will attempt to generate copy accordingly — but quality may vary.

© 2026 WordVibe. All rights reserved.