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: augustus 4, 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.
  • Bestandsbeheer- een systeem voor het hosten van bestanden voor alle onderdelen van uw site.

Navigeer naar je design manager om deze tools te verkennen.

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 op Bestandom nieuwe bestanden of mappen aan te maken, of om actie te ondernemen op het goed dat momenteel in de zoeker is geselecteerd, zoals verwijderen, klonen of hernoemen van het goed. Gebruik de opties onder Beeldom 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.

DeActiesmenuis alleen actief als er op dat moment een bestand of map geselecteerd is, en biedt contextuele opties voor dat type asset. U kunt ook met de rechtermuisknopdirect op de assetklikken 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 uw aangepastegecodeerdemodule naar uw klembord te kopiëren. Deze optie verschijnt alleen wanneerumet de rechtermuisknopop eenmodule 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 klikt op de naam van een sjabloon, module of gecodeerd bestand, 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 een tabbladklikkenomopties weer te gevenom uw tabbladen in de editor te beheren. U kunt een volledige lijst van geopende tabbladen bekijken door op depijl omlaagaan derechterkant te klikken.

Om uzelf meer ruimte te geven om in de lay-out editor te werken, kunt u eerstop hetinklappictogramklikken om dezoeker in te klappen. U kunt de zoeker weer uitklappen door op hetmap-icoonte klikken.

Aanmaken van nieuwe sjablonen en bestanden

Om een nieuwsjabloon, moduleofgecodeerd bestandte maken,klikt u op Bestand> Nieuw bestandin de linkerbovenhoekvan 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 delinkerbovenhoek vindt u knoppen voor Ongedaan makenen Opnieuw uitvoerenwaarmee u uw wijzigingen snel kunt terugdraaien. U kunt ook met de rechtermuisknop opeen moduleklikkenom deze snel te groeperen, klonenofeen moduletypete wijzigen, of sneltoetsen gebruiken om dezelfdeacties uit te voeren. Klik opdeknopVoorbeeldin derechterbovenhoek 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 wat ingebouwdeCSS.

Leer meer overhet maken en bewerken van sjablonen en het toevoegen van stijlenaan 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, zal de inspector alle kenmerken en opties van die component tonen.
  • 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+ Toevoegen gebruikt om nieuwe componenten aan uw lay-out toe te voegen.HettabbladBewerken van deinspecteur 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 ookfilter 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 toelaat CSSbestanden, Javascriptbestanden en zelfs HTML 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 modules omuit te kiezen, kunnen ontwerpers af en toe behoefte hebben aan een meer op maat gemaakte ontwerpoplossing. Modules zijnherbruikbare, op maat gecodeerdecomponenten die bestaan uit HTML en HubL velden, 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'sbestandsmanager slaatalle 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 de app te hoeven verlaten.

file-manager