Sirtarët e poshtëm janë shtesa të dobishme për çdo Site Web, pasi ato ruajnë përmbajtje shtesë të arritshme lehtësisht nga përdoruesit. Sirtarët e fundeve janë kontejnerë të përmbajtjes së uebit (si një seksion Divi) që mund të hapen dhe mbyllen duke klikuar një buton ose duke qëndruar pezull mbi to. Është si të kesh pak rezervë për përmbajtje premium.
Në këtë tutorial, ne do të dizenjojmë një sirtar lundrues të futbollit në Divi. Ne do të shtojmë sirtarin e footer-it në zonën globale të footer-it të shabllonin e faqes në internet në mënyrë që sirtari i futerit të jetë i aksesueshëm në të gjithë sitin me përmbajtje normale të fundores.
Me procesin që do të përdorim, çdo seksion Divi (dhe përmbajtja e tij) mund të shndërrohet në një sirtar të futbollit brenda pak minutash.
Si të shtoni modelin e sirtarit të Footer-it në sitin tuaj të Divi
Shtimi i këtij modeli do të zëvendësojë shabllonin e faqes në internet si parazgjedhje (nëse keni një të tillë) në faqen tuaj Divi. Ne sugjerojmë ta shtoni atë në një sajt testimi në mënyrë që të mos ngatërroni asgjë në një sajt të drejtpërdrejtë.
Për të importuar vetë shabllonin e sirtarit të fiksuar të futbollit Site Web, hiqni skedarin zip të shkarkimit për të hyrë në skedarin JSON.
Pastaj shkoni në panelin e WordPress dhe shkoni te Divi> Theme Builder.
Pastaj klikoni në ikonën e transportueshmërisë në të djathtë të faqes.
Në dritaren e transportueshmërisë, zgjidhni skedarin JSON që sapo keni zhbllokuar dhe zgjidhni opsionin "Shkarko kopje rezervë përpara importimit", vetëm në rast se më parë keni pasur diçka në shabllonin e faqes në internet parazgjedhje që ju nuk dëshironi të anashkaloni.
Pastaj klikoni në butonin Import.
Më në fund, ruani ndryshimet në gjeneratorin e temës dhe shfaqni një faqe live për të parë shiritin e këmbëve fikse.
Tani në tutorial, në rregull?
Pjesa 1: Shtimi i një Footer Global
Gjeneratori i temave Divi ju lejon të zëvendësoni nënshartesën e paracaktuar me një të re duke azhurnuar modelin e paracaktuar të faqes në internet.
Për të krijuar një botim global, shkoni në panelin e WordPress dhe shkoni te Divi> Theme Builder. Pastaj klikoni në hapësirën "Shto Global Footer" brenda Modelit të Uebfaqes së Paracaktuar.
Pastaj zgjidhni opsionin "Build Global Footer" nga lista zbritëse.
Shtoni një plan urbanistik të paracaktuar në një paraqitje globale të futbollit
Kjo do të vendosë Redaktorin e Layout Model, ku menjëherë do t'ju kërkohet me tre zgjedhje për mënyrën se si doni të filloni ndërtimin. Zgjidhni opsionin "Zgjidhni një plan urbanistik të paracaktuar".
Në dritaren pop-up Load from Library, gjeni paraqitjen e faqes së uljes së shkrimit. Pastaj klikoni në "Përdorni këtë paraqitje".
Hiq përmbajtjen e padëshiruar nga paraqitja paraprake
Sapo paraqitja të ngarkohet në redaktor, shpalosni kutinë e dritareve Layers duke klikuar ikonën e shtresave në menunë e cilësimeve. Pastaj fshini të gjitha pjesët e paraqitjes, përveç dy të fundit.
Lëvizni dhe etiketoni të dy pjesët
Pasi të hiqen seksionet, duhet të keni dy seksione, njëra me titull "Footer" dhe tjetra me titull "Si funksionon". Zhvendosni seksionin "Footer" në krye të faqosjes.
Ndryshoni formulimin në pjesën e poshtme për të lexuar "Drawer Footer". Ky do të jetë pjesa që do të përdorim si përmbajtja e sirtarit tonë të faqes kryesore.
Pjesa 2: Krijimi i sirtarit të këmbëve fikse
Tani që kemi caktuar një nga pjesët si fundin dhe tjetrin si sirtarin e fundin, ne jemi gati të fillojmë të ndërtojmë sirtarin tonë të fiksuar të faqes. Le të fillojmë duke krijuar ikonën e mjegullës që do të përdorim për të ndryshuar sirtarin e faqes së poshtme.
Krijimi i butonit të sirtarit të futbollit
Shto një rresht të ri
Në pjesën e poshtme të këmbëve, shtoni një rresht të ri në një kolonë.
Etiketoni rreshtin e ri "Butoni i sirtarit" sepse kjo është rreshti që do të përmbajë butonin e përdorur për të ndërruar sirtarin hapur dhe mbyllur. Pastaj lëvizni vijën në krye të seksionit.
Mbushja e rreshtit
Para se të shtoni një modul, hapni cilësimet e rreshtit dhe azhurnoni mbushjen si më poshtë:
- Mbushje: 0px e lartë, e ulët 0px
Mbushja e seksionit
Pastaj hapni cilësimet në seksionin "Mbledhëse e këmbës" dhe azhurnoni mbushjen si më poshtë:
Për të krijuar butonin e klikueshëm që ndryshon sirtarin e faqes kryesore, ne do të përdorim një modul blurb me një ikonë. Dhe, ne do t'i japim asaj një formë unike loti duke kombinuar formën katrore të kontejnerit pod Blurb me ikonën e rrethit.
Ja se si.
Shtoni një modul Blurb
Shtoni një modul teksti prezantimi në rreshtin "Butoni i sirtarit" në krye të seksionit.
Shfrytëzoni përmbajtjen / ikonën
Tjetra, hiqni titullin e paracaktuar dhe përmbajtjen e trupit dhe zgjidhni ikonën e shigjetës që tregon në këndin e sipërm të majtë (shih screenshot). Ne jemi duke përdorur ikonën pjesërisht të rrotulluar sepse do ta rrotullojmë atë më vonë.
Dizajn i paqartë
Pastaj jepni tekstin e prezantimit si më poshtë:
- Ngjyra e sfondit: # 081540
Pastaj azhurnoni parametrat e projektimit si më poshtë:
- Ngjyra e ikonës: #eeeeee
- Rrethi ikonë: PO
- Ngjyra e rreshtit: # 081540
- Përdorni madhësinë e shkronjave të ikonës: PO
- Madhësia e shkronjës së ikonës: 17 pixel
Madhësia e tekstit të prezantimit
Tani jepni modulit një lartësi dhe një gjerësi si më poshtë:
- Gjerësia: 30px
- Lartësia: 30px
Kjo do të bëjë që ikona e rrethit të derdhet në enën e tekstit për të krijuar formën e pikës së ujit.
Pozicioni i paqartë
Pastaj jepni tekstit të prezantimit një pozicion absolut në qendrën e sipërme të seksionit.
- Pozicioni: Absolut
- Vendndodhja: Qendra kryesore
Paraqitni cilësimet e transformimit
Tani mund të përdorim opsionet e transformimit për të rrotulluar mjegullën / ikonën lart dhe ta vendosim atë pikërisht mbi kontejnerin e seksionit. Tani kur fshehim seksionin nën dritaren e shfletuesit, ikona do të mbetet e dukshme / e klikueshme.
Përditësoni artikujt e mëposhtëm:
- Transformo Boshtin Përkthe X: -50%
- Transformimi i boshtit Y të përkthimit: -250%
- Transformimi i rrotullimit të boshtit Z: -45 gradë
Pastaj hiqni animacionin e ikonës së paracaktuar:
- Pamje / ikonë Animim: Pa animacion
Ne do të përdorim JQuery për të ndërruar sirtarin, kështu që duhet të synojmë tekstin / ikonën si një element të klikueshëm me një klasë CSS që do ta përdorim më vonë në kod. Shtoni klasën vijuese CSS:
- Klasa CSS: sirtar i synimeve
Cilësimet e seksionit të sirtarit të futbollit
Tani do të fshehim seksionin "Drawer Footer" duke përdorur opsionin e transformimit të përkthimit. Hapni cilësimet e seksionit dhe azhurnoni sa vijon:
- Transformo Transmeto boshtin Y: 100%
Bukuria e përdorimit të transformimit këtu është se vlerat e përqindjes bazohen në madhësinë aktuale të artikullit. Kështu, 100% në boshtin Y do të jetë drejtpërdrejt në krahasim me lartësinë e seksionit (jo sa është në çdo kohë të caktuar). Me fjalë të tjera, elementi do të zhvendoset në distancën e saktë si lartësia e tij.
Në mënyrë që të rikthejmë në vëmendje "Drawer Footer", do të duhet të ndryshojmë përkthimin e transformuar që sapo shtuam në seksion. Për ta bërë këtë, do të duhet të synojmë elementin me një klasë CSS dhe të çaktivizojmë transformimin e përkthimit duke klikuar në ikonën (sillni të gjithë seksionin përsëri në pozicionin e tij origjinal).
Shtoni një klasë CSS në seksionin e sirtarëve të futbollit
Nën skedën e përparuar, shtoni klasën vijuese CSS:
- Klasa CSS: ka-shndërron
Seksioni i sirtarit të këmbës Pozicioni fiks
Për hapin e fundit, ne duhet të bëjmë sirtarin e faqes së fiksuar në mënyrë që ajo (me ikonën) të notojë në fund të dritares së shfletuesit.
Përditësoni pozicionin e seksionit "Mbathje për këmbë" si më poshtë:
- Pozicioni: i fiksuar
- Vendndodhja: majtas
- Indeksi Z: 13
Fikni përmbajtjen e lëvizshme
Meqenëse do të keni një sasi të kufizuar të përmbajtjes së sirtarit në fund të faqes që do të përshtatet si në tabletë ashtu edhe në telefon (për shkak të lartësisë së kufizuar të ekranit), do të duhet të çaktivizoni / fshehni sendet jo thelbësore nga ekrani. Në këtë shembull, ne do të fshehim rreshtin e mesit të paraqitjes së seksionit.
Hapni cilësimet nga rreshti i dytë në të fundit në seksionin "Drawer Footer". Nën skedën e përparuar, azhurnoni opsionin e dukshmërisë për të çaktivizuar linjën në telefon dhe tabletë.
Shtimi i kodit personal
Për të shtuar funksionalitetin e klikimit dhe ndërrimit në sirtarin e faqes, duhet të shtojmë CSS dhe JQuery të personalizuar në faqe. Për ta bërë këtë, krijoni një modul të ri kodi nën modulin Blurb të përdorur për butonin.
Pastaj ngjitni kodin e mëposhtëm në zonën e kodit:
.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 );
Ruani ndryshimet
Mos harroni të ruani paraqitjen para se të dilni nga redaktori.
Ruani gjithashtu ndryshimet në gjeneratorin e temës.
Rezultati përfundimtar
Tani mund të shkojmë në çdo faqe tuajën Site Web për të parë rezultatin përfundimtar.
Mendimet e fundit
Shpresoj se sirtari lundrues i futbollit do t'ju ndihmojë promovojë përmbajtje në një mënyrë argëtuese dhe të arritshme. Si çdo sirtar, ju mund ta mbushni atë me pothuajse çdo gjë që mund të mendoni.
Burime të tjera
Këtu është një listë e mësimeve që mund t'ju ndihmojnë të realizoni më shumë me veçoritë e brendshme të Divi.
- Si të krijoni një kuti mjetesh temash në Divi
- Si të krijoni një seksion promovues të animuar në Divi
- Si të personalizoni rrjetet në Divi
Përkthyer nga: Elegant Temat
