Kuidas lisada nuppu WordPress toimetaja [õpetus]

Kuidas lisada nuppu WordPress toimetaja [õpetus]

Miks on WordPressi nupublokk nii oluline?

Veebisaidil navigeerimine on külastajate ja klientide jaoks oluline. Me tahame saata neid ühelt alamleheküljelt edasi. Juhendada neid läbi kogu ostuprotsessi. Seepärast on oluline, et olulised lingid sisestataks korrektselt lehekülje sisusse.

Põhimõtteliselt on meil 2 võimalust. Kasutada standardset linki või nuppu. Arvamused selle kohta, millal kasutada esimest ja hilisemat varianti, on erinevad. On tavaline, et ühel lehel on mitu võimalikku tegevust. Me peame veenduma, milline neist on esmane ja milline teisejärguline. Soovitame kasutada nuppu ainult esmase tegevuse puhul. Nii saavutate selle esmase tegevuse suurema nähtavuse. Keskendate külastajate tähelepanu sellele tegevusele. Võime seda nimetada ka call-to-action nupuks. Ärge looge ühele alamlehele liiga palju nuppe.

Millised on peamised nupufunktsioonid?

  • Nupud võivad äratada külastajate tähelepanu - üleskutse tegutsemiseks
  • Nad eraldavad lehe või postituse sisu ja muudavad selle loetavamaks
  • Abi lehekülje orienteerumisel. Paljud külastajad skaneerivad lehekülge ainult visuaalselt silmadega.
  • navigeerida külastajaid teistele lehekülgedele hüperlinkide abil

On palju parameetreid, mis määravad nupu edukuse. Oluline on näiteks suurus, paigutus või nupu värv. Tuleb järgida standardseid UI ja UX põhimõtteid. Rohelist värvi kasutatakse positiivse tegevusega nuppude puhul, näiteks millegi ostmiseks. Punast värvi kasutatakse negatiivsete - näiteks uudiskirja tellimusest loobumiseks. Õigesti kujundatud nupud mõjutavad nii otseselt külastaja tegevusi.

Nupu lisamine WordPressi mis tahes lehele või postitusele

Olukord enne WordPress 5

Nuppude lisamine oli üsna keeruline protsess enne WordPressi plokkredaktori leiutamist. Sest see funktsioon ei olnud loomulikult WordPress. Sa võisid kasutada teema Page Builderi või kolmanda osapoole pluginaga. Shortcodes luua nuppe sel juhul.

Meie vanemates WordPressi teemades saate lisada nupu, kasutades lühikoode visuaalses redaktoris. Pärast klõpsamist Insert Shortcode -> Button saate määrata erinevaid seadeid modaalaknas. Tekst, teksti värv, nupuvärv, url, joondus ja nii edasi. Tänu nendele täiustatud seadetele saate nuppu lisada üsna lihtsalt ja kiiresti ilma programmeerimiseta.

Nupu lisamine lühikoodide kaudu
Nupu lisamine lühikoodide kaudu enne plokkredaktori vabastamist

Kuidas kasutada nupublokki WordPressi redaktoris?

Tänu WordPress 5 on teine võimalus. Palju lihtsam. WordPressi visuaalne toimetaja toob palju kasulikke plokke. Nupu loomiseks veebilehel saab nüüd kasutada WordPressi nupu plokki redaktoris.

Samm-sammult juhend, kuidas lisada nuppu WordPress redaktoris

1. Kõigepealt peate otsustama, kuhu soovite sisestada nupu.
2. Nupu plokki saab lisada mitmel viisil:
- klõpsates "+" ülemisel ribal või ükskõik kus plokkide redaktoris, kus te valite nupu ploki

Lisa nuppu klõpsates "+"
Nupubloki lisamine klõpsates "+"
Nupu lisamine otsinguriba kaudu
Nupubloki lisamine otsinguriba kaudu
Nupubloki lisamine kaldkriipsu kaudu
Nupubloki lisamine kaldkriipsu "/" abil

- võite ka leida mis tahes ploki kasutades otsinguriba, lihtsalt kirjutage "nupp"

- sisestades "/", mis annab teile juurdepääsu kõikidele olemasolevatele plokkidele.

3. Loodud nupu plokki saab edasi konfigureerida

Lisage nupu tekst ja URL-aadress

Niipea kui on WordPress Block nuppu loodud, saate sisestada teksti sees. Pea meeles, et call to action nuppu on parem kasutada lühikest teksti selge sõnumiga. Saate määrata teksti paksuks, kursiiviks või allajoonituks. Kõiki neid muudatusi saab teha tööriistaribal klõpsates. Samuti saate nuppu joondada küljele või tsentreerida.

Nupu toimetamine
Mõne sekundiga saate oma nupu välimust täielikult muuta.

Nupp viitab tavaliselt teisele leheküljele või välisele veebisaidile. Sel põhjusel on selle all sisend URL-aadressi lisamiseks. Eeliseks on see, et URL-i lisamine ei nõua teksti valimist.

Nupu värvi muutmine

Uus toimetaja võimaldab muuta WordPressi nupublokki mõne sekundiga. Lihtsalt kasutage seadistusi parempoolses küljepaanis. Saate muuta nupu taustavärvi või teksti värvi nupu sees. On olemas põhilised eeldefineeritud värvid või saate valida oma värvi. Kõik muudatused on kohe nähtavad, et näha, kas värvikombinatsioon on kõik õige.

Nupu värvi muutmine
Kohene nupuvärvi muutus pärast valitud värvil klõpsamist

Suurepärane omadus on see, et kui valite vale kombinatsiooni näiteks halli tausta ja valge teksti värvi, siis WordPressi plokkredaktor hoiatab teid, et nuppu ei saa teie veebilehel lugeda.

Leia oma nupu stiil

Nupu stiili valikud
Nupu stiili muutmine otse tööriistaribalt või inspektori seadetest

Et luua või muuta nuppu ülikiiresti ja ilma igasuguse vaevata, võite kasutada ühte ettevalmistatud stiilidest. Nuppu saab sel viisil muuta näiteks ümaraks, ääristatud või ristkülikukujuliseks. Katsetage, mis sobib kõige paremini teie veebisaidi stiili või kujundusega.

Nupu redigeerimine kohandatud CSS-iga

Veelgi suuremat kohandamist on võimalik saavutada kohandatud CSS-klasside abil. Nii saate lisada oma CSS-stiile ja stiilinuppu WordPressi redaktoris täpselt nii, nagu soovite.

Kohandatud klassi sisend
Sisestage kohandatud klass oma nupu stiiliks

Nagu näeme, on palju lihtsam viis kui nupu lühikoodi kasutamine. WordPressi nupu plokki saab kasutada igas teemas, mis ühildub WordPressi plokkredaktoriga. Loe lähemalt meie uhiuue Citadela WordPress teema kohta. See on spetsiaalselt loodud ja välja töötatud WordPressi plokkredaktori jaoks.

Lisatipp lõpus

Ärge unustage jälgida oma WordPressi nupublokki ja nupu edu ise. Kui kasutate Google Analytics'i, saate luua unikaalse URL-i. Külastajate klikkimise jälgimiseks saate lisada Google UTM parameeter. URL-i saab luua URL-i koostajaga. Parameetrite lisamine võimaldab tuvastada külastuse allikas. See on väga kasulik, kui soovite teada, kust külastajad teie ostulehele tulid.

Mis on suurim probleem, mis teil praegu WordPressi nupublokiga on? Arutame allpool olevates kommentaarides. Jagage oma kogemusi nuppude kasutamisega veebilehel.

4 arvas teemal „How to add button in WordPress editor [tutorial]

  1. Aitäh selle õpetuse jagamise eest. Kas te saate ka palun juhendada mind, kuidas ma saan luua plokkide malli? Ma teen sama, kasutades seda ressurssi https://wpitech.com/create-wordpress-gutenberg-block-templates/, kuid see annab vea ja mul on mõned programmeerimisridasid eesotsas. See on kood
    add_action( 'init', function() {
    $args = array(
    'public' => true,
    'label' => 'Uudised',
    'show_in_rest' => true,
    'template_lock' => 'all',
    'template' => array(
    array( 'core/paragraph', array(
    'placeholder' => 'Breaking News',

  2. Kas te teate, kas on võimalik sisu nupuga kokkuklappida ilma pluginat alla laadimata? Põhimõtteliselt ma kasutan wordpress.com premium, mitte äri, nii et pluginate allalaadimine ei ole tõesti lihtne võimalus.

    Aitäh!

    1. Tere,

      aitäh küsimise eest. Sa peaksid küsima otse support wordpress.com meeskond, kas nad võiksid pakkuda mingit lahendust, et lahendada oma probleem. Parimate soovidega!
      Zlatko
      AIT meeskond

Kommentaarid on suletud.