Cum să creați aspecte uimitoare ale grilei cu modulul video Divi (partea 2)

Bine ați venit la postarea 2 din 5 în miniseria noastră Cum să creați layout-uri uimitoare de grilă cu modulul video Divi . În această serie vă vom prezenta cum să creați planuri uimitoare de grilă de la zero folosind Divi Visual Builder. Și dacă vă îngrijorează faptul că acest lucru este prea complicat, gândiți-vă din nou! Toate aceste aspecte pot fi create și stilate folosind Visual Builder fără cod suplimentar.

Am ajuns la partea 2 a seriei! Și trebuie să spun că îmi place foarte mult să construiesc aceste planuri. Astăzi, vă voi arăta cum să creați un aspect de grilă pentru videoclipurile dvs. care seamănă cu o secțiune de caracteristici a unei pagini de produs sau a unei pagini de destinație. Acest aspect este alcătuit dintr-o secvență de 1/2 1/2 rânduri de coloane, fiecare rând conținând un videoclip și descrierea corespunzătoare a acestuia în fiecare dintre cele două coloane. Apoi următoarea secțiune alternează ordinea videoclipului și descrierea de la stânga la dreapta și apoi de la dreapta la stânga. Deoarece fiecare dintre rânduri întinde lățimea completă a paginii și fiecare dintre coloane păstrează aceeași înălțime verticală, aspectul arată uimitor pe toate dimensiunile ecranului.

Voi folosi modulul video pentru a adăuga videoclipurile și modulul blurb pentru a servi ca secțiune de titlu și descriere adiacentă videoclipului. La fel ca toate aspectele din această serie, acesta este, de asemenea, surprinzător de ușor de implementat folosind Divi.

Iată cum va arăta rezultatul final

Conceptul și inspirația

Acest concept nu este în niciun caz nou. De fapt, am fost inspirat să creez acest aspect datorită familiarității cu utilizatorii. Multe site-uri web utilizează un aspect similar pentru prezentarea caracteristicilor produselor sau serviciilor lor. Permite zone de conținut mai mari, care cred că creează un spațiu negativ excelent pentru text și imagini izbitoare pentru videoclip.

Acest lucru ar fi perfect pentru o companie care folosește videoclipuri pentru a promova caracteristicile produsului, dar are și multe alte utilizări. Sper să profitați de acest design pentru următorul dvs. proiect.

Să începem.

Implementarea designului cu Divi

Abonați-vă la canalul nostru Youtube

Mai întâi, adăugați o secțiune regulată cu o structură 1/2 1/2 (2 coloane).

Apoi adăugați un modul video în coloana din stânga.

Actualizați setările video după cum urmează:

Opțiuni de conținut

Video MP4 / URL: [introduceți adresa URL pentru videoclip]
Adresa URL de suprapunere a imaginii: [încărcați o imagine personalizată pentru videoclipul dvs. sau generați-o automat din videoclip]

Opțiuni de proiectare

Culoare pictogramă Joacă: rgba (255,255,255,0,87)

Salvează setările

Apoi adăugați un modul Blurb în coloana din dreapta, adiacent modulului video pe care tocmai l-ați creat.

Actualizați setările Blurb după cum urmează:

Opțiuni de conținut:

Titlu: [introduceți titlul videoclipului]
Conținut: [introduceți descrierea videoclipului]
Link: [puteți introduce adresa URL a linkului către o altă pagină, dacă doriți]
Utilizați pictograma: DA
Pictogramă: [selectați pictograma]

Opțiuni de proiectare:

Culoare pictogramă: # 666666
Culoarea textului: deschis
Orientare text: centru
Font antet: Roboto
Dimensiune font antet: 52 px
Distanța între litere antet: 1 px
Font corp: Open Sans
Dimensiunea fontului corpului: 20 px
Culoarea textului corpului: #dddddd
Împletire personalizată pe desktop: 5% Top (poate fi necesar să ajustați acest lucru în funcție de cantitatea de text pe care o aveți în descriere)
Căptușeală personalizată pe tabletă și smartphone: 20 px de sus, 20 px de jos

Opțiuni avansate

Animație imagine / pictogramă: de la dreapta la stânga (această animație combinată cu pictograma săgeată va atrage atenția asupra videoclipului din stânga.

Salvează setările

Înainte de a continua, continuați și adăugați imaginea de fundal la secțiunea dvs. Accesați setările secțiunii (zona albastră) și actualizați următoarele:

Opțiuni de conținut:

Imagine de fundal: [introduceți o imagine de fundal (a mea este de 2000 x 2200)]

Utilizați Efect Parallax: DA
Metoda Parallax: Parallax adevărat

Opțiuni de proiectare:

Căptușeală personalizată: 0 px sus, 0 px jos

Salvează setările
Apoi modificați setările rândului cu următoarele actualizări:

Opțiuni de conținut

Coloana 2 Culoare fundal: rgba (0,0,0,0.69)

Opțiuni de proiectare

Faceți acest rând lățime completă: DA
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA
Căptușeală personalizată: 0 px sus, 0 px jos
Marcare personalizată: 0 px sus, 0 px jos
Coloana 1 Împletire personalizată: 0 px sus, 0 px jos
Coloana 2 Împletire personalizată: 0 px sus, 0 px jos

Lucrurile încep să înceapă acum. Ai imaginea de fundal și ți-ai creat primul rând. Acum sunteți gata să duplicați acel rând. Faceți clic pe pictograma duplicat din bara de meniu a rândului din cadrul constructorului vizual.

În noul rând pe care tocmai l-ați duplicat, trageți modulul video în coloana din dreapta și trageți modulul de blurb în coloana din stânga.

Acum trebuie doar să actualizați conținutul modulului video pentru a include noua adresă URL a videoclipului și noua imagine de copertă. Pentru modulul Blurb, va trebui să actualizați antetul și conținutul care corespund videoclipului dvs. Și va trebui, de asemenea, să ajustați pictograma blurb la o săgeată care indică spre dreapta (dacă ați folosit aceeași pictogramă pe care am făcut-o eu) și să comutați animația imagine / pictogramă la „Stânga la dreapta”.

În continuare, trebuie să actualizăm setările de rând duplicat pentru a seta fundalul primei coloane. Accesați setările de rând și actualizați următoarele sub fila Conținut :

Coloana 1 Culoare fundal: rgba (0,0,0,0.69)
Coloana 2 Culoare fundal: niciuna

Facem ceva progrese. Acum să vedem cum arată primele noastre două rânduri ...

Pentru următoarele două rânduri repetați procesul de duplicare și actualizați conținutul. Amintiți-vă doar că cu cât aveți mai multe rânduri, cu atât imaginea de fundal a secțiunii va fi mai lungă pentru a se potrivi pentru lungimea conținutului.

Pentru acest exemplu am adăugat încă două rânduri, ceea ce îl face în total patru rânduri. Verificați rezultatul final.

Crearea versiunii Light

Pentru a schimba designul anterior al grilei video întunecate într-o versiune ușoară, tot ce trebuie să faceți este să actualizați câteva dintre opțiunile de proiectare.

Pentru aceste modificări, poate fi puțin mai ușor să folosiți vizualizarea wireframe.

Actualizați setările secțiunii după cum urmează:

Opțiuni de conținut

Imagine de fundal: [introduceți o imagine de fundal ușoară]

Actualizați setările pentru primul rând după cum urmează:

Opțiuni de conținut

Coloana 2 Culoare fundal: rgba (255,255,255,0,68)

Actualizați primul rând Setări modul Blurb după cum urmează:

Opțiuni de proiectare

Culoare pictogramă: # 333333
Culoarea textului: Întunecat
Culoarea textului antetului: # 444444
Font corp: Roboto
Culoarea textului corpului: # 666666

Actualizați setările pentru al doilea rând după cum urmează:

Opțiuni de conținut

Coloana 1 Culoare fundal: rgba (255.255.255,0.45)

Utilizați opțiunile de clic dreapta pentru a copia designul modulului de blurb din primul rând și lipiți-l în modulul de blurb din al doilea rând.

Asta e! Verificați rezultatul final.

Sensibil?

Acesta este puțin dificil atunci când vine vorba de modul în care se comportă pe dimensiuni mai mici ale ecranului. Deoarece ordinea de stivuire implicită plasează coloana din stânga deasupra coloanei din dreapta, rezultatul acestui aspect este puțin confuz. Puteți afla cum să remediați această problemă în postarea mea anterioară despre cum să modificați ordinea de stivuire a coloanelor Divi.

Se apropie ...

Următoarea grilă vă va surprinde. Culorile și gradientele de fundal semi-transparente fac ca designul să se potrivească cu ușurință propriului site. Verificați previzualizarea ...

Sper că vă bucurați de serial până acum. Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!