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: september 13, 2022

Gäller för:

Marketing 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å rullgardinsmenyn Filer högst upp i sökaren och välj Ny 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.
  • Markera kryssrutan bredvid varje typ av innehåll där modulen kommer att användas: sidor, blogginlägg, blogglistor, e-post eller citat. Moduler som används i e-postmallar får inte innehålla CSS eller JavaScript.

Observera:anpassade moduler för användning i e-postmeddelanden kan endast skapas på konton med en Marketing HubProfessional- eller Enterprise-prenumeration.

  • Välj om den här modulen ska vara en lokal modul eller en global modul. Om du skapar en global 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å rullgardinsmenyn Lägg till fält i avsnittet Fält och väljer sedan ett fält som du vill lägga till i modulen.

module-add-field

  • Redigera fältets namn genom att klickapennikonen.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 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å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 avsnittet Redigeringsalternativ kan 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ör globala 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 att ett modulfält endast ska visas om ett annat fält uppfyller vissa kriterier.

  • IVillkor för visningklickar du pårullgardinsmenyn HubL-variabel för att välja ett modulfält och sedan på rullgardinsmenyn är inte tom för att välja villkoret för det fältet.
  • Om du väljer villkoret är lika med anger du ett vä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 klickar du påväxelknappen till höger om Visningsvillkor.

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 Repeater Välj ett minimum och/eller ettmaximalantal nödvändiga instanser av detta fält.
  • Du kan också välja att ställa in ett standardobjektantal, 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ällda att minst 3 bildfält visas i modulen och högst 5 bildfält. Användaren ser som standard fyra bildfä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 klickar du påväxelknappen till höger om Repeateralternativ.

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ält som du vill gruppera tillsammans.
  • Klicka på Skapa grupp.

Kopiera och klistra in dina fältutdrag

  • När du är redo att infoga ett fält i modulen kopierar du fältutdraget och klistrar in det i modulens HTML + HubL-redigerare .
    • Om du befinnerdig i fältinspektören klickar du på Kopiera utdrag till höger om fältets HubL-variabelnamn.
    • Om du befinner dig i modulinspektören, för du muspekaren över fältet och klickar pårullgardinsmenyn Åtgärder och väljer sedan Kopiera utdrag.
  • Klicka på den plats där du vill lägga till fältet i HTML + HubL-redigeraren och klistra sedan in utdraget genom att trycka på Ctrl+V eller Cmd+V.

copy-paste-field-snippet

Skriv din modulsyntax

När du redigerar din modul kan du skriva ytterligare modulsyntax i redigeringsrutorna HTML + HubL, CSS och JS . Läs mer om modulkodredigeraren och modulsyntaxreferensen i 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örhandsgranska lä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 ändringar uppe till höger.

publish-module

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

  • Aktivera växelknappen Gör tillgänglig för mallar lä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

När du har publicerat en modul kan du använda den på alla dina sidor genom att lägga till den i en mall.

Lägg till en modul i en mall som du drar och släpper:

  • Klicka på fliken Lägg till högst upp i layoutinspektören i malllayoutredigeraren och sök sedan efter modulen. Anpassade moduler som du har skapat kan identifieras med ikonen för anpassad modul: customModules.
  • Dra och släpp modulen i mallen.

add-custom-module

Om du vill lägga till en modul i en kodad mall kan du kopiera och klistra in modulutdraget i mallen:

  • Om du vill kopiera modulutdraget från modulredigeraren klickar du på Kopiera utdrag längst ner i den högra sidofältet.

    module-editor-copy-snippet0
  • Så här kopierar du modulutsnittet från designhanterarens vänstra sidofält:
    • Leta upp den anpassade modulen i den vänstra sidofältet.
    • Högerklicka på modulen och välj sedan Kopiera utdrag. Alternativt kan du välja modulen, klicka på Åtgärder i övre vänstra hörnet och välja Kopiera utdrag.

      custom-module-copy-snippet00
  • I den kodade mallen klistrar du in utdraget där det behövs.

    coded-template-paste-snippet0

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 avsnittet Filtrera produkter till vänster klickar du på rullgardinsmenyn Alla produkter under Kategori och väljer Moduler. 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å Få modul gratis eller Kö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 avgiftsbelagd, fortsätt med att ange dina betalningsuppgifter. När betalningen har behandlats kommer modulen att läggas till i din design manager.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.