Come creare splendidi layout di griglia con il modulo video di Divi (parte 3)
Pubblicato: 2017-06-22Benvenuto nel post 3 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.
Benvenuti alla terza parte della serie! Ho la sensazione che questo ti sorprenderà un po'. Oggi ti mostrerò come utilizzare colori e sfumature di sfondo semitrasparenti per creare più variazioni di colore dei bordi. Alla fine ti mostrerò come puoi cambiare completamente la combinazione di colori con pochi clic. Questo layout è costituito da una combinazione di due file di struttura di colonne 1/4 1/2 1/4 e una riga di struttura di colonne 1/4 1/4 1/4 1/4.
Userò il modulo video per aggiungere i video e il modulo blurb per fungere da sezione titolo e descrizione al centro della griglia. Come tutti i layout di questa serie, anche questo è facile da implementare utilizzando Divi.
Ecco come sarà il risultato finale
Il concetto e l'ispirazione
In realtà, l'idea del layout originale è venuta dal popolare sito giphy.com dal modo in cui mostra una gif più grande nella colonna centrale circondata da gif più piccole. Ho pensato che questa idea avrebbe funzionato bene per un layout di griglia video poiché ciò ti avrebbe permesso di presentare un video più grande con gli altri video che lo circondano. Tuttavia, non mi interessava lo stile in muratura delle immagini giphy circostanti, quindi per questo post ho optato per l'approccio a colonne pari per rendere tutto più simmetrico.
Oltre al layout, volevo esplorare un po' di più le capacità di sfondo semitrasparente di Divi per creare qualcosa di unico.
Iniziamo.
Implementazione del design con Divi
Innanzitutto, aggiungi una sezione regolare con una struttura 1/4 1/2 1/4 (2 colonne). 
Quindi aggiungi un modulo video alla prima colonna.
Aggiorna le impostazioni video come segue:
Opzioni di contenuto
Video MP4/URL: [inserire l'URL per il video]
URL sovrapposizione immagine: [carica un'immagine personalizzata per il tuo video o generane una automaticamente dal video]
Salva le impostazioni
Quindi aggiungi un modulo divisore direttamente sotto il modulo video.
Nelle impostazioni del divisore, sotto il
Ora, poiché aggiungeremo molti video, trovo più facile duplicare il modulo video appena creato e trascinarlo nei punti giusti. Quindi posso tornare indietro e modificare l'URL del video e le immagini di copertina in un secondo momento.
Per prima cosa, duplichiamo il modulo video appena creato e trasciniamolo sotto il modulo divisore nella prima colonna.
Dopodiché puoi continuare a duplicare gli elementi della prima colonna (il video, il divisore e il video) e trascinarli nella colonna all'estrema destra. Quindi puoi duplicare uno dei moduli video e trascinarlo nella colonna centrale. Una volta aggiornati tutti i contenuti video dovresti avere qualcosa che assomigli a questo...
Prima di continuare, vai avanti e aggiungi il colore di sfondo alla tua sezione e alle colonne della riga. Vai alle impostazioni della sezione (area blu) e aggiorna quanto segue:
Opzioni di contenuto
Colore di sfondo: #333333
Opzioni di progettazione:
Imbottitura personalizzata: 0px in alto, 0px in basso
Salva le impostazioni
Ora modifica le tue impostazioni di riga con i seguenti aggiornamenti:
Opzioni di contenuto:
Colori sfumati di sfondo: rgba (255,255,255,0,58) e #b684e8
Direzione del gradiente: 360 gradi
Colore di sfondo della colonna 1: rgba(0,0,0,0.69)
Colore di sfondo della colonna 2: rgba (255,255,255,0.45)
Colore di sfondo della colonna 1: rgba(0,0,0,0.85)
Opzioni di progettazione
Rendi questa riga a larghezza intera: S
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Equalizza le altezze delle colonne: S
Imbottitura personalizzata: 0px in alto, 0px in basso
Margini personalizzati: 0 px in alto, 0 px in basso
Imbottitura personalizzata della colonna 1: 20px in alto, 20px a destra, 20px in basso, 20px a sinistra
Imbottitura personalizzata colonna 2: 20px in alto, 20px a destra, 20px in basso, 20px a sinistra
Imbottitura personalizzata della colonna 3: 20px in alto, 20px a destra, 20px in basso, 20px a sinistra
Salva le impostazioni
Ora è il momento di aggiungere la seconda riga. Vai avanti e aggiungi un'altra riga di struttura 1/4 1/2 1/4 (3 colonne) sotto la prima.
Per iniziare a configurare le opzioni per le Impostazioni riga, usa la funzionalità del tasto destro per copiare lo stile della prima riga e incollarlo nella seconda riga.
Ora, per le impostazioni della riga, tutto ciò che devi aggiornare sono le opzioni del contenuto come segue:
Gradiente di sfondo: nessuno (cancella quello che è stato copiato)
Colore di sfondo della colonna 1: rgba(0,0,0,0.69)
Colore di sfondo della colonna 2: rgba(0,0,0,0.0) – è uguale a nessuno o trasparente
Colore di sfondo della colonna 3: rgba (0,0,0,0,35)
Ora che le impostazioni della riga sono complete, vai avanti e duplica e trascina (o copia e incolla) un modulo video nella prima (estrema sinistra) e anche nella terza riga (estrema destra). Quindi aggiorna il contenuto del video.
Per la colonna centrale, aggiungi un modulo blurb e aggiorna le impostazioni come segue:
Opzioni di contenuto
Titolo: [inserisci il titolo della pagina o del video]
Contenuto: [inserire contenuto o descrizione del video o della pagina]
Opzioni di progettazione
Colore del testo: chiaro
Orientamento del testo: al centro
Carattere dell'intestazione: PT Sans
Dimensione carattere intestazione: 52px
Spaziatura delle lettere dell'intestazione: 1px
Carattere del corpo: PT Sans
Dimensione carattere corpo: 20px
Ora è finalmente il momento dell'ultima riga. Certo, potresti aggiungerne altri se necessario.
Vai avanti e aggiungi una riga di struttura 1/4 1/4 1/4 1/4 (4 colonne) sotto la riga precedente.
Come hai fatto prima, copia il design della riga precedente e incollalo nella riga corrente per darti un piccolo vantaggio sul design.
Quindi aggiorna le impostazioni della riga come segue:
Opzioni di contenuto
Colore di sfondo della colonna 1: rgba(0,0,0,0.34)
Colore di sfondo della colonna 2: rgba (0,0,0,0.69)
Colore di sfondo della colonna 3: rgba(0,0,0,0.34)
Colore di sfondo della colonna 4: rgba (0,0,0,0.69)
Opzioni di progettazione
Imbottitura personalizzata della colonna 4: 20px 20px 20px 20px
Salva le impostazioni
Quindi duplica o copia un modulo video in ciascuna delle quattro colonne. Dopo aver aggiornato tutti i tuoi contenuti video, il gioco è fatto!
Dai un'occhiata al tuo nuovo layout della griglia...
Creazione della versione leggera
Per modificare il precedente design della griglia video scura in una versione chiara, tutto ciò che devi fare è aggiornare alcune delle opzioni di design.
Aggiorna le impostazioni della sezione come segue:
Opzioni di contenuto:
Colore di sfondo: rgba(0,0,0,0.12)
Aggiorna tutte le impostazioni di riga come segue:
Fondamentalmente torna a ciascuna delle tre impostazioni di riga e ovunque vedi un colore di sfondo in uso, fai semplicemente clic sull'opzione della tavolozza del colore bianco. Questo trasformerà tutti gli sfondi scuri semitrasparenti scuri in sfondi chiari semitrasparenti.
Aggiorna le impostazioni del modulo Blurb come segue:
Opzioni di progettazione
Colore del testo: scuro
Questo lo farà! Scopri la versione light.
Cambia facilmente il design con le opzioni di sfondo della sezione
Poiché la griglia è costruita con sfondi semitrasparenti, puoi facilmente modificare il colore di sfondo, la sfumatura o l'immagine della sezione per dare al tuo sito un aspetto fresco e una sensazione che si abbini perfettamente al tuo sito.
Guarda la differenza che può fare aggiungendo un'immagine di sfondo alle impostazioni della sezione.
Un altro modo per abbinare il tuo sito è abbinare i colori del gradiente di sfondo che abbiamo aggiunto nella prima riga.
in arrivo...
Il prossimo post di questa serie sarà completamente diverso. Questo è tutto su come mantenere le cose pulite e semplici. E alcuni trucchi per il gradiente di sfondo.
Fino ad allora, non vedo l'ora di sentirti nei commenti.
Divertiti!