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.
Landing Pages

Używaj obrazów w treści HubSpot

Data ostatniej aktualizacji: października 18, 2021

Dotyczy:

Wszystkie produkty i plany

Możesz dodawać obrazy do modułów bogatego tekstu lub modułów obrazów w treści HubSpot. Moduły bogatego tekstu obsługują wiele typów zawartoś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 obrazó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ź kursorem na treść i kliknij Edytuj.

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


  • Wstaw obraz:
    • Aby dodać obrazek do modułu tekstowego, kliknij na moduł tekstowy, a następnie naikonę wstawobrazek na pasku narzędzi.
    • 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 za pośrednictwem adresu URL pliku, kliknij przycisk Dodaj obraz w prawym panelu. Aby utworzyć nowy obraz za pomocą Narzędzia do edycji w Canva, kliknij Projektuj z Canva. Następnie kliknij obrazek , aby go wstawić.

Przed wstawieniem obrazu możesz go zoptymalizować pod kątem czasu ładowania lub rozdzielczości, klikając Szczegóły na obrazie w prawym panelu. Następnie kliknij wmenu rozwijane Optymalizacjaobrazui wybierzopcję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 programistó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 bogatego tekstu

  • 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ź kursorem na treść i kliknij przycisk Edytuj.
  • W edytorze treści kliknij obrazek, aby wyświetlić pasek narzędzi do edycji obrazków.
  • Edytuj obraz:
    • Aby dostosować sposób zawijania tekstu wokół obrazu, kliknij ikony wyrównania liniowego.
    • Aby dostosowaćrozmiar obrazu, kliknijstrzałkiszerokościi wysokości lub wpisz wartość w pikselach.
    • Aby dostosować wyściełanie wokół obrazu, kliknij menu rozwijane Odstęp , a następnie wprowadź wartości w pikselach wokół krawędzi ikony obrazu.
  • Abyusunąć obrazek z modułu tekstowego, kliknij go, a następnie kliknijikonę kosza.
  • Aby zastąpić obraz w module bogatego tekstu, kliknij obraz, a następnie kliknijikonęzastąp zastąpi 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łówka edytuj:
    • Aby dodać link do obrazu, kliknijmenu rozwijane Link dowwyskakującym okienku i wybierz kategorię linków.W polu poniżej wpisz miejscedocelowe łącza. Dowiedz się więcej o różnych typach linków.
    • W polu Alt text wpisz tekst opisujący wyszukiwarkom i czytnikom ekranu, czym jest obrazek. Dzięki temu poprawisz dostępność i SEO swojej witryny. Dowiedz się więcej o dostępności witryny w naszejdokumentacji dla programistów.

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

  • Aby ustawić zachowanie ładowania obrazu i dostosować typ łącza obrazu dla wyszukiwarek, kliknij przycisk Zaawansowane.
    • Aby ustawić sposób ładowania obrazu, kliknij menu rozwijane Ładowanie obrazui wybierz opcję:
      • Leniwy:obrazek zostanie załadowany tylko wtedy, gdy odwiedzający dotrze do tej części strony. Zmniejsza to czas ładowania strony i poprawia SEO. Domyślnie obrazki będą ładowane przy tym ustawieniu.
      • Chętnie:obrazek będzie ładował się od razu po załadowaniu strony.
      • Domyślne dla przeglądarki:sposób ładowania obrazka jest określany przez ustawienia przeglądarki odwiedzającego.
    • Aby dostosować typ linku do obrazu, w sekcji Typ linku wybierz jeden lub więcejatrybutów:
      • Zwykły:ten link nie jest sponsorowany.
      • No follow:ten link nie jest powiązany z Twoją stroną.
      • Sponsorowany:ten link jest linkiem sponsorowanym lub reklamą.
      • Treść generowana przez użytkownika:ten link prowadzi do treści generowanych przez użytkowników, takich jak komentarz na blogu lub dyskusja na forum.
  • Kliknij przyciskZastosuj, aby zastosować zmiany do obrazu.

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

  • W prawym górnym rogu edytora treści kliknij przyciskAktualizujlubOpublikuj, aby wprowadzić zmiany.

Edycja obrazu w module obrazów

  • 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.
    • Email: W koncie HubSpot przejdź do Marketing > E-mail.
  • Najedź kursorem na swoją zawartość i kliknij Edytuj.
  • W edytorze treści kliknij moduł obrazów.
  • Aby usunąć bieżący obraz, kliknij przycisk Usuń w sekcji Obraz w edytorze paska bocznego. Spowoduje to usunięcie bieżącego obrazka z modułu obrazów, ale nie spowoduje usunięcia modułu ze strony.
  • Aby zastąpić bieżący obraz, kliknij przyciskZamień w sekcji Obraz w edytorze paska bocznego, a następnie dodaj nowy obraz.
  • W polu Alt text wpisz tekstopisujący wyszukiwarkom i czytnikom ekranu, czym jest obrazek. Dzięki temu poprawisz dostępność i SEO swojej witryny. Dowiedz się więcej o dostępności witryny w naszejdokumentacji dla programistów.

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

replace-or-remove-image-in-image-module
  • Ustaw rozmiar obrazu. Rozmiar można ustawić automatycznie lub poprzez ustawienie własnej wysokości i szerokości:
    • Automatycznie dopasuj:obraz będzie skalował się do rozmiaru urządzenia, na którym jest oglądany.
    • Dokładna wysokość i szerokość: obrazek 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 w rozmiarze większym niż oryginalny.
    • Niestandardowy: obrazek nigdy nie będzie wyświetlany większy niż określona szerokość i wysokość ustawiona w polachszerokośćiwysokość.
  • Aby ustawić zachowanie ładowania obrazu, kliknij menu rozwijane Ładowanie obrazui wybierz opcję:
    • Leniwy:obrazek będzie ładowany tylko wtedy, gdy odwiedzający dotrze do tej części strony. Zmniejsza to czas ładowania strony i poprawia SEO. Domyślnie obrazki będą ładowane przy tym ustawieniu.
    • Domyślneustawieniaprzeglądarki:sposób ładowania obrazka jest określany przez ustawienia przeglądarki odwiedzającego.
  • Aby dodać link do obrazka, wpiszdocelowy adres URLw poluLink (opcjonalnie). Zaznacz pole wyboru Otwórz łącze w nowej karcie, 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 przyciskAktualizujlubOpublikuj, aby wprowadzić zmiany na żywo.