Przejdź do treści
Uwaga: Tłumaczenie tego artykułu jest podane wyłącznie dla wygody. Tłumaczenie jest tworzone automatycznie za pomocą oprogramowania tłumaczącego i mogło nie zostać sprawdzone. W związku z tym, angielska wersja tego artykułu powinna być uważana za wersję obowiązującą, zawierającą najnowsze informacje. Możesz uzyskać do niej dostęp tutaj.
Design Manager

Tworzenie, edytowanie i dołączanie plików CSS do stylizacji witryny

Data ostatniej aktualizacji: października 18, 2021

Dotyczy:

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Wcześniejsze konto Marketing Hub Basic

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 folder w lewym górnym rogu, aby rozwinąć menu paska bocznego. Następnie kliknij Plik > Nowy plik.
New coded file
  • 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.


design-manager-show-output-toggle

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.

Edit CSS

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:

  1. public_common.css * - arkusz stylów używany głównie przez aplikację HubSpot, ale także dla niektórych funkcji witryny.
  2. Nagłówek HTML w ustawieniach pod adresem Witryna > Strony - znaczniki linków dodane do globalnego <head> witryny.
  3. Layout.css ** -domyślny responsywny plik CSS dołączany do wszystkich układów szablonów typu drag-and-drop.
  4. Dołączone arkusze stylów w ustawieniach pod adresem Witryna > Strony - arkusze stylów dołączone do całej witryny.
  5. Dołączone arkusze stylów w ustawieniach pod Witryna > Blog - arkusze stylów dołączone do Twojego bloga (zastępują globalne arkusze witryny).
  6. Powiązane arkusze stylów***- arkusze stylów dołączone w układzie szablonu.
  7. Dodatkowy znacznik <head> w szablonie - znaczniki linków dodane do <head> danego układu szablonu .
  8. Arkuszestylów specyficzne dla danej strony - arkusze stylów dołączone w ustawieniach strony.
  9. 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.

HubSpot Help article screenshot

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ń ustawienia 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.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.