Pliki CSS (Cascading Style Sheets) to zakodowane pliki, które wybierają elementy strony i kontrolują ich prezentację. Pliki CSS nie mogą być dołączane do wiadomości e-mail ani szablonów wiadomości e-mail.
W tym artykule omówiono tworzenie, publikowanie i dołączanie pliku CSS w HubSpot. Dowiesz się, jak wprowadzić proste zmiany w wyglądzie konkretnej strony. Jeśli korzystasz z szablonu szablonu, dowiedz się, jak edytować ustawienia szablonu.
Po utworzeniu lub otwarciu istniejącego pliku CSS, wprowadź zmiany w edytorze kodu. Oprócz standardowego CSS, edytor kodu obsługuje zmienne i makra Hub L, aby ułatwić obsługę CSS. Aby wyświetlić podgląd renderowania HubL, kliknij, aby włączyć przełącznikPokaż dane wyjściowe w górnej części edytora. Po prawej stronie otworzy się panel z podglądem renderowania.
Aby zobaczyć listę standardowych selektorów CSS dla szablonów HubSpot, sprawdź Boilerplate CSS.
Przed opublikowaniem sprawdź swój kod pod kątem błędów HubL. Istnieją trzy miejsca, w których można znaleźć błędy lub ostrzeżenia HubL w niestandardowym module lub zakodowanym pliku:
Błędy uniemożliwiające publikację będą wyświetlane na czerwono, a ogólne ostrzeżenia na żółto. W dolnej części edytora kodu kliknij Pokaż szczegóły, aby wyświetlić więcej informacji o błędach w konsoli błędów i Ukryj szczegóły, aby zwinąć konsolę błędów.
W konsoli błędów pojawią się linki do miejsc, w których występują błędy lub ostrzeżenia HubL w kodzie lub module niestandardowym. Najedź kursorem na czerwone wskaźniki błędów po lewej stronie edytora kodu, aby zobaczyć błąd lub ostrzeżenie w kodzie. Kliknięcie błędu spowoduje przekierowanie kursora do wszystkich błędów lub ostrzeżeń w tej linii. Kliknięcie adnotacji na pasku przewijania spowoduje przejście do tej części pliku.
Możesz także kliknąć numer linii w edytorze kodu i odpowiednio zaktualizować adres URL pliku. Pozwala to na udostępnienie linku do kodu innym osobom i skierowanie ich dokładnie tam, gdzie pracujesz w pliku.
Po edycji pliku kliknij przycisk Opublikuj zmiany w prawym górnym rogu. Jeśli chcesz wywołać ten arkusz stylów w innym zakodowanym szablonie, skopiuj adres URL arkusza, klikając Akcje > Kopiuj publiczny adres URL w menu na lewym pasku bocznym.
W HubSpot arkusze stylów można dołączać do treści na kilka różnych sposobów. Poniżej znajduje się kolejność, w jakiej dołączone arkusze stylów są łączone w witrynie:
* Wymagane
** Wymagane dla układów typu "przeciągnij i upuść
*** Zalecana metoda dołączania arkuszy stylów dla układów szablonów
Aby dołączyć arkusze stylów do szablonu, otwórz szablon w menedżerze projektów. W menu na prawym pasku bocznym w sekcji Head and Body Options wybierz plik z rozwijanego menu Add obok Linked stylesheets.
Możesz edytować lub usunąć już dołączony arkusz stylów, najeżdżając na niego i klikając Edytuj, aby wprowadzić zmiany, lub X, aby go usunąć.
Po dodaniu arkusza stylów kliknij przycisk Opublikuj zmiany w prawym górnym rogu, aby zastosować zmiany do aktywnych stron korzystających z szablonu.
Uwaga: ta opcja nie jest dostępna dla szablonów motywów. Dowiedz się, jak edytować ustawienia szablonu.
Aby dodać lub usunąć arkusz stylów specyficzny dla strony w sekcji ustawień edytora stron:
Przejdź do swojej zawartości:
Uwaga: szablony motywów muszą zawierać adnotację enableDomainStylesheets: true , abyużywać arkuszy stylów na poziomie domeny. Dowiedz się więcej o adnotacjach szablonów.
Aby dodać lub usunąć arkusz stylów z całej zawartości domeny:
Uwaga: w przypadku przejścia do wersji Starter lub bezpłatnych narzędzi HubSpot dołączone arkusze stylów na poziomie domeny pozostaną aktywne do momentu ich usunięcia. Po usunięciu wszystkich arkuszy stylów nie można już dołączać arkuszy stylów na poziomie domeny. Dowiedz się więcej o obniżaniu subskrypcji.