cum se aliniază imaginile Side-by-Side în WordPress

alinierea imaginii este o luptă constantă pentru Bloggerul WordPress.

această postare este pentru oricine a petrecut mai mult timp decât ar vrea să admită că se joacă cu alinierea și poziționarea imaginii în editor.

cele mai bune două metode de aliniere a imaginilor

există două tehnici pe care ar trebui să le luați în considerare pentru plasarea imaginilor una lângă cealaltă. Voi împărtăși modul de utilizare a fiecăruia, precum și argumentele pro și contra incluse.

aliniați imaginile cu o galerie

cea mai fiabilă metodă pentru plasarea imaginilor una lângă alta este utilizarea unei galerii WordPress.

dacă nu ați creat niciodată o galerie înainte, urmați acest tutorial despre cum să creați galerii.

trucul este să folosiți o versiune de dimensiuni medii a imaginilor și să alegeți două coloane, chiar dacă includeți doar două imagini. Rezultatul va arăta cam așa:

captură de ecran a unei galerii de exemple

captură de ecran a unei galerii de exemple

spre deosebire de imaginile pe care le plasați în postarea dvs., galeriile au HTML special care păstrează imaginile una lângă cealaltă. Această structură face mai ușoară și mai puțin dificilă alinierea imaginilor în rânduri/coloane.

plasați imagini cu Scurtăturile coloanei

dacă nu vă deranjează adăugarea unui nou plugin pe site-ul dvs., Scurtăturile coloanei este o soluție excelentă pentru alinierea imaginilor.

Screenshot de coloana scurtăturile plugin page

Scurtăturile coloana este una dintre acele plugin-uri minunat care nu umple site-ul dvs. cu meniuri noi. De fapt, singurul lucru pe care îl adaugă la tabloul de bord admin este acest buton convenabil deasupra editorului.

 butonul adăugat de Scurtăturile coloană

butonul adăugat de Scurtăturile coloană

pentru a arăta cum funcționează, voi crea un singur rând de trei imagini.

cum se utilizează Scurtăturile coloanei

primul pas este să plasați cursorul pe o linie goală în editor. Apoi faceți clic pe butonul cod scurt și selectați o opțiune de coloană.

Afișarea cum se adaugă un cod scurt coloană
crearea unui rând cu trei coloane.

repetați acest pas pentru a adăuga o a doua coloană 1/3 și apoi repetați încă o dată, dar de data aceasta folosind opțiunea o treime (ultima). Rezultatul este următoarele scurtăturile adăugate la editor.

Scurtăturile în editorul

Scurtăturile în editorul

dacă nu ați folosit scurtăturile înainte, poate doriți să urmați acest tutorial primul.

după cum puteți vedea, fiecare cod scurt are o etichetă de deschidere și închidere. Acum Puteți pune o imagine în interiorul fiecărui cod scurt, astfel:

imagini în scurtăturile în editorul

imaginile din scurtăturile din editor

arată ca o mizerie, nu-i așa?

asta pentru că scurtăturile nu pot stiliza imaginile din editor, dar nu este o problemă. Odată ce le vizualizați pe site, acestea se vor alinia perfect în coloane, astfel:

exemplu de imagini plasate în coloane

exemplu de imagini plasate în coloane

Scurtăturile coloana comparativ cu galerii

în timp ce scurtăturile nu se afișează frumos în editorul ca galerii și poate fi mai mult de o provocare pentru a lucra cu, veți obține, de asemenea, un pic mai mult control. De exemplu, galeriile forțează toate imaginile să se conecteze la:

  • fișier Media
  • pagina atașamentului
  • nimic

cu pluginul coloane, imaginile pot avea adrese URL personalizate și fiecare legătură către un alt tip de pagină.

de asemenea, puteți amesteca și potrivi coloanele. De exemplu, puteți plasa o imagine într-un cod scurt 2/3 lângă o imagine cu un cod scurt 1/3 coloană.

de ce nu ar trebui să utilizați opțiunile de aliniere

aceste metode vor produce aspectele dorite fără toate durerile de cap.

galeriile WordPress sunt cel mai simplu și mai simplu mod de a alinia imaginile la rând. Cu toate acestea, Scurtăturile coloanei este o alternativă bună, care oferă mai multă flexibilitate.

ambele funcționează atât de bine, deoarece plasează imaginile într-o nouă structură HTML. HTML face posibilă menținerea unui aspect side-by-side, indiferent de ecranul utilizat pentru a le vizualiza.

am pierdut ceva? Aveți întrebări? Postează un comentariu mai jos.

Ben Sibley
Ben Sibley
Ben Sibley este un designer de teme WordPress & dezvoltator și fondator al concurează teme.

Leave a Reply