Zrozumieć źródło stylizacji strony
Data ostatniej aktualizacji: stycznia 20, 2023
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.
- CSS modułu niestandardowego
- Arkusze stylów dołączone do modułu.
- CSS dodany do sekcji CSS modułu modułu.
- CSS wewnątrz znacznika HubL modułu w bloku require_css
- Arkusze stylów dodane do szablonu za pomocą narzędzia blok require_css
- Domyślne arkusze stylów HubSpot (na przykład layout.css).
- Arkusze stylów dołączone do szablonu
- Arkusze stylów dołączone na karcie ustawień strony
- Arkusze stylów dołączone w ustawieniach dla wszystkich domen
- Arkusze stylów dołączone w ustawieniach dla konkretnejdomeny
- CSS dodany wewnątrz znaczników <style>. Na przykład w nagłówku HTML ustawień witryny, ustawień strony lub szablonu.
- 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 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. 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>.
- 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.
Więcej szczegółów na temat sprawdzania strony znajdziesz w dokumentacji pomocy swojej przeglądarki internetowej:
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.
Thank you for your feedback, it means a lot to us.
Powiązana treść
-
Struktura i dostosowywanie układów szablonów
Dowiedz się, jak skonfigurować i dostosować istniejący szablon metodą "przeciągnij i upuść" oraz jak pracować...
Baza wiedzy -
Tworzenie i edycja modułów
W narzędziu menedżera projektu możesz tworzyć niestandardowe zakodowane moduły, aby dodać zaawansowane...
Baza wiedzy -
Zbuduj własny, zakodowany szablon
Deweloperzy mogą budować blogi, strony internetowe, strony docelowe i szablony e-mail od podstaw za pomocą...
Baza wiedzy