Cum să adăugați butoane în WordPress: Îmbunătățiți-vă butoanele WordPress cu PostX

Publicat: 2023-05-17

Blocul de butoane WordPress este un bloc puternic pentru WordPress, care duce personalizarea butoanelor la un nivel cu totul nou. Cu o gamă largă de opțiuni și funcții, vă permite să creați butoane atrăgătoare și interactive care să atragă vizitatorii site-ului dvs. Deci, cum să adăugați butoane în WordPress?

Utilizați următorii pași pentru a utiliza butoanele în WordPress

  • Instalați PostX
  • Adăugați blocul de butoane PostX
  • Adăugați linkuri în butonul WordPress
  • Personalizați blocul de butoane

Astăzi vom explora punctele importante ale blocului de butoane PostX, cum să adăugați butoane în WordPress folosind PostX. Fără alte prelungiri, să începem.

Vezi demo acum!
Conținutul ascunde
1 Cum să adăugați butoane în WordPress
2 Tutorial video
2.1 Pasul 1: Instalați PostX
2.2 Pasul 2: Adăugați blocul de butoane PostX
2.3 Pasul 3: Adăugați linkuri în butoanele WordPress
2.4 Pasul 4: Personalizați blocul de butoane
2.4.1 Setări de personalizare pentru un singur buton
2.4.2 Stil
2.4.3 Dimensiunea butonului
2.4.4 Text
2.4.5 Context
2.4.6 Pictogramă
2.4.7 Setări de personalizare pentru grupul de butoane (mai multe butoane)
2.4.8 Buton Gap
2.4.9 Alinierea orizontală și verticală
2.4.10 Marja
2.4.11 Animație buton
3 Concluzie

Cum să adăugați butoane în WordPress

Acum, vom explica cum să adăugați butoane pe site-urile WordPress. Urmați acest ghid pas cu pas și puteți adăuga butonul WordPress perfect pe site-ul dvs.

Tutorial video

Iată un tutorial video pentru a adăuga butonul WordPress pe site-ul dvs. web.

Pasul 1: Instalați PostX

Pentru a debloca funcțiile puternice ale PostX și pentru a profita de funcțiile sale, trebuie să instalați pluginul.

Pentru a instala și activa pluginul PostX Gutenberg Blocks:

Installing PostX
Instalarea PostX
  1. Accesați Pluginuri → Adăugați nou.
  2. Căutați „PostX”.
  3. Faceți clic pe Instalare și apoi pe Activare.

Obțineți PostX Pro pentru a debloca toate funcțiile interesante și pentru a crea site-uri web uimitoare !

Acum sunteți gata să vă îmbunătățiți site-ul web cu butoanele WordPress.

Pasul 2: Adăugați blocul de butoane PostX

Am finalizat instalarea PostX. Iar butoanele sunt acum disponibile pentru utilizare împreună cu personalizarea extinsă. Deci, fără alte prelungiri, să vă arătăm cum să adăugați butoane în WordPress.

Adding Button Block
Adăugarea blocului de butoane

În primul rând, trebuie să accesați o pagină. Puteți accesa opțiunea de pagină WordPress și faceți clic pe Adăugare nou pentru a crea o pagină nouă. Apoi, căutați „Grup de butoane” pentru a selecta acest bloc. Și aceasta va adăuga butonul WordPress la pagină.

Pasul 3: Adăugați linkuri în butoanele WordPress

Hyperlinkarea unui buton sau, în termeni simpli, adăugarea de linkuri în butoanele WordPress este ușoară.

Adding Links to Buttons
Adăugarea de linkuri la butoane

Trebuie să selectați mai întâi butonul și să selectați textele pe care doriți să le hyperlinkați. Acum, veți vedea indicația implicită pentru WordPress. Din sfatul explicativ, veți vedea opțiunea „Legătură” cu pictograma hyperlink. Pur și simplu faceți clic pe el pentru a deschide caseta URL și acolo adăugați linkul dorit pentru a adăuga link-uri în buton.

Pasul 4: Personalizați blocul de butoane

Odată ce selectați blocul, veți vedea toate opțiunile de personalizare în bara laterală din dreapta.

Button Settings
Setări butoane

Există două tipuri de setări pentru acest bloc. Deoarece puteți adăuga mai multe butoane, acest bloc are setări separate pentru „Button” și „Button Group”.

Vă vom arăta toate opțiunile de personalizare și cum să le utilizați.

Setări de personalizare pentru un singur buton

Pentru a selecta și deschide setările pentru buton, trebuie să faceți clic pe butonul.

Stil

Mai întâi, faceți clic pe butonul pentru a obține opțiunea de personalizare. Prima setare pe care o veți vedea este opțiunile de stil. În prezent, are 4 opțiuni de stil. Îl poți alege pe cel care se potrivește cel mai bine designului site-ului tău.

Button Style
Stil buton

Dimensiune buton

Următoarea opțiune pe care o veți obține este schimbarea dimensiunii butonului. Veți obține în mod prestabilit Mic, Mediu, Mare, Extra Large și Personalizat. Veți obține dimensiunea presetată a butonului dacă selectați opțiunea de dimensiune Mic, Mediu, Mare sau Extra Large.

Button Size

Dar dacă doriți să personalizați complet dimensiunea butonului, puteți face acest lucru selectând „Personalizat” și ajustându-i partea de sus, dreapta, jos și stânga pentru a seta măsurători orizontale și verticale.

Custom Button Size
Dimensiune personalizată a butonului

Iată o perspectivă vizuală a diferitelor stiluri de butoane.

Stiluri de butoane

Text

Apoi, veți obține setările de text. Acest lucru vă va permite să personalizați textul butonului în funcție de nevoile dvs. Veți vedea setările pentru „Tipografia textului”, „Culoarea textului” și „Culoare de trecere a textului”.

Button Text Setting
Buton Text Setting

Dacă extindeți setarea Tipografie text, puteți modifica dimensiunea fontului (complet personalizabil), puteți selecta fonturi (inclusiv fonturi personalizate) , greutatea fontului, înălțimea, spațierea, decorarea textului și stilurile de text și le puteți transforma în majuscule, litere mici și caz de titlu.

Button Text Typography Control
Buton Text Tipografie Control

Iată o perspectivă vizuală a efectului de hover.

Selectarea culorilor și efectul de trecere cu mouse-ul

fundal

Această setare vă va permite să personalizați toate fundalurile acestui bloc de butoane.

Button Background Settings
Buton Setări de fundal

În primul rând, puteți seta butonul Marjă, care este complet personalizabil, pentru a obține plasarea perfectă pe orizontală și verticală.

Button Margin Control
Butonul de control al marjei

Apoi puteți schimba culorile butoanelor, atât solide, cât și gradiente. Faceți clic pe fiecare pentru a deschide paleta de culori.

Button Color Setting
Setare culoare buton

După aceea, puteți ajusta marginea acestui buton. Această setare include stiluri de chenar (3 stiluri prefabricate), lățimea chenarului și culoarea.

Button Border Setting
Setare chenar pentru buton

Și, de asemenea, ajustați raza marginii butonului selectat.

Button Border Radius Adjustment
Ajustarea razei marginii butonului

De asemenea, veți obține setarea Box Shadow. Extinderea acestuia vă va permite să ajustați „Offset-X”, „Offset-Y”, „Blur” și „Spread”.

Button Border Shadow Control
Buton Border Shadow Control

De asemenea, puteți seta culoarea umbrei. Și veți obține comutatorul „Inset” dacă doriți ca butonul să umbrească spre interior și nu spre exterior.

Pictogramă

Ultima setare pe care o veți obține în setările butoanelor este setarea pictogramei. Trebuie să activați bara de comutare pentru ao utiliza. Și odată ce extindeți setarea, veți vedea meniul „Magazin de pictograme”, unde puteți selecta pictograme dintr-o bibliotecă vastă.

Button Icon Settings
Buton Pictogramă Setări

Există un buton pentru a schimba pictograma de înainte cu după text.

Puteți modifica dimensiunea pictogramei și puteți ajusta spațiul dintre pictogramă și text.

Icon Size and Space Control
Dimensiunea pictogramei și controlul spațiului

Și, de asemenea, puteți schimba culoarea pictogramei atât în ​​normal, cât și în hover. Trebuie să faceți clic pe pictograma personalizare culori pentru a deschide paleta de culori.

Button Icon Color Control
Buton Pictogramă Controlul culorii

Setări de personalizare pentru grupul de butoane (mai multe butoane)

Pentru a selecta grupul de butoane, veți vedea o pictogramă „Selectați grupul de butoane” în balonul WordPress implicit.

Button Group Selection
Selectare grup de butoane

Buton Gap

După selectarea grupului de butoane, veți găsi setarea Button Gap. Această setare ajută la setarea decalajului dintre 2 și mai multe butoane.

Button Gap Management
Buton Gap Management

Alinierea orizontală și verticală

Aici, puteți ajusta alinierea orizontală și verticală a mai multor butoane.

Horizontal and Vertical Adjustment
Ajustare orizontală și verticală

De asemenea, puteți comuta alinierea verticală pentru a seta butoanele pe verticală.

Vertical Alignment Toggler
Comutator de aliniere verticală

Marja

De asemenea, puteți ajusta marginea întregului grup de butoane din această setare.

Animație cu butoane

Aceasta este una dintre cele mai interesante setări din blocul de butoane. În prezent, veți obține 4 animații setate în blocul de butoane WordPress. Și fiecare dintre ele oferă o abordare diferită atunci când treci cu mouse-ul peste butonul. De asemenea, puteți ajusta poziția animației cu glisorul Button Transformation.

Button Animation Selector
Buton Selector de animație

Iată o imagine a animațiilor butoanelor.

Animație cu butoane

Și asta este tot ce vei obține cu blocul WordPress Button. Acum știți cum să adăugați butoane WordPress cu PostX.

Obțineți PostX Pro pentru a debloca toate funcțiile interesante și pentru a crea site-uri web uimitoare !

Concluzie

Acum că știți cum să adăugați butoane în WordPress, blocul Button oferă opțiuni avansate de personalizare, inclusiv stiluri de butoane, integrare de pictograme, fundaluri gradiente, efecte de trecere cu mouse-ul, tipografie avansată, funcționalitate grup de butoane și animații. Puteți crea butoane uimitoare de distribuire socială sau chiar puteți implementa un buton de încărcare complet personalizat pe site-ul dvs.

Cu acest instrument puternic, puteți crea butoane atractive și captivante din punct de vedere vizual, care îmbunătățesc experiența utilizatorului site-ului dvs. web. Profită de blocul WordPress Button de la PostX pentru a elibera puterea butoanelor personalizabile în WordPress.

Puteți consulta tutoriale video WordPress pe canalul nostru YouTube. De asemenea, găsiți-ne pe Facebook și Twitter pentru actualizări regulate!

Vă place acest articol? Imprastie vestea
  • PostX User-Friendly Interface Update

    Vă prezentăm Actualizarea interfeței ușor de utilizat PostX

  • Gutenberg Post Blocks - #1 Best Post Blocks Plugin 1

    Gutenberg Post Blocks – #1 cel mai bun plugin pentru Post Blocks

  • How to Create WordPress Page Template in Twenty Twenty-two Theme

    Cum să creezi un șablon de pagină WordPress în tema Twenty Twenty-Two

  • Security Update: WPXPO Products

    Actualizare importantă de securitate pentru PostX și ProductX