NO | Knowledge Quick Answers

Opprette og redigere moduler

Skrevet av HubSpot Support | Jun 28, 2023 9:54:26 AM

I Design Manager-verktøyet 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 tilpassesfullt ut i side-, e-post- eller bloggredigeringsprogrammet.

Væroppmerksom på at oppretting av moduler krever kunnskap om HTML, CSS, HubL og HubSpots design manager. HubSpot anbefaler at du samarbeider med en utvikler for å lage kodede moduler.

Opprett en ny modul

  • Klikk på rullegardinmenyen Fil øverst i søkeren, og velg Ny fil.

  • I dialogboksen klikker du på rullegardinmenyen Hva vil du bygge i dag? og velger Modul.

  • Klikk på Neste.
  • Merk av i avmerkingsboksen ved siden av hver innholdstype der modulen skal brukes: sider, blogginnlegg, bloggoppføringer, e-poster eller sitater. Moduler som brukes i e-postmaler, kan ikke inneholde CSS eller JavaScript.

Merk: Egendefinerte moduler for bruk i e-poster kan bare opprettes i kontoer med et Marketing Hub Professional- eller Enterprise-abonnement .

  • Velg om denne modulen skal være en lokal 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, og klikk deretter på Opprett.

Merk modulen din

Som standard vil innholdsredigeringsprogrammet referere til en modul ved hjelp av navnet den ble gitt i designadministratoren. Hvis du vil at modulen skal bruke et annet navn i innholdsredigeringsprogrammet, kan du angi en etikett .

Legg til felt i modulen

Legg til felt i modulen for å angi modulens innhold eller utforming og gjøre den redigerbar i innholdsredigeringsprogrammet. Finn ut mer om tilgjengelige felttyper i utviklerdokumentasjonen vår.

  • I modulinspektøren til høyre klikker du på rullegardinmenyen Legg til felt i Felt-delen , og velger deretter et felt du vil legge til i modulen.

  • Rediger navnet på feltet ved å klikke på blyantikonet edit ved siden av feltnavnet. Hvis du vil redigere HubL-variabelnavnet, gjør du endringene i tekstfeltet HubL-variabelnavn .

Legg til standardinnhold i feltet

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

I eksemplet nedenfor er felttypen et bildefelt, så alternativene for standardinnhold er å velge et standardbilde og skjule størrelseskontrollene.

Angi alternativer for feltredigering

I delen Redigeringsalternativer kan du aktivere følgende alternativer for hvordan brukere kan redigere modulen i innholdsredigeringsprogrammet:

  • Gjør dette feltet obligatorisk: Brukeren kan ikke la dette feltet stå tomt i innholdsredigeringsprogrammet.
  • Forhindre redigering i innholdsredigeringsprogrammet: Feltinnholdet kan ikke redigeres i innholdsredigeringsprogrammet, men kan fortsatt redigeres på mallenivå. Dette alternativet er ikke tilgjengelig for globale moduler, som ikke kan redigeres på sidenivå.
  • Tooltip-hjelpetekst: Legg til hjelpetekst i feltet for å gi brukerne kontekst eller instruksjoner. Denne hjelpeteksten vises i et verktøytips når brukeren holder musepekeren over feltet under redigering.

  • Inline-hjelpetekst: Legg til hjelpetekst i feltet for å gi brukerne kontekst eller instruksjoner. Denne hjelpeteksten vises under feltet når en bruker redigerer modulen.

Angi betingelser for feltvisning

Du kan bruke feltvisningsbetingelser for å angi at et modulfelt bare skal vises hvis et annet felt oppfyller visse kriterier.

  • I delen Visningsbetingelser klikker du på rullegardinmenyen HubL-variabel for å velge et modulfelt, og deretter klikker du på rullegardinmenyen er ikke tom for å velge betingelsen for feltet.
  • Hvis du velger betingelsen er lik, angir du en verdi eller et regex.

I eksemplet nedenfor angis visningsbetingelser for et bildefelt. Betingelsen er at verdien i tekstfeltet image_title må være lik Headshot for at bildefeltet skal vises i modulen.

Visningsbetingelsene aktiveres automatisk når du har angitt en betingelse. Hvis du vil deaktivere visningsbetingelsene, klikker du på vippebryteren til høyre for Visningsbetingelser.

Angi alternativer for feltforsterker

Du kan angi repeater-alternativer for feltet ditt i delen Repeater-alternativer . Repeatere er felt og grupper som kan opprette flere objekter og vise dem ved hjelp av en for loop.

  • I seksjonen Repeater-alternativer velger du et minimum og/eller maksimum maksimalt antall nødvendige forekomster av dette feltet.
  • Du kan også velge å angi et standard objektantall, som er antallet forekomster av feltet som skal vises som standard i modulen.

I eksemplet nedenfor er bildefeltet satt opp som en glidebryter. Grensene for antall objekter er satt slik at minst 3 bildefelt vises i modulen, og maksimalt 5 bildefelt. En bruker vil som standard se 4 bildefelt i modulen, og kan velge å legge til ett bildefelt til eller fjerne ett eksisterende bildefelt.

Repeater-alternativene aktiveres automatisk når du har endret et av alternativene. Hvis du vil deaktivere repeater-alternativene, klikker du på vippebryteren til høyre for Repeater Options.

Grupper modulfelt

Når du har opprettet felter, kan du gruppere opptil fire av dem sammen for å holde feltene organisert etter relevans. Feltgrupper kan brukes til å bygge opp tilpasset feltlogikk. Finn ut mer om feltgrupper i modulen.

For å gruppere modulfelt sammen:

  • Klikk på Gruppe i høyre sidefelt i modulredigeringsprogrammet.

  • Velg feltene du vil gruppere sammen.
  • Klikk på Opprett gruppe.

Kopier og lim inn feltutdragene dine

  • Når du er klar til å innlemme et felt i modulen, kopierer og limer du inn feltutdraget i modulens HTML + HubL-redigeringsprogram .
    • Hvis du er i feltinspektøren, klikker du påKopier ut drag til høyre for feltets HubL-variabelnavn.
    • Hvis du er i modulinspektøren, holder du musepekeren over feltet og klikker på rullegardinmenyen Handlinger og velger deretter Kopier utdrag.
  • Klikk på stedet du vil legge til feltet i HTML + HubL-redigeringsprogrammet, og lim deretter inn kodebiten ved å trykke på Ctrl+V eller Cmd+V.

Skriv syntaksen for modulen

Når du redigerer modulen, kan du skrive ytterligere modulsyntaks i HTML + HubL-, CSS- og JS-redigeringsrutene . Du finner mer informasjon om modulkodeditoren og modulsyntaksreferansen i HubSpots designerdokumentasjon.

Legg til hjelpetekst i modulen

Legg til hjelpetekst i delen Editor-alternativer for å gi brukerne kontekst når de redigerer modulen. Hjelpeteksten kan ikke være lengre enn 300 tegn.

Når en bruker redigerer modulen i en innholdsredigerer, vises hjelpeteksten over modulfeltene.

Forhåndsvisning av modulen

Du kan forhåndsvise hvordan modulen din vil se ut og fungere i innholdsredigeringsprogrammet ved å klikke på knappen Forhåndsvisning øverst til høyre i modulredigeringsprogrammet. Forhåndsvisningen av modulen åpnes i en ny fane. Denne forhåndsvisningen synkroniseres med redigeringsprogrammet og oppdateres automatisk mens du arbeider.

Publiser modulen din

Når du er ferdig med å legge til felter og skrive modulsyntaksen, kan du publisere modulen. Klikk på Publiser endringer øverst til høyre.

Gjør modulen tilgjengelig for maler

  • Slå på knappen Gjør tilgjengelig for maler øverst til høyre i redigeringsverktøyet for å gjøre denne modulen tilgjengelig for maler.

  • Slå av denne bryteren for å gjøre endringer eller teste modulens funksjonalitet. Hvis denne bryteren er deaktivert, vil teamet ditt se et varsel om at denne modulen ikke er tilgjengelig for maler.

Legg til modulen i en mal

Når du har publisert en modul, kan du bruke den på alle sidene dine ved å legge den til i en mal.

Slik legger du til en modul i en dra-og-slipp-mal:

  • I malens layoutredigeringsprogram klikker du på fanen Legg til øverst i layoutinspektøren og søker deretter etter modulen. Egendefinerte moduler som du har opprettet, kan identifiseres ved hjelp av ikonet for egendefinerte moduler: customModules.
  • Dra og slipp modulen i malen.

Hvis du vil legge til en modul i en kodet mal, kan du kopiere og lime inn modulutdraget i malen:

  • Hvis du vil kopiere modulutdraget fra modulredigeringsprogrammet, klikker du på Kopier utdrag nederst i høyre sidefelt.

  • Slik kopierer du modulutdraget fra venstre sidefelt i designadministratoren:
    • Finn den egendefinerte modulen i venstre sidefelt.
    • Høyreklikk på modulen, og velg deretter Kopier utdrag. Alternativt kan du markere modulen, klikke på Handlinger øverst til venstre og velge Kopier kodebiten.

  • Lim inn kodebiten der det er nødvendig i den kodede malen.