Zrozumienie źródła stylizacji strony

W HubSpot istnieje wiele miejsc, w których można dodać stylizację treści, a jest ona stosowana w określonej kolejności w zależności od miejsca dodania. W tym artykule dowiesz się, jak stosowana jest stylizacja, jak znaleźć stylizację na aktywnej stronie oraz jak uzyskać pomoc w zakresie edycji projektu.

Zrozum, jak stosowane są style

Style są stosowane w określonej kolejności w zależności od miejsca, w którym zostały dodane w HubSpot. Na przykład style dodane w globalnym arkuszu stylów są zastępowane przez style dodane na konkretnej stronie. 

Skorzystaj z poniższej listy, aby zrozumieć źródło stylizacji strony, zaczynając od stylów zastosowanych jako pierwsze, a kończąc na stylach zastosowanych jako ostatnie.

1. Niestandardowy moduł CSS
   • Arkusze stylów dołączone do modułu w edytorze układu.

• • CSS dodany do sekcjimodule.css modułu w edytorze modułów.

1. • CSS wewnątrz znaczników HubL modułu w bloku bloku require_css.
2. Arkusze stylów dodane do szablonu za pomocą bloku require_css w edytorze kodu.
3. Domyślne arkusze stylów HubSpot (np. layout.css) w menedżerze projektów.
4. Arkusze stylów dołączone do szablonu w edytorze układu.

5. Arkusze stylów dołączone w zakładce ustawień Twojej 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 dodane w tagach <style>. Na przykład nagłówek HTML ustawień witryny, ustawień strony lub szablonu.

9. Style dodane za pomocą edytora stron. HubSpot doda również tagi !important do tych stylów. Dowiedz się więcej o tagach !important w i ich wpływie na stylizację.

Znajdź stylizację na stronie podglądu lub aktywnej

Użyj narzędzi programistycznych w przeglądarce, aby znaleźć style zastosowane na Twojej aktywnej stronie internetowej lub stronie podglądu. Każda przeglądarka różni się nieco pod względem sposobu rozwiązywania problemów związanych ze stylami. W poniższym przykładzie użyto przeglądarki Google Chrome.

1. Przejdź do treści:
   • Na swoim koncie HubSpot przejdź do Treści > Strony witryny.
   • Na swoim koncie HubSpot przejdź do Treści > Strony docelowe.
2. Kliknij nazwę swojej strony.
3. W edytorze treści kliknij opcję Podgląd w prawym górnym rogu.
4. Na stronie podglądu kliknij Otwórz w nowej karcie.
5. W podglądzie kliknij prawym przyciskiem myszy element, który chcesz sprawdzić, a następnie wybierzopcję Sprawdź.
6. W okienkuElementy zobaczysz kod HTML strony. Kliknij elementy, aby wyświetlić ich style.
7. W okienku Style przejrzyj reguły CSS zastosowane do tego elementu. Zaznacz i usuń zaznaczenie pól wyboru obok każdego stylu, aby tymczasowo usunąć lub dodać style. Pomoże to zidentyfikować, która reguła ma wpływ na element.

8. Po prawej stronie reguł CSS zobaczysz nazwę źródła tego stylu. Potwierdza to, gdzie znajduje się źródło stylu. Najedź kursorem na nazwę źródła, aby wyświetlić pełną nazwę:
   • Jeśli styl pochodzi z pliku CSS, nazwa arkusza stylów pojawi się obok deklaracji CSS. Przejdź do menedżera projektów, znajdź arkusz stylów i wprowadź niezbędne zmiany.

• • Jeśli nazwa źródła zaczyna się od moduł, 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 , stylizacja jest częścią domyślnej stylizacji przeglądarki.
    • Zazwyczaj można to zaobserwować w przypadku stylizacji tagów HTML (np. <p>, <h1>, <span> itp.), gdy przeglądarka nie jest w stanie znaleźć reguł stylizacji dla danego elementu. 
    • Arkusz stylów agenta użytkownika można zastąpić, dodając własne style do tego elementu.

• • Jeśli nazwa źródła to adres URL strony, stylizacja pochodzi z tagów <style> na stronie. Na przykład stylizacja może być ustawiona w nagłówku HTML strony lub szablonu.

• • Jeśli nazwa źródła to adres URL strony, a stylizacja jest skierowana do #hs_cos_wrapper_module_number, stylizacja jest dodawana w zakładce Style edytora strony. HubSpot doda !important!important do tych stylów. Dowiedz się więcej o tagach !important i ich wpływie na stylizację.

• • Jeśli nazwa źródła to <style>, stylizacja jest automatycznie dołączana do elementu. Często wynika to z faktu, że stylizacja jest definiowana w edytorze osadzanych zasobów HubSpot, takich jak CTA lub widget spotkania.

• • Jeśli element.style pojawia się obok deklaracji w inspektorze, oznacza to, że CSS został ustawiony jako inline. Stylowanie inline to stylizacja dodana bezpośrednio do kodu źródłowego HTML strony lub pólstylizacji inline szablonu. Na przykład stylizacja inline w kodzie źródłowym wyglądałaby następująco <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

Pomoc dotycząca edycji projektu

Najlepszym źródłem informacji na temat wprowadzania zmian w szablonach lub arkuszach stylów HubSpot jest oryginalny projektant szablonów. Istnieje jednak wiele różnych zasobów, z których można skorzystać, aby uzyskać dodatkową pomoc w zakresie stylizacji treści, w zależności od poziomu znajomości rozwiązywania problemów związanych z HTML i CSS.

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

• • Wyszukaj i opublikuj post na forum poświęconym tworzeniu CMS w społeczności, aby uzyskać wskazówki, porady lub pomoc w rozwiązywaniu problemów związanych z kodem.
  • Zapoznaj się z dokumentacją referencyjną CMS, aby uzyskać samouczki, przewodniki i przegląd struktury CMS.
  • Skontaktuj 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 podczas czytania lub edytowania kodu HTML i CSS w szablonach:

• • Skontaktuj się z certyfikowanym partnerem HubSpot posiadającym doświadczenie w projektowaniu stron internetowych, który pomoże Ci dostosować szablony.
  • Użyj szablonu motywu, aby edytować style stron bez pisania kodu.
  • Jeśli korzystasz z szablonu zakupionego w Asset Marketplace,skontaktuj się z projektantem szablonu, aby uzyskać odpowiedzi na pytania dotyczące projektu strony.