CSS Element inspecteren WordPress aanpassen browser

Met Inspect Element is het mogelijk om je WordPress website en CSS van je WordPress thema aan te passen met een tool in je browser.

Logo cursus traing wordpress

CSS Element inspecteren WordPress aanpassen browser

Waarom HTML en CSS Element inspecteren?

Met CSS Element kun je de code zien die voor de vormgeving van een onderdeel je site is gebruikt. Bijvoorbeeld de van een of de kleur en grootte van een .

Dit is handig of soms noodzakelijk in de volgende gevallen:

  • Je wilt even tijdelijk zien hoe iets er anders uit kan komen te zien.
  • Je wilt iets aanpassen wat je niet in de settings van je thema kan aanpassen. Normaal gesproken moet je dit in de customizer doen, alleen kan dit niet altijd met elk thema. Dus check eerst je customizer als je hiermee begint, en lees dan verder.

Wat is Inspect Element (Developer Tools in Google Chrome)?

Heb je ooit een webpagina tijdelijk willen bewerken om te zien hoe die eruit zou zien met specifieke kleuren, lettertypes, styling, enz.  Dit is een droom die uitkomt voor alle WordPress web-designers als ze er achter komen. In deze handleiding zal ik de basis van inspect element laten zien en hoe je het kunt gebruiken met je WordPress site.

Moderne webbrowsers zoals Google Chrome, Safari en Mozilla Firefox hebben ingebouwde hulpmiddelen waarmee webontwikkelaars fouten kunnen opsporen. Deze tools tonen de HTML, CSS, en code voor een pagina en hoe de browser de code uitvoert. Enkele toepassingen

  • Met Inspect Element kunt u HTML-, CSS- of JavaSCript-code bewerken voor elke webpagina en uw wijzigingen live zien (alleen op uw computer).
  • Voor een doe-het-zelf website-eigenaar kunnen deze tools je helpen een voorbeeld te zien van hoe een site-ontwerp eruit zou zien zonder de wijzigingen daadwerkelijk voor iedereen te maken.
  • Voor schrijvers zijn deze tools geweldig omdat je gemakkelijk persoonlijke identificerende informatie kunt veranderen bij het nemen van je screenshots, waardoor je items helemaal niet meer hoeft te vervagen.
  • Voor supportmedewerkers is het een geweldige manier om de fout te identificeren die er de oorzaak van kan zijn dat je galerijen niet laden of dat je sliders niet goed werken.

Inspect element is echt handig en onmisbaar als je meer wilt met je website. In dit artikel zullen we ons richten op Inspect Element in Google Chrome, omdat dat de browser van onze keuze is. Firefox heeft zijn eigen ontwikkelaarstools die ook kunnen worden opgeroepen door inspect element te selecteren in het browsermenu.


Openen van Inspect Element en vinden van CSS code

U kunt de inspect element tool starten door CTRL + Shift + I toetsen op uw toetsenbord in te drukken. U kunt ook ergens op een webpagina klikken en inspect element selecteren in het browsermenu. Dit is in de meeste browsers hetzelfde.

Uw browservenster zal in tweeën worden gesplitst, en het onderste venster zal de broncode van de webpagina tonen.

Het venster van het ontwikkelgereedschap is verder verdeeld in twee vensters. Aan de linkerkant ziet u de HTML-code voor de pagina. In het rechtervenster ziet u de CSS-regels.

Als u met uw muis over de HTML-bron beweegt, ziet u het betrokken gebied op de webpagina gemarkeerd. U zult ook CSS regels zien veranderen om de CSS te tonen voor het element dat u bekijkt.

U kunt ook met de muisaanwijzer naar een element op de webpagina gaan, rechts klikken en inspecteer element selecteren. Het element dat je aanwijst wordt dan gemarkeerd in de broncode.

Voorbeeld Inspecteren HTML en CSS

In dit voorbeeld van inspecteren zie je dat de witte tekst de of stijl aw-banner-top-text-intro heet. Deze stijl staat in het CSS van het . Lees handleidingen hieronder.

html css code testen inspecteren in webbrowser
html en css code inspecteren in webbrowser

Werken en debuggen van code in inspect element

Zowel de HTML als de CSS in het inspect element venster zijn bewerkbaar. U kunt overal in de HTML broncode dubbelklikken en de code bewerken zoals u wilt.

U kunt ook dubbelklikken en alle attributen en stijlen in het CSS deelvenster bewerken. Om een aangepaste stijlregel toe te voegen klik op het + icoon bovenaan het CSS paneel.

Als je wijzigingen aanbrengt in de CSS of HTML zullen deze wijzigingen direct worden weergegeven in de browser.

Merk op, dat alle wijzigingen die je hier maakt nergens worden opgeslagen. Inspect element is een tool, en het schrijft je wijzigingen niet terug naar de op je server. Dit betekent dat als je de pagina vernieuwt, al je wijzigingen verdwenen zullen zijn.

Om de wijzigingen daadwerkelijk door te voeren, zult u de stylesheet of het relevante sjabloon van uw WordPress thema moeten bewerken om de wijzigingen toe te voegen die u wilt opslaan.

Voordat u begint met het bewerken van uw bestaande WordPress thema met behulp van Inspect Element tool, zorg ervoor dat u al uw wijzigingen opslaat door het maken van een child theme. Je kan het ook inplakken in de van je WordPress thema.

Wat kun je met CSS?

Met CSS kun je de vormgeving en ontwerp van meerdere webpagina bepalen en kun je effecten bereikenZo kun je bijvoorbeeld bepalen dat alle ‘h3 kopteksten' de kleur groen of rood moeten zijn met een bepaald lettertype. Het is dus veel flexibeler dan HTML wat de vormgeving betreft. Lees meer over CSS voor beginners:

Beste bronnen webdesign webdesigners website html

Bronnen voor webdesign Er zijn veel bronnen voor webdesign beschikbaar voor elk webproject. Hoewel het altijd het beste is om je eigen code te schrijven en zo origineel mogelijk te zijn, zijn er…

Lees meer

Aangepaste CSS toevoegen zonder child theme plugin

Soms kan het voorkomen dat u Custom CSS moet toevoegen aan uw WordPress site. Lees hoe je dit doet op verschillende manieren. Aangepaste CSS toevoegen met Thema Aanpasser (Customizer) In deze handleiding laat…

Lees meer

Meer handleidingen over html inspecteren

Meer handleidingen over inspecteren vind je hier:


Wil je meer details over CSS Element inspecteren WordPress aanpassen browserof info?

Wil je meer weten? Veel bezoekers met interesse in CSS Element inspecteren WordPress aanpassen browser bekeken ook de onderstaande handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress site beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over CSS Element inspecteren WordPress aanpassen browser?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, CSS Element inspecteren WordPress aanpassen browser en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven