Bygging av tilpassede CMS-maler med HubSpot

Innholdsfortegnelse

  1. Introduksjon
  2. Tilgang til HubSpots Design Manager
  3. Oppsett av malene dine
  4. Legge til moduler
  5. Få mest mulig ut av rutenettoppsettet
  6. Gi alternativer i redigeringsmodulen for frontenden
  7. Angi brukerdefinerte bakgrunnsbilder
  8. Konklusjon
  9. Ofte stilte spørsmål

Introduksjon

I den stadig skiftende verdenen innen digital markedsføring kan et robust, tilpassbart innholdsstyringssystem (CMS) gi en betydelig fordel. En slik plattform som har bevist sin styrke, er HubSpots Content Optimization System (COS). HubSpot COS gjør det mulig for brukerne å opprette mobiloptimaliserte nettsteder, blogger, landingssider og e-postmeldinger, fullt integrert med HubSpots spekter av inbound markedsføringsverktøy.

I denne bloggposten vil vi utforske de viktigste aspektene ved å bygge tilpassede maler innenfor HubSpots COS. Vi vil se nærmere på oppsett av maloppsettet, integrasjon av dynamiske moduler og utnyttelse av avanserte funksjoner som tokens og betinget logikk for å levere skreddersydde innholdsopplevelser.

Ved slutten av denne veiledningen vil du ha en grundig forståelse av hvordan du kan bruke HubSpots verktøy til å utvikle tilpassede CMS-maler som både er funksjonelle og tilpasningsdyktige for dine spesifikke behov.

Tilgang til HubSpots Design Manager

For å begynne å opprette tilpassede maler, må vi først få tilgang til HubSpots Design Manager. Dette kan gjøres ved å logge inn på HubSpot-kontoen din og navigere til Innhold > Design Manager i den øverste navigasjonslinjen.

Oppsett av malene dine

Initielle trinn

  1. Opprette en ny fil: Innen Design Manager, start en ny fil ved å velge "Ny fil." Et vindu vises, og ber deg velge typen mal.
  2. Velge alternativet for kodeeditor: For å bygge tilpassede maler, velger du HTML & HubL -alternativet under kodeeditoren. Dette vil generere en grunnleggende markup som gir deg en start på byggingen av side malen.

Malbygger vs. Koding fra bunnen av

HubSpot tilbyr en malbygger for å opprette et grunnleggende oppsett mer effektivt. Hvis foretrukket, kan du klone denne malen til en ny fil ved å velge Handlinger > Klon til fil, noe som genererer en HTML-fil med nødvendig HubL-kode. Bruken av malbyggeren kan spare tid, men det kan bli vanskelig å håndtere uten forsiktig administrasjon. Alternativt kan du kode fra bunnen av ved å inkludere de nødvendige modultaggene og standard header- og footertokensene.

Legge til moduler

Dynamiske moduler er nøkkelen for å opprette allsidige maler. I HubSpot kan du velge mellom standardmoduler eller opprette egendefinerte moduler fra bunnen av. Syntaksen for standardmoduler er brukervennlig og støtter forskjellige innholdstyper.

To viktige modulparametere

  1. Export_to_template_context=True: Denne parameteren tillater eksport av data fra modulen til malen. Den er spesielt nyttig når du bygger maler med flere tilpassede funksjoner.

  2. No_wrapper=True: Som standard pakker HubSpot inn modulinnhold i div- eller span-tags. Ved å inkludere no_wrapper=True kan dette deaktiveres, avhengig av malens krav.

Få mest mulig ut av rutenettoppsettet

HubSpot bruker et 12-kolonners rutenettssystem basert på Bootstrap 2 (selv om Bootstrap 4 er den nyeste versjonen). Du kan følge dette rammeverket eller lage et tilpasset rutenettoppsett for mer komplekse design.

Gi alternativer i redigeringsmodulen for frontenden

Bruk av kodeeditoren gir større kontroll over malutforming og funksjonalitet. Brukere som ikke er kjent med HTML kan fremdeles gjøre endringer direkte i redigeringsmodulen for frontenden ved å bruke moduler og betinget logikk.

Oppsett av valgmodulen

Valgmodulen gir en liste over forhåndsbestemte verdier for sluttbrukere. Modultaggen ser vanligvis slik ut:

{% module "optional_content_block" choice_value="No,Yes" export_to_template_context=True %}

I malen modulredigeren, vil dette vises som en rullegardinliste som lar brukerne velge "No" eller "Yes" for valgfritt innhold.

Integrering av betinget logikk

HubSpots betingede logikktagger muliggjør dynamisk innhold basert på modulvalg. For eksempel:

{% if optional_content_block == "Yes" %}
  <!-- Ditt innhold her -->
{% endif %}

Denne koden sikrer at innholdsprogrammet bare vises hvis "Yes" er valgt, og gir fleksibilitet og kontroll over hva brukerne ser.

Angi brukerdefinerte bakgrunnsbilder

Å legge til dynamiske bakgrunnsbilder kan markant forbedre malene dine. Prosessen innebærer å inkludere en bilde-modul og sette opp CSS med riktig token.

Trinn:

  1. Legg til en bilde-modul: Det anbefales å plassere modulen høyere i malen.
  2. Konfigurer CSS: Bygg inn bilde-modulens token i CSS-en din for tilpassede bakgrunnsbilder.

Konklusjon

Å opprette tilpassede CMS-maler innen HubSpots COS gir imponerende fleksibilitet og funksjonalitet. Ved å forstå hvordan du kan opprette maler, integrere dynamiske moduler og bruke avanserte funksjoner som betinget logikk og tilpassede bakgrunnsbilder, kan du bygge robuste og brukervennlige maler tilpasset dine spesifikke behov.

Bygging av applikasjoner med maler trenger ikke å være en kompleks prosess med riktige verktøy og tilnærminger. Ved å følge de skisserte trinnene og utforske mer avanserte funksjoner, kan du utnytte den fulle kraften i HubSpots Content Optimization System.

Ofte stilte spørsmål

Spørsmål: Kan jeg opprette tilpassede moduler fra bunnen av i HubSpots Design Manager?
A: Ja, du kan opprette tilpassede moduler ved hjelp av HubSpots kodeeditor. Plattformen lar deg definere modultyper og integrere dem sømløst i malene dine.

Spørsmål: Hva er fordelen med å bruke parameteren 'export_to_template_context=True'?
A: Denne parameteren gjør det mulig å eksportere moduldata til malen, og gir større fleksibilitet og kontroll over malens funksjonalitet.

Spørsmål: Kreves det kunnskap om koding for å bruke HubSpots malbygger?
A: Selv om kunnskap om koding tillater mer avanserte tilpasninger, tilbyr HubSpots malbygger et brukervennlig grensesnitt for å opprette grunnleggende layouter uten omfattende kodingsferdigheter.

Spørsmål: Hvordan fungerer HubSpots rutenettssystem?
A: HubSpot bruker et 12-kolonners rutenettssystem basert på Bootstrap 2. Du kan enten følge dette rammeverket eller tilpasse rutenettoppsettet etter dine designbehov.

Spørsmål: Kan jeg deaktivere standard innpakning av modulinnhold i HubSpot?
A: Ja, ved å inkludere parameteren 'no_wrapper=True' i modulens syntaks kan du forhindre at HubSpot pakker innholdet i div- eller span-tags.

Denne omfattende guiden har som mål å gi handlingsrettede innsikter i bygging av tilpassede CMS-maler med HubSpot, slik at du er godt rustet til å utvikle dynamiske og funksjonelle webressurser som er skreddersydd dine merkevares behov. Lykke til med designet!