Zrozumieć źródło stylizacji strony

W HubSpot istnieje wiele miejsc, w których można dodawać stylizację treści, 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 bieżącej stronie 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ń 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

Aby sprawdzić style zastosowane w witrynie na żywo lub na stronie podglądu, można użyć narzędzi deweloperskich w przeglądarce. 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 sprawdzić, a następnie wybierz polecenieSprawdź.
• W okienkuElementy 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 okna, aby kliknąć elementy na stronie.

  

• W okienku Style po prawej stronie widoczne są wszystkie style zastosowane do danego elementu. Można zaznaczać i usuwać zaznaczenia w polach 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 znajduje się nazwa źródła dla danego stylu, która informuje o tym, skąd pochodzi dany styl. Najedź kursorem na nazwę źródła, aby wyświetlić jej 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 słowa module, to prawdopodobnie stylizacja 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. You'Najczęściej spotykamy się z tym w przypadku stylizacji ogólnych znaczników HTML, takich jak <p>, <h1>, <h2>, <span>, <div> itd. Ta stylizacja jest stosowana, gdy przeglądarka nie może znaleźć ogólnych reguł stylizacji dla danego elementu, ale można ją nadpisać, dodając własne style do tego elementu.
    
    
  • Jeśli nazwą źródła jest adres URL strony, CSS pochodzi ze znaczników <style> znajdujących się 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 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 dołączana automatycznie do elementu. Często jest to spowodowane stylizacją ustawioną w edytorze osadzanego zasobu HubSpot, takiego jak CTA lub widżet 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 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 przy 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 zasobów umożliwiających uzyskanie dodatkowej pomocy 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 związanych z projektowaniem szablonu:

• • Wyszukaj i napisz 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.
  • 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 posiadającym doświadczenie 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 korzystasz z szablonu zakupionego w serwisie Asset Marketplace,skontaktuj się z projektantem szablonuw przypadku pytań dotyczących wyglądu strony.