Come creare transizioni di sezione di forma irregolare con Divi

Uno dei modi migliori per migliorare il design del tuo sito Web è utilizzare diverse transizioni di sezione. In un post precedente, ti abbiamo mostrato come puoi farlo usando solo le opzioni integrate di Divi. Tuttavia, se stai cercando di creare qualcosa di un po' più avanzato o personalizzato, puoi anche creare transizioni di sezioni di forma irregolare. A causa della loro complessità, il modo migliore per affrontare questo problema è utilizzare immagini con un bordo trasparente.

In questo post, ti mostreremo come puoi farlo. Non solo ti mostreremo cosa fare all'interno di Divi Builder, ma ti mostreremo anche come creare questi bordi trasparenti sulle immagini con pochi passaggi utilizzando Photoshop.

Esempio di risultato

Diamo un'occhiata a un esempio di layout con straordinarie transizioni di sezione di forma irregolare:

Come puoi notare, puoi utilizzare questi bordi trasparenti in tutto il tuo sito e all'interno di diverse sezioni. È importante ricordare che, a seconda di quanto è grande il tuo bordo trasparente, dovresti avere abbastanza spazio all'interno delle sezioni per adattarsi ai diversi contenuti che stai cercando di condividere. Creerà anche un buon equilibrio tra le varie sezioni.

Come creare transizioni di sezione di forma irregolare con Divi

Iscriviti al nostro canale Youtube

Crea bordi trasparenti con Photoshop

Puoi ottenere le forme originali che desideri con Photoshop. Potresti anche optare per un'alternativa gratuita chiamata GimpShop. Tuttavia, per questo tutorial utilizzeremo Photoshop.

Apri Photoshop

Inizia aprendo Photoshop sul tuo computer.

Apri immagine

Dopo averlo fatto, apri l'immagine su cui desideri lavorare.

Fare doppio clic su Immagine e creare livello

Una volta che l'immagine è stata caricata in Photoshop, fai doppio clic sul livello dell'immagine e creane un nuovo livello (Livello 0).

Aggiungi un altro livello

Per aggiungere il bordo trasparente, avrai bisogno anche di un altro livello, quindi vai avanti e aggiungilo facendo clic sull'icona che abbiamo contrassegnato nella schermata di stampa qui sotto. Una volta creato il livello (Livello 1), assicurati che sia posizionato sopra il livello che contiene l'immagine.

Seleziona pennello e dimensione

Pur avendo attivato il Livello 1, vai avanti e fai clic sull'icona del pennello.

Una volta fatto, puoi regolare le dimensioni e il motivo utilizzati per il pennello secondo le tue preferenze. Ci sono tonnellate di pennelli Photoshop gratuiti su Internet, quindi a seconda del tipo di sito Web che stai creando, scegline uno adatto. Inoltre, assicurati che l'opacità sia impostata al 100%.

Inizia a usare il pennello sui bordi

Una volta posizionato il pennello, inizia a usarlo sul lato che vuoi che sia trasparente. Assicurati di coprire l'intero bordo con il pennello in modo che in seguito diventi tutto trasparente.

CTRL (Windows) o Comando (Mac) + Seleziona nuovo livello

Una volta terminato, puoi premere CTRL (per Windows) o Comando (per Mac) sulla tastiera e fare clic contemporaneamente su Livello 1. Vedrai che Photoshop selezionerà tutto ciò che hai aggiunto a quel livello, che è, in questo caso, il bordo sagomato.

Rendi invisibile il nuovo livello

Quindi, rendi invisibile il livello 1 rimuovendo l'occhio come contrassegnato nella schermata di stampa sottostante.

Seleziona immagine ed elimina nuovo livello

Quindi, fai clic sul livello che contiene la tua immagine e premi il pulsante Elimina sulla tastiera. Una volta fatto, vedrai che il bordo diventerà trasparente.

Seleziona lo strumento Selezione rettangolare e fai clic su Immagine

Fare clic sullo strumento Selezione rettangolare e premere da qualche parte a caso sull'immagine.

Salva immagine come PNG

Infine, dovrai salvare l'immagine come PNG in modo da poterla utilizzare sul tuo sito web.

Aggiungi sfondi a Divi

Una volta create le diverse immagini che desideri utilizzare all'interno del tuo sito Web Divi (utilizzando la tecnica di Photoshop sopra), il resto è semplice. Le immagini che hai creato servono come sfondo di una particolare sezione. Ti mostreremo solo come costruire la sezione degli eroi del nostro esempio poiché lo stesso metodo si applica anche alle diverse sezioni.

Aggiungi nuova sezione standard

Aggiungi una nuova pagina, passa a Visual Builder e aggiungi una nuova sezione standard a quella pagina.

Carica immagine di sfondo

Dopo aver posizionato tutti i moduli che vuoi che appaiano nella sezione degli eroi, puoi andare avanti e aggiungere l'immagine che hai creato nella parte precedente di questo post.

Aggiungi colore di sfondo

Una volta fatto ciò, puoi decidere quale colore apparirà nella parte trasparente della tua immagine. In questo esempio, abbiamo usato '#dddddd' come colore di sfondo. Puoi immediatamente vedere che il colore apparirà proprio all'interno della parte trasparente dell'immagine.

Assicurati che ci sia abbastanza imbottitura

A seconda del numero di moduli e delle dimensioni del bordo trasparente che hai utilizzato nella sezione degli eroi, potresti dover aggiungere un'imbottitura personalizzata. Gioca con i diversi valori di riempimento della sezione e vedi quale ti dà il miglior risultato.

Aggiungi lo stesso colore di sfondo alla sezione successiva

Per assicurarti che le diverse sezioni si fondano bene tra loro, usa lo stesso colore di sfondo che hai usato nella sezione degli eroi anche nella sezione successiva. Ciò non significa necessariamente che devi utilizzare un colore di sfondo a un colore per la tua prossima sezione, puoi utilizzare uno sfondo sfumato e purché i colori di entrambe le sezioni si fondono magnificamente.

Esempio

Come accennato in precedenza, puoi creare tutti i bordi dell'immagine che desideri e utilizzarli in modo creativo in tutto il tuo sito web. Per dartene un assaggio, abbiamo creato la seguente anteprima di esempio:

Pensieri finali

In questo post, ti abbiamo mostrato come puoi facilmente utilizzare le transizioni di sezione di forma irregolare. Usando questo metodo, puoi praticamente creare qualsiasi tipo di transizione di sezione che desideri. Oltre a mostrarti come creare queste forme irregolari con pochi passaggi in Photoshop, ti abbiamo anche mostrato come puoi farlo funzionare all'interno di Divi Builder. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!