Een rand rond een afbeelding in WordPress toevoegen - DeLaatbusiness

Een rand rond een afbeelding in WordPress toevoegen

4 min


108
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

Wil je een rand rond je afbeeldingen toevoegen in WordPress? Onlangs heeft een van onze gebruikers ons gevraagd om een ​​eenvoudige manier om rand rond een afbeelding toe te voegen in WordPress.

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.

WordPress Image Borders

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 . Na activering moet je naar Instellingen »WP Image Borders gaan om de plugin-instellingen te configureren.

Instellingenpagina voor plug-in WP Image Borders

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 naast ‘Randen toevoegen aan alle afbeeldingen in blogposts’ in te schakelen.

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, vervaging en spreidingsradius invoeren, evenals de vakschaduwkleur. 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 ‘Randen toevoegen aan alle afbeeldingen in blogposts’hebt geselecteerd , hoeft u niets anders te doen.

Je zou beeldranden moeten zien op al je 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 toevoegen aan een afbeelding in WordPress

Als u alleen randen rondom 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.

Een afbeelding bewerken in WordPress

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

Tip: dit is .border-imageomdat we dat hebben geselecteerd in onze plugin-instellingen.

CSS-klasse toevoegen aan een afbeelding in WordPress

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 u dit kunt doen en we zullen u 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:

1
<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" />

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

1
<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeeeee; padding:3px; margin:3px;" />

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 wilt toevoegen aan alle afbeeldingen in uw WordPress-blogposts en -pagina’s, 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
img.alignright {
float:right;
margin:0 0 1em 1em;
border:3px solid #EEEEEE;
}
img.alignleft {
float:left;
margin:0 1em 1em 0;
border:3px solid #EEEEEE;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: 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.

1
2
3
4
5
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.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *