Een snelle rondleiding door de design manager

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

In dit artikel krijg je een rondleiding door alle functies van de design manager.Als je op zoek bent naar specifieke codevoorbeelden en referentiedocumentatie , bekijk dan dedeveloper documentatievan HubSpot .

Hulpmiddelen in de ontwerpmanager

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

• Finder - een ruimte om uw bestanden, sjablonen, modules en mappen aan te maken en te organiseren.
• Layout Editor - een drag and drop editor voor het structureren van uw pagina, blog, e-mail en systeemsjablonen.
• Inspector - hier kunt u de eigenschappen van een lay-out, module of groep bewerken.
• Code Editor - een geïntegreerde ontwikkelingsomgeving (IDE) voor al uw frontend-code (CSS, Javascript, of zelfs uw eigen HTML-sjablonen).
• Module Editor - herbruikbare aangepaste modules die u kunt instellen om geavanceerde functionaliteit aan uw site toe te voegen die nog steeds door niet-technische gebruikers kan worden beheerd.
• File Manager - een bestandshostingsysteem voor alle activa 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 sleepinterface van de finder. Door op een bestand te klikken kunt u de bestanden die het bevat uit- of inklappen.

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 standaard modules, inclusief drag and drop e-mail modules. Deze thema's en modules zijn read-only, maar kunnen worden gekloond als u ze wilt aanpassen. Meer informatie over het aanpassen van thema's en standaardmodules.

Klik op Bestand om nieuwe bestanden of mappen aan te maken, of om actie te ondernemen op het momenteel in de zoeker geselecteerde onderdeel, zoals verwijderen, klonen of hernoemen. Gebruik de opties onder Beeld om de indeling van uw bestanden en mappen te beheren. U kunt snel alle mappen samenvouwen of onlangs bewerkte of verwijderde activa oproepen.

Let op: de zoeker is contextueel, wat betekent dat uw acties altijd betrekking hebben op de geselecteerde mappen en bestanden. Om een nieuw bestand of een nieuwe map aan te maken binnen een specifieke map, klikt u op die map in de zoeker. 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.

Het menuActies isalleen actief als er een bestand of map is geselecteerd, en biedt contextuele opties voor dat type asset. U kunt ook met de rechtermuisknop direct op het asset klikken om een van de volgende dingen te doen:

• Kloon: een kopie maken van uw bestand, map of sjabloon.
• Verplaatsen: selecteer een nieuwe map voor uw activa.
• Hernoemen: geef het goed een nieuwe naam.
• Kloon naar HTML: maak een kopie van uw object, volledig gecodeerd in HTML.
• Kopieer naar portaal: maak een kopie van je activum en stuur het naar een ander HubSpot-account waartoe je toegang hebt.
• Pagina/email maken: maak een nieuw stuk inhoud met behulp van dit sjabloon.
• Toon afhankelijkheden: zie een lijst van alle HubSpot content die het bestand gebruikt.
• Toon revisiegeschiedenis: bekijk een geschiedenis van opgeslagen versies.
• Kopieer snippet: gebruik dit om snel de code van uw aangepaste gecodeerde module naar uw klembord te kopiëren. Deze optie verschijnt alleen als u met de rechtermuisknop op een module klikt.
• Map vergrendelen: vergrendel een map om te voorkomen dat gebruikers de inhoud ervan 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.

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 u gemakkelijk om te multi-tasken en te schakelen tussen uw verschillende sjablonen en gecodeerde bestanden. Met een rechtermuisklik op eentabblad krijgt u opties om uw tabbladen in de editor te beheren. U kunt een volledige lijst van geopende tabbladen bekijken door op depijl naar beneden aan de rechterkant te klikken.

Om uzelf meer ruimte te geven om in de opmaak-editor te werken, kunt ueerst op hetcollapse-pictogram klikkenom de finder in te klappen. U kunt de zoeker weer uitvouwen door op het map-pictogram te klikken.

Nieuwe sjablonen en bestanden aanmaken

Om een nieuwsjabloon,module ofgecodeerd bestand aan te maken, klikt u opBestand > Nieuw bestand in de linkerbovenhoek van de zoeker. U hebt de mogelijkheid om een van de volgende soorten activa aan te maken:

• Drag and drop: een template gebouwd door modules toe te voegen aan een intuïtieve drag and drop interface.
• HTML & HUBL: een aangepaste gecodeerde template gemaakt in de code editor met behulp van HTML, CSS en Javascript.
• Stylesheet: een gecodeerd CSS-bestand dat kan worden gebruikt om modules en bestanden te stylen.
• 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 redacteur

De layout 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 body class die op elke component is toegepast. U kunt elke module of groep aanpassen door erop te klikken om deze te bewerken in de inspecteur aan de rechterkant, of door met de rechtermuisknop op de component te klikken om de functionaliteit van de inspecteur te openen.

Sleep componenten in de lay-out-editor om hun plaatsing en grootte op uw sjabloon aan te passen. In de linkerbovenhoek vindt u de knoppen Ongedaan maken en Opnieuw doen, waarmee u uw wijzigingen snel kunt terugdraaien. U kunt ook met de rechtermuisknop op een module klikkenom deze snel te groeperen, te klonen of een moduletype te wijzigen, ofsneltoetsen 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 responsief, wat betekent dat ze zich automatisch aanpassen aan verschillende schermformaten. Deze editor compileert je drag and drop modules in schone HTML opmaak die responsief wordt gemaakt door wat ingebouwdeCSS.

Meer informatie overhet maken en bewerken van sjablonen enhet toevoegen 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, toont de inspector alle eigenschappen en opties van die component.
• Wanneer geen component is geselecteerd in de drag & drop editor, toont de inspecteur opties voor de 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 sjablonen met slepen en neerzetten wordt het tabblad + Toevoegen gebruikt om nieuwe componenten aan uw lay-out toe te voegen.Het tabbladBewerkenvan 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 broodkruimelnavigatie bovenaan waarmee u snel kunt navigeren tussen het onderdeel, de module, de groep en het sjabloon waaraan u momenteel 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 snippets en meer details vinden over hoe deze aangepaste gecodeerde activa kunnen worden gebruikt in uw sjablonen.

Code editor

HubSpot's code editor is een krachtige IDE waarmee jeCSS bestanden,Javascript bestanden en zelfsHTML templates kunt coderen. Terwijl je codeert of je stylesheets bewerkt, kun je de effecten van je wijzigingen live bekijken op verschillende schermformaten. De code-editor maakt ook gebruik van vele andere nuttige IDE-functies, zoals kleurgecodeerde klassen, foutcontrole, syntaxismarkering, automatisch opslaan, automatisch sluiten van tags, automatisch inspringen en meer.

Meer informatie overhet gebruik van de code-editor.

Let op: HubSpot minificeert standaard automatisch JavaScript en CSS in de design manager om onnodige spaties, regeleinden en commentaar te verwijderen. Dit geldt ook voor JavaScript en CSS die je via de CLI naar de design manager uploadt. Dit betekent dat je reeds geminificeerde code niet direct aan de design manager moet toevoegen.

Meer informatie overJavaScript en CSS-minificatie.

Module-editor

Hoewel HubSpot's drag and drop templates worden geleverd met een aantal standaard modules om uit te kiezen, hebben ontwerpers soms behoefte aan een meer aangepaste ontwerpoplossing.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 aangepast in de pagina-editor zonder enige code.

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

Bestandsbeheerder

Defile manager van HubSpot slaat alle assets op die je gebruikt om content te creëren. Met deze tool kun je PDF's, afbeeldingen, video's, audiobestanden, lettertypes en meer uploaden. Je hebt toegang tot je creatieve assets of kunt snel nieuwe bestanden uploaden zonder dat je de app hoeft te verlaten.