Hoppa till innehåll
Observera: Översättningen av denna artikel är endast avsedd att underlätta för dig. Översättningen har skapats automatiskt med hjälp av en översättningsprogramvara och har eventuellt inte korrekturlästs. Den engelska versionen av denna artikel bör därför betraktas som den gällande versionen med den senaste informationen. Du kan komma åt den här.
Design Manager

Använd inspektören för att skapa en stil för mallen

Senast uppdaterad: november 2, 2021

Gäller för:

Marknadsföring Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Tidigare Marketing Hub Basic

När du har strukturerat din mall och lagt till standardinnehåll är det dags att tänka på hur webbplatsen ska se ut.

Inspektören finns till höger i designhanteraren. Det är här du kan redigera egenskaperna för en layout, modul eller grupp, samt lägga till moduler till en drag-och-släpp-layout. När det gäller att styla din mall kan du använda inspektören för att:

  • Bifoga formatmallar eller JavaScript-filer till din mall.
  • Lägga till HTML-markering för rubrik eller sidfot till din mall.
  • Lägga till anpassade CSS-klasser och inline-formgivning till en specifik modul eller grupp.

Anpassa mallens huvud- och kroppsalternativ.

När du öppnar din mall i designhanteraren visas layoutinspektören på höger sida om du inte har några moduler valda. Ändringar som görs i layoutinspektören påverkar hela mallen. Här kan du anpassa mallens huvud- och kroppsalternativ.

Bifoga formatmallar och JavaScript-filer

I alternativenLänkade formatmallarochlänkade JavaScript-filerklickar du påLägg tillför att välja en formatmall eller JavaScript-fil som ska bifogas mallen. Du kan också välja att inkludera, utesluta eller använda domänens standardformatmallar i rullgardinsmenynDomänformatmallar.

Du kanläsa mer om hur duskapa och redigera CSS-filer för att skapa stilar på din webbplats här.

Lägg till HTML-markering för huvud- eller sidfot

I fältenAdditional <head> markupochAdditional markup before </body>kan du lägga till HTML-markering för rubrik eller fot som ska tillämpas på mallen.

Lägg till en klass eller en inline-formgivning i mallens kropp

I fältetBody classeskan du lägga till ett attribut för body class till mallen. Du kan också lägga till inline-formgivning till HTML-kroppen i mallen i fältetInline body styling.

Anpassa modulens eller gruppens stylingalternativ.

När du väljer en specifik modul i din mall visas modulinspektören. När du väljer en grupp av moduler i mallen visas gruppinspektören. I inspektören kan du anpassa modulens eller gruppens stylingalternativ.

Beroende på om du anpassar en e-postmallsmodul, en sidmodul eller en modulgrupp varierar de stylingalternativ som presenteras för dig. Exemplet nedan visar de stylingalternativ som är tillgängliga för en rik textmodul i en sidmall.

Lägg till en CSS-klass

MedHTML-klassattributet kan du tilldela klasser till moduler i dina mallar så att de kan stylas med hjälp av CSS. Även om din mall redan har många standardklasser, ger anpassade klasser designers mer kontroll över utseendet på en mall, samtidigt som de behåller flexibiliteten hos drag-och-släpp-layoutredigeraren.

I exemplet ovan läggs "bio" till i fältetCSS-klassi rich text-modulen. Detta kommer att lägga till HTML-attributetclass="bio" till modulens container div-tagg (en HTML-tagg som anger ett område eller en uppdelning av en sida).Bio-klassen, eller element inom denna klass, kan nu användas som målgrupp i formatmallens formatmall.

Observera:det här alternativetrekommenderas inteför användning i e-postmallar eftersom stiltaggarinte stöds av vissa e-postklienter.

I formatmallens formatmallkan du styla containerdiv:n genom att välja din anpassade klass och tillämpa olika CSS-egenskaper. Om du till exempel vill lägga till en bakgrundsfärg till modulen med klassenbiokan du skriva CSS som i exemplet nedan:

.bio {
bakgrund: #CCCCCCCC;
}

Du kanske också vill rikta in dig på elementimodulen, inte bara på containerdivisionen. För att göra det kan du använda inbäddade eller direkt nedstigande selektorer. Om du till exempel vill rikta in all stycketext i modulen med klassenbiokan du skriva en inbäddad CSS-selektor som i exemplet nedan:


.bio p {
color: #000000;
}

Lägg till inline-stil

Inline styling är CSS som skrivs i HTML-taggarna. Om du lägger till CSS-egenskaper och -värden i fältetInline stylingför en modul eller grupp kommer din kod att tillämpas på modulens eller gruppens container div.

I exemplet ovan används marginal och färg för att justera modulens avstånd och färg. Detta lägger till HTML-attributetstyle="margin-top:30px; color: #00349e;"till modulens container div-tagg.

Det här alternativet kan vara användbart för snabba lösningar för en viss sidmall, men det är mindre flexibelt än att användaCSS-klassfältet eftersom du måste göra kodändringar i enskilda moduler i stället för i ett globalt formatmallformat.

E-postklienter är mer begränsade i sinaHTML- och CSS-renderingsmöjligheter.än moderna webbläsare. Därför är inline-formgivning det bästa sättet att formge din e-post så att den stöds av alla e-postklienter. Moduler för e-postmallar har ytterligare användarvänliga alternativ för att lägga till inline-formgivning, se nedan.

Lägg till omslags-HTML

Även om layoutredigeraren med drag-och-släpp inte ger full tillgång till en malls HTML-markering kan du lägga till ytterligare omslags-HTML runt vissa moduler. Det här alternativet är för designers som behöver ytterligare kontroll över en malls HTML, men som ändå vill behålla flexibiliteten i att använda layoutredigeraren för dra-och-släpp över en rå HTML-mall.

Om du vill implementera den här funktionen lägger du till din HTML-markering ochHTML HubL-token (där modulens kod kommer att återges) i fältetWrapping HTML. Det tidigare exemplet visar en HTML5<aside>-taggsom omsluter modulen.

Lägg till ett CSS-ID (endast modulgrupper)

HTML ID-attributet är tillgängligt som ett alternativ för alla modulgrupper. ID:er liknar klasser i det avseendet att de gör det möjligt att tilldela områden i mallen som ska vara målinriktade i formatmallen. Men till skillnad från klasser måste ID:n varaunika(de får bara förekomma en gång per mall) och har större betydelse än klasser när det gällerCSS-specificitet.

I exemplet nedan får en grupp moduler på en sida ID:et "sidebar" i fältetCSS-ID. Detta kommer att lägga till HTML-attributetid="sidebar"till modulgruppens div-tagg container.Sidebar-ID:t, eller element inom detta ID, kan nu användas som målgrupp i formatmallens formatmall.

Om du till exempel vill lägga till en röd kant till gruppen medsidebar-IDkan du skriva CSS som i exemplet nedan:

#sidebar {
border: 1px solid red;
}