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

CSS-bestanden maken, bewerken en toevoegen om uw site op te maken

Laatst bijgewerkt: maart 22, 2021

Geldt voor:

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

CSS (Cascading Style Sheets) zijn gecodeerde bestanden die elementen van je pagina selecteren en hun presentatie controleren. Beschouw de HTML van uw aangepaste template als de botten van uw website en de CSS als de huid van uw site.

Dit artikel loopt door het maken, publiceren en toevoegen van een CSS bestand in HubSpot. U kunt hier leren hoe u eenvoudige wijzigingen in het ontwerp van een bepaalde pagina kunt aanbrengen. Als u een thema sjabloon gebruikt, leer dan hoe u uw thema instellingen kunt bewerken.

Maak een nieuw CSS bestand

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Klik op hetpictogram map in de linkerbovenhoek om het zijbalkmenu uit te klappen. Klik vervolgens op Bestand > Nieuw bestand.
New coded file
  • Klik in het dialoogvenster op CSS stylesheet. Voer vervolgens een naam in voor uw CSS stylesheet en klik op Create.

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 onderhouden van uw CSS eenvoudiger te maken. Om een voorbeeld te zien van hoe uw HubL zal renderen, klik om de Toon uitvoer schakelaar aan te zetten bovenaan de editor. Een paneel zal openen aan de rechterkant met de render preview.


design-manager-show-output-toggle

Om een lijst van standaard CSS selectors voor HubSpot sjablonen te zien, kijk op Boilerplate CSS.

Controleer uw code op HubL fouten voordat u publiceert. Er zijn drie plaatsen waar u HubL fouten of waarschuwingen kunt vinden in een aangepaste module of een 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 die u verhinderen te publiceren zullen in het rood staan, terwijl algemene waarschuwingen in het geel zullen staan. 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 in te klappen.

In de foutconsole zullen er links staan naar waar er HubL fouten of waarschuwingen zijn in uw code of aangepaste module. Beweeg met de muis over de rode foutindicatoren aan de linkerkant van de code-editor om de fout of waarschuwing in uw code te zien. Door op de fout te klikken gaat uw cursor naar alle fouten of waarschuwingen op die regel. Klikken op een scrollbar annotatie 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 aan het werken bent.

Na het bewerken van het bestand, klik op Wijzigingen publiceren in de rechterbovenhoek. Als je dit stylesheet wilt gebruiken in een ander gecodeerd sjabloon, kopieer dan de URL van het stylesheet door te klikken op Actions > Copy public URL in het linker zijbalk menu.

Edit CSS

Bevestig aan sjabloon

In HubSpot, kunt u stylesheets aan uw inhoud vastmaken op een paar verschillende manieren. Hieronder staat de volgorde waarin bijgevoegde stylesheets op je site worden gelinkt:

  1. public_common.css * - een stylesheet die voornamelijk gebruikt wordt door HubSpot's app, maar ook voor bepaalde sitefuncties.
  2. Header HTML in instellingen onder Website > Pagina's - link tags toegevoegd aan de globale <head> van de site.
  3. Lay-out.css ** -standaard responsief CSS bestand toegevoegd aan alle drag-and-drop sjabloon lay-outs.
  4. Bijgevoegde stylesheets in instellingen onder Website > Pagina's - stylesheets bijgevoegd aan uw gehele site.
  5. Bijgevoegde stylesheets in instellingen onder Website > Blog - stylesheets bijgevoegd aan uw blog (overschrijft site globale sheets).
  6. Gekoppelde stylesheets***- stylesheets die in de sjabloonlayout zijn aangehecht.
  7. Extra <head> markup in de template - link tags toegevoegd aan de <head> van een bepaalde template opmaak.
  8. Pagina-specifieke stylesheets - stylesheets die zijn toegevoegd in de instellingen van een pagina.
  9. Page head HTML - link tags toegevoegd aan de <head> van een bepaalde pagina in de instellingen van de pagina.

* Verplicht

** Vereist voor drag and drop lay-outs

*** Aanbevolen methode om stylesheets te bevestigen voor sjabloon lay-outs

Om stylesheets aan een sjabloon te koppelen, opent u het sjabloon in uw ontwerpmanager. In het rechter zijbalkmenu onder Head and Body Options, selecteert u een bestand uit het Add dropdown menu naast Linked stylesheets.

Je kunt een reeds aangehecht stylesheet bewerken of verwijderen door er met de muis over te gaan en te klikken op Bewerk om er wijzigingen in aan te brengen of op de 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.

HubSpot Help article screenshot

Voeg stylesheets toe aan of verwijder stylesheets van een specifieke pagina

Let op: deze optie is niet beschikbaar voor thema sjablonen. Leer hoe u uw thema-instellingen kunt bewerken.

Om een pagina-specifiek stylesheet toe te voegen of te verwijderen uit de instellingen sectie van de pagina editor:

  • Navigeer naar website pagina's of landingspagina's.
  • Ga met uw muis over uw pagina en klik op Bewerken.
  • Klik in de pagina-editor bovenaan op Instellingen.
  • Scroll naar beneden en klik op Geavanceerde Opties.
  • Onder Page Stylesheets, klik op het Attach a stylesheet dropdown menu en selecteer het stylesheet dat je wilt bijvoegen. Klik op de X naast het stylesheet dat u wilt verwijderen.

  • Klik op Opslaan en publiceren in de rechterbovenhoek.

Je kunt ook stylesheets uitschakelen die door de pagina geërfd worden van het template of domein. Wanneer deze uitgeschakeld zijn, zullen deze stylesheets niet worden toegepast op de pagina:

  • Onder dezelfde Instellingen tab in de pagina editor, selecteer Uitgeschakeld in het dropdown menu naast uw opgenomen stylesheets.
  • Klik op opslaanen publicerenin de rechterbovenhoek.

Voeg stylesheets toe of verwijder stylesheets op een domein-niveau

Let op: deze functie is alleen beschikbaar voor Marketing Hub alleen Enterprise-accounts.

Om een stylesheet toe te voegen of te verwijderen van alle inhoud op een domein:

  • Klik in uw HubSpot-account op de instellingenpictogram settings in de hoofdnavigatiebalk.
  • Klik in het zijbalkmenu op Website > Pagina's.
  • Klik op het uitklapmenu om het domein ywaarvoor u de instellingen wilt bijwerken.
  • Op het tabbladTemplates bladert u naar CSS & Stylesheets. Om een stylesheet toe te voegen, klikt u op + stylesheet toevoegen. Klik op de X naast een bijgevoegd stylesheet om deze te verwijderen.
  • Klik op Opslaan.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.