Używaj obrazów w treściach HubSpot

Obrazy można dodawać do modułów tekstu sformatowanego lub modułów graficznych w treściach HubSpot. Moduły tekstowe obsługują wiele rodzajów treści (obrazy, tekst, wezwania do działania itp.), podczas gdy każdy moduł graficzny może zawierać tylko jeden obraz.

Dodawanie obrazów

• Przejdź do treści:

  • Strony witryny:
  • Strony docelowe:
  • Blog:
  • Baza wiedzy:
  • Email:
• Kliknij nazwę swojej zawartości.

• Aby dodać obraz do wiadomości e-mail:
  
  • Moduł tekstu sformatowanego: w przypadku wiadomości e-mail korzystających z klasycznego edytora kliknijikonę obrazu insertImage ici na pasku narzędzi tekstu sformatowanego.Moduły tekstowe i niestandardowe moduły tekstu sformatowanego w edytorze wiadomości e-mail typu "przeciągnij i upuść " nie mogą zawierać obrazów.
  • Moduł obrazu: w przypadku wiadomości e-mail korzystających z edytora przeciągnij i upuść kliknij moduł obrazu, a następnie kliknij przycisk Zamień w edytorze paska bocznego nad obrazem zastępczym.

Uwaga: do wiadomości marketingowych można dodawać tylko pliki graficzne .png, .ico, .bmp, .jpg i .gif.

• Aby dodać obraz na stronie, w poście lub artykule:
  • Moduł tekstu sform atowanego: kliknij moduł tekstu sformatowanego, a następnie kliknijikonę obrazu insertImage ici na pasku narzędzi tekstu sformatowanego.
  • Moduł obrazu: kliknij moduł obrazu, a następnie kliknij opcję Zamień w edytorze paska bocznego nad obrazem zastępczym.

• Wybierz obraz:
  • Aby wstawić istniejący obraz, kliknij obraz w prawym panelu.

• • Aby przesłać nowy obraz z komputera lub za pośrednictwem adresu URL pliku, kliknij opcję Dodaj obraz w prawym panelu. Aby utworzyć nowy obraz za pomocą narzędzi do edycji Canva, kliknij opcję Projektuj za pomocą Canva. Następnie kliknij obraz , aby go wstawić.
• Przed wstawieniem obrazu można go zoptymalizować pod kątem czasu ładowania lub rozdzielczości. W prawym panelu najedź kursorem na obraz i kliknij opcję Szczegóły.
• Następnie kliknijmenu rozwijane Optymalizacja obrazu i wybierz opcję optymalizacji:
  • Wysoka: obraz zostanie załadowany w wyższej rozdzielczości, ale z wydłużonym czasem ładowania.
  • Domyślna: obraz zostanie zoptymalizowany zarówno pod kątem rozdzielczości, jak i czasu ładowania.
  • Niska: obraz zostanie załadowany w niższej rozdzielczości, ale ze skróconym czasem ładowania. Więcej informacji na temat optymalizacji stron pod kątem czasu ładowania można znaleźć w naszej dokumentacji dla deweloperów.
    

Edycja obrazów

Po dodaniu obrazu do treści możesz edytować jego rozmiar, dodać tekst alternatywny, dodać link lub ustawić sposób ładowania.

Edycja obrazu w module tekstu sformatowanego

• Przejdź do treści:

  • Strony witryny:
  • Strony docelowe:
  • Blog:
  • Baza wiedzy:
  • Email:
• Kliknij nazwę zawartości.
• W edytorze treści kliknij obraz, aby wyświetlić pasek narzędzi edycji obrazu.
• Edytuj obraz:
  • Aby dostosować sposób zawijania tekstu wokół obrazu, kliknij ikony wyrównania inline.

• • Aby dostosować rozmiar obrazu, kliknij strzałki szerokości i wysokości lub wprowadź wartość w pikselach.
  • Aby dostosować wypełnienie wokół obrazu, kliknij menu rozwijane Odstępy , a następnie wprowadź wartości w pikselach wokół krawędzi ikony obrazu.
• Aby usunąć obraz z modułu tekstu sformatowanego, kliknij obraz, a następnie kliknijikonę kosza delete .

• Aby zastąpić obraz w module tekstu sformatowanego, kliknij obraz, a następnie kliknij ikonęzastępowania replace repl i dodaj nowy obraz.

• Aby połączyć obraz, dodać tekst alternatywny lub ustawić sposób ładowania, kliknij obraz , a następnie kliknij ikonę ołówka edit:.
  • Aby dodać łącze do obrazu, kliknijmenu rozwijane Link do w wyskakującym okienku i wybierz kategorię łącza. W polu poniżej wprowadź miejsce docelowe łącza. Dowiedz się więcej o różnych typach łączy.

• • W polu Tekst alternatywny wprowadź tekst, aby opisać wyszukiwarkom i czytnikom ekranu, czym jest obraz. Możesz również dodać tekst alternatywny do obrazów w narzędziu plików. Dodanie tekstu alternatywnego poprawi dostępność i SEO Twojej witryny. Dowiedz się więcej o dostępności witryny w naszej dokumentacji dla programistów.

Uwaga: dodanie tekstu alternatywnego do obrazu nie powoduje dodania tekstu tytułu. Tekst alternatywny wpływa na rankingi wyszukiwarek i dostępność, podczas gdy tekst tytułu pojawia się, gdy użytkownik najedzie kursorem na obraz.

• Aby ustawić sposób ładowania obrazu i dostosować typ łącza obrazu dla wyszukiwarek, kliknij przycisk Zaawansowane.
  • Aby ustawić zachowanie ładowania obrazu, kliknij menu rozwijane Ładowanie obrazu i wybierz opcję:
    • Leniwy: obraz zostanie załadowany tylko wtedy, gdy odwiedzający dotrze do tej części strony. Skraca to czas ładowania strony i poprawia SEO. Domyślnie obrazy będą ładowane przy tym ustawieniu.

• • • Domyślna przeglądarka: zachowanie podczas ładowania obrazu zależy od ustawień przeglądarki odwiedzającego.
    • Chętnie : obraz zostanie załadowany natychmiast po załadowaniu strony.

• • Aby dostosować typ łącza obrazu, w sekcji Typ łącza wybierz jeden lub więcej atrybutów:
    
    • Zwykły : ten link nie jest sponsorowany.
    • No follow: ten link nie jest powiązany z Twoją witryną.
    • Sponsorowany : ten link jest linkiem sponsorowanym lub reklamą.
    • Treść generowana przez użytkownika: ten link prowadzi do treści generowanej przez użytkownika, takiej jak komentarz na blogu lub dyskusja na forum.
• Kliknij przycisk Zastosuj, aby zastosować zmiany do obrazu.

• Aby wprowadzić zmiany na żywo, kliknij Publikuj lub Aktualizuj w prawym górnym rogu, a następnie kliknij Publikuj lub Aktualizuj w oknie dialogowym.

Edycja obrazu w module obrazu

• Przejdź do swojej zawartości:

  • Strony witryny:
  • Strony docelowe:
  • Blog:
  • Email:
• Kliknij nazwę swojej zawartości.
• W edytorze treści kliknij moduł obrazu.
• Aby usunąć bieżący obraz, kliknij przycisk Usuń w sekcji Obraz w edytorze paska bocznego. Spowoduje to usunięcie bieżącego obrazu z modułu obrazu, ale nie usunie modułu ze strony.

• Aby zastąpić bieżący obraz, kliknij przycisk Zastąp w sekcji Obraz w edytorze paska bocznego, a następnie dodaj nowy obraz.
• W polu Tekst alternatywny wprowadź tekst, aby opisać wyszukiwarkom i czytnikom ekranu, czym jest obraz. Możesz również dodać tekst alternatywny do obrazów w narzędziu plików. Dodanie tekstu alternatywnego poprawi dostępność i SEO Twojej witryny. Dowiedz się więcej o dostępności witryny w naszej dokumentacji dla programistów.

Uwaga: dodanie tekstu alternatywnego do obrazu nie powoduje dodania tekstu tytułu. Tekst alternatywny wpływa na rankingi wyszukiwarek i dostępność, podczas gdy tekst tytułu pojawia się, gdy użytkownik najedzie kursorem na obraz.

• Aby ustawić rozmiar obrazu na różnych urządzeniach, kliknij menu rozwijane Rozmiar i wybierz opcję:
  
  • Automatycznie dostosuj: obraz będzie skalowany w celu dopasowania do urządzenia, na którym jest wyświetlany.
  • Dokładna wysokość i szerokość: obraz będzie wyświetlany w tym samym rozmiarze na wszystkich urządzeniach.
• Aby ustawić limit rozmiaru obrazu, kliknij menu rozwijane Maksymalny rozmiar i wybierzopcję :
  • Oryginalny rozmiar obrazu: obraz nigdy nie będzie wyświetlany w rozmiarze większym niż oryginalny.
  • Niestandardowy: obraz nigdy nie będzie wyświetlany w rozmiarze większym niż określona szerokość i wysokość ustawiona w polach szerokości i wysokości.
• Aby ustawić sposób ładowania obrazu, kliknij menu rozwijane Ładowanie obrazu i wybierz opcję:
  • Domyślna przeglądarka : sposób ładowania obrazu zależy od ustawień przeglądarki użytkownika.

• • Leniwy : obraz zostanie załadowany tylko wtedy, gdy odwiedzający dotrze do tej części strony. Skraca to czas ładowania strony i poprawia SEO. Domyślnie obrazy będą ładowane z tym ustawieniem.

• • Chętny: obraz ładuje się tak szybko, jak to możliwe.
• Aby dodać link do obrazu, wprowadź docelowy adres URL w polu Link (opcjonalnie). Zaznacz pole wyboru Otwórz link w nowej karcie , aby przekierować odwiedzającego do docelowego adresu URL w nowej karcie przeglądarki.
• Aby wprowadzić zmiany, kliknij przycisk Publikuj lub Aktualizuj w prawym górnym rogu.