HubSpots designmanager kombinerer alle de værktøjer, som designere har brug for til at bygge topmoderne hjemmesider, samtidig med at den giver marketingfolk den fleksibilitet, de ønsker, når de skaber indhold.
I denne artikel får du en gennemgang af alle funktionerne i designmanageren. Hvis du er på udkig efter specifikke kodeeksempler og referencedokumentation, kan du tjekke HubSpots udviklerdokumentation.
Designmanageren samler flere vigtige værktøjer i én kraftfuld app:
Naviger til din designmanager for at udforske disse værktøjer.
Finderen er et sted, hvor du kan administrere alle dine mapper, skabeloner, moduler og kodede filer. Du kan organisere dine filer og mapper, som du vil, ved hjælp af finderens træk og slip-grænseflade. Hvis du klikker på en fil, kan du udvide eller skjule de filer, den indeholder.
Alle Marketing Hub Professional- og Enterprise- og Content Hub Professional- og Enterprise-konti har som standard en @hubspot-mappe i designmanageren. Denne mappe indeholder alle dine temaer og standardmoduler, herunder drag and drop-e-mailmoduler. Disse temaer og moduler er skrivebeskyttede, men kan klones, hvis du vil tilpasse dem. Læs mere om, hvordan du tilpasser temaer og standardmoduler.
Klik på File for at oprette nye filer eller mapper, eller for at foretage handlinger på det aktiv, der er valgt i søgeren, f.eks. slette, klone eller omdøbe aktivet. Brug indstillingerne under View til at styre placeringen af dine filer og mapper. Du kan hurtigt skjule alle mapper eller få vist nyligt redigerede eller slettede aktiver.
Bemærk: Finderen er kontekstuel, hvilket betyder, at dine handlinger altid vil være i forhold til de valgte mapper og filer. Hvis du vil oprette en ny fil eller mappe i en bestemt mappe, skal du klikke på den pågældende mappe i søgeren. Hvis du vil oprette en ny fil eller mappe uden for alle eksisterende mapper, skal du klikke på View og derefter vælge Deselect all.
Menuen Handlinger er kun aktiv, hvis en fil eller mappe er valgt, og den giver kontekstuelle muligheder for den type aktiv. Du kan også højreklikke direkte på aktivet for at gøre noget af følgende:
Når du klikker på navnet på en skabelon, et modul eller en kodet fil, åbnes dit valg i en fane i editoren. Fanebladene gør det nemt for dig at multitaske og skifte mellem dine forskellige skabeloner og kodede filer. Du kan højreklikke på en fane for at få vist muligheder for at administrere dine faner i editoren. Du kan se en komplet liste over åbne faner ved at klikke på pilen ned til højre.
For at give dig selv mere plads til at arbejde i layout-editoren, kan du klikke på kollaps-ikonet for at kollapse søgeren. Du kan udvide søgeren igen ved at klikke på mappeikonet .
For at oprette en ny skabelon, modul eller kodet fil skal du klikke på Fil > Ny fil i øverste venstre hjørne af søgeren. Du har mulighed for at oprette en af følgende typer aktiver:
Layout-editoren er en træk og slip-brugerflade til strukturen og standardindholdet på dine sider og e-mails. Du kan se navnene på dine moduler og grupper sammen med den body class, der er anvendt til hver komponent. Du kan ændre hvert modul eller gruppe ved at klikke på det for at redigere i inspektøren i højre side, eller ved at højreklikke på komponenten for at få adgang til inspektørens funktioner.
Træk og slip komponenter i layout-editoren for at justere deres placering og størrelse på din skabelon. Der er Undo og Redo-knapper i øverste venstre hjørne, så du hurtigt kan vende tilbage til dine ændringer. Du kan også højreklikke på et modul for hurtigt at gruppere, klone eller ændre en modultype, eller bruge tastaturgenveje til at opnå de samme handlinger.Klik på knappen Preview i øverste højre hjørne for at se et eksempel på dit arbejde og teste dit layout på forskellige skærmstørrelser.
Alle HubSpot-skabelonlayouts er responsive, hvilket betyder, at de automatisk tilpasser sig forskellige skærmstørrelser. Denne editor kompilerer dine drag and drop-moduler til ren HTML-markering, der er gjort responsiv af noget indbygget CSS.
Få mere at vide om at oprette og redigere skabeloner og tilføje stilarter til din skabelon.
Inspektøren giver dig mulighed for at tilføje og redigere komponenter i en skabelon eller et modul. Den er kontekstafhængig af den opgave, du udfører, og filtypen. For eksempel:
Afhængigt af hvilken type modul, der er valgt i din skabelon, kan der være forskellige muligheder i inspektøren.
For drag and drop-skabeloner bruges fanen + Tilføj til at tilføje nye komponenter til dit layout. Fanen Rediger i inspektøren kan bruges til at tildele tilpassede CSS-klasser, redigere standardindhold eller vedhæfte kodede filer.
Inspektøren indeholder en brødkrummenavigation i toppen, så du hurtigt kan navigere mellem det aktiv, modul, gruppe og skabelon, du arbejder på i øjeblikket.
For specialkodede HTML & HUBL-skabeloner og -moduler kan du bruge inspektøren til at tilføje nye felter eller linke til kodede filer. Du kan også tilføje filtertags for at angive indholdstype og funktion for dine kodede skabeloner og moduler, så de bliver lettere at søge efter i søgeren. Du kan også finde uddrag og flere detaljer om, hvordan disse brugerdefinerede kodede aktiver kan bruges i dine skabeloner.
HubSpots kodeeditor er en kraftfuld IDE, der giver dig mulighed for at kode CSS-filer, Javascript-filer og endda HTML-skabeloner. Når du koder eller redigerer dine stylesheets, kan du live-forhåndsvise effekten af dine ændringer på en række forskellige skærmstørrelser. Kodeeditoren drager også fordel af mange andre nyttige IDE-funktioner såsom farvekodede klasser, fejlkontrol, syntaksfremhævning, automatisk lagring, automatisk lukning af tags, automatisk indrykning og meget mere.
Læs mere om, hvordan du bruger kodeeditoren.
Bemærk: Som standard minificerer HubSpot automatisk JavaScript og CSS, der er inkluderet i designmanageren, for at fjerne unødvendige mellemrum, linjeskift og kommentarer. Dette gælder også for JavaScript og CSS, der uploades til designmanageren via CLI. Det betyder, at du ikke bør tilføje allerede minificeret kode direkte til designmanageren.
Lær mere om JavaScript og CSS-minificering.
Mens HubSpots drag and drop-skabeloner kommer med et antal standardmoduler at vælge imellem, kan designere lejlighedsvis have brug for en mere tilpasset designløsning. Moduler er genanvendelige specialkodede komponenter, der består af HTML- og HubL-felter , CSS og Javascript. Disse moduler kan føjes til en skabelon og tilpasses i sideeditoren uden nogen form for kode.
Brug inspektøren til at tilføje felter, vedhæfte kodede filer eller tilføje tags til at organisere dine aktiver. Ligesom i kodeeditoren kan du live-forhåndsvise dit arbejde på forskellige skærmstørrelser, mens du er i gang. Du kan også angive standardindhold for dine modulfelter, låse standardindhold eller gøre specifikke modulfelter obligatoriske.
HubSpots filhåndtering gemmer alle de aktiver, som du bruger til at skabe indhold. Dette værktøj giver dig mulighed for at uploade PDF'er, billeder, videoer, lydfiler, skrifttyper og meget mere. Du kan få adgang til dine kreative aktiver eller hurtigt uploade nye filer uden at skulle forlade appen.