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

Bine ați venit la postarea 4 din 5 în miniseria noastră Cum să creați modele uimitoare de grilă cu modulul video Divi. În această serie vă vom prezenta cum să creați aspecte uimitoare ale grilei 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.

Sper că vă bucurați de aspectele de grilă până acum. Aspectul de astăzi este numărul 4 din serie și este unul dintre preferatele mele (și cel mai rapid de implementat). Nu numai că este ușor (și distractiv) să construiești folosind Divi, dar este și personalizabil pentru a se potrivi schemei de culori a site-ului tău. Opțiunile de gradient de fundal sunt caracteristica principală a acestui design, care a fost utilizată pentru a crea cele două culori de ton separate printr-o linie diagonală. Spațierea este, de asemenea, intenționată pentru a face videoclipurile ușor de perceput. Probabil, acest design ar putea intra în sfera a ceea ce am numi în mod normal o „rețea”, dar cred că veți vedea potențialul.

Deci iată-ne. Vă voi arăta cât de ușor este să construiți acest design de grilă folosind modulul video și câteva elemente de fundal personalizate.

Iată cum va arăta rezultatul final

Conceptul și inspirația

Căutam un aspect frumos și curat care să organizeze mici loturi de videoclipuri pentru a fi utilizate pentru lucruri precum tutoriale sau cursuri. Acest lucru combinat cu dorința mea impulsivă de a juca cu gradiente de fundal, am ieșit cu asta. Sper că îți place.

Să începem.

Implementarea designului cu Divi

Abonați-vă la canalul nostru Youtube

Mai întâi, adăugați o secțiune obișnuită cu o structură de lățime completă (1 coloană).

Apoi adăugați un modul de text în coloană. Aceasta va servi drept titlu sau titlu pentru secțiunea paginii.

Actualizați setările pentru text după cum urmează:

Opțiuni de conținut
Conținut: [introduceți textul pentru titlu]

Opțiuni de proiectare

Culoarea textului: deschis
Font text: Arimo
Dimensiunea fontului textului: 56 px
Spațiere scrisoare text: 1 px
Înălțimea liniei de text: 1em

Salvează setările

Nu veți putea vedea încă nimic, deoarece aveți text alb pe fundal alb, dar este în regulă. Să mergem mai departe și să adăugăm gradientul de fundal al secțiunii noastre. Accesați Setările secțiunii și, sub secțiunea Conținut, actualizați următoarele opțiuni:

Culori de gradient de fundal: # 121212, #ffffff
Tipul gradientului: liniar
Direcția gradientului: 198 grade
Poziția inițială: 45%
Poziție finală: 45%

Apoi, actualizați Setările rândului pentru rândul pe care tocmai l-ați adăugat după cum urmează:

Opțiuni de proiectare

Faceți acest rând lățime completă: DA
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 4
Egalizați înălțimile coloanei: DA
Căptușeală personalizată: 1% sus, 5% dreapta, 5% jos, 5% stânga

Salvează setările

Acum adăugați un alt rând cu o structură ⅔ ⅓ (2 coloane) direct sub rândul pe care tocmai l-ați creat.

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 a videoclipului dvs.]
Adresa URL a imaginii suprapuse: [introduceți adresa URL a imaginii suprapuse]

Salvează setările

Apoi, copiați (sau copiați) modulul video pe care tocmai l-ați creat de două ori și trageți (sau lipiți) cele două videoclipuri duplicate, astfel încât acestea să fie stivuite pe coloana din dreapta.

Actualizați conținutul videoclipurilor pentru a include adresa URL corectă și imaginile de copertă.

Continuați și adăugați un modul Blurb sub cele două module video din coloana din dreapta. Aceasta poate servi drept descriere a videoclipurilor din această grilă.

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

Opțiuni de conținut

Titlu: [introduceți titlul]
Conținut: [introduceți conținut sau descriere]

Opțiuni de proiectare

Culoarea textului: deschis

Salvează setările

Acum editați Setările rândului pentru rândul care conține videoclipurile pe care tocmai le-ați creat după cum urmează:

Opțiuni de conținut

Culori de gradient de fundal: # 4999c1, # 121212
Tipul gradientului: liniar
Direcția gradientului: 198 grade
Poziția inițială: 45%
Poziție finală: 45%

Opțiuni de proiectare

Faceți acest rând lățime completă: DA
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 4
Egalizați înălțimile coloanei: DA
Căptușeală personalizată: 5% sus, 5% dreapta, 5% jos, 5% stânga

Grozav! Ai terminat prima secțiune. Aproape am terminat. Verificați progresul de până acum.

Pentru a crea următoarea secțiune, copiați întreaga secțiune pe care tocmai ați construit-o făcând clic pe butonul secțiune duplicat ..

Actualizați setările noii secțiuni după cum urmează:

Opțiuni de conținut

Culori de gradient de fundal: #ffffff, # 121212 (aceste culori sunt în ordinea opusă primei secțiuni)

Actualizați apoi Setările modulului text din secțiunea duplicată cu următoarele:

Opțiuni de proiectare

Culoarea textului textului: # 333333

Salvează setările

Pentru a completa această secțiune, actualizați setările Row care conțin videoclipurile dvs. cu următoarele:

Opțiuni de conținut

Culori de gradient de fundal: # 121212, # 4999c1 (practic schimbați ordinea culorilor, astfel încât acestea să fie în ordinea opusă primei secțiuni)

Salvează setările

Acum să verificăm rezultatul după adăugarea celei de-a doua secțiuni ...

Dacă nu ați observat deja, puteți continua să adăugați mai multe secțiuni cu ușurință, deoarece avem deja aceste două secțiuni create. Să creăm încă o secțiune doar pentru o măsură bună. Deoarece culoarea de fundal a secțiunii noastre este neagră în partea de jos, dorim să începem următoarea secțiune cu o culoare de fundal neagră în partea de sus. Asta înseamnă că trebuie să duplicăm prima secțiune în partea de sus și să o tragem în partea de jos a paginii sub a doua secțiune. Aceasta păstrează continuitatea designului pe toată pagina.

Iată cum arată după adăugarea celei de-a treia secțiuni:

Asta e! Totul e gata.

Sensibil?

De fapt, acest aspect arată chiar mai bine pe mobil, fără nicio modificare. Verifică!

Personalizare suplimentară

După ce ați construit acest aspect al grilei cu mai multe secțiuni, probabil că veți observa deja cât de ușor ar fi să schimbați culorile pentru a se potrivi cu tema proiectului următor. Este nevoie doar de schimbarea culorilor de gradient de fundal pentru secțiuni și rânduri.

Dacă doriți să modificați designul în continuare, vă sugerăm să adăugați semi-transparență culorilor degradate pentru a expune fundalul din spatele lor. Sau încercați să scăpați complet de una dintre culorile degradate și să vedeți cum arată. Iată câteva exemple de ceea ce poate face schimbarea unei singure culori de gradient ...

De asemenea, puteți adăuga un modul Video Slider la grila din coloana din stânga.

Se apropie ...

Următorul este ultimul nostru aspect al grilei video din serie. Acesta vă oferă opțiunea de a păstra lucrurile frumoase și curate cu elemente de încadrare subtile sau de a folosi culorile într-un mod unic pentru a face ca fiecare videoclip să fie remarcabil.

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

Bucurați-vă!