Przewodnik HTML i CSS

4 Minuty

11/18/2022

Podczas tworzenia Landing Page mozesz dodać dowolny kod HTML lub CSS w polach tekstowych. Ponizszy przewodnik zawiera kilka pomysłów na temat mozliwości stylizacji i osadzania treści multimedialnych.

Jak osadzić CSS

Mozesz osadzić niestandardowy CSS na swoich stronach docelowych, w sekcji brandingu lub w niestandardowych polach css. Oto kilka przykładowych fragmentów kodu CSS.

<style>
/* Change Background Color */
body {background:#000}

/* Background Gradient */
body {background: linear-gradientto right, red , yellow}

/* Embed Background Image */
body {background: url"/img/background-example.jpg" no-repeat}

/* Fullscreen Background Image */
body {

  background-image: url"/img/background-example.jpg";

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Change Heading Text Color */
h1 {color:#f4f !important}

/* Change Type Font */
div {
    font-family: "Times New Roman", Georgia, Serif;
}
</style>

Dowiedz się więcej o CSS w samouczku CSS W3 Schools

Styl elementów strony docelowej

Za pomocą inspektora przeglądarki mozesz wybrać element na stronie docelowej. Po wybraniu elementu, jego znacznik i klasa zostaną wyświetlone w oknie inspektora ponizej.

W sekcji brandingu landing page'a mozesz teraz zdefiniować własny styl dla tego elementu w polu "Custom CSS". Ponizszy przykład pokazuje, jak mozna zmienić rozmiar czcionki wybranego elementu nagłówka h1.headline.

Jeśli chcesz ponownie wykorzystać swój kod CSS na innych stronach docelowych, mozesz zapisać kod CSS w szablonie css, klikając przycisk Dodaj.

Osadzanie czcionek Google

<style>
@import url'//fonts.googleapis.com/css?family=Open+Sans';
body{font-family: 'Open Sans', sans-serif;}
</style>

Uzywaj dyrektywy @import zawsze na samym początku pliku css. Dowiedz się więcej o czcionkach Google

Nalezy pamiętać, ze w Europie od 25 maja 2018 r. obowiązuje nowe ogólne rozporządzenie o ochronie danych. Jeśli integrujesz treści z zewnętrznych serwerów takich jak Google Fonts na swoich stronach docelowych, powinieneś dołączyć powiadomienie do polityki prywatności dla kazdej usługi. Mozesz umieścić spersonalizowany link do swojej polityki prywatności na kazdym landing page'u w sekcji RODO.

Osadzanie własnych czcionek na stronach docelowych

Aby osadzić własne czcionki na stronach docelowych, przejdź do sekcji mediów i prześlij czcionkę, którą chcesz dołączyć, klikając przycisk Prześlij czcionkę.

Nalezy pamiętać, ze akceptowane są następujące formaty czcionek: woff, woff2, ttf i eot.

Wszystkie przesłane pliki czcionek są wymienione w sekcji mediów. Aby uzyć czcionki na swojej stronie docelowej, otwórz kartę czcionki, klikając ikonę pióra odpowiedniej czcionki.

W zakładce mozna wybrać pomiędzy linkiem źródłowym a linkiem url. Aby skopiować łącze czcionki, kliknij ikonę kopiowania.

Przejdź do utworzonego landing page'a, a następnie otwórz sekcję brandingu landing page'a i wstaw link w polu Custom CSS, jak pokazano na ponizszym zrzucie ekranu. Zapisz wprowadzone dane.

Wklej link do czcionki w sekcji brandingu

<style>
@font-face {
  font-family: "YOUR FONT";
  src: url'https://DOMAIN/resources/FOLDER/3.woff' format'woff2',
       url'https://DOMAIN/resources/FOLDER/2.woff' format'woff',
       url'https://DOMAIN/resources/FOLDER/1.ttf' format'truetype';
  font-style: normal;
  font-weight: normal;
}

#main, p {
  font-family: "YOUR FONT", sans-serif;
}
</style>

Zawsze testuj swój kod CSS

Przed wstawieniem kodu CSS na stronę, zawsze przetestuj go pod kątem poprawności w walidatorze CSS

Jak osadzać elementy multimedialne

Obrazy

Biblioteka mediów — Obrazy w bibliotece mediów mogą być osadzone na dowolnej stronie docelowej

W Bibliotece multimediów mozesz przesyłać obrazy lub dokumenty PDF. Po przesłaniu pliku mozesz kliknąć ikonę ołówka obrazu, a zobaczysz fragment kodu HTML, aby osadzić dokument na dowolnej stronie docelowej, np.

<img alt="qr icon" src="/img/qr-icon32.png"/>

Filmy z YouTube

Osadzone wideo z YouTube — Zasadzone wideo z YouTube na stronie docelowej

Łatwo integruj filmy z YouTube, Vimeo lub innej platformy wideo. Ponizszy fragment kodu pokazuje, jak osadzić film z YouTube za pomocą iFrame na stronie docelowej. Rozmiar wideo jest automatycznie dostosowywany do szerokości ekranu.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div>

Uwaga: Zawsze uzywaj linku do osadzenia z YouTube //youtube .com/embed/1234 i nie uzywaj linku z paska adresu //youtube.com/watch?v=1234.

Filmy Vimeo

Osadzanie ramki wideo Vimeo — Obrazy wideo Vimeo

Ponizszy fragment kodu pokazuje, jak osadzić wideo Vimeo za pomocą iFrame na stronie docelowej. Rozmiar wideo jest automatycznie dostosowywany do szerokości ekranu.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//player.vimeo.com/video/44454530"></iframe>
</div>

Filmy MP4

Mozesz takze uzyć tagu wideo HTML5, aby osadzić wideo w formacie mp4

Więcej informacji i dodatkowe parametry dotyczące osadzania wideo HTML5.

<video width="100%" controls>
  <source src="/resources/sample.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Mapy Google

Google Maps embed — Embedded Google Maps

Mozesz zintegrować responsywną ramkę iframe z lokalizacją Google Maps.

Znajdź swoją lokalizację w Google Maps i skopiuj kod HTML "Udostępnij > Osadź mapę" iframe.
Uzyj ponizszego kodu na swoich stronach docelowych, aby wyświetlić responsywną mapę Google.

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3167.607952022468!2d-122.16294098474549!3d37.44636533875898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb38fa3f36f9%3A0xf5692002b984147!2sApple%20Palo%20Alto!5e0!3m2!1sen!2ses!4v1581585855657!5m2!1sen!2ses" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Osadzanie JavaScript

Kod JavaScript mozna umieszczać w obszarach tekstowych. Upewnij się jednak, ze wstawiasz kod jako jeden wiersz. Przerwy w linii spowodują błędy JavaScript.

<script>alert'hello';</script>

Osadzanie ramek iFrame

Umieść ramki iFrame np. w sekcji "O mnie" swojej mobilnej wizytówki.

<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>

Osadzanie zewnętrznych stron internetowych

Jeśli chcesz dołączyć zewnętrzną stronę internetową do swojego niestandardowego landing page'a, musisz przeciągnąć wszystkie zewnętrzne zasoby, takie jak js, css i obrazy na swoją stronę docelową. Aby to zrobić, istnieje przydatne narzędzie na Githubie - Inliner

Formularze niestandardowe

Główna strona docelowa

Aby utworzyć formularz na stronie docelowej i wysłać dane na nasz serwer, mozesz utworzyć stronę docelową ołowiu.

Formularz rejestracji leada — Niestandardowy formularz do zbierania danych

Pobieranie danych formularza

Następnie mozesz zapytać o przesłane dane formularza dla strony docelowej zbiorczo w pozycji menu Leads lub za pośrednictwem interfejsu API.

Pobieranie potencjalnych klientów — figzoom

Jak utworzyć niestandardowy formularz za pomocą HTML i JavaScript

Mozesz jednak równiez utworzyć formularz i łatwo wysłać dane formularza na nasz serwer, uzywając ponizszego fragmentu na niestandardowej stronie docelowej.

<script>
    $function {
        $'#submit'.on'click', function {
            $.post"/api/post", $"form".serialize.done
                functiondata {
                    alert'Thank you for registration!';
                };
            return false;
        };
    };
</script>
<form>
    <label>Your Name</label>
    <input name="name">
    <label>Your E-Mail</label>
    <input name="email">    
    <a href="#" id="submit">Register</a>
</form>

Opcjonalne pola formularza

<input name="notify" type="hidden" value="1">
<input name="webhook" type="hidden" value="https://yourwebsite.com/api/webhook/lead">
<input name="rewardurl" type="hidden" value="https://yourwebsite.com/resources/test.pdf">

Za pomocą pola notify mozna włączyć lub wyłączyć powiadomienia e-mail o wygenerowaniu nowego potencjalnego klienta.
Za pomocą pola webhook mozna ustawić zewnętrzny adres URL, na który zostanie przesłany nowy wygenerowany lead.
Za pomocą pola rewardurl mozna ustawić zewnętrzny adres URL, który uzytkownik otrzyma na e-mail po zasubskrybowaniu.

<input name="lng" type="hidden">
<input name="lat" type="hidden">
<input name="accuracy" type="hidden">

Pola lng, lat i accuracy mozna wypełnić następującym fragmentem JS, jeśli funkcja GPS jest aktywna.

<script>
    $function {
        const urlParams = new URLSearchParamswindow.location.search;
        $'input[name=lng]'.valurlParams.get'lng';
        $'input[name=lat]'.valurlParams.get'lat';
        $'input[name=accuracy]'.valurlParams.get'accuracy';
    };
</script>

Call-2-Actions

Dodanie przycisku call-2-action do strony docelowej

Mozesz dodać przyciski call-2-action na dowolnym landing page'u bezpośrednio z edytora landing page'y, klikając ikonę Dodaj. Przycisk call-2-action moze zawierać link do strony internetowej, dokumentu PDF, inicjować połączenie lub wysyłać wiadomość e-mail. Mozesz dowiedzieć się więcej w naszym poradniku Czym jest przycisk call-2-action C2A.