Data ostatniej aktualizacji: listopada 3, 2023
Dostępne z każdą z następujących podpisów, z wyjątkiem miejsc, w których zaznaczono:
Wszystkie produkty i plany
|
Pliki CSS (Cascading Style Sheets) to zakodowane pliki, które wybierają elementy strony i kontrolują ich prezentację. Potraktuj kod HTML szablonu niestandardowego jako szkielet witryny, a CSS jako skórę witryny.
W tym artykule opisano tworzenie, publikowanie i dołączanie pliku CSS w HubSpot. Tutaj dowiesz się, jak wprowadzić proste zmiany w wyglądzie konkretnej strony. Jeśli korzystasz z szablonu szablonu, dowiedz się, jak edytować ustawienia szablonu.
Utwórz nowy plik CSS
- Na koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
- Kliknij ikonę folderu w lewym górnym rogu, aby rozwinąć menu paska bocznego. Następnie kliknij Plik > Nowy plik.
- W oknie dialogowym kliknij opcję Arkusz stylów CSS. Następnie wprowadź nazwę arkusza stylów CSS i kliknij przycisk Utwórz.
Edytuj plik CSS
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:
- W konsoli błędów u dołu edytora kodu.
- W rynnie błędów po lewej stronie edytora kodu.
- Na pasku przewijania po prawej stronie edytora.
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.
Dołącz do szablonu
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:
- public_common.css*: arkusz stylów używany głównie przez aplikację HubSpot, ale także dla niektórych funkcji witryny.
- Nagłówek HTML w ustawieniach w sekcji Witryna > Strony: znaczniki linków dodane do globalnego nagłówka <head> witryny.
- Layout.css **: domyślny responsywny plik CSS dołączony do wszystkich układów szablonów typu "przeciągnij i upuść".
- Dołączone arkusze stylów w ustawieniach w sekcji Witryna > Strony: arkusze stylów dołączone do całej witryny.
- Dołączone arkusze stylów w ustawieniach w sekcji Witryna > Blog: arkusze stylów dołączone do bloga (zastępują globalne arkusze witryny).
- Powiązane arkusze stylów***: arkusze stylów dołączone do układu szablonu.
- Dodatkowe znaczniki <head> w szablonie: znaczniki linków dodane do <head> określonego układu szablonu.
- Arkusze stylów specyficzne dla strony: arkusze stylów dołączone w ustawieniach strony.
- Nagłówek strony HTML: znaczniki linków dodane do nagłówka <head> danej strony w jej ustawieniach.
* 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.
Dołączanie lub usuwanie arkuszy stylów na określonej stronie( tylkoMarketing Hub Professional i Enterprise )
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:
- Strony witryny: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
- Strony docelowe: Na koncie HubSpot przejdź do Marketing > Strony docelowe..
- Najedź kursorem na swoją stronę i kliknij Edytuj.
- W edytorze zawartości kliknij menu Ustawienia i wybierz opcję Zaawansowane.
- W sekcji Arkusze stylów strony okna dialogowego kliknij menu rozwijane Dołącz arkusz stylów i wybierz arkusz styl ów. Aby usunąć arku sz stylów, kliknijX obok tego arkusza.
- Aby wyłączyć arkusze stylów, które są dziedziczone z szablonu lub domeny, kliknij menu rozwijane obok arkusza stylów i wybierz opcję Wyłączone.
Dołączanie lub usuwanie arkuszy stylów domeny( tylkoMarketing Hub Professional i Enterprise )
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:
- Na koncie HubSpot kliknij ikonę ustawień w głównym pasku nawigacyjnym.
- W menu paska bocznego kliknij kolejno Website > Pages.
- Kliknij menu rozwijane, aby wybrać domenę , dla której chcesz zaktualizować ustawienia.
- Na karcie Szablony przewiń do pozycji CSS i arkusze stylów. Aby dodać arkusz stylów, kliknij + Dodaj arkusz stylów. Kliknij X obok dołączonego arkusza stylów, aby go usunąć.
- Kliknij przycisk Zapisz.
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.
