En rask omvisning i designadministratoren

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.

Verktøy som er inkludert i designadministratoren

Design Manager samler flere viktige verktøy i én kraftig app:

• Finder - et sted der du kan opprette og organisere filer, maler, moduler og mapper.
• Layout Editor - en dra-og-slipp-editor for strukturering av side-, blogg-, e-post- og systemmaler.
• Inspektør - her kan du redigere egenskapene til en layout, modul eller gruppe.
• Code Editor - et integrert utviklingsmiljø (IDE) for all frontend-koden din (CSS, Javascript eller til og med dine egne HTML-maler).
• Modulredigering - gjenbrukbare egendefinerte moduler som du kan konfigurere for å legge til avansert funksjonalitet på nettstedet ditt, men som likevel kan administreres av ikke-tekniske brukere.
• File Manager - et filhosting-system for alle nettstedets ressurser.

Naviger til designadministratoren for å utforske disse verktøyene. Gå til Innhold > Design Manager i HubSpot-kontoen din.

Finder

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:

• Klone: lage en kopi av filen, mappen eller malen.
• Flytt: Velg en ny mappe for ressursen.
• Gi nytt navn: Gi ressursen et nytt navn.
• Klone til HTML: Opprett en kopi av ressursen som er fullstendig kodet i HTML.
• Kopier til portalen: Opprett en kopi av ressursen din og send den til en annen HubSpot-konto du har tilgang til.
• Opprett side/e-post: Opprett et nytt innhold ved hjelp av denne malen.
• Vis avhengige: se en liste over alt HubSpot-innhold som bruker filen.
• Vis revisjonshistorikk: se en historikk over lagrede versjoner.
• Kopier kodebiten: Bruk dette alternativet til raskt å kopiere kodebiten til den egendefinerte kodede modulen til utklippstavlen. Dette alternativet vises bare når du høyreklikker på en modul.
• Lås mappe: Lås en mappe for å hindre brukere i å redigere innholdet i designadministratoren. Innholdet i låste mapper kan bare redigeres i det lokale utviklingsmiljøet.
• Slett - slett denne filen, mappen, malen eller modulen.

Faner

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 first for å kollapse søkeren. Du kan utvide søkeren igjen ved å klikke på mappeikonet folder.

Opprette nye maler og filer

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:

• Dra og slipp: en mal som bygges ved å legge til moduler i et intuitivt dra og slipp-grensesnitt.
• HTML & HUBL: en tilpasset kodet mal som er opprettet i kodeditoren ved hjelp av HTML, CSS og Javascript.
• Stilark: en kodet CSS-fil som kan brukes til å style moduler og filer.
• JavaScript: en kodet Javascript-fil som kan brukes på moduler og filer.
• Modul: en spesialkodet modul som kan legges til i en mal.

Layout-editor

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.

Inspektør

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:

• Når du velger en komponent i dra-og-slipp-redigeringsprogrammet, viser inspektøren alle funksjonene og alternativene for komponenten.
• Når ingen komponent er valgt i dra-og-slipp-redigeringsprogrammet, vil inspektøren vise alternativer for selve malen.
• Når du redigerer en modul, kan du redigere og legge til felter i inspektøren.

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.

Kodeditor

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.

Modulredigering

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.

Filbehandling

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.