Kalo te përmbajtja kryesore

Si të krijoni sirtarë të animuar në Divi

Divi: tema më e lehtë për t'u përdorur nga WordPress

Divi: Tema më e mirë e WordPress të të gjitha kohërave!

më shumë Shkarkimet e 901.000, Divi është tema më e popullarizuar e WordPress në botë. Është i plotë, i lehtë për t'u përdorur dhe vjen me më shumë se shabllona falas 62. [Rekomanduar]

Sirtarët e faqeve të poshtme janë shtesa të dobishme në çdo faqe në internet pasi ato ruajnë përmbajtje shtesë që është lehtësisht e arritshme për përdoruesit. Sirtarët e faqeve të poshtme janë kontejnerë të përmbajtjes në internet (si një seksion Divi) që mund të hapen dhe mbyllen duke klikuar një buton ose duke qëndruar mbi të. Likeshtë si të kesh pak para për përmbajtjen premium.

Në këtë udhëzim, ne do të hartojmë një sirtar të futbollit lundrues në Divi. Ne do të shtojmë sirtarin e faqes kryesore në faqen e poshtme të faqes së shabllonit të faqes në internet, në mënyrë që sirtari i faqes të jetë i arritshëm në të gjithë faqen me përmbajtjen normale të faqes.

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ë modelin e parazgjedhur të faqes në internet (nëse e keni) në faqen tuaj Divi. Ne ju sugjerojmë ta shtoni në një sit provë që të mos ngatërroni asgjë në një faqe të drejtpërdrejtë.

Për të importuar modelin e sirtarit të këmbëve fikse në faqen tuaj të internetit, hiqni skedarin zip 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 zbërthyer dhe zgjidhni opsionin "Shkarkoni kopje rezervë para importit", vetëm në rast se më parë keni pasur diçka në modelin e paracaktuar të faqes në internet që nuk e keni bërë. nuk donte të zëvendësonte.

Pastaj klikoni në butonin Import.

Importo divi të modelit

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.

Ruani ndryshimet e paraqitjes divi

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.

Përzgjedhja e redaktorit Divi

Pastaj zgjidhni opsionin "Build Global Footer" nga lista zbritëse.

Shto një fund të faqes modeli divi

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".

Zgjidhni divi të modelit të parandërtuar

Në dritaren pop-up Load from Library, gjeni paraqitjen e faqes së uljes së shkrimit. Pastaj klikoni në "Përdorni këtë paraqitje".

Përdorni një model divi

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.

Krijoni me lehtësi faqen tuaj të internetit me Elementor

Elementor ju lejon të krijoni me lehtësi çdo dizajn të faqes në internet me një pamje profesionale. Ndaloni të paguani shtrenjtë për ato që mund të bëni vetë. [Pa]

Fshi seksionin e panevojshëm

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.

Fundfaqja Divi

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.

Modifikoni etiketën në fund të faqes

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ë.

sirtar i fiksuar i kembeve

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.

Divi i paraqitjes së përzgjedhjes

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
Ndarja ndarëse e ndara

Mbushja e seksionit

Pastaj hapni cilësimet në seksionin "Mbledhëse e këmbës" dhe azhurnoni mbushjen si më poshtë:

Konfigurimi i ndarjes së seksionit Divi

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.

Divi i sirtarit të faqes së poshtme
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ë.

Zgjidhni ndarjen e sirtarit të faqes së ikonës
Dizajn i paqartë

Pastaj jepni tekstin e prezantimit si më poshtë:

  • Ngjyra e sfondit: # 081540
Modifikoni sfondin divi

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
Personalizo butonin ndarës të mjegullt
Madhësia e tekstit të prezantimit

Tani jepni modulit një lartësi dhe një gjerësi si më poshtë:

A po kërkoni temat më të mira të WordPress dhe shtojcat?

Shkarkoni shtojcat më të mira dhe temat e WordPress në Envato dhe krijoni lehtësisht faqen tuaj te internetit. Tashmë më shumë se shkarkimet e 49.720.000. [EXCLUSIVE]

  • 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.

Redakto projektin e butonit divi
Pozicioni i paqartë

Pastaj jepni tekstit të prezantimit një pozicion absolut në qendrën e sipërme të seksionit.

  • Pozicioni: Absolut
  • Vendndodhja: Qendra kryesore
Modifikoni pozicionin e butonit divi
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
Ktheni butonin divi

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
Përcaktoni një zgjedhës divi

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.

Transformoni seksionin divi

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
Klasa e shtimit ka divi të transformimit

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
Modifikoni pozicionin në këndin divi

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.

Fshih pjesën në celular

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ë.

Kontrolloni seksionin ndarës të dukshmërisë

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.

Shto kodin e modulit

Pastaj ngjitni kodin e mëposhtëm në zonën e kodit:

Lehtë të krijoni Dyqanin tuaj Online

Shkarko pa pagesë WooCommerce, shtojcat më të mira të tregtisë elektronike për të shitur produktet tuaja fizike dhe digjitale në WordPress. [Rekomanduar]

.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 );   
Shto modulin e kodit divi

Ruani ndryshimet

Mos harroni të ruani paraqitjen para se të dilni nga redaktori.

Ruani modifikimet divi

Ruani gjithashtu ndryshimet në gjeneratorin e temës.

Ruaj ndryshimet

Rezultati përfundimtar

Tani mund të shkojmë në çdo faqe në faqen tuaj të internetit për të parë rezultatin përfundimtar.

Mendimet e fundit

Shpresoj se sirtari i faqes kryesore lundruese ju ndihmon të promovoni përmbajtje në një mënyrë argëtuese dhe të arritshme. Si çdo sirtar, ju mund ta mbushni atë me pothuajse gjithçka 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.

Përkthyer nga: Elegant Temat

Ky artikull përmban komente 0

Lini një koment

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar *

Kjo faqe përdor Akismet për të zvogëluar padëshiruar. Mësoni më shumë për mënyrën se si përdoren të dhënat e komenteve tuaja.

Kthehu në fillim
0 aksionet
pjesë
cicërimë
Regjistrohem