Cum să construiți o galerie de imagini inspirată de Airbnb în WordPress

Ești utilizator WordPress și ai observat cât de bine arată galeria de imagini folosită de populara platformă de închiriere Airbnb? Dacă vrei să-l reproduci pe site-ul tău web, nu mai căuta! Îl puteți reproduce rapid cu instrumentul potrivit și câțiva pași simpli în mai puțin de 10 minute.

Indiferent dacă sunteți un utilizator experimentat WordPress sau un începător, acest tutorial vă va oferi tot ce trebuie să știți pentru a pune mingea în joc!

Acest articol vă va învăța următoarele:

• Cum se instalează Modula
• Cum se creează o galerie de imagini în Modula
• Cum să personalizați galeria de imagini pentru a arăta ca o galerie de imagini Airbnb
• Și mai mult …

Designul galeriei Airbnb

Un design de site concis și puternic este esențial pentru succesul său în crearea de conversii și transformarea clienților în clienți repetați. Și asta țintește Airbnb cu galeriile lor de imagini.

Să explorăm de ce galeria de imagini Airbnb este un succes:

• Fotografii profesionale de înaltă calitate ale locației
• Aspect simplu, curat și ușor de utilizat al imaginilor principale
• O afișare curată a galeriei complete
• Abilitatea de a naviga cu ușurință prin toate fotografiile printr-o casetă de lumină
• Afișarea legendelor sau descrierilor pentru fiecare imagine
• Efecte de tranziție a imaginii lightbox
• Opțiuni de partajare a galeriei prin diverse canale
• Săgeți de navigare

Din fericire, puteți recrea cu ușurință stilul galeriei de imagini Airbnb pe WordPress cu pluginul Modula. Modificați câteva setări simple și gata! Continuați să citiți și veți vedea cât de ușor este să o faceți și să vă transformați galeria de imagini într-o galerie de imagini asemănătoare Airbnb.

Creați o galerie de imagini uimitoare, ca pe Airbnb

Veți avea nevoie de un site web WordPress și de un furnizor de găzduire pentru a vă configura galeria de imagini, așa că este vital să aveți în vedere acest lucru înainte de a continua cu pașii. Puteți construi rapid un site web dacă nu aveți deja unul, urmând instrucțiunile din ghidul de instalare WordPress.

Odată ce site-ul dvs. este deschis și rulează, va trebui să alegeți un plugin care să vă ajute la crearea galeriei de imagini. Deși există și alte pluginuri pentru galeria de imagini în depozitul WordPress, Modula este cel pe care îl sfătuim să îl folosim. Acest plugin are multe opțiuni de personalizare, o versiune gratuită cu funcții de bază și este ușor de utilizat.

Crearea unei galerii de imagini de acest tip necesită câteva setări pe care le puteți debloca achiziționând planul Starter la 39 USD. Odată ce ați făcut achiziția, există patru pași principali pentru a construi și afișa o galerie ca pe Airbnb.

️ Instalați Modula

Primul pas este să instalați și să activați Modula. Pentru a face acest lucru, accesați WordPress Dashboard > Plugins > Add New .

Veți observa o bară de căutare în colțul din dreapta sus al paginii nou deschise. După ce tastați „Modula”, acesta va apărea rapid în primul rezultat al căutării. Faceți clic pe butonul Instalați acum pentru a începe instalarea.

️ Creați o galerie de imagini

După ce ați instalat și activat Modula, este timpul să vă creați galeria asemănătoare Airbnb. Mergeți la tabloul de bord WordPress, apoi selectați Modula > Galeriile .

De acolo, selectați Adăugați nou pentru a începe să vă creați galeria.

Veți fi redirecționat către o nouă fereastră în care puteți adăuga un titlu la galeria dvs. și puteți selecta Încărcare fișiere imagine dacă doriți să încărcați imagini noi sau Selectați din bibliotecă dacă utilizați imagini deja importate.

Odată ce imaginile tale sunt adăugate în galerie, ar trebui să le vezi așa. De aici, putem începe să personalizăm galeria și să o facem cât mai aproape de o galerie de imagini Airbnb.

️ Editează galeria de imagini

Aici vine partea distractivă. Modula are diverse opțiuni de personalizare, așa că a-l apropia de designul galeriei de imagini Airbnb ar fi destul de simplu.

În primul rând, când dați clic pe o înregistrare Airbnb, veți fi întâmpinat cu un număr limitat de imagini – cinci pentru a fi exact – care deschid o casetă luminosă care conține toate imaginile din galerie atunci când dați clic. Pentru a recrea acest lucru, derulați în jos în modul de editare a galeriei Modula și vedeți toate setările de personalizare ale Modula.

În mod implicit, tipul de galerie este setat la Creative Gallery, dar acum trebuie să îl setăm la Custom Grid . Apoi, trageți colțurile primelor cinci imagini și extindeți-le astfel încât să se umple astfel.

Pentru a limita numărul de imagini pe care le veți vedea la prima vedere, veți găsi o secțiune Max Images Count sub fila General . Continuă și setează asta la cinci.

În continuare, observăm o anumită distanță între imaginile galeriei Airbnb. Pentru a obține ceva similar, reduceți valoarea Gutter cu câțiva pixeli. În mod implicit, este setat la 10px, dar puteți reduce valoarea desktopului la 8. De asemenea, vă puteți juca cu valorile tabletei și telefonului pentru a vedea care sunt mai bune.

După aceea, mergeți la fila Lightbox & Links și activați butonul Afișați toate imaginile pentru a afișa toate imaginile din galerie atunci când deschideți caseta lightbox. Dacă omiteți acest pas, caseta dvs. de lumină va parcurge doar primele cinci imagini.

În continuare, observăm un efect de hover plăcut când treceți cu mouse-ul peste galeriile Airbnb. Cu Modula, puteți edita aspectul mouse-ului. Mergeți la fila Efecte Hover , setați culoarea hover la un gri mai închis și reduceți opacitatea la 25%.

De asemenea, puteți schimba pictograma Cursor atunci când treceți cu mouse-ul peste imagine pentru a fi o pictogramă indicator, ca pe Airbnb.

Pentru ca oamenii să parcurgă mai ușor imaginile, puteți activa următoarele setări sub Lightbox & Links: butonul Miniaturi , Miniaturi de pornire automată , Miniaturi în partea de jos.

Unele înregistrări Airbnb pot afișa subtitrări sub fiecare imagine. Modula vă permite să setați subtitrări cu ușurință. Nu uitați să faceți clic pe Afișați legenda imaginii de sub setările Lightbox & Links. Puteți chiar să setați poziția legendei să fie afișată în stânga, dreapta sau centrul casetei luminoase. În fila Subtitrări , veți avea mai multe opțiuni pentru a vă edita subtitrările. Puteți seta culoarea, fontul, dimensiunea fontului, stilul fontului și chiar dimensiunea fontului pentru versiunea mobilă.

Când deschideți caseta de lumină din galeria Airbnb, puteți observa butoanele de navigare care vă vor ajuta să vă străduiți prin galeria de imagini. Modula vă oferă și această funcție. Comutați la setarea Butoane de navigare din fila Lightbox & Links.

Când vine vorba de lightbox de pe Airbnb, veți observa o culoare de fundal neagră solidă. Puteți obține acest lucru și cu Modula. Sub aceeași filă Lightbox & Links, derulați în jos până când vedeți culoarea de fundal Lightbox . Aici puteți seta orice culoare doriți și să specificați opacitatea sau să o faceți o culoare solidă.

Airbnb are un buton de partajare pe caseta luminoasă pentru a partaja lista pe diverse canale sociale. Modula are și această funcționalitate, oferind acces la unele dintre cele mai populare platforme. Sub aceeași filă Lightbox & Links, odată ce activați opțiunea butonului Partajare , veți vedea să apară șase noi opțiuni de partajare: Facebook, Twitter, Pinterest, WhatsApp, LinkedIn și Email. Puteți alege individual pe care doriți să apară în galeria dvs.

Caseta lightbox de pe Airbnb are un buton de închidere vizibil pe care utilizatorii pot face clic pentru a închide galeria lightbox. Puteți afișa un buton de închidere și cu Modula.

În cele din urmă, nu uitați să faceți clic pe Actualizare galerie pentru a salva setările.

După ce faceți clic pe una dintre primele cinci imagini afișate pe Airbnb, veți fi redirecționat către întreaga galerie de imagini. Numai după ce faci clic din nou pe una dintre imagini, va apărea caseta de lumină. Pentru a realiza acest lucru cu Modula, puteți accesa Galeriile și selectați Duplicați galeria pe cea pe care tocmai ați creat-o. Va apărea unul nou, iar apoi îl putem personaliza.

Cu galeria nou creată, mergeți mai departe și jucați-vă cu grila personalizată până când ajungeți cu un aspect care vă place.

Nu uitați să defilați în jos la Setările generale și să ștergeți 5 din Numărul maxim de imagini . Salvați galeria nou editată și copiați codul scurt din dreapta.

️ Afișează-ți galeria

Prima afișare pe care o vom face este galeria integrală.

Mergeți la tabloul de bord WordPress și selectați Pagini > Adăugați nou . Această pagină va servi ca afișare integrală a galeriei de imagini. Dați-i un titlu sugestiv și inserați shortcode-ul în blocul Shortcode .

Apoi, apăsați butonul Publicare sau Actualizare . După aceea, copiați adresa URL a acestei pagini. Vom avea nevoie de această adresă URL în scurt timp.

Mergeți la pagina în care doriți să fie afișată galeria de imagini asemănătoare Airbnb și inserați codul scurt al primei galerii pe care am creat-o.

Ultimul lucru pe care trebuie să-l facem este să legăm aceste două galerii. Mergeți la Modula > Galerii și selectați prima galerie creată de noi. Faceți clic pe pictograma creion pentru a edita prima imagine.

Odată ajuns în secțiunea de editare, inserați adresa URL completă a paginii galeriei în caseta URL. Faceți clic pe butonul Salvare&Închidere.

Repetați acest proces cu următoarele patru imagini și nu uitați să faceți clic pe butonul Actualizare galerie.

Mergeți pe pagina dvs. și vedeți galeria de imagini asemănătoare cu Airbnb nou creată

Rezultate finale

După cum puteți vedea, vă puteți apropia foarte mult de designul galeriei de imagini Airbnb cu Modula. De la aspectul cu cinci imagini, cu o mică spațiere între ele, până la caseta de lumină cu subtitrări, săgeți de navigare, butoane de partajare socială și chiar și pagina intermediară, care conține toate imaginile afișate într-o grilă personalizată.

Modula este un plugin versatil pentru galerie de imagini care depășește și mai multe funcții și setări pentru a vă duce galeria de imagini la nivelul următor.

Gânduri finale

Un site web bine conceput poate influența semnificativ câți vizitatori convertesc și folosesc din nou serviciile dvs. Cu pluginul potrivit și câțiva pași simpli, puteți crea rapid o galerie de imagini WordPress inspirată de Airbnb. Acest tip de galerie este o metodă grozavă de a arăta imagini de înaltă calitate și de a oferi vizitatorilor site-ului dvs. o experiență de utilizare prietenoasă.

Indiferent dacă îți folosești galeria pentru închirieri de vacanță, listări imobiliare sau orice alt motiv, Modula este cel mai bun plugin WordPress pentru a crea o galerie de imagini inspirată de Airbnb, care atrage și implică vizitatorii site-ului tău.

Obțineți Modula astăzi și începeți să vă personalizați galeriile de imagini!