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.

Dowiedz się, jak stosowana jest stylizacja

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

1. Niestandardowy CSS modułu
   1. Arkusze stylów dołączone do modułu.
   2. CSS dodany do sekcji CSS modułu.
   3. CSS wewnątrz znaczników HubL modułu w bloku require_css
2. Arkusze stylów 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. 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ę.

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

Możesz użyć narzędzi programistycznych w przeglądarce, aby sprawdzić style zastosowane na stronie na żywo lub na stronie podglądu. Każda przeglądarka różni się nieco sposobem rozwiązywania problemów ze stylizacją.

Aby znaleźć style 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 zobaczysz 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 zaznaczać i odznaczać pola wyboru obok każdego stylu, aby usunąć i zastosować styl. Pomoże to zawęzić wybór reguły stylu do zmiany.
  
  
  
  
• Po prawej stronie reguł CSS znajduje się nazwa źródła danego stylu, która informuje o tym, skąd pochodzi dany styl. Najedź kursorem na nazwę źródła, aby wyświetlić pełną nazwę:
  • Jeśli stylizacja pochodzi z arkusza stylów, nazwa arkusza stylów pojawi się obok deklaracji CSS w inspektorze. Następnie możesz przejść do menedżera projektów, 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 wezwanie do działania lub widżet spotkania.
    
    
    
    
  • Jeślielement.stylepojawia się obok deklaracji w inspektorze, CSS został ustawiony inline. Stylizacja inline to stylizacja dodawana bezpośrednio do kodu źródłowego HTML strony lub pólstylizacji inline szablonu. Na przykład, styl inline w kodzie źródłowym pojawi się jako <p style="background:purple;">Hello world</p>.
    
    

Aby uzyskać więcej informacji 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 HubSpot lub arkuszach stylów jest oryginalny projektant szablonów. Istnieją jednak różne zasoby, aby uzyskać dodatkową pomoc w zakresie stylizacji treści, w zależności od poziomu komfortu w rozwiązywaniu problemów z HTML i CSS.

• Jeśli czujesz się komfortowo, korzystając z narzędzi inspektora do rozwiązywania problemów związanych z wyglądem szablonu:

• • Wyszukaj i opublikuj post na forum rozwoju CMS w 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 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 motywu , aby edytować style strony bez pisania kodu.
  • Jeśli korzystasz z szablonu zakupionego w Asset Marketplace, skontaktuj się z projektantem szablonu w celu uzyskania odpowiedzi na pytania dotyczące projektu strony.