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.
Landing Pages

Begrijp de bron van de opmaak van een pagina

Laatst bijgewerkt: augustus 3, 2021

Geldt voor:

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

Er zijn meerdere plaatsen waar content styling kan worden toegevoegd in HubSpot, en het wordt toegepast in een specifieke volgorde op basis van waar het is toegevoegd. Leer hieronder hoe styling wordt toegepast, hoe u styling kunt vinden op een live pagina, en hoe u hulp kunt krijgen bij het aanpassen van het ontwerp.

Begrijpen hoe styling wordt toegepast

CSS-styling in HubSpot wordt toegepast in volgorde op basis van waar het is ingesteld in HubSpot, zoals hieronder vermeld. Bijvoorbeeld, styling ingesteld in een globaal stylesheet wordt overruled door styling ingesteld op een specifieke pagina.

  1. Aangepaste module CSS
    1. Stylesheets gekoppeld aan een module.
    2. CSS toegevoegd aan de CSS sectie van een module.
    3. CSS binnen de HubL markup van de module binnen een require_css blok
  2. Stylesheets die aan een sjabloon zijn toegevoegd via de require_css blok
  3. HubSpot standaard stylesheets (bijvoorbeeld layout.css)
  4. Stijlbladen toegevoegd aan de sjabloon

    design-manager-linked-stylesheet
  5. Stylesheets toegevoegd op het instellingen tabblad van uw pagina

    page-editor-attach-stylesheet
  6. Stylesheets toegevoegd in uw instellingen voor alle domeinen
  7. Stylesheets gekoppeld in uw instellingen voor een specifiek domein
  8. CSS toegevoegd binnen <style> tags. Bijvoorbeeld, de head HTML van uw website instellingen, pagina instellingen, of template.

    page-editor-head-html
  9. Stijlen toegevoegd via de pagina editor. HubSpot zal ook !important tags toevoegen aan deze stijlen. Leer meer over !important tags en hoe ze styling beïnvloeden.

page-editor-styles-tab

Vind styling op een preview of live pagina

U kunt ontwikkelaarstools in uw browser gebruiken om de stijlen te onderzoeken die zijn toegepast op uw live website of een voorbeeldpagina. Elke browser verschilt enigszins in de manier waarop je problemen met styling kunt oplossen.

In Google Chrome kunt u als volgt naar styling zoeken

  • Klik op uw voorbeeld- of livepagina met de rechtermuisknop op het element dat u wilt onderzoeken en selecteer vervolgensInspecteren.
  • In hetdeelvenster Elementen aan de linkerkant ziet u de HTML van de pagina. U kunt op de elementen klikken om hun stijlen te bekijken, of u kunt het cursorpictogram linksboven in het deelvenster gebruiken om op pagina-elementen te klikken.

    inspect-live-page-cursor

  • In het paneel Stijlen aan de rechterkant, zie je alle stijlen die worden toegepast op dat element. Je kunt de selectievakjes naast elke stijl aan- en uitzetten om de stijl te verwijderen en toe te passen. Dit zal helpen om te bepalen welke stijlregel moet worden gewijzigd.

    inspect-live-page
  • Rechts van de CSS regels zie je de bronnaam voor die opmaak, die je vertelt waar de opmaak vandaan komt. Beweeg met de muis over de bronnaam om de volledige naam te zien:
    • Als de opmaak afkomstig is van een stylesheet, verschijnt de naam van de stylesheet naast de CSS declaratie in de inspector. Je kunt dan naar je design manager navigeren, de stylesheet vinden en waar nodig aanpassingen maken.

      inspect-css-stylesheet-name
    • Als de bronnaam begint met module, dan is de styling waarschijnlijk afkomstig van de CSS van een module. Beweeg de muis over de bronnaam om de volledige naam van de module te zien.

      inspect-css-module-name
    • Als de bronnaam User agent stylesheet is, maakt de CSS deel uit van de standaardstyling van de browser. U'Dit zie je het vaakst bij algemene HTML tag styling zoals <p>, <h1>, <h2>, <span>, <div>, etc. Deze styling wordt toegepast als de browser geen algemene stylingregels voor het element kan vinden, maar het kan overschreven worden door je eigen stijlen aan dat element toe te voegen.

      inspect-css-user-agent
    • Als de bronnaam de URL van de pagina is, komt de CSS van binnen de <style> tags op de pagina. De styling kan bijvoorbeeld worden ingesteld in de pagina of template head HTML.

      inspect-css-page-url
    • Als de bronnaam de pagina URL is en de styling is gericht op #hs_cos_wrapper_module_number , dan wordt de styling waarschijnlijk ingesteld in de Styles tab van de pagina editor. HubSpot zal !important tags toevoegen aan deze stijlen. Leer meer over !important tags en hoe ze styling beïnvloeden.

      inspect-css-styles-tab
    • Alselement.stylenaast de declaratie in de inspector verschijnt, is de CSS inline gezet. Inline-styling is styling die rechtstreeks wordt toegevoegd aan de HTML-broncode van een pagina, of aan de Inline-stylingvelden van een sjabloon. Bijvoorbeeld, inline styling in de broncode zou verschijnen als <p style="background:purple;">Hello world</p>.

      inspect-css-element-style

Raadpleeg de helpdocumentatie voor uw webbrowser voor meer informatie over het inspecteren van een pagina:

Hulp krijgen bij ontwerpbewerkingen

De beste bron voor het maken van wijzigingen aan uw HubSpot-sjablonen of stylesheets is de oorspronkelijke sjabloonontwerper. Er zijn echter verschillende bronnen om extra hulp te krijgen bij het stylen van inhoud, afhankelijk van uw comfortniveau met het oplossen van problemen met HTML en CSS.

  • Als u comfortabel bent met het gebruik van de inspector tools om problemen met het ontwerp van uw sjabloon op te lossen:
  • Als je niet comfortabel bent met het lezen of bewerken van HTML en CSS in je templates: