Adăugarea casetei de lumină pe site-ul WordPress: Ghid definitiv pentru începători

Lightbox este una dintre multele caracteristici interesante și populare pentru un site web bazat pe imagini. Dar nu toată lumea știe cum să adauge lightbox la un site WordPress, mai ales un începător. Prin urmare, prezentăm acest ghid pentru începători pentru a-i ajuta să adauge lightbox pe site-urile WordPress.

Ce este Lightbox și cum se adaugă?

Lightbox este o galerie de imagini modale care afișează imaginea și videoclipul dvs. creând o fereastră pop-up pe ecran complet și estompând restul paginii . De exemplu:

Acest efect frumos și fantezist este extrem de util pentru un portofoliu, fotografie sau orice site web bazat pe imagini. Vă permite să vizualizați imaginea în mod clar și vă face site-ul mai remarcabil .

În mod normal, există 3 moduri de a avea lightbox pentru un site web WordPress:

• Adăugarea unui cod scurt
• Instalarea unui plugin
• Folosind o temă care acceptă lightbox.

Pentru începători, vă sugerăm să utilizați un plugin sau să găsiți o temă cu această caracteristică pregătită, deoarece adăugarea de shortcode este doar pentru utilizatorii avansați.

Afișați caseta luminoasă dacă tema dvs. o acceptă

Nu există nimic de spus dacă tema dvs. afișează deja caseta de lumină pentru galerie/imagini. Dar știm că multe teme au nevoie de câțiva pași pentru a le arăta. De exemplu, această temă ePortfolio a acceptat caseta de lumină, dar trebuie să conectați galeria la fișierul media pentru a afișa caseta de lumină.

În mod normal, există două opțiuni: link către fișierul media sau pagina atașată . Când conectați o imagine/galerie la o pagină atașată, o pagină nouă, separată, care conține doar imaginea, se va deschide când faceți clic pe imagine. Dacă conectați la un fișier media, acesta va afișa numai imaginea, nu pagina, astfel:

Iată ghidul pentru a o face.

Mai întâi, accesați Editorul de postări , apoi faceți clic în galerie.

Dacă utilizați Editorul Gutenberg, uitați-vă la bara laterală din dreapta, veți vedea secțiunea Link către .

În ceea ce privește o singură imagine, trebuie să faceți clic pe această pictogramă din bara de instrumente:

În Editorul clasic, secțiunea Link către apare când creați sau editați o galerie și o singură imagine.

Apoi, alegeți Media File și faceți clic pe Insert Gallery pentru a finaliza. Când actualizați sau publicați postarea, faceți clic pe acea galerie/imagine, veți vedea că lightbox-ul rulează.

Dacă tema dvs. acceptă lightbox, această acțiune poate activa lightbox-ul pentru galeria/imaginea dorită. În caz contrar, nu va exista deloc lightbox.

Cu toate acestea, configurația poate fi diferită cu diferite teme. De exemplu, unii vă pot solicita să lucrați în Customizer, alții ar putea avea nevoie să introduceți un link către pagina atașată în loc de fișierul media. Prin urmare, ar trebui să verificați tema cu atenție .

Indiferent de temă pe care o utilizați, totuși, este necesar să știți cum să conectați o galerie/imagine la fișierul media, deoarece va fi util să adăugați lightbox folosind un plugin de mai jos.

Adăugarea casetei de lumină folosind un plugin

Într-adevăr, adăugarea casetei de lumină nu este deloc dificilă. Căutând cuvântul cheie „plugin lightbox”, veți vedea o serie de pluginuri pentru acest efect. În ceea ce privește cercetarea noastră, sortăm pluginurile în două tipuri: pluginurile complicate și pluginurile simple pentru a adăuga lightbox.

În ceea ce privește pluginurile complicate, există opțiuni mult mai sofisticate pentru a personaliza înalt caseta luminoasă, cum ar fi dimensiunea imaginii, culoarea chenarului, stilurile casetei luminoase, ... De exemplu, Lightbox-ul Responsive & Gallery și FooBox Image Lightbox au mai multe instrumente de personalizare. Dar este mai dificil de folosit dacă ești începător. În plus, rezultatul nu este atât de diferit de un simplu plugin. De aceea, preferăm să folosim un plugin simplu precum Simple Lightbox .

Acest plugin este ușor de utilizat, destul de popular cu peste 200.000 de instalări active și evaluat cu 160 de cinci stele. În plus, designul casetei de lumină este bun.

Pasul 1: Instalați și activați Pluginul Lightbox simplu

În Dashboard > Plugin > Add New , trebuie doar să tastați „simple lightbox” și să faceți clic pe Instalați pluginul, apoi să îl activați .

Pasul 2: Configurați pluginul Simple Lightbox

În Plugin > Pluginuri instalate , faceți clic pe Setare în fila Cutie lightbox simplă .

Fila de activare a setării casetei lightbox simple

Fila Activare vă permite să activați/dezactivați anumiți parametri. Cea mai importantă casetă pe care ar trebui să o bifați este Activarea funcției casetei luminoase , care activează caseta luminoasă pentru galeria dvs. Dacă nu alegeți această casetă, celelalte secțiuni sunt toate lipsite de sens.

Restul casetelor sunt opționale pentru tine. Puteți bifa pentru a afișa caseta de lumină pe pagina dvs. de pornire, postări unice, pagini, pagini de arhivă, widget-uri și meniuri.

Asigurați-vă că doriți cu adevărat lightbox pentru secțiunile potrivite, deoarece prea multe lightbox-uri pot face site-ul dvs. un pic strălucitor.

Fila Grupare a setării casetei lightbox simple

Derulând în jos, există fila Grupare . Acesta va decide modul în care afișați caseta de lumină sub forma unui glisor sau a unei singure imagini.

Grupați articole: bifați-l pentru a afișa imaginea/galeria dvs. ca un glisor, care vă permite să navigați de la una la următoarea imagine. Numai când activați această funcție, alte secțiuni din această filă pot intra în vigoare. În caz contrar, alte secțiuni de grupare nu funcționează.

Grupați articolele după postare: bifând această casetă, grupați toate articolele dintr-o singură postare într-un glisor pentru casete lightbox . Faceți-o atunci când doriți să grupați numai imaginile/galeriile în interiorul unei postări și să excludeți alte imagini/galeri din alte postări, widget-uri și meniuri.

Grupați articolele din galerie separat, Grupați elementele widget separat și Grupați elementele din meniu separat: bifați fiecare dintre ele pentru a grupa articole într-o galerie a unei singure postări, articole dintr-un widget sau, respectiv, elemente de meniu . Înseamnă că puteți naviga la următoarele elemente din aceeași galerie, widget sau meniu în glisorul casetei de lumină. Credem că ar trebui să o faceți atunci când nu doriți să încurcați casetele de lumină în diferite părți, ceea ce vă poate deruta vizitatorii.

Fila UI din Setarea casetei lightbox simple

Fila UI are secțiuni pentru a modifica stilul lightbox. Acordați atenție acestui lucru dacă doriți să personalizați afișarea casetei de lumină.

Tema: Există 2 stiluri pentru caseta dvs. de lumină. Doar alege unul care se potrivește gusturilor tale.

Stil întunecat

Stilul lejer

Redimensionați caseta de lumină pentru a se potrivi în fereastră: vă recomandăm să activați această secțiune pentru a avea un afișaj frumos. În caz contrar, imaginea este pe tot ecranul și nu puteți vizualiza întreaga imagine astfel.

Activare animații: bifați pentru a activa efectul de încărcare.

Debifați pentru a dezactiva efectul, făcând navigarea mai rapidă.

Porniți automat prezentarea de diapozitive: lăsați-o să treacă automat la următoarea imagine când activați această secțiune.

Durata diapozitiv: dacă activați secțiunea de prezentare automată de diapozitive de mai sus, puteți alege durata diapozitivului aici.

Buclă prin elemente: doriți să repetați elementele după o rundă de diapozitiv? Dacă da, faceți clic pe această casetă.

Opacitatea suprapunerii (0 – 1): Puteți modifica opacitatea suprapunerii de fundal. Cu cât opacitatea este mai mică, cu atât mai clar poți vedea postarea din spate. De exemplu, setăm opacitatea la 0,1, astfel încât fundalul să poată fi văzut foarte clar.

Activați titlul implicit: puteți alege să afișați titlul imaginii făcând clic în această casetă. Iată cum este afișat titlul.

Fila Etichetă a casetei lightbox simple

În cele din urmă, această filă vă va permite să schimbați eticheta pentru fiecare buton. Dar aceste secțiuni nu intră în vigoare decât dacă adăugați cod scurt atunci când editați tema. Deci, în acest tutorial pentru începători, nu trebuie să vă ocupați de această filă.

După ce ați terminat cu toate setările pluginului Simplu Lightbox, faceți clic pe Salvare modificări chiar sub fila Etichetă .

Pasul 3: Conectați imaginile/galeria la fișierul media pentru a afișa caseta luminoasă

Pentru a decide ce imagine/galerie să adăugați lightbox, trebuie să inserați un link pentru fișierul media către acea imagine/galerie. Dacă nu adăugați link la fișierul media, caseta lightbox nu poate fi afișată.

Trebuie doar să urmați ghidul pe care l-am menționat în partea „Afișați caseta luminoasă dacă tema dvs. o acceptă”. Vedeți, am spus că cu siguranță ar trebui să știți cum să o faceți dacă doriți să utilizați pluginul Simple Lightbox.

Ultimele Cuvinte

Mai sus sunt cel mai simplu mod de a adăuga lightbox pe site-ul dvs. WordPress. Mai ales dacă ești începător, folosirea pluginului Simple Lightbox este o modalitate simplă și eficientă. În funcție de cererea dvs., de site-ul dvs. web și de estetica dvs., puteți alege diferite pluginuri lightbox pentru a obține cel mai dorit rezultat. Sau puteți alege să găsiți o temă WordPress care acceptă lightbox și să o configurați pentru a afișa acel efect.

Dacă doriți mai multe instrucțiuni despre pluginurile lightbox complicate, lăsați un comentariu mai jos și urmăriți-ne în continuare.