Landing Pages

Modulestijlen in de content editor aanpassen

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

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

Binnen de pagina-editor kunt u de tussenruimte, de padding en de uitlijning van de inhoud van uw module bewerken in het tabblad Stijl om de positie van de module op uw pagina aan te passen. Als u een aangepaste gecodeerde sjabloon van een ontwikkelaar of een themasjabloon gebruikt, zijn er mogelijk extra modulestijlopties in het tabblad Opties.

Als u gebruik maakt van een startsjabloon, een themasjabloon of een gecodeerd sjabloon met een slepen en neerzetten, kunt u ook achtergrondstijlen toepassen op rijen, kolommen of gedeelten van uw pagina.

Let op: het bewerken van de styling van een module vanuit de pagina-editor zal CSS-regels toevoegen met !belangrijke tags, die de regels in je stylesheet kunnen overschrijven. Fof beste resultaten, is het aan te raden om met een ontwerper te werken om CSS-bewerkingen direct naar de stylesheets bij uw site. Om een paginastijl snel aan te passen zonder gebruik te maken van een code, gebruikt u een startsjabloon of een themasjabloon.

Voordat u begint

De beschikbare stylingopties zijn afhankelijk van het type module dat u bewerkt en de paginasjabloon die u gebruikt. De website-ontwikkelaar die uw sjabloon heeft gemaakt, bepaalt welke stijlopties in de pagina-editor verschijnen.

  • De meest voorkomende modules hebben stijlopties voor marge en opvulling, zodat u de afstand en positionering van uw modules kunt aanpassen.Formuliermodules hebben meer stijlopties, waaronder tekstkleur en randstijlen.
  • Modules die meerdere malen worden herhaald op uw pagina's, zoals knoppen of koppen, hebben meestal vooraf ingestelde stijlen voor kleuren en lettertypen die zijn gebaseerd op het gecodeerde stylesheet van uw sjabloon of de thema-instellingen van uw sjabloon.
  • Aangepaste modules hebben geen stijlopties beschikbaar in content editors en moeten in plaats daarvan worden bewerkt in de designmanager. Als u hulp nodig hebt met een aangepaste module, kunt u verbinding maken met een HubSpot Partner om u te helpen met ontwerpbewerkingen.

Stijlen voor een module aanpassen

U kunt de uitlijning, de tussenruimte en bepaalde lettertypen en kleuren aanpassen in het tabblad Stijlen. De beschikbare opties voor uw module zijn gebaseerd op het ontwerp van uw paginasjabloon.

  • Navigeer in uw HubSpot account naar Marketing > Website > Landingspagina's of Websitepagina's.
  • Klik in het linkerpaneel op het tabblad Inhoud en selecteer vervolgens de module die u wilt bewerken.
  • Klik op het tabblad Stijlen.
  • De meeste modules hebben uitlijnings- en afstandsopties:
    • Pas de uitlijning van de inhoud van uw module aan. Om de inhoud van uw module te centreren, klikt u bijvoorbeeld op het pictogram "blockAlignmentCenter Align Center".
    • Om opvulling of marges rond uw module of de inhoud ervan toe te passen, klikt u op de pijltjestoetsen om deze afstand aan te passen.
  • Pas alle andere randen, lettertypen of kleuren aan die beschikbaar zijn voor uw module.
  • Om eventuele wijzigingen in de styling van uw module ongedaan te maken, klikt u op het refresh revert icoontje om alle stijlen te resetten.

edit-module-styles

Meer stijlopties aanpassen in een startsjabloon of een themasjabloon

Als u een startsjabloon gebruikt, worden sommige stijlopties, zoals standaardlettertypen of -kleuren, op meerdere delen van uw pagina herhaald. Afhankelijk van hoe het sjabloon door uw websiteontwikkelaar is gecodeerd, kunt u deze standaardstijlen wellicht overschrijven in het tabblad Opties aan de linkerkant.

  • Klik in de pagina-editor op de module om deze te selecteren.
  • Klik in het linkerpaneel op het tabblad Opties.
  • Klik onder uw standaard module-inhoudsopties op om de schakelaar voor overschrijven van standaardstijlen in te schakelen.
  • Hier kunt u extra stijlen selecteren, op basis van de opties die zijn opgenomen in het sjabloon van uw pagina. De meeste starterssjablonen hebben hier override opties beschikbaar.

override-default-styles

  • Nadat u uw wijzigingen hebt aangebracht, klikt u linksonder op Wijzigingen toepassen. Om terug te keren naar alle inhoudsopties in het linkerpaneel, klikt u linksboven op Terug.