Cum să adăugați o bordură în jurul unei imagini în WordPress (3 metode ușoare)

Simți vreodată că imaginile tale dispar pur și simplu în fundalul site-ului tău WordPress? Alegi imagini grozave, dar odată ajunse pe pagină, arată plat, de parcă abia ar exista.

Acest lucru se întâmplă des, mai ales pe layout-uri curate, albe. Și poate face ca conținutul dvs. să pară mai puțin captivant, chiar și atunci când totul arată impecabil.

Acesta este locul unde adăugarea unei margini simple poate face o mare diferență.

La WPBeginner, ne place să adăugăm margini curate în jurul capturilor noastre de ecran pentru a le ajuta să iasă în evidență și să îmbunătățim aspectul general al paginilor noastre. Este unul dintre trucurile noastre preferate pentru un angajament mai bun, un design mai echilibrat și o senzație mai profesională.

În acest ghid, vă vom arăta trei moduri ușoare de a adăuga o margine în jurul unei imagini în WordPress. Până la sfârșit, veți ști cum să faceți imaginile dvs. să iasă în evidență și să mențineți vizitatorii interesați de conținutul dvs. 🙌

De ce să adăugați o margine în jurul unei imagini în WordPress?

O margine ajută imaginile dvs. să iasă în evidență față de restul conținutului, în special pe paginile cu fundaluri deschise sau aglomerate. Creează o graniță vizuală clară care face imaginile dvs. mai ușor de văzut și mai susceptibile de a atrage atenția.

Imaginile sunt instrumente puternice de comunicare. Ele pot partaja informații rapid și pot face paginile cu mult text mai atractive.

Cu toate acestea, uneori imaginile se pot contopi cu fundalul site-ului web. Acest lucru este mai probabil dacă folosiți o imagine de fundal sau culorile site-ului dvs. sunt similare cu cele ale imaginilor dvs.

Persoanele cu deficiențe de vedere sau daltonism pot găsi, de asemenea, dificil să distingă imaginile de fundal. Dacă doriți să aflați mai multe, avem un ghid despre îmbunătățirea accesibilității site-urilor WordPress.

Adăugarea unei borduri în jurul unei imagini în WordPress distinge clar imaginea de fundalul site-ului dvs. Este, de asemenea, o modalitate excelentă de a atrage atenția asupra celor mai importante elemente vizuale ale dvs.

Având în vedere acest lucru, vă vom ghida prin modul în care puteți adăuga o bordură în jurul unei imagini pe blogul dvs. WordPress.

Iată o prezentare generală rapidă a tuturor metodelor pe care le vom acoperi în acest articol:

• Metoda 1: Utilizarea claselor CSS personalizate pentru a adăuga o margine în jurul unei imagini în WordPress
• Metoda 2: Utilizarea unui Page Builder pentru a adăuga o margine în jurul unei imagini în WordPress
• Metoda 3: Folosirea HTML și CSS pentru a adăuga o bordură în jurul unei imagini în WordPress
• Sfat bonus: Folosirea unui instrument de design grafic pentru a adăuga o bordură în jurul unei imagini
• Întrebări frecvente: Adăugarea unei borduri în jurul unei imagini în WordPress
• Mai multe ghiduri despre utilizarea imaginilor în WordPress

Gata? Să începem.

Metoda 1: Utilizarea claselor CSS personalizate pentru a adăuga o margine în jurul unei imagini în WordPress

Crearea unei clase CSS personalizate este o modalitate inteligentă și ușoară de a adăuga borduri imaginilor dvs. O clasă CSS este un bloc reutilizabil de cod care vă permite să aplicați aceleași stiluri, cum ar fi borduri, culori sau spațiere, mai multor elemente de pe site-ul dvs.

Deci, în loc să editați fiecare imagine una câte una, puteți defini setările de bordură într-un singur loc și le puteți aplica oriunde aveți nevoie, cu doar câteva clicuri. Acest lucru este perfect dacă intenționați să adăugați borduri la mai multe imagini pe site-ul dvs.

Există câteva modalități de a crea o clasă CSS personalizată. Poți folosi personalizatorul temei, Editorul complet al site-ului sau pluginul WPCode.

Recomandăm întotdeauna utilizarea pluginului WPCode, deoarece este ușor de utilizat pentru începători și independent de temă. Acest lucru înseamnă că CSS-ul dvs. personalizat va funcționa chiar dacă schimbați tema.

Pe mărcile noastre partenere, folosim WPCode pentru a adăuga și gestiona fragmente de cod personalizate. Pentru a afla mai multe despre acesta, consultați recenzia noastră detaliată despre WPCode.

Deci, să instalăm și să activăm pluginul WPCode. Dacă aveți nevoie de ajutor, puteți consulta ghidul nostru despre cum să instalezi un plugin WordPress.

După activare, veți dori să navigați la Fragmente de cod » + Adăugați fragment.

Apoi, puteți trece cu mouse-ul peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și faceți clic pe „Utilizați fragmentul”.

Pe ecranul următor, WPCode te va ruga să alegi un tip de cod.

S-ar putea să observați că setările implicite ale WPCode indică „Fragment PHP”, dar aici va trebui să faceți clic pe „Fragment CSS”.

Aceasta va deschide editorul WPCode. De aici, poți crea mai întâi un nume pentru fragmentul personalizat. De exemplu, noi folosim „border-black”.

Rețineți că, atunci când creați clasa CSS, va trebui să specificați culoarea și lățimea bordurii.

De exemplu, puteți seta pixeli (px) pentru lățime și un cod de culoare hexazecimal pentru culoare.

În următorul fragment de cod, creăm o bordură neagră lată de 5 pixeli:

.border-black {
    border: #000 solid 5px;
}

În exemplul de cod de mai sus, border-black este numele clasei CSS (la fel ca fragmentul nostru de cod personalizat în WPCode, făcând mai ușor de organizat).

Puteți folosi orice nume doriți, dar va trebui să introduceți numele clasei CSS de fiecare dată când doriți să creați o bordură. Având în vedere acest lucru, veți dori să creați un nume de clasă CSS scurt și ușor de reținut.

Acum, tot ce trebuie să faci este să copiezi acel fragment de cod în câmpul „Previzualizare cod” al WPCode, astfel:

După aceea, puteți comuta comutatorul pentru a activa fragmentul și apăsați butonul „Salvare fragment” sau „Actualizare”. Pentru instrucțiuni detaliate, puteți consulta ghidul nostru despre adăugarea de CSS personalizat în WordPress.

Puteți adăuga oricâte clase CSS doriți. De exemplu, ați putea crea borduri care au culori diferite.

Acum, adăugarea unei borduri la o imagine este destul de simplă.

Pentru a începe, faceți clic pe imaginea de pe pagina sau postarea dvs. WordPress. Apoi, veți dori să priviți fila „Bloc” din partea dreaptă a ecranului și să localizați opțiunea „Avansat” acolo.

Dați un clic pentru a extinde secțiunea.

În câmpul „CLASA(ELE) CSS SUPLIMENTARĂ(E)”, puteți introduce numele clasei CSS pe care doriți să o adăugați imaginii.

Rețineți că, așa cum puteți vedea în imaginea următoare, bordura nu va apărea în editorul de conținut WordPress.

Pentru a vedea cum va arăta marginea vizitatorilor dvs., faceți clic pe butonul „Previzualizare”.

Acum vei vedea imaginea ta cu bordura aplicată.

Dacă sunteți mulțumit de aspectul bordurii, atunci trebuie doar să publicați sau să actualizați pagina.

Metoda 2: Utilizarea unui Page Builder pentru a adăuga o margine în jurul unei imagini în WordPress

O altă metodă este să folosiți un plugin de page builder.

Instrumentele de creare de pagini de tip drag and drop vă permit să proiectați și să personalizați cu ușurință pagini web, cum ar fi paginile de conectare și paginile de destinație. Puteți adăuga text, imagini și alte elemente fără a avea nevoie de abilități de codare.

Aceste instrumente vă permit, de asemenea, să creați cu ușurință margini unice pentru fiecare imagine. Le puteți proiecta folosind un editor vizual, ceea ce este mai ușor pentru mulți oameni.

Recomandăm SeedProd, care este cel mai bun constructor de pagini de destinație pentru WordPress. Este ușor de utilizat și îți permite să creezi cu ușurință pagini cu aspect profesional.

Nu ezitați să consultați recenzia noastră completă despre SeedProd pentru a vedea de ce recomandăm acest instrument.

SeedProd are un bloc special pentru imagini cu opțiuni de bordură încorporate. De asemenea, poți adăuga cu ușurință umbre și ajusta spațierea.

Mai întâi, va trebui să instalați și să activați pluginul. Dacă aveți nevoie de ajutor, vă rugăm să consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, accesați SeedProd » Landing Pages din tabloul de bord WordPress.

SeedProd vine cu sute de șabloane proiectate profesional, care sunt grupate pe categorii. Deasupra ecranului, veți vedea categorii pe care le puteți utiliza pentru:

• Creați o pagină 404.
• Creează o pagină de autentificare personalizată.
• Proiectați o pagină frumoasă de tip „în curând”.
• Și multe altele.

Pentru a vizualiza un design, pur și simplu treceți mouse-ul peste un șablon și apoi faceți clic pe pictograma lupă atunci când apare.

Aceasta va afișa o previzualizare a șablonului.

Dacă sunteți mulțumit de aspectul șablonului, faceți clic pe „Alegeți acest șablon”.

În câmpul „Nume pagină”, introduceți un nume pentru pagină. Implicit, SeedProd va folosi acest nume ca URL al paginii.

Dacă doriți să schimbați acest URL creat automat, pur și simplu editați textul din câmpul „URL pagină”.

După ce ați introdus informațiile, puteți face clic pe butonul „Salvare și începerea editării paginii”. Aceasta va deschide șablonul ales în editorul drag-and-drop al SeedProd.

În meniul din stânga, veți vedea toate blocurile pe care le puteți adăuga la pagina dvs. WordPress utilizând glisarea și fixarea.

Pur și simplu găsiți blocul „Imagine”, apoi trageți-l pe designul paginii dvs.

După ce ați făcut acest lucru, pur și simplu faceți clic pe blocul „Imagine” pentru a vedea toate setările pe care le puteți utiliza pentru a personaliza blocul.

În meniul din stânga, veți dori să faceți clic pe „Utilizați propria imagine”.

Acum puteți alege orice imagine din biblioteca media WordPress.

După aceea, faceți clic pe fila „Avansat” din meniul din stânga.

Apoi, continuați și faceți clic pentru a extinde secțiunea „Bordură imagine”.

Implicit, toate setările de Lățime a Bordurii ale SeedProd sunt 0, ceea ce înseamnă că imaginea nu are o bordură.

Primul lucru pe care veți dori să-l faceți este să creșteți aceste valori la 1 sau mai mult. Acest lucru va adăuga o bordură vizibilă imaginii.

Pentru a începe, faceți clic pe fiecare dintre câmpurile „Lățime bordură” și apoi introduceți un număr mai mare sau utilizați butoanele cu săgeți care apar.

Când sunteți mulțumit de grosimea bordurii, puteți începe să o stilizați.

O opțiune este să schimbați culoarea marginii făcând clic pe câmpul de lângă „Culoare margine”. Aceasta va deschide o fereastră pop-up unde puteți alege o nouă culoare pentru margine.

SeedProd oferă trei stiluri simple de bordură: solidă, punctată și întreruptă. Puteți alege oricare se potrivește cel mai bine imaginii dvs.

Pentru a încerca aceste diferite stiluri de margine, pur și simplu deschideți meniul derulant „Stilul marginii” și apoi alegeți o opțiune din listă.

Poftim!

Și dacă doriți să adăugați o bordură altor imagini, urmați același proces descris mai sus.

Odată ce sunteți mulțumit de designul paginii, puteți face clic pe butonul „Salvare” și apoi alegeți „Publicare” pentru a o face activă.

Metoda 3: Utilizarea HTML și CSS pentru a adăuga un chenar în jurul unei imagini în WordPress

Puteți adăuga borduri și folosind HTML și CSS. Această metodă nu necesită un plugin, ceea ce poate fi util.

Cu toate acestea, personalizarea aspectului bordurii implică scrierea unui cod, deci s-ar putea să nu fie cea mai bună alegere pentru începători. Dacă vă simțiți confortabil cu puțin cod, această metodă oferă o mare flexibilitate.

Pentru a începe, să adăugăm o imagine la orice pagină sau postare.

Odată ce ați făcut acest lucru, puteți face clic pe pictograma cu trei puncte din colțul din dreapta sus, apoi faceți clic pe „Editor de cod”.

WordPress va afișa acum tot codul care alcătuiește pagina sau postarea.

Acum puteți găsi secțiunea de cod care adaugă imaginea pe pagina dvs. Acest cod va începe cu wp:image .

Dacă pagina are mai multe imagini, atunci verificați valoarea img src=. Acesta este URL-ul imaginii din biblioteca media WordPress și va fi diferit pentru fiecare imagine.

Odată ce ați găsit secțiunea corectă de cod, următorul pas este să scrieți o linie de cod care adaugă marginea și controlează modul în care este stilizată.

De exemplu, în următorul fragment de cod, bordura are o lățime de 3 pixeli. Adăugăm, de asemenea, 3 pixeli de spațiere interioară și margine:

style="border:3px solid #000000; padding:3px; margin:3px;" />

În codul eșantion de mai sus, solid #000000 setează culoarea chenarului. Valoarea #000000 este codul hexazecimal pentru culoarea neagră.

Și dacă *nu* doriți să creați o margine neagră, atunci puteți înlocui valoarea cu orice alt cod hexazecimal.

Odată ce ați decis codul pentru chenar, va trebui să găsiți secțiunea /></figure> și să adăugați codul direct înainte de primul caracter /.

Să analizăm un exemplu:

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

Când sunteți mulțumit de codul dvs., ieșiți din editorul de cod făcând clic pe „Ieșire din editorul de cod”.

Ar trebui să vedeți acum o margine în jurul imaginii dvs. Nu vă faceți griji dacă primiți un avertisment despre HTML invalid. Acest lucru este normal și nu va afecta modul în care este afișată imaginea dvs.

Dacă sunteți mulțumit de cum arată, puteți actualiza sau publica pagina dvs. ca de obicei.

Acum, dacă vizitați site-ul dvs. WordPress, veți vedea o bordură în jurul imaginii dvs.

Sfat bonus: Folosirea unui instrument de design grafic pentru a adăuga o bordură în jurul unei imagini

Deși WordPress oferă mai multe metode pentru a adăuga margini, aceste opțiuni pot fi uneori limitate în stil și personalizare. Deci, de ce să nu vă editați imaginea mai întâi și apoi să o încărcați în WordPress după?

Aici intervin instrumentele de design grafic.

Adobe Photoshop este jucătorul principal aici, cu o mulțime de funcții sofisticate pentru profesioniști. Dacă nu doriți să spargeți banca, atunci Affinity Photo este o alegere solidă – are trucuri similare la îndemână, dar plătiți o singură dată.

Pentru o experiență mai prietenoasă, bazată pe browser, Canva este un instrument excelent. Echipa noastră îl folosește în mod regulat pentru a crea rapid imagini de prezentare și grafice pentru rețelele sociale.

Și dacă ești atent la buget, GIMP (GNU Image Manipulation Program) poate fi soluția ta. Este complet gratuit, open-source și poate face multe dintre lucrurile pe care le fac instrumentele plătite.

GIMP este, de asemenea, o opțiune excelentă atât pentru începători, cât și pentru utilizatorii experimentați. Îl puteți folosi pe Mac și Windows.

Pentru acest tutorial, vom demonstra cum puteți adăuga o bordură în jurul unei imagini folosind GIMP.

După instalare, veți dori să deschideți aplicația desktop pentru GIMP. Apoi, puteți face clic pe Fișier » Deschidere și să alegeți o imagine de editat de pe unitatea locală. Sau, puteți trage și plasa una în editorul GIMP.

Odată ce imaginea este încărcată în editorul GIMP, să desenăm o bordură în jurul imaginii folosind „Instrumentul de selecție dreptunghiulară”. Puteți găsi acest instrument pe bara de instrumente din colțul din stânga sus.

Apoi, s-ar putea să doriți să verificați setările culorii de prim-plan și de fundal.

Acest lucru se datorează faptului că GIMP folosește culoarea de prim-plan pentru a contura liniile. Deci, dacă trebuie să utilizați o culoare specifică pentru bordura dvs., puteți face clic pe culoarea de prim-plan pentru a o ajusta.

Aceasta va deschide selectorul de culori, unde puteți muta mouse-ul peste zona de selecție a culorii sau puteți introduce codul hexazecimal al culorii.

Odată ce ați făcut acest lucru, puteți face clic pe „OK”.

Acum că ați setat culoarea bordurii, este timpul să o aplicați. Puteți naviga la Editare » Contur selecție, iar acest lucru va deschide fereastra pop-up „Contur selecție”.

Aici puteți ajusta stilul, lățimea liniei și multe altele ale conturului. De exemplu, am setat lățimea liniei la 5 px.

Odată ce ați făcut acest lucru, continuați și faceți clic pe „Contur”, iar bordura ar trebui acum să fie adăugată imaginii dvs.

Înainte de a încărca în WordPress, s-ar putea să doriți să optimizați imaginea pentru a menține o viteză și performanță excelentă a site-ului site speed and performance. Imaginile brute sunt adesea mari ca dimensiune, deci acest pas poate fi de un ajutor imens.

În GIMP, puteți optimiza imaginea redimensionând-o.

Pentru a începe, accesați Imagine » Scalează imagine. Aceasta va deschide fereastra pop-up „Scalează imagine”, unde puteți ajusta „Dimensiunea imaginii” astfel:

După ajustarea dimensiunii imaginii, puteți face clic pe butonul „Scalare”.

GIMP va redimensiona apoi imaginea și va afișa noua versiune în editor.

Odată terminat, puteți salva imaginea accesând Fișier » Exportă ca.

Apoi, puteți urma instrucțiunile pentru a alege o locație, a numi fișierul și a defini formatul imaginii. Când totul este gata, faceți clic pe „Export”.

Acum, puteți încărca imaginea în postarea sau pagina dvs. WordPress. Iată cum ar putea arăta în editorul de blocuri:

Acesta este tot – ați învățat cum să adăugați o bordură în jurul unei imagini folosind un instrument de design grafic!

Puteți folosi această metodă oricând doriți să încărcați o imagine în WordPress.

Întrebări frecvente: Adăugarea unei borduri în jurul unei imagini în WordPress

Încă aveți întrebări despre stilizarea imaginilor dvs.? Iată câteva întrebări frecvente pentru a vă ajuta să depanați, să personalizați și să profitați la maximum de adăugarea de borduri în WordPress.

Pot adăuga aceeași bordură la toate imaginile de pe site-ul meu dintr-o dată?

Da, puteți face acest lucru cu CSS personalizat aplicând stiluri la eticheta img principală. Cu toate acestea, acest lucru poate afecta și elemente precum logo-uri, pictograme sau imagini din widget-uri.

Pentru un control mai bun, recomandăm crearea unei clase CSS (ca în Metoda 1) și aplicarea acesteia doar imaginilor unde doriți chenarul.

Cum pot crea colțuri rotunjite pentru bordura imaginii mele?

Puteți crea cu ușurință colțuri rotunjite folosind proprietatea CSS border-radius. Doar adăugați o linie border-radius: 15px; la fragmentul dvs. CSS personalizat. Cu cât valoarea în pixeli este mai mare, cu atât colțurile vor fi mai rotunjite.

Pot elimina o bordură pe care tema mea WordPress o adaugă automat?

Da. Pentru a suprascrie acest lucru, puteți crea o clasă CSS personalizată – de exemplu, .no-border cu border: none !important;. Apoi o puteți aplica imaginilor specifice folosind câmpul „Clasa CSS suplimentară” din setările blocului sau ale imaginii.

Adăugarea unei borduri CSS va încetini site-ul meu?

Nu, o simplă margine CSS este doar o linie de cod și nu are un impact vizibil asupra vitezei de încărcare a paginii. Dimensiunea fișierului imaginii în sine este ceea ce afectează performanța, așa că asigurați-vă întotdeauna că optimizați imaginile pentru web.

Mai multe ghiduri despre utilizarea imaginilor în WordPress

Sperăm că acest articol v-a ajutat să învățați cum să adăugați o bordură în jurul unei imagini în WordPress.

Dacă ți-a fost de ajutor, atunci poți consulta și ghidurile noastre despre:

• Cum să adăugați imagini corect în WordPress
• Cum să editezi imagini de bază în WordPress
• Cum să redimensionați și să măriți imaginile fără a pierde calitatea
• Cum să creezi dimensiuni suplimentare pentru imagini în WordPress
• Cum să încarci imagini leneș în WordPress cu ușurință
• Text alternativ imagine vs. Titlu imagine în WordPress
• Cum să adăugați o imagine erou în WordPress (Funcționează pentru toate temele)
• Cele mai bune plugin-uri și instrumente pentru imagini de prezentare pentru WordPress

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.