Czego się dowiesz?

Dowiedz się, jak dodać obraz wysokiej jakości po lewej lub prawej stronie formularza rejestracyjnego, aby zapewnić atrakcyjne doświadczenie rejestracji dopasowane do projektu Twojej marki.

An example form with a left side image.
An example form with a left side image.

Kilka słów na początek

Obrazy boczne pojawiają się po lewej lub prawej stronie treści formularza. Korzystając z obrazu w formularzu, warto pamiętać o kilku rzeczach:

  • Dostępnych jest wiele typów formatów obrazów do wyboru. Pliki JPEG zapewniają dobrą równowagę jakości i rozmiaru w przypadku kolorowych obrazów, a pliki PNG pozwalają zachować ostrość obrazów z przezroczystością lub logo.
  • Aby uzyskać najlepsze rezultaty, pamiętaj o użyciu obrazu o odpowiednio wysokiej jakości.
    • Aby zachować równowagę między jakością a czasem wczytywania, staraj się, aby obrazy o pełnej szerokości miały szerokość od 600 do 1000 px i wysokość mniejszą niż 2000 px. Obrazy o mniejszej niż pełna szerokości mogą mieć szerokość mniejszą niż 600 px
  • Jak w przypadku wszystkich obrazów wyświetlanych w internecie, większy rozmiar pliku powoduje wolniejsze ładowanie.
    • Dąż do rozmiaru pliku 50–100 KB w przypadku obrazów bocznych i mniej niż 200 KB w przypadku obrazów tła, aby obraz wyglądał na wysokiej jakości bez spowalniania witryny.
  • Dodaj tekst alternatywny do obrazu, aby formularze były dostępne dla wszystkich osób odwiedzających witrynę.

Ponieważ formularze rejestracyjne są renderowane w przeglądarkach (w przeciwieństwie do e-maili, które są renderowane przez ESP), jest mniej zaleceń dotyczących ich formatowania i dostosowywania. Przeglądarki mogą renderować obrazy wszystkich typów i rozmiarów, więc ogólnie trzymaj się obrazów w wysokiej rozdzielczości, rozsądnych rozmiarów plików i testuj wygląd na każdym typie urządzenia.

Dodaj obraz boczny do formularza

Aby dodać obraz po dowolnej stronie treści formularza rejestracyjnego:

  1. Przejdź do karty Formularze rejestracyjne.
  2. Obok formularza kliknij 3 kropki > Edytuj formularz.

Jeśli formularz został utworzony przed lipcem 2021 r. i używa obrazu tła wyrównanego do prawej lub lewej strony jako obrazu bocznego, usuń go przed użyciem funkcji obrazu bocznego. Aby to zrobić, przejdź do sekcji Form Background w sekcji Styles i usuń obraz tła. Następnie przewiń w dół do Form Styles i usuń nadmiarowe wypełnienie (padding) po prawej lub lewej stronie.

  1. W sekcji Style przejdź do sekcji Obraz boczny i wybierz stronę, po której chcesz dodać obraz (lewa lub prawa).
The Side Image section of the Styles tab showing an example form's side image set to display on the Right.
The Side Image section of the Styles tab showing an example form's side image set to display on the Right.
  1. Kliknij pusty symbol zastępczy obrazu w podglądzie formularza.
  2. Kliknij Przeglądaj bibliotekę obrazów, aby dodać obraz z biblioteki obrazów Klaviyo, przesłać obraz lub zaimportować nowy obraz z adresu URL.
The Upload an image menu that shows when you click the empty image placeholder where you can click Browse Image Library.
The Upload an image menu that shows when you click the empty image placeholder where you can click Browse Image Library.

Aby uzyskać najlepsze wyniki, używaj obrazu o dość wysokiej jakości. Jak w przypadku wszystkich obrazów wyświetlanych w internecie, większe rozmiary plików powodują wolniejsze wczytywanie. Dąż do rozmiaru pliku 50–100 KB w przypadku obrazów bocznych, aby obraz wyglądał na wysokiej jakości bez spowalniania witryny.

Opcje wyświetlania obrazu bocznego

Style formularza

Domyślnie formularze z obrazami po bokach mają szerokość 780 px, a szerokość obrazu bocznego jest ustawiona na Średnia. Sekcje Szerokość i Minimalna wysokość umożliwiają dostosowanie rozmiaru formularza. Jeśli chcesz, aby obraz boczny zajmował więcej lub mniej miejsca w formularzu, dostosuj rozmiar w sekcji Obraz boczny (np. mały, średni, duży, niestandardowy).

Boczny obraz w formularzu będzie domyślnie ukryty na urządzeniach mobilnych, aby zoptymalizować korzystanie na urządzeniach mobilnych, ponieważ ilość miejsca na ekranie jest na nich ograniczona. Jeśli chcesz, aby boczny obraz był wyświetlany na wszystkich urządzeniach, kliknij obraz w podglądzie, a następnie przewiń do Pokaż na i wybierz Wszystkie urządzenia.

The Show on section of the Styles tab with an example form's side image selected to show on All Devices.
The Show on section of the Styles tab with an example form's side image selected to show on All Devices.

Style obrazów z boku

Użyj sekcji Style w ustawieniach Obraz boczny, aby wybrać sposób wyświetlania obrazu.

The Styles section of the Side Image settings where you can add alt text, set Image Position, choose alignment, and set a background color.
The Styles section of the Side Image settings where you can add alt text, set Image Position, choose alignment, and set a background color.
  • Tekst alternatywny
    Dodaj tekst alternatywny do obrazu, aby był dostępny dla wszystkich odwiedzających Twoją witrynę.
  • Pozycja obrazu
    Określa, jak obraz będzie dopasowany w obszarze obrazu bocznego. Wybierz jedną z poniższych opcji:
    • Zawieraj
      Cały obraz pojawi się w obrębie sekcji i nie zostanie w ogóle przycięty. Jeśli obraz nie pasuje dokładnie do obszaru obrazu, kolor tła sekcji wypełni wszelkie niepokryte obszary.
    • Okładka
      Obraz całkowicie wypełni boczny obszar obrazu. Niektóre części obrazu mogą zostać przycięte, aby obraz wypełniał przestrzeń.
    • Niestandardowe
      Wybierz własną szerokość obrazu.
  • Wyrównanie w poziomie i Wyrównanie w pionie
    Dzięki nim możesz wybrać, czy obraz jest wyśrodkowany, czy wyrównany do góry, dołu, lewej lub prawej strony obszaru obrazu.
  • Kolor tła
    Jeśli w formularzu używasz mniejszego obrazu, ustaw kolor tła, aby wypełnić puste miejsce za nim.
Czy ten artykuł był pomocny?
Ten formularz służy tylko do przesyłania opinii na temat artykułów. Dowiedz się, jak skontaktować się z zespołem ds. pomocy.

Dowiedz się od Klaviyo więcej

Społeczność
Nawiązuj kontakty z osobami na podobnych stanowiskach, partnerami oraz ekspertami i ekspertkami Klaviyo – inspirujcie się nawzajem, wymieniajcie spostrzeżeniami i pomagajcie szukać odpowiedzi na nurtujące Was pytania.
Partnerzy
Zatrudnij certyfikowanego eksperta Klaviyo, który pomoże Ci w konkretnym zadaniu lub w ciągłym zarządzaniu marketingiem.
Pomoc

Uzyskaj wsparcie za pośrednictwem konta.

E-mail do zespołu ds. pomocy (konta w bezpłatnym okresie próbnym oraz konta płatne) Całodobowa dostępność

Czat/wirtualna pomoc
Dostępność różni się w–zależności od lokalizacji i typu planu.