Divi , il popolare tema WordPress, è noto per i suoi moduli versatili che consentono ai designer e agli sviluppatori di siti Web di creare layout straordinari senza sforzo. Tra il suo impressionante arsenale di moduli, il modulo Divi Divider si distingue come uno strumento unico che consente agli utenti di creare divisori accattivanti. In questo post del blog, approfondiremo l'affascinante mondo dei divisori sfumati ed esploreremo come sfruttare il modulo Divi Divider per migliorare i tuoi progetti. Daremo uno sguardo più da vicino a come funzionano i divisori di gradiente e ti forniremo esempi stimolanti per accendere la tua creatività.
Anteprima
Ecco un'anteprima di come apparirà il nostro design del gradiente alla fine.
Come creare divisori sfumati con il modulo divisore di Divi
Esistono diversi metodi per costruire un divisore utilizzando il modulo divisore di Divi. Per impostazione predefinita, il modulo presenta una linea come divisore. Tuttavia, è possibile disattivare questa linea e utilizzare le impostazioni di Sfondo del modulo per generare un divisore che può essere personalizzato utilizzando varie opzioni di Sfondo come colori, sfumature, immagini e altro. Invece di visualizzare il divisore vero e proprio, ci concentreremo sullo stile del contenitore del divisore per produrre un divisore dallo stile unico.
Nascondi divisore
La procedura è semplice. Aggiungi prima un modulo divisore al tuo layout, quindi nascondi il divisore nella scheda contenuto.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti ora
Sfondo divisore
Successivamente, scegli il tipo di sfondo che desideri utilizzare dal menu Impostazioni sfondo nella scheda Contenuto. Ci concentreremo sulle opzioni del gradiente di sfondo in questo post.
Aggiungi dimensionamento e spaziatura
Per creare un divisorio elegante praticamente di qualsiasi dimensione o forma, utilizza le opzioni Ridimensionamento e Spaziatura nella scheda Progettazione per regolare l'altezza e la larghezza del contenitore del divisore. Per generare la dimensione desiderata, utilizzare larghezza e altezza, larghezza massima e altezza massima, allineamento del modulo e imbottitura superiore e inferiore.
Aggiungi raggio bordo
Per modellare ulteriormente la forma, aggiungi opzioni di bordo come Raggio bordo. Gli angoli possono essere regolati insieme o separatamente per produrre forme affascinanti. Per un design speciale, puoi inoltre aggiungere Larghezza bordo, Stili, ecc.
Divisore di gradiente
Utilizzeremo la pagina di destinazione del pacchetto di layout Home Baker gratuito incluso in Divi per il nostro primo divisore sfumato. La grafica di questo pacchetto di layout presenta sfumature di colore marrone e contorni potenti e scuri. Lo replicheremo con il nostro gradiente utilizzando la tavolozza dei colori del pacchetto layout. Utilizzeremo il modulo divisore già presente nella sezione eroi per la nostra prima illustrazione. Questo è semplice, ma ha un grande impatto visivo. Ecco il layout prima di aggiungere il modulo divisore come riferimento.
Visibilità
Scegli No per Mostra divisore nelle opzioni di visibilità per il modulo Divisore.
- Mostra divisore: no
Pendenza
Seleziona la scheda Sfumatura di sfondo scorrendo verso il basso fino a Sfondo. Aggiungeremo cinque interruzioni di gradiente per questo. Verranno utilizzati i valori predefiniti per gli altri parametri del gradiente. I parametri per ciascun arresto gradiente sono elencati di seguito.
- Primo arresto del gradiente: 0px, #dcc087
- Secondo arresto del gradiente: 16px, #e6b060
- Terzo arresto del gradiente: 22px, #f19d33
- Quarto arresto del gradiente: 31px, #f49826
- Quinto arresto del gradiente: 48px, #3b261e
I pixel dovrebbero essere usati come unità del gradiente. Le tonalità che cercavamo sono ora disponibili. Tutto ciò che resta da fare è ottimizzare le dimensioni.
- Unità gradiente: pixel
Dimensionamento
Successivamente scegli la scheda Design. Metti 100% per la Larghezza sotto Dimensionamento. Tutte e tre le dimensioni del dispositivo dovrebbero avere l'altezza impostata su 40 px. La chiusura modulare salverà le tue impostazioni.
- Larghezza: 100%
- Altezza: 40px
Anteprima finale
Ora qui abbiamo un'anteprima finale del nostro design del gradiente in azione.
Pensieri finali
Questo conclude la nostra discussione sull'utilizzo del modulo divisore di Divi per creare divisori gradiente. Per creare divisori gradienti personalizzati, utilizza l'opzione gradiente nel modulo Divisori. Possiamo realizzare divisori sfumati in una varietà di dimensioni e forme utilizzando le opzioni di angolo, spaziatura e dimensionamento del bordo. Possiamo progettare divisori sfumati distintivi che si distingueranno dalla massa con solo poche scelte di base.
