Cara Membangun Galeri Gambar Terinspirasi Airbnb di WordPress

Apakah Anda pengguna WordPress dan memperhatikan betapa bagusnya tampilan galeri gambar yang digunakan oleh platform persewaan populer Airbnb? Jika Anda ingin menirunya di situs web Anda, tidak perlu mencari lagi! Anda dapat memperbanyaknya dengan cepat menggunakan alat yang tepat dan beberapa langkah sederhana dalam waktu kurang dari 10 menit.

Apakah Anda seorang pengguna WordPress berpengalaman atau pemula, tutorial ini akan memberi Anda semua yang perlu Anda ketahui untuk memulai!

Artikel ini akan mengajarkan Anda hal-hal berikut:

• Cara menginstal Modula
• Cara membuat galeri gambar di Modula
• Cara menyesuaikan galeri gambar agar terlihat seperti galeri gambar Airbnb
• Dan banyak lagi …

Desain Galeri Airbnb

Desain situs web yang ringkas dan kuat sangat penting untuk keberhasilannya dalam menciptakan konversi dan mengubah pelanggan menjadi pelanggan tetap. Dan itulah tujuan Airbnb dengan galeri gambar daftar mereka.

Mari telusuri mengapa galeri gambar Airbnb menjadi populer:

• Bidikan lokasi profesional berkualitas tinggi
• Tata letak gambar utama yang sederhana, bersih, dan mudah digunakan
• Tampilan bersih dari galeri lengkap
• Kemampuan untuk menavigasi semua foto dengan mudah melalui lightbox
• Menampilkan keterangan atau deskripsi untuk setiap gambar
• Efek transisi gambar lightbox
• Opsi berbagi galeri melalui berbagai saluran
• Panah navigasi

Untungnya, Anda dapat dengan mudah membuat ulang gambar gaya galeri Airbnb di WordPress dengan plugin Modula. Tweak beberapa pengaturan mudah dan hanya itu! Teruslah membaca, dan Anda akan melihat betapa mudahnya melakukannya dan mengubah galeri gambar Anda menjadi galeri gambar seperti Airbnb.

Bangun Galeri Gambar Menakjubkan Seperti Di Airbnb

Anda memerlukan situs web WordPress dan penyedia hosting untuk menyiapkan galeri gambar Anda, jadi sangat penting untuk mengingatnya sebelum melanjutkan dengan langkah-langkahnya. Anda dapat dengan cepat membangun situs web jika Anda belum memilikinya dengan mengikuti petunjuk di panduan instalasi WordPress.

Setelah situs web Anda aktif dan berjalan, Anda harus memilih plugin untuk membantu membuat galeri gambar Anda. Meskipun ada plugin galeri gambar lain di repositori WordPress, Modula adalah yang kami sarankan untuk digunakan. Plugin ini memiliki banyak opsi penyesuaian, versi gratis dengan fitur dasar, dan mudah digunakan.

Membuat galeri gambar jenis ini memerlukan beberapa setelan yang dapat Anda buka kuncinya dengan membeli paket Pemula seharga $39. Setelah Anda melakukan pembelian, ada empat langkah utama untuk membuat dan menampilkan galeri seperti di Airbnb.

️ Instal Modula

Langkah pertama adalah menginstal dan mengaktifkan Modula. Untuk melakukannya, buka WordPress Dashboard > Plugins > Add New .

Anda akan melihat bilah pencarian di sudut kanan atas halaman yang baru dibuka. Setelah Anda mengetik 'Modula', itu akan segera muncul di hasil pencarian pertama. Klik tombol Instal Sekarang untuk memulai instalasi.

️ Buat galeri gambar

Setelah Anda menginstal dan mengaktifkan Modula, saatnya membuat galeri mirip Airbnb Anda. Buka Dasbor WordPress Anda, lalu pilih Modula > Galeri .

Dari sana, pilih Tambah Baru untuk mulai membuat galeri Anda.

Anda akan dialihkan ke jendela baru tempat Anda dapat menambahkan judul ke galeri Anda dan memilih Unggah file gambar jika Anda ingin mengunggah gambar baru atau Pilih dari Perpustakaan jika Anda menggunakan gambar yang sudah diimpor.

Setelah gambar Anda ditambahkan ke galeri, Anda akan melihatnya seperti ini. Dari sini, kita dapat mulai menyesuaikan galeri dan membuatnya sedekat mungkin dengan galeri gambar Airbnb.

️ Edit galeri gambar

Inilah bagian yang menyenangkan. Modula memiliki berbagai opsi penyesuaian, jadi membuatnya dekat dengan desain galeri gambar Airbnb akan sangat mudah.

Pertama, saat Anda mengeklik iklan Airbnb, Anda akan disambut dengan sejumlah gambar – tepatnya lima – yang membuka lightbox berisi semua gambar galeri saat diklik. Untuk membuatnya kembali, gulir ke bawah dalam mode edit galeri Modula dan lihat semua pengaturan penyesuaian Modula.

Secara default, tipe galeri diatur ke Creative Gallery, tetapi sekarang kita perlu mengaturnya ke Custom Grid . Selanjutnya, seret sudut dari lima gambar pertama dan perluas sehingga terisi seperti ini.

Untuk membatasi jumlah gambar yang akan Anda lihat sekilas, Anda akan menemukan bagian Max Images Count di bawah tab General . Lanjutkan dan setel ke lima.

Selanjutnya, kami melihat beberapa spasi di antara gambar galeri Airbnb. Untuk mencapai sesuatu yang serupa, turunkan nilai Gutter beberapa piksel. Secara default, ini diatur ke 10px, tetapi Anda dapat mengurangi nilai desktop menjadi 8. Anda juga dapat bermain-main dengan nilai tablet dan ponsel untuk melihat mana yang lebih baik.

Setelah itu, buka tab Lightbox & Tautan dan aktifkan tombol Tampilkan semua gambar untuk menampilkan semua gambar galeri Anda saat Anda membuka lightbox. Jika Anda melewati langkah ini, lightbox Anda hanya akan menggilir lima gambar pertama.

Selanjutnya, kami melihat efek hover yang bagus saat Anda mengarahkan mouse ke galeri Airbnb. Dengan Modula, Anda dapat mengedit tampilan mouse hover. Buka tab Hover effects , atur warna hover ke abu-abu yang lebih gelap, dan turunkan opacity menjadi 25%.

Anda juga dapat mengubah ikon Kursor saat mengarahkan mouse ke gambar menjadi ikon penunjuk seperti di Airbnb.

Untuk memudahkan orang menelusuri gambar, Anda dapat mengaktifkan pengaturan berikut di bawah Lightbox & Tautan: Tombol gambar mini , Gambar mini mulai otomatis , Gambar mini di bagian bawah.

Beberapa tempat Airbnb dapat menampilkan keterangan di bawah setiap gambar. Modula memungkinkan Anda mengatur teks dengan mudah. Jangan lupa klik pada Show image caption di bawah pengaturan Lightbox & Links. Anda bahkan bisa mengatur posisi caption untuk ditampilkan di kiri, kanan, atau tengah lightbox. Di bawah tab Teks , Anda akan memiliki lebih banyak opsi untuk mengedit teks Anda. Anda dapat mengatur warna, font, ukuran font, gaya font, dan bahkan ukuran font untuk versi seluler.

Saat Anda membuka lightbox di galeri Airbnb, Anda dapat melihat tombol navigasi untuk membantu Anda menelusuri galeri gambar. Modula juga menawarkan fungsi ini kepada Anda. Aktifkan pengaturan tombol Navigasi di bawah tab Lightbox & Tautan.

Mengenai lightbox di Airbnb, Anda akan melihat warna latar belakang hitam pekat. Anda juga dapat mencapainya dengan Modula. Di bawah tab Lightbox & Tautan yang sama, gulir ke bawah hingga Anda melihat warna latar Lightbox . Di sini Anda dapat mengatur warna apa pun yang Anda suka dan menentukan opacity atau menjadikannya warna solid.

Airbnb memiliki tombol berbagi di lightbox untuk membagikan daftar di berbagai saluran sosial. Modula juga memiliki fungsi ini, menawarkan akses ke beberapa platform paling populer. Di bawah tab Lightbox & Tautan yang sama, setelah Anda mengaktifkan opsi tombol Bagikan , Anda akan melihat enam opsi berbagi baru muncul: Facebook, Twitter, Pinterest, WhatsApp, LinkedIn, dan Email. Anda dapat memilih satu per satu mana yang ingin Anda tampilkan di galeri Anda.

Lightbox di Airbnb memiliki tombol tutup yang terlihat yang dapat diklik pengguna untuk menutup galeri lightbox. Anda juga dapat menampilkan tombol tutup dengan Modula.

Terakhir, jangan lupa klik Perbarui Galeri untuk menyimpan pengaturan.

Setelah Anda mengeklik salah satu dari lima gambar teratas yang ditampilkan di Airbnb, Anda akan dialihkan ke seluruh galeri gambar. Hanya setelah Anda mengklik lagi salah satu gambar, lightbox akan muncul. Untuk mencapainya dengan Modula, Anda dapat pergi ke Galeri dan memilih galeri Duplikat yang baru saja Anda buat. Yang baru akan muncul, dan selanjutnya kita dapat menyesuaikannya.

Dengan galeri yang baru dibuat, lanjutkan dan bermain-main dengan grid kustom sampai Anda mendapatkan tata letak yang Anda sukai.

Jangan lupa scroll ke bawah ke General settings dan hapus 5 di Max Images Count . Simpan galeri yang baru diedit dan salin kode pendek di sebelah kanan.

️ Tampilkan galeri Anda

Tampilan pertama yang akan kita lakukan adalah galeri secara lengkap.

Buka Dashboard WordPress Anda dan pilih Pages > Add New . Halaman ini akan berfungsi sebagai tampilan galeri gambar secara lengkap. Berikan judul yang sugestif dan rekatkan kode pendek di blok Kode pendek .

Selanjutnya, tekan tombol Terbitkan atau Perbarui . Setelah itu, salin URL halaman ini. Kami akan membutuhkan URL ini sebentar lagi.

Buka halaman yang Anda inginkan untuk menampilkan galeri gambar seperti Airbnb dan rekatkan kode pendek dari galeri pertama yang kami buat.

Hal terakhir yang harus kita lakukan adalah menghubungkan kedua galeri ini. Buka Modula > Galeri dan pilih galeri pertama yang kami buat. Klik ikon pensil untuk mengedit gambar pertama.

Setelah berada di bagian pengeditan, rekatkan URL halaman galeri lengkap di kotak URL. Klik tombol Simpan & Tutup.

Ulangi proses ini dengan empat gambar berikut, dan jangan lupa klik tombol Perbarui Galeri.

Buka halaman Anda dan lihat galeri gambar mirip Airbnb yang baru Anda buat

Hasil akhir: Airbnb vs. Modula

Seperti yang Anda lihat, Anda bisa sangat dekat dengan desain galeri gambar Airbnb dengan Modula. Dari tata letak lima gambar dengan sedikit jarak di antaranya hingga lightbox dengan teks, panah navigasi, tombol berbagi sosial, dan bahkan halaman perantara, yang berisi semua gambar yang ditampilkan dalam kisi khusus.

Modula adalah plugin galeri gambar serbaguna yang melampaui lebih banyak fitur dan pengaturan untuk membawa galeri gambar Anda ke tingkat berikutnya.

Pikiran Akhir

Situs web yang dirancang dengan baik dapat secara signifikan memengaruhi berapa banyak pengunjung yang berkonversi dan menggunakan layanan Anda lagi. Dengan plugin yang tepat dan beberapa langkah mudah, Anda dapat dengan cepat membuat galeri gambar WordPress yang terinspirasi dari Airbnb. Jenis galeri ini adalah cara yang bagus untuk menampilkan gambar berkualitas tinggi dan memberikan pengalaman pengguna yang ramah kepada pengunjung situs web Anda.

Apakah Anda menggunakan galeri Anda untuk persewaan liburan, daftar real estat, atau alasan lainnya, Modula adalah plugin WordPress terbaik untuk membuat galeri gambar yang terinspirasi dari Airbnb yang menarik dan melibatkan pengunjung situs web Anda.

Dapatkan Modula hari ini dan mulailah menyesuaikan galeri gambar Anda!