Waarom HTML en CSS Element inspecteren?

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

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 JavaScript 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 class of stijl aw-banner-top-text-intro heet. Deze stijl staat in het CSS van het WordPress thema. Lees handleidingen hieronder.

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 debugging tool, en het schrijft je wijzigingen niet terug naar de bestanden 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 custom CSS 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:

Meer handleidingen over html inspecteren

Meer handleidingen over inspecteren vind je hier: