Używaj obrazów w treści HubSpot

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.

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.

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

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

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

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