Ați dori ca membrii echipei dvs. să fie prezentați sub forma unui carusel cu Divi ?
Când vă configurați pagina Despre, probabil că veți dori să includeți și membrii echipei acolo. Procedând astfel, permiteți vizitatori pentru a intra în legătură cu oamenii din spatele afacerii tale.
Dacă sunteți în căutarea unei modalități de a anima secțiunea membrilor echipei pe defilare, vă va plăcea acest tutorial.
Vom recrea un frumos carusel de membri ai echipei cu defilare automată, care se mișcă ca dvs vizitatori derulați pagina.
Să mergem.
studiu
Înainte de a vă scufunda în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.
Calculator desktop
Versiune mobila
Să începem să proiectăm cu Divi
Citiți și: Divi: Cum să dezvăluii conținut la trecerea cursorului peste separatorul de secțiuni
Adăugați o secțiune nouă
Magii interni
Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați. Deschideți setările secțiunii și adăugați umplutură personalizată pe diferite dimensiuni de ecran.
- Umplutură (sus și jos): 200px (desktop), 100px (tabletă și telefon)
vizibilitate
Pentru a ne asigura că nu apar bare de defilare orizontale în designul nostru, vom ascunde debordările de secțiuni în fila avansată.
- Overflow orizontal: Ascuns
- Overflow vertical: Ascuns
Adăugați linia #1
Structura coloanei
Continuați adăugând un nou rând la secțiune folosind următoarea structură de coloane:
Lățime
Fără a adăuga încă module, deschideți setările liniei, comutați la fila Amenajări și modificați lățimea și lățimea maximă în setările de dimensionare.
- Latime: 90%
- Lățimea maximă: 1 px
spaţierea
De asemenea, adăugăm umplutură personalizată superioară și inferioară.
- Umplutură (sus și jos): 100px
Adăugați un modul Text la coloană
Adăugați conținut de dimensiune H2
Este timpul să adăugați module, începând cu un prim modul Text. Introduceți a cuprins Dimensiunea H2 la alegere.
Setări text H2
Comutați la filă Amenajări a modulului și modificați parametrii textului H2 după cum urmează:
- Font: nisipuri mișcătoare
- Greutatea fontului: semi-aldine
- Culoare text: #000000
- Dimensiune text: 70px (desktop), 50px (tabletă), 40px (telefon)
Adăugați un modul „Divider” la coloană
vizibilitate
Apoi adăugați un modul compas. Asigurați-vă că opțiunea „Afișare divizor” este activată.
- Afișați separator: DA
Ligne
Apoi faceți câteva modificări la setările liniei.
- Culoare linie: #edf000
- Stil: Solid
- Poziția liniei: Sus
dimensionarea
Și completați parametrii modulului modificând parametrii de dimensionare în consecință:
- Greutate divizor: 20px
- Latime: 11%
- Modul de aliniere: stânga
- Înălțime: 20px
Adăugați linia 2
Structura coloanei
Rândul următor! Utilizați următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:
- Utilizați lățimea jgheab personalizată: da
- Lățimea jgheabului: 2
- Latime: 100%
- Latime maxima: 100%
Spațiere (numai pentru tabletă și telefon)
Apoi, adăugați umplutură la stânga și la dreapta numai pe ecrane de dimensiuni mici.
- Umplutură (stânga și dreapta): 5% (numai pentru tabletă și telefon)
Parametrii coloanei (5x)
Acum, în următorii trei pași ai acestui tutorial, vom face câteva modificări coloanelor. Aplicați cei trei pași la fiecare dintre coloanele din rândul dvs.
Gradient de fundal
Mai întâi, adăugați un fundal gradient la fiecare coloană.
- Opriri de gradient (25%): rgba(255,255,255,0)
- Opriri de gradient (86%): rgba(0,0,0,0.84)
- Tip: Linear
- Gradient pătrat deasupra imaginii de fundal: DA
Imagine de fundal
Apoi încărcați o imagine de fundal la alegere. Această imagine de fundal reprezintă fiecare membru al echipei, deci utilizați o imagine diferită pentru fiecare coloană.
- Dimensiunea imaginii de fundal: Coperta
- Poziția imaginii de fundal: Centru
S-a adăugat CSS personalizat (numai tabletă)
Completați setările coloanei adăugând CSS personalizat la elementul principal (Pentru vizualizare Tableta numai) din fiecare coloană.
Aceste linii de cod CSS ne vor ajuta să plasăm coloanele una sub alta pe tabletă, în loc să avem două una lângă alta.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Adăugați un modul „Persoană” la coloană
Adăugați conținut
Pentru a partaja informații despre membrii echipei, vom folosi un modul Persoană.
Adăugați primul modul Persoană la coloana 1 și utilizați cuprins de votre choix.
Ștergeți imaginea
Apoi ștergeți imaginea. În schimb, folosim imaginea de fundal a coloanei.
Imagine de fundal
În continuare, vom adăuga o suprapunere de imagine ca imagine de fundal a modulului.
- Dimensiunea imaginii de fundal: Coperta
- Poziția imaginii de fundal: centru
Setări text de titlu
Comutați la filă Amenajări modul și modificați setările textului titlului după cum urmează:
- Titlu Titlu Nivel: H3
- Font de titlu: nisipuri mișcătoare
- Greutatea fontului: aldine
- Culoare text titlu: #ffffff
- Dimensiunea textului titlului: 230%
Setări text corp
Modificați de asemenea setările textului corpului.
- Font pentru corp: Open Sans
- Culoare text: #ffffff
- Înălțimea liniei: 2,2 em
Setări de text pentru poziția membrilor echipei
Apoi, faceți câteva modificări la setările de text ale funcției deținute de membrul echipei.
- Font de poziție: Deschide fără
- Culoare text de poziție: #edf000
spaţierea
Și completați setările modulului adăugând valori de umplere personalizate la setările de spațiere.
- Căptușeală: 70% (sus), 10% (jos, stânga și dreapta)
Clonează modulul „Persoană” de patru ori
După ce ați completat modulul Persoană, puteți clona întregul modul de patru ori.
Plasați duplicatele în coloanele rămase
Plasați module duplicate în celelalte patru coloane ale rândului.
De asemenea, asigurați-vă că schimbați cuprins.
Transformați un rând într-un carusel cu defilare automată
Vezi și: Divi: Cum se creează o grilă de coloană fluidă la hover
Schimbați dimensiunea rândului #2
Acum, pentru a transforma această linie într-un carusel cu defilare automată, va trebui să redeschidem setările liniei și să schimbăm lățimea și lățimea maximă în setările de dimensionare.
- Latime: 180%
- Lățime maximă: 220% (desktop), 100% (tabletă și telefon)
Adăugați mișcare orizontală la linia 2
Completați setările de linie adăugând mișcare orizontală pentru a derula setările efectelor din filă Avansat sub opțiune Efecte de derulare si ai terminat!
- Activați mișcarea orizontală: da
- Offset de pornire:
- Desktop: 2,5
- Tabletă și telefon: 0
- Offset mediu: 0 (până la 40%)
- Offset final:
- Desktop: -25 (până la 62%)
- Tabletă și telefon: 0
- Declanșare efect de mișcare: mijlocul elementului
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Calculator desktop
Descărcați DIVI acum!!!
Vizualizare mobilă
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să fiți creativ cu efectele de defilare încorporate ale Divi.
Mai exact, am recreat un carusel frumos cu membrii echipei cu defilare automată. Cand vizitatori derulați pagina, apare o altă parte a caruselului.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte. Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
