Design Manager

Een korte rondleiding door de designmanager

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

De designmanager van HubSpot combineert alle tools die ontwerpers nodig hebben om state-of-the-art websites te bouwen, terwijl hij marketeers toch de flexibiliteit biedt die ze wensen bij het creëren van content.

In dit artikel krijgt u een rondleiding door alle functies van designmanager. Als u op zoek bent naar specifieke codevoorbeelden en referentiedocumentatie, bekijk dan HubSpot's projectontwikkelaarsdocumentatie.

Tools opgenomen in de ontwerpmanager

De designmanager voegt verschillende belangrijke tools samen in één krachtige app:

  • Zoek - een ruimte om uw bestanden, sjablonen, modules en mappen aan te maken en te organiseren.
  • Lay-out Editor - een drag and drop editor voor het structureren van uw pagina, blog, e-mail en systeemsjablonen.
  • Inspecteur - hier kunt u de eigenschappen van een lay-out, module of groep bewerken.
  • Code-editor - een geïntegreerde ontwikkelomgeving (IDE) voor al uw frontendcode (CSS, Javascript of zelfs uw eigen HTML-sjablonen).
  • Module Editor - herbruikbare aangepaste modules die u kunt instellen om geavanceerde functionaliteit toe te voegen aan uw site die nog steeds kan worden beheerd door niet-technische gebruikers.
  • File Manager - een file hosting systeem voor al uw activa.

Navigeer naar uw designmanager om deze tools te verkennen. Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.

Zoeker

De finder is een ruimte om al uw mappen, sjablonen, modules en gecodeerde bestanden te beheren. U kunt uw bestanden en mappen ordenen zoals u dat wilt met behulp van de drag and drop interface van de finder. Als u op een bestand klikt, kunt u de bestanden in de finder uit- of inklappen.

Allemaal Marketing Hub Professioneel en Ondernemend en CMS Hub Professionele en Enterprise-accounts hebben standaard een @hubspot-map in de designmanager. Deze map bevat al uw thema's en standaardmodules, inclusief drag and drop e-mailmodules. Deze thema's en modules zijn alleen-lezen, maar kunnen gekloond worden als u ze wilt aanpassen. Lees meer over het aanpassen van thema's en standaardmodules.

design-manager-hubspot-folder

Klik op Bestand om nieuwe bestanden of mappen aan te maken, of om actie te ondernemen op het actief dat momenteel geselecteerd is in de finder, zoals het verwijderen, klonen of hernoemen van het actief. Gebruik de opties onder Weergave om de indeling van uw bestanden en mappen te beheren. U kunt snel alle mappen samenvouwen of recentelijk bewerkte of verwijderde activa ophalen.

design manager collapse and deselect folders

Let op: de finder is contextueel, wat betekent dat uw acties altijd in verhouding staan tot de geselecteerde mappen en bestanden. Om een nieuw bestand of een nieuwe map binnen een specifieke map aan te maken, klikt u op die map in de finder. Om een nieuw bestand of een nieuwe map aan te maken buiten alle bestaande mappen, klikt u op Beeld en selecteert u vervolgens Alles deselecteren.

De Acties menu zal alleen actief zijn als een bestand of map op dat moment geselecteerd is, en biedt contextuele opties voor dat type actief. U kunt ook met de rechtermuisknop klikken op direct op de asset om een van de volgende dingen te doen:

  • Kloon - maak een kopie van uw bestand, map of sjabloon.
  • Verplaats - selecteer een nieuwe map voor uw asset.
  • Hernoem - geef de asset een nieuwe naam.
  • Kloon naar HTML - maak een kopie van uw asset die volledig in HTML is gecodeerd.
  • Kopieer naar portal - maak een kopie van uw asset en stuur deze naar een andere HubSpot account waar u toegang toe heeft.
  • Maak een pagina/e-mail aan - maak een nieuw stuk content aan met behulp van dit sjabloon.
  • Toon dependents - zie een lijst van alle HubSpot inhoud met behulp van het gebruik van het bestand.
  • Toon revisiegeschiedenis - bekijk een geschiedenis van opgeslagen versies.
  • Kopieer snippet - gebruik dit om snel de code snippet van uw aangepaste gecodeerde module naar uw klembord te kopiëren. Deze optie verschijnt alleen wanneer rechtsklikt op op een module.
  • Verwijder - verwijder dit bestand, deze map, dit sjabloon of deze module.

right-cilck

Tabbladen

Wanneer u op de naam van een sjabloon, module of gecodeerd bestand klikt, wordt uw selectie in een tabblad in de editor geopend. Tabbladen maken het u gemakkelijk om meerdere taken uit te voeren en tussen verschillende sjablonen en gecodeerde bestanden te schakelen. U kunt met de rechtermuisknop klikken op een willekeurig tabblad om de opties voor het beheer van uw tabbladen in de editor weer te geven. U kunt een volledige lijst met geopende tabbladen bekijken door te klikken op depijl naar benedenop aan de rechterkant.

Om jezelf meer ruimte te geven om te werken in de lay-out editor, kun je op het collapse icoon klikkenom eerstde finder in te klappen. U kunt de finder opnieuw uitvouwen door op het map-icoon te klikken.

Nieuwe sjablonen en bestanden maken

Om een nieuw sjabloon, module of gecodeerd bestand aan te maken, klikt u op Bestand > Nieuwbestand in de linkerbovenhoek van de finder. U hebt de mogelijkheid om een van de volgende soorten bestanden aan te maken:

  • Slepen en neerzetten: een sjabloon dat is opgebouwd door modules toe te voegen aan een intuïtieve sleepinterface.
  • HTML & HUBL: een aangepast gecodeerd sjabloon dat in de code-editor wordt gemaakt met behulp van HTML, CSS en Javascript.
  • Stylesheet: een gecodeerd CSS-bestand dat kan worden gebruikt om modules en bestanden op te sieren.
  • JavaScript: een gecodeerd bestand van Javascript dat kan worden toegepast op modules en bestanden.
  • Module: een aangepaste gecodeerde module die aan een sjabloon kan worden toegevoegd.

Lay-out editor

De lay-out editor is een drag and drop interface voor de structuur en standaard inhoud van uw pagina's en e-mails. U ziet de namen van uw modules en groepen, samen met de bodyclass die op elk onderdeel wordt toegepast. U kunt elke module of groep wijzigen door er op te klikken voor bewerking in de inspector aan de rechterkant, of door met de rechtermuisknop op het component te klikken voor toegang tot de functionaliteit van de inspector.

Sleep onderdelen in de lay-out editor om hun plaatsing en grootte op uw sjabloon aan te passen. Er zijn Undo en Redo knoppen in de linkerbovenhoek om u te helpen uw wijzigingen snel terug te draaien. U kunt ook met de rechtermuisknop op een module klikken om deze snel te groeperen, te klonen of een moduletype te wijzigen, of gebruikdesnelkoppelingen van het toetsenbordop om dezelfde acties te bereiken. Klik op de knop Voorbeeld in de rechterbovenhoek om een voorbeeld van uw werk te bekijken en uw lay-out op verschillende schermafmetingen te testen.

Alle HubSpot template lay-outs zijn responsief, wat betekent dat ze zich automatisch aanpassen aan verschillende schermafmetingen. Deze editor compileert je drag and drop modules in schone HTML markup die door sommige ingebouwde CSSresponsive is gemaakt .

Lees meer over het maken en bewerken van sjablonen en hettoevoegen van stijlen aan uw sjabloon.

Inspecteur

Met de inspecteur kunt u componenten in een sjabloon of module toevoegen en bewerken. Het is contextueel afhankelijk van de taak die u uitvoert en het type bestand. Bijvoorbeeld:

  • Wanneer een component wordt geselecteerd in de drag & drop editor, zal de inspecteur alle functies en opties van dat component laten zien.
  • Wanneer geen enkel onderdeel is geselecteerd in de drag & drop editor, zal de inspecteur opties tonen voor het sjabloon zelf.
  • Bij het bewerken van een module kunt u met de inspecteur velden bewerken en toevoegen.

Afhankelijk van het type module dat op uw sjabloon is geselecteerd, kunnen er verschillende opties beschikbaar zijn in de inspecteur.

Voor slepen en neerzetten van sjablonen wordt het tabblad + Toevoegen gebruikt om nieuwe onderdelen aan uw lay-out toe te voegen.Het Edit tabblad van de inspecteur kan worden gebruikt om aangepaste CSS-klassen toe te wijzen, standaardinhoud te bewerken of gecodeerde bestanden bij te voegen.

De inspecteur heeft een broodkruimelnavigatie aan de bovenkant om u te helpen snel te navigeren tussen het object, de module, de groep en het sjabloon waar u op dat moment aan werkt.

Voor aangepaste gecodeerde HTML & HUBL sjablonen en modules kunt u de inspecteur gebruiken om nieuwe velden toe te voegen of te linken naar gecodeerde bestanden. U kunt ook filtertags toevoegen om het inhoudstype en de functie van uw gecodeerde sjablonen en modules aan te geven, zodat ze gemakkelijker doorzoekbaar zijn in de zoeker. U kunt ook fragmenten en meer details vinden over hoe deze aangepaste gecodeerde middelen kunnen worden gebruikt in uw sjablonen.

Code-editor

De code-editor van HubSpot is een krachtige IDE waarmee u CSS-bestanden, Javascript-bestanden en zelfs HTML-sjablonen kunt coderen. Terwijl u uw stylesheets codeert of bewerkt, kunt u de effecten van uw wijzigingen live bekijken op verschillende schermafmetingen. De code-editor heeft ook voordelen van vele andere nuttige IDE-functies, zoals kleurgecodeerde klassen, foutcontrole, syntax highlighting, automatische besparing, automatisch sluitende tags, auto-indenting, en nog veel meer.

Lees meer over hoe u de code editor kunt gebruiken.

design-manager-code-editor-example

Module-editor

Terwijl HubSpot's drag and drop-sjablonen worden geleverd met een aantal standaardmodules om uit te kiezen, kunnen ontwerpers af en toe een meer op maat gemaakte ontwerpoplossing nodig hebben. Modules zijn herbruikbare op maat gemaakte componenten die bestaan uit HTML en HubL velden, CSS, en Javascript. Deze modules kunnen worden toegevoegd aan een sjabloon en worden aangepast in de pagina-editor zonder enige code.

Gebruik de inspecteur om velden toe te voegen, gecodeerde bestanden bij te voegen of tags toe te voegen om uw bedrijfsmiddelen te organiseren. Net als in de code-editor kunt u uw werk live bekijken op verschillende schermafmetingen. U kunt ook de standaardinhoud van uw modulevelden specificeren, de standaardinhoud vergrendelen of specifieke modulevelden verplicht maken.

Bestandsmanager

HubSpot's file manager slaat alle middelen op die u gebruikt om inhoud te creëren. Met deze tool kunt u PDF's, afbeeldingen, video's, audiobestanden, lettertypen en meer uploaden. U kunt toegang krijgen tot uw creatieve middelen of snel nieuwe bestanden uploaden zonder dat u de app hoeft te verlaten.

file-manager