Slik legger du til en kant rundt et bilde i WordPress

Vil du legge til en ramme rundt bildene dine i WordPress? Nylig spurte en av brukerne oss om en enkel måte å legge til kantlinje rundt et bilde i WordPress. Mens du kan bruke CSS, er det forvirrende for nybegynnere. I denne artikkelen vil vi vise deg en enkel måte å legge til bildegrense i WordPress uten å redigere noen HTML- eller CSS-kode.

Videoopplæring

Hvis du ikke liker videoen eller trenger mer instruksjoner, fortsett å lese.

Metode 1: Bruk et plugin for å legge til bildekant i WordPress

Denne metoden er for nybegynnere som ikke ønsker å redigere noen HTML eller CSS. Første du må gjøre er å installere og aktivere WP Image Borders-plugin. Ved aktivering må du besøke Innstillinger »WP Image Borders å konfigurere plugininnstillingene.

Den første delen i plugin-innstillingene lar deg målrette bilder. Du kan legge til grenser til alle bilder i WordPress-innleggene dine ved å merke av i boksen ved siden av Legg til grenser til alle bilder i blogginnlegg alternativ.

Alternativt kan du målrette mot bestemte CSS-klasser for å få grenser. Vi vil vise deg hvordan du legger til en CSS-klasse i et bestemt bilde senere i denne artikkelen. Akkurat nå kan du sette noe inn i CSS-klassen som .border-image.

Den andre delen i plugin-innstillingene lar deg tilpasse grenseinnstillinger. Du kan velge en kantlinje, bredde, radius og farge.

Den siste delen på innstillingssiden lar deg legge til dråpeskygger i bildene dine. Du kan angi en horisontal og vertikal avstand, uklarhet og spredningsradius, samt bokseskyggefarge. Hvis du ikke vil legge til dråpeskygger i bildene dine, kan du bare la disse feltene være tomme.

Ikke glem å klikke på Lagre endringer-knappen for å lagre plugininnstillingene dine.

Hvis du valgte det første alternativet Legg til grenser til alle bilder i blogginnlegg, da trenger du ikke å gjøre noe annet.

Du bør se bildegrensene på alle blogginnleggene dine.

Men hvis du valgte det andre alternativet for å bare vise grensen for bestemte bilder, må du følge det neste trinnet.

Legge til CSS klasse til et bilde i WordPress

Hvis du bare vil legge til grenser rundt utvalgte bilder, må du fortelle WordPress hvilke bilder som skal ha grenser. Du kan gjøre dette ved å legge til en CSS-klasse for bilder som trenger grenser.

Bare last opp bildet og legg det til innlegget ditt. Når du har lagt til bildet, klikker du på det i visuelt redigeringsprogram og klikker deretter på redigeringsknappen i verktøylinjen.

Dette vil gi opp bildebehandlings-popup som viser bildedetaljer. Du må klikke på de avanserte alternativene for å utvide den, og deretter skrive inn bildens css-klasse.

Tips: dette er .border-image fordi vi valgte det i våre plugininnstillinger.

Deretter klikker du på oppdateringsknappen for å lagre og oppdatere bildeinnstillinger. Det er alt, bildet ditt vil nå ha en ekstra klasse. Siden du bruker WP Image Borders-plugin, vises en ramme på dette bildet.

Metode 2: Bruke HTML og CSS til å legge til bildegrenser i WordPress

Legge til bilder grenser ved hjelp av CSS / HTML er en raskere og raskere måte å få grenser rundt bildene dine i WordPress. Det er mange måter du kan gjøre dette på, og vi vil vise deg dem alle. Du kan velge det som passer best for deg.

Legge til grenser ved hjelp av in-line-stiler i WordPress

Når du har lastet opp og satt inn bildet ditt i et WordPress-innlegg, bytt til tekstredigeringsprogrammet. Du vil se HTML-koden for bildet ditt. Det vil se slik ut:

Du kan enkelt legge til CSS-stil i HTML-koden slik:

Du er velkommen til å endre grensebredde, farge, polstring og margin til dine egne behov.

Legge til bildekant i WordPress Theme eller Child Theme

Hvis du vil legge til grenser permanent for alle bilder i WordPress-blogginnlegg og -sider, kan du legge til CSS direkte i WordPress-temaet eller temaet ditt.

De fleste WordPress-temaer har allerede disse stilreglene definert i temaets stilark som vanligvis er style.css-fil. Du kan endre eksisterende CSS, eller du kan legge til ditt eget CSS i et barnemne.

WordPress legger til standard bildeklasser for alle bilder. For å sikre at bilder i innleggene / sidene dine har en bildegrense, må du målrette mot alle disse klassene. Her er en enkel CSS-kode for å komme i gang:

 img.alignright float: right; margin: 0 0 1em 1em; grense: 3px solid #EEEEEE;  img.alignleft float: left; margin: 0 1em 1em 0; grense: 3px solid #EEEEEE;  img.aligncenter display: block; margin-left: auto; margin-høyre: auto; grense: 3px solid #EEEEEE;  img.alignnone border: 3px solid #EEE;  

Hvis du bare vil bruke bildegrensene når du trenger dem, kan du legge til CSS-klassen i bildene dine (se ovenfor). Legg til stylingsregler for denne CSS-klassen i temaet ditt eller temaet ditt.

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

Vi håper denne artikkelen hjalp deg med å legge til bildegrense rundt dine WordPress-bloggbilder. Du vil kanskje også se vår guide om hvordan du lagrer bilder som er optimalisert for Internett, for å øke hastigheten på ditt WordPress-nettsted.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.