Jak wywołać lightbox

Zaktualizowano: 2 sierpnia, 2021 Autor: Avatar Magdalena Wiśniowska
share
Spis treści
share
Spis treści

Lightboksy to wyskakujące okna, które wypełniają ekran i zaciemniają pozostałą część landing page’a. Ta instrukcja pokaże Ci, jak w łatwy sposób dodać lightbox do swojego landing page'a.

Jeżeli Twój lightbox nie jest jeszcze gotowy, dowiedz się tutaj jak stworzyć lightbox.

Dodaj lightbox do landing page’a

Zaloguj się na swoje konto w Landingi i przejdź do edytora landing page'a, na którym chcesz umieścić lightbox.

Widgety, które mogą wyzwalać lightbox, to:

  • Przycisk
  • Ikona 
  • Obrazek 
  • Tekst

WAŻNE: Element wywołujący lightbox nie może być animowany (zob. instrukcję Animowanie elementów).

Lightbox wyzwalany przyciskiem

1. Dodaj widget Przycisk (z lewego panelu widgetów), który będzie wyzwalał wyświetlenie się lightboksu po kliknięciu, i wejdź w jego Ustawienia.

2. Przejdź do zakładki Pokaż lightbox (1). Następnie z rozwijanej listy wybierz odpowiedni lightbox (2). Możesz także stworzyć nowy, klikając w +.

3. Zapisz i zamknij.

4. Opublikuj landing page'a i sprawdź, czy lightbox wyświetla się poprawnie.

Lightbox wyzwalany ikoną lub obrazem

1. Dodaj widget Ikona lub Obrazek (z lewego panelu widgetów), który będzie wyzwalał wyświetlenie się lightboksu po kliknięciu.

2. W ustawieniach widgetu, w panelu po prawej stronie odszukaj zakładkę Akcja po kliknięciu i wybierz z listy Pokaż lightbox.

3. Z listy, która się pojawi, wybierz swój lightbox lub kliknij ikonę +, aby stworzyć nowy.

4. Opublikuj landing page'a i sprawdź, czy lightbox wyświetla się poprawnie.

Lightbox wyzwalany tekstem

1. Dodaj widget Tekst (z lewego panelu widgetów), który będzie wyzwalał wyświetlenie się lightboksu po kliknięciu.

2. Zaznacz tekst, który ma wyzwolić lightbox, i w menu kontekstowym (nad widgetem) kliknij ikonę linku.

3. Z listy rozwijanej Rodzaj linka wybierz Pokaż lightbox.

4. Wybierz swój lightbox lub stwórz nowy, klikając ikonę +.

5. Zapisz i zamknij.

6. Opublikuj landing page'a i sprawdź, czy lightbox wyświetla się poprawnie.

share

Czy ta instrukcja była pomocna?