Opret og rediger moduler i designmanageren

Med designmanageren kan du oprette brugerdefinerede moduler for at tilføje avancerede funktioner til din blog, dine sider eller dine e-mails. Brugerdefinerede moduler tilbyder en bred vifte af funktioner, så indholdet kan tilpasses fuldt ud i side-, e-mail- eller blog-editoren.

Bemærk: Oprettelse af moduler kræver kendskab til HTML, CSS, HubL og HubSpot design manager. HubSpot anbefaler, at man samarbejder med en udvikler om at oprette kodede moduler.

Opret et nyt modul

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på rullemenuen Filer øverst i søgeren, og vælg Ny fil.

3. I dialogboksen skal du klikke på rullemenuen Hvad vil du bygge i dag? og vælge Modul.
4. Klik på Næste.
5. I feltet Hvor vil du bruge dette modul skal du markere afkrydsningsfeltet ved siden af hver indholdstype, hvor dit modul skal bruges (f.eks. blogindlæg, e-mails eller landingssider).
6. I feltet Modulets indholdsområde skal du vælge en mulighed (f.eks. Lokalt modul eller Globalt modul ). Hvis du opretter et globalt modul, vil redigering af modulets indhold opdatere alle de steder, hvor modulet bruges.
7. Indtast et filnavn til modulet.
8. Hvis du vil ændre modulets filplacering, skal du klikke på Skift i afsnittet Filplacering. Vælg en ny placering i pop op-boksen, og klik derefter på Vælg.
9. Klik på Opret, når du er færdig.
10. Fortsæt med at redigere modulet.

Bemærk: Moduler, der bruges i e-mails, kan kun oprettes på konti med et Marketing Hub Professional- eller Enterprise-abonnement. De kan ikke indeholde CSS eller JavaScript.

Rediger et modul

Når du har oprettet et modul i designmanageren, kan du tilpasse dets funktionalitet og udseende. Mærk modulet for at skabe klarhed, tilføj og konfigurer felter, og juster felteditorindstillinger som f.eks. standardindhold. Indstil visningsbetingelser og gentagelsesmuligheder, og gruppér de relaterede felter for bedre organisering. Du kan også kopiere og indsætte feltstumper, skrive brugerdefineret modulsyntaks, tilføje nyttig instruktionstekst og redigere, hvilke skabelontyper dit modul kan bruges med.

Tilføj en label til et modul

I designmanageren kan du tilføje eller opdatere en etiket til et modul for at hjælpe brugerne med at identificere det i indholdseditoren. Hvis etiketten er tom, vises modulets navn som standard.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på i søgeren for at åbne det modul, du vil redigere etiketten til.
3. Indtast en etiket i inspektøren.

Tilføj felter til et modul

Føj felter til et modul for at indstille modulets indhold eller styling og gøre det redigerbart i indholdseditoren. Læs mere om tilgængelige felttyper.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik i søgeren for at åbne et modul.
3. Klik på rullemenuen Tilføj felt i afsnittet Felter i inspektøren. Vælg derefter et felt, der skal føjes til modulet.

4. For at redigere navnet på feltet skal du klikke på redigeringsikonet edit og indtaste et nyt navn. For at redigere navnet på HubL-variablen skal du indtaste et nyt navn i feltet HubL-variabelnavn.

Tilpas feltets standardindhold

I afsnittet Indholdsindstillinger kan du tilføje standardindhold, som vises, når modulet bruges i skabeloner og indholdsredigeringsprogrammer. Indstillingerne for standardindhold varierer afhængigt af felttypen.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på i søgeren for at åbne et modul.
3. Hold musen over et felt i afsnittet Fields i inspektøren, og klik på Edit.
4. I afsnittet Indholdsindstillinger kan du tilføje eller redigere standardindholdsindstillinger. De tilgængelige standardindholdsindstillinger afhænger af den valgte felttype.

Hvis du f.eks. tilføjer en felttype Dato og tid til et modul, kan du vælge en standarddato og -klokkeslæt. Du kan også angive et standardtidsinterval.

Indstilling af felteditorindstillinger

I afsnittet Editorindstillinger kan du gøre et felt obligatorisk og forhindre redigering i indholdseditoren. Du kan også tilpasse hjælpeteksten.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på i søgeren for at åbne et modul.
3. Hold musen over et felt i afsnittet Fields i inspektøren, og klik på Edit.
4. I afsnittet Editor options skal du slå Make this field required til for at gøre feltet obligatorisk. Det vil forhindre brugere i at lade feltet stå tomt i indholdseditoren.
5. Hvis du vil forhindre, at et felts indhold redigeres, skal du slå Forhindr redig ering i indholdsredigering til. Feltets indhold kan stadig tilpasses i designmanageren på skabelonniveau. Denne indstilling er ikke tilgængelig for globale moduler.
6. Hvis du vil tilføje kontekst eller instruktioner om, hvordan du bruger feltet, skal du indtaste tekst i tekstfeltet Tooltip-hjælp eller i tekstfeltet Inline-hjælp .
   • Tooltip-hjælpetekst: Denne tekst vises i et tooltip, når en bruger holder musen over infoCircleIcon info-ikonet i indholdseditoren.
   • Inline-hjælpetekst: Denne tekst vises under feltet, når en bruger redigerer modulet i indholdseditoren.

Indstil betingelser for visning af felter

I afsnittet Visningsbetingelser kan du bruge feltvisningsbetingelser til at indstille et modulfelt til kun at blive vist, hvis et andet felt opfylder visse kriterier.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik i søgeren for at åbne et modul.
3. Hold musen over et felt i afsnittet Fields i inspektøren, og klik på Edit.
4. I afsnittet Visningsbetingelser skal du klikke på rullemenuen HubL-variabel og vælge en variabel.
5. Klik på den anden rullemenu, og vælg en mulighed (f.eks. Er lig med eller Er ikke tom). Der kan være behov for flere betingelsesfelter, afhængigt af den valgte mulighed. Hvis du f.eks. vælger Er lig med, er der brug for et ekstra værdifelt.
6. Som standard slås visningsbetingelser automatisk til, når en betingelse er konfigureret. Hvis du vil slå visningsbetingelser fra, skal du slå kontakten Visningsbetingelser fra.

Indstil indstillinger for feltrepeater

I afsnittet Repeater options kan du konfigurere repeater-indstillinger for felter og grupper. Når repeater-indstillingerne er slået til, oprettes og vises flere objekter ved hjælp af et for -loop.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på i søgeren for at åbne et modul.
3. Hold musen over et felt i afsnittet Fields i inspektøren, og klik på Edit.
4. I afsnittet Repeater options skal du indtaste et tal i felterne Minimum og Maximum (valgfrit). Dette indstiller det mindste antal gange, feltet skal vises i modulet, op til den maksimale værdi.
5. Hvis du vil indstille, hvor mange gange et felt skal vises som standard, skal du indtaste et tal i feltet Default object count.
6. Som standard er repeaterindstillinger automatisk slået til, når de er konfigureret. Hvis du vil slå repeaterindstillinger fra, skal du slå Repeater options fra.

For eksempel ændres et billedfelts repeaterindstillinger til at vise mindst tre og op til fem billedfelter. En værdi på fire billedfelter er konfigureret som standard. I indholdseditoren vil en bruger som standard se fire billedfelter og kan tilføje endnu et billedfelt eller fjerne et eksisterende billedfelt.

Gruppering af modulfelter

Når du har oprettet felter, kan du gruppere dem for at holde dine felter organiseret efter relevans. Feltgrupper kan bruges til at opbygge brugerdefineret feltlogik. Du kan gruppere op til fire felter sammen. Få mere at vide om modulfeltgrupper.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på i søgeren for at åbne et modul.
3. I inspektøren skal du i afsnittet Fields klikke på rullemenuen Actions og vælge Group.
4. Vælg et eller flere felter, der skal grupperes, og klik derefter på Opret gruppe.

Tilføj hjælpetekst til dit modul

I sektionen Editor options kan du tilføje hjælpetekst for at give brugerne kontekst, når de redigerer modulet. Denne tekst vises over felterne i dit modul.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på i søgeren for at åbne et modul.
3. I inspektøren, i afsnittet Editorindstillinger , skal du indtaste tekst i feltet Inline help text.

Administrer indholdstyper og tilgængelighed for et modul

Tilføj eller fjern de indholdstyper, som brugerne kan bruge et modul til, f.eks. blogindlæg eller landingssider. Du kan også slå tilgængeligheden af et modul i skabeloner og sider til eller fra.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik i søgeren for at åbne et modul.
3. Hvis du vil redigere indholdstyper for et modul, skal du klikke på Indholdstyper under modulets navn i inspektøren øverst til højre.

1. • I dialogboksen skal du markere eller fjerne markeringen i afkrydsningsfeltet ved siden af hver indholdstype, hvor dit modul skal bruges eller ikke bruges (f.eks. blogindlæg, e-mails eller landingssider).
   • Klik på Opdater, når du er færdig.

4. For at styre tilgængeligheden af et modul i skabeloner eller sider skal du slå Gør tilgængelig for skabeloner og sider til øverst til højre. Hvis du vil teste modulets funktionalitet eller slå tilgængeligheden i skabeloner og sider fra, skal du slå knappen Gør tilgængelig for skabeloner og sider fra.

Bemærk: Hvis du slår Gør tilgængelig for skabeloner eller sider fra, fjernes modulet ikke fra eksisterende skabeloner eller sider.

Kopier og indsæt feltuddrag

Når du indarbejder et felt i et modul, kan du kopiere og indsætte feltuddraget i afsnittet module.html (HTML + HubL) i moduleditoren.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på et modul i søgeren for at åbne det.
3. Hold musen over et modulfelt i inspektøren, og klik på rullemenuen Handlinger i afsnittet Felter. Vælg derefter Copy snippet.
4. Indsæt feltuddraget på det ønskede sted i module.html (HTML. + HubL) -sektionen i moduleditoren. Du kan bruge tastaturgenvejen Cmd+V eller Ctrl+V.

Skriv modulets syntaks

Når du redigerer dit modul, kan du skrive modulsyntaks i afsnittene module .html (HTML + HubL), module .css og module .js i moduleditoren. Få mere at vide om moduleditoren og moduloversigten.

Forhåndsvisning og udgivelse af et modul

Når du er færdig med at redigere et modul, herunder at tilføje felter og skrive modulsyntaks, kan du se en forhåndsvisning og udgive modulet.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på i søgeren for at åbne et modul.
3. Klik på Preview øverst til højre for at få vist et modul. Du bliver sendt til en ny browserfane, hvor du kan se en forhåndsvisning af modulet. Denne forhåndsvisning synkroniseres med moduleditoren og opdateres automatisk, når der sker ændringer.
4. Klik på Udgiv ændringer for at udgive et modul.

Føj et modul til en skabelon

Når du har udgivet et modul, kan du bruge det på tværs af skabeloner ved at føje det til en træk og slip-skabelon eller en brugerdefineret kodet skabelon i designmanageren. Hvis du vil tilføje moduler i indholdseditoren, kan du læse mere om at tilføje og redigere moduler i indholdseditoren.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på i søgeren for at åbne en skabelon.
3. For at tilføje et modul til en træk-og-slip-skabelon i layouteditoren skal du klikke på fanen + Tilføj øverst i inspektøren.
   • Indtast modulets navn i feltet Søg. For at indsnævre søgningen til brugerdefinerede moduler skal du klikke på rullemenuen Filtrer efter kategori eller tags og vælge Brugerdefinerede moduler.
   • Klik på træk og slip-ikonet på dragHandleIcon, og flyt modulet på plads i layouteditoren.
4. Sådan tilføjer du et modul til en brugerdefineret kodet skabelon:
   • Højreklik eller Ctrl+klik på modulet i søgeren, og vælg Kopier uddrag. Alternativt kan du klikke for at åbne modulet og derefter klikke på Copy snippet i afsnittet Template usage i inspektøren.
   • Indsæt moduluddraget i kodeeditoren i den brugerdefinerede skabelon.
5. Når du er færdig, skal du klikke på Publicer ændringer øverst til højre.

Et eksempel

Opret et nedtællingsmodul

1. Opret et modul i designmanageren, og giv det navnet'Countdown Timer'.
2. I inspektøren skal du klikke på rullemenuen Tilføj felt i sektionen Felt.

• • Vælg feltet Dato og tid. Indtast navnet 'Begivenhedsdato og -tidspunkt'. Dette vil opdatere HubL-variablens navnefelt til event_date_and_time.

• • Vælg feltet Farve. Indtast navnet 'Timer Font Color'. Dette vil opdatere HubL-variablens navnefelt til timer_font_color.

Bemærk: HubL-variabelnavnene skal matche variabelnavnene i modul.html (HTML + HubL)-kodeafsnittet nedenfor.

3. I moduleditoren skal du kopiere og indsætte følgende kode i afsnittet module.html (HTML + HubL):

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

<!-- Vis nedtællingstimer -->
<div style="float: left; width: 100%; color: ;"> <div class="time_container" style="display: none;">{ module.timer_font_color.color }}.
<div class="time_container" style="margin-left: 30%;"> <span id="days"><span> <!
<span id="dage"></span><br>
Dage
</div>
<div class="time_container"> <span id="dage"></span><br> Dage </div>.
<span id="timer"></span><br>
Timer
</div>
<div class="time_container"> <span id="minutes"></span><br>.
<span id="minutter"></span><br>
Minutter
</div>
<div class="time_container"> <span id="minutter"></span><br> Minutter
<span id="sekunder"></span><br>
Sekunder
</div>
</div>

4. Kopier og indsæt følgende kode i afsnittet module.css:

.time_container {
float: left;
bredde: 10%;
tekstjustering: center;
}
.time_container span {
font-vægt: fed;
font-size: 200%;
}

5. Kopier og indsæt følgende kode i afsnittet module.js:

// Funktion til at beregne og vise nedtælling
funktion updateCountdown() {
// Hent måldatoen fra det skjulte span
const targetDate = new Date(document.getElementById('target-date').textContent);
// Hent den aktuelle dato
const currentDate = new Date();
// Beregn den resterende tid (i millisekunder)
const timeRemaining = targetDate - currentDate;
// Tjek, om måldatoen er overskredet
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Nedtælling udløbet';
return;
}
// Beregn resterende dage, timer, minutter og 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((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Vis nedtællingen
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${sekunder}`;
}
// Opdater nedtællingen hvert sekund
setInterval(updateCountdown, 1000);
// Første kald for at opdatere nedtællingen med det samme
updateCountdown();

6. Når du er færdig, skal du forhåndsvise og udgive modulet.
7. Fortsæt med at tilføje modulet til en skabelon.