Hoe werkt een afbeelding toevoegen in WordPress
Het toevoegen van afbeeldingen aan je WordPress website kan je website visueel aantrekkelijker maken. Volg deze eenvoudige stappen om een afbeelding toe te voegen aan een pagina of blogbericht. Heb je hulp nodig bij het plaatsen of wijzigen van tekst in de klassieke editor, een specifiek thema of op een website met die een pagebuilder zoals Elementor, WP bakery page builder of Beaver builder gebruikt? Neem dan contact op voor support
→ Het lukt mij niet, ik wil graag iemand sprekenHoe werkt een afbeelding toevoegen in WordPress
Om de handleiding “Hoe werkt een afbeelding toevoegen in WordPress” te volgen moet je ingelogd zijn.
Lees hier hoe je kan inloggenEenmaal ingelogd zie je in je dashboard, meestal aan de linkerkant, ‘Berichten’ en ‘Pagina’s’ [Eng: Pages] staan.
- Ga naar ‘Pagina’s’ [Eng: Pages]of ‘Berichten’ [Eng: Posts], afhankelijk van waar je de afbeelding wilt toevoegen.
- Zoek de pagina of het bericht waaraan je een afbeelding wilt toevoegen en klik op ‘Bewerken’ [Eng: Edit].
- Ga met je muis naar de plaats waar je de afbeelding wilt toevoegen en klik op het plusje om het afbeelding blok toe te voegen.
- Je ziet nu 3 opties. Uploaden, mediabibliotheek en invoegen via URL.
- Uploaden: je kiest een afbeelding van je eigen computer of telefoon.
- Mediabibliotheek: je kiest uit al eerder geüploade afbeeldingen
- Invoegen via URL: je voegt een link naar een afbeelding op een andere website toe.
- Vergeet na het toevoegen je wijzigingen niet op te slaan via de Update knop rechts boven in de pagina. Voila! je bent klaar!
WordPress standaard – Instellingen optiebalk
Je afbeelding toevoegen in WordPress is gelukt, maar je bent nog niet tevreden met hoe deze er uit ziet.
Laten we kijken wat we kunnen instellen. Klik op de afbeelding die je zojuist hebt toegevoegd. Update de pagina regelmatig om je wijzigingen op te slaan
Er verschijnt een balk met opties.
van links naar rechts:
- Het icoontje die je vertelt dat het een afbeelding is
- Zes stipjes, hiermee kun je de afbeelding naar een andere plaats slepen. klik met je muis op de 6 stipjes > hou vast en sleep naar de gewenste plaats> laat los.
- Pijltjes: afbeelding één element omhoog of omlaag.
- Vierkantje met + teken(optioneel, afhankelijk van je instellingen) plaatst je afbeelding in een container.
- Piramide (optioneel, afhankelijk van je instellingen) hier kun je een kleurlaag over je afbeelding aanbregen.
- Gestreept vierkantje: Uitlijning van je afbeelding. standaard staat deze op geen.
- Vierkantje met 3 puntjes: je kunt een onderschrift toevoegen die je afbeelding beschrijft, zoals hieronder. Of geef de fotograaf hier credits.
- Met het ovaaltje met een streepje erin (linktekentje) voeg je een link toe aan je afbeelding. Bijvoorbeeld naar een bijbehorende pagina.
- Klik je op het bijsnij teken dan krijg je een aantal nieuwe opties.
- Zoomen
- Bijsnijden
- Roteren
- Het vierkantje met de letter A laat je een blok of tekst over je afbeelding heen zetten.
- Via vervangen kun je de afbeelding wijzigen. Eventuele instellingen die je al hebt opgeslagen worden behouden.
- Onder de 3 verticale puntjes staan nog een aantal extra opties. De meest gebruikte daarvan zijn kopiëren, dupliceren en verwijderen. Probeer ze eens uit.
WordPress standaard – Instellingen Blokopties
Behalve de opties in de optiebalk heb je misschien ook al gezien dat aan de rechterkant van je scherm ook opties verschijnen.
In dit blok heb je de kans om je afbeelding responsive te maken. Dat wil zeggen dat je hier controleert hoe je afbeelding er uit ziet op mobiel en tablet.
- Bij Stijlen bepaal je of je afbeelding ronde hoeken krijgt.
- Bij Alternatieve tekst vul je in waar je afbeelding over gaat. Dit is belangrijk voor je vindbaarheid.
- Beeldverhouding geeft je de mogelijkheid om de lengte x breedte verhouding aan te passen volgens een standaard verhouding
- Breedte en hoogte: hier kan je de afbeelding aanpassen volgens een door jou bepaalde breedte en hoogte. Om de afbeelding niet te squeezen of uit te rekken kies je bij één waarde een exact getal en zet je de andere op automatisch.
- Bij resolutie bepaal je de grootte van je afbeeldingsbestand.
GenerateBlocks – Instellingen optiebalk
Met de plugin Generateblocks heb je nog een aantal extra opties bij het afbeelding toevoegen in WordPress. Om hier gebruik van te maken dien je de plug-in GenerateBlocks te installeren. Naast het standaard afbeeldingtekentje (zwart) is er nu een tweede, een blauwe. Wanneer je een afbeelding invoegt via GenerateBlocks afbeelding ziet je optiebalk er zo uit:
Zoals je ziet zijn de opties hier meer beperkt. De meeste opties staan onder block opties. in de volgende sectie. twee icoontjes hebben een ander uiterlijk. uitlijnen van de afbeelding gaat via het teken met 3 streepjes en een bijschrift toevoegen doe je via CC.
GenerateBlocks – Instellingen Blok opties
De blockopties van GenerateBlocks zijn afhankelijk van de instellingen die je websitebouwer heeft gemaakt. Meestal zijn de volgende aanwezig.
- Blok instellingen
- Grootte: bepaal de grootte van je afbeeldingsbestand.
- Breedte / Hoogte: bepaal de afmetingen van je afbeelding
- Object passend: bepaal hoe je afbeelding de afmeting die je hebt opgegeven vult.
- Alt-tekst: beschrijf je afbeelding kort maar krachtig, belangrijk voor SEO
- Title attribute: in principe de titel van je bestand. Sla je afbeelding dan ook altijd op via een naam die mensen kunnen lezen. En niet een of andere reeks cijfers en letters.
- Tussenruimte
- Padding: bepaal de ruimte die een bestand krijgt binnen de gegeven afmetingen.
- Margin: bepaal de ruimte die een bestand krijgt om de opgegeven afbeelding heen
- Randen
- Rand: bepaal per kant (boven,onder,links en rechts) of de afbeelding een rand krijgt, hoe dik deze is en welke kleur
- Rand-radius: bepaal per hoek wat de radius van de de rand is.
- Dynamische gegevens. Als je je afbeelding niet handmatig wil invoeren maar automatisch vanaf een andere locatie wilt laden (bijvoorbeeld de uitgelichte afbeelding) dan regel je dat hier.
- Documentatie: informatie over dit block van de plug-in maker. (in het engels)
- Geavanceerd: hier kun je een CSS klas toevoegen zodat je de afbeelding kan stylen met code. (voor gevorderden)
Hopelijk heeft de handleiding “Hoe werkt een afbeelding toevoegen in WordPress” je geholpen om je afbeelding te plaatsen, aan te passen of te vervangen. Kom je er niet uit of heb je andere wensen? Neem contact op met Bijdrager.
