En snabb rundvandring i designchefen

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. Omdu letar efter specifika kodexempel och referensdokumentation kan du kolla in HubSpots 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.

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 i den.

Alla Marketing Hub Professional och Enterprise- och CMS Hub Professional och Enterprise-konton har som standard en @hubspot-mapp 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.

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 under Visa 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.

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 sedan Avmarkera alla.

Åtgärdsmenyn är bara aktiv om en fil eller mapp är markerad och ger kontextuella alternativ för den typen av tillgång. Du kan också högerklicka direkt 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 till portalen : 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 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 din anpassade modul till klippbordet. Det här alternativet visas bara när du högerklickar på 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.

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å enflik fö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åtpilen till höger.

Om du vill ge dig själv mer utrymme för att arbeta i layoutredigeraren kan du klicka påikonen för attförstkollapsa sö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 fil i 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.

Layoutredigerare

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 ångra och göra om i det övre vänstra hörnet så att du snabbt kan återställa dina ändringar. Du kan också högerklicka på en modul för att snabbt gruppera, klona eller ändra en modultyp, eller användakortkommandon för att utföra samma åtgärder.Klicka på knappen Förhandsgranska i 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 av inbyggdCSS.

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 till fö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.

Observera att HubSpot som standard automatiskt minifierar JavaScript och CSS som ingår i designhanteraren för att ta bort onödiga mellanslag, radbrytningar och kommentarer. Detta gäller även JavaScript och CSS som laddas upp till designhanteraren via CLI. Detta innebär att du inte ska lägga till redan minifierad kod direkt i designhanteraren.

Läs mer omJavaScript och CSS-minifiering.

Modulredigerare

Även om HubSpot-mallarna med drag och släpp-mallarna innehåller ett antal standardmoduler att välja mellan kan designers ibland behöva en mer anpassad designlösning.Moduler är återanvändbara specialkodade komponenter som består av HTML- och HubL-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å en mängd 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

HubSpotfilhanterare lagrar 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.