Landing Pages

Begrijp waar de styling op je pagina vandaan komt

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

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

Er zijn meerdere plaatsen waar contentstyling 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 je styling kunt vinden op een live pagina en hoe je hulp kunt krijgen bij ontwerpbewerkingen.

Begrijpen hoe styling wordt toegepast

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

  1. Aangepaste module CSS
    1. Stylesheets die aan een module zijn gekoppeld.
    2. CSS toegevoegd aan het CSS-gedeelte van een module.
    3. CSS binnen de HubL markup van de module binnen een require_css blok
  2. Stylesheets toegevoegd aan een sjabloon via de require_css-blok
  3. HubSpot standaard stylesheets (bijvoorbeeld lay-out.css)
  4. Stylesheets bij de sjabloon

    design-manager-linked-stylesheet
  5. Stylesheets bijgevoegd op het tabblad Instellingen van uw pagina

    page-editor-attach-stylesheet
  6. Stylesheets bijgevoegd in uw instellingen voor alle domeinen
  7. Stylesheets gekoppeld aan je instellingen voor een specifiek domein
  8. CSS toegevoegd binnen <stijl> tags. Bijvoorbeeld het hoofd HTML van uw website instellingen, pagina instellingen, of sjabloon.

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

page-editor-styles-tab

Styling vinden op een preview of live pagina

U kunt de ontwikkelaarshulpmiddelen in uw browser gebruiken om de toegepaste stijlen op uw live-website of een voorbeeldpagina te bekijken. Elke browser varieert enigszins in het oplossen van problemen met styling.

Om styling te vinden in Google Chrome:

  • Klik op uw preview of live-pagina met de rechtermuisknop op het element dat u wilt onderzoeken en selecteer vervolgens Inspecteren.
  • In het deelvenster Elementen aan de linkerkant ziet u de HTML van de pagina. U kunt op de elementen klikken om hun stijl te bekijken, of u kunt het cursorsymbool linksboven in het deelvenster gebruiken om op de elementen op de pagina te klikken.

    inspect-live-page-cursor

  • In het deelvenster Stijlen aan de rechterkant ziet u alle stijlen die op dat element worden toegepast. U kunt de selectievakjes naast elke stijl selecteren en wissen 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 styling, die je vertelt waar de styling vandaan komt. Beweeg met de muis over de bronnaam om de volledige naam te zien:
    • Wanneer de styling uit een stylesheet komt, verschijnt de naam van de stylesheet naast de CSS-declaratie in de inspecteur. U kunt dan naar uw ontwerpmanager navigeren, de stylesheet vinden en indien nodig bewerkingen uitvoeren.

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

      inspect-css-module-name
    • Als de bronnaam User agent stylesheet is, maakt de CSS deel uit van de standaardstyling van de browser. U'.ll zie dit het vaakst voor algemene HTML tag styling zoals <p>, <h1>, <h2>, <span>, <div>, etc. Deze styling wordt toegepast wanneer de browser geen algemene stylingregels voor het element kan vinden, maar het kan worden overschreven 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 <stijl> tags op de pagina. De styling kan bijvoorbeeld worden ingesteld in de pagina of in de HTML-sjabloonkop.

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

      inspect-css-styles-tab
    • Als element.style naast de declaratie in de inspecteur verschijnt, is de CSS inline ingesteld. Inline styling is styling die direct wordt toegevoegd aan de HTML-broncode van een pagina, of de Inline styling velden van een template. De inline styling in de broncode wordt bijvoorbeeld weergegeven als <p stijl="achtergrond:paars;">Hello wereld</p>.

      inspect-css-element-style

Bekijk de helpdocumentatie van uw webbrowser voor meer informatie over hoe u een pagina kunt inspecteren:

Hulp krijgen bij ontwerpbewerkingen

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

  • Als u zich op uw gemak voelt bij het gebruik van de inspecteurshulpmiddelen om problemen met het ontwerp van uw sjabloon op te lossen:
  • Als u zich niet prettig voelt bij het lezen of bewerken van HTML en CSS in uw sjablonen: