CSS-bestanden (Cascading Style Sheets) zijn gecodeerde bestanden die elementen van je pagina selecteren en hun presentatie regelen. CSS-bestanden kunnen niet bij e-mails of e-mailsjablonen worden gevoegd.
Dit artikel behandelt het maken, publiceren en toevoegen van een CSS-bestand in HubSpot. Je leert hoe je eenvoudige ontwerpwijzigingen aanbrengt op een bepaalde pagina. Als je een themasjabloon gebruikt, leer dan hoe je de instellingen van je thema kunt bewerken.
Zodra je een bestaand CSS-bestand hebt gemaakt of geopend, maak je je bewerkingen in de code-editor. Naast standaard CSS ondersteunt de code editor HubL variabelen en macro's om het onderhoud van je CSS makkelijker te maken. Om een voorbeeld te zien van hoe je HubL zal renderen, klik je om de Toon uitvoer schakelaar aan te zetten bovenin de editor. Aan de rechterkant wordt een paneel geopend met het gerenderde voorbeeld.
Bekijk Boilerplate CSS voor een lijst met standaard CSS selectors voor HubSpot sjablonen.
Controleer uw code op HubL-fouten voordat u deze publiceert. Er zijn drie plaatsen waar je HubL fouten of waarschuwingen in een aangepaste module of gecodeerd bestand kunt vinden:
Fouten die voorkomen dat u kunt publiceren worden in het rood weergegeven, terwijl algemene waarschuwingen in het geel worden weergegeven. Klik onderaan de code-editor op Details tonen om meer informatie over de fouten in de foutconsole te zien en op Details verbergen om de foutconsole in te klappen.
In de foutconsole staan links naar de HubL-fouten of waarschuwingen in je code of aangepaste module. Beweeg de muis over de rode foutindicatoren aan de linkerkant van de code-editor om de fout of waarschuwing in je code te zien. Als je op de fout klikt, gaat je cursor naar alle fouten of waarschuwingen op die regel. Als u op een schuifbalkannotatie klikt, gaat u naar dat deel van het bestand.
Je kunt ook op een regelnummer in de code-editor klikken en de URL van het bestand overeenkomstig bijwerken. Hierdoor kunt u een link naar uw code delen met anderen en ze precies leiden naar waar u aan het werk bent in het bestand.
Klik na het bewerken van het bestand op Wijzigingen publiceren in de rechterbovenhoek. Als je dit stylesheet wilt aanroepen in een ander gecodeerd sjabloon, kopieer dan de URL van het stylesheet door te klikken op Acties > Openbare URL kopiëren in het menu aan de linkerkant van de zijbalk.
In HubSpot kun je stylesheets op een paar verschillende manieren aan je content koppelen. Hieronder zie je de volgorde waarin stylesheets op je site worden gekoppeld:
* Vereist
** Vereist voor lay-outs met slepen en neerzetten
*** Aanbevolen methode voor het toevoegen van stylesheets aan sjablonen
Om stylesheets aan een sjabloon te koppelen, opent u de sjabloon in uw design manager. Selecteer in het menu aan de rechterkant onder Head and Body Options een bestand in het vervolgkeuzemenu Add naast Linked stylesheets.
Je kunt een stylesheet die al is toegevoegd bewerken of verwijderen door er met de muis overheen te gaan en te klikken op Bewerken om wijzigingen aan te brengen of op X om het te verwijderen.
Nadat u een stylesheet hebt toegevoegd, klikt u op Wijzigingen publiceren in de rechterbovenhoek om uw wijzigingen toe te passen op de live pagina's die het sjabloon gebruiken.
Let op: deze optie is niet beschikbaar voor themasjablonen. Leer hoe u de instellingen van uw thema kunt bewerken.
U kunt een paginaspecifiek stylesheet toevoegen aan of verwijderen uit het instellingengedeelte van de pagina-editor:
Navigeer naar je inhoud:
Let op: themasjablonen moeten de annotatie enableDomainStylesheets: true bevatten om stylesheets op domeinniveau te kunnen gebruiken. Meer informatie over sjabloonannotaties.
Een stylesheet toevoegen aan of verwijderen uit alle inhoud op een domein:
Let op: wanneer je downgraded 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 toevoegen op domeinniveau. Meer informatie over het downgraden van een abonnement.