Hoppa till innehåll
Observera: Översättningen av denna artikel är endast avsedd att underlätta för dig. Översättningen har skapats automatiskt med hjälp av en översättningsprogramvara och har eventuellt inte korrekturlästs. Den engelska versionen av denna artikel bör därför betraktas som den gällande versionen med den senaste informationen. Du kan komma åt den här.
Design Manager

En snabb rundvandring i designchefen

Senast uppdaterad: november 2, 2021

Gäller för:

Marknadsföring Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Tidigare Marketing Hub Basic

HubSpot design manager kombinerar alla verktyg som designers behöver för att bygga toppmoderna webbplatser, samtidigt som marknadsförare får den flexibilitet de önskar när de skapar innehåll.

I den här artikeln får du en rundtur till alla funktioner i designhanteraren.Om du letar efter specifika kodexempel och referensdokumentation kan du kolla in HubSpot's dokumentation för utvecklare.

Verktyg som ingår i konstruktionshanteraren

Designhanteraren samlar flera viktiga verktyg i en kraftfull app:

  • Finder- ett utrymme för att skapa och organisera dina filer, mallar, moduler och mappar.
  • Layout Editor- en drag-och-släpp-redigerare för att strukturera dina sid-, blogg-, e-post- och systemmallar.
  • Inspektor- här kan du redigera egenskaperna för en layout, modul eller grupp.
  • Kodredigerare- en integrerad utvecklingsmiljö (IDE) för all din kod i frontend (CSS, Javascript eller till och med dina egna HTML-mallar).
  • Modulredigerare- återanvändbara anpassade moduler som du kan konfigurera för att lägga till avancerade funktioner på din webbplats som fortfarande kan hanteras av icke-tekniska användare.
  • Filhanterare- ett filhanteringssystem för alla tillgångar på din webbplats.

Navigera till designhanteraren för att utforska dessa verktyg.I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.

Finder

Finder är ett utrymme för att hantera alla dina mappar, mallar, moduler och kodade filer. Du kan organisera dina filer och mappar som du vill med hjälp av sökarens drag- och släppgränssnitt. Om du klickar på en fil kan du expandera eller kollapsa de filer som ingår iden.

Alla Marknadsföringshubben Professional och Enterprise ochCMS-hubben Professional- och Enterprise-konton har som standard en mapp @hubspot i designhanteraren. Den här mappen innehåller alla dina teman och standardmoduler, inklusive e-postmoduler som du kan dra och släppa. Dessa teman och moduler är skrivskyddade, men kan klonas om du vill anpassa dem. Läs mer om hur du anpassar teman och standardmoduler.

design-manager-hubspot-folder

Klicka påFil för att skapa nya filer eller mappar eller för att vidta åtgärder på den resurs som för närvarande är markerad i sökaren, t.ex. ta bort, klona eller byta namn på resursen. Använd alternativen underVisa för att hantera hur dina filer och mappar är ordnade. Du kan snabbt kollapsa alla mappar eller visa nyligen redigerade eller raderade tillgångar.

design manager collapse and deselect folders

Observera att sökaren är kontextuell, vilket innebär att dina åtgärder alltid är relaterade till valda mappar och filer. Om du vill skapa en ny fil eller mapp i en specifik mapp klickar du på den mappen i sökaren. Om du vill skapa en ny fil eller mapp utanför alla befintliga mappar klickar du på Visa och väljer sedanAvmarkera alla.

Åtgärdermenyn är endast aktiv om en fil eller mapp är markerad och ger kontextuella alternativ för den typen av tillgång. Du kan ocksåhögerklickadirekt på tillgången för att göra något av följande:

  • Klona: gör en kopia av filen, mappen eller mallen.
  • Flytta: välj en ny mapp för din tillgång.
  • Byt namn: Ge tillgången ett nytt namn.
  • Klona till HTML: skapa en kopia av din tillgång helt kodad i HTML.
  • Kopiera tillportal: skapa en kopia av din tillgång och skicka den till ett annat HubSpot-konto som du har tillgång till.
  • Skapa sida/e-post: skapa ett nytt innehåll med hjälp av den här mallen.
  • Visa beroende enheter: visa en lista över allt HubSpot-innehåll som använder filen som använder filen.
  • Visa revideringshistorik: visa en historik över sparade versioner.
  • Kopiera utdrag: Använd den här funktionen för att snabbt kopiera kodutdraget för dinanpassade modul till klippbordet. Det här alternativet visas bara när duhögerklickarpå en modul.
  • Lås mapp: Lås en mapp för att hindra användare från att redigera dess innehåll i designhanteraren. Innehållet i låsta mappar kan endast redigeras i din lokala utvecklingsmiljö.
  • Ta bort- ta bort den här filen, mappen, mallen eller modulen.

right-cilck

Flikar

När du klickar på namnet på en mall, modul eller kodad fil öppnas ditt val i en flik i redigeraren. Flikar gör det enkelt för dig att göra flera saker samtidigt och växla mellan olika mallar och kodade filer. Du kan högerklicka på enflikför att visa alternativ för att hantera dina flikar i redigeraren. Du kan se en fullständig lista över öppna flikar genom att klicka pånedåtpilentill höger.

Om du vill ge dig själv mer utrymme för att arbeta i layoutredigeraren kan du klicka påikonenför attförstkollapsasökaren. Du kan expandera sökaren igen genom att klicka påmappikonenmapp.

Skapa nya mallar och filer

Om du vill skapa en nymall,modul ellerkodad fil klickar du påArkiv>Ny fili det övre vänstra hörnet av sökaren. Du har möjlighet att skapa någon av följande typer av tillgångar:

  • Dra och släpp: en mall som byggs genom att lägga till moduler i ett intuitivt drag och släpp-gränssnitt.
  • HTML & HUBL: en egen kodad mall som skapats i kodredigeraren med hjälp av HTML, CSS och Javascript.
  • Stylesheet: en kodad CSS-fil som kan användas för att styla moduler och filer.
  • JavaScript: en kodad Javascript-fil som kan användas i moduler och filer.
  • Modul: en egen kodad modul som kan läggas till i en mall.

Redigerare för layout

Layoutredigeraren är ett gränssnitt för att dra och släppa strukturen och standardinnehållet på dina sidor och e-postmeddelanden. Du ser namnen på dina moduler och grupper, tillsammans med den kroppsklass som tillämpas på varje komponent. Du kan ändra varje modul eller grupp genom att klicka på den för redigering i inspektorn på höger sida, eller genom att högerklicka på komponenten för att få tillgång till inspektorns funktionalitet.

Dra och släpp komponenter i layoutredigeraren för att justera deras placering och storlek i mallen. Det finns knappar för attångraochgöra omi det övre vänstra hörnet så att du snabbt kan återställa dina ändringar.Du kan också högerklicka på enmodulför att snabbt gruppera, klona eller ändra en modultyp, eller användakortkommandonför att utföra samma åtgärder. Klicka på knappenFörhandsgranskai det övre högra hörnet för att förhandsgranska ditt arbete och testa din layout på olika skärmstorlekar.

Alla HubSpot-malllayouter är responsiva, vilket innebär att de automatiskt anpassas till olika skärmstorlekar. Den här redigeraren kompilerar dina drag-och-släpp-moduler till ren HTML-markering som görs responsiv med hjälp avinbyggdCSS.

Lär dig mer om hur duskapar och redigerar mallar och hur dulägger till stilar i din mall.

Inspektör

Med inspektorn kan du lägga till och redigera komponenter i en mall eller modul. Den är kontextuellt beroende av vilken uppgift du utför och vilken typ av fil du har. Till exempel:

  • När en komponent väljs i drag & drop-redigeraren visar inspektören alla funktioner och alternativ för den komponenten.
  • När ingen komponent är vald i drag & drop-redigeraren visar inspektören alternativ för själva mallen.
  • När du redigerar en modul kan du redigera och lägga till fält i inspektören.

Beroende på vilken typ av modul som valts i mallen kan det finnas olika alternativ i inspektören.

För drag-och-släpp-mallar används fliken+ Lägg tillför att lägga till nya komponenter i layouten.FlikenRedigerai inspektören kan användas för att tilldela anpassade CSS-klasser, redigera standardinnehåll eller bifoga kodade filer.

Inspektören har en brödsmultronnavigering högst upp så att du snabbt kan navigera mellan den tillgång, modul, grupp och mall som du för närvarande arbetar med.

För anpassade kodade HTML & HUBL-mallar och moduler kan du använda inspektören för att lägga till nya fält eller länka till kodade filer.Du kan också lägga till filtertaggar för att ange innehållstyp och funktion för dina kodade mallar och moduler så att de blir lättare att söka i sökaren. Du kan också hitta utdrag och mer information om hur dessa anpassade kodade tillgångar kan användas i dina mallar.

Kodredigerare

HubSpots kodredigerare är en kraftfull IDE som gör att du kan kodaCSS-filer,Javascript-filer och till och medHTML-mallar. När du kodar eller redigerar dina formatmallar kan du förhandsgranska effekterna av dina ändringar på en mängd olika skärmstorlekar. Kodredigeraren drar också nytta av många andra användbara IDE-funktioner, t.ex. färgkodade klasser, felkontroll, syntaxmarkering, automatisk sparande, automatiskt stängande taggar, automatisk inringning och mycket mer.

Läs mer omhur du använder kodredigeraren.

design-manager-code-editor-example

Modulredigerare

Även om HubSpot-mallarna med drag och släpp-mallarna innehåller ett antalstandardmoduleratt välja mellan kan designers ibland behöva en mer anpassad designlösning.Modulerär återanvändbara specialkodade komponenter som består av HTML- ochHubL-fält, CSS och Javascript. Dessa moduler kan läggas till i en mall och anpassas i sidredigeraren utan någon kod.

Använd inspektören för att lägga till fält, bifoga kodade filer eller lägga till taggar för att organisera dina tillgångar. Precis som i kodredigeraren kan du förhandsgranska ditt arbete på olika skärmstorlekar medan du arbetar. Du kan också ange standardinnehåll för dina modulfält, låsa standardinnehållet eller göra specifika modulfält obligatoriska.

Filhanterare

HubSpotfilhanterarelagrar alla tillgångar som du använder för att skapa innehåll. Med det här verktyget kan du ladda upp PDF-filer, bilder, videor, ljudfiler, teckensnitt med mera. Du kan komma åt dina kreativa tillgångar eller snabbt ladda upp nya filer utan att behöva lämna appen.

file-manager