HubSpot Baza wiedzy

Edit the size of a CTA

Autor: HubSpot Support | Oct 18, 2021 3:29:35 PM

Dostosuj rozmiar swojego wezwania do działania (legacy) za pomocą wbudowanych opcji rozmiaru i niestandardowego CSS. Podczas przesyłania obrazu do obrazkowego wezwania do działania warto wziąć pod uwagę optymalizację siatkówki.

Aby jeszcze bardziej dostosować wezwanie do działania, dowiedz się, jak dodać niestandardowe style do wezwania do działania (starszego) za pomocą CSS. Jeśli dodajesz wezwanie do działania do wiadomości e-mail lub szablonu, dowiedz się, jak wyśrodkować wezwanie do działania (starsze wersje).

Edytowanie rozmiaru wezwania do działania (starsze wersje)

Możesz ręcznie dostosować rozmiar wezwania do działania lub użyć niestandardowego kodu CSS, aby automatycznie wypełnić szerokość kontenera lub modułu wezwania do działania. Jeśli osadzasz obrazkowe wezwanie do działania w witrynie innej niż HubSpot, może być konieczne zastosowanie dodatkowych deklaracji CSS (takich jak width: 100%;) w arkuszu stylów, aby obrazkowe wezwanie do działania było responsywne.

Aby edytować rozmiar przycisku CTA:
  • .
  • W lewym górnym rogu kliknij menu rozwijane i wybierz CTA (Legacy).
  • Najedź kursorem na CTA i kliknij Akcje > Edytuj.
  • W wysuwanym panelu kliknij Opcje zaawansowane.
  • Aby ręcznie zmienić rozmiar niestandardowego wezwania do działania:
    • Usuń zaznaczenie pola wyboru Dopasuj do tekstu. Spowoduje to usunięcie zastosowanej automatycznej zmiany rozmiaru.
    • W sekcji Wypełnienie przycisku wprowadź wartości rozmiaru dla pól szerokości i wysokości przycisku.
    • Kliknij przycisk Dalej >.
    • Kliknij Zapisz. Następnie kliknij przycisk Zakończ.
  • Aby niestandardowe wezwanie do działania wypełniało całą szerokość kontenera lub modułu:
    • Wyczyść pole wyboru Rozmiar automatycznie .
    • W polu Niestandardowy CSS wprowadź swój niestandardowy CSS.
    • Ustaw szerokość na width: 100%;
    • Kliknij przycisk Dalej >.
    • Kliknij Zapisz. Następnie kliknij przycisk Zakończ.

Co to jest optymalizacja siatkówki?

Optymalizacja siatkówki sprawia, że obraz wezwania do działania jest bardziej wyraźny, gdy jest wyświetlany na stronach witryny i w wiadomościach e-mail, jeśli odbiorcy wyświetlają wezwanie do działania w nowoczesnych wersjach poczty Apple Mail i iOS; nie jest to obsługiwane przez Outlook lub usługi poczty internetowej, takie jak Gmail.

Optymalizacja siatkówki jest obsługiwana po przesłaniu obrazu o rozmiarze co najmniej dwa razy większym niż wymagany dla wezwania do działania, podobnie jak obsługa siatkówki działa dla wszystkich obrazów w Internecie. Należy również pamiętać o następujących kwestiach:

  • Jeśli tworzysz wezwanie do działania, które będzie miało rozmiar 400px na 100px, przesłany obraz musiałby mieć rozmiar 800px na 200px, aby obsługiwać wyświetlanie o gęstości pikseli @2x.
  • Wezwania do działania obsługują dodawanie do wersji 4x. Na przykład, jeśli tworzysz wezwanie do działania o wymiarach 400 na 100 pikseli, możesz przesłać obraz o wymiarach 1600 na 400 pikseli.
  • CTA zostanie automatycznie wyrenderowane na Twojej stronie internetowej z atrybutem srcset obsługującym wersję 1x, 2x, 3x i 4x, jeśli jest dostępna.
  • Jeśli obraz zostanie przesłany w rozmiarze, w którym będzie renderowane wezwanie do działania, nie będzie on obsługiwał siatkówki. Na przykład, jeśli obraz 400px na 100px zostanie przesłany dla CTA 400px na 100px