Przejdź do treści
Uwaga: Tłumaczenie tego artykułu jest podane wyłącznie dla wygody. Tłumaczenie jest tworzone automatycznie za pomocą oprogramowania tłumaczącego i mogło nie zostać sprawdzone. W związku z tym, angielska wersja tego artykułu powinna być uważana za wersję obowiązującą, zawierającą najnowsze informacje. Możesz uzyskać do niej dostęp tutaj.

Wykorzystanie obrazów w treściach HubSpot

Data ostatniej aktualizacji: stycznia 20, 2023

Dostępne z każdą z następujących podpisów, z wyjątkiem miejsc, w których zaznaczono:

Wszystkie produkty i plany

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: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
    • Landing Pages: Na koncie HubSpot przejdź do Marketing > Strony docelowe.
    • Blog: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
    • Baza wiedzy: Na koncie HubSpot przejdź do Obsługa klienta > Baza wiedzy.
    • Email: Na 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.
set-image-optimization-for-rich-text-content

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: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
    • Landing Pages: Na koncie HubSpot przejdź do Marketing > Strony docelowe.
    • Blog: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
    • Baza wiedzy: Na koncie HubSpot przejdź do Obsługa klienta > Baza wiedzy.
    • Email: Na 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.
edit-image-in-rich-text-module
  • Aby połączyć obraz, dodać tekst alt lub ustawić zachowanie ładowania, kliknij obraz , a następnie kliknij ikonę o łówkaedytuj:
    • Aby dodać link do obrazu, kliknijmenu rozwijane Link do woknie podręcznym i wybierz kategorię linków.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. Możesz również dodać tekst alt do obrazów w narzędziu plików. Dodanie tekstu alt poprawi dostępność i SEO Twojej witryny. Dowiedz się więcej o dostępności witryny w naszej dokumentacji dla deweloperów.

Uwaga: dodanie tekstu alt do obrazu nieniedodaje 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 obraz.

  • 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.

add-link-and-alt-text-to-rich-text-image

  • 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: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
    • Landing Pages: Na koncie HubSpot przejdź do Marketing > Strony docelowe.
    • Blog: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
    • Email: Na 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 wpisz tekst opisujący wyszukiwarkom i czytnikom ekranu, czym jest dany obraz. Możesz również dodać tekst alt do obrazów w narzędziu Pliki. Dodanie tekstu alt 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 alt do obrazu nieniedodaje 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 obraz.

replace-or-remove-image-in-image-module
  • 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.
set-size-link-and-loading-in-an-image-module
  • W prawym górnym rogu edytora treści kliknij przycisk Aktualizuj lub Opublikuj, aby wprowadzić zmiany na żywo.
Czy ten artykuł okazał się pomocny?
Niniejszy formularz służy wyłącznie do przekazywania opinii dotyczących dokumentacji. Dowiedz się, jak uzyskać pomoc dotyczącą HubSpot.