Zrozumienie źródła stylizacji strony

Istnieje wiele miejsc, w których można dodać stylizację treści w HubSpot i jest ona stosowana w określonej kolejności w zależności od tego, gdzie została dodana. Poniżej dowiesz się, jak stosowana jest stylizacja, jak znaleźć stylizację na aktywnej stronie i jak uzyskać pomoc przy edycji projektu.

Zrozumienie sposobu stosowania stylizacji

Stylizacja CSS w HubSpot jest stosowana w kolejności opartej na tym, gdzie jest ustawiona w HubSpot, jak pokazano poniżej. Na przykład styl ustawiony w globalnym arkuszu stylów jest nadpisywany przez styl ustawiony na określonej stronie.

1. CSS modułu niestandardowego
   1. Arkusze stylów dołączone do modułu.
   2. CSS dodany do sekcji CSS modułu.
   3. CSS wewnątrz znacznika HubL modułu w bloku require_css
2. Reklamy dodane do szablonu za pośrednictwem bloku 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ń strony
   
   
   
   
6. Arkusze stylów dołączone w ustawieniach dla wszystkich domen
7. Arkusze stylów dołączone w ustawieniach dla określonej domeny
8. CSS dodany w znacznikach <style>. Na przykład w nagłówku HTML ustawień witryny, ustawień strony lub szablonu.
   
   
   
   
9. Reklamy 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ę.

Znajdowanie stylizacji na podglądzie lub stronie na żywo

Możesz użyć narzędzi deweloperskich w przeglądarce, aby sprawdzić style zastosowane 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 podglądzie lub stronie na żywo kliknij prawym przyciskiem myszy element, który chcesz sprawdzić, a następnie wybierz opcję Sprawdź.
• W panelu Elementy po lewej stronie widoczny jest kod HTML strony. Możesz kliknąć elementy, aby wyświetlić ich style, lub użyć ikony kursora w lewym górnym rogu panelu, aby kliknąć elementy na stronie.

  

• W panelu Style po prawej stronie zobaczysz wszystkie style zastosowane do tego elementu. Możesz zaznaczyć i wyczyścić pola wyboru obok każdego stylu, aby usunąć i zastosować styl. Pomoże to zawęzić regułę stylu do zmiany.
  
  
  
  
• Po prawej stronie reguł CSS znajduje się symbol nazwa źródła dla tej stylizacji, która informuje, skąd pochodzi stylizacja. Najedź kursorem na nazwa źródła aby wyświetlić pełną nazwę:
  • Jeśli stylizacja pochodzi z arkusza stylów, jego nazwa pojawi się obok deklaracji CSS w inspektorze. Następnie można przejść do design managera, znaleźć arkusz stylów i dokonać niezbędnych zmian.
    
    
    
    
  • Jeśli nazwa źródła zaczyna się od module, stylizacja prawdopodobnie pochodzi z CSS modułu. Najedź kursorem na nazwę źródła, aby wyświetlić 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. Jest to najczęściej spotykane w przypadku ogólnej 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 elementu, ale można ją zastąpić, dodając własne style do tego elementu.
    
    
    
    
  • Jeśli nazwą źródłową jest adres URL strony, CSS pochodzi ze 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 ukierunkowana na #hs_cos_wrapper_module_number, stylizacja jest prawdopodobnie ustawiana w zakładce Style edytora strony. HubSpot doda znaczniki !important do tych stylów. 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 wynika to ze stylu ustawionego w edytorze osadzanego zasobu HubSpot, takiego jak CTA lub widżet spotkania.
    
    
    
    
  • Jeśli element.style pojawia się obok deklaracji w inspektorze, CSS został ustawiony inline. Styl lokalny to styl dodany bezpośrednio do kodu źródłowego HTML strony lub pólstylu lokalnego szablonu. Na przykład styl lokalny w kodzie źródłowym wyglądałby następująco <p style="background:purple;">Hello world</p>.
    
    
    

Aby uzyskać więcej dokumentów na temat sprawdzania strony, zapoznaj się z dokumentacją pomocy przeglądarki internetowej:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Uzyskaj pomoc przy edycji projektu

Najlepszym źródłem do wprowadzania zmian w szablonach lub arkuszach stylów HubSpot jest oryginalny projektant szablonów. Istnieje jednak wiele różnych zasobów, aby uzyskać dodatkową pomoc w stylizacji treści, w zależności od poziomu komfortu w rozwiązywaniu problemów HTML i CSS.

• Jeśli czujesz się komfortowo korzystając z narzędzi do projektowania w celu rozwiązywania problemów z szablonem:

• • Wyszukuj i publikuj posty na Forum rozwoju CMS w Społeczności, aby uzyskać wskazówki, porady lub rozwiązywać problemy z kodem.
  • Zapoznaj się z dokumentacją referencyjną CMS, aby uzyskać samouczki, przewodniki i przegląd struktury CMS.
  • Kontaktuj się z zespołem produktowym HubSpot i innymi programistami pracującymi w HubSpot na platformie CMS Developer Community Slack.

• Jeśli nie czujesz się komfortowo czytając lub edytując HTML i CSS w swoich szablonach:

• • Skontaktuj się z certyfikowanym partnerem HubSpot z doświadczeniem w projektowaniu stron internetowych, który pomoże Ci dostosować szablony.
  • Użyj szablonu Starter lub szablonu motywu , aby edytować style strony bez pisania kodu.
  • Jeśli korzystasz z szablonu zakupionego w Centrum zasobów, skontaktuj się z projektantem szablonu w celu uzyskania odpowiedzi na pytania dotyczące projektu strony.