Cum să adăugați un buton în editorul WordPress [tutorial]

Cum să adăugați un buton în editorul WordPress [tutorial]

De ce este atât de important blocul de butoane WordPress?

Navigarea pe site-ul web este importantă pentru vizitatori și clienți. Dorim să-i trimitem de la o subpagină mai departe. Să-i ghidăm pe parcursul întregului proces de cumpărare. De aceea, este important să inserăm corect linkurile importante în interiorul conținutului paginii.

Practic, avem două opțiuni. Utilizați un link sau un buton standard. Părerile cu privire la momentul în care trebuie folosită prima și ultima opțiune sunt diverse. Este obișnuit ca pe o pagină să existe mai multe acțiuni posibile. Trebuie să ne asigurăm care dintre ele este principală și care este secundară. Vă recomandăm să folosiți butonul doar pentru acțiunea primară. În acest fel veți obține o vizibilitate mai mare a acestei acțiuni primare. Veți concentra atenția vizitatorilor asupra acestei acțiuni. Îl mai putem numi și buton call-to-action. Nu creați prea multe butoane pe o subpagină.

Care sunt funcțiile butoanelor principale?

  • Butoanele pot atrage atenția vizitatorilor - call to action
  • Acestea separă conținutul paginii sau al postării și îl fac mai ușor de citit
  • Ajutați la orientarea pe pagină. Mulți vizitatori analizează vizual pagina doar cu ochii.
  • Navigarea vizitatorilor către alte pagini prin intermediul hyperlink-urilor

Există o mulțime de parametri care determină succesul butonului. Importante sunt, de exemplu, dimensiunea, plasarea sau culoarea butonului. Este necesar să se respecte principiile standard UI și UX. Culoarea verde este folosită pentru butoanele cu acțiune pozitivă, de exemplu pentru a cumpăra ceva. Culoarea roșie este pentru una negativă - de exemplu pentru a te dezabona de la newsletter. Butoanele corect proiectate în acest fel influențează direct acțiunile vizitatorilor.

Adăugarea unui buton pe orice pagină sau postare în WordPress

Situația înainte de WordPress 5

Adăugarea de butoane era un proces destul de complicat înainte ca editorul de blocuri WordPress să fie inventat. Deoarece această caracteristică nu era în mod natural în WordPress. Ați putea folosi tema cu Page Builder sau un plugin de la o terță parte. Shortcodes creează butoane în acest caz.

În temele noastre mai vechi de WordPress puteți adăuga un buton utilizând shortcodes în editorul vizual. După ce faceți clic pe Insert Shortcode -> Button (Inserare cod scurt -> Buton), puteți seta diverse setări în fereastra modală. Text, culoarea textului, culoarea butonului, url, aliniere și așa mai departe. Datorită acestor setări avansate, puteți adăuga buton destul de ușor și rapid, fără programare.

Adăugarea butonului prin shortcodes
Adăugarea butonului prin shortcodes înainte de lansarea editorului de blocuri

Cum se utilizează Button block în editorul WordPress?

Datorită WordPress 5 există o a doua cale. Mult mai ușor. Editorul vizual WordPress aduce multe blocuri utile. Pentru a crea un buton pe site-ul web, puteți utiliza acum blocul WordPress Button în editor.

Ghid pas cu pas despre cum să adaugi un buton în editorul WordPress

1. La început trebuie să decideți unde doriți să inserați butonul
2. Blocul de butoane poate fi adăugat în diferite moduri:
- făcând clic pe "+" în bara de sus sau oriunde în editorul de blocuri unde selectați Blocul de butoane.

Buton de adăugare făcând clic pe "+"
Adăugarea blocului de butoane făcând clic pe "+"
Adăugați un buton prin bara de căutare
Adăugarea unui bloc de butoane prin intermediul barei de căutare
Adăugați un bloc de butoane prin bară oblică
Adăugarea blocului de butoane folosind slash "/"

- puteți găsi, de asemenea, orice bloc folosind bara de căutare, doar scrieți "buton"

- tastând "/", care vă oferă acces la toate blocurile disponibile.

3. Blocul de butoane creat poate fi configurat în continuare

Adăugați textul butonului și adresa URL

De îndată ce este creat butonul WordPress Block, puteți tasta text în interiorul acestuia. Nu uitați că pentru butonul de apel la acțiune este mai bine să folosiți un text scurt cu un mesaj clar. Puteți seta textul să fie bold, italic sau subliniat. Toate aceste modificări pot fi efectuate făcând clic în bara de instrumente. De asemenea, puteți alinia butonul în lateral sau îl puteți centra.

Editarea butoanelor
În câteva secunde puteți schimba total aspectul butonului dvs.

Butonul indică de obicei o altă pagină sau un site web extern. Din acest motiv, chiar sub el există o intrare pentru a adăuga adresa URL. Avantajul este că adăugarea URL-ului nu necesită selectarea textului.

Schimbarea culorii butoanelor

Noul editor vă permite să modificați blocul de butoane WordPress în câteva secunde. Trebuie doar să utilizați setările din bara laterală din partea dreaptă. Puteți modifica culoarea de fundal a butonului sau culoarea textului din interiorul butonului. Există culori de bază predefinite sau vă puteți alege propriile culori. Toate modificările sunt vizibile imediat pentru a vedea dacă combinația de culori este în regulă.

Schimbarea culorii butoanelor
Schimbarea imediată a culorii butoanelor după ce se face clic pe culoarea aleasă

O caracteristică interesantă este că, dacă selectați combinații greșite, de exemplu, fundal gri și text alb, editorul de blocuri WordPress vă va avertiza că butonul nu poate fi citit pe site-ul dvs.

Găsește-ți propriul stil de buton

Opțiuni de stil pentru butoane
Schimbați stilul butonului dvs. direct din setările barei de instrumente sau ale inspectorului

Pentru a crea sau a schimba butonul foarte rapid și fără niciun efort, puteți folosi unul dintre stilurile pregătite. Butonul poate fi astfel schimbat, de exemplu, în rotunjit, mărginit sau dreptunghiular. Experimentați ce se potrivește cel mai bine cu stilul sau designul site-ului dumneavoastră.

Editarea butonului cu CSS personalizat

O personalizare și mai mare poate fi realizată cu ajutorul claselor CSS personalizate. În acest fel, puteți adăuga propriile stiluri CSS și butonul de stil în editorul WordPress exact așa cum doriți.

Intrarea clasei personalizate
Introduceți clasa personalizată pentru a stiliza butonul dvs.

După cum putem vedea, există o modalitate mult mai ușoară decât utilizarea butonului shortcode. Blocul WordPress Button poate fi folosit în orice temă compatibilă cu WordPress Block Editor. Aflați mai multe despre noua noastră temă WordPress Citadela. Aceasta este special concepută și dezvoltată pentru WordPress Block Editor.

Sfat suplimentar la sfârșit

Nu uitați să monitorizați blocul de butoane WordPress și succesul butonului în sine. Dacă utilizați Google Analytics, puteți crea un URL unic. Pentru a urmări clicurile vizitatorilor, puteți adăuga Parametrul Google UTM. URL-ul poate fi creat cu ajutorul URL builder. Adăugarea de parametri vă permite să identificați sursa vizitei. Este foarte util dacă doriți să știți de unde au venit vizitatorii pe pagina dvs. de cumpărături.

Care este cea mai mare problemă pe care o ai în prezent cu blocul de butoane WordPress? Haideți să discutăm în comentariile de mai jos. Împărtășiți experiența dvs. cu utilizarea butoanelor pe site.

4 comentarii la „How to add button in WordPress editor [tutorial]

  1. Vă mulțumim pentru că ați împărtășit acest tutorial. Puteți, de asemenea, să mă ghidați cum pot crea un șablon de bloc? Fac același lucru folosind această resursă https://wpitech.com/create-wordpress-gutenberg-block-templates/, dar dă o eroare și am câteva linii de programare în front-end. Acesta este codul
    add_action( 'init', function() {
    $args = array(
    'public' => true,
    'label' => 'Știri',
    'show_in_rest' => true,
    'template_lock' => 'all',
    'template' => array(
    array( 'core/paragraph', array(
    'placeholder' => 'Breaking News',

  2. Știți dacă există o modalitate de a comprima conținutul cu un buton fără a descărca un plugin? Practic, folosesc wordpress.com premium, nu business, așa că descărcarea plugin-urilor nu este chiar o opțiune ușoară.

    Mulțumiri!

    1. Salutare,

      Vă mulțumim că ați întrebat. Ar trebui să întrebați direct echipa de suport wordpress.com dacă ar putea oferi o soluție pentru a vă rezolva problema. Cele mai bune salutări!
      Zlatko
      Echipa AIT

Comentariile sunt închise.