Editing dei Componenti
Una volta posizionati gli elementi sulla griglia, Webround offre un controllo granulare per l'aspetto visivo e funzionale.
1. Editing del Canvas: Lo Sfondo
Il Canvas è il contenitore che definisce il contenuto della sezione.
- Cambio Sfondo: Tramite il menù contestuale, accedi alla sezione Gestisci background.
- Media: Puoi caricare immagini (JPG, PNG, WebP) o video (MP4).
- Transizioni: Se carichi due immagini, puoi attivare un effetto di transizione che le alterna, creando dinamismo senza pesare sulle performance.
- Overlay: Puoi aggiungere un livello di colore sopra lo sfondo per migliorare la leggibilità dei testi che posizionerai sopra.
2. Editing dei Componenti Drag n Drop
Ogni elemento (Testo, Immagine, Bottone) ha proprietà specifiche, ma la gestione segue un flusso coerente.
Modificare lo Stile
Aprendo il menù contestuale di un componente, trovi i controlli per:
- Colori e Bordi: Gestione di palette, opacità e arrotondamenti (border-radius).
- Ombre e Spaziature: Aggiunta di profondità tramite Box Shadow e gestione di margini interni (padding).
- Animazioni e transizioni: Puoi sfruttare le animazioni di base di Webround su quasi tutti i componenti e puoi impostare le transizioni di hover (passaggio del mouse) per i pulsanti.
- Stile personalizzato: Se definisci delle classi nel file CSS del sito, puoi richiamare quelle classi e applicarle ai componenti.
Il menù contestuale per la modifica degli elementi Webround
Di seguito, elenchiamo le funzioni comuni delle toolbar.
- : Questo elemento ti consente di applicare le classi CSS che definisci nel tuo sito.
- : Questo elemento ti consente di modificare gli stili come sfondo del wrapper, bordi, ombre, effetto blur, padding e margini.
- : Qui puoi gestire l'allineamento verticale del tuo componente rispetto al suo wrapper (contenitore drag & drop).
- : Se vuoi nascondere il componente su un dispositivo, puoi sfruttare questo menù per decidere dove farlo apparire.
- : Ogni componente può essere identificato con un ID specifico: questo ti consente di inserire anchor links per navigare direttamente a questo componente.
- : Con questo menù puoi copiare direttamente tutte le proprietà del wrapper da un dispositivo all'altro.
- : La copia di un componente è disponibile sia tramite tastiera con la combinazione Ctrl + Shift + C, sia tramite pulsante apposito.
- e : Sovrapponi un componente rispetto a un altro grazie a questo menù, che ti consente di modificare la proprietà z-index per creare effetti di sovrapposizione come il testo sopra un'immagine.
- : Puoi cancellare un componente semplicemente cliccando qui sopra, oppure con la combinaizone Alt + Del
Modificare il Testo
I wrapper testuali sono tra gli elementi più importanti. Webround utilizza un'implementazione di Lexical per gestire il testo:
- Clicca sul testo per entrare in modalità editing.
- Scrivi il tuo contenuto.
- Usa la toolbar per cambiare font, peso, dimensione e allineamento.
- Utilizza il menù contestuale (click destro) per cambiare le proprietà del wrapper, come i bordi, le ombre, le animazioni o l'allineamento verticale del contenuto.
L'interfaccia di modifica per il componente testuale
Ad esempio, per cambiare font o font size, puoi utilizzare l'elemento
Cliccando su questo elemento, potrai specificare nuovi stili riutilizzabili. Attenzione: la modifica di uno stile comporta la modifica di tutti i componenti di testo che utilizzano quello stile. Ti consigliamo di definire a priori tutti i font e i colori del testo nel tuo sito, in modo da avere tutto già organizzato e velocizzare la creazione dei paragrafi o dei titoli. Puoi definire fino a 24 stili personalizzati.
Gli stili predefiniti sono applicabili selezionando il testo desiderato e cliccando sull'icona della memorizzazione dei testi nella toolbar:
L'interfaccia di modifica per gli stili del testo selezionato
Inserire un Pulsante con Link
Dopo aver trascinato un pulsante nel Canvas:
- Fai click destro e apri il menù contestuale.
- Clicca sull'icona del link e inserisci l'URL di destinazione. Puoi scegliere se puntare a un link esterno o a una pagina interna del tuo sito Webround, ma anche un numero di telefono o una email.
- Se utilizzi un link verso la pagina shop, puoi definire una serie di filtri per collezione o tag. La navigazione verso quella pagina applicherà direttamente i filtri selezionati.
L'interfaccia di modifica per gli stili dei pulsanti
Ad esempio, per memorizzare gli stili di un pulsante puoi utilizzare l'elemento .
Questo menù ti consente di salvare fino a 3 stili standard per i tuoi pulsanti, permettendo di replicare lo stesso pulsante in più sezioni del sito.
Ci sono anche altre opzioni:
- Per caricare uno stile predefinito, utilizza
- Per modificare il testo, utilizza l'icona
- Per gestire le animazioni di hover (passaggio del mouse), utilizza l'icona
- Per inserire un link di navigazione, utilizza l'icona
Aggiungere Animazioni
Ogni componente può essere animato per apparire in modo fluido:
- Nel menù contestuale, seleziona l'icona delle Animazioni.
- Scegli uno degli effetti a disposizione
- Regola il delay (ritardo) e la durata per creare effetti a cascata quando l'utente scorre la pagina.
Stile Custom (Tailwind & CSS)
Per i designer più esigenti, ogni componente ha un campo Custom Style consultabile tramite l'icona di CSS nel menù contestuale. Qui puoi iniettare classi CSS specifiche, gestendo in maniera granulare sia il componente interno (contenuto), sia quello esterno (wrapper posizionabile), così come le classi applicate quando l'elemento è visibile e quando non lo è.
Form di contatto
Puoi integrare facilmente dei form di contatto con il componente "Form". Potrai gestire lo stile dei singoli campi del form e anche lo stile del contenitore dei campi di input. Le opzioni sono sempre accessibili tramite il click destro.
Assicurati di gestire l'integrazione dei form di contatto con un sistema di messaggistica predefinito in Webround. Puoi utilizzare Webround Email o uno dei servizi disponibili collegando le tue API Key.
3. Gestire le modifiche delle Card Prodotto
Le Product Card sono componenti speciali perché sono sincronizzate direttamente con il tuo catalogo.
- Dati Dinamici: Prezzo, titolo e immagine vengono recuperati automaticamente dal tuo store WR Commerce.
- Stile Globale: Puoi modificare il design di una card (bordi, font del prezzo, stile del pulsante di navigazione). Le modifiche vengono applicate automaticamente a tutte le card della galleria per mantenere coerenza.
- Override: Se hai bisogno di una card completamente diversa, ricordati che puoi sempre usare la funzione di Override Custom nella Sidebar Destra per sostituire il componente standard con il tuo codice.
Come modificare le Card Prodotto
Questi componenti sono presenti in diversi elementi, come ad esempio, nelle gallerie orizzontali. Tuttavia, le Card Prodotto sono modificabili solo dalla pagina Shop. Per eseguire le modifiche, apri la pagina Shop e passa con il mouse sull'area dove trovi i tuoi prodotti. Qui avrai a disposizione una serie di impostazioni, tra cui:
- Dimensioni: Quanto devono essere alte le immagini e quanti elementi mostrare su una riga
- Testo: Che font, colore e quale stile applicare ai testi delle Card
- Immagine: Quali bordi, ombre o effetti applicare alle immagini
- Paginazione: Gestisci lo stile dei pulsanti per cambiare pagina
Puoi replicare lo stile dei pulsanti e del testo con gli stili personalizzati. Attraverso il menù contestuale, puoi salvare o caricare uno stile preciso, in modo da ottimizzare il lavoro.
4. Shortcuts
Puoi utilizzare i comandi Ctrl + Shift + C per copiare dei componenti, Ctrl + Shift + V per incollarli e Ctrl + Shift + X per tagliarli.
Puoi trascinare il mouse su un Canvas e selezionare più elementi in un colpo solo per eseguire uno spostamento oppure un'azione di copia / taglia.
Se vuoi replicare una configurazione di un Canvas tra dispositivi, accedi al menù contestuale del Canvas per gestire la copia.