Cum se adaugă indicații pe site-ul Elementor

Căutați o modalitate de a adăuga un tooltip pe site-ul dvs. Elementor? Dacă este cazul, ați ajuns pe pagina potrivită.

Un sfat explicativ este, de asemenea, cunoscut sub numele de Sfat pentru ecran sau InfoSfat, care afișează un fragment de text care apare la trecerea cursorului peste orice imagine sau text specific. Aceste sfaturi instrumente sunt peste tot pe internet sau pe desktop ca text alternativ, etichete sau text de titlu.

Ori de câte ori deschideți internetul, este posibil să vedeți orice imagine, pictogramă sau titlu; dacă treceți cursorul mouse-ului pe aceste câmpuri, veți vedea o etichetă de text care este un sfat explicativ.

De asemenea, folosind funcția de explicație, puteți face același lucru pe site-ul dvs. web.

În acest articol, vă vom ghida prin adăugarea unui sfat explicativ și personalizarea aspectului acestuia utilizând suplimente Elementor și PowerPack.

Așa că, fără alte prelungiri, să mergem mai departe.

Ce este un Tooltip?

Un sfat explicativ este, practic, un element minuscul UI pe care un utilizator îl întâlnește în timp ce folosește browsere de internet, aplicații, ecrane desktop etc.

Să încercăm să înțelegem explicația după numele său însuși.

Vedeți, așa cum sugerează și numele, este un instrument care da sfaturi utilizatorilor despre un element sau câmp ori de câte ori există un declanșator. Acest declanșator poate fi plasat sau faceți clic, așa cum este structurat în timpul codificării lor.

Aceste sfaturi instrumente sunt casete de text mici care conțin o scurtă descriere sau un titlu care indică acel anumit element, câmp sau instrument. De exemplu, consultați ecranul desktopului și uitați-vă la pictogramele de pe bara de instrumente sau din meniul de pornire din Windows.

După cum puteți vedea, aplicația din „ meniul de pornire Windows ” afișează o casetă de text minuscul care indică informații despre acea aplicație. Acum, așa arată un tooltip pe care îl puteți găsi oriunde în sistemul dvs. sau pe un site web.

Deci, dacă doriți ca aceste sfaturi instrumente să fie afișate pe tot site-ul dvs., trebuie să le adăugați.

Cum îmbunătățesc sfaturile cu instrumente experiența utilizatorului pe site-urile dvs. web

Să vedem cum aceste sfaturi vă pot ajuta să îmbunătățiți experiența utilizatorului pe site-ul dvs. web.

Sfaturi cu instrumente pot fi adăugate în astfel de zone de pe site-ul dvs., cum ar fi:

• Elemente pe care se poate face clic, cum ar fi imagini, pictograme etc.
• Titlurile trec cu mouse-ul pe texte sau pe linkuri pe care se poate da clic.
• Hotspot de imagine.
• Produse de comerț electronic (dacă rulați un site web WooCommerce.)

Bine, gândește-te, dacă folosești aceste sfaturi în toate aceste zone ale site-ului tău, cât de ușor și de util va fi pentru toți acei utilizatori care vizitează site-ul tău.

Da, consumatorii vor găsi că este convenabil, iar acest lucru se datorează faptului că aceste sfaturi instrumente îi ajută pe utilizatori oferind indicații ale textelor relevante oriunde sunt plasate pe site-ul dvs. web, iar acest lucru le va îmbunătăți experiența utilizatorului.

Cum să adăugați sfaturi cu instrumente în Elementor folosind PowerPack?

Cu ajutorul unui sfat explicativ, puteți prezenta un mesaj important prin text pentru utilizatorii dvs. pentru o experiență de utilizator mai bună.

Pentru a adăuga un tooltip pe site-ul dvs., trebuie să instalați și să activați Elementor și PowerPack Addons.

PowerPack Addons pentru Elementor are peste 80 de widget-uri la îndemână și creative, peste 300 de șabloane pre-proiectate și extensii utile pentru a îmbunătăți aspectul general al site-ului dvs. Una dintre aceste extensii este un balon explicativ pe care îl puteți utiliza pentru a afișa texte cu indicații explicative pe site-ul dvs. web.

Deci, haideți să vedem cum puteți adăuga un sfat explicativ pe site-ul dvs. folosind Elementor și PowerPack.

Activați extensia Tooltip

Pentru a adăuga un sfat explicativ pe site-ul dvs., activați mai întâi extensia indicativ.

Apoi, accesați tabloul de bord WordPress, navigați la Elementor și faceți clic pe PowerPack.

Apoi, navigați la secțiunea Extensii și activați funcția Sfaturi instrumente.

După ce ați terminat, apăsați butonul Salvați modificările .

Activați funcția Tooltip în Elementor

Pentru a adăuga un Tooltip la orice widget/secțiune specifică de pe site-ul dvs. Elementor, deschideți pagina în editorul Elementor. Selectați elementul în care doriți să afișați indicația, apoi accesați fila Avansat > PowerPack ; activați acum funcția „ Scrie explicativă ” .

În cele din urmă, funcția de indicații explicative este activată cu succes pentru a fi afișată pe pagina site-ului dvs.

Personalizați funcția Tooltip

Acum că ați activat funcția de indicație, să ne uităm la caracteristicile sale pe care le puteți personaliza pentru a afișa un text atractiv.

Odată ce activați funcția de indicație, vor apărea toate opțiunile de personalizare pe care le puteți utiliza pentru a-i îmbunătăți aspectul general.

Să vedem ce setări veți primi cu această funcție:

• Conținut indicativ: Adăugați conținutul pe care doriți să îl afișați în balonul.
• Țintă: folosind această opțiune, puteți selecta ținta fie ca element curent, fie ca selector personalizat.
• Declanșator: selectați declanșatorul dorit din opțiunile disponibile, cum ar fi trecerea cu mouse -ul sau dați clic pe .
• Poziție indicatoare: alegeți poziția balonului ca sus , jos , stânga sau dreapta .
• Afișare săgeată: Selectați o opțiune pentru a afișa sau nu o săgeată.
• Animație: Folosind această funcție, puteți aplica animație la sfatul cu instrumente din opțiunile disponibile, cum ar fi estompare , scădere , creștere , alunecare sau balansare .
• Distanță: această opțiune poate ajusta distanța dintre hotspot și tooltip.
• Z-Index: Cu această opțiune, puteți ajusta valoarea Z-index pentru sfatul instrument.

Acum, că ați personalizat toate setările de indicații, să trecem la pasul următor.

Să vedem toate opțiunile de stil disponibile pentru funcția de indicație:

• Culoare de fundal: Personalizați culoarea de fundal a balonului explicativ folosind această opțiune.
• Culoarea textului: această caracteristică poate fi utilizată pentru a personaliza culoarea textului cu indicații.
• Tipografie: textul tipografiei din balon informativ poate fi personalizat folosind această opțiune.
• Box Shadow: Puteți activa caracteristica Box Shadow cu această opțiune pentru a-i îmbunătăți aspectul.
• Tip de chenar: Dacă doriți să adăugați un chenar la sfatul instrument, puteți utiliza această opțiune. Alegeți un tip de chenar dintre opțiunile disponibile, cum ar fi plin , punctat , punctat , dublat și canelurat .
• Raza chenarului: dacă ați aplicat un chenar la sfatul instrument, atunci puteți ajusta raza acestuia folosind această opțiune.
• Căptușeală: puteți ajusta căptușeala pentru sfatul instrumentului; acest lucru va permite spațierea între textul indicativ și chenar.
• Lățimea: puteți, de asemenea, să ajustați lățimea balonului cu această opțiune.

După ce am personalizat toate aceste funcții, sfatul instrument pe care tocmai l-am creat va arăta astfel.

Încheierea!

Așadar, așa cum am discutat, întregul proces de a adăuga un sfat explicativ într-un site web Elementor folosind PowerPack Addons. Cu toate acestea, acest lucru se poate face și prin codificare; dacă ești un programator profesionist.

Sperăm că acest tutorial v-a ajutat să adăugați un sfat explicativ pe site-ul dvs. Elementor. Faceți clic aici pentru a obține suplimente PowerPack Elementor pentru a crea sugestii uimitoare și multe alte secțiuni pe site-ul dvs. Elementor.

Dacă vă proiectați pagina Elementor și căutați modalități de a adăuga fonturi personalizate, articolul Cum să adăugați fonturi personalizate pe site-urile web Elementor vă va ghida.

Dacă v-ați confruntat cu orice problemă, vă rugăm să nu ezitați să trimiteți întrebările în secțiunea de comentarii.

Alăturați-vă nouă pe Twitter, Facebook și YouTube.