Wykorzystanie obrazów w treści HubSpot

Obrazy można dodawać do modułów tekstu sformatowanego lub modułów graficznych w treści 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.

Uwaga: moduły tekstowe i niestandardowe moduły tekstu sformatowanego w edytorze wykorzystującym przeciąganie i upuszczanie nie mogą zawierać obrazów.

Dodaj obrazy

• Przejdź do swojej zawartości:

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

Uwaga: do reklam można dodawać tylko plikigraficzne .png, .ico, .bmp, .jpg i .gif

• Wstaw obraz:
  • Aby dodać obraz do modułu tekstu sformatowanego, kliknij moduł tekstu sformatowanego, a następnie kliknijikonę obrazu insertImage ici na pasku narzędzi tekstu sformatowanego.
  • Aby dodać obraz do modułu obrazu, kliknij moduł obrazu, a następnie kliknij przycisk Zastąp 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 projektowania Canva, kliknij Zaprojektuj z 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 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żna edytować jego rozmiar, dodać tekst alternatywny, dodać link lub ustawić sposób jego ładowania.

Edycja obrazu w module tekstu sformatowanego

• Przejdź do swojej zawartości:

  • Strony w witrynie internetowej:
  • Strony docelowe:
  • Blog:
  • Baza wiedzy:
  • Email:
• Kliknij nazwę zawartości.
• W edytorze zawartoś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ć odstępy 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 kliknijikonę 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ć link do obrazu, kliknijmenu rozwijane Link do w wyskakującym pytaniu i wybierz kategorię linku. W polu poniżej wprowadź miejsce docelowe łącza. Dowiedz się więcej o różnych typach linków.

• • W polu Tekst alternatywny wprowadź tekst, aby opisać wyszukiwarkom i czytnikom ekranu, czym jest obraz. Tekst alternatywny można również dodać do obrazów w narzędziu plików. Dodanie tekstu alternatywnego poprawi dostępność i SEO witryny. Więcej informacji na temat dostępności stron internetowych można znaleźć w naszej dokumentacji dla deweloperó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ć sposób ł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 : sposób ładowania obrazu zależy od ustawień przeglądarki użytkownika.
    • Eager : 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.
    • Nie obserwujący: 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 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 w witrynie internetowej:
  • 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 opisujący obraz dla wyszukiwarek i czytników ekranu. Tekst alternatywny można również dodać do obrazów w narzędziu Pliki. Dodanie tekstu alternatywnego poprawi dostępność i SEO witryny. Więcej informacji na temat dostępności stron internetowych można znaleźć w naszej dokumentacji dla deweloperó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 dopasuj: 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.

• • Lazy: obraz załaduje się 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.

• • Eager: 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ć użytkownika do docelowego adresu URL w nowej karcie przeglądarki.
• Aby wprowadzić zmiany, kliknij przycisk Opublikuj lub Aktualizuj w prawym górnym rogu