Cum să creați o previzualizare a linkului vizual în WordPress

Publicat: 2020-07-07

Îmbogățirea paginilor și a postărilor dvs. WordPress cu conținut precum resurse utile, produse conexe, CTA-uri promoționale sau piese curate distractive vă poate ajuta pe dvs. sau marca dvs. să oferiți mai multă valoare publicului dvs. O legătură simplă nu o va tăia întotdeauna - cu excepția cazului în care textul ancoră și sentimentul înconjurător sunt suficient de convingătoare, aceste legături pot fi păstrate chiar deasupra. Prin crearea de legături vizuale pentru site-ul dvs. web, cum ar fi cele îmbunătățite pe care le vedeți pe Facebook, puteți adăuga conținut captivant și interactiv la care vizitatorii dvs. vor fi atenți. Pluginul Visual Link Preview pentru WordPress este o modalitate simplă de a adăuga mai mult panache la linkurile dvs.

previzualizare vizuală a linkului

Iată doar câteva moduri în care puteți utiliza acest plugin:

  • Adăugați un CTA la un link afiliat.
  • Faceți backup pentru revendicări, fapte și statistici.
  • Organizați conținut de pe alte site-uri.
  • Includeți resurse utile pentru ca cititorii să afle mai multe.
  • Promovați-vă produsele din magazinul de comerț electronic.

De asemenea, în forma sa cea mai simplă, pluginul Visual Link Preview este un mod mai atractiv de a face legătura cu postările conexe și de a determina oamenii să rămână pe site-ul dvs. mai mult timp.

Pluginul vă permite să creați o previzualizare vizuală pentru orice link intern sau extern și puteți crea, de asemenea, un șablon personalizat cu un stil care se potrivește cu marca sau site-ul dvs. Apoi, plasați o casetă de previzualizare simplificată oriunde pe postarea sau pagina dvs. Să analizăm cum să adăugăm o casetă de previzualizare la WordPress atât în ​​Gutenberg, cât și în editorul clasic.

Găsirea și instalarea pluginului de previzualizare Visual Link

Probabil știți deja cum să faceți acest lucru, dar pentru orice eventualitate, iată o prezentare foarte rapidă a modului de instalare a unui nou plugin WordPress:

  • Conectați-vă la tabloul de bord WordPress.
  • Selectați Pluginuri din bara laterală stângă.
  • Selectați Adăugați nou în submeniul care va apărea sub Plugins.
  • Tastați „Vizualizare previzualizare link” în bara de căutare din partea dreaptă sus a paginii.
  • Faceți clic pe Instalare acum în partea dreaptă sus a casetei de previzualizare a pluginului.
  • Odată instalat, faceți clic pe Activare.

Odată ce ați activat pluginul, veți fi redirecționat la pagina pluginului și veți vedea această notificare în partea de sus. (Documentația introductivă vă duce la această pagină.)

Plugin WordPress

Noțiuni introductive despre setări și personalizări

Odată ce pluginul este activat, derulați în jos lista de pluginuri pentru al găsi. Sub numele pluginului, faceți clic pe linkul Setări - veți fi trimis la această pagină:

Previzualizare vizuală

În mod implicit, comuta Utilizare stil personalizat va fi dezactivată. Dacă îl porniți, apar o grămadă de opțiuni.

Plugin WordPress

Există personalizări pentru următoarele:

  • Lățimea containerului, culoarea fundalului și căptușeala.
  • Raza chenarului, lățimea, stilul (solid, punctat, punctat etc.) și culoarea.
  • Poziția imaginii (stânga, dreapta, sus sau jos), dimensiunea și raza chenarului.
  • Dimensiunea și culoarea pentru titlul și fonturile rezumate.

Cele mai multe dintre acestea sunt destul de auto-explicative, dar există câteva lucruri de știut despre dimensiunea imaginii. Puteți seta fie o dimensiune a miniaturii, fie o dimensiune personalizată. Pentru o miniatură, dimensiunile standard sunt „miniatură”, „medie” și „mare”, astfel încât să introduceți doar ce doriți în câmp. Sau, puteți seta o dimensiune personalizată în acest format: widthxheight (150 × 150, de exemplu).

Deocamdată, voi lăsa totul ca atare pentru a vedea cum arată caseta de legătură implicită. Apoi, mă voi întoarce pentru a face modificări.

Utilizarea pluginului cu Editorul de blocuri Gutenberg

Am intrat într-o schiță de postare pe blog și am adăugat un bloc sub un paragraf. Veți găsi blocul de previzualizare a linkului vizual sub Widget-uri sau îl puteți căuta în partea de sus a selectorului de blocuri.

Previzualizare link vizual

Așa arată blocul Visual Preview:

Plugin-uri WordPress

Când faceți clic în caseta Selectați o postare sau o pagină, nu veți vedea o listă derulantă a conținutului; va trebui să căutați ceea ce doriți. De asemenea, puteți adăuga un link către o adresă URL externă (voi trece peste asta peste puțin).

Am ales o postare publicată pe blog. Așa arată fără să fac personalizări ale stilului:

Plugin WordPress

Setări de blocare a Visual Link Preview în Gutenberg

Dacă faceți clic pe teancul de trei puncte din partea de sus a blocului, veți vedea un meniu derulant. Selectați Afișare setări bloc pentru a afișa o bară laterală dreaptă cu opțiuni. De aici, puteți face mai multe modificări:

Schimbați linkul. Rețineți că, dacă faceți clic pe Modificare link, linkul pe care îl aveți va fi imediat eliminat, deci asigurați-vă că nu faceți clic pe acesta din întâmplare.

Schimbați sau eliminați imaginea afișată. Dacă eliminați imaginea afișată, așa arată Visual Link:

Previzualizare link vizual

Dacă nu vă place cum arată fără o imagine, puteți face clic pe Alegeți imaginea pentru a adăuga una din nou. Cu toate acestea, va trebui să treceți prin biblioteca dvs. media sau să încărcați o imagine - nu veți avea opțiunea de auto -Adăugarea din nou a imaginii prezentate, la fel ca atunci când ați adăugat prima dată linkul.

Desigur, puteți găsi imaginea prezentată în biblioteca dvs. media, dar poate fi îngropată. De asemenea, puteți adăuga din nou linkul, astfel încât să adauge automat conținutul original.

Activați și dezactivați setările linkurilor. Puteți opta pentru a deschide linkul într-o filă nouă și puteți transforma linkul într-un link nofollow.

Adăugarea unei legături externe cu Gutenberg

De data aceasta, adaug un link extern. L-am copiat și l-am lipit în câmpul corect:

Plugin WordPress

Când faceți clic pe Utilizați această adresă URL, se întâmplă același lucru ca și când adăugați un link intern. O imagine, un titlu și un fragment vor fi completate automat și puteți face modificări în bara laterală din dreapta. De asemenea, puteți face clic pe Salvați imaginea locală în secțiunea Conținut, iar imaginea afișată pe care pluginul a preluat-o din sursa URL va fi adăugată în biblioteca dvs. media WordPress.

Salvarea blocurilor reutilizabile

Dacă aveți o pagină, o postare pe blog sau un link extern pe care îl veți folosi des, îl puteți crea o singură dată, apoi îl puteți salva ca bloc reutilizabil pentru ao adăuga cu ușurință în viitor. Acest lucru funcționează numai în editorul Gutenberg, FYI.

Când ați terminat de creat blocul, faceți clic pe pictograma cu trei puncte din partea de sus, aceeași pe care ați folosit-o pentru a accesa bara laterală de opțiuni. Apoi, alegeți Adăugați la blocuri reutilizabile. Puteți da titlul blocului și va fi în biblioteca dvs. de blocuri pentru utilizare ulterioară.

Previzualizare vizuală

Utilizarea pluginului cu Editorul clasic

Folosind editorul clasic, accesați postarea sau pagina dvs. și mergeți la locul în care doriți să adăugați linkul vizual. Faceți clic pe butonul Visual Link Preview din partea de sus a paginii:

Previzualizare vizuală

Această casetă va apărea:

Plugin WordPress

Din meniul derulant Tip, puteți alege să adăugați propriul link sau unul extern. În primul rând, voi adăuga propriul meu link. Odată ce ați ales conținutul la care să faceți legătura, câmpurile vor fi populate automat, la fel ca în cazul Gutenberg. Aici veți face orice modificări. Puteți elimina imaginea și puteți alege să adăugați una nouă, să schimbați titlul și să actualizați rezumatul din această fereastră. De asemenea, puteți utiliza setările implicite ale pluginului sau șablonul personalizat aici, la fel ca în cazul Gutenberg.

Previzualizare vizuală

Adăugarea unei legături externe cu Editorul clasic

De data aceasta, voi adăuga un link extern. Acestea sunt câmpurile pentru un link extern:

Plugin WordPress

Când adăugați adresa URL, câmpurile se vor actualiza automat - la fel ca la un link intern. Apoi, puteți face orice modificări doriți înainte de a o insera în pagina sau în postarea dvs. Aveți și opțiunea Salvare imagine locală în editorul clasic.

Personalizarea șablonului și casetei de previzualizare a legăturii vizuale

Bara de setări a blocului include, de asemenea, o secțiune Stil în partea de jos, unde puteți alege între Utilizați implicit din șablonul Setări sau șablonul Simplu. Este confuz, totuși, pentru că sunt de fapt același lucru. Voi explica mai multe într-un pic. Mai întâi, să intrăm în modul de personalizare a casetei de previzualizare a linkului.

Plugin WordPress

Din secțiunea Stil respectiv, faceți clic pe linkul Modificare stil șablon. Se va deschide o nouă pagină în care puteți crea un șablon personalizat (puteți ajunge aici și prin setările pluginului). Din nou, personalizările sunt simple, explicative și simple, așa că ar trebui să aveți un timp ușor de găsit. Iată cum arată șablonul după ce am jucat cu câteva personalizări:

Previzualizare vizuală

Nu grozav. O parte a problemei este că textul de previzualizare este prea lung. Înapoi la postarea sau pagina dvs., dacă faceți clic pe bloc, editorul ar trebui să apară în bara laterală dreaptă. Apoi puteți accesa secțiunea Conținut și faceți clic în câmpurile pentru titlu și extras pentru a face modificări.

În loc să folosesc o miniatură, m-am întors la pagina de personalizare a șablonului și am introdus o dimensiune personalizată pentru imagine, care a transformat-o într-un pătrat (și, din fericire, una perfect decupată). M-am jucat cu titlul și copia copie mai mult, astfel încât să fie dimensionat mai bine în bloc și lângă imagine. E mai bine asa:

Plugin WordPress

Ați putea petrece mult timp descoperind personalizările corecte și ar trebui, mai ales că nu puteți crea decât un singur șablon personalizat.

Previzualizarea personalizărilor șablonului

Nu puteți vedea o previzualizare live când personalizați șablonul. Trebuie să aveți postarea sau pagina deschisă într-o fereastră nouă, să faceți modificările pe pagina de personalizare a șablonului și apoi să faceți clic înapoi la postare sau pagină. Comutați înainte și înapoi între cele două opțiuni șablon drop-down (amintiți-vă, acestea nu sunt de fapt diferite între ele) - aceasta reîmprospătează caseta, astfel încât să puteți vedea cele mai recente modificări.

Cum se recuperează stilul implicit

Să presupunem că faceți o grămadă de modificări și apoi vă dați seama că preferați stilul implicit. Dacă lăsați activată opțiunea Utilizare stil personalizat activată în setările șablonului, setările personalizate vor fi aplicate atunci când vă întoarceți pe pagina sau postarea dvs., indiferent dacă selectați Utilizare implicită din Setări sau Simplu din meniul derulant Șablon (așa cum am spus, confuz).

Dacă doriți să reveniți la valorile implicite ale pluginului, puteți accesa pagina de setări șablon și puteți dezactiva butonul Utilizare stil personalizat. Toate personalizările dvs. vor fi acolo dacă doriți să o comutați din nou în cele din urmă, dar acest lucru vă va permite să utilizați valorile implicite ale pluginului dacă preferați modul în care arată.

Dezavantaje ale pluginului Visual Preview

Pluginul Visual Link Preview este un plugin simplu și direct care face ceea ce spune că va face și este foarte ușor de învățat să îl folosești. Cu toate acestea, deoarece este atât de simplu, lipsește și în câteva domenii care ar putea folosi îmbunătățiri.

Nu există un meniu derulant cu tot conținutul dvs. Am vrut această opțiune în loc să trebuiască să-mi amintesc numele unei postări sau pagini de blog pe care să o adaug ca link.

Nu puteți vedea o previzualizare live a șablonului personalizat. Este destul de ciudat să mergi înainte și înapoi între postare și pagina de setări șablon de fiecare dată când vrei să vezi dacă este cantitatea perfectă de umplutură sau ce tip de chenar să folosești.

Puteți crea un singur șablon personalizat. Acesta este cel mai mare dezavantaj al pluginului. Nu puteți crea mai multe șabloane și apoi alegeți-l pe cel pe care îl utilizați pentru a se potrivi cu o anumită pagină, postare de blog sau tip de link. De asemenea, nu puteți seta unele casete de previzualizare pentru a utiliza șablonul personalizat și altele pentru a utiliza valorile implicite ale pluginului - este una sau alta.

Încheierea

Una peste alta, chiar și în ciuda dezavantajelor sale, mi-a plăcut pluginul Visual Link Preview. Este o briză totală de configurat și utilizat, indiferent cu ce editor preferați să lucrați - Gutenberg sau clasic. Și acesta este cu siguranță o modalitate mai plăcută din punct de vedere estetic și mai atrăgătoare de a adăuga linkuri, care poate merge departe dacă sunteți implicat în marketingul afiliat sau doriți să vă conectați la paginile dvs. de destinație. În acest moment, deoarece nu puteți crea mai multe șabloane, este mai bine pentru site-urile web cu un aspect standardizat în toate postările și paginile. Deci, dacă aveți mai multe pagini de destinație diferite într-o varietate de stiluri, veți avea dificultăți în crearea unui șablon de cutie de previzualizare care să se potrivească oriunde este plasat. În caz contrar, totuși, acesta este un plugin ușor care își îndeplinește bine treaba.

Vă poate plăcea, de asemenea, acest articol cu ​​cinci lucruri interesante pe care le puteți face în Divi cu linkuri de ancorare.