Cum să adăugați și să stilizați un buton în WordPress (4 moduri ușoare)

Doriți să învățați cum să creați și să stilizați butoane pentru site-ul dvs. WordPress?

Butoanele sunt puternice și pot fi folosite pentru a determina utilizatorii să se înscrie la lista dvs. de e-mail, să vă urmărească pe rețelele sociale și să vă cumpere produsul.

Pentru a crea butoane personalizate, puteți utiliza un fragment de cod sau pur și simplu descărcați un plugin care face totul pentru dvs.

În acest tutorial, vă vom arăta cum să adăugați și să stilizați un buton pe pagina dvs. web și chiar să adăugați efecte de animație. Să începem.

Iată un cuprins pe care îl puteți folosi pentru a sări la metoda care vă interesează cel mai mult:

• Adăugați un buton în editorul de blocuri
• Adăugați un buton folosind SeedProd
• Adăugați un buton folosind Thrive Themes
• Adăugați un buton folosind codificare

Înainte de a începe, s-ar putea să doriți să vedeți această foaie de trișare detaliată despre cum să creați un buton perfect pentru site-ul dvs.

Adăugarea de butoane la postările și paginile dvs. îi încurajează pe utilizatori să facă ceea ce doriți. Fără un buton sau un CTA, site-ul dvs. nu are o strategie optimizată și lasă ratele de conversie la voia întâmplării.

După cum spune expertul în marketing Neil Patel, un buton sau CTA este „podul dintre marketing și vânzări”. Puteți folosi butoane în WordPress pentru a oferi CTA-ul final utilizatorilor dvs., cum ar fi Cumpără acum, Contactați-ne, Descărcați sau altele.

Cu toate acestea, este important să știți cum să folosiți aceste butoane pentru a vă maximiza conversiile. Există mai mulți factori care fac ca unele butoane să fie mai bune decât altele.

Aceștia includ:

• Cunoașterea obiectivului dvs. de conversie
• Păstrarea textului butonului scurt și atrăgător
• Folosirea cuvintelor de acțiune
• Oferirea unui stimulent

Acum, să vedem cum să creăm butoane puternice WordPress pentru site-ul dvs. web, fără nicio codificare.

Adăugați un buton în WordPress cu editorul de blocuri

Implicit, editorul de blocuri WordPress vă permite să adăugați un buton simplu pe site-ul dvs. Acesta este gratuit și oricine îl poate folosi.

Mai întâi, creați sau editați orice pagină sau postare în WordPress. Apoi puteți folosi butonul‘+’ pentru a adăuga un nou bloc. Căutați „buton” și adăugați widget-ul pe pagina dvs.

Acum ar trebui să vedeți un buton adăugat la postarea dvs. Să-l personalizăm. Faceți clic pe buton pentru a deschide setările butoanelor.

Veți vedea un meniu care apare chiar deasupra butonului. Puteți explora aceste setări pentru a schimba alinierea, a adăuga un link, a edita textul și fontul și multe altele.

În panoul din dreapta, puteți schimba lățimea, adăuga un link și o ancoră HTML. Dacă treceți la fila Stiluri, veți obține mai multe opțiuni pentru a personaliza butonul.

Puteți schimba butonul dintr-un fundal solid într-un contur. Există opțiuni pentru a schimba dimensiunea, spațierea și marginea.

Acum, această metodă este ușoară, dar limitată în opțiuni de personalizare. Dacă doriți să stilizați butonul și să adăugați efecte de animație, atunci va trebui să utilizați un constructor de pagini WordPress. În continuare, vă vom arăta cum să utilizați 2 constructori foarte populari – SeedProd și Thrive.

Adăugați un buton în WordPress folosind SeedProd

Există multe plugin-uri de construire a paginilor care vă permit să vă personalizați pagina și să adăugați butoane cu ușurință. Alegerea noastră #1 este SeedProd.

SeedProd este un constructor de site-uri web și pagini de destinație pentru WordPress. Acesta vine cu teme prefabricate care au deja butoane plasate strategic pentru dvs. Pur și simplu trebuie să alegeți o temă și să o editați pentru a se potrivi nevoilor dvs.

Cu SeedProd, puteți adăuga tot felul de elemente puternice, cum ar fi:

• Profiluri sociale
• Butoane de partajare socială (Like, Tweet, Follow)
• Tabel de prețuri & buton de plată
• Cronometru
• Meniu de navigare
• Recenzii & testimoniale
• Galerie foto
• Google Maps

...și multe altele.

Există un constructor drag and drop cu o interfață vizuală. Aceasta înseamnă că veți edita partea frontală a site-ului dvs. web. Pur și simplu faceți clic și editați orice aveți nevoie și trageți și plasați noi elemente acolo unde doriți.

Nu este niciodată nevoie de codare. Vedeți cum am schimbat textul în designul nostru de probă aici:

Venind la opțiuni avansate de personalizare pentru butoane, SeedProd include:

• Stiluri de butoane prefabricate
• Dimensiune, formă și culoare personalizabile
• Fonturi și tipografie personalizate
• Iconițe la buton
• Efecte de animație
• Funcție de duplicare pentru a transfera stilul butonului către alte blocuri
• Salvați aspectul ca șablon personalizat
• Afișare/ascundere pe dispozitive
• Previzualizare pe mobil și tabletă
• Elemente prietenoase cu SEO, cum ar fi etichetele no-follow & open in new tab

Cu SeedProd, veți avea tot ce vă trebuie pentru a proiecta un buton uimitor, care să determine utilizatorii să facă clic și să acționeze pe site-ul dvs.

Primul lucru pe care va trebui să îl faceți este să descărcați și să instalați SeedProd pe site-ul dvs.

Odată ce ați activat pluginul, accesați tabloul de bord de administrare WordPress și deschideți SeedProd. Dacă construiți un site web nou, puteți selecta un kit de temă gata făcut și îl puteți personaliza. Acest lucru va crea toate paginile și postările de care site-ul dvs. ar putea avea nevoie.

Pentru acest tutorial, vă vom arăta cum să adăugați un buton la o pagină de destinație. Navigați la fila SeedProd » Landing Pages. Aici, puteți adăuga o nouă pagină de destinație.

Alegeți un șablon și adăugați un nume pentru pagina dvs., apoi se va deschide constructorul. Veți vedea o previzualizare live a designului dvs. cu un panou de editare în stânga.

Din blocurile standard disponibile, pur și simplu trageți și plasați blocul de buton în designul dvs. Când faceți acest lucru, mai multe opțiuni pentru a edita butonul se vor deschide în stânga. Puteți pur și simplu să faceți clic pe textul butonului și să adăugați propriul apel la acțiune. Vedeți cum am adăugat și am editat cu ușurință un buton pe pagina noastră:

Când selectați butonul, în panoul din stânga, sub fila Conținut, puteți edita textul, dimensiunea, alinierea, adăuga un link și multe altele. Acestea sunt opțiunile implicite disponibile și în editorul de blocuri WordPress.

Când adăugați un link, veți obține opțiuni pentru a adăuga elemente SEO, cum ar fi „no follow” și „deschide într-o fereastră nouă”.

Acum există mai mult. Nu trebuie să stilizați butonul singur. Dacă treceți la fila Șabloane, veți vedea designuri de butoane gata făcute din care puteți alege. Puteți alege un design de buton plat sau rotund.

Există, de asemenea, o mulțime de culori din care puteți alege. Dacă doriți mai mult control asupra stilului butonului dvs., accesați fila Avansat. Aici puteți ajusta spațierea, raza, lățimea, culoarea și multe altele.

În fila Avansat, derulați în jos și veți vedea Efecte de animație. Puteți face butonul să sară, să pulseze, să se agite și multe altele. Acest lucru vă va ajuta să atrageți atenția cititorului.

În partea de jos a constructorului de pagini, există o opțiune de previzualizare pe mobil și tabletă pentru a vă asigura că designul butonului arată bine pe toate dispozitivele.

Astfel, puteți personaliza întreaga pagină de destinație cu SeedProd. Când sunteți gata, puteți salva și publica pagina.

Adaugă un buton în WordPress folosind Thrive

Thrive Themes are o unealtă puternică de creare teme și pagini de destinație pe care o poți folosi pentru a-ți personaliza site-ul WordPress.

Pentru acest tutorial, vă vom arăta cum să utilizați Thrive Architect – constructorul de pagini de destinație. Pașii pentru constructorul de teme urmează pași similari.

Thrive Architect este prietenos cu începătorii și ușor de utilizat pentru oricine. Acest plugin este un instrument premium, așa că va trebui mai întâi să vă înregistrați pentru un cont Thrive.

Apoi puteți instala acest plugin pe site-ul dvs. Aflați cum să faceți acest lucru în Recenzia Thrive Architect.

Odată instalat pe site-ul tău, începe prin a crea sau edita orice pagină folosind constructorul Thrive Architect.

Când se deschide constructorul de pagini de destinație Thrive, vei vedea o previzualizare a paginii tale, împreună cu opțiuni de editare în dreapta și stânga constructorului.

În panoul din stânga, dă clic pe pictograma „+” și se va deschide un meniu de blocuri. Aici poți selecta blocul „Buton” și îl poți trage și plasa în designul tău.

Când faci asta, vei vedea butonul apărând în previzualizare, împreună cu opțiuni de editare în dreapta. Poți schimba culoarea, dimensiunea, alinierea și multe altele. Poți, de asemenea, să adaugi un link și să adaugi etichete „no follow” sau „open in a new tab”.

În meniul din stânga, există o filă „Buton Șablon”. Când o deschizi, vei vedea diferite stiluri de butoane din care poți alege. Există atât de multe opțiuni aici, încât nu va trebui niciodată să stilizezi un buton singur.

Înapoi la fila Opțiuni Principale, derulează în jos pentru a găsi mai multe opțiuni.

Aceste opțiuni includ:

• Tipografie
• Stil Fundal
• Aspect și poziție
• Animație și acțiune
• Responsiv
• Atribute HTML

...și multe altele.

Pentru a face butonul să prindă viață, deschide fila Animație & Acțiune. Vei vedea efecte de animație pentru a face butonul să gliseze, să se mărească, să crească, să se micșoreze, să dispară și multe altele.

Când ai personalizat întreaga pagină și ești gata să publici, deschide pictograma de setări din partea de sus a constructorului. Aici, poți publica pagina pentru a o face să fie live pe site-ul tău.

Asta e tot! Ai învățat cum să creezi un buton folosind editorul de blocuri și constructorii de pagini terți. În continuare, îți vom arăta și cum să folosești codificarea personalizată pentru a adăuga un buton.

Adăugarea unui buton folosind codificarea

Dacă sunteți cunoscător de cod și doriți să adăugați/stilizați un buton pe cont propriu, atunci veți dori să verificați WPCode.

WPCode vă oferă fragmente de cod prefabricate pe care le puteți utiliza pe site-ul dvs. Există o bibliotecă de fragmente gratuite și pro la care puteți accesa pe site-ul lor.

Poți previzualiza fragmentul și îl poți descărca pentru a-l folosi pe site-ul tău.

Puteți, de asemenea, instala plugin-ul pe site-ul dvs. și veți primi fragmente prefabricate, împreună cu o opțiune de a le insera automat pe pagina dvs. Există, de asemenea, o opțiune de scurtcod pe care o puteți utiliza pentru a adăuga cu ușurință butonul oriunde doriți pe site-ul dvs.

Cu WPCode, nu va trebui niciodată să petreci ore întregi încercând să-ți dai seama cum să creezi/adaugi elemente noi. Poți găsi rapid fragmentele de cod de care ai nevoie și le poți adăuga pe site-ul tău.

Acesta este tot ce avem pentru dvs. Sperăm că acest tutorial v-a ajutat să adăugați un buton pe site-ul dvs. Dacă doriți să adăugați un buton personalizat la un popup pe site-ul dvs., atunci OptinMonster este instrumentul potrivit pentru dvs. Consultați Recenzia OptinMonster pentru mai multe informații.

În continuare, s-ar putea să doriți să consultați și alte ghiduri utile:

• Cum să creați un layout personalizat WordPress
• Cum să personalizați un site WordPress
• Cum să urmăriți clicurile pe linkuri și butoane în WordPress

Aceste tutoriale vă vor ajuta să vă personalizați site-ul WordPress. Ultimul vă va ajuta să urmăriți performanța butoanelor dvs.