Cum se adaugă elemente glisante verticale la modulul glisor Divi pentru un design unic al antetului

Modulul glisor Divi este plin de opțiuni de design care facilitează gândirea în afara cutiei și creează modele glisante uimitoare. Deci, astăzi, vom întoarce unele lucruri (literalmente). În postarea care urmează, vom adăuga elemente glisante verticale la modulul glisor Divi. Având un glisor cu elemente verticale (cum ar fi textul titlului și comenzile pentru diapozitive), vizitatorii pot vedea mai mult conținut de diapozitive și imagini de fundal în coloane mai înguste (în special pe dispozitive mobile). Iar elementele verticale adaugă o răsucire răcoritoare designului general.

Pentru a face acest lucru, vom folosi opțiunea de rotire a transformării Divi pentru a roti întregul glisor și apoi contrar rotiți alte elemente din fiecare diapozitiv, după cum este necesar, pentru a crea un design modern al glisorului vertical. Vom începe prin a trece peste tehnica de bază. Apoi vom crea un design de antet complet unic cu acest glisor vertical.

Hai să ne scufundăm!

Trage cu ochiul

Descărcați GRATUIT aspectul elementelor glisante verticale Divi

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?

https://youtu.be/Nmuy9VAYo4M

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. Două imagini care au fost rotite cu 90 de grade în sens invers acelor de ceasornic. Acest lucru se poate face cu ușurință utilizând opțiunile încorporate ale sistemului dvs. de operare sau prin orice aplicație simplă de editare a fotografiilor. De asemenea, puteți roti o imagine direct în WordPress editând elementul media.
   

După aceea, sunteți gata să vă creați capodopera în Divi.

Ideea de bază

Ideea de bază din spatele adăugării de elemente glisante verticale este de a utiliza opțiunile de transformare Divi pentru a roti modulul glisor cu 90 de grade (în sensul acelor de ceasornic sau în sens invers acelor de ceasornic), astfel încât să se afișeze vertical pe pagină. Pentru glisorul (sau diapozitivul) imagini de fundal, veți dori să rotiți imaginea în prealabil (sau utilizând editorul de imagini WordPress), astfel încât imaginea să se afișeze în poziție verticală ori de câte ori rotiți glisorul. Aceasta va afișa comenzile glisante, săgețile și textul pe verticală așa cum v-ați aștepta. Partea dificilă vine cu personalizarea înălțimii și lățimii glisorului, deoarece lucrurile sunt literalmente întoarse. Acest design glisor funcționează cel mai bine într-un aspect cu două sau mai multe coloane.

Iată un exemplu rapid de cum să faci acest lucru.

Într-o secțiune obișnuită cu un rând cu două coloane, adăugați un modul glisant în coloana din stânga.

Apoi adăugați câteva diapozitive fiecare cu un titlu, o propoziție de conținut corporal și o imagine de fundal care a fost rotită anterior în sens invers acelor de ceasornic cu 90 de grade.

Apoi rotiți modulul glisor cu 90 de grade de-a lungul axei Z folosind opțiunile de transformare Divi.

Apoi adăugați spațiere (umplutura de jos) la glisor pentru a crea lățime suplimentară și aliniați textul la dreapta fiecărui slide.

Iată rezultatul.

După cum puteți vedea, conceptul este simplu, dar aceste elemente glisante verticale pot fi foarte utile pentru a crea modele unice.

Mai jos, vom face un crack la crearea unuia dintre aceste modele unice de glisare împreună.

Adăugarea de elemente glisante verticale la modulul glisor Divi pentru un design unic al antetului

Crearea secțiunii și rândului

Fundalul secțiunii

Începeți prin crearea unei secțiuni obișnuite cu un rând cu două coloane.

Înainte de a adăuga un modul la rând, actualizați mai întâi secțiunea cu următoarea culoare de fundal:

Culoare fundal: # 24272a

Setări rând

Apoi, trebuie să acordăm rândului o lățime personalizată a jgheabului de 1 și apoi să setăm lățimea folosind unitatea de lungime vw. Utilizarea unității de lungime vw este importantă pentru ca glisorul nostru vertical să răspundă mai târziu.

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

Lățimea jgheabului: 1
Lățime: 80vw (desktop și tabletă), 95vw (telefon)
Lățime maximă: 80vw (desktop și tabletă), 95vw (telefon)

Apoi vom adăuga o umbră de cutie în scopuri de proiectare.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: -10px
Box Shadow Vertical Position: 0px
Culoare umbră: rgba (255,255,255,0,03)

Adăugați conținut de antet utilizând un modul de text

În cele din urmă vom adăuga glisorul din coloana 2, dar deocamdată să adăugăm titlul antetului cu un text suplimentar în coloana 1. Pentru a face acest lucru, vom adăuga două module de text în coloana 1.

Adăugați modulul de text pentru titlu

Pentru a adăuga titlul antetului, adăugați un modul text în coloana 1.

Actualizați conținutul corpului cu următoarea rubrică h2:

<h2>My Work</h2>

Apoi actualizați următoarele:

Rubrica 2 Font: Karla
Rubrica 2 Culoarea textului: #ffffff
Rubrica 2 Dimensiune text: 5vw (desktop), 60 px (tabletă), 50 px (telefon)
Căptușeală: 15% sus, 20% jos, 5% stânga, 5% dreapta

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 60 px
Box Shadow Vertical Position: 0px
Culoare umbră: # 9a2508

Adăugați un modul de text pentru conținutul corpului

Apoi, adăugați un nou modul de text sub primul modul de text din coloana 1. Putem lăsa conținutul implicit pentru moment.

Apoi actualizați următoarele:

Culoarea textului textului: #cccccc
Lățime: 70%
Alinierea modulului: corect
Marja: -5% top
Căptușeală: 5% jos, 10% stânga, 5% dreapta

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: 10 px
Culoare umbră: rgba (255,255,255,0,03)

Crearea glisorului vertical

Acum suntem gata să creăm glisorul cu elementele glisante verticale.

Pentru a face acest lucru, adăugați un modul Slider în coloana 2.

Deschideți setările de diapozitive din prima dintre cele două diapozitive implicite.

Tăiați textul implicit al corpului pentru a include o singură linie de text. Apoi adăugați o imagine de fundal care a fost rotită anterior în sens invers acelor de ceasornic cu 90 de grade.

Apoi faceți același lucru pentru al doilea diapozitiv implicit, oferindu-i o imagine de fundal diferită.

Rotiți glisorul

Apoi, rotiți glisorul folosind opțiunea Transformate rotire:

Transformare Rotire axa z: 90 grade

Slider Height

Nu trebuie să ne facem griji cu privire la lățimea glisorului, deoarece va acoperi automat 100% din coloană. Coloana este de 50% din 80vw (lățimea rândului), astfel încât lățimea va fi în mod implicit 40vw. Acum trebuie să acordăm glisorului o înălțime potrivită de 40vw pe desktop și apoi reglăm înălțimea la 80vw pe tabletă și 95vw pe telefon.

Actualizați următoarele:

Înălțime: 40vw (desktop), 80vw (tabletă), 95vw (telefon)

Apoi reglați umplutura pentru a alinia textul la dreapta glisorului vertical.

Umplutură (desktop): 0 px sus, 21vw jos, 0 px stânga, 0 px dreapta
Căptușeală (tabletă): 42vw jos
Garnitura (telefon): 50vw jos

Actualizați setările pentru text

Ajustați titlul și textul corpului după cum urmează:

Alinierea textului: stânga
Titlu Font: Karla
Dimensiune text titlu: 32 px
Înălțimea liniei de titlu: 1.3em
Spațierea literelor corporale: 3 px
Înălțimea liniei corpului: 1,8em

Stilizarea butonului

Pentru a stiliza și poziționa butonul, actualizați următoarele:

Dimensiune text buton: 16 px
Culoarea fundalului butonului: # 9a2508
Lățimea chenarului butonului: 0 px
Distanța dintre litere și butoane: 2 px
Buton Font Greutate: semi bold
Pictogramă buton: semnul plus (vezi captura de ecran)
Aliniere buton: dreapta
Buton Marja: 10% sus, 10% jos

Gradient de fundal

Pentru a crea un fundal pentru textul din titlul vertical al glisorului, putem adăuga un gradient de fundal glisorului după cum urmează:

Culoarea din stânga a gradientului de fundal: # 9a2508
Culoarea dreaptă a gradientului de fundal: rgba (0,0,0,0)
Poziția inițială: 12%
Poziție finală: 0%
Plasați gradientul deasupra imaginii de fundal: DA

Notă: dacă doriți, puteți ajusta opacitatea culorii de gradient de fundal dreapta pentru a crea o suprapunere pentru imaginile dvs. de diapozitive.

Rotirea săgeților buton și glisor cu CSS personalizat

Deoarece butonul nostru este încă vertical, va trebui să-l rotim înapoi la poziția sa anterioară cu un fragment de CSS. Adăugați următorul CSS la butonul Slide:

transform: rotate(-90deg);

Pentru săgețile glisante, puteți adăuga același fragment de CSS, astfel încât acestea să indice spre dreapta și spre stânga în loc de sus și jos. Și cât timp suntem acolo, putem crește și dimensiunea săgeților. Adăugați următorul CSS la

transform: rotate(-90deg);
font-size: 80px;

Asta e!

Să verificăm rezultatul final.

Rezultat final

Și iată-l pe tabletă și telefon.

Simțiți-vă liber să explorați noi modele modificând elementele verticale. Iată un exemplu de același design cu butonul poziționat în stânga și o suprapunere de text.

Gânduri finale

Rotirea modulului glisant Divi este o modalitate rapidă și eficientă de a adăuga elemente de design verticale glisorului. Într-adevăr, singura parte provocatoare este ca dimensiunea și spațiul să fie frumoase și receptive. Dar, din fericire, Divi are suficiente opțiuni încorporate care facilitează modificarea designului pentru a arăta excelent pe toate dispozitivele.

Acest design vertical al glisorului va funcționa excelent și în alte zone ale site-ului dvs., în afară de antet. Văd că acest lucru este folosit pentru prezentarea produselor prezentate sau a mărturiilor în structuri de coloane mai înguste.

Sperăm că acest lucru vă va oferi o inspirație pentru următorul dvs. proiect.

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

Noroc!