De bron van de styling van een pagina begrijpen

Er zijn meerdere plaatsen waar contentstyling kan worden toegevoegd in HubSpot, en deze wordt toegepast in een specifieke volgorde op basis van waar deze is toegevoegd. In dit artikel leert u hoe styling wordt toegepast, hoe u styling op een live pagina kunt vinden en hoe u hulp kunt krijgen bij ontwerpbewerkingen.

Begrijp hoe stijlen worden toegepast

Stijlen worden in een specifieke volgorde toegepast op basis van waar ze in HubSpot worden toegevoegd. Stijlen die bijvoorbeeld in een algemeen stylesheet worden toegevoegd, worden overschreven door stijlen die op een specifieke pagina worden toegevoegd. 

Gebruik deze lijst om de bron van de styling van een pagina te begrijpen, beginnend met de stijlen die als eerste worden toegepast en eindigend met de stijlen die als laatste worden toegepast.

1. Aangepaste module-CSS
   • Stylesheets die aan een module in de lay-outeditor zijn gekoppeld.

• • CSS toegevoegd aan het gedeeltemodule.css van een module in de module-editor.

1. • CSS binnen de HubL-markup van de module in een require_css-blok.
2. Stylesheets die aan een sjabloon zijn toegevoegd via het require_css-blok in de code-editor.
3. Stijlbladen die standaard door HubSpot worden gebruikt (bijv. layout.css) in de ontwerpmanager.
4. Stylesheets die aan de sjabloon zijn toegevoegd in de lay-outeditor.

5. Stylesheets die zijn toegevoegd op het tabblad Instellingen van uw pagina.

6. Stylesheets die zijn toegevoegd in uw instellingen voor alle domeinen
7. Stylesheets die zijn toegevoegd in uw instellingen voor een specifiek domein
8. CSS toegevoegd binnen <style>-tags. Bijvoorbeeld de head-HTML van uw website-instellingen, pagina-instellingen of sjabloon.

9. Stijlen toegevoegd via de pagina-editor. HubSpot voegt ook !important-tags toe aan deze stijlen. Lees meer over !important-tags en hoe deze van invloed zijn op de stijl.

Zoek styling op een voorbeeldpagina of live pagina

Gebruik de ontwikkelaarstools in je browser om de stijlen te vinden die zijn toegepast op je live website of een voorbeeldpagina. Elke browser verschilt enigszins in de manier waarop stijlen worden opgelost. In het volgende voorbeeld wordt Google Chrome gebruikt.

1. Navigeer naar uw inhoud:
   • Ga in je HubSpot-account naar Inhoud > Websitepagina's.
   • Ga in je HubSpot-account naar Inhoud > Landingspagina's.
2. Klik op de naam van uw pagina.
3. Klik in de inhoudseditor rechtsboven op Voorbeeld.
4. Klik op de voorbeeldpagina op Openen in een nieuw tabblad.
5. Klik in het voorbeeld met de rechtermuisknop op het element dat u wilt bekijken en selecteer vervolgensInspecteren.
6. In het deelvensterElementen ziet u de HTML van de pagina. Klik op de elementen om hun stijlen te bekijken.
7. Bekijk in het deelvenster Stijlen de CSS-regels die op dat element zijn toegepast. Schakel de selectievakjes naast elke stijl in of uit om stijlen tijdelijk te verwijderen of toe te voegen. Zo kunt u vaststellen welke regel van invloed is op het element.

8. Rechts van de CSS-regels ziet u de bronnaam voor die stijl. Dit bevestigt waar de bron van de stijl zich bevindt. Beweeg de muisaanwijzer over de bronnaam om de volledige naam te bekijken:
   • Als de stijl afkomstig is uit een CSS-bestand, wordt de naam van het stylesheet naast de CSS-verklaring weergegeven. Ga naar de ontwerpmanager, zoek het stylesheet en breng de gewenste wijzigingen aan.

• • Als de bronnaam begint met module, dan is de styling afkomstig uit de CSS van een module. Beweeg de muis over de bronnaam om de volledige naam van de module te bekijken.

• • Als de bronnaam User agent stylesheet is , maakt de opmaak deel uit van de standaardopmaak van de browser.
    • Over het algemeen zie je dit bij HTML-tagstyling (bijv. <p>, <h1>, <span> enz.), wanneer de browser geen stylingregels voor het element kan vinden. 
    • User agent stylesheet kan worden overschreven door uw eigen stijlen aan dat element toe te voegen.

• • Als de bronnaam de URL van de pagina is, is de opmaak afkomstig van <style> -tags op de pagina. De opmaak kan bijvoorbeeld worden ingesteld in de HTML-koptekst van de pagina of sjabloon.

• • Als de bronnaam de URL van de pagina is en de stijl is gericht op #hs_cos_wrapper_module_number, wordt de stijl toegevoegd in het tabblad Stijlen van de pagina-editor. HubSpot voegt !important tags toe aan deze stijlen. Lees meer over !important-tags en hoe deze de stijl beïnvloeden.

• • Als de bronnaam <style> is, wordt de opmaak automatisch bij het element opgenomen. Dit komt vaak doordat de opmaak in de editor van een insluitbaar HubSpot-middel, zoals een CTA of vergaderwidget, is opgemaakt.

• • Als element.style naast de declaratie in de inspector verschijnt, is de CSS inline ingesteld. Inline styling is styling die rechtstreeks aan de HTML-broncode van een pagina of aan de Inline styling-velden van een sjabloon wordt toegevoegd. Inline styling in broncode zou er bijvoorbeeld als volgt uitzien <p style="background:purple;">Hallo wereld</p>.

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

• Chrome
• Firefox
• Microsoft Edge
• Safari

Hulp bij ontwerpwijzigingen

De beste bron voor het aanbrengen van wijzigingen in uw HubSpot-sjablonen of stylesheets is de oorspronkelijke sjabloonontwerper. Er zijn echter verschillende bronnen beschikbaar voor extra hulp bij het opmaken van inhoud, afhankelijk van uw ervaring met het oplossen van problemen met HTML en CSS.

• Als u vertrouwd bent met het gebruik van de inspectietools om ontwerpproblemen in uw sjabloon op te lossen:

• • Zoek en plaats berichten op het CMS Development Forum in de Community voor tips, advies of het oplossen van problemen met uw code.
  • Raadpleeg de CMS-referentiedocumentatie voor tutorials, handleidingen en een overzicht van het CMS-framework.
  • Neem contact op met het productteam van HubSpot en andere ontwikkelaars die bij HubSpot werken via de CMS Developer Community Slack.

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

• • Neem contact op met een gecertificeerde HubSpot-partner met expertise op het gebied van websiteontwerp om je te helpen bij het aanpassen van je sjablonen.
  • Gebruik een themasjabloon om paginastijlen te bewerken zonder code te schrijven.
  • Als je een sjabloon gebruikt dat je hebt gekocht in de Asset Marketplace,neem dan contact op met de ontwerper van de sjabloonvoor vragen over het ontwerp van je pagina.