Data ostatniej aktualizacji: czerwca 28, 2022
CSS (Cascading Style Sheets) to zakodowane pliki, które wybierają elementy strony i sterują ich prezentacją. Pomyśl o HTML swojego szablonu jak o kościach witryny, a o CSS jak o skórze witryny.
W tym artykule omówiono tworzenie, publikowanie i dołączanie pliku CSS w HubSpot. Tutaj można dowiedzieć się, jak wprowadzać proste zmiany w wyglądzie poszczególnych stron. 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 przycisk Arkusz stylów CSS. Następnie wprowadź nazwę arkusza stylów CSS i kliknij przycisk Create.
Edytuj plik CSS
Po utworzeniu lub otwarciu istniejącego pliku CSS należy dokonać edycji w edytorze kodu. Oprócz standardowego CSS, edytor kodu obsługujezmienne i makra HubL , co ułatwia utrzymanie CSS. Aby wyświetlić podgląd renderowania pliku HubL, należy kliknąć w górnej części edytora, aby włączyć przełącznikPokaż dane wyjściowe. Po prawej stronie zostanie otwarty panel z podglądem renderowania.
Listę standardowych selektorów CSS dla szablonów HubSpot można znaleźć nastronie 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 lub ostrzeżenia HubL w module niestandardowym lub pliku z kodem:
- W konsoli błędów znajdującej się w dolnej części edytora kodu.
- W rynience błędów po lewej stronie edytora kodu.
- Na pasku przewijania po prawej stronie edytora.
Błędy uniemożliwiające publikację będą oznaczone kolorem czerwonym, a ogólne ostrzeżenia - żółtym. W dolnej części edytora kodu kliknij przycisk 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 znajdują się łącza do miejsc, w których w kodzie lub module niestandardowym występują błędy lub ostrzeżenia HubL. 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 przesunięcie kursora do wszystkich błędów lub ostrzeżeń w danym wierszu. Kliknięcie adnotacji na pasku przewijania spowoduje przejście do tej części pliku.
Można również kliknąć numer wiersza w edytorze kodu, aby adres URL pliku został odpowiednio zaktualizowany. Dzięki temu można udostępniać innym osobom łącze do swojego kodu i kierować je dokładnie w to miejsce, w którym pracuje się 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 lewego paska bocznego.
Przymocuj do szablonu
W HubSpot arkusze stylów można dołączać do treści na kilka różnych sposobów. Poniżej przedstawiono 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 przez niektóre funkcje witryny.
- Nagłówek HTML w ustawieniach pod adresem Witryna > Strony - znaczniki łącza dodane do globalnego <head> witryny.
- Layout.css ** -domyślny responsywny plik CSS dołączany do wszystkich układów szablonów typu "przeciągnij i upuść".
- Dołączone arkusze stylów w ustawieniach w witry nie Witryna > Strony - arkusze stylów dołączone do całej witryny.
- Dołączone arkusze stylów w ustawieniach pod adresem Witryna > 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.
- Dodatkowe znaczniki <head> w szablonie - znaczniki odnośników dodane do <head> danego układu szablonu .
- Arkusze stylów specyficzne dla danej strony - arkusze stylów dołączone w ustawieniach strony.
- Nagłówekstrony HTML - znaczniki łącza dodane do <nagłówka> 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.
Dołączony już arkusz stylów można edytować lub usunąć, najeżdżając na niego i klikając przycisk Edytuj , aby wprowadzić w nim zmiany, lub X, aby go usunąć.
Po dodaniu arkusza stylów kliknij przycisk Opublikuj zmiany w prawym górnym rogu, aby zastosować zmiany na bieżących stronach 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 motywu.
Aby dodać lub usunąć arkusz stylów specyficzny dla danej strony, przejdź do sekcji ustawień edytora stron:
- Przechodzenie do stron witryny lub stron docelowych.
- Najedź na swoją stronę i kliknij przycisk Edytuj.
- W edytorze stron kliknij u góry przycisk Ustawienia.
- Przewiń w dół i kliknij przycisk Opcje zaawansowane.
- W obszarze Page Stylesheets (Arkuszestylówstrony) kliknij menu rozwijane Attach a stylesheet (Dołączarkusz stylów) i wybierz arkusz, który chcesz dołączyć. Kliknij znakX obok arkusza stylów, który chcesz usunąć.
- Kliknij przycisk Save and Publish (Zapisz i opublikuj ) w prawym górnym rogu.
Można również wyłączyć arkusze stylów dziedziczone przez stronę z szablonu lub domeny. Po wyłączeniu te arkusze stylów nie będą stosowane na stronie:
- W tej samej zakładce Ustawienia w edytorze stron wybierz opcjęWyłączone z menu rozwijanego obok dołączonych arkuszy stylów.
- Kliknij przycisk Zapisz i Opublikuj w prawym górnym rogu.
Dołączanie i usuwanie arkuszy stylów na poziomie domeny( tylkoMarketing Hub Professional i Enterprise)
Uwaga:szablony tematyczne muszą zawierać adnotację enableDomainStylesheets: true, aby można było korzystać z arkuszy stylów na poziomie domeny. Dowiedz się więcej o adnotacjach do 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 kolejno Witryna > Strony.
- Kliknij przycisk menu rozwijane aby wybrać domenę ydla 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 przycisk Save (Zapisz).
Uwaga: w przypadku obniżenia wersji do wersji Starter lub bezpłatnych narzędzi HubSpot, dołączone arkusze stylów na poziomie domeny pozostaną aktywne do momentu ich usunięcia. Gdy wszystkie arkusze stylów zostaną usunięte, nie będzie można już dołączać arkuszy stylów na poziomie domeny. Dowiedz się więcej o obniżaniu poziomu subskrypcji.
