Kompletny przewodnik na temat dodawania podpowiedzi w witrynie Elementor

Czy chcesz dodać informacyjne podpowiedzi do swojej witryny? Elementor może Ci w tym pomóc w krótkim czasie. Jest to jedna z najłatwiejszych wtyczek, dzięki którym możesz dodawać podpowiedzi do dowolnego elementu sieci za pomocą zaledwie kilku kliknięć myszą. W ogóle nie musisz umieć kodować.

Ponadto Elementor ma wiele przydatnych funkcji, których można użyć do dostosowania wyglądu podpowiedzi do stylu witryny. W tym przewodniku zapewnimy kompletny przewodnik dotyczący dodawania podpowiedzi na stronach Elementor za pomocą tej wtyczki.

Omówimy również część dotyczącą dodawania podpowiedzi za pomocą kodów CSS klienta . Więc niezależnie od tego, czy jesteś nowy w Elementorze, czy używasz go od lat, ten artykuł jest dla Ciebie!

Spis treści

• Co to jest podpowiedź?
• W jaki sposób podpowiedzi pomagają poprawić wrażenia użytkownika w Twojej witrynie?
• Jak dodać podpowiedzi do swojej witryny Elementor za pomocą niestandardowego CSS?
• Jak dodać podpowiedzi do swojej witryny Elementor za pomocą HappyAddons
• Jak uniknąć podpowiedzi wyglądających na spam?
• Kilka świetnych przykładów projektowania podpowiedzi
• Często zadawane pytania dotyczące dodawania podpowiedzi za pomocą Elementora
• Do Ciebie: Czy jesteś gotowy, aby dodać podpowiedzi do swojej witryny?

Co to jest podpowiedź?

Etykietka to fragment tekstu, który pojawia się po najechaniu myszą na określone elementy sieci. Jest to właściwość CSS, która umożliwia dodawanie dodatkowych informacji lub treści wokół żądanych elementów internetowych. Może to obejmować przyciski, linki, a nawet zdjęcia.

Możesz użyć etykietek narzędzi, aby dodać przydatne porady, informacje o produkcie lub ogólny kontekst treści. Podpowiedzi ułatwiają również nawigację. Dzięki temu użytkownicy nie muszą odwiedzać wielu stron, ponieważ na tej samej stronie internetowej można wyświetlać coraz więcej informacji.

W jaki sposób podpowiedzi pomagają poprawić wrażenia użytkownika w Twojej witrynie?

Etykietki narzędzi mogą pomóc w dodawaniu dodatkowych informacji, aby poprawić wrażenia użytkownika, zaspokoić jego zamiary wyszukiwania i jednocześnie zwiększyć szybkość przeglądania sieci. Przyjrzyjmy się kilku kluczowym zaletom używania podpowiedzi w witrynie.

1. Pozwala na dodawanie informacji kontekstowych

Etykietki narzędzi umożliwiają wyświetlanie informacji kontekstowych o określonych elementach internetowych. Możesz go użyć do uproszczenia procesu dowolnej skomplikowanej instrukcji lub funkcji internetowych.

Załóżmy, że masz artykuł wypełniony dużą ilością tekstu i grafiki. Etykietki narzędzi mogą pomóc w wyróżnieniu kluczowych punktów pisania, aby ułatwić użytkownikom zrozumienie tego, co czytają.

2. Pomaga w polach formularza

Musisz wypełnić wiele pól za każdym razem, gdy idziesz do wypełnienia wniosku online, utworzenia nowego konta lub zamówienia produktów eCommerce. Etykietki narzędzi mogą dostarczyć użytkownikom pomocne instrukcje, dzięki którym użytkownicy nie popełnią żadnych błędów podczas wpisywania swoich informacji.

Ten rodzaj pomocy staje się koniecznością, gdy użytkownicy próbują zweryfikować swoją kartę kredytową, złożyć wniosek o paszport, wypełnić adresy rozliczeniowe i nie tylko.

3. Wyjaśnia proces instalacji aplikacji internetowej

Istnieje wiele aplikacji internetowych, które są zwykle skomplikowane dla nowych użytkowników. Muszą poświęcić sporo czasu na zrozumienie, jak korzystać z tych aplikacji. To bardzo zabija ich czas.

Korzystając z podpowiedzi, możesz łatwo zademonstrować proces konfiguracji dowolnej skomplikowanej aplikacji internetowej. Pomoże Ci zaoszczędzić cenny czas dla użytkowników i sprawi, że poczują się jak profesjonaliści od samego początku.

4. Pomaga promować funkcje produktów

Nie tylko w celu wyjaśnienia złożonych rzeczy, podpowiedzi mogą również pomóc w promowaniu funkcji produktu. Przed zakupem jakiegokolwiek produktu klienci uwielbiają zapoznać się z jego funkcjami i łatwością użytkowania. Etykietki narzędzi mogą Ci pomóc w obu tych czynnościach. Możesz wyróżnić cechy swojego produktu i wyjaśnić instrukcję użytkowania.

Jak dodać podpowiedzi do swojej witryny Elementor za pomocą niestandardowego CSS?

Istnieje wiele sposobów dodawania podpowiedzi do swojego Elementor strona internetowa za pomocą niestandardowego CSS. Przyjrzyjmy się kilku najprostszym metodom dla nich.

Metoda 01 – Używanie <abbr> (skrótu) Tag Aby dodać podpowiedzi

Używając tagu <abbr>, możesz w dowolnym momencie tworzyć podpowiedzi w swojej witrynie. Musisz dodać tekst podpowiedzi wewnątrz tagu title=”…”. Oto przykładowy kod poniżej, którego możesz użyć do utworzenia podpowiedzi.

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

Możesz wpisać ten kod w dowolnym polu Elementora, które obsługuje tag HTML. Po wykonaniu tej części zobaczysz podpowiedź pojawiającą się za każdym razem, gdy najedziesz kursorem na ten element.

Uwaga: Nie możesz stylizować swoich podpowiedzi za pomocą tej metody! Ale to najłatwiejszy sposób na dodanie podpowiedzi.

Metoda 2 – Tworzenie podpowiedzi za pomocą HTML i CSS

Teraz pokażemy Ci, jak stworzyć dostosowywalną podpowiedź, dzięki której możesz zmienić jej kolor, zmienić położenie, dodać animację i nie tylko. Aby to zrobić, najpierw musisz napisać proste kody dla podpowiedzi w swoim pliku HTML.

W Elementorze otrzymasz widżet HTML do utworzenia pola do pisania tego kodu. Przeciągnij i upuść widżet HTML na płótnie Elementora.

Otrzymasz pole automatycznie otwarte w sekcji treści Elementora. Musisz dodać klasę i nadać jej nazwę klasy, nazwaliśmy ją „tooltiptext”. Ta klasa będzie używana do dostosowywania podpowiedzi. Poniżej znajduje się przykładowy kod HTML, którego możesz użyć do tworzenia podpowiedzi.

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

Tutaj użyliśmy „Moich zestawów umiejętności” jako tekstu podpowiedzi. Musisz wpisać żądany tekst podpowiedzi w tej sekcji.

Udostępniliśmy poniższe kody CSS, aby umożliwić Ci dalsze dostosowywanie podpowiedzi. Możesz je bezpośrednio skopiować i wkleić do sekcji Custom CSS lub zmodyfikować je według własnego uznania. Możesz dodać ten fragment kodu do niestandardowego panelu CSS Elementor lub w dodatkowej sekcji CSS motywu.

Jeśli chcesz dodać ten kod do niestandardowego kodu CSS Elementor, postępuj zgodnie z tą nawigacją — Ustawienia witryny Elementor > Niestandardowy CSS . Oto kod. Możesz skopiować cały fragment kodu CSS do podpowiedzi lub dostosować go do swoich potrzeb.

Uwaga: aby przejść do dodatkowego panelu CSS swojego motywu, przejdź do Panel administracyjny > Wygląd > Dostosuj > Dodatkowy kod CSS .

 .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; }

Jeśli chcesz zmienić pozycję podpowiedzi, pozycję strzałki itp., postępuj zgodnie z poniższymi fragmentami kodu.

Aby zmienić pozycję podpowiedzi i umieścić ją na dole, użyj poniższego kodu.

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

Aby przenieść go na prawą stronę, użyj poniższego kodu.

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

Aby umieścić go po lewej stronie, użyj poniższego kodu.

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

Aby zmienić pozycję strzałki w podpowiedzi i umieścić ją na dole, użyj poniższego kodu.

 .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; }

Jeśli chcesz dowiedzieć się więcej o dostosowywaniu podpowiedzi CSS, możesz odwiedzić w3schools.

Jak dodać podpowiedzi do swojej witryny Elementor za pomocą HappyAddons

Niektórzy z nas mogą mieć trudności z utworzeniem podpowiedzi przy użyciu niestandardowych kodów CSS. Dziś tworzenie i dodawanie podpowiedzi do Twojej witryny jest możliwe bez jednej linii kodu. HappyAddons zapewnia funkcję podpowiedzi CSS bez kodu w Elementorze.

Co ciekawe, możesz uzyskać tę funkcję bezpłatnie w HappyAddons. Nie tylko dodając teksty, ale także otrzymasz następujące zaawansowane funkcje w podpowiedzi HappyAddons.

• Zmień kolor tekstu
• Zmień typografię tekstu
• Zmień pozycję podpowiedzi
• Dodaj kolor tła tekstu i obraz tła
• Dodaj dynamiczne tagi
• Dodaj animację
• Dodaj strzałkę podpowiedzi

Przyjrzyjmy się poniżej, jak dodać podpowiedź w Elemnetor za pomocą tego rozszerzenia.

Warunki wstępne dodawania podpowiedzi

• Elementor za darmo
• HappyAddons za darmo

Po zainstalowaniu tych wtyczek w witrynie przejdź do następującego procesu.

Krok 01: Włącz zaawansowaną podpowiedź

Ponieważ podpowiedź jest funkcją, a nie widżetem, musisz ją najpierw włączyć. Aby włączyć tę funkcję,

• Najpierw wybierz dowolny widżet lub element swojej witryny.
• Następnie przejdź do Zakładka Zaawansowane .
• Przewiń trochę w dół i rozwiń opcję Happy Tooltip .
• Włącz opcję Włącz zaawansowaną podpowiedź .

Po włączeniu tej funkcji otrzymasz dwie dodatkowe sekcje, aby dostosować etykietkę. Są stylem i treścią. Możesz je zobaczyć na powyższym zdjęciu.

1. Styl : w tej sekcji możesz dodać spersonalizowany projekt i dodać obraz do podpowiedzi. O tej opcji porozmawiamy szczegółowo później.
2. Treść: Możesz dodawać i edytować tekst podpowiedzi, poprawiać jego położenie, dodawać animację i nie tylko z sekcji treści.

Krok 02: Dodaj swoje teksty podpowiedzi

W sekcji treści możesz nie tylko dodać żądane teksty podpowiedzi, ale także znaczniki HTML, aby zapewnić dodatkową przewagę tekstom podpowiedzi. Tagi HTML, których możesz tutaj użyć to:

<b>,<i>,<u>,<s>,<br>,<em>,<del>,<ins>,<sub>,<sup>,<kod>,<znak>,<small >,<strike>,<abbr>,<span>,<strong>,<a>,<q>,<img>,<dfn>,<godzina>,<cytat>,<akronim>,<hr>

Dodaj dynamiczne tagi do treści podpowiedzi

HappyAddons mają integrację z dynamiczną obsługą treści podpowiedzi. Jednak ze względu na pewne ograniczenia obsługa wszystkich tagów jest dla nas wyzwaniem. Obecnie nie obsługujemy tagów dynamicznych shortcode.

Ponadto nie można zobaczyć danych dynamicznych w trybie edycji, tylko w trybie podglądu.

Dostosuj pozycję podpowiedzi do Elementora

Ustawienia kontroli pozycji znajdziesz bezpośrednio pod sekcją treści. Domyślnie podpowiedź będzie wyświetlana nad dowolnym elementem. W tej sekcji otrzymasz cztery różne opcje ustawienia pozycji podpowiedzi. Oni są:

• Top
• Na dole
• Lewy
• Prawidłowy

Na poniższym zdjęciu widać, że zmieniliśmy pozycję naszej podpowiedzi po prawej stronie.

Dodaj animację do podpowiedzi Elementora

Tuż pod ustawieniami pozycji znajdziesz sekcję animacji. Otrzymasz tam osiem rodzajów efektów animacji. Oni są:

• Zanikanie
• Masowo napływać
• Zbliżenie
• Odbić
• Wsuń w dół
• Przesuń w lewo
• Wsuń w prawo
• Wsuń się w górę

Wybierz ten, który odpowiada potrzebom podpowiedzi. Zobacz zdjęcie poniżej!

Możesz nawet dostosować czas trwania animacji podpowiedzi. Domyślnie jest ustawiony na 1000ms (milisekundę).

Dodaj lub usuń strzałkę podpowiedzi do Elementora

Możesz nazwać ten wskaźnik podpowiedzi lub strzałkę nawigacji podpowiedzi. Domyślnie ta strzałka jest włączona. Ale możesz go dezaktywować, jeśli chcesz. Proces wyjaśniono poniżej.

Uwaga: Musisz wyłączyć tę funkcję, jeśli chcesz dodać obraz do podpowiedzi. W przeciwnym razie nie znajdziesz dostępnej opcji dodawania obrazu.

Uruchom podpowiedź

Wyzwalacz określa, w jaki sposób Elementor podpowiedź pojawi się na ekranie. Dostępne są dwie opcje wyzwalania:

• Kliknij
• Unosić się

Otrzymasz opcję Odległość tuż pod sekcją Wyzwalacz. Umożliwi to zwiększenie lub zmniejszenie odległości między elementem sieci a jego odległością za pomocą podpowiedzi.

Wyrównaj tekst podpowiedzi

Otrzymasz opcję wyrównania tekstu poniżej sekcji Odległość.

Krok 03: Nadaj styl swoim podpowiedziom Elementora

Aby jeszcze bardziej dostosować podpowiedzi, kliknij sekcję stylu na poniższym zdjęciu.

Zwiększ szerokość podpowiedzi

Pierwsza opcja dostanie się w sekcji stylu to Szerokość . Przeciągnij przycisk szerokości i dostosuj go do żądanego wymiaru.

Zwiększ rozmiar strzałki podpowiedzi

Możesz dostosować rozmiar strzałki w podpowiedzi, korzystając z opcji Rozmiar strzałki podpowiedzi . Możesz to zrobić, przeciągając poniższy przycisk pomiaru.

Zmień typografię swoich podpowiedzi

Możesz dodać różne smaki do podpowiedzi w ustawieniach typografii. Tutaj znajdziesz wszystkie ustawienia typografii Elementora.

Dodaj kolor do tła tekstu podpowiedzi

Możesz dodać kolor do tła tekstu podpowiedzi za pomocą opcji Kolor tła.

Dodaj promień obramowania do podpowiedzi

Domyślnie promień obramowania podpowiedzi wynosi 5 pikseli. Ale możesz to zmienić, jak chcesz. Panel kontrolny border-radius da ci pełne uprawnienia, aby to zrobić.

Dodaj cień pudełka do podpowiedzi

Przeciągając przyciski pomiaru, możesz dodać cień do podpowiedzi z ustawień cienia pola.

Krok 04: Włącz opcję obrazu

Już raz powiedzieliśmy ci, że musisz wyłączyć funkcję strzałki podpowiedzi, jeśli chcesz włączyć opcję obrazu. Umożliwi to nową opcję w sekcji stylu.

Dodaj obraz i dostosuj podpowiedź

Przejdź do sekcji stylu. Kliknij sekcję Typ tła i rozwiń ją. Otrzymasz tam plik obrazu. Kliknij go i prześlij żądane zdjęcie do podpowiedzi. Następnie możesz zmienić jego pozycję, załącznik, rozmiar, kolor tekstu, promień obramowania i inne.

W ten sposób możesz tworzyć wspaniałe obrazy i podpowiedzi tekstowe dla swojej witryny. Zobacz, jak w końcu po wielu dostosowaniach pojawiły się podpowiedzi.

Jak uniknąć podpowiedzi wyglądających na spam?

Etykietki narzędzi mogą być świetnym sposobem na przekazanie dodatkowych informacji użytkownikom internetu. Ale jeśli na stronie wyświetlanych jest zbyt wiele podpowiedzi, może to wyglądać na spamerskie i irytujące. Jest kilka rzeczy, których należy unikać podczas korzystania z etykietek narzędzi, aby Twoje strony internetowe nigdy nie wyglądały na spam.

Przyjrzyjmy się im poniżej.

1. Trzymaj podpowiedzi zwięzłe i proste

Etykietki narzędzi powinny zawierać informacje, które są obowiązkowe dla użytkowników – nic więcej. Oznacza to, że musisz unikać długich list szczegółów, niepotrzebnych tekstów i krzykliwych elementów projektu. Zamiast tego trzymaj się prostych i prostych wyjaśnień.

2. Nigdy nie pokazuj wielu podpowiedzi razem

Innym sposobem na uniknięcie spamerskich podpowiedzi jest ograniczenie ich liczby w bloku/w tym samym wierszu. Wyświetlaj tylko jedną podpowiedź na raz i pozwól użytkownikom przewijać w dół, jeśli chcą uzyskać więcej informacji.

Jeśli czujesz potrzebę dodania większej ilości informacji, możesz rozważyć alternatywne sposoby. Na przykład możesz osadzać filmy i infografiki zamiast udostępniać wszystkie ładunki za pomocą podpowiedzi. Może to nawet zapewnić użytkownikom bogatsze wrażenia.

3. Zachowaj odstęp między elementami

Przestrzeń jest dużą częścią każdego projektu interfejsu użytkownika. Istnieje idealny stosunek ilości miejsca, które musisz zapewnić na swoich stronach internetowych. Stosunek wynosi 2:1, co oznacza, że ​​jedna trzecia stron internetowych musi zawierać spacje.

To samo dotyczy podpowiedzi. Nie rób ich zbyt przeciążonych, aby użytkownicy mogli mieć trochę powietrza podczas przeglądania Twojej witryny.

4. Pozwól użytkownikom pominąć część samouczka

Jeśli udostępniasz samouczki lub inną pomocną zawartość, upewnij się, że użytkownicy mogą je pominąć, jeśli nie chcą. Pomoże to zmniejszyć liczbę podpowiedzi wyświetlanych na stronie i zachęci więcej osób do skorzystania z Twoich treści.

Kilka świetnych przykładów projektowania podpowiedzi

Umiejętność inteligentnego korzystania z etykietek narzędziowych może poprawić wrażenia użytkownika podczas rozwijania i eksplorowania witryny. Rzućmy okiem na kilka najlepszych przykładów użycia podpowiedzi.

1. Amazonka

Amazon jest obecnie najpopularniejszą witryną eCommerce w sieci. Znajdziesz niezliczone podpowiedzi, których Amazon używa, aby poprowadzić Cię na różnych stronach i wyjaśnić wszystkie niezbędne procesy. Za każdym razem, gdy trafisz na jego stronę główną, otrzymasz podpowiedź podobną do poniższej.

Najlepsze jest to, że zawiera nie tylko instrukcje, ale także przyciski CTA.

2. Wikipedia

Wikipedia to internetowa encyklopedia utrzymywana przez społeczność wolontariuszy. Za każdym razem, gdy najedziesz kursorem na jakiekolwiek połączone słowa, zobaczysz podpowiedź, która pokazuje dodatkowe informacje na temat tych słów i terminologii.

3. AliExpress

Za każdym razem, gdy spróbujesz kupić produkty od AliExpress za pomocą karty kredytowej lub debetowej, otrzymasz wskazówki wyjaśniające, jak ukończyć proces realizacji transakcji. Tutaj możesz zobaczyć na poniższym zdjęciu podpowiedzi wyjaśniające, gdzie otrzymasz numer karty na różnych kartach cyfrowych i użyjesz ich do realizacji zamówienia.

Mam nadzieję, że te trzy przykłady wystarczą, aby zrozumieć, w jaki sposób należy wyświetlać podpowiedzi w witrynie.

Często zadawane pytania dotyczące dodawania podpowiedzi za pomocą Elementora

Miejmy odpowiedź na niektóre najczęściej zadawane pytania dotyczące dodawania podpowiedzi w witrynach Elementora.

Do Ciebie: Czy jesteś gotowy, aby dodać podpowiedzi do swojej witryny?

Dobry projekt to pierwsza rzecz, która może zaimponować odbiorcom w ciągu chwili. Według Adobe 38% użytkowników przestaje angażować się w stronę internetową, jeśli jej treść i układ są mniej atrakcyjne. Ponad 55% internautów twierdzi, że nie lubi polecać firmy z bardzo słabym projektem strony internetowej – SocPub.

Tak więc, jeśli chcesz, aby Twoja witryna wyróżniała się w Internecie, musisz zadbać o każdy element projektu strony internetowej. Za pomocą podpowiedzi możesz uprościć skomplikowane rzeczy dla swoich użytkowników i poprawić ich wrażenia.

Mamy nadzieję, że po przeczytaniu tego artykułu wiesz już wszystko o tym, jak dodać podpowiedź na stronach Elementora, czy to za pomocą niestandardowego CSS, czy poprzez przyszłość podpowiedzi Happyaddons. Jeśli nadal masz jakieś pytania lub ciekawość na ten temat, po prostu daj nam znać w sekcji komentarzy.

Z przyjemnością pomożemy i poprowadzimy Cię w razie jakichkolwiek trudności.