Używanie w formularzach rejestracyjnych niestandardowych czcionek
Czego się dowiesz?
Dowiedz się, jak projektować formularze rejestracyjne przy użyciu niestandardowych czcionek, aby Twoi klienci mieli spójne doświadczenie marki i odczuwali konsekwencję z resztą Twojej witryny.
Stworzenie pięknie zaprojektowanego formularza rejestracyjnego ma kluczowe znaczenie, aby zachęcić ich do realizacji celu formularza. Jeśli Twoja marka używa czcionek, które nie są dostępne natywnie w edytorze formularzy rejestracyjnych, dodanie tych niestandardowych czcionek to łatwy sposób, aby formularze wyglądały spójnie z resztą Twojej witryny. Po dodaniu czcionek możesz używać czcionki, aby dostosowywać formularze rejestracyjne według własnych potrzeb.
Kluczowe terminy
- Czcionka niestandardowa
Dowolna czcionka, która nie jest domyślnie dostępna w edytorze Klaviyo. Obejmuje to:- Google Fonts
- Czcionki Adobe
- Zaimportowane czcionki
- Czcionka bezpieczna dla stron internetowych
Czcionka, która jest przechowywana lokalnie na większości urządzeń, a zatem do jej wyświetlania nie trzeba jej wczytywać z zewnętrznego źródła. - Czcionka zapasowa
Czcionka bezpieczna dla sieci, używana, jeśli strona nie może załadować czcionki podstawowej.
Dodawanie niestandardowych czcionek do konta
W menu głównym po lewej stronie przejdź do Treść > Obrazy i marka. Następnie kliknij kartę Czcionki. Możesz dodać czcionkę Google, czcionkę Adobe lub czcionkę importowaną.
Jeśli dodajesz do Klaviyo niestandardową czcionkę, która jest już używana w Twojej witrynie, prześlij dokładnie ten styl czcionki (np. lekki, pogrubiony lub kursywa) oraz grubość (np. 400), z których obecnie korzysta Twoja witryna. Jeśli prześlesz czcionkę i wybierzesz styl lub grubość, które nieco się różnią, style wybrane w Klaviyo mogą zastąpić niektóre z istniejących stylów czcionek w Twojej witrynie.
Dodawanie czcionki Google
Aby dodać czcionkę Google:
- Wybierz listę rozwijaną Nazwa czcionki, aby zobaczyć listę wszystkich dostępnych czcionek Google, z wyjątkiem czcionek, które zostały już załadowane na koncie.
- Wybierz żądaną czcionkę. Po wybraniu zobaczysz podgląd czcionki pod listą rozwijaną, a także liczbę dostępnych wariantów (np. pogrubienie, kursywa itp.).
- Jeśli chcesz dodać więcej niż 1 wariant, kliknij strzałkę obok liczby dostępnych wariantów i wybierz czcionki, które chcesz dodać.
- Wybierz Czcionkę zastępczą.
- Kliknij Dodaj czcionkę. Dodana czcionka będzie teraz wyświetlana w sekcji Twoje czcionki na dole strony.
W sekcji Twoje czcionki zobaczysz czcionki dodane do konta. Aby edytować lub usunąć dowolną czcionkę w tej sekcji, wybierz trzy kropki przy czcionce.
W związku z RODO pamiętaj, że Google Fonts jest hostowane przez Google. Jeśli umieścisz w swojej bibliotece czcionkę Google Font, oznacza to, że korzystasz z tej usługi Google. Klaviyo oferuje wybór niestandardowych czcionek, których używamy w naszych szablonach formularza rejestracyjnego. Czcionki te można łatwo zaimportować i używać. Wyświetl listę fontów hostowanych przez Klaviyo.
Dodawanie czcionki Adobe
Aby korzystać z czcionek Adobe, musisz mieć konto Adobe.
Aby dodać czcionkę Adobe:
- Przejdź do Adobe Fonts.
- Wyszukaj link do czcionki Adobe, a następnie wybierz czcionkę.
- Obok nazwy czcionki kliknij ikonę kodu.
- W razie potrzeby wpisz nową nazwę projektu, a następnie kliknij Zapisz.
- W następnym oknie modalnym skopiuj adres URL https://use.typekit.net dla czcionki, którą chcesz dodać. Nie uwzględniaj pliku .css jako część adresu URL podczas jego kopiowania.
- Wróć do Klaviyo i wklej adres URL w polu Adres CSS.
- Wybierz Kontynuuj, a następnie wybierz czcionkę zapasową dla czcionki, którą chcesz przesłać. Pamiętaj, że jeśli czcionka jest już dostępna na Twoim koncie, obok czcionki wyświetli się zielony znacznik wyboru, a także jej istniejąca czcionka zapasowa.
- Wybierz Dodaj czcionkę.
Po dodaniu czcionki będzie ona widoczna w sekcji Twoje czcionki na dole strony. Aby edytować dowolną czcionkę w tej sekcji, wybierz trzy kropki przy czcionce.
Dodawanie zaimportowanej czcionki
Jeśli kupiono lub pobrano niestandardową czcionkę, która nie jest hostowana przez źródło zewnętrzne, nadal można jej używać w formularzu Klaviyo. Najpierw umieść pliki czcionek na serwerze w miejscu, które będzie dostępne dla Klaviyo (na przykład w zasobach Twojej witryny lub na platformie hostującej czcionki). Pamiętaj o włączeniu mechanizmu bezpieczeństwa Cross-Origin Resource Sharing (CORS), ustawiając Access-Control-Allow-Origin header na *, aby czcionka była dostępna na urządzeniach Twoich odbiorców.
Aby dodać zaimportowaną czcionkę:
- Nazwij swoją czcionkę.
- Określ grubość czcionki, styl oraz źródłowy adres URL. Źródłowy adres URL musi być prawidłowym adresem URL i kończyć się na WOFF, WOFF2, TTF, EOT lub SVG.
- Opcjonalnie: aby dodać dodatkowe warianty, wybierz Dodaj wariant czcionki, a następnie powtórz krok 2 dla tego wariantu.
- Wybierz Dodaj czcionkę , aby dodać tę czcionkę do sekcji Twoje czcionki .
W sekcji Twoje czcionki będzie można zobaczyć czcionki, które zostały zaimportowane do konta. Możesz też usunąć lub edytować czcionki, wybierając 3 kropki przy czcionce.
Edytuj czcionkę
Aby edytować istniejącą czcionkę niestandardową:
- Przejdź do Treść > Obrazy i branding > Czcionki.
- W sekcji Twoje czcionki na dole strony znajdź czcionkę, którą chcesz edytować.
- Na karcie tej czcionki kliknij 3 kropki w górnym rogu.
- Wybierz Edytuj. W tym miejscu możesz:
- Edytuj zastępczą czcionkę dla dowolnej czcionki niestandardowej.
- Tylko w przypadku czcionek hostowanych przez Google i Klaviyo: edytuj lub dodaj wybrane warianty, wybierając Liczba wariantów czcionki, aby rozwinąć listę, a następnie wybierz czcionki, które chcesz dodać.
Po przesłaniu czcionki Adobe nie można dodać do niej wariantów, ponieważ warianty są wbudowane w łącze Typekit. Aby dodać warianty do czcionki Adobe, należy usunąć istniejącą czcionkę i dodać ją ponownie, używając innego łącza Typekit, które zawiera wszystkie warianty, które chcesz uwzględnić.
- Gdy skończysz edytować czcionkę, wybierz Zaktualizuj czcionkę.
Usuwanie czcionki
Aby usunąć czcionkę:
- Przejdź do sekcji Twoje czcionki .
- Przy czcionce, którą chcesz usunąć, kliknij 3 kropki, a następnie wybierz Usuń. Jeśli zdecydujesz się usunąć czcionkę, pojawi się okno modalne z powiadomieniem, że jeśli czcionka jest używana w jakichkolwiek formularzach, po usunięciu dodanej czcionki będzie wyświetlana czcionka zastępcza.
- Wybierz Usuń.
Po usunięciu czcionki niestandardowej wszystkie formularze w Klaviyo, które obecnie używają tej czcionki niestandardowej, natychmiast powrócą do używania czcionki zastępczej. Jeśli dodasz czcionkę ponownie, te formularze zaczną jej znów używać.
Używanie niestandardowych czcionek w kreatorze formularza rejestracyjnego
Aby użyć niestandardowej czcionki w formularzu rejestracyjnym, po prostu edytuj tekst w podglądzie formularza:
- Przejdź do karty Formularze rejestracyjne.
- Znajdź formularz, który chcesz edytować, i kliknij 3 kropki obok niego, a następnie wybierz Edytuj formularz.
- W podglądzie formularza wybierz tekst, który chcesz edytować.
- W menu Tekst po prawej stronie zaznacz tekst.
- Użyj listy rozwijanej czcionek u góry, aby wybrać niestandardową czcionkę. Pamiętaj, że czcionki z sekcji Twoje czcionki na koncie będą widoczne na górze listy.
Podczas edycji czcionka niestandardowa będzie widoczna w obszarze roboczym (np. w podglądzie edycji), ale nie w panelu po lewej stronie. Tam zamiast czcionki niestandardowej wyświetlana będzie czcionka zastępcza.
- Gdy zmiany będą gotowe, kliknij Opublikuj, aby je opublikować.
Wpływ na czcionkę strony przez metrykę Klaviyo.js
Klaviyo aktywne śledzenie Aktywność na stronie (Klaviyo.js), musi zostać zainstalowane ręcznie lub za pośrednictwem integracji e-commerce, aby można było opublikować formularze rejestracyjne Klaviyo w witrynie internetowej. Jeśli załadowane zostały tylko niektóre warianty czcionek, Klaviyo.js ładuje pozostałe warianty do biblioteki, gdy jest wstrzykiwany do Twojej witryny. Z tego powodu czcionki w Twojej witrynie mogą zostać w tym procesie nieznacznie zmodyfikowane, na przykład może się zmienić grubość nagłówka witryny.
Problem ze zmianami wprowadzanymi do czcionek przez Klaviyo.js można rozwiązać na dwa sposoby:
- Usuń odpowiednie czcionki z biblioteki czcionek Klaviyo.
- zaktualizować CSS w nagłówku witryny, aby nie był nadpisywany podczas ładowania dodatkowych wariantów przez Klaviyo.js.
Ponieważ ta opcja wymaga dogłębnej znajomości CSS, niezbędna może okazać się pomocy programisty bądź programistki. Klaviyo nie oferuje wsparcia w zmianie CSS strony. Mamy jednak rozległą sieć partnerów.
Dodatkowe źródła
- How to host a custom font on your site
Learn how to upload a font, meaning a font that is not hosted by Google or Adobe, to your ecommerce site to import in your Klaviyo sign-up forms. If you want to use an imported font in your sign-up form, there are 2 options:
- Creating an effective acquisition strategy using sign-up forms