Doorgaan naar artikel
Let op: De Nederlandse vertaling van dit artikel is alleen bedoeld voor het gemak. De vertaling wordt automatisch gemaakt via een vertaalsoftware en is mogelijk niet proefgelezen. Daarom moet de Engelse versie van dit artikel worden beschouwd als de meest recente versie met de meest recente informatie. U kunt het hier raadplegen.
Design Manager

Gebruik de inspector om uw sjabloon op te maken

Laatst bijgewerkt: april 2, 2021

Geldt voor:

Marketing 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.

Aan de rechterkant van de design manager bevindt zich de inspector. Hier kunt u de eigenschappen van een lay-out, module of groep bewerken, maar ook modules toevoegen aan een drag-and-drop lay-out. Als het gaat om de styling van uw sjabloon, kunt u de inspecteur gebruiken om:

  • stylesheets of JavaScript-bestanden aan uw sjabloon te koppelen
  • Hoofd of Voettekst HTML markup aan uw sjabloon toe te voegen
  • Aangepaste CSS klassen en inline styling toe te voegen aan een specifieke module of groep

De hoofd- en body-opties van uw sjabloon aan te passen

Wanneer u uw sjabloon opent in de ontwerpmanager, ziet u de lay-out-inspecteur aan de rechterkant als u geen modules hebt geselecteerd. Wijzigingen in de lay-out inspector zullen invloed hebben op de gehele sjabloon. Hier kunt u de hoofd- en body-opties van uw sjabloon aanpassen.

Koppel stylesheets en JavaScript bestanden

Klikin deoptiesGekoppelde stylesheets enGekoppeldeJavaScript-bestanden op Toevoegenom een stylesheetofJavaScript-bestand te selecteren dat u aan de sjabloon wilt koppelen. U kunt ook kiezen om domeinstandaard stylesheets op te nemen, uit te sluiten of te gebruiken in de vervolgkeuzelijstDomein stylesheets.

U kuntmeer leren over hoe uCSS-bestanden maakt en bewerkt om uw site op te maken.

Voeg Kop of Voettekst HTML markup toe

In develdenExtra <head>-opmaak en Extraopmaakvoor </body> kunt uHTML-opmaakvoor kop ofvoettekst toevoegen die op de sjabloon wordt toegepast.

Een klasse of inline styling toevoegen aan de body van de sjabloon

In het veld Bodyclasseskunt u een body class attribuut toevoegen aan de template. U kunt ook inline styling toevoegen aan de body HTML van de template in het Inlinebody styling veld.

Pas de stylingopties van uw module of groep aan

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

Afhankelijk van of u een email sjabloon module, een pagina module, of een module groep aanpast, zullen de styling opties die u gepresenteerd worden verschillen. Het onderstaande voorbeeld toont de stylingopties die beschikbaar zijn voor een rijke tekstmodule in een paginasjabloon.

Een CSS-klasse toevoegen

Met hetHTML-klasse attribuut kunt u klassen toewijzen aan modules in uw sjablonen, zodat ze kunnen worden opgemaakt met CSS. Hoewel uw sjabloon al veel standaardklassen heeft, geven aangepaste klassen ontwerpers meer controle over het uiterlijk van een sjabloon, terwijl ze toch de flexibiliteit van de drag-and-drop lay-out-editor behouden.

In het voorbeeld hierboven is "bio" toegevoegd aan het CSS Klasseveld in derich text module. Hierdoor wordt het HTML-attribuutclass="bio" toegevoegd aan de div-tag van de modulecontainer (een HTML-tag die een gebied of divisie van een pagina specificeert). De bioklasse, ofelementen binnen deze klasse, kunnen nu worden getarget in de stylesheet van je sjabloon.

Let op: dezeoptie wordt nietaanbevolen voor gebruik inemail templates omdat style tags doorsommige email clients niet worden ondersteund.

In je sjabloon stylesheetkunt u de container div een stijl geven door uw aangepaste klasse te selecteren en verschillende CSS eigenschappen toe te passen. Bijvoorbeeld, om een achtergrond kleur toe te voegen aan de module met de bio klasse,zou U CSS kunnen schrijven zoals het voorbeeld hieronder:

.bio {
background: #CCCCCC;
}

Het kan ook zijn dat je elementenbinnen jemodule wilt targeten, niet alleen de container div. Om dit te doen, kun je geneste of direct afgeleide selectors gebruiken. Bijvoorbeeld, om alle paragraaf tekst binnen de module te targeten met de bio klasse,zou je een geneste CSS selector kunnen schrijven zoals het voorbeeld hieronder:


.bio p {
color: #000000;
}

Inline styling toevoegen

Inline styling is CSS die wordt geschreven binnen uw HTML tags. Door CSS eigenschappen en waarden toe te voegen aan het Inlinestyling veld vooreen module of groep zal uw code worden toegepast op de module of groep container div.

In het voorbeeld hierboven worden margin en color gebruikt om de spatiëring en de kleur van de module aan te passen. Dit voegt het HTML attribuut style="margin-top:30px; color: #00349e;" aande module's container div tag.

Hoewel deze optie handig kan zijn voor snelle reparaties voor een bepaald paginasjabloon, is ze minder flexibel dan het gebruik van het CSSklasse-veld, omdat je codewijzigingen moet aanbrengen binnen individuele modules, in plaats van in een globaal sjabloon-stylesheet.

E-mail clients zijn meer beperkt in hunHTML en CSS rendering mogelijkhedendan moderne web browsers. Daarom is inline styling de beste manier om uw e-mails zo op te maken dat ze door alle e-mailclients worden ondersteund. Email template modules hebben extra gebruiksvriendelijke opties voor het toevoegen van inline styling, zoals hieronder getoond.

HTML-omslag toevoegen

Hoewel de drag-and-drop opmaakeditor 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 nodig hebben over de HTML van een sjabloon, maar toch de flexibiliteit willen behouden van het gebruik van de drag-and-drop opmaakeditor over een onbewerkt HTML-sjabloon.

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

Voeg een CSS ID toe (alleen module groepen)

Het HTMLID attribuut is beschikbaar als een optie op elke module groep. ID's zijn vergelijkbaar met klassen in die zin dat ze je in staat stellen om gebieden van je template toe te wijzen aan een doel in je stylesheet. In tegenstelling tot klassen moeten ID's echteruniekzijn (ze mogen maar één keer per sjabloon voorkomen) en hebben ze meer gewicht dan klassen in termen van CSS specificiteit.

In het voorbeeld hieronder krijgt een groep modules op een pagina een ID van "sidebar" in het CSSID veld.Hierdoor wordt het HTML-attribuut id="sidebar" toegevoegd aan dediv-tag van de containergroep van de module. De sidebarID, ofelementen binnen deze ID, kunnen nu worden aangepast in uw template stylesheet.

Bijvoorbeeld, om een rode rand toe te voegen aan de groep met de sidebarID,zou jeCSS kunnen schrijven zoals het voorbeeld hieronder:

#sidebar {
border: 1px solid red;
}