Când vă creați pagina Despre, probabil că veți dori, de asemenea, să prezentați membrii echipei acolo. Procedând astfel, permiteți vizitatori interacționează cu oamenii din spatele afacerii tale. Dacă sunteți în căutarea unei modalități de a anima secțiunea membrilor echipei pe defilare, s-ar putea să găsiți acest tutorial util. Vom crea un carusel pentru membrii echipei cu defilare automată care se mișcă atunci când dvs vizitatori derulați pagina.
Demonstrație
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.
Începutul concepției
Adăugați o secțiune nouă
spaţierea
Î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.
- Căptușeală superioară: 200px (birou), 100px (tabletă și telefon)
- Garnitură de jos: 200px (birou), 100px (tabletă și telefon)
revarsarile
Pentru a ne asigura că nu apare nicio bară de defilare orizontală în designul nostru, vom ascunde deversările de secțiuni în fila avansată.
- Debord de orizontală: ascuns
- Debord vertical: ascuns
Adăugați linia # 1
Structura coloanei
Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:
dimensionarea
Fără a adăuga încă module, deschideți setările rândurilor, treceți la fila de proiectare și modificați lățimea și lățimea maximă în setările de dimensionare.
- Lățime: 90%
- Lățime maximă: 1580px
spaţierea
De asemenea, adăugăm umplutură personalizată superioară și inferioară.
- Garnitură superioară: 100px
- Garnitura de jos: 100px
Adăugați un modul text la coloană
Adăugați conținut H2
Este timpul să adăugați module, începând cu un prim modul text. Introduceți-l cuprins H2 la alegere.
Setări text H2
Accesați fila de proiectare a modulului și modificați setările de text H2 după cum urmează:
- Titlul fontului 2: Quicksand
- Titlul fontului 2: semi-îndrăzneț
- Culoarea textului articolului 2: # 000000
- Antetul 2 Dimensiunea textului: 70px (desktop), 50px (tabletă), 40px (telefon)
Adăugați un modul de separare în coloană
vizibilitate
Apoi adăugați un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.
- Afișare separator: Da
Ligne
Apoi faceți unele modificări la setările liniei.
- Culoarea liniei: # edf000
- Stil de linie: solid
- Poziția liniei: sus
dimensionarea
Și completați parametrii modulului modificând parametrii de dimensionare în consecință:
- Greutatea separatorului: 20px
- Lățime: 11%
- Alinierea modulului: stânga
- Înălțime: 20px
Adăugați o linie # 2
Structura coloanei
La rândul următor! Utilizați următoarea structură de coloane:
dimensionarea
Fără a adăuga mai multe module, deschideți parametrii liniei și modificați parametrii de dimensionare după cum urmează:
- Utilizați o lățime personalizată de jgheab: Da
- Lățimea jgheabului: 2
- Lățime: 100%
- Lățime maximă: 100%
spaţierea
Apoi adăugați captură stânga și dreapta doar pe ecranele mai mici.
- Căptușire stânga: 5% (numai tabletă și telefon)
- Căptușire dreapta: 5% (numai 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.
Fundal gradient
Mai întâi, adăugați un fundal de gradient în fiecare coloană.
- 1 culoare: rgba (255,255,255,0)
- 2 culoare: rgba (0,0,0,0,84)
- Tipul gradientului: liniar
- Poziția de pornire: 25%
- Poziția finală: 86%
- Plasați gradientul 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: copertă
- Poziția imaginii de fundal: Centru
Elementul principal
Completați setările coloanei adăugând CSS personalizat la elementul principal al tabletei din fiecare coloană. Aceste linii de cod CSS ne vor ajuta să plasăm coloanele una sub cealaltă pe tabletă, în loc să avem două una lângă alta.
latime: 100%! important; marja: 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
Vom adăuga apoi o suprapunere de imagine ca imagine de fundal a modulului. Puteți găsi pe cel pe care îl folosim descărcând folderul la începutul acestui tutorial.
- Dimensiunea imaginii de fundal: copertă
- Poziția imaginii de fundal: Centru
Setări text de titlu
Accesați fila de proiectare a modulului și modificați setările pentru textul titlului după cum urmează:
- Nivelul titlului: H3
- Titlul fontului: Quicksand
- Greutatea fontului din titlu: îndrăzneț
- Culoarea textului titlului: #ffffff
- Mărimea textului titlului: 230%
Setări text corp
Modificați de asemenea setările textului corpului.
- Fontul corpului: Open Sans
- Culoarea textului corpului: #ffffff
- Înălțimea liniei corpului: 2,2 em
Setări de poziție text
Apoi faceți unele modificări la setările textului de poziție.
- Poziția fontului: Sans Sans
- Culoarea textului poziției: # edf000
spaţierea
Și completați setările modulului adăugând valori de umplere personalizate la setările de spațiere.
- Înveliș superior: 70%
- Înveliș inferior: 10%
- Căptușire stânga: 10%
- Căptușire dreapta: 10%
Duplică modulul Persoană de 4 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. Asigurați-vă că schimbați și cuprins.
Transformați rândul într-un carusel de defilare automată
Schimbați dimensiunea liniei # 2
Acum, pentru a transforma acest rând într-un carusel de membru al echipei cu defilare automată, trebuie să redeschidem setările de rând și să schimbăm lățimea și lățimea maximă în setările de dimensionare.
- Lățime: 180%
- Lățimea maximă: 220% (birou), 100% (tabletă și telefon)
Adăugați mișcarea orizontală a liniei # 2
Completați setările liniei adăugând mișcare orizontală la setările efectului de derulare în fila avansată și ați terminat!
- Activați mișcarea orizontală: Da
- Start offset:
- Birou: 2,5
- Tabletă și telefon: 0
- Offset mediu: 0 (la 40%)
- Decalaj final:
- Birou: -25 (la 62%)
- Tabletă și telefon: 0
- Efect de declanșare a mișcării: 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.
Birou
Ultimele gânduri
În acest tutorial, v-am arătat cum să fiți creativ cu efectele de defilare încorporate ale Divi. Mai exact, am recreat un frumos carusel de membri ai echipei cu defilare automată. Cand vizitatori derulați pagina, apare o altă parte a caruselului.
