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: april 2, 2021

Geldt voor:

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

Er zijn meerdere plaatsen waar inhoudstyling 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 livepagina 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 die aan een module zijn gekoppeld.
    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. Meer informatie over !belangrijke tags en hoe ze de vormgeving beïnvloeden.

page-editor-styles-tab

Vind styling op een voorbeeld of live pagina

Je kunt de ontwikkelaarstools in je browser gebruiken om de stijlen te onderzoeken die op je live website of een voorbeeldpagina zijn toegepast. 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 deelvenster Stijlen aan de rechterkant zie je alle stijlen die op dat element worden toegepast. 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 URL van de pagina is en de styling is gericht op #hs_cos_wrapper_module_number , dan wordt de styling waarschijnlijk ingesteld in het tabblad Stijlen van de pagina-editor. HubSpot voegt ! important tags toe aan deze stijlen. Leer meer over ! important tags en hoe ze de vormgeving 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 aanbrengen van wijzigingen in uw HubSpot-sjablonen of stylesheets is de oorspronkelijke sjabloonontwerper. Er zijn echter verschillende bronnen om extra hulp te krijgen bij het stijlen van inhoud, afhankelijk van uw niveau van probleemoplossing 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: