Merk:: Denne artikkelen er oversatt av praktiske årsaker. Oversettelsen opprettes automatisk ved hjelp av oversettingsprogramvare, og det er ikke sikkert at den er korrekturlest. Den engelske versjonen av denne artikkelen skal regnes som den regjerende versjonen med den nyeste informasjonen. Du finner den her.

Opprett og rediger moduler i Design Manager

Sist oppdatert: 5 desember 2025

Tilgjengelig med et av følgende abonnementer, unntatt der det er angitt:

Alle produkter og planer

Med Design manager kan du opprette egendefinerte moduler for å legge til avanserte funksjoner i bloggen, sidene eller e-postene dine. Egendefinerte moduler tilbyr et bredt spekter av funksjoner, slik at innholdet kan tilpasses fullt ut i side-, e-post- eller bloggredigeringsprogrammet.

Merk: For å lage moduler kreves det kunnskap om HTML, Cascading Style Sheets (CSS), HubL og HubSpot design manager. HubSpot anbefaler å samarbeide med en utvikler for å lage kodede moduler.

Opprett en ny modul

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på rullegardinmenyen Fil øverst i søkeren, og velg Ny fil.

I Design manager, i søkeren, plasseres en boks rundt rullegardinmenyen Fil, og alternativene vises. En pil peker mot alternativet "Ny fil".

I dialogboksen klikker du på rullegardinmenyen Hva vil du bygge i dag? og velger Modul.
Klikk på Neste.
I feltet Hvor vil du bruke denne modulen , merker du av i avkrysningsboksen ved siden av hver innholdstype der modulen skal brukes (f.eks. Blogginnlegg, E-post eller Landingssider).
I feltet Omfang av modulinnhold velger du et alternativ (f.eks. Lokal modul eller Global modul). Hvis du oppretter en global modul, vil redigering av innholdet i denne modulen oppdatere alle steder der modulen brukes.
Skriv inn et filnavn for modulen.
Hvis du vil endre modulens filplassering, klikker du på Endre i delen Filplassering . Velg en ny plassering i popup-boksen, og klikk deretter på Velg.
Når du er ferdig, klikker du på Opprett.
Fortsett å redigere modulen.

Merk: Moduler som brukes i e-postmeldinger kan bare opprettes i kontoer med et Marketing Hub Professional- eller Enterprise-abonnement . De kan ikke inkludere Cascading Style Sheets (CSS) eller JavaScript.

Rediger en modul

Når du har opprettet en modul i Design Manager, kan du tilpasse funksjonalitet og utseende. Merk modulen for å gjøre den tydeligere, legg til og konfigurer felt, og juster feltredigeringsalternativer som standardinnhold. Angi visningsbetingelser og repeateralternativer, og gruppér de relaterte feltene for bedre organisering. Du kan også kopiere og lime inn tekstutdrag fra felter, skrive egendefinert modulsyntaks, legge til nyttig instruksjonstekst og redigere hvilke typer mal modulen din kan brukes med.

Legg til en etikett i en modul

I Design manager kan du legge til eller oppdatere en etikett for en modul for å hjelpe brukerne med å identifisere den i innholdsredigeringsprogrammet. Hvis etiketten er tom, vises modulens navn som standard.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk i søkeren for å åpne en modul du vil redigere etiketten for.
Skriv inn en etikett i inspektøren.

I design manager vises inspektøren for en modul. Øverst i inspektøren er etikettfeltet tomt.

Legge til felt i en modul

Legg til felt i en modul for å angi modulens innhold eller styling, og gjør den redigerbar i innholdsredigeringsprogrammet. Finn ut mer om tilgjengelige felttyper.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Klikk på rullegardinmenyen Legg til felt i feltdelen i inspektøren. Velg deretter et felt du vil legge til i modulen.

I design manager vises inspektøren for en modul. I Felt-delen er det plassert en boks rundt rullegardinmenyen Legg til felt.

Hvis du vil redigere navnet på feltet, klikker du på edit redigeringsikonet og skriv inn et nytt navn. Hvis du vil redigere navnet på HubL-variabelen, skriver du inn et nytt navn i feltet HubL-variabelnavn .

I design manager vises inspektøren for et modulfelt. Øverst i modulfeltets detaljer er det en boks rundt redigeringsikonet for å redigere navnet på modulfeltet. En pil peker mot tekstinntastingsfeltet HubL-variabelnavn med verdien "event_date_and_time".

Tilpass standardinnholdet i feltene

I delen Innholdsalternativer kan du legge til standardinnhold som vises når modulen brukes i maler og innholdsredigeringsprogrammer. Alternativene for standardinnhold vil variere avhengig av felttypen.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Hold musepekeren over et felt i feltdelen i inspektøren, og klikk på Rediger.
I delen Innholdsalternativer kan du legge til eller redigere standard innholdsalternativer. Hvilke standardinnholdsalternativer som er tilgjengelige, avhenger av hvilken felttype som er valgt.

Hvis du for eksempel legger til en felttype for dato og klokkeslett i en modul, kan du velge en standarddato og -klokkeslett. Du kan også angi et standard tidsintervall.

I design manager viser inspektøren et felts standardinnholdsalternativer. For felttypen Dato og klokkeslett kan du velge en standarddato og -klokkeslett. Du kan også velge et tidsintervall i minutter.

Angi feltredigeringsalternativer

I delen Redigeringsalternativer kan du gjøre et felt obligatorisk og forhindre redigering i innholdsredigeringsprogrammet. Du kan også tilpasse hjelpeteksten.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Hold musepekeren over et felt i feltdelen i inspektøren, og klikk på Rediger.
I delen Editor-alternativer kan du slå på bryteren Gjør dette feltet obligatorisk for å gjøre feltet obligatorisk. Dette forhindrer at brukere lar feltet stå tomt i innholdsredigeringsprogrammet.
Hvis du vil forhindre at innholdet i et felt redigeres, slår du på Hindre redigering i innholdsredigering . Innholdet i feltet kan fortsatt tilpasses i design manager på mal-nivå. Dette alternativet er ikke tilgjengelig for globale moduler.
Hvis du vil legge til kontekst eller instruksjoner om hvordan du bruker feltet, skriver du inn tekst i feltet Tooltip-hjelpetekst eller i feltet Inline-hjelpetekst .
- Hjelpetekst for verktøytips: Denne teksten vises i et verktøytips når en bruker holder musepekeren over infoCircleIcon info-ikonet i innholdsredigeringsprogrammet.
- Innebygd hjelpetekst: Denne teksten vises under feltet når en bruker redigerer modulen i innholdsredigeringsprogrammet.

I design manager viser inspektøren redigeringsalternativene for et felt. Du kan blant annet gjøre feltet obligatorisk, forhindre redigering i innholdsredigeringsprogrammet og legge til hjelpetekst.

Angi feltvisningsbetingelser

I delen Visningsbetingelser kan du bruke feltvisningsbetingelser til å angi at et modulfelt bare skal vises hvis et annet felt oppfyller visse kriterier.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Hold musepekeren over et felt i feltdelen i inspektøren, og klikk på Rediger.
I delen Visningsbetingelser klikker du på rullegardinmenyen HubL-variabel og velger en variabel.
Klikk på den andre rullegardinmenyen , og velg et alternativ (f.eks. Er lik eller Er ikke tom). Det kan være nødvendig med flere vilkårsfelt, avhengig av hvilket alternativ som er valgt. Hvis du for eksempel velger Er lik, er det nødvendig med et ekstra verdifelt.
Som standard slås visningsbetingelsene automatisk på når en betingelse er konfigurert. Hvis du vil slå av visningsforholdene, slår du Display Conditions -bryteren av.

I Design Manager viser inspektøren visningsbetingelsene for et felt. Øverst i seksjonen er det slått på en vekslingsknapp for Visningsbetingelser. I rullegardinmenyen HubL er variabelen event_date_and_time valgt. I rullegardinmenyen for betingelser er betingelsen Is not empty valgt.

Angi alternativer for feltrepeater

I delen Repeateralternativer kan du konfigurere repeateralternativer for felt og grupper. Når repeateralternativer er slått på, vil flere objekter opprettes og vises ved hjelp av en for løkke.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Hold musepekeren over et felt i feltdelen i inspektøren, og klikk på Rediger.
I delen Repeateralternativer skriver du inn et tall i feltene Minimum og Maximum (valgfritt). Dette angir det minste antallet ganger feltet skal vises i modulen, opp til maksimumsverdien.
Hvis du vil angi hvor mange ganger et felt skal vises som standard, skriver du inn et tall i feltet Standard antall objekter .
Som standard slås repeateralternativer automatisk på når de er konfigurert. Hvis du vil slå av repeateralternativer, slår du bryteren Repeater options av.

For eksempel endres alternativene for et bildefelt slik at det vises minst tre og opptil fem bildefelt. En verdi på fire bildefelt er konfigurert som standard. I innholdsredigeringsprogrammet ser brukeren fire bildefelt som standard, og kan legge til ett bildefelt til eller fjerne et eksisterende bildefelt.

I Design Manager viser inspektøren et felts repeateralternativer. Øverst i seksjonen er det slått på en bryter for Repeater-alternativer. En minimumsverdi på tre og en maksimumsverdi (valgfritt) på fem er konfigurert. Standard antall objekter inneholder en verdi på fire.

Gruppemodulens felt

Når du har opprettet felt, kan du gruppere dem sammen for å holde feltene organisert etter relevans. Feltgrupper kan brukes til å bygge opp egendefinert feltlogikk. Du kan gruppere opptil fire felt sammen. Finn ut mer om modulfeltgrupper.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Klikk på rullegardinmenyen Handlinger i feltdelen i inspektøren, og velg Grupper.
Velg ett eller flere felt som skal grupperes sammen, og klikk deretter på Opprett gruppe.

I design manager viser inspektøren en moduls Felt-seksjon. En boks er plassert rundt rullegardinmenyen Handlinger, og alternativene vises. En pil peker mot alternativet Group.

Legg til hjelpetekst i modulen din

I delen Redigeringsalternativer kan du legge til hjelpetekst for å gi brukerne kontekst når de redigerer modulen. Denne teksten vises over feltene i modulen din.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
I inspektøren, i delen Redigeringsalternativer , skriver du inn tekst i feltet Innebygd hjelpetekst .

I Design manager viser inspektøren en moduls Editor-alternativer. Feltet Inline-hjelpetekst inneholder følgende tekst: Eksempel på hjelpetekst som gir brukeren kontekst og instruksjoner om hva denne modulen brukes til og hvordan den brukes.

Administrere innholdstyper og tilgjengelighet for en modul

Legg til eller fjern innholdstyper som brukerne kan bruke en modul til, for eksempel Blogginnlegg eller Landingssider. Du kan også slå tilgjengeligheten til en modul i maler og sider av eller på.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Hvis du vil redigere innholdstyper for en modul, klikker du på Innholdstyper under modulens navn i inspektøren øverst til høyre.

I design manager vises inspektøren for en modul. Øverst i inspektøren er det plassert en boks rundt innholdstypene for modulen (f.eks. Landingssider, Nettstedssider, Oppføringssider, Blogginnlegg).

- I dialogboksen merker du av eller fjerner merket i avkrysningsboksen ved siden av hver innholdstype der modulen skal eller ikke skal brukes (f.eks. Blogginnlegg, E-poster eller Landingssider).
- Når du er ferdig, klikker du på Oppdater.

Hvis du vil administrere tilgjengeligheten til en modul i maler eller sider, slår du på knappen Gjør tilgjengelig for maler og sider øverst til høyre. Hvis du vil teste modulens funksjonalitet eller slå av tilgjengeligheten i maler og sider, slår du av knappen Gjør tilgjengelig for maler og sider.

Merk: Hvis du slår av Gjør tilgjengelig for maler eller sider, fjernes ikke modulen fra eksisterende maler eller sider.

Kopier og lim inn tekstutdrag fra felt

Når du skal innlemme et felt i en modul, kan du kopiere og lime inn tekstutdraget fra feltet i module.html (HTML + HubL) i modulredigeringsprogrammet.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Hold musepekeren over et modulfelt i inspektøren, og klikk på rullegardinmenyen Handlinger i Felt-delen . Velg deretter Kopier tekstutdrag.
I modulredigeringsprogrammet limer du inn tekstutdraget på ønsket sted i module.html (HTML. + HubL). Du kan bruke hurtigtasten Cmd+V eller Ctrl+V.

Skriv modulsyntaks

Når du redigerer modulen din, kan du skrive modulsyntaks i modul .html (HTML + HubL), module .css og module .js modulredigeringsseksjoner. Finn ut mer om modulredigeringsprogrammet og moduloversikten.

Forhåndsvis og publiser en modul

Når du er ferdig med å redigere en modul, inkludert å legge til felt og skrive modulsyntaks, kan du forhåndsvise og publisere modulen.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk på for å åpne en modul i søkeren.
Hvis du vil forhåndsvise en modul, klikker du på Forhåndsvisning øverst til høyre. Du blir sendt til en ny nettleserfane for å forhåndsvise modulen. Forhåndsvisningen synkroniseres med modulredigeringsprogrammet og oppdateres automatisk etter hvert som det gjøres endringer.
Klikk på Publiser endringer for å publisere en modul.

Legg til en modul i en mal

Etter at du har publisert en modul, kan du bruke den på tvers av malene ved å legge den til i en dra-og-slipp-mal eller en spesialkodet mal i Design manager. Hvis du vil legge til moduler i innholdsredigeringsprogrammet, kan du lese mer om hvordan du legger til og redigerer moduler i innholdsredigeringsprogrammet.

Gå til Innhold > Design Manager i HubSpot-kontoen din.
Klikk i søkeren for å åpne en mal.
Hvis du vil legge til en modul i en mal for dra og slipp-redigering i layoutredigeringen, klikker du på fanen + Legg til øverst i inspektøren.
- Skriv inn navnet på modulen i søkefeltet. Hvis du vil begrense søket til egendefinerte moduler, klikker du på rullegardinmenyen Filtrer etter kategori eller tagger og velger Egendefinerte moduler.
- Klikk på ikonet dragHandleIcon dra og slipp-ikonet og flytt modulen på plass i layoutredigeringsprogrammet.
Slik legger du til en modul i en spesialkodet mal:
- Høyreklikk eller Ctrl+klikk på modulen i søkeren, og velg Kopier tekstutdrag. Alternativt kan du klikke på for å åpne modulen, og deretter klikke på Kopier tekstutdrag i delen Bruk av mal i inspektøren.
- Lim inn modulutdraget i den egendefinerte kodemalen i kodeditoren.
Når du er ferdig, klikker du på Publiser endringer øverst til høyre.

Eksempel: Opprett en nedtellingsmodul

Opprett en modul i design manager, og gi den navnet"Countdown Timer".
Klikk på rullegardinmenyen Legg til felt i feltdelen i inspektøren.

- Velg feltet Dato og klokkeslett . Skriv inn navnet "Dato og klokkeslett for hendelse". Dette vil oppdatere feltet HubL variabelnavn til event_date_and_time.

I design manager vises inspektøren for et modulfelt. Øverst i modulfeltets detaljer er det en boks rundt redigeringsikonet for å redigere navnet på modulfeltet. En pil peker mot tekstinntastingsfeltet HubL-variabelnavn med verdien "event_date_and_time".

- Velg feltet Color (Farge ). Skriv inn navnet "Timer Font Color". Dette vil oppdatere feltet HubL variabelnavn til timer_font_color.

Merk: HubL-variabelnavnene må stemme overens med variabelnavnene som er inkludert i modul.html (HTML + HubL) nedenfor.

I modulredigeringsprogrammet kopierer du følgende kode og limer den inn i den relevantedelen på :

<span id="target-date" style="display: none;"></span>


<div style="float: left; width: 100%; color: ;">
<div class="time_container" style="margin-left: 30%;">
<span id="days"></span><br>
Dager
</div>
<div class="time_container">
<span id="hours"></span><br>
Timer
</div>
<div class="time_container">
<span id="minutes"></span><br>
Referat
</div>
<div class="time_container">
<span id="seconds"></span><br>
Sekunder
</div>
</div>

.time_container {
float: left;
bredde: 10 %;
tekstjustering: midt;
}
.time_container span {
font-weight: bold;
skriftstørrelse: 200 %;
}

// Funksjon for å beregne og vise nedtelling
funksjon updateCountdown() {
// Hent måldatoen fra det skjulte spennet
const targetDate = new Date(document.getElementById('target-date').textContent);
// Hent gjeldende dato
const currentDate = new Date();
// Beregne gjenværende tid (i millisekunder)
const timeRemaining = targetDate - currentDate;
// Sjekk om måldatoen har passert
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Nedtellingen er utløpt';
retur;
}
// Beregn gjenværende dager, timer, minutter og sekunder
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Vis nedtellingen
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${sekunder}`;
}
// Oppdater nedtellingen hvert sekund
setInterval(updateCountdown, 1000);
// Første Ringer for å oppdatere nedtellingen umiddelbart
updateCountdown();

I design manager vises koderedigeringsprogrammet og inspektøren for en modul. I kodeditoren er det plassert bokser rundt seksjonene module.html, module.css og module.js.

Når du er ferdig, forhåndsviser og publiserer du modulen.
Fortsett å legge til modulen i en mal.

Var denne artikkelen nyttig?

Dette skjemaet brukes kun for tilbakemeldinger om dokumentasjon. Se hvordan du kan få hjelp med HubSpot.