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: maart 18, 2021

Geldt voor:

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

De ontwerpmanager van HubSpot combineert alle hulpmiddelen die de ontwerpers nodig hebben om overzichtswebsites te bouwen, terwijl nog het geven van marketeers de flexibiliteit die zij bij het creëren van inhoud wensen.

In dit artikel krijg je een rondleiding door alle mogelijkheden van de design manager. Als u op zoek bent naar specifieke code voorbeelden en referentie documentatie, kijk dan op 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 creëren 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 uw frontend code (CSS, Javascript, of zelfs uw 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.
  • File Manager - een bestand hosting systeem voor alle activa van uw site.

Navigeer naar uw ontwerpmanager om deze hulpmiddelen 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 en CMS Hub Professional en Enterprise accounts hebben standaard een @hubspot map in de design manager. Deze map bevat al uw thema's en standaardmodules, inclusief slepen en neerzetten van e-mail modules. Deze thema's en modules zijn alleen-lezen, maar kunnen worden gekloond als u ze wilt aanpassen. Meer informatie 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 goed dat momenteel in de zoeker is geselecteerd, zoals verwijderen, klonen of hernoemen van het goed. Gebruik de opties onder Beeld 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 u Alles deselecteren .

De Acties menu is alleen actief als er op dat moment een bestand of map is geselecteerd, en biedt contextuele opties voor dat type asset. U kunt ook met de rechtermuisknopop rechtstreeks 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 naar portaal: 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 afhankelijkheden: zie een lijst van alle HubSpot inhoud die het gebruik van het bestand.
  • Toon revisie geschiedenis: bekijk een geschiedenis van opgeslagen versies.
  • Kopieer knipsel: gebruik dit om snel het code knipsel van uw aangepaste gecodeerde module op uw klembord te kopiëren. Deze optie verschijnt alleen wanneer met de rechtermuisknop klikt op een module.
  • 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.
  • Delete - 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 multitasken en te wisselen tussen uw verschillende sjablonen en gecodeerde bestanden. U kunt met de rechtermuisknop klikken op een tabblad om opties weer te geven om uw tabbladen in de editor te beheren. U kunt een volledige lijst van geopende tabbladen bekijken door te klikken op de pijl omlaag aan de rechterkant.

Om uzelf meer ruimte te geven om in de lay-out editor te werken, kunt ueerstop het inklappictogram en dan op klikkenom de zoekerin te klappen. U kunt de zoeker weer uitklappen door te klikken op het mappictogram map.

Aanmaken van nieuwe sjablonen en bestanden

Om een nieuw sjabloon, module, of gecodeerd bestand te maken, klikt u op Bestand > Nieuwbestand in de linkerbovenhoek van de zoeker. U hebt de mogelijkheid om een 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 aan te passen op uw sjabloon. Er zijn knoppen Undo en Redo 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, klonen of een moduletype te wijzigen, of sneltoetsen gebruiken om dezelfde acties uit te voeren. Klik op de knop Voorbeeld in 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 automatisch aan te passen aan verschillende schermformaten. Deze editor compileert uw drag and drop modules in schone HTML markup die responsive wordt gemaakt door enkele ingebouwde CSS.

Leer meer over sjablonen maken en bewerken en stijlen toevoegen 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, 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.Het tabblad van de inspecteur kan worden gebruikt om aangepaste CSS-klassen toe te wijzen, standaardinhoud te bewerken, of gecodeerde bestanden toe 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 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 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

De code-editor van HubSpot is een krachtige IDE waarmee je CSS-bestanden, Javascript-bestanden, en zelfs HTML-sjablonen kunt coderen. Terwijl u codeert of uw stylesheets bewerkt, kunt u live de effecten van uw wijzigingen op een verscheidenheid van schermgrootte bekijken. 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 hoe u de code-editor gebruikt.

design-manager-code-editor-example

Module-editor

Hoewel HubSpot's drag-and-drop sjablonen worden geleverd met een aantal standaardmodules om uit te kiezen, kunnen ontwerpers af en toe behoefte hebben aan een meer op maat gemaakte ontwerpoplossing. Modules zijn herbruikbare, op maat gecodeerde componenten 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's bestandsbeheerder slaat alle activa 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 hebt toegang tot uw creatieve middelen of kunt snel nieuwe bestanden uploaden zonder de app te hoeven verlaten.

file-manager