Compatibilità:

WebSite X5 Evo e Pro

Quando crei una pagina web, la cura degli spazi e dei dettagli grafici fa la differenza tra un design ordinario e uno davvero memorabile. Gli spazi vuoti aiutano a dare respiro ai contenuti, ma con l'Oggetto Opzionale Shape Separator puoi fare molto di più: aggiungere separatori grafici accattivanti che non solo organizzano, ma arricchiscono il layout visivo della tua pagina.


L'Oggetto Shape Separator ti permette di andare oltre le semplici linee rette e di scegliere tra forme dinamiche come onde, linee curve o separatori complessi. Inoltre, puoi importare delle tue maschere grafiche in formato SVG per creare separatori completamente personalizzati, rendendo unico il design del tuo sito. Nella pagina di Anteprima trovi alcuni esempi di come trasformare una semplice separazione in un elemento grafico distintivo.


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

Per capire come usare al meglio l'Oggetto 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 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 Shape Separator inserito nella riga 2 in modo da accedere alla finestra delle impostazioni.
  • Per prima cosa imposta l'Altezza in pixel del separatore.
  • Ora, occupati dei colori. Il separatore deve agganciarsi alla sezione di pagina precedente pertanto devi impostare 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 scegliere quale forma dare al tuo separatore selezionandola dall'elenco Tipo: nell'esempio abbiamo utilizzato la 'Forma 10'. In base a come sono disposti i contenuti della tua pagina e all'effetto grafico che vuoi ottenere, puoi anche decidere di ruotare verticalmente e/o orizzontalmente la forma del separatore.
  • Hai finito di configurare il tuo separatore 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 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.


Ovviamente questo è solo uno dei risultati che puoi ottenere con l'Oggetto 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 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 Shape Separator e, dopo aver definito tutte le altre impostazioni, come Tipo scegli 'Forma Personalizzata'. 
  • 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 Shape Separator sono disponibili anche l'Oggetto Separator e l'Oggetto Simple Separator: mentre il primo permette di creare un elemento grafico lineare, il secondo consente solo di gestire lo spazio tra due contenuti. 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 Shape Separator


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