Come creare transizioni di design di sfondo senza soluzione di continuità tra gli elementi Divi

La creazione di transizioni di design di sfondo senza interruzioni tra gli elementi Divi è un ottimo modo per elevare il design del tuo sito Web Divi. L'idea è di creare disegni di sfondo corrispondenti (sia per una riga che per una sezione) che condividono la stessa dimensione e posizione rispetto alla larghezza del browser (usando le unità di lunghezza vw). Ciò ti consente di trasferire senza problemi un gradiente di sfondo, un motivo e una maschera tra una riga e una sezione in modi creativi. Ad esempio, potresti avere una transizione di un motivo o di una maschera in colori diversi 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 riga 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!

Iniziamo.

Sbirciata

Ecco una rapida occhiata al design che creeremo in questo tutorial.

Ecco alcuni altri progetti di esempio che sono possibili con poche semplici modifiche alle maschere e ai motivi di sfondo.

Scarica il layout GRATUITAMENTE

Per mettere le mani sul design di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non verrai "iscritto nuovamente" né riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo pacchetto di layout pagina di destinazione Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi Divi incredibili e gratuiti. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo email qui sotto e clicca su download per accedere al layout pack.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua Libreria Divi, procedi come segue:

1. Vai alla Libreria Divi.
2. Fai clic sul pulsante Importa nella parte superiore della pagina.
3. Nel popup di portabilità, seleziona la scheda di importazione
4. Scegli il file di download dal tuo computer (assicurati di decomprimere prima il file e di utilizzare il file JSON).
5. Quindi fare clic sul pulsante di importazione.

Una volta terminato, il layout della sezione sarà disponibile in Divi Builder.

Veniamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non lo hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Costruisci da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Creazione di una transizione di progettazione di sfondo senza interruzioni tra una sezione e una riga Divi

Parte 1: Creazione di un'intestazione come contenuto fittizio

Prima di iniziare a progettare i nostri sfondi, dobbiamo aggiungere un'intestazione come contenuto fittizio. Per iniziare, aggiungi una riga di una colonna alla sezione predefinita della pagina.

Quindi aggiungi un modulo di testo alla riga.

Aggiungi un'intestazione H1 al contenuto del corpo.

Nella scheda del design, aggiorna il design del testo dell'intestazione come preferisci. Per questo design, è utile aggiungere un'unità di lunghezza VW per la dimensione del testo dell'intestazione in modo che si ridimensioni in modo fluido con il resto del design.

2. Progettazione dello sfondo della sezione

Aggiunta di VW Padding alla sezione

Una volta che l'intestazione fittizia è a posto, apri le impostazioni della sezione e aggiorna la spaziatura come segue:

• Imbottitura: 15vw superiore, 15vw inferiore

Aggiunta del gradiente di sfondo alla sezione

Ora che abbiamo più spazio su cui lavorare, siamo pronti per aggiungere il nostro design di sfondo alla sezione. Nella scheda sfumatura, aggiungi le seguenti interruzioni di sfumatura:

• Gradient Stop 1: #4f0f75 (a 0%)
• Gradient Stop 2: #2843c9 (al 25%)
• Gradient Stop 3: #4ae2e0 (al 50%)
• Gradient Stop 4: #3881ff (al 75%)
• Gradient Stop 5: #4f0f75 (al 100%)

Aggiunta di un motivo di sfondo alla sezione

Nella scheda Modello, aggiorna quanto segue:

• Motivi: strisce diagonali
• Colore del modello: rgba (79,15,117,0,23)
• Trasformazione modello: ruota
• Dimensione del modello: dimensione personalizzata
• Larghezza del modello: 7vw
• Altezza del modello: 5vw
• Origine ripetizione motivo: centro

Nota: assicurarsi 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

Nella scheda Maschera, aggiungi quanto segue:

• Maschera di sfondo: Blob di livello
• Colore maschera: rgba(0,0,0,0.7)
• Dimensione maschera: 100vw
• Posizione maschera: centro

Nota: proprio come con il modello, dobbiamo dare alla maschera una dimensione usando l'unità di lunghezza VW. Dobbiamo anche dare alla maschera una posizione centrale.

3. Progettazione dello sfondo della riga

Copia e incolla lo sfondo della sezione sullo sfondo della riga

Per accelerare il processo di progettazione dello sfondo della riga, 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 riga costituiscono una transizione senza soluzione di continuità allo sfondo della sezione. Sembra che la riga abbia uno sfondo trasparente, ma in realtà è lo stesso motivo e maschera utilizzati nella sezione con le stesse dimensioni e posizione.

Regola le dimensioni e il riempimento della riga 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: 10vw in alto, 10vw in basso, 10vw a sinistra, 10vw a destra

Panoramica della spaziatura e del dimensionamento nelle unità di lunghezza VW

Finora, abbiamo aggiunto valori di spaziatura e posizione nel nostro layout utilizzando l'unità di lunghezza VW. Ecco una rapida illustrazione dei valori attualmente utilizzati.

Finora, abbiamo una transizione senza interruzioni tra lo sfondo della riga e lo sfondo della sezione per i modelli e le maschere. Successivamente, aggiorneremo il gradiente di sfondo della riga in modo che sia anche senza soluzione di continuità.

Regola le interruzioni del gradiente sulla riga

Successivamente, dobbiamo regolare le interruzioni del gradiente sullo sfondo della riga per una transizione senza interruzioni nel gradiente dello sfondo della sezione. Nella scheda del gradiente, manterremo le tre fermate intermedie del gradiente ereditate dallo sfondo della sezione) ed elimineremo la prima e l'ultima fermata del gradiente. Quindi posizionare il primo stop allo 0% e il terzo stop al 100%. Una volta terminato, dovresti avere i seguenti gradienti.

• Gradient Stop 1: #2843c9 (a 0%)
• Gradient Stop 2: #4ae2e0 (al 50%)
• Gradient Stop 3: #3881ff (al 100%)

Aggiungi l'ombra della casella alla riga

Per dare un po' di elevazione al disegno e per enfatizzare la transizione senza soluzione di continuità dello sfondo, possiamo aggiungere un'ombra a riquadro alla riga.

• Box Shadow: vedi screenshot
• Posizione verticale dell'ombra del riquadro: 0px
• Box Shadow Blur Forza: 4vw
• Colore ombra scatola: rgba(0,0,0,0.5)

Regola il Colore del motivo di sfondo della riga

Ora che abbiamo tutti gli elementi di sfondo al loro posto, possiamo iniziare a regolare i colori per un design più creativo. Sotto l'opzione modello per la riga, aggiorna quanto segue:

• Colore del modello: rgba (255,255,255,0,23)

Regola il Colore della maschera di sfondo della riga

Possiamo anche aggiornare il colore della maschera per la riga per far risaltare davvero il design! Nella scheda maschera, aggiorna quanto segue:

• Colore maschera: #ffffff
• Trasformazione maschera: invertita

Risultato finale

Diamo un'occhiata al risultato finale.

Più possibilità

Ecco alcuni altri progetti di esempio che sono possibili con poche semplici modifiche alle maschere e ai motivi di sfondo.

Pensieri finali

La chiave per creare transizioni di design di sfondo senza soluzione di continuità in Divi è usare saggiamente le unità di lunghezza VW. Innanzitutto, dobbiamo creare un design dello 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 su una riga. Dopodiché, dobbiamo solo apportare alcune modifiche al gradiente e ai colori per un design straordinario. Si spera che questa tecnica aggiunga un'altra utile abilità di progettazione per progetti futuri

Non vedo l'ora di sentirti nei commenti.

Saluti!