En hurtig rundtur i designmanageren

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.

Værktøjer inkluderet i designmanageren

Designmanageren samler flere vigtige værktøjer i én kraftfuld app:

• Finder - et sted, hvor du kan oprette og organisere dine filer, skabeloner, moduler og mapper.
• Layout Editor - en træk og slip-editor til strukturering af dine side-, blog-, e-mail- og systemskabeloner.
• Inspector - her kan du redigere egenskaberne for et layout, et modul eller en gruppe.
• Code Editor - et integreret udviklingsmiljø (IDE) til al din frontend-kode (CSS, Javascript eller endda dine egne HTML-skabeloner).
• Module Editor - genanvendelige brugerdefinerede moduler, som du kan sætte op til at tilføje avanceret funktionalitet til din hjemmeside, som stadig kan administreres af ikke-tekniske brugere.
• File Manager - et filhosting-system til alle din hjemmesides aktiver.

Naviger til din designmanager for at udforske disse værktøjer. På din HubSpot-konto skal du navigere til Indhold > Design Manager.

Finder

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:

• Klon: Lav en kopi af din fil, mappe eller skabelon.
• Flyt: Vælg en ny mappe til dit aktiv.
• Omdøb: Giv aktivet et nyt navn.
• Klon til HTML: Opret en kopi af dit aktiv, der er kodet helt i HTML.
• Kopi til portal: Opret en kopi af dit aktiv, og send den til en anden HubSpot-konto, du har adgang til.
• Opret side/e-mail: Opret et nyt stykke indhold ved hjælp af denne skabelon.
• Vis afhængige: Se en liste over alt HubSpot-indhold, der bruger filen.
• Vis revisionshistorik: se en historik over gemte versioner.
• Kopier kod estykke: Brug denne funktion til hurtigt at kopiere kodestykket fra dit specialkodede modul til udklipsholderen. Denne mulighed vises kun, når du højreklikker på et modul.
• Lås mappe: Lås en mappe for at forhindre brugere i at redigere dens indhold i designmanageren. Indholdet i låste mapper kan kun redigeres i dit lokale udviklingsmiljø.
• Slet - slet denne fil, mappe, skabelon eller modul.

Faneblade

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 first for at kollapse søgeren. Du kan udvide søgeren igen ved at klikke på mappeikonet folder.

Oprettelse af nye skabeloner og filer

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:

• Træk og slip: en skabelon bygget ved at tilføje moduler til en intuitiv træk og slip-grænseflade.
• HTML & HUBL: en brugerdefineret kodet skabelon oprettet i kodeeditoren ved hjælp af HTML, CSS og Javascript.
• Stylesheet: en kodet CSS-fil, der kan bruges til at style moduler og filer.
• JavaScript: en kodet fil med Javascript, der kan anvendes på moduler og filer.
• Modul: et specialkodet modul, der kan føjes til en skabelon.

Layout-editor

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ør

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:

• Når en komponent er valgt i drag & drop-editoren, vil inspektøren vise alle funktioner og muligheder for den pågældende komponent.
• Når der ikke er valgt en komponent i drag & drop-editoren, viser inspektøren indstillinger for selve skabelonen.
• Når du redigerer et modul, giver inspektøren dig mulighed for at redigere og tilføje felter.

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.

Kode-editor

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.

Modul-editor

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.

Filhåndtering

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.