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.

Begrijpen hoe styling wordt toegepast

CSS-styling in HubSpot wordt toegepast op 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 de CSS-sectie van een module.
   3. CSS binnen de HubL markup van de module binnen een require_css blok
2. Stylesheets toegevoegd aan een sjabloon 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 op een voorbeeldpagina. Elke browser verschilt enigszins in het oplossen van problemen met styling.

Styling vinden in Google Chrome:

• Klik op je voorvertoning of live pagina 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. Je kunt op de elementen klikken om hun stijlen te bekijken, of je 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 styling, die je vertelt waar de styling 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 gaan, het stylesheet zoeken 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. Meer informatie over !important tags en hoe deze de 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 widget voor een vergadering.
    
    
    
    
    
    
  • Als element.style verschijnt naast de declaratie 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;">Hallo world</p>.
    
    
    

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

• Chrome
• Firefox
• Microsoft Edge
• Safari

Krijg hulp bij ontwerpbewerkingen

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

• Als u de ontwerptools van de inspecteur goed kunt gebruiken 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 HubSpot's productteam en andere ontwikkelaars die in HubSpot werken op de CMS Developer Community Slack.

• Als u niet vertrouwd bent met het lezen of bewerken van HTML en CSS in uw sjablonen:

• • Maak contact met een gecertificeerde HubSpot Partner met expertise op het gebied van websiteontwerp om je te helpen 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 contactpersoon op met de ontwerper van de sjabloon voor vragen over het ontwerp van je pagina.