Przejdź do treści
Uwaga: Tłumaczenie tego artykułu jest podane wyłącznie dla wygody. Tłumaczenie jest tworzone automatycznie za pomocą oprogramowania tłumaczącego i mogło nie zostać sprawdzone. W związku z tym, angielska wersja tego artykułu powinna być uważana za wersję obowiązującą, zawierającą najnowsze informacje. Możesz uzyskać do niej dostęp tutaj.
Design Manager

Użyj inspektora, aby nadać styl swojemu szablonowi

Data ostatniej aktualizacji: października 18, 2021

Dotyczy:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Wcześniejsze konto Marketing Hub Basic

Gdy już ustrukturyzowałeś swój szablon i dodałeś domyślną zawartość, czas pomyśleć o estetycznej prezentacji witryny.

Inspektor znajduje się po prawej stronie menedżera projektów. To tutaj możesz edytować właściwości układu, modułu lub grupy, a także dodawać moduły do układu metodą "przeciągnij i upuść". Jeśli chodzi o stylizację szablonu, możesz użyć inspektora, aby:

  • Dołączać arkusze stylów lub pliki JavaScript do swojego szablonu
  • Dodawać znaczniki HTML nagłówka lub stopki do swojego szablonu
  • Dodawać własne klasy CSS i stylizację inline do określonego modułu lub grupy

Dostosować opcje nagłówka i ciała Twojego szablonu

Kiedy wejdziesz do swojego szablonu w menedżerze projektów, zobaczysz inspektor układu po prawej stronie, jeśli nie masz zaznaczonych żadnych modułów. Zmiany dokonane w inspektorze układu będą miały wpływ na cały szablon. Tutaj możesz dostosować opcje nagłówka i treści szablonu.

Dołączanie arkuszy stylów i plików JavaScript

W opcjachPołączonearkusze stylów iPołączone pliki JavaScriptkliknij przyciskDodaj, aby wybrać arkusz stylów lub plik JavaScript, który ma zostać dołączony do szablonu. Możesz także wybrać opcję dołączenia, wykluczenia lub użycia domyślnych arkuszy stylów domeny w menu rozwijanymDomain stylesheets (Domain stylesheets).

Możesz dowiedzieć sięwięcej o tym, jaktworzenia i edycji plików CSS do stylizacji witryny tutaj.

Dodaj znacznik HTML nagłówka lub stopki

W polachDodatkowy znacznik <head>iDodatkowy znacznik przed </body>, możesz dodać znacznik HTML nagłówka lub stopki, który zostanie zastosowany do szablonu.

Dodaj klasę lub stylizację inline do ciała szablonu

W poluKlasy ciała, możesz dodać atrybut klasy ciała do szablonu. Możesz także dodać stylizację inline do HTML ciała szablonu w poluInlinebody styling.

Dostosuj opcje stylizacji swojego modułu lub grupy

Gdy zaznaczysz określony moduł w swoim szablonie, pojawi się inspektor modułów. Gdy zaznaczysz grupę modułów w swoim szablonie, pojawi się inspektor grupy. Inspektor ten pozwala na dostosowanie opcji stylizacji modułu lub grupy.

W zależności od tego, czy dostosowujesz moduł szablonu wiadomości e-mail, moduł strony, czy grupę modułów, prezentowane opcje stylizacji będą się różnić. Poniższy przykład pokazuje opcje stylizacji, które są dostępne dla modułu bogatego tekstu w szablonie strony.

Dodaj klasę CSS

Atrybut klasy HTML pozwala na przypisanie klas do modułów w szablonach, dzięki czemu mogą one być stylizowane za pomocą CSS. Podczas gdy Twój szablon będzie już posiadał wiele domyślnych klas, niestandardowe klasy dają projektantom większą kontrolę nad wyglądem szablonu, zachowując przy tym elastyczność edytora układów typu "przeciągnij i upuść".

W powyższym przykładzie, "bio" jest dodane do polaklasy CSSw module bogatego tekstu. Spowoduje to dodanie atrybutu HTMLclass="bio" do znacznika div kontenera modułu (znacznik HTML określający obszar lub dział strony). Klasabio, lub elementy w ramach tej klasy, mogą teraz zostać wykorzystane w arkuszu stylów twojego szablonu.

Uwaga:ta opcjaniejestzalecanado stosowania w szablonach wiadomości e-mail, ponieważ znaczniki stylunie są obsługiwane przez niektóre klienty poczty elektronicznej.

W arkuszu stylów szablonumożesz określić docelowy styl kontenera div poprzez wybranie niestandardowej klasy i zastosowanie różnych właściwości CSS. Na przykład, aby dodać kolor tła do modułu z klasąbio, możesz napisać CSS jak w poniższym przykładzie:

.bio {
background: #CCCCCCCC;
}

Możesz także chcieć kierować na elementywewnątrzmodułu, nie tylko na div kontenera. Aby to zrobić, możesz użyć selektorów zagnieżdżonych lub bezpośrednio potomnych. Na przykład, aby przypisać wszystkim akapitom w module klasębio, możesz napisać zagnieżdżony selektor CSS, jak w poniższym przykładzie:


.bio p {
color: #000000;
}

Dodaj stylizację inline

Stylizacja inline to CSS, który jest napisany wewnątrz znaczników HTML. Dodanie właściwości CSS i wartości do pola StylizacjaInlinedla modułu lub grupy spowoduje zastosowanie twojego kodu do div kontenera modułu lub grupy.

W powyższym przykładzie, margin i color są użyte do dostosowania odstępów i koloru modułu. To spowoduje dodanie atrybutu HTMLstyle="margin-top:30px; color: #00349e;"do znacznika div kontenera modułu.

Podczas gdy ta opcja może być przydatna do szybkich poprawek dla konkretnego szablonu strony, jest ona mniej elastyczna niż użycie polaklasy CSS, ponieważ musisz dokonać zmian kodu w poszczególnych modułach, a nie w globalnym arkuszu stylów szablonu.

Klienci poczty elektronicznej są bardziej ograniczeni w swoichmożliwości renderowania HTML i CSSniż nowoczesne przeglądarki internetowe. W związku z tym, stylizacja inline jest najlepszym sposobem na stylizację wiadomości e-mail, aby były obsługiwane przez wszystkie klienty poczty. Moduły szablonów wiadomości e-mail posiadają dodatkowe, przyjazne dla użytkownika opcje dodawania stylizacji inline, pokazane poniżej.

Dodaj HTML do zawijania

Chociaż edytor układów typu "przeciągnij i upuść" nie daje pełnego dostępu do znaczników HTML szablonu, możesz dodać dodatkowe HTML wokół niektórych modułów. Ta opcja jest przeznaczona dla projektantów, którzy potrzebują dodatkowej kontroli nad HTML-em szablonu, ale nadal chcą zachować elastyczność edytora drag-and-drop nad surowym HTML-em szablonu.

Aby zaimplementować tę funkcję, dodaj swój znacznik HTML itoken HTML HubL (w którym będzie renderowany kod modułu) do polaHTML zawijania. Wcześniejszy przykład pokazuje tag HTML5<aside>owijający moduł.

Dodaj identyfikator CSS (tylko grupy modułów)

Atrybut HTML ID jest dostępny jako opcja w każdej grupie modułów. Identyfikatory są podobne do klas w tym sensie, że pozwalają przypisać obszary szablonu, do których ma być skierowany arkusz stylów. Jednakże, w przeciwieństwie do klas, ID muszą byćunikalne(pojawiają się tylko raz w szablonie) i mają większą wagę niż klasy, jeśli chodzi ospecyfikę CSS.

W poniższym przykładzie, grupie modułów na stronie nadano ID "sidebar" w poluCSS ID. Spowoduje to dodanie atrybutu HTMLid="sidebar"do znacznika div kontenera grupy modułów. Identyfikatorpaska bocznegolub elementy w ramach tego identyfikatora mogą być teraz wykorzystywane w arkuszu stylów twojego szablonu.

Na przykład, aby dodać czerwoną ramkę do grupy z IDpaskabocznego, możesz napisać CSS jak w poniższym przykładzie:

#sidebar {
border: 1px solid red;
}