Inspect element: wat is het, en wat kun je er mee?
Gebruik jij inspect element?
Soms kom je op een prachtig blog en denk je bij jezelf: welk theme zouden ze hebben gebruikt? Het is heel eenvoudig om daar achter te komen.
Ik schreef daar ooit deze post over!
Maar het kan ook zijn dat je denkt:
‘Oh, wat een mooi font! Wil ik! Wil ik!’
Of je wilt iets veranderen op je eigen blog, maar je vraagt je af waar het eigenlijk zit in de html code.
Dan kun je gebruikmaken van Inspect element.
Inspect element: wat is dat?
Inspect element is een handig gereedschap dat je een kijkje achter de schermen van een blog geeft. Je kunt het vergelijken met onder de motorkap van een auto kijken!
Inspect element laat je de onderliggende code van een blog of website zien. Dat is een mix van HTML, CSS en Javascript.
Ook kun je met inspect element dingen veranderen zonder dat dit consequenties heeft voor je blog. Je kunt bijvoorbeeld kijken wat een andere kleur voor effect heeft op je blog zonder dat je blog meteen ook die kleur heeft. Of stel, je wilt iets veranderen aan je blog, maar je weet niet goed hoe het element dat je wilt veranderen heet. Met behulp van inspect element kun je dat opzoeken. En dan weet je waar je moet zijn om het te veranderen.
Inspect element in de praktijk
Laten we als voorbeeld Inspect element gebruiken om te zien wat iemand als font gebruikt. Want stel je komt op een blog en je denkt: ‘Wauw, wat een leuk lettertype is dat zeg! Dat wil ik ook wel op mijn blog.’ Met Inspect element kun je achterhalen wat voor font dat is.
Inspect element: welk font is dat?
Stel je komt op mijn blog Ren mama, ren en je denkt bij jezelf: ‘Wat een leuk lettertype voor de titels van de posts. Ik kan geen moment langer leven zonder te weten welk lettertype dat is!’
Ik ga er even vanuit dat je Google Chrome gebruikt als browser
1. Klik met de rechtermuisknop op het element waar je informatie over wilt. In dit geval de titel van de post: ‘Hardloper Ivanka Meulman’. Nu opent een klein venstertje. (Zie hieronder) Onderaan kies je ‘Inspect Element’
2. Vervolgens opent zich een venster met informatie. Aan de rechterkant van het scherm zie je de styles van je tekst die je wilde. Bij Font zie je nu dat het font voor de titels van de posts Parisienne is!
Inspect element gebruiken om H-tags te checken in Blogger
Eén van de bekende nadelen van de standaard templates voor Blogger blogs is dat de titels van je blog posts een h3 tag krijgen. En het is beter als ze een h2 tag hebben.
Laten we het blog Fashion Mind eens checken! Je gaat met de muis op de titel van de blogpost staan, en klikt met de rechtermuisknop. Vervolgens kies je Inspect Element. En dan zie je dat dit inderdaad een typisch Blogger blog is met h3 tags voor de post titels:
Je kunt Inspect element dus ook goed gebruiken om te checken of een Blogger template wel optimaal is!
Samenvattend: Inspect element
Inspect element is een handige methode om te zien hoe een blog is opgebouwd. Zelfs als je weinig kaas hebt gegeten van CSS en HTML kan Inspect element handig zijn. Je gebruikt Inspect element simpelweg door naar het blog of website te gaan dat je wilt bekijken en op je rechtermuisknop te klikken.
Je kunt Inspect element gebruiken om:
- Te kijken hoe een element op je blog dat je wilt veranderen heet.
- Iets te veranderen op je blog zonder dat het definitief is. Dus gewoon om eens te kijken hoe het staat.
- Een template of theme te beoordelen. Hebben de post titels bijvoorbeeld wel H2 tags?
- Te kijken bij blogs van anderen om te zien hoe zij hun blog hebben opgezet.
Let op!
Het is belangrijk om te onthouden dat inspect element alleen veranderingen aanbrengt in de weergave van de website op jouw eigen apparaat en niet daadwerkelijk de code op de server wijzigt. Als je permanente wijzigingen wilt aanbrengen, moet je de code aanpassen in het content management systeem (CMS) van je website.
Leestip
Wat vind jij van Inspect Element?
Met behulp van deze functie heb ik de kleuren van mijn lay-out aangepast. Je kunt precies vinden waar een onderdeel zit en dit later in je CSS aanpassen. Het is zelfs mogelijk om een preview te krijgen in je browser zonder dat je het meteen in het echt aanpast.
wat handig is dit zeg, ik wist helemaal niet dat dit mogenlijk is! bedankt voor de heldere uitleg ;)
Graag gedaan Juli. Fijn dat je er wat aan had!
Handig, deze tip! Ik heb geprobeerd om van de e-mailwidget van blogger de tekst te vinden via Inspect. Ik heb het wel gevonden, maar hoe pas ik het vervolgens echt in html aan? Ik kan met ctrl-f dezelfde termen niet vinden. Heb je tips voor mij?
Wat wil je precies aanpassen Mireille?
Ola Nicole, wat leuk dat jij hier over schrijft. Het is idd een handige manier om blogs te analyseren. Ik heb wel een vraagje, mss kun je mij helpen.
Ik ben al een tijdje aan het zoeken welke manier er is of welke widget er is om boven een soort frame, slider carrousel te installeren op mijn blog. Ik heb gekeken bij bloggers die dat hebben met deze manier (element inspecteer) maar ik kom er niet uit. Mss kun jij het mij vertellen. Hier is een link van een site die dat heeft.
https://www.funkyjunkinteriors.net/
Als je een beetje scrolt, komt het bovenaan tevoorschijn. Alvast bedankt ☻
Hai Elsa, ik heb gekeken en dat is met de Meteor Slides plugin gedaan.
Hoi Nicole, heel erg bedankt. Jij bent super! Ik ga kijken of ik het kan installeren ☻