CSS-bestanden aanmaken, bewerken en toevoegen

Cascading Stylesheets (CSS) bepalen de visuele weergave van de pagina’s van je site door pagina-elementen te selecteren en op te maken. Gebruik de ontwerpmanager om nieuwe CSS-bestanden aan te maken, bestaande bestanden te bewerken en ze toe te voegen aan sjablonen, specifieke pagina’s of hele domeinen.

Voor eenvoudige ontwerpwijzigingen aan een specifieke pagina kunt u meer informatie vinden over het bewerken van pagina-inhoud in de inhoudseditor. Als u een themasjabloon gebruikt, kunt u meer informatie vinden over het bewerken van uw thema-instellingen.

Een nieuw CSS-bestand aanmaken

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
2. Klik in de Finder linksboven op Bestand > Nieuw bestand.
3. Klik in het dialoogvenster op het vervolgkeuzemenu en selecteer CSS + HubL. 
4. Klik op Volgende.
5. Voer een naam voor uw bestand in het veld Bestandsnaam in.
6. Als u de locatie van het bestand wilt wijzigen, klikt u op Wijzigen. Selecteer in het pop-upvenster een nieuwe bestandslocatie. 
7. Klik op Maken wanneer u klaar bent.

Een CSS-bestand bewerken

Zodra je een CSS-bestand hebt aangemaakt of een bestaand bestand hebt geopend, kun je je wijzigingen aanbrengen in de code-editor. Naast standaard CSS ondersteunt de code-editor HubL-variabelen en macro's om het onderhoud van je CSS te vergemakkelijken.

Raadpleeg Boilerplate CSS voor een lijst met standaard CSS-selectors voor HubSpot-sjablonen.

1. { local.navDesignManager }}
2. Klik in de Finder op 'Bestand' > 'Nieuw bestand ' of open een bestaand CSS-bestand.
3. Voer in de code-editor de CSS in of werk deze bij om uw wijzigingen aan te brengen. 

Om een voorbeeld te bekijken van hoe je HubL wordt weergegeven, klik je bovenaan de editor op de schakelaar ‘Weergave tonen ’. Aan de rechterkant wordt een paneel geopend met het weergegeven voorbeeld.

Controleer op fouten

Controleer je code op HubL-fouten voordat je publiceert. Fouten worden weergegeven in de console onderaan, in de foutbalk aan de linkerkant en in de schuifbalk aan de rechterkant van de code-editor.

Fouten die publicatie verhinderen, worden in het rood weergegeven, terwijl algemene waarschuwingen in het geel worden weergegeven. Klik onderaan de code-editor op 'Details weergeven' om meer informatie over de fouten in de foutconsole te zien en op 'Details verbergen' om de foutconsole te verbergen.

Een CSS-bestand publiceren

Nadat u uw CSS-bestand hebt bewerkt, klikt u rechtsboven op Wijzigingen publiceren. Om dit stylesheet in een andere gecodeerde sjabloon op te roepen, klikt u op het vervolgkeuzemenu Acties in de finder en selecteert u Openbare URL kopiëren. 

Stylesheets aan assets koppelen

Koppel stylesheets aan je sjablonen, afzonderlijke pagina’s of aan een heel domein. Stylesheets worden in een specifieke volgorde toegepast, afhankelijk van waar ze zijn gekoppeld. De onderstaande lijst geeft de volgorde weer waarin ze op je site worden toegepast:

1. public_common.css (verplicht): een stylesheet die voornamelijk door de HubSpot-app wordt gebruikt, maar ook voor bepaalde sitefuncties.
2. HTML-header: link-tags die zijn toegevoegd aan de globale <head> van je site in Inhoud > Pagina-instellingen.
3. Layout.css (vereist voor drag-and-drop-lay-outs): standaard responsief CSS-bestand dat is gekoppeld aan alle drag-and-drop-sjabloonlay-outs.
4. Bijgevoegde stylesheets (pagina's): stylesheets die aan je hele site zijn gekoppeld in Content > Pagina-instellingen.
5. Bijgevoegde stylesheets (Blog): stylesheets die aan je blog zijn toegevoegd (heeft voorrang op de algemene stylesheets van de site) in Content > Bloginstellingen.
6. Gekoppelde stylesheets(aanbevolen voor sjabloonlay-outs): stylesheets die in de sjabloonlay-out zijn gekoppeld.
7. Extra <head>-opmaak in de sjabloon: link-tags toegevoegd aan de <head> van een bepaalde sjabloonlay-out.
8. Paginaspecifieke stylesheets:stylesheets die zijn toegevoegd in de instellingen van een pagina.
9. HTML in de paginakop:link-tags toegevoegd aan de <head> van een bepaalde pagina in de instellingen van de pagina.

Stylesheets aan sjablonen koppelen

Stylesheets kunnen worden gekoppeld aan sjablonen die je via slepen en neerzetten in de inspector binnen de Design Manager kunt plaatsen. Voor geprogrammeerde sjablonen worden stylesheets rechtstreeks in de code-editor toegevoegd.

Drag-and-drop-sjablonen

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
2. Klik in de Finder op de naam van je sjabloonbestand dat je via slepen en neerzetten kunt gebruiken.
3. Klik in de inspector op het vervolgkeuzemenu Toevoegen in het gedeelte Gekoppelde stylesheets en selecteer uw stylesheet. Om een stylesheet te verwijderen, klikt u op X.
4. Klik vervolgens rechtsboven op Wijzigingen publiceren om uw wijzigingen toe te passen op de livepagina’sdie de sjabloon gebruiken.

Gecodeerde sjablonen

Voor gecodeerde sjablonen worden stylesheets rechtstreeks in de code-editor toegevoegd met behulp van <link>-tags of de HubL -tag in de <head> van het bestand. Lees meer over gecodeerde sjablonen in de documentatie voor ontwikkelaars.

Stylesheets aan een specifieke pagina toevoegen

Let op: dezeoptie is niet beschikbaar voor themasjablonen. Leeshierhoe u uw thema-instellingen kunt bewerken.

Een paginaspecifiek stylesheet toevoegen vanuit het instellingenmenu van de inhoudseditor:

1. Ga naar uw inhoud:

   • Webpagina's: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Websitepagina's. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Websitepagina's.
   • Landingspagina's: Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Landingspagina's. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Landingspagina's.
2. Klik op de naam van je pagina.
3. Klik in de inhoudseditor op hetmenu Instellingen en selecteer Geavanceerd. 
4. Klik in het dialoogvenster, in het gedeelte Stylesheets, op het vervolgkeuzemenu Een stylesheet toevoegen en selecteer een stylesheet. Om een stylesheet te verwijderen, klikt u op de X naast de stylesheet.
5. Om stylesheets uit te schakelen die zijn overgenomen van de sjabloon of het domein, klikt u op het vervolgkeuzemenu naast de stylesheet en selecteert u'Uitgeschakeld'.

Domeinstijlbladen toevoegen

Let op: themasjablonenmoeten de annotatie enableDomainStylesheets: true bevatten om stylesheets op domeinniveau te kunnen gebruiken. Lees meer over sjabloonannotaties.

Een stylesheet aan een heel domein koppelen:

1. Klik in je HubSpot-account op het instellingen-pictogram in de bovenste navigatiebalk.
2. Klik in het zijbalkmenu op Inhoud > Pagina's.
3. Klik op het vervolgkeuzemenu om het domein te selecteren waarvan u de instellingen wilt bijwerken.
4. Klik op het tabblad 'Sjablonen', in het gedeelte 'CSS en stylesheets', op '+ Stylesheet toevoegen'. Om een stylesheet te verwijderen, klikt u op de X naast de gekoppelde stylesheet.
5. Klik op Opslaan.

Let op: wanneer je downgradet naar HubSpot’s Starter of gratis tools, blijven gekoppelde stylesheets op domeinniveau actief totdat je ze verwijdert. Zodra alle stylesheets zijn verwijderd, kun je geen stylesheets meer op domeinniveau koppelen. Meer informatie over het downgraden van een abonnement.