Lavorare con i Canvas

I Canvas sono i mattoni fondamentali del tuo sito Webround. Ogni pagina è composta da una sequenza di Canvas, che fungono da contenitori intelligenti per i tuoi componenti.

Inserimento di un Canvas

Se la tua pagina è vuota o vuoi aggiungere una nuova sezione, avrai a disposizione due pulsanti: "Sezione" e "Carosello".

• Clicca su Sezione per creare un Canvas standard.

Di default, il nuovo Canvas potrebbe apparire molto sottile. Passa il mouse sopra l'area per visualizzare il bordo inferiore blu: clicca e trascina il bordo verso il basso per regolare l'altezza manualmente.

Nota: L'altezza del Canvas non è dinamica; sei tu a decidere quanto spazio deve occupare verticalmente.

La Griglia (Mosaico)

All'interno del Canvas noterai un mosaico di celle. Questi sono i punti di aggancio: ogni componente che trascinerai si aggancerà automaticamente a questa griglia, permettendoti di mantenere un layout ordinato e allineato.

Configurazione e Menù Contestuale (Parte 1)

Fai click destro sul Canvas per aprire il menù contestuale.

In questa prima sezione puoi gestire:

• Celle e Spaziature: Regola l'altezza delle singole celle e lo spazio (gap) tra di esse. Questo ti permette di distanziare o avvicinare i componenti con estrema precisione.
• Background: Puoi inserire un colore, un'immagine o un video di sfondo. Webround ti permette di inserire fino a due immagini di sfondo contemporaneamente e gestirne la transizione.
• Divisore (Shapes): Questa funzione ti consente di inserire separatori SVG tra un canvas e l'altro, come onde, zig-zag o altri effetti geometrici per dare movimento al design.

Operazioni Avanzate (Parte 2)

Scorrendo nel menù contestuale o accedendo alla seconda sezione, trovi gli strumenti di gestione del flusso:

• Copia tra Dispositivi: Puoi copiare l'intera configurazione del Canvas da un device all'altro (es. da Desktop a Mobile) per velocizzare il lavoro di ottimizzazione responsive.
• Gestione del Flusso Pagina: Da qui puoi aggiungere nuovi elementi sopra o sotto il Canvas corrente:
  • Nuovo Canvas: Aggiunge una sezione standard.
  • Codice Custom: Inserisce un'area per componenti React personalizzati.
  • Carosello di Canvas: Trasforma la sezione in uno slider di slide indipendenti.
  • Galleria Orizzontale: Inserisce uno slider rapido con un massimo di 10 prodotti filtrabili dal tuo store WR Commerce.
  • Galleria di Prodotti: Inserisce la griglia principale del tuo catalogo.
• Ordinamento ed Eliminazione: Sposta il Canvas sopra o sotto rispetto alle altre sezioni o rimuovilo definitivamente.

Inserimento dei Componenti

Una volta configurata la struttura del Canvas, è il momento di popolarlo con i contenuti.

Noterai un pulsante blu con il simbolo "+" posizionato in alto a sinistra del Canvas. Cliccandoci, si aprirà la sidebar dei componenti.

Trascina gli elementi dalla sidebar direttamente sulla griglia del Canvas.

Come procedere:

1. Drag & Drop: Scegli il componente che ti serve (testo, immagine, bottone, ecc.), cliccaci sopra e trascinalo fisicamente all'interno del Canvas.
2. Posizionamento: Rilascia il componente in corrispondenza delle celle del mosaico dove desideri posizionarlo.
3. Configurazione: Una volta posizionato, fai click destro sul componente stesso. Si aprirà il suo menù contestuale specifico, dove potrai gestire tutte le opzioni di stile (colori, font, bordi) e le configurazioni funzionali (link, parametri dati, ecc.).

Ricorda

Ogni componente ha un set di opzioni unico. Ad esempio, il menù contestuale di un'immagine ti permetterà di gestire il ritaglio e i filtri, mentre quello di un pulsante si concentrerà sull'azione al click e sullo stile dell'etichetta.