Cum să creați o bară laterală personalizată WordPress fără cod

Publicat: 2022-02-02

Vrei să înveți cum să creezi o bară laterală personalizată WordPress fără cod?

O bară laterală bine concepută îmbunătățește experiența utilizatorului și asigură o navigare mai bună pentru aceștia. Dar personalizarea barei laterale folosind setările implicite WordPress nu este întotdeauna foarte simplă. Și codarea este și mai grea.

În această postare, vă vom arăta cum să adăugați o bară laterală în WordPress în câțiva pași simpli.

De ce ar trebui să adăugați o bară laterală WordPress personalizată

Barele laterale oferă o modalitate simplă, dar eficientă de a afișa informații importante pe care ați dori să le vadă vizitatorii. În multe site-uri WordPress, este obișnuit să se dedice bare laterale pentru a oferi link-uri rapide către postări asociate, pagini de rețele sociale și formulare de optin.

Acest lucru vă ajută să asigurați cea mai bună experiență de utilizare pentru utilizatorii dvs. și vă permite să îndreptați vizitatorii către zonele site-ului dvs. pe care ați dori să le vadă. Drept urmare, barele laterale vă permit să creșteți vizualizările de pagină, să rămâneți timp, să implicați și să conversii.

Chiar dacă multe teme WordPress vin cu bare laterale gata făcute, ele nu oferă genul de personalizare vizuală ușoară pe care o obțineți cu unele pluginuri WordPress.

SeedProd este cel mai bun plugin WordPress pentru crearea de bare laterale cu funcționalitate ușoară de glisare și plasare. Prin urmare, vom folosi SeedProd pentru a vă arăta cum să adăugați o bară laterală în WordPress fără niciun cod.

Cum să creați o bară laterală personalizată WordPress fără cod

Pentru a afla cum să adăugați o bară laterală în WordPress, pur și simplu urmați pașii de mai jos:

  1. Instalarea SeedProd
  2. Alegerea unui șablon de temă
  3. Personalizarea barei laterale WordPress
    • Adăugarea unui formular de contact în bara laterală
    • Adăugarea de postări recente în bara laterală WordPress
    • Ștergerea elementelor din bara laterală
  4. Salvarea modificărilor și publicarea barei laterale

Să începem.

1. Instalarea SeedProd

Pentru început, trebuie să aveți SeedProd instalat pe site-ul dvs. Dacă nu știi cum să-l instalezi, vezi acest tutorial despre cum să instalezi un plugin WordPress.

Pentru a accesa funcția de creare a temei WordPress a SeedProd (de care va trebui să creați o bară laterală), va trebui să achiziționați licența SeedProd Pro. După ce ați făcut achiziția și ați creat un cont cu SeedProd, conectați-vă în zona de cont și navigați la fila Descărcări . Aici veți găsi cheia de licență. Copiați-l (vom avea nevoie de asta mai târziu).

SeedProd License key

Din tabloul de bord WordPress, navigați la SeedProd » Setări. Pe acest ecran, ar trebui să vedeți câmpul Cheie de licență . Lipiți aici cheia de licență și faceți clic pe butonul Verificare .

enter SeedProd license key

Acum că SeedProd este configurat pe site-ul dvs., să folosim câteva șabloane pentru a ne ușura sarcina de creare a barei laterale.

2. Alegerea unui șablon de temă

Din zona dvs. de administrare WordPress, faceți clic pe SeedProd » Theme Builder.

Theme builder menu

Acesta este tabloul de bord principal unde puteți controla setările pentru toate elementele tematice diferite, inclusiv bara laterală.

Acum, faceți clic pe butonul portocaliu Teme .

SeedProd theme builder template

SeedProd are diverse teme pentru diferite tipuri de afaceri și organizații, inclusiv agenții de marketing, restaurante, brokeri ipotecare și multe altele. Puteți alege o temă care se potrivește cel mai bine afacerii dvs. și apoi personalizați bara laterală până când arată exact așa cum doriți.

SeedProd themes

Pentru acest exemplu, vom folosi tema Starter, care funcționează excelent pentru site-uri web simple. Când selectați tema, zona dvs. de creare a temei se va completa acum automat cu toate părțile esențiale care alcătuiesc tema.

Theme parts

Puteți activa și dezactiva fiecare parte diferită în funcție de nevoile dvs. Deoarece vom folosi doar o bară laterală pentru pagina de blog în exemplul nostru, vom păstra numai bara laterală și Indexul blogului, Arhivele, Căutarea, părțile activate.

Folosind butoanele de comutare de sub titlul Publicat , am dezactivat alte părți ale temei și am lăsat bara laterală în starea DA .

Sidebar toggle button

Acum suntem gata să începem personalizarea barei laterale.

3. Personalizarea barei laterale WordPress

Pentru a începe să vă personalizați bara laterală WordPress, plasați cursorul peste opțiunea Bară laterală din tabloul de bord SeedProd theme builder și faceți clic pe Edit Design.

Sidebar Edit design

Aceasta va deschide interfața pentru generatorul de teme. Bara laterală a temei Starter are o bară de căutare, categorii și pictograme pentru rețelele sociale activate în mod implicit.

Sidebar Builder

Dar puteți adăuga mai multe elemente în bara laterală sau puteți înlocui pe cele existente cu altceva. În panoul din stânga, veți găsi tone de blocuri pe care le puteți trage și plasa în zona din dreapta, care este o previzualizare live a barei dvs. laterale.

Mai jos, vă vom arăta cum să efectuați unele personalizări comune ale barei laterale, dar aceștia sunt toți pași opționali.

Adăugarea unui formular de contact în bara laterală

În acest exemplu, vă vom arăta cum să adăugați un formular de contact simplu în bara laterală. Dar mai întâi, asigurați-vă că aveți WPForms instalat. Dacă aveți nevoie de ajutor în acest sens, consultați acest document despre instalarea WPForms.

WPForms se integrează automat cu SeedProd. Deci, orice formulare pe care le-ați creat cu WPForms pot fi adăugate ca bloc în bara laterală folosind SeedProd.

Pentru a face acest lucru, introduceți pur și simplu „formular de contact” în bara de căutare din fila Blocuri . Apoi, trageți și plasați blocul Formular de contact acolo unde doriți să îl plasați în bara laterală.

SeedProd contact form block

După ce ați plasat formularul în bara laterală, faceți clic pe blocul WPForms pentru a deschide opțiunile de formular. De aici, puteți adăuga un formular deja creat sau chiar puteți crea unul nou apăsând butonul +Formular nou .

Vom folosi un formular pe care l-am creat deja cu WPForms făcând clic pe meniul derulant Selectați un formular și alegând unul din listă.

Simple contact form

Așa arată forma.

Sidebar form

Dacă trebuie să editați formularul, faceți clic pe Editați formularul selectat. Acest lucru va deschide generatorul WPForms în aceeași fereastră și puteți face modificările dorite fără a fi nevoie să părăsiți ecranul generatorului de teme.

Edit selected form

În afară de asta, puteți personaliza designul formularului accesând fila Avansat . Aici, SeedProd oferă opțiuni pentru modificarea stilului, atributelor, distanței și vizibilității dispozitivului a formularului.

De exemplu, dacă doriți să ascundeți bara laterală atunci când site-ul dvs. este vizualizat pe dispozitive mobile, faceți clic pe meniul Vizibilitate dispozitiv și apoi comutați pe butonul Ascundere pe mobil .

Advanced settings

În continuare, vă vom arăta cum să adăugați postări recente în bara laterală a blogului dvs.

Adăugarea de postări recente în bara laterală WordPress

Încă o dată, utilizați câmpul de căutare din fila Blocuri a generatorului de teme și introduceți „postări recente”. Acum, trageți și plasați blocul Postări recente în zona în care doriți să fie afișată.

SeedProd recent posts block

Widgetul Postări recente se completează automat pe măsură ce noi postări de blog sunt publicate pe site-ul dvs. web.

Dacă faceți clic pe widget când este plasat în partea dreaptă a constructorului, puteți accesa setări precum controlul numărului de postări care doriți să fie afișate.

SeedProd recent posts block settings

Există doar 3 postări pe site-ul nostru exemplu de testare. Dar este o regulă de bază să includeți 5 postări recente pe care să le afișați în bara dvs. laterală.

Ștergerea elementelor din bara laterală

Cu generatorul de teme SeedProd, ștergerea elementelor din bara laterală este la fel de ușoară ca și adăugarea de elemente noi.

În exemplul nostru, vom elimina blocul din bara de căutare din bara laterală. Depinde în întregime de dvs. să decideți ce părți doriți să eliminați din bara laterală. Eliminam doar bara de căutare pentru demonstrație.

În mod normal, este considerată cea mai bună practică să păstrați bara laterală simplă și concentrată, așa că încercați să nu includeți prea multe widget-uri în bara laterală.

Pentru a șterge un bloc, treceți cu mouse-ul până când apare un contur portocaliu în jurul blocului pe care doriți să îl ștergeți și apăsați pictograma coș de gunoi.

Delete block

Veți vedea apoi o solicitare pentru a confirma acțiunea de ștergere. Apăsați Da, ștergeți-l! butonul pentru a merge mai departe.

Delete confirmation

Atât este nevoie pentru a șterge orice bloc sau element din bara laterală.

4. Salvarea modificărilor și publicarea barei laterale

Când ați terminat de personalizat bara laterală după bunul plac, faceți clic pe butonul Salvare din dreapta sus.

Save chanes

Acum, faceți clic pe butonul încrucișat pentru a ieși din generatorul de teme.

Enable seedprod theme

Această acțiune va adăuga bara laterală pe pagina blogului dvs. Deschideți pagina de blog a site-ului dvs. din interfață pentru a vedea bara laterală WordPress nou creată. (În acest exemplu, avem activate doar pictogramele rețelelor sociale și formularul de contact).

Sidebar added

Si asta e! Acum știți cum să adăugați o bară laterală în WordPress și să o personalizați pentru a arăta așa cum vă place.

Apoi, configurați un subdomeniu de e-mail

Doriți să vă mențineți reputația de e-mail și să mențineți rate ridicate de livrare? Ar trebui să luați în considerare configurarea unui subdomeniu de e-mail în acest caz. Consultați ghidul nostru despre subdomeniile de e-mail pentru a afla cum să vă gestionați mai bine reputația e-mailului și să configurați un subdomeniu de e-mail.

De asemenea, poate doriți să aflați despre livrarea e-mailului și importanța acesteia. Puteți consulta articolul nostru despre îmbunătățirea livrării e-mailului pentru mai multe detalii.

Sunteți gata să vă reparați e-mailurile? Începeți astăzi cu cel mai bun plugin WordPress SMTP. WP Mail SMTP Elite include configurarea completă a mănușilor albe și oferă o garanție de rambursare a banilor de 14 zile.

Dacă acest articol v-a ajutat, vă rugăm să ne urmăriți pe Facebook și Twitter pentru mai multe sfaturi și tutoriale WordPress.