Cum se creează machete uimitoare de grilă cu modulul video Divi (partea 3)

Bine ați venit la postarea 3 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.

Bine ați venit la partea 3 a seriei! Am senzația că acesta te va surprinde puțin. Astăzi, vă voi arăta cum să utilizați culorile de fundal semi-transparente și gradientele pentru a crea mai multe variații de culoare de margine. La final vă voi arăta cum puteți schimba complet schema de culori cu doar câteva clicuri. Acest aspect este alcătuit dintr-o combinație de două rânduri de structură a coloanelor 1/4 1/2 1/4 și un rând de structură a coloanei 1/4 1/4 1/4 1/4.

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

Iată cum va arăta rezultatul final

Conceptul și inspirația

De fapt, ideea de aspect original a venit de pe popularul site giphy.com din modul în care prezintă un gif mai mare prezentat în coloana din mijloc înconjurat de gif-uri mai mici. Am crezut că această idee va funcționa bine pentru un aspect al grilei video, deoarece acest lucru vă va permite să prezentați un videoclip mai mare cu celelalte videoclipuri care îl înconjoară. Cu toate acestea, nu mi-a pasat de stilul de zidărie al imaginilor giphy din jur, așa că, pentru această postare, am urmat abordarea pe coloane uniforme pentru a face totul mai simetric.

Pe lângă aspect, am vrut să explorez puțin mai mult capacitățile de fundal semi-transparente ale lui Divi pentru a crea ceva unic.

Să începem.

Implementarea designului cu Divi

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

Apoi adăugați un modul video la prima coloană.

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]

Salvează setările

Apoi adăugați un modul divizor direct sub modulul video.

În Setările divizorului, sub , setați înălțimea separatorului la 20.

Acum, deoarece vom adăuga o mulțime de videoclipuri, mi se pare mai ușor să duplic modulul video care tocmai a fost creat și să-l trag în locurile corecte. Apoi, pot să mă întorc și să schimb URL-ul videoclipului și imaginile de copertă mai târziu.

În primul rând, să duplicăm modulul video pe care tocmai l-ați creat și să-l trageți sub modulul divizor din prima coloană.

După aceea, puteți continua să duplicați elementele primei coloane (videoclipul, divizorul și videoclipul) și să le trageți în coloana din dreapta. Apoi, puteți duplica unul dintre modulele video și trageți-l în coloana centrală. Odată ce actualizați tot conținutul videoclipului, ar trebui să aveți ceva care arată astfel ...

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

Opțiuni de conținut

Culoare fundal: # 333333

Opțiuni de proiectare:

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

Salvează setările

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

Opțiuni de conținut:

Culori de gradient de fundal: rgba (255.255.255,0.58) și # b684e8
Direcția gradientului: 360 grade
Coloana 1 Culoare fundal: rgba (0,0,0,0.69)
Coloana 2 Culoare fundal: rgba (255.255.255,0.45)
Coloana 1 Culoare fundal: rgba (0,0,0,0.85)

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 Căptușeală personalizată: 20 px sus, 20 px dreapta, 20 px jos, 20 px stânga
Coloana 2 Căptușeală personalizată: 20 px sus, 20 px dreapta, 20 px jos, 20 px stânga
Coloana 3 Căptușeală personalizată: 20 px sus, 20 px dreapta, 20 px jos, 20 px stânga

Salvează setările

Acum este timpul să adăugați al doilea rând. Continuați și adăugați încă un rând de structură 1/4 1/2 1/4 (3 coloane) sub primul.

Pentru a vă încerca să configurați opțiunile pentru Setări rând, utilizați funcția de clic dreapta pentru a copia stilul primului rând și lipiți-l pe al doilea rând.

Acum, pentru setările de rând, tot ce trebuie să actualizați sunt opțiunile de conținut după cum urmează:

Gradient de fundal: niciunul (ștergeți cel care a fost copiat)
Coloana 1 Culoare fundal: rgba (0,0,0,0.69)
Coloana 2 Culoare fundal: rgba (0,0,0,0,0) - este la fel ca nici una sau transparentă
Coloana 3 Culoare fundal: rgba (0,0,0,0.35)

Acum că setările rândului dvs. sunt complete, mergeți mai departe și copiați și trageți (sau copiați și lipiți) un modul video în primul (extrem stânga) și, de asemenea, în al treilea rând (extrem dreapta). Apoi actualizați conținutul video.

Pentru coloana din mijloc, adăugați un modul blurb și actualizați setările după cum urmează:

Opțiuni de conținut

Titlu: [introduceți titlul paginii sau al videoclipului]
Conținut: [introduceți conținutul sau descrierea videoclipului sau a paginii]

Opțiuni de proiectare

Culoarea textului: deschis
Orientare text: centru
Font antet: PT Sans
Dimensiune font antet: 52 px
Distanța între litere antet: 1 px
Font corp: PT Sans
Dimensiunea fontului corpului: 20 px

Acum este în sfârșit timpul pentru ultimul rând. Desigur, ai putea adăuga mai multe dacă ar fi nevoie.

Continuați și adăugați un rând de structură 1/4 1/4 1/4 1/4 (4 coloane) sub rândul anterior.

Așa cum ați făcut înainte, copiați designul rândului anterior și lipiți-l pe rândul curent pentru a vă oferi un pic de avans în proiectare.

Apoi actualizați setările rândului după cum urmează:

Opțiuni de conținut

Coloana 1 Culoare fundal: rgba (0,0,0,0.34)
Coloana 2 Culoare fundal: rgba (0,0,0,0.69)
Coloana 3 Culoare fundal: rgba (0,0,0,0.34)
Coloana 4 Culoare fundal: rgba (0,0,0,0.69)

Opțiuni de proiectare

Coloana 4 Completare personalizată: 20px 20px 20px 20px

Salvează setările

Apoi copiați sau copiați un modul video în fiecare dintre cele patru coloane. După ce v-ați actualizat tot conținutul video, ați terminat!

Verificați noua structură a grilei ...

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.

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

Opțiuni de conținut:

Culoare fundal: rgba (0,0,0,0.12)

Actualizați toate setările de rând după cum urmează:

Practic reveniți la fiecare dintre cele trei setări de rând și oriunde vedeți că se folosește o culoare de fundal, faceți clic pe opțiunea paletă de culoare albă. Acest lucru va transforma toate fundalurile întunecate semi-transparente întunecate în fundaluri luminoase semi-transparente.

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

Opțiuni de proiectare

Culoarea textului: Întunecat

Asta o va face! Verificați versiunea ușoară.

Schimbați ușor designul cu opțiunile de fundal ale secțiunii

Deoarece grila este construită cu fundaluri semi-transparente, puteți schimba cu ușurință culoarea de fundal a secțiunii, gradientul sau imaginea pentru a oferi site-ului dvs. un aspect și o senzație proaspete, care se potrivește perfect site-ului dvs.

Uită-te la diferența pe care o poate face prin adăugarea unei imagini de fundal la setările secțiunii.

O altă modalitate de a se potrivi site-ului dvs. este de a se potrivi culorile gradientului de fundal pe care l-am adăugat în primul rând.

Se apropie ...

Următoarea postare din această serie va avea o senzație complet diferită. Acesta este totul despre păstrarea lucrurilor curate și simple. Și câteva trucuri de gradient de fundal.

Până atunci, aștept cu nerăbdare să aud de la dvs. în comentarii.

Bucurați-vă!