Data ostatniej aktualizacji: października 18, 2021
CSS (Cascading Style Sheets) to zakodowane pliki, które wybierają elementy Twojej strony i kontrolują ich prezentację. Pomyśl o HTML twojego szablonu jak o kościach twojej strony, a o CSS jak o skórze twojej strony.
Ten artykuł opisuje tworzenie, publikowanie i dołączanie pliku CSS w HubSpot. Tutaj można dowiedzieć się, jak dokonać prostych zmian w wyglądzie 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ówCSS. 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 wyświetlić podgląd renderowania pliku HubL, kliknij, aby włączyć przełącznikPokaż dane wyjściowe, znajdujący się w górnej części edytora. Po prawej stronie otworzy się panel z podglądem renderowanego kodu.
Aby zobaczyć listę standardowych selektorów CSS dla szablonów HubSpot, sprawdź Boilerplate CSS.
Przed opublikowaniem należy sprawdzić kod pod kątem błędów HubL. Istnieją trzy miejsca, w których można znaleźć błędy HubL lub ostrzeżenia w module niestandardowym lub pliku z kodem:
- W konsoli błędów znajdującej się na dole edytora kodu.
- W rynience błędów po lewej stronie edytora kodu.
- W pasku przewijania po prawej stronie edytora.
Błędy uniemożliwiające publikację będą oznaczone kolorem czerwonym, natomiast ogólne ostrzeżenia będą żółte. W dolnej części 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 pojawią się łącza 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 swoim kodzie. Kliknięcie błędu spowoduje 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ąć na numer linii w edytorze kodu, a adres URL pliku zostanie odpowiednio zaktualizowany. Pozwala to na udostępnianie linku do Twojego kodu innym osobom i kierowanie ich dokładnie do miejsca, w którym pracujesz w pliku.
Po edycji pliku kliknij przycisk Publish changes (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 lewego paska bocznego.
Dołączyć do szablonu
W HubSpot możesz dołączać arkusze stylów do swoich treści na kilka różnych sposobów. Poniżej przedstawiono kolejność, w jakiej dołączone arkusze stylów są linkowane 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 pod adresem Witryna > Strony - znaczniki linków dodane do globalnego <head> witryny.
- Layout.css ** -domyślny responsywny plik CSS dołączany do wszystkich układów szablonów typu drag-and-drop.
- Dołączone arkusze stylów w ustawieniach pod adresem Witryna > Strony - arkusze stylów dołączone do całej witryny.
- Dołączone arkusze stylów w ustawieniach pod Witryna > Blog - arkusze stylów dołączone do Twojego bloga (zastępują globalne arkusze 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 danej 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 szablon w menedżerze projektów. W menu na prawym pasku bocznym pod adresem Opcje nagłówka i korpusu wybierz plik z menu rozwijanego Dodaj obok Powiązane arkusze stylów.
Możesz edytować lub usunąć już dołączony arkusz stylów, najeżdżając na niego i klikając Edit , aby wprowadzić w nim zmiany, lub X, aby go usunąć.
Po dodaniu arkusza stylów, kliknij Opublikuj zmiany w prawym górnym rogu, aby zastosować zmiany na bieżących stronach używających szablonu.
Dołączanie lub usuwanie arkuszy stylów na określonej stronie
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 w sekcji ustawień edytora stron:
- Przejdź do stron witryny lub stron docelowych.
- Najedź kursorem na swoją stronę i kliknij Edytuj.
- W edytorze strony kliknij na górze Ustawienia.
- Przewiń w dół i kliknij przycisk Opcje zaawansowane.
- W zakładce Page Stylesheets kliknij menu rozwijane Attacha stylesheet i wybierz arkusz, który chcesz dołączyć. Kliknij znakX 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 Settings w edytorze stron, wybierz Disabled z rozwijanego menu obok dołączonych arkuszy stylów.
- Kliknij przycisk Save i Publish w prawym górnym rogu.
Dołączanie i usuwanie arkuszy stylów na poziomie domeny( tylkoMarketing Hub Enterprise)
Proszę zwrócić uwagę:szablony tematyczne 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 z całej zawartości domeny:
- W koncie HubSpot kliknij ikonę ustawień w głównym panelu nawigacyjnym.
- W menu paska bocznego kliknij kolejno Witryna > Strony.
- Kliknij na menu rozwijane aby wybrać domena ydla której chcesz zaktualizować ustawienia.
- W zakładceTemplates , 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.
