homefinance blog
Cum se creează machete uimitoare de grilă cu modulul video Divi (partea 4)
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ă!