Un ghid complet despre cum se adaugă indicații pe site-ul Elementor

Doriți să adăugați sfaturi informative pe site-ul dvs.? Elementor vă poate ajuta să faceți asta în cel mai scurt timp. Este unul dintre cele mai ușoare pluginuri prin care puteți adăuga sfaturi pentru orice elemente web cu doar câteva clicuri de mouse. Nu trebuie să știți deloc cum să codificați.

În plus, Elementor are multe funcții utile pe care le puteți folosi pentru a vă personaliza aspectul cu tooltip pentru a se potrivi cu stilul site-ului dvs. În acest ghid, vă vom oferi un ghid complet despre cum să adăugați un sfat explicativ pe site-urile web Elementor cu ajutorul acestui plugin.

De asemenea, vom acoperi o parte despre cum să adăugați sfaturi cu ajutorul codurilor CSS ale clienților . Deci, indiferent dacă sunteți nou în Elementor sau îl utilizați de ani de zile, acest articol este pentru dvs.!

Cuprins

• Ce este un tooltip?
• Cum vă ajută sfaturile cu instrumente să îmbunătățiți experiența utilizatorului pe site-ul dvs. web
• Cum să adăugați sfaturi pe site-ul dvs. Elementor folosind CSS personalizat
• Cum să adăugați sfaturi pe site-ul dvs. Elementor folosind HappyAddons
• Cum să evitați ca sfaturile instrumente să pară spam
• Câteva exemple excelente de design de sfaturi cu instrumente
• Întrebări frecvente despre cum se adaugă balonul folosind Elementor
• Pentru dvs.: sunteți gata să adăugați sfaturi pe site-ul dvs.?

Ce este un tooltip?

Un balon explicativ este un fragment de text care apare atunci când treceți mouse-ul peste anumite elemente web. Este o proprietate CSS care vă permite să adăugați informații suplimentare sau conținut în jurul elementelor web dorite. Aceasta poate include butoane, link-uri și chiar fotografii.

Puteți folosi sfaturi pentru a adăuga sfaturi utile, informații despre produse sau context general despre conținut. Sfaturile cu instrumente facilitează, de asemenea, navigarea. Deci, utilizatorii nu trebuie să viziteze mai multe pagini, deoarece puteți afișa tot mai multe informații pe aceeași pagină web.

Cum vă ajută sfaturile cu instrumente să îmbunătățiți experiența utilizatorului pe site-ul dvs. web

Sfaturile instrumente vă pot ajuta să adăugați informații suplimentare pentru a îmbunătăți experiența utilizatorului, pentru a le satisface intențiile de căutare și pentru a crește simultan viteza de navigare pe web. Să explorăm câteva beneficii esențiale ale utilizării sfaturile instrumente pe un site web.

1. Vă permite să adăugați informații contextuale

Sfaturile instrumente vă permit să afișați informații contextuale despre anumite elemente web. Îl puteți folosi pentru a simplifica procesul oricăror instrucțiuni complicate sau caracteristici web.

Să presupunem că aveți un articol plin cu mult text și grafică. Sfaturile cu instrumente vă pot ajuta să evidențiați punctele cheie ale scrierii dvs. pentru a facilita utilizatorilor să înțeleagă ceea ce citesc.

2. Asistență în câmpurile de formulare

Trebuie să completați numeroase câmpuri de fiecare dată când mergeți să completați o aplicație online, să creați un cont nou sau să comandați produse de comerț electronic. Sfaturile instrumente pot oferi utilizatorilor instrucțiuni utile, astfel încât utilizatorii să nu facă greșeli în timp ce își tastează informațiile.

Acest tip de asistență devine o necesitate atunci când utilizatorii încearcă să își verifice cardul de credit, să solicite un pașaport, să completeze adrese de facturare și multe altele.

3. Explică Procesul de configurare a aplicației web

Există multe aplicații web care sunt de obicei complicate pentru utilizatorii noi. Ei trebuie să petreacă mult timp înțelegând cum să folosească aceste aplicații. Le ucide foarte mult timpul.

Folosind sfaturi cu instrumente, puteți demonstra cu ușurință procesul de configurare al oricărei aplicații web complicate. Vă poate ajuta să economisiți timp prețios pentru utilizatorii dvs. și să-i lase să se simtă profesioniști încă de la început.

4. Vă ajută să promovați caracteristicile produselor

Nu doar pentru a explica lucruri complexe, sfaturile instrumente vă pot ajuta și să vă promovați caracteristicile produsului. Înainte de a cumpăra orice produs, clienților le place să studieze caracteristicile acestuia și ușurința în utilizare. Sfaturile instrumente vă pot ajuta să faceți ambele. Puteți evidenția caracteristicile produsului și explica ghidul de utilizare.

Cum să adăugați sfaturi pe site-ul dvs. Elementor folosind CSS personalizat

Există mai multe moduri în care puteți adăuga sfaturi instrumente la dvs Elementor site web folosind CSS personalizat. Să explorăm câteva metode cele mai simple pentru ei.

Metoda 01 - Folosind <abbr> (abreviere) Tag Pentru a adăuga instrucțiuni

Folosind eticheta <abbr>, puteți crea oricând indicații pe site-ul dvs. web. Trebuie să adăugați textul indicativ în interiorul etichetei title="...". Iată un eșantion de cod de mai jos pe care îl puteți folosi pentru a vă crea balonul.

 John <abbr title="I'm an Elementor Expert!">DOE</abbr>

Puteți introduce acest cod pe orice câmp Elementor care acceptă eticheta HTML. Odată ce ați terminat această parte, veți vedea indicația dvs. care apare de fiecare dată când treceți cursorul pe acel element.

Notă: nu vă puteți stiliza sfaturile cu instrumente folosind această metodă! Dar acesta este cel mai simplu mod de a adăuga un tooltip.

Metoda 2 - Crearea balonului explicativ cu HTML și CSS

Acum, vă vom arăta cum să creați un tooltip personalizabil, astfel încât să îi puteți modifica culoarea, să schimbați poziția, să adăugați animație și multe altele. Pentru a face asta, mai întâi, trebuie să scrieți coduri simple pentru balonul dvs. în fișierul HTML.

În Elementor, veți obține un widget HTML pentru a crea un câmp pentru scrierea acestui cod. Trageți și plasați widgetul HTML pe pânza dvs. Elementor.

Veți primi un câmp deschis automat în secțiunea dvs. de conținut Elementor. Trebuie să adăugați o clasă și să-i dați un nume de clasă, noi am numit-o „tooltiptext”. Această clasă va fi folosită pentru a personaliza balonul. Mai jos este un eșantion de cod HTML pe care îl puteți utiliza pentru a vă crea sfaturile instrumente.

 <span class="tooltiptext" >My Skill Sets</span>

Aici, am folosit „Seturile mele de abilități” ca text de indicație. Trebuie să scrieți textul indicativ dorit în această secțiune.

Am împărtășit codurile CSS de mai jos pentru a vă permite să vă personalizați în continuare sfaturile instrumente. Le puteți copia și lipi direct în secțiunea CSS personalizată sau le puteți modifica după cum doriți. Puteți adăuga acest fragment de cod în panoul dvs. CSS personalizat Elementor sau în secțiunea CSS suplimentară a temei dvs.

Dacă doriți să adăugați acest cod la CSS personalizat Elementor, urmați această navigare - Setări site Elementor > CSS personalizat . Iată codul. Puteți copia întregul fragment de cod CSS pentru sfatul explicativ sau le puteți personaliza în funcție de nevoile dvs.

Notă: pentru a naviga la panoul CSS suplimentar al temei dvs., navigați la Tabloul de bord de administrare > Aspect > Personalizare > CSS suplimentar .

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; }

Dacă doriți să schimbați poziția balonului explicativ, poziția săgeții și multe altele, urmați fragmentele de cod de mai jos.

Pentru a schimba poziția tooltip și a o plasa în partea de jos, utilizați următorul cod.

 .tooltip .tooltiptext { width: 120px; top: 100%; left: 50%; margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ }

Pentru a o muta în partea dreaptă, utilizați codul de mai jos.

 .tooltip .tooltiptext { top: -5px; left: 105%; }

Pentru a-l plasa în partea stângă, utilizați următorul cod.

 .tooltip .tooltiptext { top: -5px; right: 105%; }

Pentru a modifica poziția săgeții din balonul cu instrumente și pentru a o pune în partea de jos, utilizați codul de mai jos.

 .tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }

Dacă doriți să aflați mai multe despre personalizarea descrierii explicative CSS, puteți vizita w3schools.

Cum să adăugați sfaturi pe site-ul dvs. Elementor folosind HappyAddons

Unii dintre noi ar putea fi dificil să creeze un sfat explicativ utilizând coduri CSS personalizate. Astăzi, este posibilă crearea și adăugarea de sfaturi instrumente pe site-ul dvs. fără o singură linie de codare. HappyAddons vă oferă o funcție de indicație CSS fără cod în Elementor.

Interesant, puteți obține această funcție gratuit în HappyAddons. Nu doar adăugarea de texte, ci și următoarele funcții avansate în sfatul cu instrumente HappyAddons.

• Schimbați culoarea textului
• Schimbați tipografia textului
• Schimbați poziția tooltip
• Adăugați culoarea de fundal a textului și imaginea de fundal
• Adăugați etichete dinamice
• Adăugați animație
• Adăugați o săgeată de indicație

Haideți să explorăm mai jos cum să adăugați indicații explicative în Elemnetor folosind această extensie.

Cerințe preliminare pentru a adăuga informații despre instrumente

• Elementor gratuit
• HappyAddons gratuit

După ce aveți aceste plugin-uri instalate pe site-ul dvs., urmați următorul proces.

Pasul 01: Activați Advanced Tooltip

Deoarece sfatul explicativ este o caracteristică, nu un widget, trebuie să îl activați mai întâi. Pentru a activa această caracteristică,

• Mai întâi, selectați orice widget sau element al site-ului dvs.
• Apoi, du-te la Fila Avansat .
• Derulați puțin în jos și extindeți opțiunea Happy Tooltip .
• Activați opțiunea Enable Advanced Tooltip .

După activarea acestei funcții, veți primi încă două secțiuni pentru a vă personaliza balonul. Ele sunt Stil și Conținut. Le puteți vedea în fotografia de mai sus.

1. Stil : Această secțiune vă va permite să adăugați personalizarea designului și să adăugați o imagine pentru sfatul cu instrumente. Despre această opțiune vom vorbi mai târziu în detaliu.
2. Conținut: puteți să adăugați și să editați textul descrierii, să îi fixați poziția, să adăugați animație și multe altele din secțiunea de conținut.

Pasul 02: Adăugați textele dvs. cu indicații

În secțiunea de conținut, nu numai că puteți adăuga textele de indicație dorite, ci și etichete HTML pentru a oferi un avantaj suplimentar textelor de indicație. Etichetele HTML pe care le puteți folosi aici sunt:

<b>,<i>,<u>,<s>,<br>,<em>,<del>,<ins>,<sub>,<sup>,<code>,<mark>,<small >,<strike>,<abbr>,<span>,<strong>,<a>,<q>,<img>,<dfn>,<time>,<cite>,<acronim>,<hr>

Adăugați etichete dinamice la conținutul dvs. de indicații

HappyAddons au integrare cu asistență dinamică pentru conținutul dvs. de indicații. Dar din cauza unor limitări, este o provocare pentru noi să acceptăm toate etichetele. Nu acceptăm etichete dinamice de coduri scurte în acest moment.

În plus, nu puteți vedea datele dinamice în modul de editare, ci doar în modul de previzualizare.

Personalizați Poziția dvs. Elementor Tooltip

Veți găsi setările de control al poziției imediat sub secțiunea de conținut. În mod implicit, balonul dumneavoastră va fi afișat deasupra oricărui element. Veți avea patru opțiuni diferite în această secțiune pentru a vă seta poziția balonului. Sunt:

• Top
• Partea de jos
• Stânga
• Dreapta

În fotografia de mai jos, puteți vedea că ne-am schimbat poziția din dreapta.

Adăugați animație la sfaturile dvs. de instrumente Elementor

Chiar sub setările de poziție, veți găsi secțiunea de animație. Veți obține opt tipuri de efecte de animație disponibile acolo. Sunt:

• Fade in
• Rulează-te
• A mari
• Sări
• Glisați în jos
• Glisați în stânga
• Glisați în dreapta
• Glisați în sus

Alegeți-l pe cel care se potrivește nevoilor descrierii dvs. Urmărește fotografia de mai jos!

Puteți chiar să personalizați durata animației pentru balonul dumneavoastră. În mod implicit, este setat la 1000 ms (milisecundă).

Adăugați sau eliminați săgeata din balonul Elementor

Puteți apela acest indicator de indicație sau săgeată de navigare. În mod implicit, veți activa această săgeată. Dar îl puteți dezactiva dacă doriți. Procesul este explicat mai jos.

Notă: Trebuie să dezactivați această caracteristică dacă doriți să adăugați o imagine la balonul cu instrumente. În caz contrar, nu veți găsi opțiunea de adăugare a imaginii disponibilă.

Declanșați balonul cu instrumente

Declanșatorul definește modul în care Elementor balonul va apărea pe ecran. Există două opțiuni de declanșare disponibile:

• Clic
• Planare

Veți obține opțiunea Distanță chiar sub secțiunea Trigger. Vă va permite să măriți sau să micșorați distanța dintre elementul dvs. web și distanța acestuia cu ajutorul descrierii.

Aliniați textul din balonul instrument

Veți obține opțiunea de aliniere a textului sub secțiunea Distanță.

Pasul 03: stilați-vă sfaturile Elementor

Pentru a vă personaliza în continuare sfaturile instrumente, faceți clic pe secțiunea de stil din fotografia de mai jos.

Măriți lățimea balonului cu instrumente

Prima opțiune va apărea în secțiunea de stil este Lățimea . Trageți butonul de lățime și ajustați-l la măsura dorită.

Măriți dimensiunea săgeții dvs. de tip Tooltip

Puteți ajusta dimensiunea săgeții din balonul dvs. din meniul Dimensiune săgeată . Puteți face acest lucru trăgând butonul de măsurare de mai jos.

Schimbați tipografia balonurilor dvs. cu instrumente

Puteți adăuga o varietate de arome la balonul dvs. din setările de tipografie. Veți obține toate setările de tipografie Elementor aici.

Adăugați culoare fundalului textului dvs. de tip Tooltip

Puteți adăuga culoare fundalului textului indicativ din opțiunea Culoare de fundal.

Adăugați o rază a chenarului la balonul cu instrumente

În mod prestabilit, raza chenarului pentru balonul dvs. este de 5 px. Dar o poți schimba după cum vrei. Panoul de control al razei de frontieră vă va oferi autoritate completă pentru a face acest lucru.

Adăugați umbră de casetă în balonul cu instrumente

Tragând butoanele de măsurare, puteți adăuga umbră la sfaturile de instrumente din setările casetei de umbră.

Pasul 04: Activați opțiunea Imagine

Deja v-am spus o dată că trebuie să dezactivați caracteristica săgeată de indicație dacă doriți să activați opțiunea de imagine. Va activa o nouă opțiune în secțiunea de stil.

Adăugați o imagine și ajustați balonul cu instrumente

Navigați la secțiunea de stil. Faceți clic pe secțiunea Tip de fundal și extindeți-o. Veți primi un fișier imagine acolo. Faceți clic pe el și încărcați fotografia dorită pentru sfatul explicativ. După aceea, îi puteți modifica poziția, atașamentul, dimensiunea, culoarea textului, raza chenarului și multe altele.

Acesta este modul în care puteți crea imagini minunate și sfaturi bazate pe text pentru site-ul dvs. Uitați-vă la modul în care sfaturile dvs. de instrumente sunt în cele din urmă după o mulțime de personalizări.

Cum să evitați ca sfaturile instrumente să pară spam

Sfaturile cu instrumente pot fi o modalitate excelentă de a oferi informații suplimentare utilizatorilor dvs. de web. Dar, dacă pe o pagină sunt afișate prea multe sfaturi, aceasta poate părea spam și iritant. Există mai multe lucruri pe care trebuie să le luați în considerare atunci când utilizați sfaturi cu instrumente, astfel încât paginile dvs. web să nu pară niciodată spam.

Să le explorăm mai jos.

1. Păstrați-vă sfaturile cu instrumente scurte și simple

Sfaturile cu instrumente ar trebui să conțină informații pe care utilizatorii trebuie să le înțeleagă – nimic altceva. Aceasta înseamnă că trebuie să evitați listele lungi de detalii, textele inutile și elementele de design strălucitoare. În schimb, rămâneți la explicații simple și directe.

2. Nu afișați niciodată mai multe sfaturi cu instrumente împreună

O altă modalitate de a evita ca sfaturile instrumente să pară spam este să limitați numărul acestora care urmează să fie afișate pe bloc/același rând. Afișați un singur sfat explicativ la un moment dat și permiteți utilizatorilor să deruleze în jos dacă doresc mai multe informații.

Dacă simțiți nevoia să adăugați mai multe informații, puteți lua în considerare modalități alternative. De exemplu, puteți încorpora videoclipuri și infografice în loc să partajați toate încărcările cu sfaturi cu instrumente. Acest lucru poate asigura chiar și o experiență de utilizator mai bogată pentru utilizatori.

3. Mențineți spațiul între elemente

Spațiul este o parte importantă a oricărui design UI. Există un raport ideal pentru cât spațiu trebuie să vă asigurați pe paginile dvs. web. Iar raportul este de 2:1, ceea ce înseamnă că o treime din paginile dvs. web trebuie să aibă spații.

Același lucru este valabil și pentru sfaturile instrumente. Nu le aglomerați prea mult, astfel încât utilizatorii să poată avea puțin aer în timp ce navighează pe site-ul dvs.

4. Permiteți utilizatorilor să sară peste partea de tutorial

Dacă oferiți tutoriale sau alt conținut util, asigurați-vă că utilizatorii pot să le omite dacă nu doresc. Acest lucru va ajuta la reducerea numărului de sfaturi instrumente afișate pe o pagină și va încuraja mai mulți oameni să profite de conținutul dvs.

Câteva exemple excelente de design de sfaturi cu instrumente

Capacitatea de a utiliza în mod inteligent sfaturile instrumente poate îmbunătăți experiența utilizatorului în dezvoltarea și explorarea unui site web. Să aruncăm o privire rapidă asupra celor mai bune exemple de cazuri de utilizare de sfaturi cu instrumente.

1. Amazon

Amazon este în prezent site-ul de comerț electronic numărul unu pe web. Veți găsi nenumărate sfaturi pe care le folosește Amazon pentru a vă ghida pe diferite pagini și pentru a explica toate procesele esențiale. Ori de câte ori aterizați pe pagina sa de pornire, veți primi un sfat explicativ ca cel de mai jos.

Cel mai bun lucru este că nu include doar instrucțiuni, dar include și butoane CTA.

2. Wikipedia

Wikipedia este o enciclopedie online întreținută de comunitatea de scriitori voluntari. De fiecare dată când treceți cursorul peste orice cuvânt legat, veți vedea un sfat explicativ care afișează informații suplimentare despre acele cuvinte și terminologii.

3. AliExpress

Ori de câte ori încercați să cumpărați produse de pe AliExpress folosind un card de credit sau de debit, veți primi câteva sfaturi despre cum să finalizați procesul de plată. Aici, puteți vedea în fotografia de mai jos sfaturi explicative de unde veți obține numărul cardului dvs. pe diferite carduri digitale și le veți folosi pentru a finaliza o comandă.

Sper că aceste trei exemple sunt suficiente pentru a înțelege cum ar trebui să afișați sfaturi cu instrumente pe site-ul dvs.

Întrebări frecvente despre cum se adaugă balonul folosind Elementor

Să avem un răspuns la unele dintre cele mai frecvente întrebări despre cum să adăugați sfaturi explicative pe site-urile web Elementor.

Pentru dvs.: sunteți gata să adăugați sfaturi pe site-ul dvs.?

Un design bun este primul lucru care vă poate impresiona publicul într-un moment. Potrivit Adobe, 38% dintre utilizatori nu mai interacționează cu un site web dacă conținutul și aspectul acestuia sunt mai puțin atractive. Peste 55% dintre utilizatorii de internet spun că nu le place să recomande o afacere cu un design web foarte slab - SocPub.

Deci, dacă doriți ca site-ul dvs. să iasă în evidență online, trebuie să aveți grijă de fiecare element de design web. Cu ajutorul instrucțiunilor, puteți simplifica lucrurile complicate pentru utilizatorii dvs. și puteți îmbunătăți experiența utilizatorului.

Sperăm că, după ce ați citit acest articol, acum știți totul despre cum să adăugați un sfat explicativ pe site-urile web Elementor, fie prin CSS personalizat, fie prin viitorul balon de informații al Happyaddons. Dacă mai aveți întrebări sau curiozitate pe această temă, anunțați-ne prin secțiunea de comentarii.

Ne va face plăcere să vă ajutăm și să vă ghidăm în cazul oricărei dificultăți.