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

Benvenuto nel post 2 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.

Siamo arrivati ​​alla seconda parte della serie! E devo dire che mi sto davvero divertendo a costruire questi layout. Oggi ti mostrerò come creare un layout a griglia per i tuoi video che assomigli a una sezione delle funzionalità di una pagina di prodotto o di una pagina di destinazione. Questo layout è costituito da una sequenza di righe di 1/2 1/2 colonne con ciascuna riga contenente un video e la relativa descrizione in ciascuna delle due colonne. Quindi la sezione successiva alterna l'ordine del video e della descrizione da sinistra a destra e poi da destra a sinistra. Poiché ciascuna delle righe si estende per l'intera larghezza della pagina e ciascuna delle colonne mantiene la stessa altezza verticale, il layout è sorprendente su tutte le dimensioni dello schermo.

Utilizzerò il modulo video per aggiungere i video e il modulo blurb per fungere da sezione titolo e descrizione adiacente al video. Come tutti i layout di questa serie, anche questo è sorprendentemente facile da implementare utilizzando Divi.

Ecco come sarà il risultato finale

Il concetto e l'ispirazione

Questo concetto non è affatto nuovo. In realtà sono stato ispirato a creare questo layout a causa della sua familiarità con gli utenti. Molti siti Web utilizzano un layout simile per mostrare le funzionalità dei loro prodotti o servizi. Consente aree di contenuto più grandi che penso creino un grande spazio negativo per il testo e immagini sorprendenti per il video.

Questo sarebbe perfetto per un'azienda che utilizza i video per promuovere le funzionalità del prodotto, ma ha anche molti altri usi. Spero che approfitti di questo design per il tuo prossimo progetto.

Iniziamo.

Implementazione del design con Divi

Iscriviti al nostro canale Youtube

Innanzitutto, aggiungi una sezione regolare con una struttura 1/2 1/2 (2 colonne).

Quindi aggiungi un modulo video alla colonna di sinistra.

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]

Opzioni di progettazione

Colore icona di riproduzione: rgba (255,255,255,0.87)

Salva le impostazioni

Quindi aggiungi un modulo Blurb nella colonna di destra direttamente adiacente al modulo video che hai appena creato.

Aggiorna le impostazioni di Blurb come segue:

Opzioni di contenuto:

Titolo: [inserisci il titolo del video]
Contenuto: [inserisci la descrizione del video]
Link: [puoi inserire l'URL del link a un'altra pagina se vuoi]
Usa l'icona: S
Icona: [seleziona icona]

Opzioni di progettazione:

Colore icona: #666666
Colore del testo: chiaro
Orientamento del testo: al centro
Carattere intestazione: Roboto
Dimensione carattere intestazione: 52px
Spaziatura delle lettere dell'intestazione: 1px
Carattere del corpo: Open Sans
Dimensione carattere corpo: 20px
Colore del corpo del testo: #dddddd
Imbottitura personalizzata sul desktop: 5% in alto (potrebbe essere necessario regolarlo a seconda della quantità di testo che hai nella descrizione)
Imbottitura personalizzata su tablet e smartphone: 20px in alto, 20px in basso

Opzioni avanzate

Animazione immagine/icona: da destra a sinistra (questa animazione combinata con l'icona della freccia attirerà ulteriormente l'attenzione sul video a sinistra.

Salva le impostazioni

Prima di continuare, vai avanti e aggiungi l'immagine di sfondo alla tua sezione. Vai alle impostazioni della sezione (area blu) e aggiorna quanto segue:

Opzioni di contenuto:

Immagine di sfondo: [inserisci un'immagine di sfondo (la mia è 2000 x 2200)]

Usa effetto parallasse: S
Metodo di parallasse: vero parallasse

Opzioni di progettazione:

Imbottitura personalizzata: 0px in alto, 0px in basso

Salva le impostazioni
Quindi modifica le impostazioni della riga con i seguenti aggiornamenti:

Opzioni di contenuto

Colore di sfondo della colonna 2: rgba (0,0,0,0.69)

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: 0px in alto, 0px in basso
Imbottitura personalizzata della colonna 2: 0px in alto, 0px in basso

Le cose stanno cominciando a prendere posto ora. Hai la tua immagine di sfondo e hai creato la tua prima riga. Ora sei pronto per duplicare quella riga. Fare clic sull'icona del duplicato nella barra dei menu della riga all'interno del visual builder.

Nella nuova riga che hai appena duplicato, trascina il modulo video sulla colonna di destra e trascina il modulo blurb sulla colonna di sinistra.

Ora devi solo aggiornare il contenuto del modulo video per includere il nuovo URL del video e la nuova immagine di copertina. Per il modulo Blurb, dovrai aggiornare l'intestazione e i contenuti che corrispondono al tuo video. E dovrai anche regolare l'icona blurb su una freccia che punta a destra (se hai usato la stessa icona che ho fatto io) e cambiare l'animazione immagine/icona su "Da sinistra a destra".

Successivamente è necessario aggiornare le impostazioni della riga duplicata per impostare lo sfondo della prima colonna. Vai alle impostazioni della riga e aggiorna quanto segue nella scheda Contenuto :

Colore di sfondo della colonna 1: rgba(0,0,0,0.69)
Colore di sfondo della colonna 2: nessuno

Stiamo facendo progressi. Ora vediamo come sono le nostre prime due righe...

Per le due righe successive ripeti il ​​processo di duplicazione e aggiorna il contenuto. Ricorda solo che più righe hai, più l'immagine di sfondo della tua sezione dovrà allungarsi per adattarsi alla lunghezza del contenuto.

Per questo esempio ho aggiunto altre due righe per un totale di quattro righe. Controlla il risultato finale.

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.

Per queste modifiche, potrebbe essere un po' più semplice utilizzare la vista wireframe.

Aggiorna le impostazioni della sezione come segue:

Opzioni di contenuto

Immagine di sfondo: [inserisci un'immagine di sfondo chiara]

Aggiorna le impostazioni della prima riga come segue:

Opzioni di contenuto

Colore di sfondo della colonna 2: rgba (255,255,255,0.68)

Aggiorna le impostazioni del modulo Blurb della prima riga come segue:

Opzioni di progettazione

Colore icona: #333333
Colore del testo: scuro
Colore del testo dell'intestazione: #444444
Carattere del corpo: Roboto
Colore del corpo del testo: #666666

Aggiorna le impostazioni della seconda riga come segue:

Opzioni di contenuto

Colore di sfondo della colonna 1: rgba (255,255,255,0.45)

Usa le opzioni del tasto destro per copiare il design del modulo blurb nella prima riga e incollarlo nel modulo blurb sulla seconda riga.

Questo è tutto! Controlla il risultato finale.

Reattivo?

Questo è un po' complicato quando si tratta di come si comporta su schermi di dimensioni più piccole. Poiché l'ordine di sovrapposizione predefinito mette la colonna di sinistra sopra la colonna di destra, il risultato di questo layout è un po' confuso. Puoi imparare come risolvere questo problema nel mio post precedente su come modificare l'ordine di impilamento delle colonne di Divi.

in arrivo...

La prossima griglia ti sorprenderà. I colori e le sfumature di sfondo semitrasparenti rendono il design molto facile da abbinare al tuo sito. Guarda l'anteprima...

Spero che finora vi stiate divertendo con la serie. Non vedo l'ora di sentirti nei commenti.

Saluti!