Vuoi creare transizioni di sfondo tra gli elementi Divi ?
Crea transizioni di design di sfondo senza soluzione di continuità tra gli elementi Divi è un ottimo modo per migliorare il design del tuo sito web Divi.
Ciò ti consente di trasferire senza problemi una sfumatura, un motivo e una maschera di sfondo tra una linea e una sezione in modo creativo.
Ad esempio, puoi avere un motivo o una transizione di maschera in diversi colori senza perdere l'allineamento generale e l'aspetto simmetrico del disegno.
In questo tutorial, utilizzeremo le opzioni di progettazione dello sfondo integrate di Divi per creare una transizione di progettazione dello sfondo senza interruzioni tra una sezione e una linea Divi. L'applicazione e la versatilità di questo design sono illimitate, portando le opzioni di design dello sfondo di Divi a un livello completamente nuovo!
Cominciamo.
Panoramica
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Ecco alcuni altri modelli di esempio che sono possibili con poche semplici modifiche alle maschere e ai motivi di sfondo.
Crea una nuova pagina con Divi Builder
Per iniziare, dovrai fare quanto segue:
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci da zero)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Creazione di una transizione senza interruzioni sullo sfondo tra una sezione Divi e una linea
Creazione di un'intestazione come contenuto segnaposto
Leggi anche: Divi: come creare schede con effetto al passaggio del mouse dalle linee
Prima di entrare, dobbiamo aggiungere un'intestazione as contenuto fittizio. Per iniziare, aggiungi una riga di una colonna alla sezione predefinita della pagina.
Quindi aggiungi un modulo di testo alla riga.
Aggiungi testo in formato H1.
Sotto la scheda Design, aggiorna il design del testo dell'intestazione come desiderato.
- Carattere: Roboto Condensato
- Peso del carattere: grassetto
- Stile: TT
- Allineamento del testo: centrato
- Colore del testo: #000000
- Dimensione del testo dell'intestazione: 4vw
- Spaziatura lettere: 0.1em
- Altezza della linea: 1.3 em
Disegno dello sfondo della sezione
Aggiunto riempimento alla sezione
Una volta che l'intestazione falsa è a posto, apri le impostazioni della sezione e aggiorna la spaziatura come segue:
- Imbottitura (superiore e inferiore): 15vw
Aggiunto il gradiente di sfondo alla sezione
Ora che abbiamo più spazio su cui lavorare, siamo pronti per aggiungere il nostro design di sfondo alla sezione. Sotto la scheda Gradiente di sfondo, aggiungi i seguenti punti di sfumatura:
- Gradiente si ferma:
- 0%: #4f0f75 (a 0%)
- 25%: #2843c9 (al 25%)
- 50%: #4ae2e0 (al 50%)
- 75%: #3881ff (al 75%)
- 100%: #4f0f75 (a 100%)
Aggiunta di un motivo di sfondo alla sezione
Sotto la scheda Pattern di sfondo, aggiorna quanto segue:
- Motivo: strisce diagonali
- Colore del modello: rgba (79,15,117,0.23)
- Trasforma: ruota
- Dimensione del modello: dimensione personalizzata
- Larghezza: 7vw
- Altezza: 5vw
- Origine ripetizione motivo: centro
Nota: Assicurati di utilizzare l'unità di lunghezza VW per la larghezza e l'altezza del motivo. E assicurati anche di impostare l'origine ripetuta su "centro". Ciò manterrà il motivo di sfondo nella stessa posizione del motivo di sfondo che aggiungeremo alla riga in seguito.
Aggiunta di una maschera di sfondo alla sezione
Sotto la scheda Maschera di sfondo, aggiungi quanto segue:
- Maschera di sfondo: Blob di livello
- Colore maschera: rgba(0,0,0,0.7)
- Larghezza maschera: 100vw
- Posizione: Centro
Nota: Proprio come con il modello, dobbiamo dimensionare la maschera utilizzando l'unità di lunghezza VW. Dobbiamo anche dare alla maschera una posizione centrale.
Disegno di sfondo della linea
Copia e incolla lo sfondo della sezione sullo sfondo della riga
Per accelerare il processo di progettazione dello sfondo della linea, copia le impostazioni dello sfondo della sezione.
Quindi incolla lo sfondo sulla riga esistente.
A questo punto puoi già vedere come il motivo di sfondo e la maschera sulla linea effettuino una transizione senza soluzione di continuità allo sfondo della sezione.
Sembra che la linea abbia uno sfondo trasparente, ma in realtà è lo stesso motivo e maschera utilizzati nella sezione con la stessa dimensione e posizione.
Regola la dimensione della riga e il riempimento usando VW
Successivamente, dobbiamo assegnare alla nostra riga una larghezza personalizzata utilizzando l'unità di lunghezza VW. Aggiorna quanto segue:
- Larghezza: 75vw
- Larghezza massima: 75vw
- Imbottitura (superiore, inferiore, sinistra e destra): 10vw
Regola le interruzioni del gradiente sulla linea
Successivamente, dobbiamo regolare le interruzioni del gradiente sullo sfondo della linea per una transizione senza interruzioni nel gradiente dello sfondo della sezione.
Sotto la scheda Gradiente di sfondo, manterremo i tre punti di sfumatura centrale ereditati dallo sfondo della sezione) e rimuoveremo la prima e l'ultima sfumatura.
Quindi imposta la prima fermata su 0% e la terza fermata su 100%. Una volta terminato, dovresti avere i seguenti gradienti.
- Gradiente si ferma
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ss
Aggiungi l'ombra del riquadro alla linea
Per dare un tocco in più al design ed enfatizzare la transizione senza soluzione di continuità dello sfondo, possiamo aggiungere un'ombra a riquadro alla riga.
- Box Shadow: vedi screenshot
- Posizione verticale: 0px
- Box Shadow Blur Forza: 4vw
- Colore ombra: rgba(0,0,0,0.5)
Regola il colore del motivo di sfondo della linea
Ora che abbiamo tutti gli elementi di sfondo a posto, possiamo iniziare a regolare i colori per un design più creativo.
Sotto l'opzione Pattern di sfondo riga, aggiorna quanto segue:
- Colore del modello: rgba (255,255,255,0.23)
Regola il colore della maschera di sfondo della linea
Possiamo anche aggiornare il colore della maschera per la linea per far risaltare davvero il design.
Sotto la scheda Maschera di sfondo, aggiorna quanto segue:
- Colore maschera: #ffffff
- Trasformazione maschera: invertita
Risultato finale
Vediamo il risultato finale.
Scarica DIVI ora!!!
Più possibilità
Ecco alcuni altri modelli di esempio che sono possibili con poche semplici modifiche alle maschere e ai motivi di sfondo.
Guarda anche: Divi: come utilizzare il "Gradient Builder" per abbellire le tue immagini
Scarica DIVI ora!!!
Conclusione
La chiave per creare transizioni di design di sfondo senza soluzione di continuità in Divi è usare saggiamente queste unità di lunghezza VW.
Innanzitutto, dobbiamo creare un design di sfondo della sezione che si adatti alla larghezza della finestra del browser (da una posizione centrata sulla pagina). Una volta terminato, possiamo utilizzare lo stesso design di sfondo a una riga. Dopodiché, abbiamo solo alcune modifiche al gradiente e al colore per un design straordinario.
Si spera che questa tecnica aggiunga un'altra utile abilità di progettazione per progetti futuri.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
