Opprett og rediger moduler i Design Manager

Med designadministratoren 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 å opprette moduler kreves det kunnskap om HTML, CSS, HubL og HubSpot Design Manager. HubSpot anbefaler at du samarbeider med en utvikler for å opprette kodede moduler.

Opprett en ny modul

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

3. I dialogboksen klikker du på rullegardinmenyen Hva vil du bygge i dag? og velger Modul.
4. Klikk på Neste.
5. I feltet Hvor vil du bruke denne modulen merker du av i avmerkingsboksen ved siden av hver innholdstype der modulen skal brukes (f.eks. blogginnlegg, e-postmeldinger eller destinasjonssider).
6. Velg et alternativ i feltet Modulinnholdsomfang (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.
7. Skriv inn et filnavn for modulen.
8. 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.
9. Når du er ferdig, klikker du på Opprett.
10. 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 inneholde CSS eller JavaScript.

Rediger en modul

Når du har opprettet en modul i designbehandleren, kan du tilpasse funksjonalitet og utseende. Du kan merke modulen for å gjøre den tydeligere, legge til og konfigurere felt og justere feltredigeringsalternativer, for eksempel standardinnhold. Du kan angi visningsbetingelser og gjentakelsesalternativer, og gruppere de relaterte feltene for bedre organisering. Du kan også kopiere og lime inn feltutdrag, skrive egendefinert modulsyntaks, legge til nyttig instruksjonstekst og redigere hvilke maltyper modulen kan brukes med.

Legg til en etikett i en modul

I designbehandleren 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.

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

Legge til felt i en modul

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

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

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

Tilpasse standardinnholdet i felt

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

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på for å åpne en modul i søkeren.
3. Hold musepekeren over et felt i feltdelen i inspektøren, og klikk på Rediger.
4. I delen Innholdsalternativer kan du legge til eller redigere standard innholdsalternativer. Hvilke standard innholdsalternativer 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.

Angi alternativer for feltredigering

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

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på for å åpne en modul i søkeren.
3. Hold musepekeren over et felt i feltdelen i inspektøren, og klikk på Rediger.
4. I delen Redigeringsalternativer 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.
5. Hvis du vil forhindre at innholdet i et felt redigeres, slår du på Hindre redigering i innholdsredigering. Feltets innhold kan fortsatt tilpasses i designbehandleren på monnivå. Dette alternativet er ikke tilgjengelig for globale moduler.
6. Hvis du vil legge til kontekst eller instruksjoner om hvordan du bruker feltet, kan du skrive inn tekst i feltet Tooltip-hjelpetekst eller i feltet Inline-hjelpetekst .
   • Tooltip-hjelpetekst: 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.

Angi visningsbetingelser for felt

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

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på for å åpne en modul i søkeren.
3. Hold musepekeren over et felt i feltdelen i inspektøren, og klikk på Rediger.
4. I delen Visningsbetingelser klikker du på rullegardinmenyen HubL-variabel og velger en variabel.
5. Klikk på den andre nedtrekksmenyen, og velg et alternativ (f.eks. Er lik eller Er ikke tom). Det kan være nødvendig med flere betingelsesfelt, avhengig av det valgte alternativet. Hvis du for eksempel velger Er lik, kreves det et ekstra verdifelt.
6. Som standard slås visningsbetingelser automatisk på når en betingelse er konfigurert. Hvis du vil slå av visningsbetingelsene, slår du av Visningsbetingelser .

Angi alternativer for feltrepetisjon

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

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på for å åpne en modul i søkeren.
3. Hold musepekeren over et felt i feltdelen i inspektøren, og klikk på Rediger.
4. I delen Repeater-alternativer 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.
5. Hvis du vil angi hvor mange ganger et felt skal vises som standard, skriver du inn et tall i feltet Default object count.
6. 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 kan et bildefelts repeateralternativer endres til å vise minst tre og opptil fem bildefelt. En verdi på fire bildefelt er konfigurert som standard. I innholdsredigeringsprogrammet vil brukeren se fire bildefelt som standard, og kan legge til ett bildefelt til eller fjerne et eksisterende bildefelt.

Gruppere modulfelt

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.

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på for å åpne en modul i søkeren.
3. I inspektøren klikker du på rullegardinmenyen Handlinger i Felt-delen og velger Grupper.
4. Velg ett eller flere felt som skal grupperes sammen, og klikk deretter på Opprett gruppe.

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.

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

Administrer innholdstyper og tilgjengelighet for en modul

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

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

1. • I dialogboksen merker du av eller fjerner merket i avmerkingsboksen ved siden av hver innholdstype der modulen skal eller ikke skal brukes (f.eks. blogginnlegg, e-postmeldinger eller destinasjonssider).
   • Når du er ferdig, klikker du på Oppdater.

4. Hvis du vil administrere tilgjengeligheten til en modul i maler eller på 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 på 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 feltutdrag

Når du integrerer et felt i en modul, kan du kopiere og lime inn feltutdraget i module .html (HTML + HubL) -delen i modulredigeringsprogrammet.

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

Skrive modulsyntaks

Når du redigerer modulen, kan du skrive modulsyntaks i modul .html (HTML + HubL), module .css og module .js i modulredigeringsprogrammet. 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.

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

Legg til en modul i en mal

Når du har publisert en modul, kan du bruke den på tvers av maler ved å legge den til i en dra-og-slipp-mal eller en egendefinert kodet mal i designbehandleren. Hvis du vil legge til moduler i innholdsredigeringsprogrammet, kan du lese mer om hvordan du legger til og redigerer moduler i innholdsredigeringsprogrammet.

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på for å åpne en mal i søkeren.
3. Hvis du vil legge til en modul i en dra-og-slipp-mal i layoutredigeringsprogrammet, 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å dra-og-slipp-ikonet på dragHandleIcon, og flytt modulen på plass i layoutredigeringsprogrammet.
4. Slik legger du til en modul i en egendefinert kodet mal:
   • Høyreklikk eller Ctrl+klikk på modulen i søkeren, og velg Kopier utdrag. Alternativt kan du klikke på modulen for å åpne den, og deretter klikke på Kopier utdrag i delen Malbruk i inspektøren.
   • Lim inn modulutdraget i den egendefinerte malen i kodeditoren.
5. Når du er ferdig, klikker du på Publiser endringer øverst til høyre.

Eksempel

Opprett en nedtellingsmodul

1. Oppretten modul i Design Manager, og gi den navnet"Countdown Timer".
2. 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 HubL-variabelens navnefelt til event_date_and_time.

• • Velg feltet Farge. Skriv inn navnet "Timer Font Color". Dette vil oppdatere HubL-variabelens navnefelt til timer_font_color.

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

3. I modulredigeringsprogrammet kopierer du følgende kode og limer den inn i delen module.html (HTML + HubL):

<!-- Skjult span for å lagre måldatoen --> <span id="target-date
<span id="target-date" style="display: none;"></span>

<!-- Vis nedtellingstimeren --> <div
<div style="float: left; width: 100%; color: ;"> <div class="time_container
<div class="time_container" style="margin-left: 30%;">
<span id="dager"></span><br>
Dager
</div>
<div class="time_container">
<span id="timer"></span><br>
Timer
</div> </div>
<div class="time_container">
<span id="minutter"></span><br>
Minutter
</div> </div>
<div class="time_container">
<span id="sekunder"></span><br>
Sekunder
</div> </div> Sekunder
</div> </div

4. Kopier og lim inn følgende kode i module.css-seksjonen:

.time_container {
float: left;
width: 10%;
tekstjustering: midt;
}
.time_container span {
font-weight: bold;
font-size: 200%;
}

5. Kopier og lim inn følgende kode i module.js-delen:

// Funksjon for å beregne og vise nedtellingen
function updateCountdown() {
// Henter måldatoen fra det skjulte spennet
const targetDate = new Date(document.getElementById('target-date').textContent);
// Hent gjeldende dato
const currentDate = new Date();
// Beregn 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';
return;
}
// 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 * 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 anrop for å oppdatere nedtellingen umiddelbart
updateCountdown();

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