HubSpot Kennisbank

Je thema-instellingen bewerken

Geschreven door HubSpot Support | Oct 7, 2020 5:01:28 PM

Een thema is een verzameling stijlen en sjablonen die je kunt toepassen op je websitepagina's en blogs in HubSpot. Om ervoor te zorgen dat je website er consistent uitziet, worden de stijlinstellingen voor alle pagina's die hetzelfde thema gebruiken beheerd in je thema-instellingen.

Voordat je aan de slag gaat

Thema-instellingen beheren de belangrijkste kleuren, lettertypen en knopstijlen voor pagina's die je themasjablonen gebruiken.

Let op: de stylingopties die beschikbaar zijn in uw thema-instellingen zijn afhankelijk van de opties voor het themaveld die zijn opgenomen door de webontwikkelaar die uw thema heeft gemaakt.

Sommige inhoud voor je website wordt beheerd in andere delen van je accountinstellingen, waaronder:

Thema-instellingen bewerken

Je kunt de instellingen van een thema bewerken vanuit de inhoudseditor voor elke pagina of post die dat thema gebruikt:

  • Navigeer naar je content:

    • Website Pagina's:
    • Landingspagina's:
    • Blog:
  • Klik op de naam van uw inhoud.
  • Klik in de inhoudseditor op het menu Bewerken en selecteer Thema.

Kleuren

De kleurinstellingen van uw thema passen een primaire, secundaire en achtergrondkleur toe op alle elementen in uw themasjablonen. Deze stijlen worden toegepast op alle elementen op uw website. Om meer specifieke instellingen voor koppen, lettertypen en links aan te passen, klikt u op Bewerken naast Meer instellingen.

Lettertypen

Kies een primair en secundair lettertype voor de koppen, formulieren, knoppen en tekst op je website. Alle Google-lettertypen worden ondersteund. Klik op de kleurwolk om de kleuren van je primaire of secundaire lettertype aan te passen. Je kunt een eenvoudige kleurwaarde kiezen of op het tabblad Geavanceerd klikken en een specifieke hexadecimale waarde kiezen met een kleurenkiezer.

Spatie

Je thema-instellingen voor spatiëring bepalen de maximale breedte van je pagina-inhoud en de verticale spatiëring tussen verschillende elementen op je pagina.

Meer instellingen

Binnen je thema-instellingen kun je aanvullende gedetailleerde instellingen hebben voor meer specifieke stijlen op je pagina. De stijlopties in je thema zijn gebaseerd op de themavelden in het gecodeerde sjabloon van je thema. Als je de instelling die je zoekt niet kunt vinden, neem dan contact op met de ontwerper van je sjabloon om te zien welke opties in je sjabloon zijn opgenomen.

Het onderstaande voorbeeld is een algemene richtlijn voor welke typen extra's kunnen zijn opgenomen in uw thema. Raadpleeg de documentatie van de ontwerper voor een volledige referentie van themavelden die in uw sjablonen kunnen worden opgenomen.

Let op: vergeet niet dat je lettertypen, kleuren en stijlen kunt aanpassen binnen een rich text module op je pagina, of door de standaard stijlen van je thema te overschrijven binnen de pagina-editor. Pas deze stijlen alleen aan als je wilt dat ze worden toegepast op alle pagina's die dit thema gebruiken.

Typografie

In de instellingen voor typografie kun je bepalen welke lettertypen van toepassing zijn op bepaalde elementen in je sjablonen. Alle Google-lettertypes worden ondersteund. Je kunt ook aangepaste kleuren selecteren voor bepaalde koppen, lettertypes of links in je thema.

  • Koppen: u kunt het exacte lettertype, de kleur, de grootte en de stijl aanpassen voor alle koppen in uw thema.
  • Body: pas alleen het lettertype, de kleur of de tekstgrootte van de body van je pagina aan.
  • Links: pas de standaardkleur van links op je website aan. Je kunt ook de kleur en het gedrag van links aanpassen wanneer een bezoeker met de muis over je link gaat of erop klikt.

Knoppen

U kunt aangepaste kleuren, lettertypen en stijlen instellen voor knoppen op uw pagina's en blog. Binnen de pagina-editor voor een specifieke pagina kunt u mogelijk de grootte of het type van knoppen wijzigen, afhankelijk van hoe uw thema is gemaakt door uw websiteontwikkelaar.

  • Grootte: geef de afmetingen op van kleine, normale en grote knoppen op uw pagina.
  • Primair: een primaire knop is voor de belangrijkste actie die een bezoeker op je pagina uitvoert. Deze kleur moet opvallen en de aandacht van je bezoeker trekken.
  • Secundair: een secundaire knop wordt gebruikt voor relatief minder belangrijke acties als er al een primaire knop op je pagina staat. Secundaire knoppen worden meestal toegepast op pagina's voor acties met een lagere prioriteit.
  • Eenvoudig: dit zijn de standaard lettertypen en stijlen die worden toegepast op eenvoudige knopmodules op je pagina.

Formulieren

Pas de standaardkleuren, lettertypen, tekststijlen en knopstijlen aan voor je formulieren.

  • Titel: dit zijn stijlen die worden toegepast op het tekstveld dat boven je hele formulier verschijnt. Dit bevat meestal een begroeting en instructies voor het invullen van het formulier. Deze stijlen op je formulier kunnen alleen hier worden beheerd in de instellingen van je thema.
  • Labels: stijlen die worden toegepast op de labels die boven een formulierveld verschijnen.
  • Velden: stijlen toegepast op de namen van de formuliervelden zelf.
  • Help-tekst: dit is de voorbeeldinhoud die in elk formulierveld verschijnt en die aangeeft welk type informatie uw bezoeker moet verzenden.
  • Indienen: kies welke knopstijl en -grootte moet worden toegepast op uw formulieren.
  • Achtergrondkleur: de achtergrondkleur van je formulier.
  • Rand: de randkleur rond de formuliervelden.
  • Padding: de hoeveelheid ruimte rond het formulier op je pagina.

Tabellen

Stel de standaardkleuren, lettertypen, spatiëring en randen in voor tabellen op je pagina.

  • Tabelkop: de kleuren die worden toegepast op lettertypen in je tabelkop en de standaard achtergrondkleur over de volledige breedte van de eerste rij van je tabel. Je kunt ook een onderrand instellen voor een accentkleur langs de onderkant van de tabelkop.
  • Letterkleur: standaardkleur voor lettertypen in je tabel.
  • Achtergrondkleur: standaard achtergrondkleur voor de achtergrond van de cellen in je tabel.
  • Rand: de standaard randkleur, breedte en stijl van je tabel.
  • Padding: de hoeveelheid ruimte boven en onder je tabel op je pagina.

Meer informatie over het invoegen van een tabel in een rich text module op je pagina.

Website koptekst

Deze instellingen bepalen de kleuren en lettertypen die worden weergegeven in de koptekst van je pagina, inclusief je navigatiemenu. Leer hoe u uw navigatiemenu instelt in uw accountinstellingen. Als u uw bedrijfslogo wilt instellen op uw themasjablonen, voegt u uw logo-afbeelding toe aan de standaardinstellingen van uw account in het gedeelteBranding.

  • Menu: selecteer de kleur en stijl van het lettertype voor je navigatiemenu wanneer bezoekers een menu-item bekijken, erover zweven of erop klikken. Deze stijlen kunnen alleen hier worden beheerd in je thema-instellingen.
  • Achtergrondkleur: selecteer de kleur voor de achtergrond van de header van je website.
  • Onderrand: indien gewenst kunt u een horizontale lijn toevoegen als rand onder de header van uw website. Selecteer een stijl om de onderste rand te activeren en selecteer vervolgens een kleur en breedte voor uw rand.

Voettekst

Met deze instellingen bepaal je de kleuren en lettertypen die worden weergegeven in de voettekst van je pagina, inclusief navigatiemenu's. Leer hoe je je navigatiemenu instelt in je accountinstellingen.

  • Menu: selecteer de kleur en stijl van het lettertype voor het navigatiemenu in de voettekst van je thema. Je kunt de kleuren aanpassen voor wanneer bezoekers een menu-item bekijken, erover zweven of erop klikken. Deze stijlen kunnen alleen hier worden beheerd in de instellingen van je thema.
  • Achtergrondkleur: selecteer de kleur voor de achtergrond van de voettekst van uw website.
  • Onderrand: indien gewenst kunt u een horizontale lijn toevoegen als rand onder de voettekst van uw website. Selecteer een stijl om de onderste rand te activeren en selecteer vervolgens een kleur en breedte voor uw rand.

Blog

Deze instellingen bepalen de stijl van het sjabloon van uw listingpagina en blogpostsjabloon.

Bannerafbeeldingen: upload afbeeldingen om te gebruiken op de achtergrond van de header van uw blogtemplate. Je kunt één afbeelding kiezen voor de homepage van je blog, en één afbeelding voor al je blogberichten.

Tags: stel de standaardkleur, lettertypes en stijlen in voor uw blogtags, die bovenaan uw blogberichten verschijnen.