Cum se utilizează mai multe glisoare pentru a prezenta serviciile cu animație automată

Majoritatea companiilor vor trebui să prezinte vizitatorilor lor servicii pe site-ul lor web. Și o modalitate de a prezenta serviciile deasupra pliantei este utilizarea unui glisor. Acest lucru vă permite să evidențiați fiecare serviciu unul câte unul, dar dezavantajul este că utilizatorul va trebui să navigheze înainte și înapoi pentru a găsi serviciul de care are nevoie. O experiență mai bună pentru utilizator poate fi aceea de a menține aceste servicii vizibile în permanență utilizatorului.

În acest tutorial, vă voi arăta cum să prezentați serviciile folosind un glisor, păstrând în același timp fiecare conținut al serviciului vizibil utilizatorului în orice moment. Pentru a face acest lucru, vom folosi mai multe glisoare și animație automată, astfel încât fiecare serviciu să fie evidențiat unul câte unul cu un design de diapozitiv specific. Și vom face acest lucru folosind opțiunile de proiectare încorporate ale Divi.

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra designului folosind mai multe glisoare pentru a prezenta serviciile unul câte unul.

Descărcați GRATUIT Serviciile Showcase cu mai multe glisante

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Abonați-vă la canalul nostru Youtube

Ce trebuie să începeți

Pentru a începe, va trebui să aveți următoarele:

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
3. Imagini care urmează să fie utilizate pentru conținut fals

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea serviciilor de prezentare cu designul glisantelor multiple în Divi

Creați secțiunea și rândul 1

Pentru a începe, creați o secțiune obișnuită cu un rând de o coloană.

Apoi, înainte de a adăuga module, deschideți setările secțiunii și adăugați o imagine de fundal închisă (sau o culoare de fundal).

Apoi deschideți setările rândului și actualizați următoarele:

Lățime maximă: 80%

Adăugați textul antetului cu un modul de text

Pentru a adăuga textul antetului pentru design, să folosim un modul text. Continuați și adăugați un modul de text pe rând.

Apoi actualizați conținutul corpului modulului text cu următorul HTML:

<h1>How can we help?</h1>

Apoi actualizați setările de proiectare după cum urmează:

Titlu Font: Montserrat
Culoare text antet: #ffffff
Dimensiune text antet: 6vw
Căptușeală: 5% sus, 5% jos

Adăugați al doilea rând

Apoi, adăugați un alt rând cu un aspect cu trei coloane.

Apoi actualizați setările rândurilor cu o lățime maximă de 80%.

Lățime maximă: 80%

Adăugați un glisor în coloana 1

Acum suntem gata să începem să adăugăm glisoarele noastre la fiecare dintre coloanele. Începeți cu adăugarea unui modul glisant în coloana 1.

Ștergeți al doilea diapozitiv implicit, astfel încât să rămână doar un singur diapozitiv.

Apoi actualizați următoarele:

Afișați săgețile: NU
Afișați comenzile: NU
Culoare fundal: rgba (0,0,0,0)

Alinierea textului: stânga
Titlu Font: Montserrat
Titlu Greutate font: Semi Bold
Culoarea fundalului butonului: # 38b3cb
Lățimea chenarului butonului: 0 px

Apoi setați opțiunile de animație automată după cum urmează:

Animație automată: ON
Viteza automată de animație: 3000
Continuați glisarea automată la Hover: ON

În mod implicit, Divi va adăuga o animație de estompare subtilă între diapozitive. Vrem să dezactivăm acest lucru, astfel încât să nu existe nicio modificare vizibilă între diapozitive. Pentru aceasta, adăugați următorul CSS personalizat la Descrierea diapozitivului:

animation: none !important;

Aceasta are grijă de setările glisorului. Acum trebuie să ne actualizăm diapozitivele individuale.

Crearea diapozitivelor pentru Slider 1

Vom folosi trei glisoare cu câte un glisor în fiecare dintre cele trei coloane. Și pentru a obține sincronizarea diapozitivelor pentru a evidenția fiecare serviciu unul câte unul, trebuie să avem trei diapozitive pentru fiecare glisor. Apoi, putem alege unul dintre diapozitive care urmează să fie proiectat pentru prezentarea sau evidențierea serviciului.

Să începem prin a crea cele trei diapozitive pentru Slider 1.

Deschideți setările pentru diapozitivul individual. Apoi reglați conținutul textului corpului pentru a conține doar o frază scurtă.

Acum salvați setările individuale ale diapozitivelor și duplicați diapozitivul de 2 ori, astfel încât să aveți în total trei diapozitive. Amintiți-vă, pentru acest design, trebuie să aveți același număr de diapozitive ca și cele glisante / coloane.

Copierea și lipirea glisorului în fiecare coloană rămasă

Cu cele trei diapozitive în poziție pe Slider 1, putem copia modulul glisor și îl putem lipi în coloana 2 și coloana 3.

Acum ar trebui să aveți același glisor în fiecare coloană. Și fiecare glisor are trei diapozitive identice care sunt setate să treacă automat la fiecare 3000ms. Și din moment ce am dezactivat animația de estompare, nu puteți vedea tranzițiile dintre diapozitive. Cu toate acestea, dacă schimbăm designul uneia dintre diapozitive, vom putea vedea diferența atunci când glisorul merge la respectivul diapozitiv. Acest lucru ne permite să schimbăm designul unui diapozitiv în fiecare glisor pentru a prezenta (sau evidenția) serviciul cu animație automată.

Actualizarea fiecărui glisor cu un Slide Showcase

Pentru a face acest lucru, vom schimba designul primului diapozitiv din glisorul 1, al doilea diapozitiv în glisorul 2 și al treilea diapozitiv în glisorul 3. Acest lucru va evidenția automat fiecare serviciu (la fiecare 3000 ms) începând din coloana din stânga și terminând cu a treia coloană din dreapta. Apoi va continua să repete această animație automată.

Actualizați Slider 1 Slide Showcase

Începeți prin deschiderea setărilor pentru glisorul 1 și apoi deschiderea setărilor pentru primul slide individual.

Pentru a evidenția serviciul, vom actualiza diapozitivul cu o culoare de fundal (care se potrivește cu butonul) și o imagine de fundal care este amestecată împreună cu culoarea de fundal folosind modul de amestecare multiplă.

Pentru a face acest lucru, adăugați următoarele:

Culoare fundal: # 00b2ca
Imagine de fundal: [încărcați imaginea dorită]
Amestec de imagine de fundal: înmulțiți

Apoi actualizați stilul butonului pentru acest diapozitiv după cum urmează:

Culoarea textului butonului: # 00b2ca
Culoarea fundalului butonului: #ffffff

Salvează setările.

Acum, cu noul design adăugat la primul slide, veți vedea primul slide care evidențiază serviciul ori de câte ori glisorul ajunge la primul slide.

Actualizați Slider 2 Slide Showcase

Pentru Slider 2, dorim ca al doilea slide să fie slide-ul nostru de prezentare, astfel încât să apară imediat după slide-ul de prezentare în slide-ul 1.

Deschideți setările modulului glisor pentru glisorul din coloana 2 și schimbați culoarea de fundal a butonului.

Culoarea fundalului butonului: # 1d4e89

Apoi deschideți setările de diapozitive individuale pentru al doilea diapozitiv și actualizați următoarele:

Culoare fundal: # 1d4e89
Imagine de fundal: [încărcați imaginea la alegere]
Amestec de imagine de fundal: lumină moale (sau multiplicare pentru un efect mai întunecat)

Apoi actualizați stilul butonului pentru diapozitiv.

Culoarea textului butonului: # 1d4e89
Culoarea fundalului butonului: #ffffff

Actualizați Slider 3 Slide Showcase

Pentru Slider 3 (în coloana 3), va trebui să actualizăm al treilea diapozitiv ca diapozitivul nostru de prezentare, astfel încât să apară imediat după al doilea diapozitiv de prezentare.

Mai întâi, modificați culoarea butonului glisorului 3 după cum urmează:

Culoarea fundalului butonului: # ef476f

Apoi deschideți setările pentru al treilea diapozitiv și actualizați următoarele:

Culoare fundal: # ef476f
Imagine de fundal [inserați imaginea la alegere]
Amestec de imagine de fundal: înmulțiți

Apoi actualizați stilul butonului pentru diapozitiv după cum urmează:

Culoarea textului butonului: # ef476f
Culoarea fundalului butonului: #ffffff

Rezultat final

Să verificăm rezultatul final.

Iată cum se stochează designul pe tabletă și telefon.

Gânduri finale

Prezentarea serviciilor folosind mai multe glisoare cu animație automată pare cam dificilă. Dar este de fapt destul de ușor odată ce ați înțeles conceptul.

Deoarece fiecare glisor reprezintă un serviciu, va trebui să păstrați conținutul la fel și să vă asigurați că adresa URL a butonului dvs. este aceeași pentru fiecare diapozitiv.

Există, de asemenea, multe alte modalități prin care puteți utiliza această configurare. De exemplu, puteți seta durata automată a animației la viteze diferite pentru a face serviciile să fie evidențiate sporadic. Și puteți adăuga chiar și servicii diferite în cadrul fiecărui diapozitiv al glisoarelor pentru a deschide mai multe servicii.

Personal îmi place configurarea actuală, deoarece arată progresia și poate fi utilizată pentru a arăta vizitatorilor un proces. Dar mi-ar plăcea să vă aud gândurile și ideile.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!