Een rand rond een afbeelding in WordPress toevoegen

Wil je een rand rond je afbeeldingen toevoegen in WordPress? Onlangs heeft een van onze gebruikers ons gevraagd om een ​​eenvoudige manier om een ​​rand rond een afbeelding in WordPress toe te voegen. Hoewel je CSS kunt gebruiken, is het verwarrend voor beginners. In dit artikel laten we u een eenvoudige manier zien om randafbeeldingen toe te voegen in WordPress zonder HTML- of CSS-code te bewerken.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Methode 1: Een plug-in gebruiken om randen toe te voegen in WordPress

Deze methode is bedoeld voor beginners die geen HTML of CSS willen bewerken. Het eerste wat u hoeft te doen is de WP Image Borders-plug-in installeren en activeren. Bij activering moet je bezoeken Instellingen »WP Image Borders om de plug-in-instellingen te configureren.

In het eerste gedeelte van de plugin-instellingen kunt u afbeeldingen targeten. U kunt randen toevoegen aan alle afbeeldingen in uw WordPress-berichten door het vakje ernaast aan te vinken 'Voeg randen toe aan alle afbeeldingen in blogposts' keuze.

Als alternatief kunt u specifieke CSS-klassen targeten op randen. We laten u zien hoe u later in dit artikel een CSS-klasse aan een specifieke afbeelding kunt toevoegen. Op dit moment kun je alles in de CSS-klasse plaatsen .border-image.

In het tweede gedeelte van de plugin-instellingen kunt u randinstellingen aanpassen. U kunt een randstijl, -breedte, -radius en -kleur kiezen.

In het laatste gedeelte van de instellingenpagina kunt u slagschaduwen aan uw afbeeldingen toevoegen. U kunt een horizontale en verticale afstand invoeren, de straal vervagen en spreiden, evenals de schaduwkleur van de doos. Als u geen schaduwen aan uw afbeeldingen wilt toevoegen, kunt u deze velden gewoon leeg laten.

Vergeet niet op de knop Wijzigingen opslaan te klikken om uw plugin-instellingen op te slaan.

Als u de eerste optie hebt geselecteerd 'Voeg randen toe aan alle afbeeldingen in blogposts', dan hoeft u niets anders te doen.

U zou beeldranden moeten zien op al uw blogpostafbeeldingen.

Als u echter de tweede optie hebt geselecteerd om alleen de rand voor specifieke afbeeldingen weer te geven, moet u de volgende stap volgen.

CSS-klasse aan een afbeelding toevoegen in WordPress

Als u alleen randen rond geselecteerde afbeeldingen wilt toevoegen, moet u WordPress vertellen welke afbeeldingen randen moeten hebben. U kunt dit doen door een CSS-klasse toe te voegen aan afbeeldingen die randen nodig hebben.

Upload eenvoudig uw afbeelding en voeg deze toe aan uw bericht. Nadat u de afbeelding hebt toegevoegd, klikt u erop in de visuele editor en klikt u vervolgens op de knop Bewerken in de werkbalk.

Hierdoor verschijnt een popup voor het bewerken van afbeeldingen met uw afbeeldingsdetails. U moet op de geavanceerde opties klikken om deze uit te vouwen en vervolgens de CSS-klasse van uw afbeelding invoeren.

Hint: dit is .border-image omdat we dat hebben geselecteerd in onze plugin-instellingen.

Klik vervolgens op de updateknop om de beeldinstellingen op te slaan en bij te werken. Dat is alles, uw afbeelding krijgt nu een extra klasse. Omdat u de plug-in WP Image Borders gebruikt, verschijnt er een rand in deze afbeelding.

Methode 2: HTML & CSS gebruiken om beeldranden toe te voegen in WordPress

Het toevoegen van afbeeldingsranden met CSS / HTML is een snellere en snellere manier om randen rond uw afbeeldingen in WordPress te krijgen. Er zijn veel manieren waarop je dit kunt doen en we zullen je ze allemaal laten zien. U kunt kiezen wat het beste voor u werkt.

Randen toevoegen met Inline-stijlen in WordPress

Nadat u uw afbeelding hebt geüpload en ingevoegd in een WordPress-bericht, schakelt u over naar de teksteditor. U ziet de HTML-code voor uw afbeelding. Het ziet er ongeveer zo uit:

U kunt eenvoudig CSS-stijl toevoegen in de HTML-code als volgt:

U kunt de randbreedte, kleur, opvulling en marge aanpassen aan uw eigen behoeften.

Afbeeldingsrand toevoegen in uw WordPress-thema of kindthema

Als u permanent randen aan alle afbeeldingen in uw WordPress-blogposts en -pagina's wilt toevoegen, kunt u CSS rechtstreeks in uw WordPress-thema of kindthema toevoegen.

Bij de meeste WordPress-thema's zijn deze stijlregels al gedefinieerd in de stylesheet van het thema, meestal style.css. U kunt de bestaande CSS wijzigen of u kunt uw eigen CSS toevoegen aan een kindthema.

WordPress voegt standaard afbeeldingsklassen toe aan alle afbeeldingen. Om ervoor te zorgen dat afbeeldingen in uw berichten / pagina's een afbeeldingrand hebben, moet u al deze klassen targeten. Hier is een eenvoudig CSS-fragment om aan de slag te gaan:

 img.alignright float: right; marge: 0 0 1em 1em; border: 3px solid #EEEEEE;  img.alignleft float: left; marge: 0 1em 1em 0; border: 3px solid #EEEEEE;  img.aligncenter display: block; marge links: auto; marge-rechts: auto; border: 3px solid #EEEEEE;  img.alignnone border: 3px solid #EEE;  

Als u alleen afbeeldingsranden wilt gebruiken wanneer u ze nodig hebt, kunt u CSS-klasse aan uw afbeeldingen toevoegen (zie hierboven). Voeg stijlregels toe voor deze CSS-klasse in uw thema of kindthema.

 img.border-image border: 3px solid #eee; padding: 3px; margin: 3px;  

We hopen dat dit artikel u heeft geholpen bij het toevoegen van afbeeldingsgrenzen rond uw WordPress-blogafbeeldingen. U kunt ook onze gids raadplegen over het opslaan van afbeeldingen die zijn geoptimaliseerd voor internet om uw WordPress-site te versnellen.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.