W ustawieniach takich elementów onsite jak Pop Up czy Web layer banner można wybrać akcję "Kliknięcie", a następnie dostosować element, w którego kliknięcie spowodowuje wyświetlenie się naszego onsite. Aby odpowiednio ustawić element w który kliknięcie wywoła wyświetlenie oniste należy znaleźć jego selektor CSS.
Aby wybrać odpowiedni selektor elementu, po kliknięciu którego wywołasz wyświetlenie Twojego Pop Upu wykonaj następujące kroki:
Inspekcja elementu:
Otwórz narzędzia deweloperskie przeglądarki (zazwyczaj dostępne po kliknięciu prawym przyciskiem myszy na stronie i wybraniu opcji „Zbadaj” lub naciśnięciu F12).
Znajdź element, który ma wywołać wyświetlanie Pop Upu po kliknięciu. Może to być przycisk, link lub inny interaktywny element.
Analiza elementu HTML:
Gdy element jest już zaznaczony w narzędziach deweloperskich, przyjrzyj się jego HTML oraz atrybutom takim jak ID (id) i klasy (class).
Użyj identyfikatora (ID) lub klasy
Przykład
Załóżmy, że masz przycisk, którym chcesz wywołać PopUp, a jego HTML wygląda tak:
<button id="openPopup" class="btn btn-primary popup-trigger">Pokaż wyskakujące okno</button>
Selektor ID
Z założenia ID elementu jest unikalne na stronie, ale przy błędnej budowie strony może zdarzyć się, że tak nie jest. Natomiast jeśli element ma ID, możesz użyć selektora ID:
#openPopup
W takiej formie należy wkleić selektor w edrone. Jeżeli chcesz wykorzystać id elementu, musisz zastosować znak “#” przed właściwym tekstem.
Selektor klasy
Jeśli element nie ma ID, ale ma klasę, możesz użyć selektora klasy. Pamiętaj, że dana klasa może powtarzać się parokrotnie dla wielu elementów na stronie, dlatego ważne jest to żeby klasa danego elementu też była unikalna. Jeżeli masz dostęp do kodu źródłowego strony i możliwość jego edycji, zawsze możesz dodać unikalną klasę dla konkretnego elementu w HTML: .popup-trigger
W takiej formie należy wkleić selektor w edrone. Jeżeli chcesz wykorzystać klasę elementu, musisz zastosować znak “.” przed właściwym tekstem.
Atrybuty i zagnieżdżenie:
W niektórych przypadkach może być konieczne użycie bardziej złożonych selektorów, które uwzględniają atrybuty lub zagnieżdżenie elementu. W tym wypadku wymagana jest większa wiedza z zakresu HTML i CSS.
Przykład: “button[aria-haspopup="true"]” lub “.container .popup-trigger”
Potrzebujesz dodatkowej pomocy?
Jeśli masz jakiekolwiek dodatkowe pytania dotyczące wybierania elementu CSS, skontaktuj się z nami na hello@edrone.me