Lavorare con i Draft

Il processo di sviluppo di un sito web o di organizzazione di un e-commerce su Webround inizia sempre da un Draft. Un draft è un ambiente isolato dove puoi progettare, testare e configurare il tuo sito prima di collegare un dominio o andare live.

1. Scelta del Template

Ogni Drat parte da un Template Webround: una copia di un draft sviluppato internamente.

Scegli un template dalla nostra libreria, oppure parti da zero con il template "Empty Canvas", che ti consente di configurare un nuovo sito da zero.

Scegli la base di partenza per il tuo progetto. Potrai cambiare ogni singolo elemento in seguito.

Dopo aver selezionato un template e scelto un nome per il tuo nuovo Draft, potrai recarti nella pagina "Draft". Se il tuo draft non compare, aggiorna con l'apposita rotellina in alto a destra.

Clicca sul Draft e poi sull'immagine, oppure sul pulsante blu "Aggiorna sito" per accedere all'editor di Webround.

2. Le due modalità operative

All'interno dell'editor, Webround ti offre il controllo totale permettendoti di gestire due approcci diversi, anche contemporaneamente:

• Drag n Drop: Ideale per gestire layout, contenuti multimediali e struttura visuale. Consigliamo vivamente l'utilizzo da PC con mouse e tastiera per la massima precisione.
• Custom Code: Per gli sviluppatori che vogliono iniettare componenti React, gestire dipendenze npm e utilizzare Tailwind CSS V4.

3. Interazione e Menù Contestuali

L'interfaccia di Webround è progettata per essere "context-aware". Buona parte delle operazioni di modifica dei componenti si gestiscono tramite menù contestuali.

• PC: Click destro sul componente o sulla sezione.
• Mac: Ctrl + Click o click destro.

Ogni componente ha un menù dedicato che espone proprietà specifiche, che siano di configurazione di stile o di recupero dati, come nel caso dei componenti Commerce o dei componenti Custom.

4. Architettura della Pagina: I Canvas

Webround divide la pagina web in sezioni logiche chiamate Canvas. Un Canvas non è un semplice contenitore, ma un'area intelligente che può essere configurata in tre modi:

1. Canvas: Un'area dove puoi trascinare e rilasciare i componenti della libreria. Qui hai tutte le funzioni drag & drop no-code di Webround.
2. Carousel Canvas: Una configurazione particolare che trasforma il canvas in un carrello di sotto-canvas (slide) indipendenti.
3. Custom Code Canvas: Un'area dedicata esclusivamente all'injection di codice React personalizzato.

Puoi indentificare un Canvas al semplice passaggio del mouse: Un Canvas semplice mostrerà un'icona blu in alto a sinistra con un simbolo "+", che ti consente di aggiungere nuovi componenti. Un Canvas avanzato mostrerà icone aggiuntive o diverse.

L'interfaccia dell'editor con la gestione dei Canvas e dei menù contestuali.

Di seguito saranno spiegati sommariamente gli elementi dell'editor Webround

5. L'Area di Gestione (Header)

L'header dell'editor è composto da diversi componenti, ognuno con il proprio ruolo e scopo.

L'accesso ai file custom

La cartella nell'area verde ti consente di accedere ai file custom del tuo draft. Da qui potrai accedere a un editor per creare e scrivere nuovi file e cartelle per il tuo draft.

Il menù laterale sinistro (icona W)

Cliccando sulla W in alto a sinistra, accedi alle impostazioni globali del progetto:

• SEO: Gestione di meta tag, titoli e descrizioni per i motori di ricerca.
• Pagine e Lingue: Gestione del multi-lingua e delle pagine del tuo sito.
• Configurazioni E-commerce: Parametri tecnici dello store.
• Custom CSS: Area dedicata allo stile CSS per i componenti standard del builder (non quelli creati tramite codice custom). Scopri di più

Site Mode vs Shop Mode

Il selettore di modalità ti permette di passare dalla gestione delle pagine statiche alle pagine dinamiche del tuo sito:

• Site Mode: Focalizzato sul design e sulla struttura delle pagine statiche.
• Shop Mode: Accede alle pagine e alle impostazioni di interfaccia dello store. Da qui puoi attivare o disattivare funzioni front-end come le recensioni, il toggle IVA (mostra prezzi netti o lordi) e i pulsanti wishlist.

  Nota bene: Queste impostazioni influenzano solo l'integrazione nel sito. Se vuoi disabilitare una funzione alla radice, dovrai farlo sia nelle impostazioni del Draft che nello store WR Commerce.

Gestione Pagine Shop (L'icona Occhio)

All'interno del menù Shop Mode puoi gestire la visibilità delle pagine di sistema (Carrello, Login, Autenticazione).

• Cliccando sull'icona dell'occhio, puoi nascondere le pagine che non servono (ad esempio se stai creando un catalogo digitale senza checkout).
• Se l'occhio è sbarrato, quelle pagine non verranno generate nella versione finale del sito.
• Non puoi cancellare definitivamente le pagine dinamiche del tuo store. Scopri di più

Strumenti di Colore e Sfondo

• Color Picker: Un contagocce integrato che ti permette di prelevare qualsiasi colore dallo schermo per salvarlo nella tua palette, risparmiando tempo nella ricerca dei codici HEX.
• Sfondo Pagina: Permette di cambiare il colore o l'immagine di background della pagina corrente. Questa impostazione è specifica per ogni singola pagina.

Controllo e Cronologia

Al centro hai i classici pulsanti di Undo e Redo per annullare o ripristinare le ultime modifiche effettuate. Attenzione: La cronologia salva solo gli ultimi 100 cambiamenti al sito.

Componenti Globali (La Sidebar destra)

Questo pulsante apre una sezione fondamentale per la scalabilità del sito. Qui gestisci tutto ciò che deve essere replicato su più pagine:

• Header & Footer: Definizione delle aree di navigazione principali.
• Cookie Banner: Configurazione della conformità privacy.
• Global Custom Components: Gestione dei componenti React impostati in tutte le pagine del sito. Ideali per widget e altre funzioni.
• Override: Gestione delle sovrascritture dei componenti hard-coded nel sito, come le pagine prodotto, le card e tanto altro. Scopri di più

Responsive Design e Salvataggio

• Device Toggle: Passa istantaneamente dalla visualizzazione Desktop a quella Tablet o Mobile per rifinire il design responsive.
• Salva: Assicurati di salvare per rendere persistenti le modifiche nel tuo Draft.