Cum se afișează imagini WordPress una lângă alta

vrei să-ți arăți imaginile WordPress una lângă alta? Uneori poate doriți să vă aliniați fotografiile la rând pe site-ul dvs. web. În acest articol, vă vom arăta cum să afișați imagini WordPress unul lângă celălalt.

afișarea imaginilor WordPress una lângă alta

există mai multe moduri diferite de a afișa imagini una lângă alta în WordPress. Să aruncăm o privire la trei metode simple…

Metoda 1: Aliniați stânga

mai întâi, adăugați fotografiile la postarea sau pagina dvs. Doar faceți clic pe butonul Adăugare Media din colțul din stânga sus al editorului pentru a selecta imaginile pe care doriți să le inserați.

după ce ați selectat imaginile, faceți clic pe butonul Inserare în postare.

Acum faceți clic pe fiecare imagine și selectați aliniere la stânga pentru a alinia imaginile una lângă alta (trebuie să fiți în fila vizuală pentru a face acest lucru).

alternativ, puteți selecta „stânga” din opțiunea aliniere (sub „Setări Afișare atașament”) în interiorul ecranului Inserare Media înainte de a face clic pe butonul Inserare în postare.

acum imaginile dvs. se vor afișa automat una lângă alta. Iată rezultatul:

există un dezavantaj al acestei metode. Dacă aveți text pe aceeași pagină cu imaginile dvs., acesta va umple orice zonă goală din dreapta imaginilor:

Metoda 2: Adăugați CSS personalizat

adăugând propriul cod CSS personalizat la imaginile dvs., puteți avea control complet asupra modului în care acestea sunt afișate pe site-ul dvs. web.

mai întâi, asigurați-vă că editați pagina sau postarea în modul Text (nu în modul vizual).

în eticheta< img > pentru imaginile dvs., adăugați următorul cod:

style= "float: left; margin-right: 15px;"

aceasta va face ca imaginile dvs. să se alinieze una lângă alta cu un spațiu de 15px în dreapta fiecărei imagini. Va trebui să adăugați acest cod la toate imaginile pe care doriți să le afișați una lângă alta, așa cum se arată mai jos:

Iată cum arată:

dacă doriți să împiedicați afișarea textului în partea dreaptă a imaginilor, utilizați în schimb acest cod:

style= "display: inline-block; margin-right: 15px;"

acum, textul dvs. nu se va înfășura în jurul imaginilor. În schimb, va arăta astfel:

singurul dezavantaj la această metodă este că necesită adăugarea de cod manual, care poate fi un pic confuz și consumatoare de timp.

metoda 3: Utilizarea Galeriei Envira

Galeria Envira este cea mai ușoară metodă de afișare a imaginilor una lângă alta în WordPress. Chiar face automat fotografii mai mari în miniaturi mai mici, astfel încât toate imaginile dvs. să arate perfect atunci când sunt afișate una lângă cealaltă.

pentru a începe, va trebui să instalați și să activați pluginul Envira Gallery.

apoi, pur și simplu mergeți la Galeria Envira ” Adăugați nou pentru a adăuga o nouă galerie de imagini în WordPress.

pur și simplu adăugați un nume pentru galeria dvs. de imagini și adăugați fotografiile dorite în secțiunea Imagini din setările Galeriei Envira.

asigurați-vă că apăsați butonul Publicare pentru a salva modificările.

acum veți vedea o casetă de dialog cu codurile scurte și alte informații. Doar copiați și lipiți unul dintre aceste scurtăturile în pagina sau post în cazul în care doriți să arate imaginile una lângă alta.

(pentru un tutorial detaliat, consultați Cum să creați o galerie de imagini cu miniaturi în WordPress.)

asta e! Iată un exemplu despre cum vor apărea imaginile dvs. pe site-ul dvs. web:

puteți utiliza Envira pentru a afișa imagini de diferite înălțimi una lângă cealaltă. Pentru tutorialul nostru despre asta, consultați Cum să creați o galerie de imagini de zidărie în WordPress.

sperăm că acest articol v-a ajutat să învățați cum să afișați imagini WordPress unul lângă celălalt. De asemenea, poate doriți să consultați ghidul nostru despre cum să creați un glisor de imagine pentru galeriile dvs.

dacă vă place acest articol, atunci vă rugăm să ne urmați pe Facebook și Twitter pentru mai multe tutoriale gratuite WordPress.