Laatst bijgewerkt: januari 19, 2023
CSS (Cascading Style Sheets) zijn gecodeerde bestanden die elementen van uw pagina selecteren en hun presentatie regelen. Zie de HTML van uw aangepaste sjabloon als de botten van uw website en de CSS als de huid van uw site.
Dit artikel behandelt het maken, publiceren en toevoegen van een CSS-bestand in HubSpot. Je kunt hier leren hoe je eenvoudige ontwerpwijzigingen aan een bepaalde pagina kunt aanbrengen. Als je een themasjabloon gebruikt, leer dan hoe je de instellingen van je thema kunt bewerken.
Maak een nieuw CSS-bestand
- Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
- Klik op het mappictogram in de linkerbovenhoek om het zijbalkmenu uit te vouwen. Klik vervolgens op Bestand > Nieuw bestand.
- Klik in het dialoogvenster op CSS stylesheet. Voer vervolgens een naam in voor uw CSS-stijlenblad en klik op Maken.
Bewerk het CSS-bestand
Zodra u een bestaand CSS-bestand hebt gemaakt of geopend, maakt u uw bewerkingen in de code-editor. Naast standaard CSS ondersteunt de code editor HubL variabelen en macro's om het onderhoud van uw CSS makkelijker te maken. Om te zien hoe uw HubL wordt weergegeven, klikt u op de schakelaarUitvoer tonen bovenaan de editor. Aan de rechterkant wordt een paneel geopend met het gerenderde voorbeeld.
Kijk voor een lijst met standaard CSS selectors voor HubSpot templates op Boilerplate CSS.
Controleer uw code voor publicatie op HubL-fouten. Er zijn drie plaatsen om HubL fouten of waarschuwingen te vinden in een aangepaste module of gecodeerd bestand:
- In de foutconsole onderaan de code editor.
- In de foutengoot aan de linkerkant van de code editor.
- In de schuifbalk aan de rechterkant van de editor.
Fouten waardoor u niet 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 foutenconsole te zien en op Details verbergen om de foutenconsole in te klappen .
In de foutenconsole zullen er links zijn naar waar er HubL-fouten of waarschuwingen zijn in uw code of aangepaste module. Beweeg over de rode foutindicatoren aan de linkerkant van de code-editor om de fout of waarschuwing in je code te zien. Als u op de fout klikt, gaat uw cursor naar alle fouten of waarschuwingen op die regel. Klikken op een schuifbalkannotatie brengt u naar dat deel van het bestand.
U kunt ook op een regelnummer in de code-editor klikken en de URL van het bestand overeenkomstig laten bijwerken. Zo kunt u een link naar uw code met anderen delen en hen precies laten zien waar u in het bestand werkt.
Klik na het bewerken van het bestand op Wijzigingen publiceren in de rechterbovenhoek. Als u dit stylesheet in een ander gecodeerd sjabloon wilt aanroepen, kopieert u de URL van het blad door te klikken op Acties > Openbare URL kopiëren in het linker zijbalkmenu.
Aan sjabloon bevestigen
In HubSpot kun je stylesheets op een paar verschillende manieren aan je content koppelen. Hieronder staat de volgorde waarin bijgevoegde stylesheets op je site worden gelinkt:
- public_common.css*: een stylesheet die voornamelijk gebruikt wordt door de app van HubSpot, maar ook voor bepaalde functies van de site.
- Header HTML in instellingen onder Website > Pagina's: linktags toegevoegd aan de globale <head> van de site.
- Layout.css **:standaard responsief CSS-bestand toegevoegd aan alle drag-and-drop template lay-outs.
- Bijgevoegde stylesheets in instellingen onder Website > Pagina's: stylesheets gekoppeld aan uw hele site.
- Bijgevoegde stylesheets in instellingen onder Website > Blog: stylesheets gekoppeld aan uw blog (overschrijft site global sheets).
- Gekoppelde stylesheets***: stylesheets die in de opmaak van het sjabloon zijn opgenomen.
- Extra <head> opmaak in de template: link tags toegevoegd aan de <head> van een bepaalde template layout .
- Pagina-specifieke stylesheets: stylesheets die in de instellingen van een pagina zijn opgenomen.
- Page head HTML: link tags toegevoegd aan de <head> van een bepaalde pagina in de instellingen van de pagina.
* Verplicht
** Vereist voor lay-outs met slepen en neerzetten
*** Aanbevolen methode van stylesheet attachment voor template lay-outs
Om stylesheets aan een sjabloon te koppelen, opent u het sjabloon in uw design manager. Selecteer in het menu aan de rechterkant onder Head and Body Options een bestand in het keuzemenu Add naast Linked stylesheets.
U kunt een reeds toegevoegd stylesheet bewerken of verwijderen door er met de muis overheen te gaan en te klikken op Bewerk om er wijzigingen in 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 paginas met het sjabloon.
stylesheets op een specifieke pagina toevoegen of verwijderen (alleenMarketing Hub Professional en Enterprise )
Let op: deze optie is niet beschikbaar voor themasjablonen. Leer hoe u uw thema-instellingen kunt bewerken.
Om een paginaspecifiek stylesheet toe te voegen of te verwijderen uit de instellingensectie van de pagina-editor:
- Navigeer naar websitepagina's of landingspagina's.
- Ga met de muis over uw pagina en klik op Bewerken.
- Klik in de pagina-editor bovenaan op Instellingen.
- Scroll naar beneden en klik op Geavanceerde opties.
- Klik onder Page Stylesheets op het keuzemenu Attach a stylesheet en selecteer het blad dat u wilt toevoegen. Klik op X naast het stylesheet dat u wilt verwijderen.
- Klik op Opslaan en publiceren in de rechterbovenhoek.
U kunt ook stylesheets uitschakelen die de pagina erft van het sjabloon of domein. Indien uitgeschakeld, worden deze stylesheets niet toegepast op uw pagina:
- Onder hetzelfde tabblad Instellingen in de pagina-editor selecteert uUitgeschakeld in het dropdown menu naast uw opgenomen stylesheets.
- Klik op Opslaan en Publiceren in de rechterbovenhoek.
stylesheets toevoegen of verwijderen op domeinniveau( alleenMarketing Hub Professional en Enterprise )
Let op: themasjablonen moeten de annotatie enableDomainStylesheets: true bevatten om stylesheets op domeinniveau te kunnen gebruiken. Meer informatie over sjabloonannotaties.
Om een stylesheet toe te voegen of te verwijderen van alle inhoud op een domein:
- Klik in uw HubSpot-account op de instellingenpictogram in de hoofdnavigatiebalk.
- Klik in het zijbalkmenu op Website > Pagina's.
- Klik op het dropdown menu om het domein te selecterenwaarvoor u de instellingen wilt bijwerken .
- Blader op het tabbladTemplates naar CSS & Stylesheets. Om een stylesheet toe te voegen, klikt u op + stylesheet toevoegen. Klik op de X naast een toegevoegd stylesheet om het te verwijderen.
- Klik op Opslaan.
Let op: bij het downgraden naar de Starter of gratis tools van HubSpot blijven aangehechte stylesheets op domeinniveau actief totdat je ze verwijdert. Zodra alle stylesheets zijn verwijderd, kun je niet langer stylesheets op domeinniveau toevoegen. Meer informatie over het downgraden van een abonnement.
