Compatibilità:

WebSite X5 Evo e Pro

La grafica di una pagina web non è fatta solo di immagini e testi: anche i dettagli più sottili contribuiscono a creare un'esperienza visiva unica. Con l'Oggetto Opzionale Animated Shape Separator, puoi introdurre separatori animati che scandiscono i contenuti e, allo stesso tempo, danno movimento e personalità al design.


Scegli una delle forme preimpostate, personalizza i colori e le animazioni, oppure carica il tuo file SVG per creare separatori su misura e animati. Grazie all'effetto dinamico delle forme in movimento, le tue pagine acquisteranno fluidità ed energia, trasformando le semplici divisioni tra sezioni in veri e propri elementi di design. Nella pagina di Anteprima puoi vedere alcuni esempi concreti di utilizzo creativo.



Come funziona

Semplificando, possiamo dire che generalmente gli elementi di una pagina web vengono "disegnati" come dei rettangoli. Questo fa sì che nella maggior parte dei casi le sezioni di una pagina siano divise tra loro da linee orizzontali ben definite. 


Per avere dei separatori più complessi (come, per esempio, delle onde) bisogna ricorrere all'uso di maschere in SVG.


#tip - SVG (Scalable Vector Graphic) è un formato vettoriale particolarmente usato per illustrazioni, icone, loghi ed elementi grafici perché ha minor peso, può essere modificato tramite CSS, può essere ridimensionato senza perdita di qualità e supporta l'applicazione di animazioni.


In pratica utilizzando una maschera SVG possiamo dare al separatore la forma che più ci piace. Fatto questo dobbiamo poi "agganciare" il separatore direttamente all’inizio o fine della sezione interessata, richiamando il colore della sezione precedente e di quella successiva. 


È tutto molto semplice. Vediamo insieme come si fa.


Come creare un separatore animato

Per capire come usare al meglio l'Oggetto Animated Shape Separator, vediamo quali sono i passaggi per ottenere il risultato illustrato dall'immagine seguente: 


   

  • Al Passo 4 - Creazione della Pagina inserisci nella riga 1 un Oggetto Testo e un Oggetto Immagine affiancati. Inserisci poi nella riga 2 l'Oggetto Animated Shape Separator. 
  • Per gli Oggetti presenti nella riga 1 puoi impostare il colore giallo di sfondo cliccando sul pulsante Stile presenta nella Barra Strumenti e usando l'opzione Colore di Sfondo.
  • A questo punto fai doppio click sull'Oggetto Animated Shape Separator inserito nella riga 2 in modo da accedere alla finestra delle impostazioni.
  • Per prima cosa devi scegliere quale forma dare al tuo separatore selezionandola dall'elenco Tipo: nell'esempio abbiamo utilizzato la 'Forma 1' che prevede un'onda. Puoi decidere anche quante Forme avere: scegliendo 4, il massimo, avrai un separatore animato più "corposo"; all'opposto, con una forma singola avrai un'animazione più lineare e compatta. 
  • A questo punto puoi imposta l'Altezza in pixel del separatore.
  • In base a come sono disposti i contenuti della tua pagina e all'effetto grafico che vuoi ottenere, puoi anche decidere di riflettere orizzontalmente e/o verticalmente  la forma del separatore. Per avere le onde agganciate sotto alla testo e all'immagine come nell'esempio, devi applicare un riflesso verticale.
  • Ora, occupati dei colori. Perché non ci sia alcuno stacco tra i contenuti e il separatore, imposta come Colore lo stesso giallo usato per lo sfondo degli Oggetti della riga 1. Come Colore di Sfondo, invece, devi lasciare il bianco.
  • Se vuoi aggiungere un effetto di tridimensionalità, puoi attivare un'ombra sul separatore e deciderne il colore, lo spessore e il fattore di diffusione.
  • Infine, devi impostare la Velocità dell'animazione.
  • Hai finito di configurare il tuo separatore animato ma perché non ci siano spazi vuoti tra le righe 1 e 2 della tua pagina e, dunque, il separatore sia perfettamente collegato alla sezione precedente, devi ancora verificare i margini. Clicca su Ok per uscire dalla finestra delle impostazioni dell'Oggetto Animated Shape Separator e tornare a alla griglia di impaginazione del Passo 4. 
  • Seleziona uno per volta gli Oggetti presenti nelle righe 1 e 2 e clicca sul pulsante Margini: usa le opzioni disponibili per azzerare i Margini esterni. In questo modo non ci saranno stacchi tra la sezione precedente e il separatore che sembreranno essere un elemento unico dal bordo inferiore ondulato e animato.


Ovviamente questo è solo uno dei risultati che puoi ottenere con l'Oggetto Animated Shape Separator: ora che hai capito il meccanismo alla base potrai facilmente sperimentare soluzioni alternative, fino a trovare quelle che si adattano meglio al design delle tue pagine.

  

Come disegnare una forma personalizzata 

Come abbiamo anticipato, oltre a scegliere tra numerose forme predefinite, l'Oggetto Animated Shape Separator ti permette anche di utilizzare una tua maschera SVG. Vediamo insieme quali sono i passaggi da seguire in questo caso:

  • Per prima cosa devi aprire un programma di grafica vettoriale. Qualsiasi piattaforma che permette di creare tracciati, può essere usato per esportare un file SVG:  Softonic Inkscape, Adobe Illustrator, Affinity Designer o anche i classici Adobe XD, Figma, Sketch, ecc..  In alternativa, online si trovano molti tool specifici proprio per la creazione di separatori: uno di questi è https://www.shapedivider.app. ShapeDivider è gratuito e, oltre a permettere la creazione del separatore in SVG, fornisce anche il relativo codice HTML. 
  • Scelto il programma, disegna la forma che vuoi utilizzare per il tuo separatore.
  • Partendo dal poligono disegnato, devi ottenere un percorso. Se, per esempio, usi Inkscape puoi farlo selezionando l'oggetto e usando il comando Path > Object to Path. Puoi vedere direttamente il codice dell'SVG nella finestra richiamata attraverso il comando Edit > XML Editor.
  • Nel caso in cui il tuo software grafico non permettesse questa modalità di visualizzazione puoi semplicemente salvare il file SVG e, successivamente, aprirlo con un editor di testo come Blocco Note per visualizzare e copiare i dati.
  • Se, invece, usi l'App ShapeDivider puoi usare il configuratore per disegnare il separatore: è tutto molto intuitivo e vedi subito il risultato che ottieni. Quando sei soddisfatto, puoi cliccare sul pulsante con la nuvoletta per visualizzare il codice HTML che ti occorre.   
  • In qualsiasi caso, l'importante è ottenere un codice SGV come questo: 
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
    </svg>

Come vedi la struttura ricorda molto l’HTML, ovviamente con tag differenti. Gli elementi del codice che ti interessano sono i valori assunti da 'viewBox' e 'd' (path data): nell'esempio sono i valori evidenziati in giallo.

  • Ora puoi tornare a lavorare in WebSite X5. Apri l'Oggetto Animated Shape Separator e come Tipo scegli 'Forma Personalizzata'. 
  • Imposta tutti i parametri necessari per definire il separatore e l'animazione.
  • Riporta i valori della View Box all'interno dell'apposito campo.
  • Copia (CTRL+C) dal codice SVG della maschera il valore dell'elemento d e incollalo (CTRL+V) all'interno del campo Forma (d).  
#tip - Sia per la viewBox che per la Forma devi riportare solo i valori degli elementi wiewBox e d, ovvero quanto riportato tra l'apertura e la chiusura delle virgolette (virgolette escluse). Per non commettere errori di trascrizione ti conviene copiarli (CTRL+C) e incollarli (CTRL+V).  
  • Clicca su Ok per confermare e guarda la tua pagina in anteprima locale per verificare che il risultato sia esattamente quello che ti aspettavi.


#tip - Alternative. Oltre all'Oggetto Animated Shape Separator sono disponibili anche gli Oggetti Simple Separator, Separator, Shape Separator e Waves Separator: il primo serve per gestire lo spazio tra due contenuti, il secondo permette di creare un elemento grafico lineare statico, il terzo prevede la realizzazione di un separatore statico dalla forma personalizzata mentre l'ultimo consente di creare un'onda animata. Ricorda che per gestire gli spazi hai sempre a disposizione la finestra 'Margine e Allineamento' richiamata dal pulsante  presente nella Barra degli Strumenti sopra la Griglia di impaginazione. Non è invece consigliabile inserire Celle o Righe vuote per modificare gli allineamenti degli Oggetti.  



Impaziente di usarlo nelle pagine del tuo sito? Installa subito l’Oggetto Animated Shape Separator


Non hai Crediti a sufficienza per acquistare questo Oggetto? Vedi tutti i pacchetti di Crediti