Tworzenie, edycja i dołączanie plików CSS

Kaskadowe arkusze stylów (CSS) kontrolują wygląd stron Twojej witryny poprzez wybieranie i stylizowanie elementów stron. Skorzystaj z menedżera projektów, aby tworzyć nowe pliki CSS, edytować istniejące oraz przypisywać je do szablonów, konkretnych stron lub całych domen.

Aby wprowadzić proste zmiany w wyglądzie konkretnej strony, zapoznaj się z informacjami na temat edycji treści strony w edytorze treści. Jeśli korzystasz z szablonu motywu, zapoznaj się z informacjami na temat edycji ustawień motywu.

Utwórz nowy plik CSS

1. Na koncie HubSpot kliknij opcję Więcej, a następnie przejdź do Treść > Design manager. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Treść > Design manager.
2. W wyszukiwarce kliknij Plik > Nowy plikw lewym górnym rogu.
3. W oknie dialogowym kliknij menu rozwijane i wybierz opcję CSS + HubL. 
4. Kliknij Dalej.
5. W polu Nazwa pliku wprowadź nazwę pliku.
6. Aby zmienić lokalizację pliku, kliknij Zmień. W wyskakującym okienku wybierz nową lokalizację pliku. 
7. Po zakończeniu kliknij Utwórz.

Edytuj plik CSS

Po utworzeniu lub otwarciu istniejącego pliku CSS wprowadź zmiany w edytorze kodu. Oprócz standardowego CSS edytor kodu obsługuje zmienne i makra HubL, które ułatwiają zarządzanie arkuszem CSS.

Aby zapoznać się z listą standardowych selektorów CSS dla szablonów HubSpot, zajrzyj do sekcji Boilerplate CSS.

1. { local.navDesignManager }}
2. W Finderze kliknij Plik > Nowy plik lub otwórz istniejący plik CSS.
3. W edytorze kodu wprowadź lub zaktualizuj kod CSS, aby wprowadzić zmiany. 

Aby wyświetlić podgląd renderowania kodu HubL, kliknij przełącznik „Pokaż wynik ” u góry edytora. Po prawej stronie otworzy się panel z renderowanym podglądem.

Sprawdź, czy nie ma błędów

Przed opublikowaniem sprawdź kod pod kątem błędów HubL. Błędy pojawiają się w konsoli u dołu, w pasku błędów po lewej stronie oraz na pasku przewijania po prawej stronie edytora kodu.

Błędy uniemożliwiające publikację będą zaznaczone na czerwono, natomiast ogólne ostrzeżenia – na żółto. W dolnej części edytora kodu kliknij opcję „Pokaż szczegóły”, aby wyświetlić więcej informacji o błędach w konsoli błędów, oraz „Ukryj szczegóły”, aby zwinąć konsolę błędów.

Opublikuj plik CSS

Po edycji pliku CSS kliknij opcję „Opublikuj zmiany ” w prawym górnym rogu. Aby wywołać ten arkusz stylów w innym szablonie z kodem, kliknij menu rozwijane „Działania ” w oknie przeglądarki plików i wybierz opcję „Kopiuj publiczny adres URL”. 

Dołączanie arkuszy stylów do zasobów

Dołącz arkusze stylów do szablonów, poszczególnych stron lub całej domeny. Arkusze stylów są stosowane w określonej kolejności w zależności od miejsca, w którym zostały dołączone. Poniższa lista odzwierciedla kolejność, w jakiej są one stosowane w witrynie:

1. public_common.css (wymagany): arkusz stylów używany głównie przez aplikację HubSpot, ale także w niektórych funkcjach witryny.
2. Kod HTML nagłówka: tagi linków dodane do globalnego elementu <head> witryny w sekcji Treść > Ustawienia strony.
3. Layout.css (wymagany w przypadku układów typu „przeciągnij i upuść”): domyślny responsywny plik CSS dołączony do wszystkich układów szablonów typu „przeciągnij i upuść”.
4. Dołączone arkusze stylów (Strony): arkusze stylów dołączone do całej witryny w sek cji Treść > Ustawienia strony.
5. Dołączone arkusze stylów (Blog): arkusze stylów dołączone do bloga (zastępują globalne arkusze witryny) w sekcji Treść > Ustawienia bloga.
6. Arkusze stylów połączone(zalecane dla układów szablonów): arkusze stylów dołączone w układzie szablonu.
7. Dodatkowe znaczniki <head> w szablonie: tagi linków dodane do sekcji <head> konkretnego układu szablonu.
8. Arkusze stylów specyficzne dla strony:arkusze stylów dołączone w ustawieniach strony.
9. Kod HTML nagłówka strony:tagi linków dodane do sekcji <head> konkretnej strony w jej ustawieniach.

Dołączanie arkuszy stylów do szablonów

Arkusze stylów można dołączać do szablonów typu „przeciągnij i upuść” w inspektorze w menedżerze projektów. W przypadku szablonów kodowanych arkusze stylów dodaje się bezpośrednio w edytorze kodu.

Szablony typu „przeciągnij i upuść”

1. Na koncie HubSpot kliknij opcję Więcej, a następnie przejdź do Treść > Design manager. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Treść > Design manager.
2. W wyszukiwarce kliknij nazwę pliku szablonu, który chcesz przeciągnąć i upuścić.
3. W inspektorze kliknij menu rozwijane Dodaj w sekcji Powiązane arkusze stylów i wybierz swój arkusz stylów. Aby usunąć arkusz stylów, kliknij X.
4. Po zakończeniu kliknij opcję „Opublikuj zmiany” w prawym górnym rogu, aby zastosować zmiany na stronachkorzystających z tego szablonu.

Szablony kodowane

W przypadku szablonów kodowanych arkusze stylów dołącza się bezpośrednio w edytorze kodu za pomocą tagów <link> lub tagu HubL w sekcji <head> pliku. Więcej informacji na temat szablonów kodowanych znajdziesz w dokumentacji dla programistów.

Dołączanie arkuszy stylów do konkretnej strony

Uwaga: taopcja nie jest dostępna dla szablonów motywów. Dowiedz się, jak edytować ustawienia motywu.

Aby dołączyć arkusz stylów dla konkretnej strony w sekcji ustawień edytora treści:

1. Przejdź do swoich treści:

   • Strony witryny: Na koncie HubSpot kliknij Więcej, a następnie przejdź do Treść > Strony w witrynie internetowej. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Treść > Strony w witrynie internetowej.
   • Strony docelowe: Na koncie HubSpot kliknij Więcej, a następnie przejdź do Treść > Strona docelowa. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Treść > Strona docelowa.
2. Kliknij nazwę swojej strony.
3. W edytorze treści kliknijmenu Ustawienia i wybierz opcję Zaawansowane. 
4. W oknie dialogowym, w sekcji Arkusze stylów, kliknij menu rozwijane Dołącz arkusz stylów i wybierz arkusz stylów. Aby usunąć arkusz stylów, kliknij X obok arkusza stylów.
5. Aby wyłączyć arkusze stylów odziedziczone po szablonie lub domenie, kliknij menu rozwijane obok arkusza stylów i wybierzopcję Wyłączone.

Dołączanie arkuszy stylów domeny

Uwaga:szablonymotywówmuszą zawierać adnotację enableDomainStylesheets: true, aby można było korzystać z arkuszy stylów na poziomie domeny. Dowiedz się więcej o adnotacjach szablonów.

Aby dołączyć arkusz stylów do całej domeny:

1. Na koncie HubSpot kliknij ikonę ustawień w górnym pasku nawigacyjnym.
2. W menu bocznym kliknij Treść > Strony.
3. Kliknij menu rozwijane, aby wybrać domenę , dla której chcesz zaktualizować ustawienia.
4. W zakładce Szablony, w sekcji CSS i arkusze stylów, kliknij + Dodaj arkusz stylów. Aby usunąć arkusz stylów, kliknij znak X obok dołączonego arkusza stylów.
5. Kliknij „Zapisz”.

Uwaga: w przypadku przejścia na niższy plan HubSpot Starter lub na bezpłatne narzędzia dołączone arkusze stylów na poziomie domeny pozostaną aktywne do momentu ich usunięcia. Po usunięciu wszystkich arkuszy stylów nie będzie już można dołączać arkuszy stylów na poziomie domeny. Dowiedz się więcej o przejściu na niższy plan subskrypcji.