Kako dodati gumb v urejevalniku WordPress [tutorial]

Kako dodati gumb v urejevalniku WordPress [tutorial]

Zakaj je blok gumbov WordPress tako pomemben?

Navigacija na spletnem mestu je pomembna za obiskovalce in stranke. Želimo jih poslati z ene podstrani naprej. Voditi jih skozi celoten nakupovalni proces. Zato je pomembno, da znotraj vsebine strani pravilno vstavite pomembne povezave.

V osnovi imamo 2 možnosti. Uporabite standardno povezavo ali gumb. Mnenja o tem, kdaj uporabiti prvo in kdaj drugo možnost, so različna. Običajno je, da je na eni strani več možnih dejanj. Prepričati se moramo, katera je primarna in katera sekundarna. Priporočamo vam, da gumb uporabite samo za primarno dejanje. Na ta način dosežete večjo vidnost tega primarnega dejanja. Pozornost obiskovalcev boste usmerili na to dejanje. Lahko ga imenujemo tudi gumb za klic k dejanju. Na eni podstrani ne ustvarite preveč gumbov.

Katere so funkcije glavnih gumbov?

  • Gumbi lahko pritegnejo pozornost obiskovalcev - poziv k akciji
  • Ločijo vsebino strani ali objave in jo naredijo bolj berljivo.
  • Pomoč pri orientaciji na strani. Veliko obiskovalcev samo vizualno pregleduje stran z očmi.
  • usmerjanje obiskovalcev na druge strani s hiperpovezavami

Uspeh gumba je odvisen od številnih parametrov. Pomembni so na primer velikost, postavitev ali barva gumba. Upoštevati je treba standardna načela UI in UX. Zelena barva se uporablja za gumbe s pozitivnim dejanjem, na primer za nakup. Rdeča barva je za negativno dejanje - na primer za odjavo od prejemanja novic. Pravilno oblikovani gumbi na ta način neposredno vplivajo na dejanja obiskovalcev.

Dodajanje gumba na katero koli stran ali objavo v WordPress

Stanje pred WordPress 5

Dodajanje gumbov je bilo precej zapleten proces, preden je bil izumljen WordPress Block editor. Ker ta funkcija ni bila naravno v WordPress. Uporabili ste lahko temo s Page Builderjem ali vtičnikom tretje osebe. Kratke kode v tem primeru ustvarijo gumbe.

V naših starejših WordPress temah lahko dodate gumb z uporabo kratkih kod v vizualnem urejevalniku. Po kliku na Insert Shortcode -> Button lahko v modalnem oknu nastavite različne nastavitve. Besedilo, barva besedila, barva gumba, url, poravnava in tako naprej. Zahvaljujoč tem naprednim nastavitvam lahko gumb dodate precej enostavno in hitro brez programiranja.

Dodajanje gumba prek kratkih kod
Dodajanje gumba prek kratkih kod pred sprostitvijo urejevalnika blokov

Kako uporabiti blok gumbov v urejevalniku WordPress?

Zahvaljujoč WordPressu 5 je na voljo drugi način. Veliko lažje. WordPress vizualni urejevalnik prinaša veliko uporabnih blokov. Če želite ustvariti gumb na spletni strani, lahko zdaj v urejevalniku uporabite blok gumb WordPress.

Vodnik korak za korakom, kako dodati gumb v urejevalniku WordPress

1. Najprej se morate odločiti, kam želite vstaviti gumb.
2. Blok gumbov je mogoče dodati na različne načine:
- s klikom na "+" v zgornji vrstici ali kjer koli v urejevalniku blokov, kjer izberete blok gumbov.

Dodaj gumb s klikom na "+"
Dodajanje bloka gumbov s klikom na "+"
Dodajanje gumba prek iskalne vrstice
Dodajanje bloka gumbov prek iskalne vrstice
Dodajanje bloka gumbov prek poševnice
Dodajanje bloka gumbov z uporabo poševnice "/"

- lahko tudi poiščete kateri koli blok z uporabo iskalne vrstice, samo napišite "gumb"

- z vnosom "/", ki omogoča dostop do vseh razpoložljivih blokov.

3. Ustvarjeni blok gumbov je mogoče dodatno konfigurirati

Dodajte besedilo gumba in naslov URL

Takoj ko je ustvarjen gumb za blok WordPress, lahko vanj vnesete besedilo. Ne pozabite, da je za gumb za klic k akciji bolje uporabiti kratko besedilo z jasnim sporočilom. Besedilo lahko nastavite tako, da je krepko, poševno ali podčrtano. Vse te spremembe lahko opravite s klikom v orodni vrstici. Gumb lahko tudi poravnate na stran ali ga postavite v sredino.

Ureditev gumbov
V nekaj sekundah lahko popolnoma spremenite videz gumba

Gumb običajno kaže na drugo stran ali zunanje spletno mesto. Zato je tik pod njim vnos za dodajanje naslova URL. Prednost je, da za dodajanje naslova URL ni treba izbrati besedila.

Spreminjanje barve gumba

Novi urejevalnik vam omogoča, da v nekaj sekundah spremenite blok gumbov WordPress. Samo uporabite nastavitve v stranski vrstici na desni strani. Spremenite lahko barvo ozadja gumba ali barvo besedila znotraj gumba. Na voljo so osnovne vnaprej določene barve ali pa lahko izberete svoje. Vse spremembe so vidne takoj, da vidite, ali je barvna kombinacija v redu.

Spreminjanje barve gumba
Takojšnja sprememba barve gumba po kliku na izbrano barvo

Odlična lastnost je, da če izberete napačne kombinacije, na primer sivo ozadje in belo barvo besedila, vas bo urejevalnik blokov WordPress opozoril, da gumba na vaši spletni strani ne bo mogoče prebrati.

Poiščite svoj slog gumbov

Možnosti sloga gumba
Spremenite slog gumba neposredno iz orodne vrstice ali nastavitev inšpektorja

Če želite gumb ustvariti ali spremeniti zelo hitro in brez truda, lahko uporabite enega od pripravljenih slogov. Tako lahko gumb spremenite v na primer zaobljen, obrobljen ali pravokoten. Preizkusite, kaj se najbolje ujema s slogom ali oblikovanjem vaše spletne strani.

Urejanje gumba s CSS po meri

Še večjo prilagodljivost lahko dosežete z uporabo prilagojenih razredov CSS. Na ta način lahko dodate svoje sloge CSS in v urejevalniku WordPressa oblikujete gumb natančno po svojih željah.

Vnos razreda po meri
Vstavite razred po meri za slog gumba

Kot lahko vidimo, obstaja veliko lažji način kot uporaba bližnjice gumba. Blok gumbov WordPress lahko uporabite v kateri koli temi, ki je združljiva z urejevalnikom blokov WordPress. Preberite več o naši popolnoma novi temi Citadela WordPress. Posebej je zasnovana in razvita za WordPress Block Editor.

Dodaten nasvet na koncu

Ne pozabite spremljati uspešnosti bloka gumbov in samega gumba v WordPressu. Če uporabljate storitev Google Analytics, lahko ustvarite edinstven URL. Za spremljanje klikov obiskovalcev lahko dodate Parameter Google UTM. URL lahko ustvarite z orodjem za ustvarjanje URL. Z dodajanjem parametrov lahko določite vir obiska. To je zelo uporabno, če želite vedeti, od kod so obiskovalci prišli na vašo nakupovalno stran.

Katera je največja težava, ki jo imate trenutno z blokom gumbov WordPress? Razpravljajmo v spodnjih komentarjih. Delite svoje izkušnje z uporabo gumbov na spletni strani.

4 razmišljanje o »How to add button in WordPress editor [tutorial]«

  1. Hvala za delitev tega priročnika. Ali me lahko tudi vodite, kako lahko ustvarim predlogo bloka? Enako počnem s tem virom https://wpitech.com/create-wordpress-gutenberg-block-templates/, vendar daje napako in imam nekaj programskih vrstic v sprednjem delu. To je koda
    add_action( 'init', function() {
    $args = polje(
    'public' => true,
    'label' => 'Novice',
    'show_in_rest' => true,
    'template_lock' => 'all',
    'template' => array(
    array( 'core/paragraph', array(
    'placeholder' => 'Breaking News',

  2. Ali veste, ali obstaja način, da se vsebina z gumbom sesede, ne da bi prenesli vtičnik? V bistvu uporabljam wordpress.com premium, ne poslovni, zato prenos vtičnikov ni res enostavna možnost.

    Hvala!

    1. Pozdravljeni,

      hvala za vprašanje. Morali bi vprašati neposredno podporo wordpress.com ekipo, ali bi lahko ponudili kakšno rešitev za rešitev vašega vprašanja. Lep pozdrav!
      Zlatko
      Ekipa AIT

Komentarji so zaprti.