Jak dodać własny kod do mojego landing page?

Możesz dodać własny kod HTML, formatowanie CSS i JavaScript do swojego landing page’a za pomocą elementu Własny kod.

Jest kilka rzeczy, o których musisz pamiętać podczas pracy z niestandardowym kodem:

  • Możesz dodać niestandardowy kod do sekcji <body> lub <head> swojego landing page. Jeśli korzystasz z kodu zewnętrznego, upewnij się, że uzyskałeś informacje o jego umiejscowieniu od dostawcy.
  • Aby działać zgodnie z przepisami RODO, poinformuj potencjalnych subskrybentów i gości strony, że korzystasz z formularzy ze stron trzecich, czy też z kodu monitorującego lub mapującego.
  • Dodawanie kilku kodów śledzących, widgetów itd. może spowolnić działanie landing page. Ponadto zbyt wiele treści na landing page może doprowadzić do tego, że odwiedzający opuszczą Twoją stronę.
  • W kreatorze landing pages zobaczysz tylko placeholder. Skrypt działa tylko w trybie podglądu lub już na samej opublikowanej stronie. Zawsze warto najpierw sprawdzić stronę przed jej publikacją, aby zobaczyć, czy skrypt działa zgodnie z Twoimi oczekiwaniami. Nie udostępniaj linku do strony, póki nie upewnisz się, że wszystko działa poprawnie.
  • Dobrym pomysłem jest sprawdzenie, czy strona z kodem wyświetla się poprawnie we wszystkich przeglądarkach – zwłaszcza, jeśli modyfikujesz CSS.
  • Nasz dział Obsługi Klienta zapewnia wsparcie w zakresie standardowych funkcji kreatora. W przypadku skryptów pochodzących ze stron trzecich nie jesteśmy w stanie zaoferować pomocy lub zagwarantować niezawodności tych skryptów.

Dodawanie własnego kodu do treści landing page

Sekcja body landing page to kluczowy obszar, w którym wyświetlane są najważniejsze treści, takie jak teksty, obrazy, filmy oraz interaktywne elementy, np. formularze rejestracyjne. Znajduje się pomiędzy nagłówkiem a stopką, pełniąc rolę centralnej przestrzeni do przekazywania informacji i angażowania odwiedzających.

Aby dodać własny kod do treści landing page:

  1. W kreatorze landing page kliknij Dodaj elementy.



  2. Przeciągnij i upuść element Własny kod na obszar roboczy. Zauważ, że edytor podświetli miejsca, w których możesz go upuścić.



  3. Kliknij wewnątrz obiektu Własny kod, aby otworzyć pasek narzędzi i wprowadzić kod w edytorze po prawej stronie.



Istnieją trzy rodzaje kodu, których możesz użyć w sekcji body:

  • HTML – standardowe formatowanie HTML, na przykład:
    <p> </p>
  • CSS – umieść swój kod CSS między znacznikami stylu:
    <style> </style>.
  • JavaScript – umieść kod JS między znacznikami script:
    <script> </script>.

Jeśli chcesz użyć formatu Less lub Sass, musisz najpierw skompilować go do CSS, a następnie umieścić między znacznikami
<style> </style>.

Możesz także ustawić dodatkowe opcje dla bloku własnego kodu:

  • Dodaj dodatkowe nazwy klas – włącz tę opcję, aby dodać nazwy klas do kontenera elementu i dostosować jego styl zgodnie z własnymi potrzebami.
  • Pozycjonowanie bezwzględne – włącz tę opcję, aby umieścić własny kod w dowolnym miejscu na swoim landing page’u. Polecamy tę opcję tylko w przypadku, gdy używasz nietypowego projektu, którego nie można stworzyć w inny sposób. Używanie obiektów z pozycjonowaniem bezwzględnym może sprawić, że Twoja strona będzie mniej responsywna na urządzeniach mobilnych. Więcej informacji na temat tej funkcjonalności znajdziesz tutaj.
  • Ukryj na urządzeniach mobilnych – włącz tę opcję, aby ukryć własny kod, gdy strona zostanie otwarta na urządzeniu mobilnym.

Dodawanie własnego kodu do sekcji head Twojego landing page

Sekcja <head> landing page to część zawierająca metadane i informacje o stronie, takie jak tytuł, kodowanie znaków, połączone arkusze stylów, skrypty oraz tagi związane z SEO. Nie wyświetla treści bezpośrednio na stronie, ale dostarcza kluczowych instrukcji dla przeglądarek i wyszukiwarek.

Aby dodać własny kod do nagłówka landing page:

  1. W kreatorze landing page kliknij Zarządzaj stronami.



  2. Najedź kursorem na przycisk akcji obok Home i kliknij Ustawienia.



  3. W oknie ustawień strony przejdź do zakładki element <head> i wklej tam własny lub zewnętrzny skrypt.




    Uwaga: zmiany są zapisywane automatycznie po kliknięciu poza polem tekstowym.

Użyj znaczników, aby poinformować nas, jak kod powinien być renderowany:

  • W przypadku HTML, użyj znaczników HTML, takich jak: <h2> </h2>.
  • W przypadku CSS, otocz kod znacznikami <style> </style>
  • W przypadku JavaScript, otocz kod znacznikami <script> </script>
Kroki dla starszej wersji landing pages

Możesz dodać własny kod (HTML, CSS i JavaScript) do strony landing page za pomocą placeholdera. Ten element jest dostępny w kreatorze landing pages. Skorzystaj z tej opcji, jeśli potrzebujesz dodać do strony narzędzia i widgety niedostępne w kreatorze.

Kod jest dodawany zarówno do desktopowej, jak i mobilnej wersji Twojej strony. Jeśli chcesz przeprowadzić test A/B na landing page, pamiętaj o dodaniu placeholdera do każdego wariantu strony. Możesz go również umieścić na stronie z podziękowaniem.

Możesz dodać własny kod do dowolnego nowego lub istniejącego szablonu w kreatorze. Poniżej dowiesz się, jak to zrobić:

1. Przejdź do zakładki Landing pages i wykonaj jedną z poniższych czynności:

  • kliknij przycisk Stwórz stronę, aby utworzyć nową stronę
  • wybierz Edytuj stronę z menu Akcji obok nazwy strony

2. Kliknij dwukrotnie ikonę własnego kodu, aby dodać placeholder do szablonu.

Placeholder pojawi się w lewym górnym rogu wyświetlonej sekcji.

Gdy dwukrotnie klikniesz tę ikonę, automatycznie pojawi się dodatkowe okno, do którego można wprowadzić kod.
3. (Opcjonalnie) Chwyć i przenieś placeholder w inne miejsce, jeśli chcesz wyświetlić element w konkretnej części strony. Kliknij go dwukrotnie, aby otworzyć okno, do którego możesz wprowadzić kod.
4. Wklej docelowy kod lub wpisz go ręcznie. Jeśli korzystasz z kodu JavaScript, pamiętaj o zamykaniu skryptów w tagach <script>. Jeśli chcesz dodawać kilka fragmentów kodu na raz, wklejaj je jeden pod drugim.

5. (Opcjonalnie) Jeśli przeprowadzasz test A/B, powtórz kroki 2-4 dla każdego wariantu strony.
6. Jeśli tworzysz nową stronę, kliknij ikonę telefonu komórkowego, aby wygenerować mobilną wersję strony. Jeśli edytujesz istniejącą stronę, kliknij tę ikonę, aby sprawdzić, czy wersja mobilna wygląda dobrze.

7. (Opcjonalnie) Kliknij przycisk Podgląd, aby sprawdzić, czy kod poprawnie wyświetla elementy, które chcesz dodać do strony.

8. Zapisz zmiany lub opublikuj stronę.
9. Przejrzyj opublikowaną stronę, aby upewnić się, że jej treść wyświetla się poprawnie.

Powiązane artykuły

Popularne materiały