Istnieje wiele miejsc, w których można dodać stylizację treści w HubSpot, a jest ona stosowana w określonej kolejności w zależności od miejsca dodania. Poniżej dowiesz się, w jaki sposób stosuje się stylizację, jak znaleźć stylizację na bieżącej stronie oraz jak uzyskać pomoc przy edycji projektu.
Zrozumienie sposobu stosowania stylizacji
Stylizacja CSS w HubSpot jest stosowana w kolejności zależnej od miejsca jej ustawienia w HubSpot, zgodnie z poniższą listą. Na przykład stylizacja ustawiona w globalnym arkuszu stylów jest zastępowana przez stylizację ustawioną na konkretnej stronie.
- CSS modułu niestandardowego
- Arkusze stylów dołączone do modułu.
- CSS dodany do sekcji CSS modułu modułu.
- CSS wewnątrz znacznika HubL modułu w bloku require_css
- Arkusze stylów dodane do szablonu poprzez require_css block
- Domyślne arkusze stylów HubSpot (na przykład layout.css)
- Arkusze stylów dołączone do szablonu
- Arkusze stylów dołączone na karcie ustawień strony
- Arkusze stylów dołączone w ustawieniach dla wszystkich domen
- Arkusze stylów dołączone w ustawieniach dla konkretnej domeny
- CSS dodany wewnątrz znaczników <style>. Na przykład w nagłówku HTML ustawień witryny, ustawień strony lub szablonu.
- Style dodane za pośrednictwem edytora stron. HubSpot doda również znaczniki !important do tych stylów. Dowiedz się więcej o znacznikach !important i ich wpływie na stylizację.
Wyszukiwanie stylów na stronie podglądu lub stronie rzeczywistej
Za pomocą narzędzi deweloperskich w przeglądarce można sprawdzić style zastosowane w witrynie na żywo lub na stronie podglądu. Każda przeglądarka różni się nieco sposobem rozwiązywania problemów ze stylizacją.
Aby znaleźć stylizację w Google Chrome:
- Na swojej stronie podglądu lub stronie na żywo kliknij prawym przyciskiem myszy element, który chcesz zbadać, a następnie wybierz polecenie Inspect.
- W okienku Elementy po lewej stronie zobaczysz HTML strony. Możesz kliknąć elementy, aby zobaczyć ich style, lub użyć ikony kursora w lewym górnym rogu okna, aby kliknąć elementy strony.
- W okienku Style po prawej stronie zobaczysz wszystkie style, które zostały zastosowane do danego elementu. Możesz zaznaczyć i wyczyścić pola wyboru obok każdego stylu, aby usunąć lub zastosować dany styl. Pomoże to zawęzić zakres reguł stylów, które należy zmienić.
- Po prawej stronie reguł CSS, zobaczysz nazwę źródła dla tego stylu, która mówi skąd pochodzi styl. Najedź kursorem na nazwę źródła, aby zobaczyć pełną nazwę:
- Jeśli stylizacja pochodzi z arkusza stylów, jego nazwa pojawi się obok deklaracji CSS w inspektorze. Możesz wtedy przejść do swojego menedżera projektów, znaleźć arkusz stylów i dokonać niezbędnych zmian.
- Jeśli nazwa źródła zaczyna się od modułu, to prawdopodobnie stylizacja pochodzi z CSS modułu. Najedź na nazwę źródła, aby zobaczyć pełną nazwę modułu.
- Jeśli nazwa źródła to User agent stylesheet , to CSS jest częścią domyślnych stylizacji przeglądarki. You'zobaczysz to najczęściej dla ogólnych stylizacji znaczników HTML takich jak <p>, <h1>, <h2>, <span>, <div>, itp. Ta stylizacja jest stosowana, gdy przeglądarka nie może znaleźć ogólnych reguł stylizacji dla danego elementu, ale może być nadpisana przez dodanie własnych stylów do tego elementu.
- Jeżeli nazwą źródłową jest adres URL strony, CSS pochodzi z wewnątrz znaczników <style> na stronie. Na przykład, styl może być ustawiony w nagłówku HTML strony lub szablonu.
- Jeśli nazwą źródłową jest adres URL strony, a stylizacja jest skierowana na #hs_cos_wrapper_module_number, stylizacja jest prawdopodobnie ustawiona w zakładce Style w edytorze strony. HubSpot doda do tych stylów znaczniki !important. Dowiedz się więcej o znacznikach !important i ich wpływie na stylizację.
- Jeśli nazwa źródła to <style>, stylizacja jest prawdopodobnie automatycznie dołączana do elementu. Często jest to spowodowane stylizacją ustawioną w edytorze osadzanego zasobu HubSpot, takiego jak widżet CTA lub spotkania.
- Jeślielement.stylepojawia się obok deklaracji w inspektorze, CSS został ustawiony inline. Stylizacja inline to stylizacja dodana bezpośrednio do kodu źródłowego HTML strony lub pól stylizacji inline szablonu. Na przykład, stylizacja inline w kodzie źródłowym wyglądałaby jak <p style="background:purple;">Hello world</p>.
Więcej szczegółów na temat inspekcji strony znajdziesz w dokumentacji pomocy swojej przeglądarki internetowej:
Uzyskaj pomoc w zakresie edycji projektu
Najlepszym źródłem informacji na temat wprowadzania zmian w szablonach i arkuszach stylów HubSpot jest oryginalny projektant szablonu. Istnieje jednak wiele źródeł, w których można uzyskać dodatkową pomoc w zakresie stylizacji treści, w zależności od poziomu komfortu rozwiązywania problemów z HTML i CSS.
- Jeśli czujesz się komfortowo, używając narzędzi inspektora do rozwiązywania problemów z projektowaniem szablonu:
- Jeśli nie czujesz się komfortowo czytając lub edytując HTML i CSS w swoich szablonach: