Doorgaan naar artikel
Let op: De Nederlandse vertaling van dit artikel is alleen bedoeld voor het gemak. De vertaling wordt automatisch gemaakt via een vertaalsoftware en is mogelijk niet proefgelezen. Daarom moet de Engelse versie van dit artikel worden beschouwd als de meest recente versie met de meest recente informatie. U kunt het hier raadplegen.
Design Manager

Een snelle rondleiding door de ontwerpmanager

Laatst bijgewerkt: december 16, 2021

Geldt voor:

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

HubSpot's design manager combineert alle tools die ontwerpers nodig hebben om state-of-the-art websites te bouwen, terwijl marketeers nog steeds de flexibiliteit krijgen die ze wensen bij het creëren van content.

In dit artikel krijg je een rondleiding door alle functies van de design manager.Als u op zoek bent naar specifieke code voorbeelden en referentie documentatie, bekijk dan HubSpot's ontwikkelaarsdocumentatie.

In de ontwerpmanager opgenomen hulpmiddelen

De design manager bundelt verschillende belangrijke tools in één krachtige app:

  • Finder- een ruimte om uw bestanden, sjablonen, modules en mappen te maken en te organiseren.
  • Layout Editor- een sleep-en neerzet editor voor het structureren van uw pagina, blog, e-mail, en systeem sjablonen.
  • Inspector- hier kunt u de eigenschappen van een lay-out, module of groep bewerken.
  • Code Editor- een geïntegreerde ontwikkelomgeving (IDE) voor al je frontend code (CSS, Javascript, of zelfs je eigen HTML templates).
  • Module-editor- herbruikbare aangepaste modules die u kunt instellen om geavanceerde functionaliteit aan uw site toe te voegen die nog steeds kan worden beheerd door niet-technische gebruikers.
  • Bestandsbeheerder- een systeem voor het hosten van bestanden voor alle onderdelen van uw site.

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

Finder

De Finder is een ruimte om al uw mappen, sjablonen, modules en gecodeerde bestanden te beheren. U kunt uw bestanden en mappen organiseren zoals u wilt met behulp van de sleep-en neerzetinterface van de zoeker. Door op een bestand te klikken kunt u de bestanden die erin staan in- of uitklappen.

Alle Marketing Hub Professional en Enterprise enCMS Hub Professional en Enterprise accounts hebben standaard een @hubspot map in de design manager. Deze map bevat al uw thema's en standaardmodules, waaronder e-mailmodules met slepen en neerzetten. Deze thema's en modules zijn alleen-lezen, maar kunnen worden gekloond als u ze wilt aanpassen. Leer meer over het aanpassen van thema's en standaardmodules.

design-manager-hubspot-folder

Klik opBestand om nieuwe bestanden of mappen te maken, of om actie te ondernemen op het asset dat momenteel in de zoeker is geselecteerd, zoals verwijderen, klonen of hernoemen van het asset. Gebruik de opties onderBeeld om de indeling van uw bestanden en mappen te beheren. U kunt snel alle mappen samenvouwen of recent bewerkte of verwijderde items oproepen.

design manager collapse and deselect folders

Let op: de zoeker is contextueel, wat betekent dat uw acties altijd betrekking zullen hebben op de geselecteerde mappen en bestanden. Om een nieuw bestand of een nieuwe map in een bepaalde map te maken, klikt u op die map in de zoeker. Om een nieuw bestand of een nieuwe map te maken buiten alle bestaande mappen, klikt u op Beeld en selecteert uAlles deselecteren.

DeActiesmenu is alleen actief als er op dat moment een bestand of map geselecteerd is, en biedt contextuele opties voor dat type asset. U kunt ookmet de rechtermuisknopdirect op de asset klikken om een van de volgende dingen te doen:

  • Klonen: een kopie maken van uw bestand, map of sjabloon.
  • Verplaatsen: selecteer een nieuwe map voor uw asset.
  • Hernoemen: geef het goed een nieuwe naam.
  • Kloon naar HTML: maak een kopie van uw asset volledig gecodeerd in HTML.
  • Kopie naarportaal: maak een kopie van uw asset en stuur het naar een andere HubSpot account waartoe u toegang heeft.
  • Maak pagina/e-mail: maak een nieuw stuk inhoud met behulp van deze sjabloon.
  • Toon dependents: zie een lijst van alle HubSpot content die gebruik maakt van het bestand.
  • Toon revisie geschiedenis: bekijk een geschiedenis van opgeslagen versies.
  • Kopieer knipsel: gebruik dit om snel het code knipsel van uwaangepaste gecodeerde module naar uw klembord te kopiëren. Deze optie verschijnt alleen wanneeru met de rechtermuisknopop een module klikt.
  • Map vergrendelen: vergrendel een map om te voorkomen dat gebruikers de inhoud ervan kunnen bewerken in de design manager. Inhoud in vergrendelde mappen kan alleen worden bewerkt binnen uw lokale ontwikkelomgeving.
  • Verwijderen- verwijder dit bestand, deze map, dit sjabloon of deze module.

right-cilck

Tabs

Wanneer u op de naam van een sjabloon, module of gecodeerd bestand klikt, wordt uw selectie geopend in een tabblad in de editor. Tabbladen maken het gemakkelijk voor u om te multi-tasken en te schakelen tussen uw verschillende sjablonen en gecodeerde bestanden. U kunt met de rechtermuisknop op eentabbladklikken om opties weer te geven om uw tabbladen in de editor te beheren. U kunt een volledige lijst van geopende tabbladen bekijken door op depijl omlaagaan de rechterkant te klikken.

Om uzelf meer ruimte te geven om in de lay-out editor te werken, kunt ueerstop hetinklappictogramklikkenom de zoekerin te klappen. U kunt de zoeker weer uitklappen door op hetmap-icoon te klikken.

2021-12-16_16-33-42 (2)

Aanmaken van nieuwe sjablonen en bestanden

Om een nieuwsjabloon,module ofgecodeerd bestand te maken, klikt u opBestand>Nieuw bestandin de linkerbovenhoek van de zoeker. U hebt de mogelijkheid om één van de volgende types van activa te creëren:

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

Lay-out editor

De layout editor is een drag and drop interface voor de structuur en standaard inhoud van uw pagina's en emails. U ziet de namen van uw modules en groepen, samen met de body class die op elke component is toegepast. U kunt elke module of groep wijzigen door erop te klikken voor bewerking in de inspector aan de rechterkant, of door met de rechtermuisknop te klikken op de component om de functionaliteit van de inspector te openen.

Versleep componenten in de lay-out-editor om hun plaatsing en grootte op uw sjabloon aan te passen. In de linkerbovenhoek vindt u knoppenvoor Ongedaan makenenOpnieuw uitvoerenwaarmee u uw wijzigingen snel kunt terugdraaien.U kunt ook met de rechtermuisknop op eenmoduleklikkenom deze snel te groeperen, klonen of een moduletype te wijzigen, ofsneltoetsengebruiken om dezelfde acties uit te voeren. Klik op de knopVoorbeeldin de rechterbovenhoek om een voorbeeld van uw werk te bekijken en uw lay-out op verschillende schermformaten te testen.

Alle HubSpot template lay-outs zijn responsive, wat betekent dat ze zich automatisch aanpassen aan verschillende schermformaten. Deze editor compileert je drag and drop modules in schone HTML opmaak die responsive wordt gemaakt door watingebouwdeCSS.

Leer meer overhet maken en bewerken van sjablonen enhet toevoegen van stijlen aan uw sjabloon.

Inspecteur

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

  • Wanneer een component wordt geselecteerd in de drag & drop editor, toont de inspector alle kenmerken en opties van die component.
  • Wanneer geen component is geselecteerd in de drag & drop editor, toont de inspector opties voor het sjabloon zelf.
  • Wanneer u een module bewerkt, 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 sjablonen met slepen en neerzetten wordt het tabblad+ Toevoegengebruikt om nieuwe componenten aan uw lay-out toe te voegen.HettabbladBewerkenvan 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 broodkruimel navigatie bovenaan om u te helpen snel te navigeren tussen de asset, module, groep, en template waar u op dat moment aan werkt.

Voor op maat 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 filter tags toevoegen om het inhoudstype en de functie van uw gecodeerde sjablonen en modules aan te geven om ze gemakkelijker doorzoekbaar te maken in de zoeker. U kunt ook knipsels en meer details vinden over hoe deze aangepaste gecodeerde middelen kunnen worden gebruikt in uw sjablonen.

Code editor

HubSpot's code editor is een krachtige IDE die u toelaatCSS bestanden, Javascriptbestanden en zelfsHTML templates te coderen. Terwijl u codeert of uw stylesheets bewerkt, kunt u de effecten van uw wijzigingen live bekijken op verschillende schermgroottes. De code-editor maakt ook gebruik van vele andere handige IDE-functies, zoals kleurgecodeerde klassen, foutcontrole, syntax highlighting, automatisch opslaan, automatisch sluiten van tags, automatisch inspringen, en nog veel meer.

Leer meer over hetgebruik van de code editor.

design-manager-code-editor-example

Module-editor

Hoewel HubSpot's drag and drop templates worden geleverd met een aantalstandaard modulesom uit te kiezen, kunnen ontwerpers af en toe behoefte hebben aan een meer op maat gemaakte ontwerpoplossing.Moduleszijn herbruikbare, op maat gecodeerde componenten die bestaan uit HTML enHubLvelden, CSS, en Javascript. Deze modules kunnen worden toegevoegd aan een template en aangepast in de pagina editor zonder enige code.

Gebruik de inspector om velden toe te voegen, gecodeerde bestanden bij te voegen of tags toe te voegen om uw assets te organiseren. Net als in de code-editor, kunt u live een voorbeeld van uw werk bekijken op verschillende schermformaten. U kunt ook standaardinhoud opgeven voor uw modulevelden, standaardinhoud vergrendelen of specifieke modulevelden verplicht maken.

Bestandsbeheerder

HubSpot'sbestandsmanagerslaat alle middelen op die u gebruikt om inhoud te creëren. Met deze tool kun je PDF's, afbeeldingen, video's, audiobestanden, lettertypes 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

Was this article helpful? *
This form is used for documentation feedback only. Learn how to get help with HubSpot.