Design Manager

Gebruik de inspecteur om uw sjabloon te stylen

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

Zodra u uw sjabloon hebt gestructureerd en wat standaard inhoud hebt toegevoegd, is het tijd om na te denken over de esthetische presentatie van uw site.

De inspecteur bevindt zich aan de rechterzijde van de designmanager. Hier kunt u de eigenschappen van een lay-out, module of groep bewerken en modules toevoegen aan een drag and drop lay-out. Als het gaat om het stylen van uw template, kunt u de inspector gebruiken om:

  • Voeg stylesheets of JavaScript-bestanden toe aan uw sjabloon
  • Voeg Head of Footer HTML markup toe aan uw sjabloon
  • Aangepaste CSS-klassen en inline styling toevoegen aan een specifieke module of groep

Pas de hoofd- en lichaamsopties van uw sjabloon aan

Wanneer u uw sjabloon in de ontwerpmanager opent, ziet u de lay-outinspecteur aan de rechterkant als u geen modules hebt geselecteerd. Edits die in de lay-out inspector worden gemaakt, hebben invloed op de gehele template. Hier kunt u de hoofd- en lichaamsopties van uw sjabloon aanpassen.

Voeg stylesheets en JavaScript-bestanden toe

Klikin deoptiesGekoppelde stylesheets enGekoppeldeJavaScript-bestanden op Toevoegenom een stylesheetofeen JavaScript-bestand te selecteren dat aan het sjabloon moet worden toegevoegd. U kunt er ook voor kiezen om domein standaard stylesheets op te nemen, uit te sluiten of te gebruiken in de Domeinstylesheets dropdown.

U kuntmeerlerenover hoe uhier CSS-bestanden maken en bewerken om uw site te stijlen.

Kop of Voettekst toevoegen HTML markup

In develdenExtra <head> markup en Extramarkupvoor </body> kunt u Head ofFooter HTML markuptoevoegendie van toepassing zal zijn op het sjabloon.

Voeg een klasse of inline styling toe aan de template body

In het veldLichaamsklassenkunt u een lichaamsklasse-attribuut aan het sjabloon toevoegen. U kunt ook inline styling toevoegen aan de body HTML van het sjabloon in het veldInlinebody styling.

Pas de stylingopties van uw module of groep aan

Wanneer u een specifieke module in uw sjabloon selecteert, verschijnt de module-inspecteur. Wanneer u een groep modules in uw sjabloon selecteert, verschijnt de groepsinspecteur. Met de inspector kunt u de stylingopties van de module of groep aanpassen.

Afhankelijk van het feit of u een e-mailtemplate, een paginamodule of een modulegroep aanpast, zullen de stylingopties die aan u worden gepresenteerd variëren. Het onderstaande voorbeeld toont de opmaakopties die beschikbaar zijn voor een rijke tekstmodule in een paginasjabloon.

Een CSS-klasse toevoegen

Met hetHTML-klassenattribuut kunt u klassen toewijzen aan modules in uw sjablonen, zodat ze kunnen worden gestyled met behulp van CSS. Terwijl uw sjabloon al veel standaard klassen heeft, geven aangepaste klassen de ontwerpers meer controle over het uiterlijk van een sjabloon, terwijl de flexibiliteit van de drag-and-drop lay-out editor behouden blijft.

In het bovenstaande voorbeeld wordt "bio" toegevoegd aan het CSS Classveld in derich text module. Dit voegt het HTML-attribuut class="bio" toe aan de container div-tag van de module (een HTML-tag die een gebied of afdeling van een pagina specificeert). De bio-klasse, ofelementen binnen deze klasse, kunnen nu worden gericht in uw template stylesheet.

Let op: dezeoptie wordt nietaanbevolen voor gebruik ine-mailtemplates, omdat style-tags niet worden ondersteund doorsommige e-mailclients.

In uw sjabloonstylesheetU kunt de container div naar stijl richten door uw aangepaste klasse te selecteren en verschillende CSS-eigenschappen toe te passen. Om bijvoorbeeld een achtergrondkleur toe te voegen aan de module met de bio-klasse,kunt u CSS schrijven zoals in het voorbeeld hieronder:

.bio {
achtergrond: #CCCCCC;
}

Het kan ook zijn dat u zich wilt richten op elementenbinnen uwmodule, niet alleen op de container div. Hiervoor kunt u gebruik maken van genestelde of directe afstammelingsselectoren. Om bijvoorbeeld alle paragraaftekst binnen de module te targeten met de bio-klasse,kunt u een geneste CSS-selector schrijven zoals in het voorbeeld hieronder:


.bio p {
Kleur: #000000;
}

Voeg inline styling toe

Inline styling is CSS die binnen uw HTML-tags wordt geschreven. Het toevoegen van CSS eigenschappen en waarden aan het Inlinestyling veld vooreen module of groep zal uw code toepassen op de module of groepscontainer div.

In het bovenstaande voorbeeld worden marge en kleur gebruikt om de afstand en de kleur van de module aan te passen. Dit zal het HTML-attribuut style="marge-top:30px; kleur" toevoegen:#00349e;" aande container div tag van de module.

Hoewel deze optie nuttig kan zijn voor snelle fixes voor een bepaald paginasjabloon, is het minder flexibel dan het gebruik van hetCSS-klasseveld omdat u codewijzigingen moet maken binnen afzonderlijke modules, in plaats van in een globaal sjabloonstylesheet.

E-mailcliënten zijn beperkter in hunHTML en CSS rendering mogelijkhedendan moderne webbrowsers. Als zodanig is inline styling de beste manier om uw e-mails te stylen om te worden ondersteund via e-mailclients. E-mail template modules hebben extra gebruiksvriendelijke opties voor het toevoegen van inline styling, zoals hieronder weergegeven.

Wikkel HTML toevoegen

Hoewel de drag-and-drop layout editor geen volledige toegang biedt tot de HTML markup van een sjabloon, kunt u extra wrapping HTML toevoegen rond bepaalde modules. Deze optie is voor ontwerpers die extra controle over de HTML van een sjabloon nodig hebben, maar toch de flexibiliteit willen behouden om de drag-and-drop lay-out editor over een ruwe HTML-sjabloon te gebruiken.

Om deze functie te implementeren, voegt u uw HTML markup en het HTMLHubL token (waarde code van de module wordt weergegeven) toe aan het WrappingHTML-veld.Het vorige voorbeeld toont een HTML5<aside> tag diede module omwikkelt.

Voeg een CSS ID toe (alleen modulegroepen)

HetHTML-ID-attribuut is als optie beschikbaar op elke modulegroep. ID's zijn vergelijkbaar met klassen in die zin dat ze u in staat stellen gebieden van uw sjabloon toe te wijzen om gericht in uw stylesheet te worden gebruikt. Echter, in tegenstelling tot klassen, moeten ID'suniekzijn (slechts eenmaal per sjabloon verschijnen) en meer gewicht hebben dan klassen in termen van CSS-specificiteit.

In het onderstaande voorbeeld krijgt een groep modules op een pagina een ID van "sidebar" in het CSSID-veld.Dit voegt het HTML-attribuut id="sidebar"toeaande container div-tag van demodulegroep. De sidebarID, ofelementen binnen deze ID, kunnen nu worden gericht in uw template stylesheet.

Om bijvoorbeeld een rode rand toe te voegen aan de groep met het sidebarID,kunt uCSS schrijven zoals in het voorbeeld hieronder:

#zijbalk {
grens: 1px massief rood;
}