Dapatkan Hosting Instan dengan Elementor dan Elementor Pro

dengan CDN, SSL dan cadangan.

Mulai hari ini

Cara Menampilkan Info Gambar Galeri Dengan Efek Slide Down Pada Divi

Rifat Divi Tutorials Oct 16, 2021

Gambar selalu memiliki dampak besar pada desain, dan mungkin situs web Anda memiliki seluruh galeri. Divi melepaskan kekuatan besar dengan modulnya, dan modul galeri Divi sangat cocok untuk presentasi gambar apa pun. Ini terorganisir dan memungkinkan Anda menampilkan gambar langsung dari perpustakaan media. Hari ini, kita akan belajar cara membuat info gambar dengan efek slide-down yang terbuka di Divi dengan mengarahkan kursor ke gambar. Ini adalah desain yang efektif untuk fotografer, manajemen acara, bisnis real estat, dll. Ini adalah desain yang responsif, tetapi kami akan melakukan beberapa penyesuaian untuk perangkat yang lebih kecil selama desain. Jadi, mari kita beralih ke sneak peek dan kemudian kita akan belajar cara membuat desain seperti itu.

Sneak Peek

Mari kita lihat desain hari ini sebelum kita melanjutkan.

Bagian 1: Unggah Gambar

Perpustakaan Media

Untuk mulai mendesain, kita harus menambahkan gambar ke perpustakaan kita. Untuk itu, buka Perpustakaan dari Media.

Sekarang klik Tambah baru untuk mengunggah gambar baru.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Sekarang tambahkan keterangan dan judul ke gambar. Cobalah untuk membuat batas kata sama untuk semua gambar.

Bagian 2: Merancang

Bagian Satu

Warna latar belakang

Sekarang buka halaman atau buat yang baru untuk membuat desain. Kemudian buka halaman dengan Divi builder dan pilih "build from scratch". Kemudian, kita akan menambahkan warna latar belakang ke bagian awal halaman.

  • Warna Latar Belakang: #ed7171

Menambahkan Baris

Struktur Kolom

Mari kita tambahkan baris dengan struktur berikut.

Jarak

Sebelum kita menambahkan modul apa pun ke kolom, kita perlu mengatur nilai spasi.

  • Margin Atas: 5%
  • Margin Bawah: 5%

Kolom 1: Modul Teks

Konten H2

Sekarang kita akan menambahkan modul teks pada kolom pertama dan menambahkan beberapa konten H2.

Pengaturan Teks H2

Pindah ke tab Desain dan ubah gaya H2.

  • Judul 2 Font: Montserrat
  • Judul 2 Ukuran Teks: Desktop: 62px, Tablet: 48px Dan Telepon: 32px
  • Pos 2 Tinggi Baris: 1.3em

Perekat

Ubah lebar maksimum modul di berbagai ukuran layar juga.

  • Lebar Maks: Desktop: 500px, Tablet: 400px Dan Telepon: 250px

Kolom 1: Modul Pembagi

Visibilitas

Terakhir kita akan menambahkan modul pembagi ke kolom 1. Aktifkan opsi visibilitas.

  • Tampilkan Pembagi: Ya

Garis

Warna garis dari tab desain.

  • Warna Garis: #333333

Perekat

Selanjutnya kita akan mengubah pengaturan ukuran modul pembagi.

  • Berat Pembagi: 5px
  • Lebar Maks: 100px
  • Tinggi: 5px

Kolom 2: Modul Teks

Konten Teks

Sekarang kita akan menambahkan modul teks pada kolom kedua dan menambahkan beberapa salinan

Pengaturan Teks

Kami akan memperbarui pengaturan modul teks .

  • Font Teks: Lato
  • Tinggi Baris Teks: 2.2em

Jarak

Mari tambahkan beberapa margin ke teks kita.

  • Margin Atas: 50px

Bagian Kedua

Sekarang kita akan menambahkan bagian lain di bawah yang pertama.

Latar Belakang Gradien

Mari kita terapkan warna latar belakang gradien ke bagian yang baru kita buat.

  • Warna 1: #ed7171
  • Warna 2: #ffffff
  • Tipe Gradien: Linier
  • Posisi Awal: 20%
  • Posisi Akhir: 20%

Jarak

Dari tab desain bagian, ubah nilai padding.

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

Menambahkan Baris

Struktur Kolom

Mari tambahkan baris menggunakan struktur kolom bertanda ke bagian dua kita.

Warna latar belakang

Sebelum menambahkan modul apa pun, terapkan warna latar belakang ke baris.

  • Warna Latar Belakang: #f4a1a1

Perekat

Sesuaikan nilai ukuran.

  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 2
  • Lebar: 90%
  • Lebar Maks: 1580px

Jarak

Ubah nilai spasi sebagai berikut.

  • Padding Atas: 150px
  • Padding Bawah: 0px
  • Padding Kiri: 5%
  • Padding Kanan: 5%

Menambahkan: Modul Galeri

Pilih Gambar yang Diunggah

Mari dapatkan mode galeri pada baris dan tambahkan gambar yang kami unggah sebelumnya.

Elemen

Kami menyebutkan sebelumnya bahwa kami akan melakukan beberapa penyesuaian selama desain. Karena efek hover hanya berfungsi di desktop. Untuk perangkat yang lebih kecil, sentuhan akan mencoba sebagai efek lightbox. Ini adalah desain yang responsif, tetapi judul dan keterangan akan ditampilkan dalam mode desktop. Juga, kami akan menonaktifkan pagination dari pengaturan elemen.

  • Tampilkan Judul dan Keterangan: Desktop: Ya, Tablet Dan Telepon: Tidak
  • Tampilkan Pagination: Tidak

Tata Letak

Dari tab desain, ubah tata letak modul.

  • Tata Letak: Kotak
  • Orientasi Gambar Mini: Potret

Hamparan

Juga, ubah pengaturan overlay.

  • Warna Ikon Hamparan: #ffffff
  • Warna Latar Belakang Hamparan: rgba(0,0,0,0.25)

Pengaturan Teks

Pindah ke bagian teks untuk mengubah warna teks.

  • Warna Teks: Cahaya

Pengaturan Teks Judul

Kemudian gaya teks judul.

  • Judul Judul Level: H3
  • Judul Font: Montserrat
  • Ukuran Teks Judul: 20px

Pengaturan Teks Keterangan

Kami akan mengubah pengaturan teks.

  • Font Keterangan: Lato
  • Warna Teks Keterangan: #ffffff
  • Spasi Surat Keterangan: 0.5px
  • Tinggi Baris Keterangan: 1.9em

CSS Item Galeri

Dari tab lanjutan, tambahkan kode CSS berikut pada kotak CSS judul item galeri.

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

CSS Keterangan Item Galeri

Kemudian tambahkan kode berikut pada kotak CSS judul item galeri.

Bagian Tiga: Mengungkapkan Efek Terapkan

ID CSS Modul Galeri

Kami telah menyelesaikan desain kami, dan sekarang saatnya untuk menerapkan efek pengungkapan ke galeri. Jadi, kita akan menambahkan ID CSS ke modul galeri kita.

  • ID CSS: galeri-divi

Menambahkan Modul Kode

Sekarang, kita akan menambahkan modul kode tepat di bawah modul galeri. Kemudian kita akan menambahkan kode CSS.

Kode CSS

Pastikan untuk meletakkan kode CSS di dalam tag Style .


#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #705d65;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

Dan kita selesai. Simpan desain dan mari periksa hasil akhir.

Hasil Akhir

Kami telah berhasil melalui semua langkah, dan inilah hasil kami.

Mengakhiri Pikiran

Sangat mudah untuk mendesain materi iklan apa pun dengan tema Divi; Anda hanya perlu memiliki pengetahuan yang baik tentang Divi Builder dan, dalam beberapa kasus, pengetahuan pengkodean. Dalam tutorial hari ini, Anda telah melihat bagaimana mendesain galeri di mana mengarahkan pada gambar akan menggeser informasi ke bawah. Kami harap Anda menikmati desain yang ditampilkan dalam tutorial hari ini. Untuk mendapatkan lebih banyak tutorial tentang Divi, berlangganan buletin situs web kami dan beri kami komentar tentang tutorial tersebut.