Skapa och redigera moduler i designhanteraren

Med designhanteraren kan du skapa anpassade moduler för att lägga till avancerade funktioner i din blogg, dina sidor eller dina e-postmeddelanden. Anpassade moduler erbjuder ett brett utbud av funktioner så att innehållet kan anpassas helt och hållet i sid-, e-post- eller bloggredigeraren.

Observera: För att skapa moduler krävs kunskap om HTML, CSS, HubL och HubSpot designhanterare. HubSpot rekommenderar att man arbetar med en utvecklare för att skapa kodade moduler.

Skapa en ny modul

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på rullgardinsmenyn Fil längst upp i sökaren och välj Ny fil.

3. I dialogrutan klickar du på rullgardinsmenyn Vad vill du bygga idag? och väljer Modul.
4. Klicka på Nästa.
5. I fältet Var vill du använda den här modulen markerar du kryssrutan bredvid varje typ av innehåll där din modul ska användas (t.ex. Blogginlägg, E-post eller Landningssidor). 
6. I fältet Omfattning av modulinnehåll väljer du ett alternativ (t.ex. Lokal modul eller Global modul). Om du skapar en global modul kommer redigering av modulens innehåll att uppdatera alla platser där modulen används. 
7. Ange ett filnamn för modulen.
8. Om du vill ändra modulens filplacering klickar du på Ändra i avsnittet Filplacering . Välj en ny plats i Popup-rutan och klicka sedan på Välj.
9. När du är klar klickar du på Skapa.
10. Fortsätt att redigera modulen.

Observera: moduler som används i e-postmeddelanden kan endast skapas på konton med en Marketing Hub Professional- eller Enterprise-prenumeration . De kan inte innehålla CSS eller JavaScript. 

Redigera en modul

När du har skapat en modul i designhanteraren kan du anpassa dess funktionalitet och utseende. Märk modulen för tydlighetens skull, lägg till och konfigurera fält och justera fältredigerarens alternativ, t.ex. standardinnehåll. Ställ in visningsvillkor och repeateralternativ och gruppera de relaterade fälten för bättre organisation. Du kan också kopiera och klistra in avsnitt om fält, skriva anpassad modulsyntax, lägga till användbar instruktionstext och redigera vilka typer av mallar som din modul kan användas med.

Lägga till en etikett till en modul

I designhanteraren kan du lägga till eller uppdatera en etikett för en modul för att hjälpa användarna att identifiera den i innehållsredigeraren. Om etiketten är tom kommer modulens namn att visas som standard.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul som du vill redigera etiketten för.
3. Ange en etikett i inspektören.

Lägga till fält i en modul

Lägg till fält i en modul för att ställa in modulens innehåll eller styling och göra den redigerbar i innehållsredigeraren. Läs mer om tillgängliga fälttyper. 

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. Klicka på rullgardinsmenyn Lägg till fält i fältavsnittet i inspektören. Välj sedan ett fält som du vill lägga till i modulen.

4. Om du vill redigera fältets namn klickar du på edit ikonen och ange ett nytt namn. Om du vill redigera namnet på HubL-variabeln anger du ett nytt namn i fältet HubL-variabelns namn . 

Anpassa fältets standardinnehåll

I avsnittet Innehållsalternativ kan du lägga till standardinnehåll som visas när modulen används i mallar och innehållsredigerare. Alternativen för standardinnehåll skiljer sig åt beroende på fälttyp.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. Håll muspekaren över ett fält i inspektören i avsnittet Fält och klicka på Redigera.
4. I avsnittet Innehållsalternativ lägger du till eller redigerar standardinnehållsalternativ. De tillgängliga alternativen för standardinnehåll beror på vilken fälttyp som har valts.

Om du till exempel lägger till en fälttyp för datum och tid i en modul kan du välja ett standarddatum och en standardtid. Du kan också ange ett förinställt tidsintervall.

Ange alternativ för fältredigerare

I avsnittet Editor Options kan du göra ett fält obligatoriskt och förhindra redigering i innehållsredigeraren. Du kan också anpassa hjälptexten. 

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. Håll muspekaren över ett fält i inspektören i avsnittet Fält och klicka på Redigera.
4. Om du vill att fältet ska vara obligatoriskt aktiverar du knappen Make this field required i avsnittet Editor options . Detta förhindrar att användare lämnar fältet tomt i innehållsredigeraren.
5. Om du vill förhindra att innehållet i ett fält redigeras aktiverar du alternativet Förhindra redigering i innehållsredigerare . Innehållet i fältet kan fortfarande anpassas i designhanteraren på mallnivå. Detta alternativ är inte tillgängligt för globala moduler.
6. Om du vill lägga till sammanhang eller instruktioner om hur du använder fältet skriver du in text i textfältet Tooltip-hjälp eller i textfältet Inline-hjälp .
   • Hjälptext för verktygstips: den här texten visas i ett verktygstips när en användare håller muspekaren över infoCircleIcon info-ikonen i innehållsredigeraren.
   • Inline help text: denna text visas under fältet när en användare redigerar modulen i innehållsredigeraren.

Ställ in villkor för fältvisning

I avsnittet Visningsvillkor kan du använda villkor för fältvisning för att ställa in ett modulfält så att det bara visas om ett annat fält uppfyller vissa kriterier.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. Håll muspekaren över ett fält i inspektören i avsnittet Fält och klicka på Redigera.
4. I avsnittet Visningsvillkor klickar du på rullgardinsmenyn HubL-variabel och väljer en variabel. 
5. Klicka på den andra rullgardinsmenyn och välj ett alternativ (t.ex. Är lika med eller Är inte tom). Fler villkorsfält kan krävas, beroende på vilket alternativ som valts. Om du t.ex. väljer Är lika med krävs ett ytterligare värdefält.
6. Som standard aktiveras visningsvillkoren automatiskt när ett villkor har konfigurerats. Om du vill stänga av visningsvillkoren växlar du mellan Display Conditions och Off.

Ställ in alternativ för fältrepeater

I avsnittet Repeater options kan du konfigurera repeater-alternativ för fält och grupper. När repeateralternativen är aktiverade skapas och visas flera objekt med hjälp av en for slinga.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. Håll muspekaren över ett fält i inspektören i avsnittet Fält och klicka på Redigera.
4. I avsnittet Repeater options (Repeateralternativ ) anger du ett tal i fälten Minimum och Maximum (valfritt). Detta anger det lägsta antalet gånger som fältet ska visas i modulen upp till det högsta värdet. 
5. Om du vill ange hur många gånger ett fält ska visas som standard anger du ett tal i fältet Default object count .
6. Som standard aktiveras repeateralternativen automatiskt när de har konfigurerats. För att stänga av repeateralternativen, slå av Repeater options .

Exempelvis ändras ett bildfälts repeateralternativ så att minst tre och upp till fem bildfält visas. Ett värde på fyra bildfält är konfigurerat som standard. I innehållsredigeraren ser användaren fyra bildfält som standard och kan lägga till ytterligare ett bildfält eller ta bort ett befintligt bildfält.

Gruppera modulfält

När du har skapat fält kan du gruppera dem för att hålla fälten organiserade efter relevans. Fältgrupper kan användas för att bygga upp anpassad fältlogik. Du kan gruppera upp till fyra fält tillsammans. Läs mer om modulens fältgrupper.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. I inspektören klickar du på rullgardinsmenyn Åtgärder i avsnittet Fält och väljer Grupp.
4. Markera ett eller flera fält som ska grupperas och klicka sedan på Skapa grupp.

Lägg till hjälptext i din modul

I avsnittet Editor options kan du lägga till hjälptext för att ge användarna sammanhang när de redigerar modulen. Denna text kommer att visas ovanför fälten i din modul. 

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. I inspektören, i avsnittet Redigeringsalternativ , skriver du in text i fältet Inline help text .

Hantera innehållstyper och tillgänglighet för en modul

Lägg till eller ta bort de typer av innehåll som användare kan använda en modul för, t.ex. Blogginlägg eller Landningssidor. Du kan också slå på eller av tillgängligheten för en modul i mallar och sidor.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. Om du vill redigera innehållstyper för en modul klickar du på Innehållstyper under modulens namn i inspektorn uppe till höger.

1. • I dialogrutan markerar eller avmarkerar du kryssrutan bredvid varje typ av innehåll där din modul kommer att användas eller inte (t.ex. Blogginlägg, e-postmeddelanden eller Landningssidor). 
   • När du är klar klickar du på Uppdatera.

4. För att hantera tillgängligheten för en mall eller sida, slå på knappen Gör tillgänglig för mallar och sidor uppe till höger. För att testa modulens funktionalitet eller stänga av tillgängligheten i mallar och sidor, slå av knappen Gör tillgänglig för mallar och sidor.  

Observera: Om du avaktiverar alternativet Gör tillgänglig för mallar eller sidor kommer modulen inte att tas bort från befintliga mallar eller sidor.

Kopiera och klistra in avsnitt om fält

När du införlivar ett fält i en modul kan du kopiera och klistra in avsnittet om fältet i avsnittet module.html (HTML + HubL) i modulredigeraren.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. Håll muspekaren över ett modulfält i inspektören och klicka på rullgardinsmenyn Åtgärder i avsnittet Fält . Välj sedan Kopiera avsnitt. 
4. I modulredigeraren klistrar du in avsnittet med fältet på önskad plats i avsnittet module.html (HTML. + HubL) . Du kan använda tangentbordsgenvägarna Cmd+V eller Ctrl+V. 

Syntax för skrivmodul

När du redigerar din modul kan du skriva modulsyntax i avsnitten module .html (HTML + HubL), module .css och module .js modulredigerare. Läs mer om modulredigeraren och modulöversikten.

Förhandsgranska och publicera en modul

När du är klar med redigeringen av en modul, inklusive att lägga till fält och skriva modulsyntax, kan du förhandsgranska och publicera modulen. 

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en modul.
3. För att förhandsgranska en modul klickar du på Förhandsgranska uppe till höger. Du kommer att hänvisas till en ny webbläsarflik för att förhandsgranska modulen. Denna förhandsgranskning synkroniseras med modulredigeraren och uppdateras automatiskt när ändringar görs.
4. Om du vill publicera en modul klickar du på Publicera ändringar. 

Lägg till en modul i en mall

När du har publicerat en modul kan du använda den i olika mallar genom att lägga till den i en dra-och-släpp-mall eller en egenkodad mall i designhanteraren. Om du vill lägga till moduler i innehållsredigeraren kan du läsa mer om hur du lägger till och redigerar moduler i innehållsredigeraren.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på i sökaren för att öppna en mall.
3. Om du vill lägga till en modul i en dra-och-släpp-redigerare i layoutredigeraren klickar du på fliken + Lägg till längst upp i inspektören.
   • Ange modulens namn i fältet Sök. Om du vill begränsa sökningen till anpassade moduler klickar du på rullgardinsmenyn Filtrera efter kategori eller taggar och väljer Anpassade moduler.
   • Klicka på ikonen dragHandleIcon dra-och-släpp-redigeraren och flytta modulen till rätt position i layoutredigeraren.
4. Så här lägger du till en modul i en specialkodad mall:
   •  Högerklicka eller Ctrl+klicka på modulen i sökaren och välj Kopiera avsnitt. Alternativt kan du klicka på för att öppna modulen och sedan klicka på Kopiera avsnitt i avsnittet Användning av mall i inspektören.
   • I den anpassade kodade mallen klistrar du in modulavsnittet i kodredigeraren.
5. När du är klar klickar du på Publicera ändringar längst upp till höger.

Exempel: Skapa en nedräkningsmodul

1. Skapa en modul i designhanteraren och döp den till"Countdown Timer".
2. Klicka på rullgardinsmenyn Lägg till fält i fältavsnittet i inspektören.

• • Välj fältet Date and time (Datum och tid ). Ange namnet "Datum och tid för Händelse". Detta kommer att uppdatera fältet för variabelnamn i HubL till event_date_and_time.

• • Välj fältet Color (Färg ). Ange namnet "Timer Font Color". Detta kommer att uppdatera fältet för variabelnamn i HubL till timer_font_color.

Observera: HubL-variabelnamnen måste överensstämma med variabelnamnen som ingår i kodavsnittet module.html (HTML + HubL) nedan.

3. I modulredigeraren kopierar och klistrar du in följande kod i det relevantaavsnittet på :

4. När du är klar kan du förhandsgranska och publicera modulen.
5. Fortsätt att lägga till modulen i en mall.