Wykorzystanie obrazów w treściach HubSpot

Możesz dodać obrazy do modułów bogatego tekstu lub modułów obrazu w treści HubSpot. Moduły bogatego tekstu obsługują wiele typów treści (obrazy, tekst, CTA itp.), Podczas gdy każdy moduł obrazu może zawierać tylko jeden obraz.

Uwaga: moduły tekstowe i niestandardowe moduły bogatego tekstu w edytorze wiadomości e-mail typu "przeciągnij i upuść " nie mogą zawierać obrazów.

Dodawanie obrazków

• Przejdź do swojej zawartości:

  • Strony witryny: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
  • Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
  • Blog: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
  • Baza wiedzy: W koncie HubSpot przejdź do Obsługa klienta > Baza wiedzy.

• • Email: W koncie HubSpot przejdź do Marketing > E-mail.
• Najedź na swoją zawartość i kliknij przycisk Edytuj.

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

• Wstaw obraz:
  • Aby dodać obraz do modułu rich text, kliknij moduł rich text, a następnie kliknijikonę insertImage iciimage na pasku narzędzi rich text.
  • Aby dodać obraz do modułu obrazu, kliknij moduł obrazu, a następnie kliknij przycisk 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 poprzez URL pliku, kliknij Dodaj obraz w prawym panelu. Aby utworzyć nowy obraz za pomocą. Narzędzia do edycji w Canva, kliknij Design with Canva. Następnie kliknij obraz , aby go wstawić.

Przed wstawieniem obrazu możesz zoptymalizować obraz pod kątem czasu ładowania lub rozdzielczości, klikając Szczegóły na obrazie w prawym panelu. Następnie kliknijmenu rozwijane Optymalizacja obrazu i wybierz opcję optymalizacji:

• • Wysoka: obraz będzie ładowany w wyższej rozdzielczości, ale z wydłużonym czasem ładowania.
  • Domyślnie: obraz będzie optymalizowany zarówno pod kątem rozdzielczości, jak i czasu ładowania.
  • Niska: obraz będzie ładowany w niższej rozdzielczości, ale z krótszym czasem ładowania. Dowiedz się więcej o optymalizacji stron pod kątem czasu ładowania w naszej dokumentacji dla deweloperów.

Edycja obrazów

Po dodaniu obrazu do treści, możesz edytować jego rozmiar, dodać tekst alt, dodać link lub ustawić jego zachowanie podczas ładowania.

Edycja obrazu w module tekstowym

• Przejdź do swojej zawartości:

  • Website Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
  • Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
  • Blog: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
  • Baza wiedzy: W koncie HubSpot przejdź do Obsługa klienta > Baza wiedzy.
  • Email: W koncie HubSpot przejdź do Marketing > E-mail.
• Najedź na swoją zawartość i kliknij przycisk Edytuj.
• W edytorze treści kliknij obraz, aby wyświetlić pasek narzędzi do edycji obrazu.
• Edytuj obraz:
  • Aby dostosować sposób zawijania tekstu wokół obrazu, kliknij ikony wyrównania liniowego.

• • Aby dostosować rozmiar obrazu, kliknijstrzałki szerokości i wysokości lub wpisz wartość w pikselach.
  • Aby dostosować padding wokół obrazu, kliknij menu rozwijane Odstępy , a następnie wprowadź wartości p ikseli wokół krawędzi ikony obrazu.
• Aby usunąć obraz z modułu bogatego tekstu, kliknij obraz, a następnie kliknijikonę kosza do usuwania .

• Aby zastąpić obraz w module rich text, kliknij obraz, a następnie kliknijikonę zastąp i dodaj nowy obraz.

• Aby połączyć obraz, dodać tekst alt lub ustawić zachowanie ładowania, kliknij obraz , a następnie kliknij ikonę o łówkaedytuj:
  • Aby dodać łącze do obrazu, kliknijmenu rozwijane Link do woknie podręcznym i wybierz kategorię łącza.W polu poniżej wprowadź miejsce docelowe łącza. Dowiedz się więcej o różnych typach linków.

• • W polu Alt text wprowadź tekst opisujący wyszukiwarkom i czytnikom ekranu, czym jest obraz. Dzięki temu poprawisz dostępność i SEO swojej strony. Dowiedz się więcej o dostępności strony w naszej dokumentacji dla deweloperów .

Uwaga: dodanie tekstu alt do obrazu nie powodujeniedodanie tekstu tytułu. Tekst alt ma wpływ na rankingi wyszukiwarek i dostępność, podczas gdy tekst tytułu pojawia się, gdy odwiedzający najeżdża na obrazek.

• Aby ustawić zachowanie ł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: obrazek będzie ładowany tylko wtedy, gdy odwiedzający dotrze do tej części strony. Zmniejsza to czas potrzebny na załadowanie strony i poprawia SEO. Domyślnie obrazki będą ładowane przy tym ustawieniu.
    • Eager: obrazek załaduje się jak tylko strona się załaduje.
    • Domyślnie dlaprzeglądarki: zachowanie ładowania obrazu jest określone przez ustawienia przeglądarki odwiedzającego.
  • Aby dostosować typ linku do obrazu, w sekcji Typ lin ku wybierz jeden lub więcej atrybutów:
    
    • Regularny: ten link nie jest sponsorowany.
    • No follow: ten link nie jest związany z Twoją witryną.
    • Sponsorowany: ten link jest linkiem sponsorowanym lub reklamą.
    • User generated content: ten link prowadzi do treścigenerowanychprzez użytkowników, takich jak komentarz na blogu lub dyskusja na forum.
• Kliknij przycisk Zastosuj, aby zastosować zmiany do obrazu.

• W prawym górnym rogu edytora treści kliknij przycisk Update lub Publish, aby wprowadzić zmiany.

Edycja obrazu w module obrazów

• Przejdź do swojej zawartości:

  • Strony internetowe: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
  • Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
  • Blog: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
  • Email: W koncie HubSpot przejdź do Marketing > E-mail.
• Najedź na swoją treść i kliknij Edytuj.
• W edytorze treści kliknij moduł obrazu.
• Aby usunąć bieżący obraz, kliknij Usuń w sekcji Obraz w edytorze paska bocznego. Spowoduje to usunięcie bieżącego obrazu z modułu obrazu, ale nie spowoduje usunięcia modułu ze strony.

• Aby zastąpić bieżący obrazek, kliknij przycisk Zamień w sekcji Obrazek w edytorze paska bocznego, a następnie dodaj nowy obrazek.
• W polu Alt text wprowadź tekst, aby opisać wyszukiwarkom i czytnikom ekranu, czym jest dany obraz. Dzięki temu poprawisz dostępność i SEO swojej witryny. Dowiedz się więcej o dostępności witryny w naszej dokumentacji dla programistów .

Uwaga: dodanie tekstu alt do obrazu nie powodujeniedodaje tekstu tytułu. Tekst alt wpływa na rankingi wyszukiwarek i dostępność, podczas gdy tekst tytułu pojawia się, gdy odwiedzający najeżdża na obraz.

• Ustaw rozmiar obrazu. Możesz ustawić rozmiar automatycznie lub ustawiając niestandardową wysokość i szerokość:
  
  • Automatycznie dopasuj: obraz będzie skalowany w celu dopasowania do urządzenia, na którym jest oglądany.
  • Dokładna wysokość i szerokość: obraz będzie wyświetlany w tym samym rozmiarze na wszystkich urządzeniach.
• Ustaw maksymalny rozmiar:
  • Oryginalny rozmiar obrazu: obraz nigdy nie będzie wyświetlany większy niż jego oryginalny rozmiar.
  • Custom: obraz nigdy nie będzie wyświetlany większy niż określona szerokość i wysokość ustawiona w polach width i height.
• Aby ustawić zachowanie ładowania obrazu, kliknij menu rozwijane Ładowanie obrazu i wybierz opcję:
  • Lazy: obraz będzie ładowany tylko wtedy, gdy odwiedzający dotrze do tej części strony. Zmniejsza to czas potrzebny na załadowanie strony i poprawia SEO. Domyślnie obrazy będą ładowane przy tym ustawieniu.

• • Domyślnie dlaprzeglądarki: zachowanie ładowania obrazu jest określone przez ustawienia przeglądarki odwiedzającego.
• Aby dodać link do obrazu, wprowadź docelowy adres URL w polu Link (opcjonalnie). Zaznacz pole wyboru Otwórz łącze w nowej kar cie, aby skierować odwiedzającego do docelowego adresu URL w nowej karcie przeglądarki.

• W prawym górnym rogu edytora treści kliknij przycisk Aktualizuj lub Opublikuj, aby wprowadzić zmiany na żywo.