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: stycznia 20, 2023

Dotyczy:

Wszystkie produkty i plany

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 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ó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.


design-manager-show-output-toggle

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.

Edit CSS

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:

  1. public_common.css*: arkusz stylów wykorzystywany 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łączony do wszystkich układów szablonów typu drag-and-drop.
  4. Dołączone arkusze stylów w ustawieniach pod adresem Strona > Strony: arkusze stylów dołączone do całej witryny.
  5. Dołączone arkusze stylów w ustawieniach pod Strona > Blog: arkusze stylów dołączone do Twojego bloga (zastępują arkusze globalne 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 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 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.

HubSpot Help article screenshot

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

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

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.