Complete operating guide

SimplyCod Studio Manual

From installing the plugin to configuring the website, creating pages, customizing layouts, and publishing WordPress content.

Plugin: SimplyCod Studio Version covered: 0.22.0 Website: www.simplycod.com Developer: Techpaolo by Paolo Zappatore Audience: end users, administrators, and web agencies

Overview

SimplyCod Studio is a visual page builder for WordPress. It lets you build pages directly on WordPress content by organizing them into sections, columns, and components. The plugin also includes the neutral Studio Canvas template, a global design system, visual header and footer editors, reusable layouts, and several starter kits.

Direct pagesEvery WordPress page can be opened with “Edit with SimplyCod Studio”.

Visual structureOne to three-column sections, draggable components, and responsive previews.

Global designColors, typography, widths, buttons, header, and footer remain coordinated.

Professional workflowReusable layouts and client mode help separate content editing from structure.

What is included

Visual editor with drag, duplicate, ordering, undo, and redo.
Base and General components, available without credits.
Global header and footer that can be built visually.
Personal, Professional, Startup, Sport, Tech, and Energy starter kits.
Language files in the isolated languages folder.
Studio Canvas template supplied by the plugin.

Artificial intelligence featuresThe version described in this manual does not yet include AI generation or paid credits. The builder structure is ready to support them in a later phase.

Installation

Installation from the WordPress dashboard

Log in as administrator

Open the WordPress dashboard with an account allowed to install and activate plugins.

Open Plugins > Add New

Select the Upload plugin button at the top of the page.

Select the ZIP file

Upload ai-site-builder.zip without extracting it and press Install now.

Activate the plugin

When installation finishes, press Activate plugin. The SimplyCod Studio menu will appear.

Installation via FTP or file manager

Extract the ZIP locally only if you need to upload it through FTP.
Upload the plugin folder into wp-content/plugins/.
Open Plugins > Installed Plugins and activate SimplyCod Studio.

If WordPress reports “The plugin does not have a valid header”The ZIP usually contains an extra folder or was recreated incorrectly. Use the verified original package and make sure ai-site-builder.php is directly inside the first plugin folder.

Post-activation check

The admin menu shows SimplyCod Studio.
The Pages list shows the Edit with SimplyCod Studio action.
The global design system opens without errors.

Initial configuration

Before building pages, configure the global design system. This keeps colors, typography, buttons, header, footer, and page widths consistent throughout the site.

Design system

Open SimplyCod Studio > Design System.

Area	What to set	Why it matters
Colors	Primary, secondary, accent, text, and backgrounds.	Components can follow the global palette automatically.
Typography	Base font, headings, sizes, and weights.	Pages remain visually coherent.
Buttons	Default style, hover state, radius, and spacing.	Calls to action keep the same visual language.
Layout	Container width and page spacing.	Desktop and mobile layouts are easier to control.

For web agenciesDefine the design system before delivering the website. Buttons set to “Global” will keep following these rules, while custom colors applied to a single component remain independent.

Studio Canvas and WordPress theme

Studio Canvas is the template supplied by SimplyCod Studio. It provides a clean base where the plugin can render pages, global header, and footer without relying on heavy theme layouts.

Starter kits

Open SimplyCod Studio > Starter Kit. Each kit creates published pages, a dedicated menu, sets a static Home page, and applies its own global design, header, and footer.

Personal

Portfolio for creatives and professionals. Creates Home, About, and Contact.

Professional

Corporate consulting and services. Creates Home, About, Services, and Contact.

Startup

SaaS and technology. Creates Home, About, Features, and Contact.

Sport

Gyms and trainers. Creates Home, Courses, Trainers, and Contact.

Tech

IT services. Creates Home, About, Services, and Contact.

Energy

Renewable energy. Creates Home, Company, Solutions, and Contact.

Installing a kit

Choose the kit

Read the included pages and style, then press Install [name].

Confirm the operation

The confirmation explains that pages will be created and global settings applied.

Check the pages

Open Pages > All Pages and verify the new pages.

Customize content and menu

Open each page in the builder and replace texts, images, contact details, and demo links.

Effect on global settingsInstalling a new kit does not delete pages from previous kits, but the latest installed kit becomes the active design. It changes global colors, header, footer, selected menu, and Home page. Back up the site if you are working on an already configured project.

Duplicate protectionThe same kit cannot be installed twice. The check uses an internal identifier and does not depend on page titles or slugs.

Importing an external starter kit

Get a ZIP package declared compatible with SimplyCod Starter Kit v1.
Open SimplyCod Studio > Starter Kit and locate the import panel.
Upload the ZIP and wait for confirmation, then check the imported pages.

SecurityOnly upload packages from trusted sources. SimplyCod accepts manifest and JSON layout files plus JPG, PNG, GIF, WebP, or AVIF images; it rejects PHP, JavaScript, SVG, HTML, CSS, unsafe paths, and archives outside allowed limits.

Creating a new page

Recommended method

Create the WordPress page

Open Pages > Add New and enter at least the title.

Save once

Save as draft or publish. WordPress must assign an ID before the builder can store the layout.

Open SimplyCod Studio

Use the button or the Edit with SimplyCod Studio link.

Build the page

Add sections and components, then press Save in the builder top bar.

Check the public page

Use View page from the builder bar. Draft pages open through the WordPress preview.

Opening an existing page

From Pages > All Pages, hover over the title and choose Edit with SimplyCod Studio. The arrow at the top left of the editor returns directly to the page list.

Using WordPress content again

The Pages list includes the action Use WordPress content. This disables builder rendering for that page but does not delete the saved visual layout. You can reopen SimplyCod Studio later without starting from scratch.

Understanding the visual editor

Top bar

The top bar gives access to save, preview, responsive view, navigation back to WordPress, and the main page actions. Save frequently before checking the public preview.

Side panel

The side panel lists available components and page/style settings. Components can be dragged into columns and then configured through their controls.

Central canvas

The canvas shows the current page structure. Select a section, column, or component to modify its settings.

Dragging and ordering

Components can be reordered, duplicated, deleted, and moved between columns. Use undo and redo while experimenting.

Shortcuts

Common browser shortcuts remain available; for structural changes use the controls supplied by the builder.

Sections, columns, and backgrounds

Adding a section

Sections are the main horizontal blocks of a page. Each section can contain one, two, or three columns, and every column can contain components.

Section settings

Use section settings to manage spacing, width, background color, background image, overlay, alignment, and responsive behavior.

Example of a dark background section in the builder — Example of a visual section with a custom background.

Aligning an image correctly

When using background images, choose the focal point carefully and check desktop, tablet, and mobile views. This prevents important subjects from being cropped on small screens.

Available components

Base components

Title

Heading text with H1, H2, H3, or H4 levels. Use one main H1 per page.

Text

Paragraphs and safely saved formatted text.

Image

Media Library image selection and alternative text for accessibility.

Video

YouTube, Vimeo, or Media Library video files.

YouTube

Dedicated support for standard URLs, youtu.be links, Shorts, and Live.

Button

Label, URL, style, background color, text color, and hover state.

Divider

Horizontal rule for separating content groups.

Spacer

Adjustable vertical spacing in pixels.

Google Maps

Address or place with configurable map height.

Icon

Dashicons icon with selectable size and color.

General components

General components extend the page with reusable blocks such as galleries, accordions, cards, lists, contact blocks, and structured content areas. Configure each block with real content before publishing.

Common component operations

Select a component to edit its content and style.
Duplicate components that must keep the same structure.
Replace demo links, maps, emails, phone numbers, and social profiles.
Check every interactive component on mobile before delivery.

Saving, preview, and publishing

Saving in the builder

Press Save in the builder whenever you complete a meaningful change. The public preview shows the latest saved version.

WordPress page status

The builder stores the visual layout, while WordPress still manages the page status. Draft, pending, published, and private statuses remain WordPress concepts.

Responsive check

Use desktop, tablet, and mobile views to verify spacing, image crops, button widths, and text wrapping.

Preview and unsaved dataThe public preview displays the latest saved version. If you have unsaved changes, save first and then reload the preview.

Configuring the header

Open SimplyCod Studio > Header. The visual preview immediately shows the composition.

Available components

Logo or brand area.
Navigation menu.
Buttons, links, and custom content.

Settings

Choose the menu created in Appearance > Menus, or let WordPress display an automatic page list when no menu is selected.

Composing the header visually

Keep the header compact, readable, and consistent with the global design system. Test the mobile version carefully.

The menu does not show the right pagesCheck the selected menu in the header and verify its items in Appearance > Menus. Starter kits create a dedicated menu, but a later kit can select another one.

Configuring the footer

Open SimplyCod Studio > Footer. The footer is applied globally to Studio Canvas pages.

Available components

Use text, links, menus, buttons, social references, contact details, and legal links. Keep the footer clear and easy to scan.

Creating multiple rows

Organize the footer into rows when you need separate areas for brand, navigation, legal links, or contacts.

Global settings

Set background, text color, spacing, and width according to the site design system.

Reusable layouts

Creating a layout

Open SimplyCod Studio > Add New.
Build the reusable document and save it.
Return to SimplyCod Studio > Layouts with the editor arrow.

Layout or page?Add New creates a reusable document that can be recalled via shortcode or block. To create a standard site page, use Pages > Add New and then Edit with SimplyCod Studio.

Using a shortcode

[aisb_page id="123"]

Using the Studio Layout block

Insert the dedicated block in WordPress and select the layout you want to display.

Library management

Name layouts clearly so administrators and agencies can reuse them without confusion.

Features for web agencies

Client mode

Enable Client Mode in SimplyCod Studio > Design System. Editors can modify text, images, and links, while structural controls remain reserved for administrators. Restrictions are also enforced through the REST API.

Recommended delivery workflow

Define the design system and starter kit.
Create the page structure and reusable layouts.
Replace all demo content.
Enable client mode before delivery.
Document which kit and settings were used.

Separating global and local settings

Use global settings for recurring elements and local settings only when a single component needs a deliberate exception.

Watch new starter kitsInstalling a kit after delivery modifies global settings and the Home page. Reserve this operation for administrators and always document the base kit.

Languages and translations

Language files are stored in:

wp-content/plugins/ai-site-builder/languages/

Included files

The plugin includes its own language files so interface strings can be translated without touching builder logic.

Adding a language

Copy an existing language file.
Translate only the visible strings.
Keep keys and placeholders unchanged.
Upload the file into the language folder.

Plugin updatesIf you manually add language files inside the plugin folder, also keep a copy outside the site or in version control: an update that replaces the full plugin folder could overwrite them.

Updates, backups, and removal

Updating with a new ZIP

Create a backup of files and database.
Open Plugins > Add New > Upload Plugin.
Upload the new ZIP package.
Confirm replacement when WordPress asks.
Check pages, header, footer, and starter kit data after the update.

What to back up

The WordPress database.
The plugin folder.
The uploads folder, especially imported starter kit images.
Custom language files.

Deactivation and removal

Deactivate the plugin only after checking which pages depend on Studio Canvas rendering. Removing the plugin can make builder layouts unavailable on the public site.

Troubleshooting

The “Edit with SimplyCod Studio” button does not appear

Make sure the plugin is active, the user has the right permissions, and the content type is supported.

The page does not show builder content

Check that the page is using the builder layout and has not been switched back to standard WordPress content.

The design looks different on mobile

Open the responsive preview and adjust spacing, image focal points, and button widths.

The starter kit changed colors or Home page

The latest installed kit becomes the active design. Restore settings manually or from backup when needed.

Images from an imported kit are missing

Verify that the package used supported image formats and that the upload was completed without errors.

The public preview does not show recent edits

Save the builder document, clear cache/CDN, and reload the public page in a private window.

Checklist before publishing

Content

All demo texts have been replaced.
Contact details, emails, phone numbers, and addresses are correct.
Buttons point to real pages or forms.
Images have meaningful alternative text.

Design and navigation

Header and footer are consistent across pages.
The selected menu contains the correct pages.
The mobile menu opens and reaches every main page.
Footer, copyright, and social links are updated.
The correct Home page is set in Settings > Reading.

Responsive and quality

Every page has been checked on desktop, tablet, and mobile.
Text does not overflow containers or cover other elements.
Background images keep the subject in the focal point.
Maps, galleries, accordions, tabs, and carousels remain usable.
Cache and CDN were cleared after the latest changes.
A recent backup of files and database is available.

Website readyWhen all checks are complete, open the site in a private window and test the main flows as a real visitor would.