Cum să creați un glisor de galerie foto personalizată în Divi
Publicat: 2019-06-10Știm cu toții că glisoarele sunt excelente pentru a atrage utilizatorii cu servicii, produse sau pagini recomandate într-o locație convenabilă deasupra pliantei. Unele site-uri (cred că fotografii) trebuie să prezinte una sau mai multe dintre galeriile lor foto pe pagina principală. Folosirea unui glisor pentru aceasta poate fi o opțiune plăcută. Cu toate acestea, este posibil să nu vă fi gândit să prezentați galeria foto într-un glisor de genul acesta.
În acest tutorial, vă voi arăta o modalitate ușoară de a încorpora galeriile de imagini Divi în diapozitivele dvs. pentru a crea un glisor complet personalizat pentru galeria foto în Divi. Trucul este să creați o galerie de imagini WordPress în zona de conținut a glisorului dvs. Apoi, trebuie doar să vă asigurați și să selectați opțiunea de a utiliza Galeria Divi în loc de stilul implicit al Galeriei WordPress. Este foarte ușor și distractiv de implementat.
Să începem.
Trage cu ochiul
Iată un vârf al glisorului galeriei foto pe care îl vom construi în acest tutorial.
Descărcați aspectul glisant al galeriei foto personalizate GRATUIT
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.
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.
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?
Ce trebuie să începeți
Pentru a începe, va trebui să aveți următoarea configurare:
- Tema Divi instalată și activă
- O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
- Aproximativ 6-8 imagini care vor fi utilizate pentru imaginea glisantă și galeria foto
După aceea, veți avea o pânză goală pentru a începe să construiți câteva file de plutire în Divi.
Activați opțiunea Divi Gallery în Opțiunile temei Divi
Divi vă permite să înlocuiți afișajul implicit al Galeriei WordPress cu un afișaj al Galeriei Divi. Deci, ori de câte ori creați o galerie WordPress și o încorporați într-un modul, galeria va fi afișată ca o galerie utilizând modulul Divi Gallery. Acest lucru vă permite practic să adăugați galerii de imagini Divi la orice modul din Divi Builder. În cazul nostru, vom adăuga o galerie Divi la modulul glisor.
Pentru a modifica setarea, navigați la Divi> Opțiuni temă. Apoi, sub fila General, faceți clic pentru a activa opțiunea Divi Gallery.
Asta e! Acum, codul scurt implicit al Galeriei WordPress va afișa o galerie foto în stil Divi.
Crearea glisorului Galerie foto personalizată în Divi
Secțiunea și rândul
Pentru a începe lucrurile, continuați și creați o secțiune obișnuită cu un rând cu o coloană.
Apoi actualizați setările rândului după cum urmează:
- Lățime: 100% (deci glisorul va fi lățime completă pe mobil)
- Căptușeală: 0 px sus, 0 px jos
- Colțuri rotunjite: 20 px
Construirea conținutului glisor
Apoi, adăugați un modul glisant pe rând.
Deschideți setările glisorului și ștergeți unul dintre diapozitivele care au fost adăugate în mod implicit. Apoi faceți clic pe pictograma roată din diapozitiv pentru a deschide setările diapozitivului pentru diapozitivul respectiv.
Apoi actualizați conținutul diapozitivului cu următoarele:
- Titlu: Galeria noastră
- Buton: Vizualizați toate
- Corp: Aceasta este galeria noastră. Verifică.
Sub zona de conținut a corpului, faceți clic pe butonul Adăugare media.
În fereastra pop-up Media Library, selectați fila Creați galerie din partea stângă sus. Apoi selectați 6 imagini pe care doriți să le utilizați pentru galerie și faceți clic pe butonul „Creați o galerie nouă” din dreapta jos.
Acest lucru vă va duce la pagina de editare a categoriei din fereastra pop-up. Ignorați setările galeriei din dreapta sus, deoarece stilurile galeriei Divi vor suprascrie aceste setări ale galeriei WordPress.
Apoi faceți clic pe butonul „Inserați galeria”.
Aceasta plasează un cod scurt al galeriei în conținutul modulului glisor. Dacă doriți ca galeria să fie afișată după textul curent al corpului, asigurați-vă că plasați codul scurt după conținut.
Acum aveți o galerie încorporată în stil Divi afișată în zona de conținut a modulului glisor. Lucruri destul de cool!
Să continuăm să ne actualizăm conținutul diapozitivelor adăugând o imagine de diapozitiv principală.
Acum că avem conținutul glisor gata de pornire, salvați setările pentru diapozitivul 1.
Setări glisor
Asigurați-vă că salvați setările pentru slide-ul individual. Apoi actualizați următoarele setări de proiectare pentru glisorul principal. Acest lucru vă va asigura că actualizările de design vor afecta toate diapozitivele individuale pe care le veți adăuga.
Image Border și Box Shadow
- Imagine Colțuri rotunjite: 20 px
- Lățimea marginii imaginii: 40 px (desktop), 0 px (tabletă)
- Culoare margine imagine: rgba (0,0,0,0)
- Image Box Shadow: vezi captura de ecran
- Poziție orizontală a umbrei cutiei: -170px
- Box Shadow Vertical Position: -220px
- Puterea răspândirii umbrei cutiei: -60px
- Culoare umbră: rgba (255,255,255,0,2)
Titlul și textul corpului
- Titlu Font: Karla
- Alinierea textului titlului: dreapta
- Dimensiunea textului titlului: 48 px
- Înălțimea liniei de titlu: 1.3em
- Dimensiunea textului corpului: 16 px
- Spațierea literelor corporale: 2 px
- Înălțimea liniei corpului: 2em
Stiluri de butoane
- Dimensiune text buton: 16 px
- Culoarea fundalului butonului: # 333333
- Lățimea chenarului butonului: 0 px
- Raza chenarului butonului: 20 px
- Distanța dintre litere și butoane: 2 px
- Buton Font: Karla
- Fontul butonului Greutate: Bold
- Pictogramă buton: vezi captura de ecran
- Aliniere buton: dreapta
- Buton Marja: -5em dreapta
- Buton de umplere (desktop): 3em stânga, 5em dreapta
- Buton de umplere (telefon): 2em stânga, 6em dreapta
- Shadow Box Button: vezi captura de ecran
- Box Shadow Vertical Position: 0px
- Puterea răspândirii umbrei cutiei: 20 px (desktop), 10 px (telefon)
- Culoare umbră: #ffffff
Slider Padding
- Căptușeală: 10% sus, 10% jos
Adăugarea unui gradient de fundal la diapozitivul 1
Acum, că avem stilul glisant în poziție, putem adăuga un gradient de fundal personalizat diapozitivului nostru individual. Deschideți setările de diapozitive pentru diapozitivul 1 și actualizați următoarele:
- Culoarea din stânga a gradientului de fundal: # 6d0066
- Culoarea dreaptă a gradientului de fundal: # 000000
- Tipul gradientului: radial
- Direcție radială: stânga sus
Crearea diapozitivului 2
Pentru a crea al doilea diapozitiv, putem doar să duplicăm diapozitivul 1 folosind pictograma duplicat. Apoi deschideți setările diapozitivului duplicat (diapozitivul 2).
În acest moment puteți actualiza conținutul noului diapozitiv, după cum este necesar. De exemplu, puteți adăuga o nouă imagine de diapozitiv și puteți genera un alt cod scurt de încorporare a galeriei pentru a adăuga o nouă galerie foto la diapozitiv.
Apoi actualizați gradientul de fundal după cum urmează:
- Culoarea din stânga a gradientului de fundal: # 0c71c3
Rezultat final
Iată rezultatul final.
Iată cum arată glisorul pe tabletă și telefon.
Și aici este glisorul dacă scoateți imaginile de diapozitive astfel încât să se afișeze numai conținutul diapozitivului și galeria.
Gânduri finale
Abilitatea de a încorpora o galerie divi în modulul glisor Divi deschide oportunitatea de a crea câteva glisoare de galerie foto cu un efort deosebit. Sperăm că acest tutorial vă va oferi o inspirație pentru crearea unor glisoare frumoase pentru galerii foto.
Pentru mai multe informații despre această tehnică de încorporare a galeriei divi (inclusiv sfaturi despre stilarea galeriei de încorporare divi), consultați postarea despre cum să încorporați galeriile Divi în comutatoare.
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Noroc!