Donje ladice su koristan dodatak bilo kojoj site Web, jer pohranjuju dodatni sadržaj lako dostupan korisnicima. Ladice podnožja su kontejneri web sadržaja (poput Divi odjeljka) koji se mogu otvoriti i zatvoriti klikom na dugme ili prelaskom miša iznad njih. To je kao da imate malo zaliha za vrhunski sadržaj.
U ovom vodiču ćemo dizajnirati plutajuću ladicu podnožja u Diviju. Dodaćemo fioku za podnožje u globalno područje podnožja predložak web stranice tako da je ladica podnožja dostupna na cijeloj web lokaciji sa normalnim sadržajem podnožja.
S postupkom koji ćemo koristiti, bilo koji odjeljak Divi (i njegov sadržaj) može se pretvoriti u ladicu podnožja za nekoliko minuta.
Kako dodati predložak ladice podnožja na svoju Divi stranicu
Dodavanje ovog modela će zamijeniti predložak web stranice po defaultu (ako ga imate) na vašoj Divi stranici. Predlažemo da ga dodate na probnu stranicu kako ne biste ništa zabrljali na stranici uživo.
Da sami uvezete predložak ladice fiksnog podnožja site Web, raspakujte zip datoteku za preuzimanje da biste pristupili JSON datoteci.
Zatim idite na WordPress nadzornu ploču i idite na Divi> Theme Builder.
Zatim kliknite ikonu prenosivosti u gornjem desnom dijelu stranice.
U prozoru prenosivosti odaberite JSON datoteku koju ste upravo raspakirali i odaberite opciju "Preuzmi sigurnosnu kopiju prije uvoza", za slučaj da ste prethodno imali nešto u predložak web stranice zadano koje niste željeli poništiti.
Zatim kliknite na dugme Uvezi.
Na kraju, spremite promjene u generatoru tema i prikažite stranicu uživo da biste vidjeli fiksnu traku podnožja.
A sad na tutorial, ok?
1. dio: Dodavanje globalnog podnožja
Generator tema Divi omogućava zamjenu zadanog podnožja novim ažuriranjem ažuriranog predloška web stranice.
Da biste kreirali globalno podnožje, idite na WordPress nadzornu ploču i idite na Divi> Graditelj tema. Zatim kliknite na prostor „Dodaj globalno podnožje“ unutar zadanog predloška web stranice.
Zatim s padajućeg popisa odaberite opciju "Build Global Footer".
Dodajte unaprijed definirani izgled globalnom rasporedu podnožja
Ovo će rasporediti Uređivač izgleda modela gdje će se odmah zatražiti tri izbora kako želite započeti izgradnju. Odaberite opciju "Odaberite unaprijed definirani izgled".
U skočnom prozoru Učitaj iz biblioteke pronađite izgled odredišne stranice pribora. Zatim kliknite na "Koristi ovaj izgled".
Uklonite neželjeni sadržaj iz preliminarnog izgleda
Nakon što se raspored učita u editor, proširite skočni okvir Slojevi klikom na ikonu slojeva u izborniku postavki. Zatim izbrišite sve odjeljke izgleda osim zadnja dva.
Pomerite i označite dva odeljka
Jednom kada se odjeljci uklone, trebali biste imati dva odjeljka, jedan pod nazivom "Podnožje", a drugi s naslovom "Kako to radi". Pomaknite odjeljak "Podnožje" na vrh izgleda.
Promijenite tekst u donjem dijelu kako bi glasili "Ladica podnožja". Ovo će biti odjeljak koji ćemo koristiti kao sadržaj naše ladice s podnožjem.
Dio 2: Izrada ladice sa fiksnim podnožjem
Sada kada smo jedan od odjeljaka odredili kao podnožje, a drugi kao ladicu podnožja, spremni smo započeti izgradnju naše fiksne ladice podnožja. Počnimo sa stvaranjem ikone zamućenja koju ćemo koristiti za prebacivanje ladice podnožja.
Stvaranje dugmeta fioke podnožja
Dodajte novu liniju
U donjem dijelu podnožja dodajte novi redak stupcu.
Označite novi red "Gumb ladice", jer će to biti red koji će sadržavati dugme za prebacivanje ladice u položaj za otvaranje i zatvaranje. Zatim pomaknite liniju na vrh odjeljka.
Podstava za redove
Prije dodavanja modula, otvorite postavke reda i ažurirajte dodavanje na sljedeći način:
- Padding: 0px visoko, 0px low
Obloga odsjeka
Zatim otvorite postavke u odjeljku "Footer ladica" i ažurirajte obloge na sljedeći način:
Da bismo kreirali dugme na koje je moguće kliknuti i koje prebacuje ladicu podnožja, upotrijebit ćemo modul za zamućivanje s ikonom. I dat ćemo mu jedinstveni oblik kapljice vode kombiniranjem kvadratnog oblika spremnika mahune Blurb s ikonom kruga.
Evo kako.
Dodajte modul Blurb
Dodajte prezentacijski tekstualni modul u liniju „Gumb za crtanje“ na vrhu odjeljka.
Sadržaj / ikona zamućenja
Zatim uklonite zadani sadržaj naslova i sadržaja i odaberite ikonu strelice koja pokazuje na gornji lijevi kut (pogledajte snimak zaslona). Koristimo djelomično rotiranu ikonu jer ćemo je kasnije zakrenuti.
Dizajn zamućenja
Zatim dodajte tekst prezentacije na sljedeći način:
- Boja pozadine: # 081540
Zatim ažurirajte parametre dizajna na sljedeći način:
- Boja ikone: #eeeeee
- Ikona kruga: DA
- Boja kruga: # 081540
- Koristite veličinu fonta ikone: DA
- Veličina fonta ikone: 17 piksela
Veličina teksta prezentacije
Sada dodajte modulu visinu i širinu kako slijedi:
- Širina: 30px
- Visina: 30px
To će dovesti do prelijevanja ikone kruga u spremnik za tekst da bi se stvorio oblik kapljice vode.
Položaj zamućenja
Zatim postavite tekst prezentacije apsolutnu poziciju u gornjem centru odjeljka.
- Pozicija: Apsolutno
- Lokacija: Top Center
Postavke transformacije zamućenja
Sada možemo koristiti opcije transformacije da zakrenemo blurb / ikonu prema gore i postavimo je odmah iznad spremnika odjeljka. Sada kada sakrijemo odjeljak ispod prozora preglednika, ikona će ostati vidljiva / na nju se može kliknuti.
Ažurirajte sljedeće stavke:
- Os Transform Translate X: -50%
- Transformacija prevođenja Y osi: -250%
- Transformacija rotacije Z osi: -45 stepeni
Zatim uklonite zadanu animaciju ikone:
- Animacija slike / ikone: Nema animacije
Koristit ćemo JQuery za prebacivanje ladice, pa moramo tekst / ikonu ciljati kao element na koji se može kliknuti s CSS klasom koju ćemo koristiti kasnije u kodu. Dodajte sljedeću CSS klasu:
- CSS klasa: cilindrična ladica
Postavke odjeljka fioke podnožja
Sada ćemo sakriti odjeljak "Ladica podnožja" pomoću opcije translate transform. Otvorite postavke odjeljka i ažurirajte sljedeće:
- Osa Transform Translate Y: 100%
Ljepota korištenja transformacije ovdje je u tome što se procentualne vrijednosti temelje na stvarnoj veličini elementa. Dakle, 100% na Y osi bit će direktno u odnosu na visinu presjeka (koliko god da je to određeno). Drugim riječima, element će se pomaknuti prema dolje na udaljenost kao vlastitu visinu.
Da bi se "Footer Drawer" vratio u prikaz, trebat ćemo obrnuti prijevod transformacije koji smo upravo dodali u odjeljak. Da bismo to učinili, trebat ćemo ciljati element sa CSS klasom i onemogućiti transformaciju prevoda klikom na ikonu (vratiti cijeli odjeljak u prvobitni položaj).
Dodajte CSS klasu u odjeljak fioke podnožja
Ispod napredne kartice dodajte sljedeću CSS klasu:
- CSS klasa: has-transform
Odjeljak fioke podnožja Fiksni položaj
Za posljednji korak ladicu podnožja moramo popraviti tako da ona (sa ikonom) pluta na dnu prozora pregledača.
Ažurirajte položaj odjeljka "Footer Footer" na sljedeći način:
- Pozicija: fiksna
- Lokacija: donje lijevo
- Z indeks: 13
Isključite mobilni sadržaj
Budući da ćete imati ograničenu količinu sadržaja ladice u podnožju koja će odgovarati i tabletu i telefonu (zbog ograničene visine zaslona), morat ćete onemogućiti / sakriti nebitne stavke s ekrana. U ovom ćemo primjeru sakriti srednji red izgleda odjeljka.
Otvorite postavke od drugog do posljednjeg reda u odjeljku „Fioka ladica“. Na kartici Napredno ažurirajte opciju vidljivosti da biste isključili liniju na telefonu i tabletu.
Dodavanje prilagođenog koda
Da bismo dodali funkciju klikanja i prebacivanja u ladicu podnožja, na stranicu moramo dodati prilagođeni CSS i JQuery. Da biste to učinili, stvorite novi modul koda ispod modula Blurb koji se koristi za dugme.
Zatim zalijepite sljedeći kod u područje kod:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Spremite promjene
Ne zaboravite sačuvati izgled prije izlaska iz uređivača.
Spremite i promjene u generatoru tema.
Konačni rezultat
Sada možemo ići na bilo koju vašu stranicu site Web da vidite konačan rezultat.
Final misli
Nadamo se da će vam plutajuća ladica podnožja pomoći unaprijediti sadržaj na zabavan i pristupačan način. Kao i svaku ladicu, možete je napuniti gotovo svime što vam padne na pamet.
Ostali resursi
Ovdje je popis tutorijala koji vam mogu pomoći da postignete više sa unutrašnjim značajkama Divi-ja.
- Kako stvoriti alatni okvir teme na Divi-ju
- Kako stvoriti animirani promotivni odsjek na Divi
- Kako prilagoditi mreže na Divi-ju
Prevedeno sa: Elegant Teme
