Zrozumienie źródła 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 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.

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 poprzez require_css block
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ń strony
   
   
   
   
6. Arkusze stylów dołączone w ustawieniach dla wszystkich domen
7. Arkusze stylów dołączone w ustawieniach dla konkretnej domeny
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 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:

• Chrome
• Firefox
• Microsoft Edge
• Safari

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:

• • Wyszukaj i napisz na Forum Rozwoju CMS na Społeczności, aby uzyskać wskazówki, porady lub rozwiązać problemy z kodem.
  • Zapoznaj się z dokumentacją referencyjną CMS, aby uzyskać samouczki, przewodniki i przegląd ram CMS.
  • Połącz się 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ę komfortowo czytając lub edytując 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 jakiegokolwiek kodu.
  • Jeśli używasz szablonu zakupionego w Asset Marketplace,skontaktuj się z projektantem szablonuw razie pytań dotyczących wyglądu Twojej strony.