Data ostatniej aktualizacji: stycznia 20, 2023
CSS (Cascading Style Sheets) to zakodowane pliki, które wybierają elementy Twojej strony i kontrolują ich prezentację. Pomyśl o HTML twojego szablonu jako o kościach twojej strony, a o CSS jako o skórze twojej strony.
W tym artykule omówiono tworzenie, publikowanie i dołączanie pliku CSS w HubSpot. Tutaj można dowiedzieć się, jak dokonać prostych zmian w projekcie konkretnej strony. Jeśli używasz szablonu motywu, dowiedz się, jak edytować ustawienia motywu.
Utwórz nowy plik CSS
- W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
- Kliknijikonę folderu w lewym górnym rogu, aby rozwinąć menu paska bocznego. Następnie kliknij Plik > Nowy plik.
- W oknie dialogowym kliknij arkusz stylów CSS. Następnie wprowadź nazwę dla swojego arkusza stylów CSS i kliknij Create.
Edytuj plik CSS
Po utworzeniu lub otwarciu istniejącego pliku CSS, dokonaj edycji w edytorze kodu. Oprócz standardowego CSS, edytor kodu obsługuje zmienne HubL i makra , aby ułatwić utrzymanie CSS. Aby podejrzeć, jak będzie renderowany twój HubL, kliknij, aby włączyć przełącznikPokaż wyjście na górze 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 module niestandardowym lub pliku kodowym:
- W konsoli błędów wzdłuż dolnej części edytora kodu.
- W rynnie błędów wzdłuż lewej strony edytora kodu.
- Na pasku przewijania po prawej stronie edytora.
Błędy uniemożliwiające publikację będą miały kolor czerwony, natomiast ogólne ostrzeżenia będą miały kolor żółty. Na dole edytora kodu kliknij Pokaż szczegóły , aby zobaczyć więcej informacji o błędach w konsoli błędów oraz Ukryj szczegóły , aby zwinąć konsolę błędów.
W konsoli błędów będą linki do każdego miejsca, w którym występują błędy lub ostrzeżenia HubL w twoim kodzie lub module niestandardowym. Najedź na czerwone wskaźniki błędów po lewej stronie edytora kodu, aby zobaczyć błąd lub ostrzeżenie w swoim kodzie. Kliknięcie błędu powoduje przesunięcie 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 również kliknąć numer linii w edytorze kodu, a adres URL pliku zostanie odpowiednio zaktualizowany. Dzięki temu możesz udostępnić innym link do swojego kodu i skierować ich dokładnie do miejsca, w którym pracujesz w pliku.
Po edycji pliku kliknij przycisk Publish changes w prawym górnym rogu. Jeśli chciałbyś wywołać ten arkusz stylów w innym zakodowanym szablonie, skopiuj adres URL arkusza, klikając Actions > Copy public URL w menu lewego paska bocznego.
Dołącz do szablonu
W HubSpot możesz dołączyć arkusze stylów do swojej zawartości na kilka różnych sposobów. Poniżej przedstawiono kolejność, w jakiej dołączone arkusze stylów są łączone w Twojej witrynie:
- public_common.css*: arkusz stylów wykorzystywany głównie przez aplikację HubSpot, ale także dla niektórych funkcji witryny.
- Nagłówek HTML w ustawieniach pod adresem Witryna > Strony: znaczniki linków dodane do globalnego <head> witryny.
- Layout.css **:domyślny responsywny plik CSS dołączony do wszystkich układów szablonów typu drag-and-drop.
- Dołączone arkusze stylów w ustawieniach pod adresem Strona > Strony: arkusze stylów dołączone do całej witryny.
- Dołączone arkusze stylów w ustawieniach pod Strona > Blog: arkusze stylów dołączone do Twojego bloga (zastępują arkusze globalne witryny).
- Powiązane arkusze stylów***: arkusze stylów dołączone w układzie szablonu.
- Dodatkowy znacznik <head> w szablonie: znaczniki linków dodane do <head> danego układu szablonu .
- Arkuszestylów specyficzne dla strony: arkusze stylów dołączone w ustawieniach strony.
- Nagłówekstrony HTML: znaczniki linków dodane do <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 go w menedżerze projektów. W menu prawego paska bocznego pod adresem 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 Edit , aby wprowadzić do niego zmiany lub X, aby go usunąć.
Po dodaniu arkusza stylów, kliknij Opublikuj zmiany w prawym górnym rogu, aby zastosować swoje zmiany do żywych pagin używających 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 motywu.
Aby dodać lub usunąć arkusz stylów specyficzny dla strony z sekcji ustawień edytora stron:
- Przejście do stron internetowych lub stron docelowych.
- Najedź na swoją stronę i kliknij Edytuj.
- W edytorze strony kliknij na górze Ustawienia.
- Przewiń w dół i kliknij Opcje zaawansowane.
- W sekcji Page Stylesheets kliknij menu rozwijane Attach a stylesheet i wybierz arkusz, który chcesz dołączyć. Kliknij przycisk X obok arkusza stylów, który chcesz usunąć.
- Kliknij Save and Publish w prawym górnym rogu.
Możesz również wyłączyć arkusze stylów, które są dziedziczone przez stronę z szablonu lub domeny. Po wyłączeniu, te arkusze stylów nie będą stosowane do Twojej strony:
- W tej samej zakładce Ustawienia w edytorze stron, wybierz Wyłączone z rozwijanego menu obok twoich dołączonych arkuszy stylów.
- Kliknij przycisk Zapisz i Opublikuj w prawym górnym rogu.
Dołączanie lub usuwanie arkuszy stylów na poziomie domeny( tylkoMarketing Hub Professional i Enterprise )
Uwaga: szablony motywów muszą zawierać adnotację enableDomainStylesheets: true, aby używać arkuszy stylów na poziomie domeny. Dowiedz się więcej o adnotacjach szablonów.
Aby dodać lub usunąć arkusz stylów ze wszystkich treści w domenie:
- W koncie HubSpot kliknij ikonę ustawień w głównym panelu nawigacyjnym.
- W menu paska bocznego kliknij stronę Strona > Strony.
- Kliknij menu rozwijane, aby wybrać domenę ,dla której chcesz zaktualizować ustawienia .
- Na karcieTemplates przewiń do CSS & Stylesheets. Aby dodać arkusz stylów, kliknij + Dodaj arkusz stylów. Kliknij przycisk X obok dołączonego arkusza stylów, aby go usunąć.
- Kliknij Save.
Uwaga: w przypadku obniżenia wersji do narzędzi Starter lub bezpłatnych 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. Dowiedzsię więcej o obniżaniu subskrypcji.
