Donje ladice korisni su dodaci svakom web stranica, jer pohranjuju dodatni sadržaj koji je korisnicima lako dostupan. Ladice podnožja su spremnici web sadržaja (poput odjeljka Divi) koji se mogu otvoriti i zatvoriti klikom na gumb ili prelaskom miša iznad njih. To je kao da imate malo zalihe za vrhunski sadržaj.
U ovom vodiču dizajnirat ćemo plutajuću ladicu podnožja u Diviju. Dodat ćemo ladicu podnožja u globalno područje podnožja predložak web stranice tako da je ladica podnožja dostupna na cijeloj stranici s 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 u nekoliko minuta.
Kako dodati predložak ladice podnožja na svoju web lokaciju Divi
Dodavanje ovog modela zamijenit će predložak web stranice prema zadanim postavkama (ako ga imate) na vašoj Divi stranici. Predlažemo da ga dodate na testnu stranicu kako ne biste ništa zabrljali na živoj stranici.
Da sami uvezete predložak ladice fiksnog podnožja web stranica, raspakirajte zip datoteku za preuzimanje da biste pristupili JSON datoteci.
Zatim idite na WordPress nadzornu ploču i idite na Divi> Graditelj tema.
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", samo u slučaju da ste prethodno imali nešto u predložak web stranice zadane postavke koje niste htjeli nadjačati.
Zatim kliknite na gumb 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, u redu?
1. dio: Dodavanje globalnog podnožja
Generator tema Divi omogućuje vam da zamijenite zadani podnožje novim ažuriranjem zadanog predloška web stranice.
Da biste stvorili globalno podnožje, idite na nadzornu ploču WordPressa i idite na Divi> Graditelj tema. Zatim kliknite 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 izgledu podnožja
Ovo će rasporediti Uređivač izgleda modela gdje će se odmah zatražiti tri izbora kako želite započeti izgradnju. Odaberite opciju "Odabir unaprijed definiranog izgleda".
U skočnom prozoru Učitaj iz biblioteke pronađite izgled odredišne stranice pribora. Zatim kliknite "Koristi ovaj izgled".
Uklonite neželjeni sadržaj iz unaprijed pripremljenog izgleda
Nakon što se raspored učita u uređivač, proširite skočni okvir Slojevi klikom na ikonu slojeva u izborniku postavki. Zatim izbrišite sve odjeljke izgleda osim zadnja dva.
Pomaknite i označite dva odjeljka
Nakon uklanjanja odjeljaka 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 odjeljku tako da glasi "Ladica podnožja". Ovo će biti odjeljak koji ćemo koristiti kao sadržaj naše ladice s podnožjem.
Dio 2: Izrada ladice sa stalnim podnožjem
Sad kad smo jedan od odjeljaka odredili za podnožje, a drugi za ladicu podnožja, spremni smo započeti izgradnju naše fiksne ladice za podnožje. Krenimo od stvaranja ikone zamućenja kojom ćemo prebacivati ladicu podnožja.
Stvaranje gumba ladice za podnožje
Dodajte novi redak
U donjem dijelu podnožja dodajte novi redak stupcu.
Označite novi red "Gumb ladice", jer će to biti redak koji će sadržavati gumb koji se koristi za prebacivanje ladice u položaj za otvaranje i zatvaranje. Zatim pomaknite liniju na vrh odjeljka.
Podstava za redove
Prije dodavanja modula, otvorite postavke retka i ažurirajte udaljenost 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 stvorili gumb na koji je moguće kliknuti koji prebacuje ladicu podnožja, upotrijebit ćemo modul za zamućivanje s ikonom. I dat ćemo mu jedinstveni oblik kapljica vode kombinirajući kvadratni oblik 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 snimku 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 tekstualni spremnik da bi se stvorio oblik kapljice vode.
Položaj zamućenja
Zatim postavite prezentacijskom tekstu apsolutnu poziciju u gornjem centru odjeljka.
- Pozicija: Apsolutno
- Lokacija: Top Center
Postavke transformacije zamućenja
Sada možemo koristiti opcije pretvorbe za zakretanje zamućenja / ikone prema gore i postavljanje 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 stupnjeva
Zatim uklonite zadanu animaciju ikone:
- Animacija slike / ikona: 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: ciljna 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:
- Preobrazi prevoditelj Y os: 100%
Ljepota korištenja transformacije ovdje je u tome što se postotne vrijednosti temelje na stvarnoj veličini predmeta. Dakle, 100% na osi Y bit će izravno u odnosu na visinu presjeka (nomatter što je to u bilo kojem trenutku). Drugim riječima, element će se premjestiti na točnu udaljenost kao vlastitu visinu.
Da bi se "Ladica podnožja" vratila u prikaz, trebat ćemo obrnuti prijevod transformacije koji smo upravo dodali u odjeljak. Da bismo to učinili, morat ćemo ciljati element s CSS klasom i onemogućiti transformaciju prijevoda klikom na ikonu (vratiti cijeli odjeljak u prvobitni položaj).
Dodajte CSS klasu u odjeljak ladice podnožja
Ispod napredne kartice dodajte sljedeću CSS klasu:
- CSS klasa: has-transform
Odjeljak ladice podnožja Fiksni položaj
Za posljednji korak ladicu podnožja moramo popraviti tako da ona (s ikonom) pluta na dnu prozora preglednika.
Ažurirajte položaj odjeljka "Footer Footer" na sljedeći način:
- Pozicija: fiksno
- 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 sa zaslona. U ovom ćemo primjeru sakriti srednji red izgleda odjeljka.
Otvorite postavke od drugog do posljednjeg retka u odjeljku "Ladica podnožja". 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 gumb.
Zatim na područje koda zalijepite sljedeći kôd:
.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 spremiti izgled prije izlaska iz uređivača.
Također spremite promjene u generatoru tema.
Konačni rezultat
Sada možemo otići na bilo koju vašu stranicu web stranica vidjeti konačni rezultat.
Završne misli
Nadamo se da će vam plutajuća ladica podnožja pomoći unaprijediti sadržaja na zabavan i pristupačan način. Kao i svaku ladicu, možete je napuniti sa svime što vam padne na pamet.
Ostali resursi
Ovdje je popis udžbenika koji vam mogu pomoći da postignete više s unutarnjim značajkama Divi-ja.
- Kako stvoriti tematski alatni alat na Divi
- Kako stvoriti animirani promotivni odsjek na Divi
- Kako prilagoditi rešetke na Divi
Prevedeno sa: Elegantan Teme
