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

Observera: för att skapa moduler krävs kunskap om HTML, CSS, HubL och HubSpot design manager. HubSpot rekommenderar att du samarbetar 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 modulen ska användas (t.ex. blogginlägg, e-postmeddelanden eller målsidor).
6. I fältet Modulinnehållets omfattning väljer du ett alternativ (t.ex. Lokal modul eller Global modul). Om du skapar en global modul kommer redigeringen av modulens innehåll att uppdateras på alla platser där modulen används.
7. Ange ett filnamn för modulen.
8. Om du vill ändra modulens filplats klickar du på Ändra i avsnittet Filplats. 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 redigera modulen.

Observera: moduler som används i e-postmeddelanden kan endast skapas i 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 upprepningsalternativ och gruppera relaterade fält för bättre organisation. Du kan också kopiera och klistra in fältutdrag, skriva anpassad modulsyntax, lägga till användbar instruktionstext och redigera vilka malltyper 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. I sökaren klickar du på 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. I inspektören klickar du på rullgardinsmenyn Lägg till fält i avsnittet Fält. Välj sedan ett fält som ska läggas till i modulen.

4. Om du vill redigera fältets namn klickar du på redigeringsikonen edit och anger 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. I inspektören, i avsnittet Fält, håller du muspekaren över ett fält och klickar på Redigera.
4. I avsnittet Innehållsalternativ lägger du till eller redigerar standardinnehållsalternativ. Vilka standardinnehållsalternativ som är tillgängliga beror på vilken fälttyp som har valts.

Om du t.ex. lägger till fälttypen Datum och tid i en modul kan du välja ett standarddatum och en standardtid. Du kan också ange ett tidsintervall som standard.

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. I inspektören, i avsnittet Fält, håller du muspekaren över ett fält och klickar på Redigera.
4. I avsnittet Redigeringsalternativ, för att göra fältet obligatoriskt, växlar du reglaget Gör detta fält obligatoriskt på. Detta hindrar användare från att lämna fältet tomt i innehållsredigeraren.
5. Om du vill förhindra att innehållet i ett fält redigeras slår du på knappen Förhindra redigering i innehållsredigerare. Innehållet i fältet kan fortfarande anpassas i designhanteraren på mallnivå. Det här alternativet ä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 kan du skriva in text i textfältet Tooltip-hjälp eller i textfältet Inline-hjälp .
   • Tooltip-hjälptext: den här texten visas i en tooltip när en användare håller muspekaren över infoikonen infoCircleIcon i innehållsredigeraren.
   • Inline-hjälptext: den här texten visas under fältet när en användare redigerar modulen i innehållsredigeraren.

Ange villkor för fältvisning

I avsnittet Visningsvillkor kan du 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.

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 Fält, håller du muspekaren över ett fält och klickar 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 tomt). Fler villkorsfält kan krävas beroende på vilket alternativ som väljs. Om du t.ex. väljer Är lika med krävs ytterligare ett värdefält.
6. Som standard aktiveras visningsvillkoren automatiskt när ett villkor har konfigurerats. Om du vill stänga av visningsvillkoren slår du av knappen Visningsvillkor .

Ange alternativ för fältrepeater

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

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 Fält, håller du muspekaren över ett fält och klickar på Redigera.
4. I avsnittet Repeater options 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 en siffra i fältet Default object count.
6. Som standard aktiveras repeater-alternativen automatiskt när de har konfigurerats. Om du vill stänga av repeateralternativen växlar du mellan Repeater options (Repeateralternativ ) och off (Av).

Exempel: Ett bildfälts repeateralternativ ändras så att det visar minst tre och upp till fem bildfält. Ett värde på fyra bildfält konfigureras som standard. I innehållsredigeraren kommer en användare att se 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 modulfältsgrupper.

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 Gruppera.
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. Den här texten visas ovanför fälten i 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. I inspektören, i avsnittet Redigeringsalternativ , anger du text i fältet Text för inbyggd hjälp.

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

Lägg till eller ta bort de innehållstyper som användarna kan använda en modul för, t.ex. blogginlägg eller målsidor. 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 längst upp 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 målsidor).
   • När du är klar klickar du på Uppdatera.

4. För att hantera tillgängligheten för en modul i mallar eller sidor, slå på knappen Gör tillgänglig för mallar och sidor längst upp 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 fältutdrag

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

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

Skriva modulens syntax

När du redigerar din modul kan du skriva modulsyntax i avsnitten module .html (HTML + HubL), module .css och module .js i modulredigeraren. 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. Om du vill förhandsgranska en modul klickar du på Förhandsgranska längst upp till höger. Du kommer till en ny webbläsarflik där du kan förhandsgranska modulen. Denna förhandsgranskning synkroniseras med modulredigeraren och uppdateras automatiskt när ändringar görs.
4. För att publicera en modul klickar du på Publicera ändringar.

Lägga 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 att lägga till och redigera 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-mall i layoutredigeraren klickar du på fliken + Lägg till längst upp i inspektorn.
   • Ange namnet på modulen 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å dra-och-släpp-ikonen på dragHandleIcon och flytta modulen till rätt plats i layoutredigeraren.
4. Så här lägger du till en modul i en anpassad kodad mall:
   • Högerklicka eller Ctrl+klicka på modulen i sökaren och välj Kopiera utdrag. Alternativt kan du klicka för att öppna modulen och sedan klicka på Kopiera utdrag i avsnittet Mallanvändning i inspektören.
   • I den anpassade mallen klistrar du in modulens kodsnutt i kodredigeraren.
5. När du är klar klickar du på Publicera ändringar längst upp till höger.

Exempel på modul

Skapa en nedräkningsmodul

1. Skapa en modul i designhanteraren och döp den till"Countdown Timer".
2. I inspektören klickar du på rullgardinsmenyn Lägg till fält i avsnittet Fält.

• • Välj fältet Datum och tid. Ange namnet "Event date and time". Detta kommer att uppdatera HubL-variabelns namnfält till event_date_and_time.

• • Välj fältet Color (Färg ). Ange namnet "Timer Font Color". Detta kommer att uppdatera HubL-variabelns namnfält till timer_font_color.

Observera: HubL-variabelnamnen måste matcha de variabelnamn som ingår i modul.html (HTML + HubL)-kodavsnittet nedan.

3. I modulredigeraren kopierar och klistrar du in följande kod i avsnittet module.html (HTML + HubL):

<!-- Dold span för att lagra måldatumet -->
<span id="target-date" style="display: none;"></span>

<!-- Visning av nedräkningstimern -->
<div style="float: left; width: 100%; color: ;">
<div class="time_container" style="margin-left: 30%;">
<span id="dagar"></span><br>
Dagar
</div> </div> </div> </div> </div> </div
<div class="time_container">
<span id="timmar"></span><br>
Timmar
</div> </div> </div> </div> </div> </div
<div class="time_container"> <span id="timmar"></span><br> Timmar
<span id="minuter"></span><br>
Minuter
</div> </div> Minuter
<div class="time_container"> <span id="minuter"></span><br> Minuter
<span id="sekunder"></span><br>
Sekunder
</div> Sekunder
</div> </div> </div> </div> </div> </div

4. Kopiera och klistra in följande kod i avsnittet module.css:

.time_container {
float: vänster;
bredd: 10%;
text-align: center;
}
.time_container span {
typsnittsvikt: fet;
teckenstorlek: 200%;
}

5. Kopiera och klistra in följande kod i avsnittet module.js:

// Funktion för att beräkna och visa nedräkning
funktion updateCountdown() {
// Hämta måldatumet från det dolda spannet
const targetDate = new Date(document.getElementById('target-date').textContent);
// Hämta det aktuella datumet
const currentDate = new Date();
// Beräkna den återstående tiden (i millisekunder)
const timeRemaining = targetDate - currentDate;
// Kontrollera om måldatumet har passerats
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Nedräkningen har löpt ut';
returnera;
}
// Beräkna återstående dagar, timmar, minuter och sekunder
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((tidResterande % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((tidResterande % (1000 * 60)) / 1000);
// Visa nedräkningen
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Uppdatera nedräkningen varje sekund
setInterval(updateCountdown, 1000);
// Initialt anrop för att uppdatera nedräkningen omedelbart
updateCountdown();

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