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

Skapa och redigera moduler

Senast uppdaterad: november 2, 2021

Gäller för:

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

I designhanteringsverktyget kan du skapa anpassade kodade moduler för att lägga till avancerade funktioner i din blogg, på dina sidor eller i din e-post.. Anpassade moduler erbjuder ett brett utbud av funktioner så att innehållet kan fullständigt anpassas helt och hållet i redigeringsverktyget för sidor, e-postmeddelanden eller bloggar.. Du kan bygga anpassade moduler från grunden eller lägga till färdiga moduler från HubSpot Marketplace.

Observera:För att skapa moduler krävs kunskap om HTML, CSS, HubL och HubSpot Design Manager. HubSpot rekommenderar att du samarbetar med en designer för att skapa kodade moduler.


Skapa en ny modul

  • I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
  • Klicka på rullgardinsmenynFilerhögst upp i sökaren och väljNy fil.

new-file

  • I dialogrutan klickar du på rullgardinsmenyn Vad vill du bygga idag? och väljer Modul.

build-a-module

  • Klicka påNästa.
  • Välj om den här modulen ska användas isidmallar,bloggmallar och/ellere-postmallar. Moduler som används i e-postmallar får inte innehålla CSS eller JavaScript.
  • Välj om den här modulen ska vara en lokal moduleller englobal modul. Om du skapar englobal modul uppdateras innehållet i den här modulen på alla platser där modulen används.
  • Ange ett filnamn för modulen och klicka sedan påSkapa.

set-up-your-new-module

Märk din modul

Som standard hänvisar innehållsredigeraren till en modul med det namn som den fick i designhanteraren. Om du vill att modulen ska använda ett annat namn i innehållsredigeraren kan du göra det genom att ange en etikett.

design-manager-label-module

Lägg till fält i din modul

Lägg till fält i modulen för att ställa in modulens innehåll eller stil och göra den redigerbar i innehållsredigeraren. Läs mer om tillgängliga fälttyper i vår dokumentation för utvecklare.

  • I modulinspektören till höger klickar du pårullgardinsmenynLägg till fält i avsnittetFältoch väljer sedan ettfält som du vill lägga till i modulen.

module-add-field

  • Redigera fältets namn genom att klicka påpennikonen.redigera bredvid fältets namn. Om du vill redigeraHubL-variabelnamnet gör du ändringarna i textfältet HubL-variabelnamn.

Lägg till fältets standardinnehåll

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

I exemplet nedan är fälttypen ett bildfält, så alternativen för standardinnehåll är att välja en standardbild och dölja storleksreglerna.

field-content-options

Ange alternativ för fältredigeraren

I avsnittetRedigeringsalternativkan du aktivera följande alternativ för hur användare kan redigera modulen i innehållsredigeraren:

  • Gör det här fältet obligatoriskt:användaren kan inte lämna det här fältet tomt i innehållsredigeraren.
  • Förhindra redigering i innehållsredigerare: fältinnehållet kan inte redigeras i innehållsredigeraren; det kan fortfarande redigeras på mallnivå. Det här alternativet är inte tillgängligt förglobala moduler, som inte kan redigeras på sidnivå.
  • Hjälptext för Tooltip: Lägg till hjälptext i fältet för att ge användarna sammanhang eller instruktioner. Hjälptexten visas i en verktygstips när användaren håller muspekaren över fältet under redigeringen.

    custom-module-help-text
  • Inline-hjälptext: Lägg till hjälptext i fältet för att ge användarna sammanhang eller instruktioner. Hjälptexten visas under fältet när en användare redigerar modulen.

design-manager-module-field-options

Ställ in villkor för fältvisning

Du kan använda fältvisningsvillkor för att ställa in ett modulfält så att det bara visas om ett annat fält uppfyller vissa kriterier.

  • IVillkor för visningklickar du pårullgardinsmenynHubL-variabelför att välja ett modulfält och sedan på rullgardinsmenynär inte tomför att välja villkoret för det fältet.
  • Om du väljer villkoretär lika med anger du ettvärde eller en regex.

I exemplet nedan anges visningsvillkor för ett bildfält. Villkoret är att värdet i ett textfält som heter image_title måste vara lika med Headshot för att bildfältet ska visas i modulen.

field-display-conditions

Visningsvillkoren aktiveras automatiskt när du har ställt in ett villkor.Omdu vill inaktivera visningsvillkoren klickardu påväxelknappentill höger omVisningsvillkor.

Ställ in alternativ för fältförstärkare

Du kan ställa in repeateralternativ för ditt fält i avsnittet Repeateralternativ . Repeater är fält och grupper som kan skapa flera objekt och visa dem med hjälp av en for-slinga.

  • Ialternativen för RepeaterVälj ettminimumoch/eller ettmaximalantal nödvändiga instanser av detta fält.
  • Du kan också välja att ställa in ettstandardobjektantal, vilket är det antal instanser av fältet som kommer att visas som standard i modulen.

I exemplet nedan är bildfältet konfigurerat som ett bildgalleri. Gränserna för antalet objekt är inställdaatt minst3bildfält visas i modulen och högst5bildfält. Användaren ser som standardfyrabildfält i modulen och kan välja att lägga till ytterligare ett bildfält eller ta bort ett befintligt bildfält.

field-repeater-options

Repeateralternativen aktiveras automatiskt när du har ändrat ett av alternativen.Omdu vill inaktivera repeateralternativen klickardu påväxelknappentill höger omRepeateralternativ.

Gruppera modulens fält

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

Gruppera modulfält tillsammans:

  • Klicka på Grupp i den högra sidofältet i modulredigeraren.

    design-manager-group-fields
  • Välj de fältsom du vill gruppera tillsammans.
  • Klicka påSkapa grupp.

Kopiera och klistra in dina fältutdrag

  • När du är redo att införliva ett av dina anpassade fält i modulen kopierar du fältutdraget och klistrar in det i modulensHTML + HubL-redigerare.
    • Om du befinner dig i fältinspektören klickar du påKopiera utdragtill höger om fältetsHubL-variabelnamn.
    • Om du befinner dig i modulinspektören, för du muspekaren över fältet och klickar pårullgardinsmenynÅtgärderoch väljer sedanKopiera utdrag.
  • Klicka på den plats där du vill lägga till fältet iHTML + HubL-redigeraren och klistra sedan in utdraget genom att trycka påCtrl+V ellerCmd+V.

copy-paste-field-snippet

Skriv din modulsyntax

När du redigerar din modul kan du skriva ytterligare modulsyntax i redigeringsrutornaHTML + HubL,CSS ochJS. Läs mer ommodulkodredigerarenochmodulsyntaxreferenseni HubSpots designerdokumentation.

Lägg till hjälptext till din modul

Lägg till hjälptext i avsnittet Redigeringsalternativ för att ge användarna sammanhang när de redigerar modulen. Hjälptexten får inte vara längre än 300 tecken.

design-manager-help-text

När en användare redigerar modulen i en innehållsredigerare visas hjälptexten ovanför modulfälten.

page-editor-module-help-text

Förhandsgranska din modul

Du kan förhandsgranska hur din modul kommer att se ut och fungera i innehållsredigeraren genom att klicka på knappen Förhandsgranskalängst upp till höger i modulredigeraren. Förhandsgranskningen av din modul öppnas i en ny flik. Denna förhandsvisning synkroniseras med redigeraren och uppdateras automatiskt när du arbetar.

preview-module

Publicera din modul

När du har lagt till fält och skrivit modulsyntaxen kan du publicera modulen. Klicka på Publicera ändringaruppe till höger.

publish-module

Gör din modul tillgänglig för mallar

  • AktiveraväxelknappenGör tillgänglig för mallarlängst upp till höger i redigeringsverktyget för att göra den här modulen tillgänglig att lägga till i dina mallar.

content-toggle

  • Stäng av denna omkopplare om du vill göra ändringar eller testa modulens funktionalitet. Om den här inställningen är inaktiverad kommer ditt team att få en varning om att den här modulen inte är tillgänglig för mallar.

make-module-available

Lägg till din modul i en mall

  • Klicka på flikenLägg tillhögst upp i layoutinspektören i malllayoutredigeraren och sök sedan efter modulen. Anpassade moduler som du har skapat kan identifieras medikonen föranpassadmodul.customModules.
  • Dra och släpp modulen i din mall.

add-custom-module

Lägg till eller köp en modul från marknadsplatsen

Förutom att skapa egna moduler kan du lägga till eller köpa anpassade moduler som andra användare eller leverantörer har skapat på HubSpot Marketplace.

  • I ditt HubSpot-konto, klicka på Marknadsplatsikonen marknadsplats i huvudnavigeringsfältet.
  • I avsnittetFiltrera produktertill vänster klickar du på rullgardinsmenynAlla produkterunderKategorioch väljerModuler. Du kan filtrera de tillgängliga modulerna enligt följande:
    • Pris:om modulen är gratis eller betald
    • Funktion: vilken typ av funktion(er) modulen innehåller (t.ex. kalkylator, galleri, karta).
    • Fungerar med: den eller de malltyper som modulen kan användas i.
    • Leverantör: den eller de leverantörer som modulen erbjuds av.
  • Håll muspekaren över den valda modulen och klicka på Visa detaljer.
  • Klicka påKöp modul gratisellerKöp modul för $uppe till höger.
    • Om modulen är gratis kommer den automatiskt att läggas till i din design manager.
    • Om modulen är betald fortsätter du med att ange dina betalningsuppgifter. När betalningen har behandlats kommer modulen att läggas till i din design manager.