Cum se creează proceduri mobile cu ajutorul modulului Slider Divi (Descărcare gratuită!)

Sliderurile au fost întotdeauna foarte populare în designul web. Unul dintre cele mai mari avantaje ale lor este faptul că vizitatorii le pot trece prin dispozitivele mobile. În zilele noastre, glisarea este noul clic, deci este de la sine înțeles că includerea glisorelor poate contribui la îmbunătățirea experienței utilizatorului mobil pe care vizitatorii o au pe site-ul dvs. web. Când creați un site web cu Divi, puteți adăuga cu ușurință modulul Slider la orice rând sau secțiune la care lucrați. Și cu un pic de creativitate și experimentare, puteți realiza modele web uimitoare.

Unul dintre lucrurile pe care le puteți face este să creați o prezentare mobilă cu modulul Slider. Puteți adăuga câte diapozitive doriți și pasul va arăta la fel de bine pe desktop și tabletă, deși este conceput inițial pentru dispozitive mobile. În această postare, vom recrea un exemplu uimitor de la zero și vom oferi secțiunea pentru descărcare la sfârșitul acesteia.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe care îl vom recrea pe diferite dimensiuni de ecran.

Static

GIF

Să începem să recreăm!

Cum se creează proceduri mobile cu ajutorul modulului glisant Divi

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Spațiere

Să începem să creăm! Adăugați o pagină nouă sau deschideți una existentă și adăugați o nouă secțiune obișnuită la ea. Deschideți setările secțiunii și adăugați câteva valori de umplere personalizate care se potrivesc diferitelor dimensiuni ale ecranului.

• Căptușeală superioară: 4vw (desktop), 5vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 4vw (desktop), 5vw (tabletă), 3vw (telefon)
• Căptușire stângă: 30vw (desktop), 18vw (tabletă), 3vw (telefon)
• Căptușeală dreaptă: 30vw (desktop), 18vw (tabletă), 3vw (telefon)

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândurilor și adăugați un fundal de gradient radial.

• Culoare 1: # f9f9f9
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 40%
• Poziție finală: 40%

Dimensionare

Continuați accesând setările de dimensionare ale rândului și eliminați tot spațiul dintre coloane.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

De asemenea, adăugăm niște căptușeală inferioară la rând.

• Căptușeală inferioară: 30 px

Frontieră

Apoi, adăugați „20px” la fiecare dintre colțurile din setările de margine.

Box Shadow

Nu în ultimul rând, adăugați o umbră de casetă subtilă la rând pentru a crea o anumită adâncime a paginii.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0.07)

Adăugați un modul Slider

Schimbați culoarea de fundal

După ce ați terminat modificarea setărilor rândului, puteți continua și adăuga un modul glisant. Deschideți setările modulului și modificați culoarea de fundal. Toate modificările pe care le faceți în fila de proiectare se vor aplica automat tuturor diapozitivelor pe care le adăugați ulterior.

• Culoare fundal: rgba (255,255,255,0)

Setări text

Apoi, accesați fila de proiectare și modificați setările de text.

• Orientare text: centru
• Culoare umbră: rgba (0,0,0,0)

Setări text corp

Modificați apoi setările pentru textul corpului.

• Font corp: implicit (Open Sans)
• Dimensiunea textului corpului: 0,6vw (desktop), 1,5vw (tabletă), 2,4vw (telefon)
• Înălțimea liniei corpului: 2.2em (desktop), 2.3em (tabletă), 2.4em (telefon)

Spațiere

Adăugați și câteva căptușeli personalizate de sus și de jos.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 2vw

Buton CSS personalizat

De asemenea, va trebui să adăugăm mai multe valori personalizate de umplere și marjă la butonul modulului Slider, în special. Deoarece acest element este combinat cu diferite elemente în fiecare diapozitiv, va trebui să adăugați manual umplutura și marginea folosind codul CSS în fila avansată.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Eliminați glisoarele active

După ce ați terminat de modificat toate setările generale ale diapozitivelor, puteți continua și elimina diapozitivele active care sunt deja acolo. În loc să le folosim, vom crea una de la zero în următoarea parte a postării. Acest lucru ne va ajuta să modificăm și să personalizăm totul mai rapid.

Personalizați primul diapozitiv

Personalizați conținutul în caseta de conținut

Adăugați un nou slide la modulul Slider și începeți să personalizați conținutul din caseta de conținut. În ecranele de imprimare de mai jos, veți observa că adăugăm imaginea în caseta de conținut în loc de setările imaginii. Acest lucru ne va permite să plasăm imaginea deasupra conținutului scris. Puteți găsi ilustrațiile pe care le-am folosit accesând postarea Graphic Illustrator Layout Pack și descărcând imaginile la sfârșitul acestuia. De asemenea, adăugăm și denumim un titlu H3 în caseta de conținut, în loc de câmpul pentru titlu, pentru ca acesta să apară exact unde vrem.

Link buton

Continuați accesând setările pentru link și adăugați un link la butonul care va redirecționa vizitatorii către o pagină mai detaliată despre diapozitivul în cauză.

Fundal de gradient

Apoi, adăugați un fundal de gradient utilizând următoarele setări:

• Culoare 1: #aaacff
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 30%
• Poziție finală: 30%

Navigare

Modificați setările de text în continuare.

• Culoare personalizată săgeți: # f4f4f4
• Culoare personalizată Dot Nav: # 000000

Setări text

Și modificați culoarea textului în setările de text ale diapozitivului.

• Culoarea textului: Întunecat

Buton

Nu în ultimul rând, modificați butonul pentru a face să arate exact așa cum doriți.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0,8vw (Desktop), 2vw (Tabletă), 3vw (Telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: #aaacff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 10 px

Clonați diapozitivul de câte ori este necesar

După ce ați terminat de creat și personalizat primul diapozitiv, puteți continua și clona diapozitivul de câte ori doriți. Va trebui să faceți câteva modificări manuale la fiecare dintre duplicate.

Schimbați conținutul în caseta de conținut

Primul lucru pe care va trebui să îl modificați este conținutul din caseta de conținut. Aceasta include imaginea / ilustrația care este utilizată. Puteți găsi ambele ilustrații care au fost utilizate în acest tutorial accesând postarea Graphic Illustrator Layout Pack și descărcând imaginile la sfârșitul acestuia.

Schimbați legătura

Schimbați și linkul butonului.

Modificați fundalul de gradient

De asemenea, puteți personaliza paleta de culori a fiecărui diapozitiv duplicat schimbând prima culoare de gradient.

• Culoare 1: #ffccaa

Schimbați culoarea de fundal a butonului

Utilizați aceeași culoare pentru a schimba culoarea de fundal a butonului. Repetați acești pași pentru fiecare dintre duplicatele pe care le creați și ați terminat!

• Culoarea fundalului butonului: #ffccaa

Descărcați secțiunea Mobile Walkthrough GRATUIT

Pentru a pune mâna pe secțiunea gratuită de accesare mobilă, va trebui mai întâi să o 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!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe care îl vom recrea pe diferite dimensiuni de ecran.

Static

GIF

Gânduri finale

În această postare, v-am arătat cum să utilizați modulul Slider Divi pentru a crea o prezentare mobilă superbă. Deși a fost inițial conceput pentru dimensiunile ecranului mobil, arată la fel de bine pe tabletă și desktop. Puteți utiliza această abordare pentru a crea tot felul de secțiuni de diapozitive pe site-ul dvs. web și pentru a interacționa perfect cu vizitatorii dvs. Sperăm că acest tutorial vă va inspira să fiți creativi cu modulul Slider Divi. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!