Come creare splendidi layout di griglia con il modulo video di Divi (parte 4)

Benvenuto nel post 4 di 5 nella nostra miniserie Come creare splendidi layout di griglia con il modulo video di Divi. In questa serie ti spiegheremo come creare fantastici layout di griglia da zero utilizzando Divi Visual Builder. E se sei preoccupato che sia troppo complicato, ripensaci! Tutti questi layout possono essere creati e stilizzati utilizzando Visual Builder senza codice aggiuntivo.

Spero che finora ti stia piacendo il layout della griglia. Il layout di oggi è il numero 4 della serie, ed è uno dei miei preferiti (e più veloce da implementare). Non solo è facile (e divertente) costruire usando Divi, ma è anche personalizzabile per adattarsi alla combinazione di colori del tuo sito. Le opzioni di sfumatura dello sfondo sono la caratteristica principale di questo design che sono state utilizzate per creare i due colori di tono separati da una linea diagonale. La spaziatura è anche intenzionale per rendere i video facilmente percepibili. Probabilmente, questo design potrebbe non rientrare nell'ambito di ciò che normalmente chiameremmo una "griglia", ma penso che ne vedrai il potenziale.

Quindi eccoci qui. Ti mostrerò quanto è facile creare questo design a griglia utilizzando il modulo video e alcuni elementi di sfondo personalizzati.

Ecco come sarà il risultato finale

Il concetto e l'ispirazione

Stavo cercando un layout carino e pulito che organizzasse piccoli lotti di video da utilizzare per cose come tutorial o corsi. Questo, combinato con il mio desiderio impulsivo di giocare con i gradienti di sfondo, sono uscito con questo. Spero vi piaccia.

Iniziamo.

Implementazione del design con Divi

Iscriviti al nostro canale Youtube

Innanzitutto, aggiungi una sezione regolare con una struttura a larghezza intera (1 colonna).

Quindi aggiungi un modulo di testo alla colonna. Questo servirà come titolo o titolo per la sezione della pagina.

Aggiorna le impostazioni del testo come segue:

Opzioni di contenuto
Contenuto: [inserisci il testo per il titolo]

Opzioni di progettazione

Colore del testo: chiaro
Carattere del testo: Arimo
Dimensione carattere del testo: 56px
Spaziatura delle lettere del testo: 1px
Altezza riga di testo: 1em

Salva le impostazioni

Non sarai ancora in grado di vedere nulla perché hai del testo bianco su uno sfondo bianco, ma va bene. Andiamo avanti e aggiungiamo il gradiente di sfondo della nostra sezione. Vai alle impostazioni della sezione e, nella sezione dei contenuti, aggiorna le seguenti opzioni:

Colori sfumati di sfondo: #121212, #ffffff
Tipo di gradiente: lineare
Direzione del gradiente: 198 gradi
Posizione di partenza: 45%
Posizione finale: 45%

Successivamente, aggiorna le Impostazioni riga per la riga appena aggiunta come segue:

Opzioni di progettazione

Rendi questa riga a larghezza intera: S
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 4
Equalizza le altezze delle colonne: S
Imbottitura personalizzata: 1% in alto, 5% a destra, 5% in basso, 5% a sinistra

Salva le impostazioni

Ora aggiungi un'altra riga con una struttura ⅔ ⅓ (2 colonne) direttamente sotto la riga appena creata.

Quindi, aggiungi un modulo video alla colonna di sinistra.

Aggiorna le impostazioni video come segue:

Opzioni di contenuto

Video MP4/URL: [inserisci l'URL del tuo video]
URL sovrapposizione immagine: [inserire URL immagine sovrapposizione]

Salva le impostazioni

Quindi, duplica (o copia) il modulo video che hai appena creato due volte e trascina (o incolla) i due video duplicati in modo che si accumulino nella colonna di destra.

Aggiorna il contenuto dei video per includere l'URL corretto e le immagini di copertina.

Vai avanti e aggiungi un modulo Blurb sotto i due moduli video nella colonna di destra. Questo può servire come descrizione dei video all'interno di questa griglia.

Aggiorna le impostazioni di Blurb come segue:

Opzioni di contenuto

Titolo: [inserisci titolo]
Contenuto: [inserisci contenuto o descrizione]

Opzioni di progettazione

Colore del testo: chiaro

Salva le impostazioni

Ora modifica le Impostazioni riga per la riga contenente i video appena creati come segue:

Opzioni di contenuto

Colori sfumati di sfondo: #4999c1, #121212
Tipo di gradiente: lineare
Direzione del gradiente: 198 gradi
Posizione di partenza: 45%
Posizione finale: 45%

Opzioni di progettazione

Rendi questa riga a larghezza intera: S
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 4
Equalizza le altezze delle colonne: S
Imbottitura personalizzata: 5% in alto, 5% a destra, 5% in basso, 5% a sinistra

Grande! Hai finito la prima sezione. Abbiamo quasi finito. Controlla i progressi fino ad ora.

Per creare la sezione successiva, duplica l'intera sezione appena creata facendo clic sul pulsante Duplica sezione.

Aggiorna le impostazioni della nuova sezione come segue:

Opzioni di contenuto

Colori del gradiente di sfondo: #ffffff, #121212 (questi colori sono nell'ordine opposto della prima sezione)

Quindi aggiorna le impostazioni del modulo di testo nella sezione duplicata con quanto segue:

Opzioni di progettazione

Colore del testo del testo: #333333

Salva le impostazioni

Per completare questa sezione, aggiorna le Impostazioni riga che contengono i tuoi video con quanto segue:

Opzioni di contenuto

Colori sfumati di sfondo: #121212, #4999c1 (in pratica si cambia l'ordine dei colori in modo che siano nell'ordine opposto della prima sezione)

Salva le impostazioni

Ora controlliamo il risultato dopo aver aggiunto la seconda sezione...

Se non l'hai già notato, puoi continuare ad aggiungere più sezioni facilmente poiché abbiamo già creato queste due sezioni. Creiamo un'altra sezione solo per buona misura. Poiché il colore di sfondo della nostra sezione è nero in basso, vogliamo iniziare la sezione successiva con un colore di sfondo nero in alto. Ciò significa che dobbiamo duplicare la prima sezione in alto e trascinarla in fondo alla pagina sotto la seconda sezione. Ciò mantiene la continuità del design in tutta la pagina.

Ecco come appare dopo l'aggiunta della terza sezione:

Questo è tutto! Tutto finito.

Reattivo?

Questo layout in realtà sembra ancora migliore sui dispositivi mobili senza alcuna modifica. Controlla!

Ulteriori personalizzazioni

Dopo aver creato questo layout di griglia con più sezioni, probabilmente puoi già notare quanto sarebbe facile cambiare i colori in modo che corrispondano al tema del tuo prossimo progetto. Tutto ciò che serve è cambiare i colori del gradiente di sfondo per le sezioni e le righe.

Se desideri modificare ulteriormente il design, ti suggerisco di aggiungere semitrasparenza ai colori sfumati per esporre lo sfondo dietro di essi. Oppure prova a eliminare del tutto uno dei colori sfumati e guarda come appare. Ecco un paio di esempi di cosa può fare cambiare solo un colore sfumato...

Puoi anche aggiungere un modulo di scorrimento video alla griglia nella colonna di sinistra.

in arrivo...

Il prossimo è il nostro ultimo layout di griglia video della serie. Questo ti dà la possibilità di mantenere le cose belle e pulite con elementi di inquadratura sottili o usando i colori in un modo unico per rendere unico ogni video.

Fino ad allora, non vedo l'ora di sentirti nei commenti.

Divertiti!