De bron van de styling van een pagina begrijpen

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

Begrijp hoe styling wordt toegepast

CSS opmaak in HubSpot wordt toegepast in volgorde van waar het is ingesteld in HubSpot, zoals hieronder aangegeven. Bijvoorbeeld, styling ingesteld in een globaal stylesheet wordt overschreven door styling ingesteld 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 opmaak van de module binnen een require_css blok
2. Stylesheets toegevoegd aan een template via het require_css blok
3. HubSpot standaard stylesheets (bijvoorbeeld layout.css)
4. Stylesheets toegevoegd aan het sjabloon
   
   
   
   
5. Stylesheets toegevoegd op het instellingen tabblad van je pagina
   
   
   
   
6. Stylesheets toegevoegd in je instellingen voor alle domeinen
7. Stylesheets toegevoegd aan je instellingen voor een specifiek domein
8. CSS toegevoegd binnen <style> tags. Bijvoorbeeld in de head HTML van je website-instellingen, pagina-instellingen of sjabloon.
   
   
   
   
9. Stijlen toegevoegd via de pagina editor. HubSpot voegt ook !important tags toe aan deze stijlen. Meer informatie over !important tags en hoe ze styling beïnvloeden.

Styling vinden op een voorbeeldpagina of live pagina

Je kunt de ontwikkelaarstools in je browser gebruiken om de stijlen te onderzoeken die zijn toegepast op je live website of een voorbeeldpagina. Elke browser verschilt enigszins in het oplossen van stylingproblemen.

Zo zoekt u naar styling in Google Chrome:

• Klik op je voorbeeld- of livepagina met de rechtermuisknop op het element dat je wilt onderzoeken en selecteer vervolgens Inspecteren.
• In het deelvenster Elementen aan de linkerkant zie je 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.

  

• In het deelvenster Stijlen rechts zie je alle stijlen die op dat element zijn toegepast. Je kunt de selectievakjes naast elke stijl in- en uitschakelen om de stijl te verwijderen en toe te passen. Dit helpt om te bepalen welke stijlregel je moet wijzigen.
  
  
  
  
• Rechts van de CSS regels zie je de bronnaam voor die stijl, die je vertelt waar de stijl vandaan komt. Beweeg de muis over de bronnaam om de volledige naam te zien:
  • Wanneer 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 wijzigingen aanbrengen.
    
    
    
    
  • Als de bronnaam begint met module, dan komt de opmaak waarschijnlijk uit de CSS van een module. Beweeg de muis over de bronnaam om de volledige naam van de module te zien.
    
    
    
    
  • Als de bronnaam User agent stylesheet is, dan is de CSS onderdeel van de standaardstyling van de browser. Je ziet dit meestal bij algemene HTML-tagstyling zoals <p>, <h1>, <h2>, <span>, <div>, enz. Deze opmaak wordt toegepast wanneer de browser geen algemene opmaakregels voor het element kan vinden, maar het kan overschreven worden door je eigen opmaak aan dat element toe te voegen.
    
    
    
    
  • Als de bronnaam de URL van de pagina is, komt de CSS uit <style> tags op de pagina. De opmaak kan bijvoorbeeld worden ingesteld in de HTML-top van de pagina of het sjabloon.
    
    
    
    
  • 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 op het tabblad Styles van de pagina-editor. HubSpot voegt !important tags toe aan deze stijlen. Leer meer over !important tags en hoe ze styling beïnvloeden.
    
    
    
  • Als de bronnaam <style> is, wordt de styling waarschijnlijk automatisch toegevoegd aan het element. Vaak komt dit door de styling die is ingesteld in de editor van een insluitbaar HubSpot element, zoals een CTA of een vergaderingswidget.
    
    
    
    
  • Alselement.stylenaast de declaratie staat in de inspector, dan 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 sjabloon. Inline styling in de broncode zou er bijvoorbeeld uitzien als <p style="background:purple;">Hello world</p>.
    
    

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

• Chrome
• Firefox
• Microsoft Edge
• Safari

Hulp krijgen bij ontwerpbewerkingen

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

• Als u vertrouwd bent met het gebruik van de inspector gereedschappen om problemen met het ontwerp van uw sjabloon op te lossen:

• • Zoek en post op het CMS Development Forum op de Community voor tips, advies of het oplossen van problemen met uw code.
  • Raadpleeg de CMS referentiedocumentatie voor tutorials, gidsen en een overzicht van het CMS framework.
  • Maak contact met het HubSpot productteam en andere ontwikkelaars die in HubSpot werken op de CMS Developer Community Slack.

• Als je niet comfortabel bent met het lezen of bewerken van HTML en CSS in je templates:

• • Maak contact met een gecertificeerde HubSpot Partner met expertise op het gebied van websiteontwerp om je te helpen je sjablonen aan te passen.
  • Gebruik een themasjabloon om paginastijlen te bewerken zonder code te schrijven.
  • Als je een sjabloon gebruikt dat je hebt gekocht van de Asset Marketplace, neem dan contact op met de ontwerper van de sjabloon voor vragen over het ontwerp van je pagina.