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.
Design Manager

Zbuduj własny, zakodowany szablon

Data ostatniej aktualizacji: listopada 22, 2021

Dotyczy:

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Wcześniejsze konto Marketing Hub Basic

Projektanci mogą budować szablony stron internetowych, landing page i blogów od podstaw za pomocą HTML. Możliwe jest również klon przekształcenie układu szablonu HubSpot na HTML i dostosowanie go do własnych potrzeb jako szablonu kodowanego.

Proszę zwrócić uwagę:
  • KontaCMS Hub Starter nie są w stanie używać niestandardowych zakodowanych szablonów dla stron docelowych.
  • KontaMarketing Hub Professional i Enterprise mogą również tworzyć niestandardowe kodowane szablony wiadomości e-mail.

Ten artykuł zawiera informacje o tym, jak tworzyć i rozwiązywać problemy z niestandardowymi szablonami kodowanymi, a także o tym, co jest wymagane w szablonach HubSpot. Jeśli nie czujesz się komfortowo pracując z kodem, użyj jednego z gotowych szablonów na swoim koncie HubSpot lub sprawdź rynek szablonów do zakup gotowych szablonów.

Uwaga: niestandardowo kodowany szablon nie jest domyślnie responsywny. Współpracuj z profesjonalnym projektantem, aby upewnić się, że Twój szablon jest responsywny dla różnych rozmiarów ekranu.

Tworzenie nowego pliku HTML & HUBL

  • W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
  • W lewym pasku bocznym utwórz nowy plik, klikającPlik>Nowy plik.Może być konieczne kliknięciefolderu ikona folderu aby rozwinąć wyszukiwarkę.
  • W oknie dialogowym kliknij menu rozwijaneCo chciałbyś dzisiaj zbudować?i wybierzHTML & HUBL.
design-manager-html-hubl
  • KliknijDalej.
  • Wprowadź szczegóły nowego pliku:
    • WybierzSzablonlubSzablon częściowy. Szablon częściowy to szablon, który może być użyty w innych szablonach.
    • W menu rozwijanym wybierz typ szablonu, który kodujesz (strona, blog lub email).
    • Nadaj swojemu plikowi nazwę.
    • Aby zaktualizować lokalizację pliku, w sekcjiLokalizacjapliku kliknij przyciskZmieńi wybierz folder, do którego chcesz dodać plik.
  • Kliknij przyciskUtwórz.
  • Napisz kod HTML dla swojej strony lub szablonu wiadomości e-mail.
  • Aby zobaczyć, jak Twój HubL będzie renderować, kliknij, aby włączyć przełącznik Pokaż wyjście. Po prawej stronie otworzy się panel z podglądem renderowania.


    design-manager-show-output
  • W prawym górnym rogu kliknij Podgląd, aby zobaczyć, jak Twój szablon będzie wyglądał i funkcjonował w edytorze treści. Ten podgląd jest synchronizowany z edytorem i będzie automatycznie odświeżany w trakcie pracy.
  • W prawym górnym rogu kliknij przyciskOpublikuj zmiany
Wszelkie błędy w twoim kodzie zostaną zasygnalizowane w komunikacie o błędzie, gdy będziesz próbował opublikować zmiany. Konsola błędów na dole edytora kodu wyświetli szczegóły błędu lub ostrzeżenia, a także sugestie, jak możesz je naprawić.

error-console

Aby uzyskać dodatkowe zasoby na temat niestandardowego projektowania, możesz zapoznać się zdokumentacją projektanta HubSpot. Znajduje się tam dodatkowadokumentacja dotycząca zakodowanych opcji modułu, takich jak znaczniki filtrów i ikony.

Dodaj wymagane znaczniki HubL

Zobaczysz komunikat o błędzie, jeśli w Twoim kodzie brakuje jakichkolwiek wymaganych znaczników HubL, jeśli spróbujesz opublikować plik.

Szablony stron internetowych, landing page i blogów wymagają następujących znaczników:

  • {{standard_footer_includes}}
  • {{standard_header_includes}}
Szablony e-mail wymagają następujących znaczników, aby były zgodne z CAN-SPAM. Mogą być one dodane na dwa sposoby:
  • Dołącz ten token, który wciąga do sekcji unsubscribe CAN-SPAM: {{unsubscribe_section}}. Następnie dodaj te tokeny indywidualnie:
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}
    • {{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Przy tej metodzie nie będziesz miał możliwości formatowania języka i stylu tekstu oraz linków.

  • Użyj tych tokenów indywidualnie..:
    • {{site_settings.company_name}}
    • {{unsubscribe_link}} lub {{unsubscribe_link_all}} (dołącz co najmniej jedno)
    • {{unsubscribe_anchor}}
    • {{site_settings.company_name}}
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}}{{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Używanie tokenów indywidualnie pozwoli Ci na elastyczność w dodawaniu sformułowań wokół tokenów i linków oraz na formatowanie ich w pożądanym stylu i języku.

Klonowanie do HTML

Oprócz tworzenia szablonu od podstaw, możesz również sklonować jeden z szablonów HubSpot do formatu HTML. Klonowanie szablonu do HTML daje dostęp do zawartości HTML szablonu.

Aby utworzyć zakodowaną wersję istniejącego szablonu:

  • W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
  • KliknijAkcje>Klonujdo HTMLw oknie wyszukiwania. Plik HTML zostanie utworzony w tym samym folderze co plik oryginalny. Jego nazwa będzie zgodna z nazwą oryginalnego szablonu z dodaną do niejkopią.
design-manager-clone-to-html