Design Manager

Creëer, bewerk en voeg CSS-bestanden toe aan de stijl van uw site

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

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

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

Dit artikel loopt door het maken, publiceren en bijvoegen van een CSS-bestand in HubSpot. U kunt hier leren hoe u eenvoudige ontwerpwijzigingen kunt aanbrengen op een bepaalde pagina. Als je een themasjabloon gebruikt, leer dan hoe je je thema-instellingen kunt bewerken.

Maak een nieuw CSS-bestand aan

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Klik op de map met de map met pictogrammen in de linkerbovenhoek om het menu aan de zijkant uit te breiden. 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 de standaard CSS ondersteunt de code editor HubL variabelen en macro's om het onderhoud van uw CSS te vergemakkelijken. Om te zien hoe je HubL zal renderen, klik je op de Show output switch aan de bovenkant van de editor. Er opent zich een paneel aan de rechterkant met de gerenderde preview.


design-manager-show-output-toggle

Om een lijst met standaard CSS-selectoren voor HubSpot sjablonen te zien, kijkt u naar Boilerplate CSS.

Controleer uw code op HubL fouten voordat u deze publiceert. Er zijn drie plaatsen waar u HubL fouten of waarschuwingen kunt vinden in een aangepaste module of gecodeerd bestand:

  • In de foutconsole langs de onderkant van de code-editor.
  • In de foutgoot aan de linkerkant van de code-editor.
  • In de schuifbalk aan de rechterkant van de editor.

Fouten die u verhinderen om te publiceren zullen in het rood zijn, terwijl de algemene waarschuwingen in het geel zullen zijn. Klik onderaan de code-editor op Toon details om meer informatie te zien over de fouten in de foutconsole en Verberg details om de foutconsole in te klappen.

In de foutconsole zullen er links zijn naar waar er HubL fouten of waarschuwingen zijn in uw code of aangepaste module. Beweeg met de muis over de rode foutmeldingen aan de linkerkant van de code-editor om de fout of waarschuwing in uw code te zien. Als u op de fout klikt, gaat uw cursor naar alle fouten of waarschuwingen op die regel. Als u op een aantekening op de schuifbalk klikt, komt u bij dat deel van het bestand.

U kunt ook op een regelnummer in de code-editor klikken en de URL van het bestand dienovereenkomstig laten bijwerken. Zo kunt u een link naar uw code met anderen delen en hen precies daarheen leiden waar u in het bestand werkt.

Klik na het bewerken van het bestand rechtsboven op Wijzigingen publiceren. Als u dit stylesheet in een ander gecodeerd sjabloon wilt aanroepen, kopieer dan de URL van het blad door in het menu aan de linkerkant op Actions > Copy public URL te klikken.

Edit CSS

Bevestig aan het sjabloon

In HubSpot kunt u stylesheets op verschillende manieren aan uw inhoud koppelen. Hieronder vindt u de volgorde waarin bijgevoegde stylesheets op uw site worden gelinkt:

  1. publiek_common.css * - een stylesheet die voornamelijk wordt gebruikt door de app van HubSpot, maar ook voor bepaalde sitefuncties.
  2. Koptekst HTML in instellingen onder Website > Pagina 's - linktags toegevoegd aan de globale <head> van de site.
  3. Lay-out.css ** - standaard responsief CSS-bestand gekoppeld aan alle lay-outs voor sjablonen met behulp van slepen en neerzetten.
  4. Bijgevoegde stylesheets in instellingen onder Website > Pagina's - stylesheets bij uw gehele site.
  5. Bijgevoegde stylesheets in de instellingen onder Website > Blog - stylesheets bij uw blog (overschrijft site global sheets).
  6. Gekoppelde stylesheets*** - stylesheets die in de sjabloonlay-out zijn bijgevoegd.
  7. Extra <head> markup in de template - link tags toegevoegd aan de <head> van een bepaalde template layout.
  8. Pagina-specifieke stylesheet s - stylesheets in de instellingen van een pagina.
  9. Paginakop 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 van stylesheetbijlage voor sjabloonlay-outs

Om stylesheets aan een sjabloon te koppelen, opent u de sjabloon in uw designmanager. Selecteer in het rechter zijbalk-menu onder Hoofd- en Lichaamsopties een bestand uit het vervolgkeuzemenu Toevoegen naast Gekoppelde stylesheets.

U kunt een stylesheet dat al is bijgevoegd, bewerken of verwijderen door er met de muis overheen te gaan en te klikken op Bewerken om er wijzigingen in aan te brengen of op de X om het te verwijderen.

Nadat u een stylesheet hebt toegevoegd, klikt u in de rechterbovenhoek op Wijzigingen publiceren om uw wijzigingen toe te passen op de live pagina's met behulp van het sjabloon.

HubSpot Help article screenshot

Voeg stylesheets op een specifieke pagina toe of verwijder deze

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

Om een paginaspecifiek stylesheet toe te voegen aan of te verwijderen uit het instellingengedeelte 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 Pagina Stijlenbladen op het vervolgkeuzemenu Bijvoegen van een stylesheet en selecteer het blad dat u wilt bijvoegen. Klik op de X naast het stylesheet dat u wilt verwijderen.

  • Klik op Opslaan en publiceren in de rechterbovenhoek.

U kunt ook stylesheets uitschakelen die door de pagina van het sjabloon of domein worden geërfd. Indien uitgeschakeld, zullen deze stylesheets niet worden toegepast op uw pagina:

  • Selecteer op hetzelfde tabblad Instellingen in de pagina-editor de optie Uitgeschakeld in het vervolgkeuzemenu naast de bijgeleverde stylesheets.
  • Klik op Opslaan en publiceren in de rechterbovenhoek.

Voeg stylesheets op domeinniveau toe of verwijder deze

Let op: deze functie is beschikbaar voor Marketing Hub Alleen ondernemingsrekeningen.

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 de zijbalk op Website > Pagina's .
  • Klik op de dropdown menu om de domein yu wilt de instellingen voor.
  • Blader op het tabblad Templates naar CSS & Stylesheets. Om een stylesheet toe te voegen, klikt u op + Voeg stylesheet toe. 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.