Manuale di SimplyCod Studio

Panoramica

SimplyCod Studio è un page builder visuale per WordPress. Consente di costruire pagine direttamente sul contenuto WordPress, organizzandole in sezioni, colonne e componenti. Il plugin include inoltre un template neutro chiamato Studio Canvas, un sistema grafico globale, editor visuali per header e footer, una libreria di layout riutilizzabili e diversi starter kit.

Cosa è incluso

• Editor visuale con trascinamento, duplicazione, ordinamento, annulla e ripristina.
• Componenti Base e Generali, tutti disponibili senza crediti.
• Header e footer globali costruibili graficamente.
• Starter kit Personal, Professional, Startup, Sport, Tech ed Energy.
• File lingua nella cartella isolata languages.
• Template Studio Canvas fornito dal plugin.

Installazione

Installazione dal pannello WordPress

Installazione via FTP o file manager

1. Decomprimi ai-site-builder.zip sul computer.
2. Carica la cartella completa ai-site-builder in wp-content/plugins/.
3. Verifica che il file principale sia wp-content/plugins/ai-site-builder/ai-site-builder.php. Evita una cartella doppia del tipo ai-site-builder/ai-site-builder/.
4. Apri Plugin > Plugin installati e attiva SimplyCod Studio.

Verifica dopo l’attivazione

• Nel menu amministrativo compare SimplyCod Studio.
• Sono disponibili Layout, Aggiungi nuovo, Starter Kit, Sistema di design, Header e Footer.
• Nell’elenco Pagine compare l’azione Modifica con SimplyCod Studio.

Configurazione iniziale

Prima di creare le pagine conviene stabilire le regole globali. In questo modo ogni nuovo elemento eredita colori e dimensioni coerenti.

Sistema di design

Apri SimplyCod Studio > Sistema di design.

Concludi sempre con Salva sistema di design.

Studio Canvas e tema WordPress

WordPress richiede comunque un tema attivo. Studio Canvas non installa né sostituisce il tema: per le pagine create con il builder ne evita il template e usa la struttura neutra fornita dal plugin. Disattivando Studio Canvas, le pagine tornano a essere contenute nel template del tema attivo.

Starter kit

Apri SimplyCod Studio > Starter Kit. Ogni kit crea pagine già pubblicate, un menu dedicato, imposta una Home statica e applica il proprio sistema grafico globale, header e footer.

Installare un kit

Importare uno starter kit esterno

1. Ottieni un pacchetto ZIP dichiarato compatibile con SimplyCod Starter Kit v1.
2. Apri SimplyCod Studio > Starter Kit e individua il riquadro Importa uno starter kit SimplyCod.
3. Seleziona il file ZIP e premi Valida e importa.
4. Attendi il messaggio di conferma, quindi controlla le pagine importate in Pagine > Tutte le pagine.

Un pacchetto può contenere fino a 20 pagine, immagini, un menu, sistema grafico, header e footer. Le pagine dichiarate come bozze restano non pubblicate; una pagina iniziale viene impostata automaticamente solo quando è già pubblicata.

Dopo un’importazione completata, il kit esterno appare nella stessa griglia dei kit integrati. La scheda mostra anteprima, descrizione, versione, data d’importazione, numero di pagine create e il collegamento all’elenco delle pagine.

Rigenerare pagine eliminate

La scheda di un kit esterno confronta il numero di pagine disponibili con quello previsto dal pacchetto. Le pagine nel cestino sono considerate mancanti. Quando compare Ripristino necessario, premi Ripristina pagine: SimplyCod Studio userà la copia memorizzata nel sistema, senza richiedere nuovamente lo ZIP originale.

Se le pagine sono ancora nel cestino, vengono recuperate con gli stessi contenuti, ID e collegamenti. Per i kit importati con questa versione, una copia progetto interna permette anche di ricreare le pagine eliminate definitivamente, riutilizzando immagini e menu già presenti nel sito.

Rimuovere un kit caricato

Le schede dei kit esterni includono il pulsante Rimuovi kit. Dopo la conferma, il kit e la relativa copia progetto vengono rimossi dalla libreria Starter Kit. Le pagine, le immagini e gli altri contenuti già generati nel sito rimangono invariati.

Immagini nei kit esterni

I kit possono includere immagini JPG, JPEG, PNG, GIF, WebP e AVIF. I PNG mantengono la trasparenza. Per una maggiore portabilità è consigliato dichiarare sia il token URL {{media:chiave}} sia il token allegato {{media_id:chiave}}; SimplyCod Studio usa automaticamente quello disponibile quando l’altro manca.

Moduli importati

Il componente Modulo supporta campi di testo, email, telefono, URL, numero, data, selezione, area di testo e consenso tramite casella. Le richieste vengono validate e inviate all’email dell’amministratore WordPress, oppure al destinatario indicato nel componente. È necessario verificare sul sito reale il testo privacy e la corretta consegna email.

La cartella starter-kit-sdk contiene istruzioni tecniche dettagliate e il nuovo pacchetto simplycod-complete-example-kit.zip, pronto per essere importato come test.

SimplyCod ricrea esclusivamente le pagine mancanti, conserva le modifiche delle pagine ancora presenti, riutilizza le immagini importate e aggiorna i collegamenti del menu. Se tutte le pagine sono già disponibili, il pacchetto non apporta modifiche.

Creare una nuova pagina

Metodo consigliato

Aprire una pagina esistente

Da Pagine > Tutte le pagine, porta il puntatore sul titolo e scegli Modifica con SimplyCod Studio. La freccia in alto a sinistra dell’editor torna direttamente all’elenco delle pagine.

Usare nuovamente il contenuto WordPress

Nell’elenco pagine è disponibile l’azione Usa il contenuto WordPress. Questa opzione disattiva il rendering del builder per la pagina, ma non elimina il layout visuale salvato. Potrai riaprire SimplyCod Studio in seguito senza ricominciare da zero.

Conoscere l’editor visuale

Barra superiore

Pannello laterale

• Base: componenti fondamentali. La scheda è comprimibile.
• Generale: componenti avanzati gratuiti. Anche questa scheda è comprimibile.
• Sezioni pronte: Hero, Immagine + testo, Vantaggi e Call to action.
• Aggiungi sezione: crea una struttura a una, due o tre colonne.
• Componente selezionato: mostra i campi del blocco attualmente selezionato.
• Sezione: facendo clic sullo sfondo della sezione, l’ispettore mostra colori, spaziatura e immagine di fondo.

Tela centrale

Ogni area orizzontale è una sezione. Il piccolo comando centrale con l’icona di spostamento seleziona e trascina l’intera sezione. Ogni componente dispone a sua volta di una maniglia. Il bordo evidenziato indica l’elemento selezionato.

Trascinamento e ordinamento

• Trascina un componente sopra o sotto un altro blocco per cambiarne l’ordine.
• Trascina un componente in un’altra colonna per spostarlo.
• Trascina la maniglia della sezione sopra o sotto un’altra sezione per riordinare la pagina.
• In alternativa usa le frecce su/giù nell’ispettore del componente o della sezione.

Scorciatoie

Ctrl/Cmd + S salva. Ctrl/Cmd + Z annulla l’ultima modifica della sessione.

Sezioni, colonne e sfondi

Aggiungere una sezione

Nel pannello laterale, sotto Aggiungi sezione, scegli una struttura a una, due o tre colonne. Le larghezze vengono create automaticamente. Per inserire un componente in una colonna specifica, seleziona prima il pulsante “+” della colonna e poi il componente desiderato.

Impostazioni della sezione

• Sfondo: colore di base, usato anche mentre l’immagine non è ancora caricata.
• Colore testo: colore predefinito per titoli e testi della sezione.
• Spaziatura verticale: padding superiore e inferiore da 0 a 160 px.
• Immagine di sfondo: selezionata dalla Libreria Media di WordPress.
• Fondino: colore sovrapposto all’immagine con opacità da 0% a 100%.
• Dimensione: Copri, Contieni, Originale o Personalizzata.
• Zoom personalizzato: disponibile nella modalità Personalizzata, dal 10% al 300%.
• Punto focale: posizione orizzontale e verticale da 0% a 100%.
• Comportamento: Scorrimento normale oppure Sfondo fisso.

Allineare correttamente un’immagine

1. Seleziona la sezione, non il componente interno.
2. Scegli l’immagine dalla Libreria Media.
3. Usa Copri per riempire l’area, accettando un possibile ritaglio.
4. Usa Contieni per mostrare tutta l’immagine, accettando possibili spazi liberi.
5. Fai clic nell’anteprima del punto focale sul soggetto importante, oppure regola X e Y numericamente.
6. Aggiungi un fondino se il testo non è abbastanza leggibile.
7. Controlla Desktop, Tablet e Mobile. Lo sfondo fisso torna automaticamente allo scorrimento normale sui dispositivi mobili.

Componenti disponibili

Per aggiungere un componente, seleziona la colonna di destinazione e fai clic sulla relativa voce. Per modificarlo, selezionalo nella tela e usa l’ispettore laterale.

Componenti Base

Componenti Generali

Operazioni comuni sui componenti

• Duplica: crea una copia immediatamente sotto l’originale.
• Freccia su/giù: sposta il componente nella colonna corrente.
• Elimina: rimuove il componente; usa Annulla se l’azione è accidentale.
• Trascina: sposta il componente anche tra colonne diverse.
• Elementi ripetibili: usa “Aggiungi elemento/profilo” e il comando di rimozione accanto a ogni riga.

Salvataggio, anteprima e pubblicazione

Salvare nel builder

Premi il pulsante Salva ben visibile nella barra superiore. Il pulsante viene disabilitato durante la richiesta e mostra lo stato Salvataggio…. Attendi la conferma Salvato prima di chiudere la scheda.

Stato WordPress della pagina

Il builder salva il layout, ma la visibilità pubblica dipende anche dallo stato WordPress:

• Bozza: visibile solo in anteprima agli utenti autorizzati.
• Pubblicata: disponibile al pubblico tramite il permalink.
• Privata: segue le regole di accesso di WordPress.

Controllo responsive

1. Passa da Desktop a Tablet e Mobile nella barra superiore.
2. Controlla titoli lunghi, colonne, immagini, pulsanti e mappe.
3. Apri la pagina pubblica anche in una nuova finestra del browser.
4. Verifica menu mobile, header fisso, footer, link e ancore.

Configurare l’header

Apri SimplyCod Studio > Header. L’anteprima visuale mostra immediatamente la composizione.

Componenti disponibili

• Identità del sito: nome WordPress, nome personalizzato oppure logo dalla Libreria Media.
• Navigazione: menu WordPress selezionato.
• Pulsante azione: etichetta, URL e apertura opzionale in nuova scheda.
• Spaziatore: distribuisce lo spazio tra gli elementi.

Impostazioni

• Layout standard, centrato su due righe o barra compatta.
• Menu creato in Aspetto > Menu, oppure elenco automatico delle pagine se non viene scelto un menu.
• Header fisso in alto oppure header che scorre con la pagina.
• Bordo inferiore opzionale.
• Colori di sfondo e testo.
• Altezza dell’header e larghezza massima del logo.

Comporre graficamente l’header

Aggiungi i componenti dal pannello, trascinali nell’anteprima e riordinali. Puoi eliminare quelli non necessari. Il pulsante azione è indipendente dal menu e non crea voci duplicate nella navigazione. Concludi con Salva header.

Configurare il footer

Apri SimplyCod Studio > Footer. Il footer viene applicato globalmente alle pagine Studio Canvas.

Componenti disponibili

• Marchio o nome del sito.
• Navigazione con menu WordPress indipendente dall’header.
• Collegamenti social Facebook, Instagram, LinkedIn e YouTube.
• Copyright con segnaposto automatici {year} e {site}.
• Spaziatore flessibile.
• Divisore di riga per creare sezioni sottostanti.

Creare più righe

1. Aggiungi un componente Riga.
2. Trascina dopo il divisore i componenti che devono apparire nella parte inferiore.
3. Aggiungi altre righe se servono ulteriori fasce.
4. Riordina o rimuovi il divisore come gli altri componenti.

Impostazioni globali

Scegli layout a colonne, centrato o compatto; imposta menu, visibilità del marchio, descrizione, colori, spaziatura, copyright e URL social. Premi Salva footer.

Layout riutilizzabili

I layout sono documenti visuali indipendenti dalle pagine. Sono utili per contenuti ripetuti, landing riutilizzabili o inserimenti dentro l’editor standard di WordPress.

Creare un layout

1. Apri SimplyCod Studio > Aggiungi nuovo.
2. Inserisci il titolo del layout nella schermata di creazione e premi Crea layout.
3. Nell’editor visuale aggiungi sezioni e componenti, quindi salva.
4. Torna a SimplyCod Studio > Layout con la freccia dell’editor.

Usare uno shortcode

Nella libreria viene mostrato uno shortcode simile al seguente:

Inseriscilo in un blocco Shortcode di WordPress o in un’area che esegua shortcode. Sostituisci 123 con l’ID reale visualizzato.

Usare il blocco Studio Layout

Nell’editor a blocchi di WordPress aggiungi Studio Layout, seleziona un layout salvato e controllane l’anteprima direttamente nell’editor.

Gestione della libreria

Da Layout puoi modificare, duplicare o spostare nel cestino un documento. La duplicazione crea una copia separata: le modifiche alla copia non alterano l’originale.

Funzioni per web agency

Modalità cliente

Attiva Modalità cliente in SimplyCod Studio > Sistema di design. Gli editor potranno modificare contenuti, immagini e collegamenti, mentre i controlli strutturali rimarranno riservati agli amministratori. Le limitazioni sono applicate anche lato REST API.

Flusso di consegna consigliato

1. Configura design globale, header e footer con un account amministratore.
2. Crea le pagine e verifica tutte le viste responsive.
3. Imposta menu, Home statica, permalink e contenuti reali.
4. Attiva Modalità cliente.
5. Accedi con un account Editor di prova e verifica ciò che il cliente può cambiare.
6. Esegui un backup completo prima della consegna.

Separare globale e locale

• Usa il Sistema di design per decisioni che devono valere su tutto il sito.
• Usa i colori del singolo componente solo per eccezioni intenzionali.
• Crea layout riutilizzabili per contenuti che devono essere inseriti in più punti.
• Usa gli starter kit come base iniziale, non come contenuto definitivo.

Lingue e traduzioni

Il plugin rileva automaticamente la lingua di WordPress e carica i file gettext dalla cartella:

File inclusi

• ai-site-builder.pot: modello con tutte le stringhe traducibili.
• ai-site-builder-it_IT.po: sorgente della traduzione italiana.
• ai-site-builder-it_IT.mo: catalogo binario caricato da WordPress.
• README.md: indicazioni tecniche per aggiungere nuove lingue.

Aggiungere una lingua

1. Copia il file POT in un editor gettext come Poedit.
2. Crea una traduzione con il locale WordPress corretto, ad esempio fr_FR.
3. Salva i file come ai-site-builder-fr_FR.po e ai-site-builder-fr_FR.mo.
4. Caricali nella cartella languages.
5. Imposta la stessa lingua in WordPress e svuota eventuali cache.

Aggiornamenti, backup e rimozione

Aggiornare con un nuovo ZIP

1. Esegui un backup di file e database.
2. Apri Plugin > Aggiungi nuovo > Carica plugin.
3. Seleziona il nuovo ai-site-builder.zip.
4. Quando WordPress rileva il plugin esistente, scegli di sostituirlo con la versione caricata.
5. Controlla la versione nella schermata Plugin.
6. Svuota cache WordPress, cache server e cache browser.
7. Apri una pagina nel builder, salva una modifica di prova e verifica il frontend.

Cosa salvare nel backup

• Database WordPress: pagine, layout, impostazioni globali, header e footer.
• Cartella wp-content/uploads: immagini e video selezionati dalla Libreria Media.
• Cartella del plugin, se contiene traduzioni personalizzate.

Disattivazione e rimozione

Disattivando il plugin, le pagine e i dati rimangono nel database ma il rendering visuale, Studio Canvas, shortcode e blocchi del plugin non saranno disponibili. Prima di rimuoverlo, passa le pagine importanti al contenuto WordPress oppure esporta e conserva i dati con un backup completo.

Risoluzione dei problemi

Checklist prima della pubblicazione

Contenuti

• Titoli e testi sono definitivi e privi di contenuti dimostrativi.
• Email, telefoni, indirizzi, mappe e orari sono corretti.
• Tutti i pulsanti portano alla destinazione prevista.
• Le immagini hanno testo alternativo significativo.
• Video e shortcode funzionano anche da utente non autenticato.

Design e navigazione

• Colori e contrasto sono leggibili.
• Header, logo, menu e pulsante azione sono corretti.
• Il menu mobile si apre e permette di raggiungere tutte le pagine.
• Footer, copyright e social sono aggiornati.
• La Home corretta è impostata in Impostazioni > Lettura.

Responsive e qualità

• Ogni pagina è stata controllata in Desktop, Tablet e Mobile.
• I testi non escono dai contenitori e non coprono altri elementi.
• Le immagini di sfondo mantengono il soggetto nel punto focale.
• Mappe, gallerie, accordion, schede e caroselli sono utilizzabili.
• Cache e CDN sono state svuotate dopo l’ultima modifica.
• È disponibile un backup recente di file e database.