Memberi Label pada Sudut Gambar dalam Kotak Galeri yang Menakjubkan dengan Divi

Mencari cara unik dan indah untuk menampilkan gambar di galeri di situs web Anda? Jika demikian, kami yakin Anda akan menyukai posting ini. Kami akan menunjukkan cara memotong sudut gambar dengan Modul Teks sebagai bagian dari desain cantik yang tetap 100% responsif di semua ukuran layar. Ini adalah cara yang bagus untuk menambahkan label bernomor ke gambar Anda sambil mempertahankan desain yang mengagumkan. Anda juga dapat mengunduh file JSON dari contoh desain secara gratis.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Unduh Tata Letak Bagian Galeri GRATIS

Untuk mendapatkan tata letak bagian galeri gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi

Tambahkan Bagian Baru

Jarak

Hal pertama yang perlu Anda lakukan adalah menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tambahkan warna latar belakang putih berikutnya.

• Warna Latar Belakang: #ffffff

Perekat

Pindah ke pengaturan ukuran dan hapus semua ruang antara kolom, baris, dan bagian dengan menerapkan pengaturan berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Lanjutkan dengan menghapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Kolom 1, 2, 3 & 4 Elemen Utama

Sekarang, untuk memastikan struktur 4 kolom disimpan di semua ukuran layar, kita akan memastikan setiap kolom mempertahankan lebar 25% dengan menambahkan baris kode CSS berikut ke setiap elemen utama kolom satu per satu:

width: 25% !important;

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar 1:1

Saatnya mulai menambahkan modul! Tambahkan Modul Gambar baru ke kolom pertama dan unggah gambar persegi pilihan Anda (atau gunakan yang dapat Anda temukan di folder zip yang dapat Anda unduh di awal posting ini).

Kotak lampu

Aktifkan opsi lightbox di pengaturan tautan selanjutnya.

• Buka di Lightbox: Ya

Perekat

Untuk memastikan gambar tetap responsif di semua ukuran layar, kami juga akan mengaktifkan opsi 'Paksa Lebar Penuh'.

• Paksa Lebar Penuh: Ya

Filter Bawaan

Kami juga mengubah kecerahan.

• Kecerahan: 50%

Arahkan Filter

Dan kami akan mengembalikannya ke '100%' saat mengarahkan kursor.

• Kecerahan: 100%

Indeks Z Default

Pindah ke pengaturan visibilitas dan pastikan Indeks Z tetap '0' dalam keadaan default.

• Indeks Z: 0

Arahkan ke Indeks Z

Tapi, saat mengarahkan kursor, kami ingin itu tumpang tindih dengan Modul Teks label bernomor yang akan kami tambahkan di langkah selanjutnya. Untuk melakukan itu, kami akan meningkatkan nilai Indeks Z hover.

• Indeks Z: 100

Modul Gambar Klon 3 Kali & Tempat di Kolom Tersisa

Setelah Anda menyelesaikan Modul Gambar di kolom 1, Anda dapat mengkloningnya tiga kali. Tempatkan duplikat di tiga kolom baris yang tersisa.

Ubah Gambar

Mengubah gambar dalam duplikat.

Tambahkan Margin Atas ke Modul Gambar di Kolom 2

Dan tambahkan margin atas ke Modul Gambar di kolom kedua.

• Margin Atas: 24.7vw

Tambahkan Modul Teks Di Bawah Modul Gambar #1

Tambah isi

Modul selanjutnya yang kita butuhkan di kolom 1 adalah Modul Teks. Tambahkan nomor ke kotak konten.

Warna latar belakang

Ubah warna latar belakang berikutnya. Warna ini harus cocok dengan warna latar belakang apa pun yang Anda tetapkan ke baris.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks.

• Font Teks: Lora
• Perataan Teks: Kanan
• Warna Teks: #000000
• Ukuran Teks: 3vw
• Tinggi Baris Teks: 3vw

Perekat

Kami juga mengecilkan lebar modul.

• Lebar: 7vw

Jarak

Buat beberapa ruang untuk modul di pengaturan spasi berikutnya.

• Padding Atas: 0.5vw
• Padding Bawah: 2.5vw
• Padding Kanan: 0.9vw

Indeks Z

Dan meningkatkan Indeks Z.

• Indeks Z: 99

Modul Teks Klon 3 Kali

Setelah Anda menyelesaikan langkah-langkah umum untuk Modul Teks, Anda dapat mengkloningnya tiga kali.

Pemosisian

Posisikan duplikat sesuai:

Sesuaikan Modul Teks

Modul Teks #1

Margin Teratas Negatif

Saatnya untuk mulai menyesuaikan Modul Teks yang berbeda sesuai dengan posisinya! Buka Modul Teks di kolom 1 dan tambahkan beberapa margin atas negatif.

• Margin Atas: -5.9vw

Bayangan Kotak

Kami juga menambahkan bayangan kotak menggunakan pengaturan berikut:

• Posisi Horizontal Bayangan Kotak: 7vw
• Posisi Vertikal Bayangan Kotak: 5.9vw
• Kekuatan Penyebaran Bayangan Kotak: 0px
• Warna Bayangan: rgba (35,50,255,0,94)

Modul Teks #2

Ubah Penomoran

Lanjutkan dengan membuka Modul Teks di kolom kedua dan ubah nomornya.

Perataan Teks

Ubah perataan teks juga.

• Perataan Teks: Kiri

Penyelarasan Modul

Dan ubah perataan modul dalam pengaturan ukuran.

• Penyelarasan Modul: Kanan

Jarak

Pindah ke pengaturan spasi dan tambahkan beberapa margin atas negatif. Tambahkan padding ke kiri, bukan di sisi kanan juga.

• Margin Atas: -6vw
• Padding Kiri: 0.9vw

Bayangan Kotak

Lengkapi desain Modul Teks dengan menambahkan bayangan kotak.

• Posisi Horizontal Bayangan Kotak: 7vw
• Posisi Vertikal Bayangan Kotak: -6vw
• Kekuatan Penyebaran Bayangan Kotak: 0px
• Warna Bayangan: #ededed

Modul Teks #3

Ubah Penomoran

Ke Modul Teks di kolom 3! Ubah nomor di kotak konten.

Margin Teratas Negatif

Pindah ke tab desain dan tambahkan beberapa margin atas negatif.

• Margin Atas: -6vw

Bayangan Kotak

Gunakan bayangan kotak juga.

• Posisi Horizontal Bayangan Kotak: -7vw
• Posisi Vertikal Bayangan Kotak: -6vw
• Kekuatan Penyebaran Bayangan Kotak: 0px
• Warna Bayangan: #ff2323

Modul Teks #4

Ubah Penomoran

Ke Modul Teks berikutnya dan terakhir. Ubah nomor di sini juga.

Perataan Teks

Kemudian, ubah perataan teks.

• Perataan Teks: Kiri

Penyelarasan Modul

Ubah penyelarasan modul dalam pengaturan ukuran juga.

• Penyelarasan Modul: Kanan

Ubah Spasi

Ubah pengaturan spasi berikutnya.

• Margin Atas: 24.7vw
• Margin Bawah: -6vw
• Padding Kiri: 0.9vw

Bayangan Kotak

Dan lengkapi desain Modul Teks dengan menambahkan bayangan kotak dengan pengaturan sebagai berikut:

• Posisi Horizontal Bayangan Kotak: -7vw
• Posisi Vertikal Bayangan Kotak: -5.9vw
• Kekuatan Penyebaran Bayangan Kotak: 0px
• Warna Bayangan: #000000

Klon Seluruh Baris

Setelah Anda menyelesaikan baris, Anda dapat mengkloningnya sebanyak yang Anda inginkan, tergantung pada berapa banyak gambar yang ingin Anda tampilkan.

Ubah Penomoran & Gambar

Pastikan Anda mengubah semua gambar dan angka dan selesai!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat galeri yang tampak bagus dengan sudut gambar berlabel. Ini adalah cara unik untuk menampilkan gambar Anda dengan cara yang menarik secara estetika. Anda juga dapat mengunduh file JSON di awal tutorial. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.