6 Desain Perbatasan Unik untuk Gambar Modul Galeri Divi Anda

Modul Galeri Divi adalah tempat yang tepat untuk menampilkan galeri gambar di situs web Anda. Secara default, modul galeri akan menampilkan gambar Anda dalam tata letak kotak tanpa banyak gaya sama sekali yang sangat bagus untuk menjaga gambar sebagai elemen desain utama. Namun, jika Anda ingin sedikit kreatif, Anda dapat membingkai gambar Anda dengan desain perbatasan yang berbeda untuk membantu membuat galeri gambar Anda menonjol. Modul Galeri membuat proses ini cukup mudah dilakukan dan hasilnya mungkin mengejutkan Anda.

Dalam tutorial ini, saya akan menunjukkan cara membuat desain perbatasan unik untuk galeri gambar Anda menggunakan modul Galeri Divi.

Mari kita mulai!

Sneak Peek

Galeri Gambar Polaroid #1

Mulai Desain Bangunan #1

#2 Desain Grid Bersih

Mulai Desain Bangunan #2

#3 Gambar Latar Belakang Kustom Di Balik Seluruh Galeri

Mulai Desain Bangunan #3

#4 Gambar Latar Belakang Kustom Di Balik Setiap Item Galeri

Mulai Desain Bangunan #4

#5 Kotak Bayangan dan Kombo Perbatasan

Mulai Desain Bangunan #5

#6 Desain Perbatasan Strip Film

Mulai Desain Bangunan #6

Apa yang Anda Butuhkan untuk Memulai

Berlangganan Saluran Youtube Kami

Untuk tutorial ini, Anda perlu menginstal dan mengaktifkan tema Divi. Anda juga memerlukan 12 gambar yang ditambahkan ke perpustakaan media Anda untuk digunakan membangun galeri gambar. Untuk modul galeri Divi yang menggunakan tata letak kotak, ukuran gambar Anda harus sekitar 1500px kali 800px jika Anda berencana untuk membuka gambar di tampilan lightbox sehingga memenuhi layar dengan baik di sebagian besar desktop.

Menyiapkan Halaman Baru Anda

Sebagai permulaan, Anda perlu membuat halaman baru, memberi judul pada halaman Anda, dan menggunakan Divi Builder. Pilih opsi "Bangun dari Awal" dan kemudian publikasikan halaman Anda. Kemudian klik untuk membangun di ujung depan.

Menyimpan Template modul Galeri Divi

Karena kita akan mendesain 5 gaya batas yang berbeda untuk modul Galeri Divi, akan sangat membantu jika template modul galeri dasar disimpan ke perpustakaan kita sehingga kita tidak perlu memulai dari awal setiap kali kita mendesain galeri baru .

Buat bagian baru dengan satu baris kolom lalu tambahkan Modul Galeri ke baris tersebut.

Divi akan mengisi modul galeri dengan beberapa gambar dari galeri media Anda dalam tampilan grid seperti berikut:

Dalam pengaturan modul galeri, klik ikon plus abu-abu untuk menambahkan 12 gambar ke galeri. Saya menggunakan gambar dari Tata Letak Halaman Galeri Restoran.

Kemudian perbarui pengaturan Modul Galeri Divi sebagai berikut:

Nomor Gambar: 12
Tampilkan Judul dan Keterangan: TIDAK
Tampilkan Pagination: TIDAK

Ini akan berfungsi sebagai template yang baik untuk bergerak maju. Untuk menyimpan modul Galeri ke Perpustakaan Divi Anda, klik ikon Simpan ke Perpustakaan di menu modul abu-abu saat mengarahkan kursor ke modul. Kemudian beri nama template "Gallery Module Template" dan simpan ke perpustakaan.

Saat Anda ingin menambahkan modul galeri yang disimpan ke halaman Anda, yang perlu Anda lakukan hanyalah mengklik untuk menambahkan modul baru seperti biasa. Kemudian pilih tab Add from Library di popup dan klik pada modul galeri dengan nama “Gallery Module Template”.

Itu dia. Sekarang mari kita ke desain perbatasan itu!

Galeri Gambar Polaroid #1

Desain berikutnya adalah perbatasan populer untuk gambar yang terlihat seperti gambar polaroid. Ini adalah tata letak yang sangat berguna jika Anda ingin menampilkan judul gambar Anda.

Berikut cara melakukannya.

Pengaturan Bagian

Buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan Template Modul Galeri Divi yang disimpan dari perpustakaan (dijelaskan di atas). Sebelum mengedit modul Galeri, buka pengaturan bagian dan tambahkan warna latar belakang abu-abu sehingga batas putih kita akan sedikit menonjol.

Latar belakang: #dddddd

Pengaturan Baris

Selanjutnya perbarui pengaturan baris dengan yang berikut:

Lebar Talang: 1

Ini akan menghilangkan jarak margin default antara gambar. Kami akan menambahkan jarak kustom kami sendiri nanti.

Pengaturan Modul Galeri

Buka pengaturan modul Galeri dan perbarui yang berikut ini:

Tampilkan Judul dan Caption: YA

Judul Font Berat: Tebal
Judul Font Gaya: TT
Perataan Teks Judul: Tengah
Tinggi Baris Judul: 2em

Gambar Lebar batas atas: 10px
Gambar Warna batas atas: #ffffff
Gambar Lebar batas kiri: 10px
Gambar Warna batas kiri: #ffffff
Gambar Lebar batas kanan: 10px
Gambar Warna batas kanan: #ffffff

Untuk membuat jarak antara gambar kita, tambahkan batas berikut ke item galeri:

Lebar Perbatasan: 10px
Warna Perbatasan: #dddddd (cocok dengan warna latar belakang bagian)

Untuk mewarnai bagian bawah desain perbatasan polaroid kita, kita perlu menambahkan latar belakang putih ke modul.

Warna Latar Belakang: #ffffff

Hasil Akhir

Berikut adalah hasil akhir dari desain border polaroid.

#2 Desain Grid Bersih

Jika Anda mencari gaya kisi yang sederhana dan bersih untuk gambar Anda, desain perbatasan ini adalah pilihan yang bagus. Ini seimbang dan nyaman di mata.

Berikut cara melakukannya.

Buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan Template Modul Galeri Divi yang disimpan dari perpustakaan (dijelaskan di atas).

Pengaturan Baris

Sebelum mengedit modul Galeri, buka pengaturan bagian dan perbarui yang berikut ini:

Lebar Talang: 1
Padding Kustom: 0px atas, 0px bawah
Lebar Perbatasan: 10px
Warna Batas: #dddddd

Batas baris ini diperlukan untuk mencocokkan jarak luar galeri kita dengan jarak antar gambar.

Pengaturan Modul Galeri

Sekarang buka pengaturan modul galeri dan tambahkan batas ke item galeri dan gambar galeri Anda dengan memperbarui yang berikut:

Lebar batas gambar: 20px
Warna batas gambar: #ffffff

Lebar Perbatasan: 10px
Warna batas: transparan (ini penting untuk menunjukkan warna latar belakang)

Sekarang tambahkan warna latar belakang ke modul galeri untuk menyelesaikan desain.

Warna latar belakang: #dddddd (ini cocok dengan warna batas baris)

Karena batas item galeri Anda transparan, itu mewarisi warna latar belakang.

Desain Akhir

Mengubah Warna Perbatasan dengan Mengubah Warna Latar Belakang

Jika Anda ingin bermain-main dengan warna perbatasan yang berbeda, Anda dapat memperbarui warna latar belakang sesuai keinginan Anda. Tapi, Anda harus menghapus batas baris, tambahkan spasi berikut ke modul:

Padding Kustom: 10px atas, 10px bawah, 10px kiri, 10px kanan

Sekarang Anda dapat menyesuaikan warna latar belakang dengan apa pun yang Anda inginkan:

#3 Gambar Latar Belakang Kustom Di Balik Seluruh Galeri

Desain ini memungkinkan Anda untuk menggunakan gambar latar belakang sebagai semacam latar belakang tekstur untuk batas gambar Anda. Ini adalah cara yang bagus untuk membuat setiap batas gambar unik karena menunjukkan area tertentu dari gambar latar belakang modul. Setup sangat mirip dengan Clean Grid Design di atas.

Berikut cara melakukannya.

Buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan Template Modul Galeri Divi yang disimpan dari perpustakaan (dijelaskan di atas).

Pengaturan Baris

Sebelum mengedit modul Galeri, buka pengaturan bagian dan perbarui yang berikut ini:

Lebar Talang: 1
Padding Kustom: 0px atas, 0px bawah

Pengaturan Modul Galeri

Sekarang perbarui pengaturan Modul Galeri sebagai berikut:

Gambar Latar Belakang: [tambahkan gambar] (Anda belum dapat melihatnya)
Warna latar belakang: #dddddd (ini hanya ditampilkan jika Anda menggunakan gambar latar png dengan transparansi)
Lebar Batas Gambar: 10px
Warna Batas Gambar: #ffffff

Lebar Batas (untuk modul): 10px
Warna Perbatasan: #ffffff

Kemudian tambahkan CSS Kustom berikut ke Item Galeri:

padding: 3%;

Ini menciptakan pemisahan antara item galeri untuk melengkapi desain.

Hasil Akhir

#4 Gambar Latar Belakang Kustom Di Balik Setiap Item Galeri

Desain ini memungkinkan Anda untuk menggunakan gambar latar belakang sebagai batas untuk setiap item galeri satu per satu. Anda dapat membuat gambar kustom apa pun yang Anda inginkan atau menggunakan salah satu gambar latar belakang yang disertakan dalam tata letak kami yang telah dibuat sebelumnya. Saya menggunakan salah satu dari Tata Letak Halaman Arahan Meetup.

Berikut cara melakukannya.

Buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan Template Modul Galeri Divi yang disimpan dari perpustakaan (dijelaskan di atas).

Pengaturan Baris

Sebelum mengedit modul Galeri, buka pengaturan bagian dan perbarui yang berikut ini:

Jadikan Baris Ini Lebar Penuh: YA
Lebar Talang: 2

Pengaturan Modul Galeri

Sekarang perbarui pengaturan Modul Galeri sebagai berikut:

Lebar Batas Gambar: 10px
Warna Batas Gambar: #ffffff

Kemudian tambahkan CSS khusus berikut ke Item Galeri:

padding: 30px;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: right;

Selanjutnya Anda perlu mengunggah gambar latar belakang khusus yang ingin Anda tempatkan di belakang setiap item galeri Anda. Untuk contoh ini, saya menggunakan gambar dari salah satu paket tata letak premade kami. Setelah gambar diunggah ke galeri Media WordPress, salin URL gambar ke clipboard Anda.

Sekarang kembali dan buka pengaturan modul galeri dan tempel URL di CSS khusus di mana dikatakan "masukkan url gambar di sini". Pastikan Anda menyimpan url di dalam kutipan.

Hasil Akhir

Berikut adalah hasil akhirnya.

#5 Kotak Bayangan dan Kombo Perbatasan

Bayangan kotak sangat bagus untuk memberi galeri Anda bakat khusus. Anda dapat menggunakan bayangan kotak pada gambar modul galeri Divi untuk membuat desain kisi rusak yang membingkai gambar dengan cara yang unik. Anda juga dapat menggabungkan bayangan kotak dengan desain perbatasan untuk semua jenis kemungkinan.

Berikut cara melakukannya.

Buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan Template Modul Galeri Divi yang disimpan dari perpustakaan (dijelaskan di atas).

Tambahkan Perbatasan Gambar dan Bayangan Kotak

Buka pengaturan Galeri dan perbarui yang berikut ini:

Lebar Batas Gambar: 10px
Warna Batas Gambar: #ffffff

Bayangan Kotak Gambar: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: -30px
Posisi Vertikal Bayangan Kotak: -30px
Kekuatan Penyebaran Bayangan Kotak: -10px
Warna Bayangan: #e08474

Tambahkan Batas Item Galeri

Desain bayangan kotak terlihat bagus seperti sekarang. Namun, Anda juga dapat menambahkan batas tambahan untuk item galeri Anda dengan memperbarui hal berikut:

Lebar Batas Kanan: 7px
Warna Tepi Kanan: #dddddd
Gaya Perbatasan Kanan: Bertitik
Lebar Batas Bawah: 7px
Warna Batas Bawah: #dddddd
Gaya Perbatasan Bawah: Dotted

Saya menambahkan gaya batas putus-putus hanya untuk mengingatkan Anda tentang berbagai gaya yang tersedia. Jangan ragu untuk menggunakan gaya lain (seperti solid atau putus-putus).

Pengaturan Baris

Untuk memberi lebih banyak ruang pada desain Anda, buka pengaturan baris dan perbarui yang berikut:

Buat Baris Penuh Lebar: YA

Desain Akhir

Berikut adalah desain akhir.

#6: Desain Perbatasan Strip Film

Untuk desain terakhir ini, saya pikir saya akan menunjukkan sesuatu yang sedikit lebih unik. Desain ini menggunakan gaya garis putus-putus hanya pada sisi kanan dan kiri item galeri yang membagi setiap kolom gambar sedemikian rupa sehingga menyerupai strip film.

Berikut cara melakukannya.

Buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan Template Modul Galeri Divi yang disimpan dari perpustakaan (dijelaskan di atas).

Pengaturan Baris

Sebelum mengedit modul Galeri, buka pengaturan baris dan ubah lebar talang menjadi 1.

Lebar Talang: 1

Ini akan menghilangkan jarak margin default antara gambar Anda.

Pengaturan Modul Galeri

Selanjutnya, buka pengaturan Galeri dan perbarui yang berikut:

Tambahkan Batas Gambar Bergaris

Lebar Perbatasan Kanan Gambar: 8px
Warna Tepi Kanan Gambar: #dddddd
Gambar Gaya Perbatasan Kanan: Bergaris-garis
Lebar Batas Kiri Gambar: 8px
Warna Batas Kiri Gambar: #dddddd
Gambar Gaya Batas Kiri: Bergaris-garis

Tambahkan Batas Item Galeri untuk spasi

Lebar Batas Kiri: 20px
Warna Batas Kiri: #ffffff
Lebar Batas Kanan: 20px
Warna Tepi Kanan: #ffffff

Tambahkan Bayangan Kotak Gambar

Bayangan Kotak Gambar: lihat tangkapan layar
Kekuatan Buram Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: -10px
Warna Bayangan: #222222

Tambahkan Warna Latar Belakang

Warna Latar Belakang: #222222

Kemudian tambahkan CSS khusus berikut ke Item Galeri:

padding: 5px 10px;

Hasil akhir

Sekarang lihat hasilnya.

Pikiran Akhir

Saya harap enam contoh desain perbatasan ini akan memberikan beberapa inspirasi untuk membuat beberapa desain perbatasan khusus untuk gambar Anda saat menggunakan Modul Galeri Divi. Setelah Anda mendapatkan pengaturan yang tersedia dengan modul Galeri Divi, yang diperlukan hanyalah sedikit kreativitas. Jadi, bersenang-senanglah menjelajahi opsi desain baru Anda sendiri dengan gambar, warna, dan jarak yang berbeda.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!