HubSpots design manager kombinerer alle verktøyene som designere trenger for å bygge toppmoderne nettsteder, samtidig som den gir markedsførere den fleksibiliteten de ønsker når de lager innhold.
I denne artikkelen får du en gjennomgang av alle funksjonene i designadministratoren. Hvis du er ute etter konkrete kodeeksempler og referansedokumentasjon, kan du ta en titt på HubSpots utviklerdokumentasjon.
Design Manager samler flere viktige verktøy i én kraftig app:
Naviger til designadministratoren for å utforske disse verktøyene.
Finder er et sted der du kan administrere alle mapper, maler, moduler og kodede filer. Du kan organisere filene og mappene dine som du vil ved hjelp av dra og slipp-grensesnittet i søkeren. Ved å klikke på en fil kan du utvide eller skjule filene som ligger i den.
Alle Marketing Hub Professional- og Enterprise-kontoer og Content Hub Professional- og Enterprise-kontoer har som standard en @hubspot-mappe i designadministratoren. Denne mappen inneholder alle temaene og standardmodulene dine, inkludert dra og slipp-e-postmoduler. Disse temaene og modulene er skrivebeskyttet, men kan klones hvis du vil tilpasse dem. Finn ut mer om hvordan du tilpasser temaer og standardmoduler.
Klikk på File for å opprette nye filer eller mapper, eller for å utføre handlinger på den valgte ressursen i søkeren, for eksempel slette, klone eller gi nytt navn til ressursen. Bruk alternativene under Vis for å administrere plasseringen av filer og mapper. Du kan raskt skjule alle mapper eller hente frem nylig redigerte eller slettede ressurser.
Merk: Søkeren er kontekstuell, noe som betyr at handlingene dine alltid er knyttet til mapper og filer som er valgt. Hvis du vil opprette en ny fil eller mappe i en bestemt mappe, klikker du på mappen i søkeren. Hvis du vil opprette en ny fil eller mappe utenfor alle eksisterende mapper, klikker du på Vis og velger deretter Fjern alle.
Handlinger-menyen er bare aktiv hvis en fil eller mappe er valgt, og inneholder kontekstuelle alternativer for den aktuelle typen ressurs. Du kan også høyreklikke direkte på ressursen for å gjøre noe av følgende:
Når du klikker på navnet på en mal, modul eller kodet fil, åpnes valget i en fane i redigeringsprogrammet. Med faner kan du enkelt utføre flere oppgaver samtidig og veksle mellom ulike maler og kodede filer. Du kan høyreklikke på en hvilken som helst fane for å åpne alternativer for å administrere fanene i redigeringsprogrammet. Du kan se en fullstendig liste over åpne faner ved å klikke på nedoverpilen til høyre.
For å få mer plass til å arbeide i layoutredigeringsprogrammet kan du klikke på kollaps-ikonet for å kollapse søkeren. Du kan utvide søkeren igjen ved å klikke på mappeikonet .
Du oppretter en ny mal, modul eller kodet fil ved å klikke på Fil > Ny fil øverst til venstre i søkeren. Du kan velge å opprette en av følgende typer ressurser:
Layouteditoren er et dra-og-slipp-grensesnitt for strukturen og standardinnholdet på sidene og e-postene dine. Du ser navnene på modulene og gruppene dine, sammen med kroppsklassen som brukes på hver komponent. Du kan endre hver modul eller gruppe ved å klikke på den for redigering i inspektøren på høyre side, eller ved å høyreklikke på komponenten for å få tilgang til inspektørens funksjonalitet.
Dra og slipp komponenter i layoutredigeringsprogrammet for å justere plassering og størrelse på malen. Du finner knappene Angre og Gjør om øverst til venstre, slik at du raskt kan tilbakestille endringene. Du kan også høyreklikke på en modul for raskt å gruppere, klone eller endre en modultype, eller bruke hurtigtaster for å utføre de samme handlingene.Klikk på knappen Forhåndsvisning øverst til høyre for å forhåndsvise arbeidet ditt og teste oppsettet på ulike skjermstørrelser.
Alle HubSpot-maler er responsive, noe som betyr at de automatisk tilpasser seg ulike skjermstørrelser. Denne editoren setter sammen dra-og-slipp-modulene dine til rene HTML-markeringer som gjøres responsive ved hjelp av innebygd CSS.
Finn ut mer om hvordan du oppretter og redigerer maler og legger til stiler i malen.
Med inspektøren kan du legge til og redigere komponenter i en mal eller modul. Den er kontekstuelt avhengig av oppgaven du utfører og filtypen. For eksempel:
Avhengig av hvilken modultype som er valgt i malen, kan det være ulike alternativer tilgjengelig i inspektøren.
For dra og slipp-maler brukes fanen + Legg til til å legge til nye komponenter i oppsettet. Rediger-fanen i inspektøren kan brukes til å tilordne egendefinerte CSS-klasser, redigere standardinnhold eller legge ved kodede filer.
Inspektøren har en brødsmulenavigasjon øverst, slik at du raskt kan navigere mellom ressursen, modulen, gruppen og malen du arbeider med.
For egendefinerte HTML- og HUBL-maler og -moduler kan du bruke inspektøren til å legge til nye felt eller lenke til kodede filer. Du kan også legge til filterkoder for å angi innholdstype og funksjon for de kodede malene og modulene, slik at de blir lettere å finne i søkeren. Du kan også finne utdrag og mer informasjon om hvordan disse egendefinerte kodede ressursene kan brukes i malene dine.
HubSpots kodeditor er en kraftig IDE som lar deg kode CSS-filer, Javascript-filer og til og med HTML-maler. Mens du koder eller redigerer stilarkene dine, kan du forhåndsvise effekten av endringene på ulike skjermstørrelser. Koderedigeringsprogrammet har også mange andre nyttige IDE-funksjoner, for eksempel fargekodede klasser, feilkontroll, syntaksutheving, automatisk lagring, automatisk lukking av tagger, automatisk innrykk og mye mer.
Finn ut mer om hvordan du bruker kodeditoren.
Merk: Som standard minifiserer HubSpot automatisk JavaScript og CSS som er inkludert i designadministratoren for å fjerne unødvendige mellomrom, linjeskift og kommentarer. Dette gjelder også JavaScript og CSS som lastes opp til designadministratoren via CLI. Dette betyr at du ikke bør legge til allerede minifisert kode direkte i designadministratoren.
Finn ut mer om minifisering av JavaScript og CSS.
HubSpots dra-og-slipp-maler har en rekke standardmoduler å velge mellom, men av og til kan designere ha behov for en mer tilpasset designløsning. Moduler er gjenbrukbare, spesialkodede komponenter som består av HTML- og HubL-felt , CSS og Javascript. Disse modulene kan legges til i en mal og tilpasses i sideredigeringsprogrammet uten bruk av kode.
Bruk inspektøren til å legge til felter, legge ved kodede filer eller legge til tagger for å organisere ressursene dine. Akkurat som i kodeditoren kan du forhåndsvise arbeidet ditt i ulike skjermstørrelser underveis. Du kan også angi standardinnhold for modulfeltene, låse standardinnholdet eller gjøre bestemte modulfelt obligatoriske.
HubSpots filbehandler lagrer alle ressursene du bruker til å lage innhold. Med dette verktøyet kan du laste opp PDF-filer, bilder, videoer, lydfiler, fonter og mye mer. Du kan få tilgang til dine kreative ressurser eller raskt laste opp nye filer uten å måtte forlate appen.