VisuCode AI — Complete Guide

# Requirements

Before installing VisuCode AI, confirm your environment meets these requirements:

# Installation

Method 1: WordPress Admin (Recommended)

1. In your WordPress admin, go to Plugins → Add New Plugin.
2. Search for VisuCode AI in the search box.
3. Click Install Now, then Activate.
4. Go to Settings → Permalinks and click Save Changes to flush rewrite rules.

Method 2: Manual ZIP Upload

1. Download the ZIP file from WordPress.org or the direct link.
2. In your WordPress admin, go to Plugins → Add New Plugin → Upload Plugin.
3. Choose the downloaded visucode-ai.1.2.0.zip file and click Install Now.
4. Activate the plugin and flush Permalinks as in step 4 above.

Method 3: FTP / Server Upload

Extract the ZIP and upload the visucode-ai folder to /wp-content/plugins/. Then activate it via the WordPress admin.

# First Steps

After activation, a new VisuCode item appears in the WordPress admin sidebar. Here is the recommended workflow for new users:

1. Navigate to VisuCode → Dashboard to see the overview.
2. Click Add New Page to open the editor for a blank page.
3. Give the page a title in the Page Settings metabox on the right.
4. Optionally, import existing HTML using the Import Content panel.
5. Start dragging blocks from the right panel onto the canvas, or edit your imported content directly.
6. Click the Save button (floppy disk icon in the toolbar) to save your work.
7. Set the page to Published in the Publish metabox and click Publish.

# Editor Overview

The VisuCode AI editor is powered by GrapesJS and is embedded directly inside the WordPress post editor. It consists of four main areas:

# Canvas & Blocks

The canvas is where you build your page. Every element on the canvas is a component. Components can be:

• Selected – Click any element on the canvas to select it. A highlighted blue border and a contextual toolbar appear.
• Moved – Drag the move handle that appears above a selected component to reposition it.
• Copied / Duplicated – Use the copy icon in the component toolbar.
• Deleted – Press Backspace / Delete or use the delete icon in the component toolbar.
• Nested – Drop blocks inside container components (columns, sections, etc.) to create hierarchical layouts.

Available Blocks

Component Code Editor

Need more control? You can edit the underlying HTML & CSS directly. Click on the code icon (</>) in the contextual toolbar when a component is selected. This opens the Component Code Editor directly within GrapesJS, allowing real-time, live-preview code editing.

# Style Manager

The Style Manager lets you visually apply CSS to any selected component without writing code. Select a component and open the Style Manager (paint icon) in the left sidebar.

• General – Display type, overflow, opacity, and cursor.
• Dimension – Width, height, padding, and margin.
• Typography – Font family, size, weight, line-height, letter-spacing, color, and text alignment.
• Decorations – Background color/image, border, border-radius, and box-shadow.
• Extra – Custom CSS properties not covered by the built-in panels.

CSS classes added in the Style Manager are scoped to the component. You can also add, rename, or remove classes using the class manager input above the Style Manager panels.

# Responsive Design

Use the device switcher buttons in the top-left of the editor toolbar to preview your page in different viewports:

• Desktop (🖥) – Full-width canvas. Default editing mode.
• Tablet (📱) – 768px viewport preview.
• Mobile (📱) – 320px viewport preview.

Style changes made in a smaller viewport are applied via CSS media queries and only affect that breakpoint — your desktop layout is preserved.

# Import & Export

Importing Content

The Import Content metabox (above the editor) accepts HTML, CSS, and JavaScript code. Choose the content type (HTML/CSS/JS, CSS only, or JS only) and paste your code. Enable "Import images locally" to have VisuCode automatically download remote image URLs and save them to your WordPress Media Library.

Full Project ZIP Import (v1.2.0+)

You can now upload a completely configured ZIP file generated by AI tools such as Bolt, Cursor, ChatGPT, or Claude. VisuCode will automatically parse multiple HTML pages, CSS files, and scripts, sideloading any required assets (images or videos) directly into your WordPress Media Library, creating a beautifully linked, editable project.

Exporting a Project

Click the download icon in the editor toolbar to export the current page as a ZIP archive containing separate index.html, style.css, and assets. This is powered by the grapesjs-plugin-export library.

# Focus Mode

Click Enter Focus Mode in the editor header to collapse the WordPress admin sidebars and metaboxes, giving you a wider, distraction-free editing area. The WordPress toolbar fades to a low opacity.

Click Exit Focus Mode (same button, now in the top-left of the editor) to restore the normal layout with a smooth animated transition.

# AI Assistant — Overview & Setup

The AI Assistant is accessible from the AI Assistant metabox in the right sidebar of the editor. It provides four on-demand optimization tools, each powered by the OpenAI API.

Setting Up Your API Key

1. Get an API key at platform.openai.com/api-keys.
2. In WordPress, go to VisuCode → Settings.
3. Paste your key into the OpenAI API Key field and save.

# SEO Optimizer

Click "Optimize for SEO" in the AI Assistant panel. The AI will analyze your current page HTML and perform the following improvements:

• Add or improve <title> and <meta name="description"> tags.
• Restructure heading hierarchy (ensuring a single <h1>, logical <h2>–<h6> order).
• Improve keyword placement and content density based on existing text.
• Add semantic HTML5 elements (<main>, <article>, <section>) where appropriate.

The changes are applied to the canvas. Review and undo (Ctrl/⌘ + Z) any changes you don't want to keep.

# Accessibility Check

Click "Accessibility Check" to have the AI audit and improve your page for WCAG compliance:

• Adds missing alt attributes to images based on context.
• Adds ARIA labels to interactive elements (buttons, links, forms).
• Flags and fixes low color contrast issues where possible.
• Ensures all form controls have associated <label> elements.
• Adds role attributes to landmark regions.

# Clean Code Structure

Click "Clean Code Structure" to refactor messy or imported HTML into well-organized, semantic markup:

• Removes inline styles where equivalent CSS classes can be used.
• Consolidates redundant wrapper <div> elements.
• Replaces non-semantic elements with appropriate HTML5 equivalents.
• Formats the HTML for readability.

# Translator

Select a target language from the language dropdown next to the "Translate" button, then click Translate. The AI will translate all visible text content on the page while preserving the HTML structure, CSS classes, and layout intact.

# Projects

Projects are a custom WordPress taxonomy that acts like a folder system for your VisuCode pages. They help you organize pages by client, campaign, or any other grouping.

Creating a Project

1. Go to VisuCode → Projects.
2. Enter a Name, optional Slug, and optional Description.
3. Click Add New Project.

Assigning a Page to a Project

When editing a page, find the Projects metabox in the right sidebar. Check the project(s) you want to assign this page to. A page can belong to multiple projects.

# Gutenberg Block — VisuCode Content

The VisuCode Content block lets you embed any VisuCode page inside a regular WordPress post, page, or custom post type — right inside the Gutenberg block editor.

How to Use It

1. Open any WordPress post or page in the Gutenberg editor.
2. Click the + button to open the block inserter and search for VisuCode.
3. Click VisuCode Content to add the block.
4. In the block settings (right sidebar), select the VisuCode page you want to embed from the dropdown.
5. The page content renders inline — no iframe, no external request.

Render Mode

Each VisuCode page has a Render Mode setting in its Page Settings panel:

• Canvas (Full Page / Themeless) – Renders only the VisuCode HTML/CSS, suppressing theme styles. Best for full landing pages.
• Theme (Header/Footer) – Renders within the active WordPress theme. The VisuCode content appears between the theme's header and footer.

# Page Settings

The Page Settings metabox (right sidebar of the editor) contains per-page configuration:

# Permalink Slug

By default, VisuCode pages are accessible at /visucode-page/my-page-slug/. You can change the visucode-page prefix to any value:

1. Go to Settings → Permalinks in your WordPress admin.
2. Scroll to the bottom to find the VisuCode section.
3. Enter your desired slug (e.g., lp for /lp/my-page/).
4. Click Save Changes.

# Native Homepage Support

Starting from v1.2.0, you can set any VisuCode page as the front page of your WordPress site:

1. In your WordPress admin, go to Settings → Reading.
2. Under "Your homepage displays", select A static page.
3. From the Homepage dropdown, choose your published VisuCode AI page.
4. Click Save Changes.

# WordPress Shortcode Support

VisuCode AI includes native support for rendering WordPress shortcodes directly inside your visual designs.

1. Drag the Shortcode block from the blocks panel onto your canvas.
2. Select the block and go to the Settings (gear icon) panel on the right.
3. Enter your shortcode into the field provided (e.g., [contact-form-7 id="123"]).
4. The shortcode will render securely within the editor, giving you an accurate preview of the final page.

# Plugin Settings

Go to VisuCode → Settings to access all global plugin options.

# Uninstalling Safely

By default, deactivating and deleting VisuCode AI from the Plugins screen does not delete your data. Your pages, projects, and settings are preserved in the database.

If you want a clean uninstall that removes all plugin data:

1. Go to VisuCode → Settings → Danger Zone.
2. Enable the toggle "Clear Data on Uninstall".
3. Save the settings.
4. Go to Plugins and click Deactivate, then Delete.

# FAQ

# Changelog