Zrozumieć źródło stylizacji strony

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 stosowana jest stylizacja, jak znaleźć stylizację na stronie na żywo oraz jak uzyskać pomoc przy edycji projektu.

Zrozumienie sposobu stosowania stylów

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 nadrzędna w stosunku do stylizacji ustawionej na konkretnej stronie.

1. CSS modułu niestandardowego
   1. Arkusze stylów dołączone do modułu.
   2. CSS dodany do sekcji CSS modułu modułu.
   3. CSS wewnątrz znacznika HubL modułu w bloku require_css
2. Arkusze stylów dodane do szablonu za pomocą narzędzia blok require_css
3. Domyślne arkusze stylów HubSpot (na przykład layout.css).
4. Arkusze stylów dołączone do szablonu
   
   
5. Arkusze stylów dołączone na karcie ustawień Twojej strony
   
   
6. Arkusze stylów dołączone w ustawieniach dla wszystkich domen
7. Arkusze stylów dołączone w ustawieniach dla konkretnejdomeny
8. CSS dodany wewnątrz znaczników <style>. Na przykład, w nagłówku HTML ustawień witryny, ustawień strony lub szablonu.
   
   
9. Style dodane za pomocą 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ę.

Znajdowanie stylów na stronie podglądu lub na żywo

Możesz użyć narzędzi deweloperskich w swojej przeglądarce, aby 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 stronie podglądu lub na żywo kliknij prawym przyciskiem myszy element, który chcesz zbadać, a następnie wybierz polecenieInspect.
• W okienkuElementy po lewej stronie zobaczysz kod HTML strony. Możesz kliknąć na elementy, aby zobaczyć ich style, lub użyć ikony kursora w lewym górnym rogu okna, aby kliknąć na elementy strony.

  

• W panelu Style po prawej stronie widoczne są wszystkie style, które zostały zastosowane do danego elementu. Możesz zaznaczać i odznaczać pola wyboru obok każdego stylu, aby usunąć lub zastosować dany styl. Pomoże to zawęzić listę stylów, które należy zmienić.
  
  
• Po prawej stronie reguł CSS, zobaczysz nazwę źródła dla danego stylu, która mówi skąd pochodzi styl. Najedź kursorem na nazwę źródła aby zobaczyć pełną nazwę:
  • Gdy stylizacja pochodzi z arkusza stylów, nazwa arkusza 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 module, to stylizacja prawdopodobnie pochodzi z CSS modułu. Najedź kursorem na nazwę źródła, aby zobaczyć pełną nazwę modułu.
    
    
  • Jeśli nazwa źródła to Arkusz stylów agenta użytkownika , CSS jest częścią domyślnej stylizacji przeglądarki. You'Najczęściej spotykamy się z tym w przypadku stylizacji ogólnych 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 zostać nadpisana przez dodanie własnych stylów do tego elementu.
    
    
  • Jeśli nazwą źródła jest adres URL strony, CSS pochodzi z tagów <style> na stronie. Na przykład, stylizacja może być ustawiona 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 ustawiana w zakładce Style w edytorze strony. HubSpot doda znaczniki !important do tych stylów. Dowiedz się więcej o znacznikach !important i ich wpływie na stylizację.
    
    
  • 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 do pól stylizacji inline szablonu. Na przykład, stylizacja inline w kodzie źródłowym wyglądałaby tak <p style="background:purple;">Hello world</p>.
    
    

Więcej szczegółów na temat sprawdzania strony znajdziesz w dokumentacji pomocy swojej przeglądarki internetowej:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Uzyskaj pomoc w zakresie edycji projektu

Najlepszym źródłem informacji na temat wprowadzania zmian w szablonach lub arkuszach stylów HubSpot jest oryginalny projektant szablonu. Istnieje jednak wiele źródeł, z których można skorzystać, aby uzyskać dodatkową pomoc w zakresie stylizacji zawartości, w zależności od poziomu zaawansowania w rozwiązywaniu problemów z HTML i CSS.

• Jeśli czujesz się pewnie, używając narzędzi inspektora do rozwiązywania problemów z projektowaniem szablonu:

• • Wyszukaj i napisz na Forum Rozwoju CMS w Społeczności, aby uzyskać wskazówki, porady lub rozwiązać problemy z Twoim kodem.
  • Zapoznaj się z dokumentacją referencyjną CMS, aby uzyskać samouczki, przewodniki i przegląd struktury CMS.
  • Nawiązać kontakt z zespołem produktowym HubSpot i innymi programistami pracującymi w HubSpot na Slacku społeczności programistów CMS.

• Jeśli nie czujesz się pewnie w czytaniu lub edytowaniu HTML i CSS w swoich szablonach:

• • Połącz się z certyfikowanym Partnerem HubSpot z doświadczeniem w projektowaniu stron internetowych, który pomoże Ci dostosować szablony.
  • Użyj szablonu startowego lub szablonu motywu , aby edytować style stron bez pisania kodu.
  • Jeśli używasz szablonu zakupionego w Asset Marketplace,skontaktuj się z projektantem szablonuaby uzyskać odpowiedzi na pytania dotyczące wyglądu twojej strony.