Cara Mengungkapkan Kisi Gambar yang Mendasari di Pahlawan Anda dengan Opsi Tempel Divi

Membuat bagian pahlawan yang menarik perhatian pengunjung Anda dapat mengatur nada untuk sisa situs web. Jika Anda mencari cara kreatif untuk menggunakan opsi lengket Divi untuk membantu Anda sampai di sana, Anda akan menyukai tutorial ini. Hari ini, kami menunjukkan kepada Anda cara mengungkapkan kisi gambar yang mendasari di pahlawan Anda dengan opsi lengket Divi. Kami menyertakan transisi yang sangat mulus dari default ke sticky dan Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

1. Buat Desain Pahlawan

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan tambahkan warna latar belakang.

• Warna Latar Belakang: #111111

Jarak

Buka tab desain bagian dan tambahkan beberapa bantalan bawah. Padding bawah ini akan memberi kita cukup ruang untuk menciptakan pengalaman menggulir.

• Padding Bawah: 120vh

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, buka tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Lebar: 100%
• Lebar Maks: 2580px

Jarak

Tambahkan beberapa margin atas responsif berikutnya.

• Batas atas:
  • Desktop: 10vh
  • Tablet & Telepon: 5vh

Indeks Z

Dan untuk memastikan baris ini tetap berada di bawah baris kedua, kita akan menambahkan ke bagian ini, nanti, kita akan menggunakan indeks az 10 di tab lanjutan.

• Indeks Z: 10

Semua Pengaturan Kolom

Setelah pengaturan baris umum selesai, buka masing-masing kolom satu per satu.

Elemen Utama CSS

Di setiap kolom, terapkan baris kode CSS berikut ke elemen utama di ponsel:

Telepon saja:

width: 50% !important;
margin: 0 !important;

Pengaturan Kolom 2

Kemudian, buka pengaturan kolom 2.

Indeks Z

Dan naikkan Z Index menjadi 12. Ini akan menempatkan kolom ini di atas kolom ketiga.

• Indeks Z: 12

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar

Saatnya menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah gambar pilihan Anda.

Jarak

Pindah ke tab desain modul dan ubah pengaturan spasi sebagai berikut:

• Margin Bawah:
  • Tablet & Telepon: 10px
• Margin Kanan:
  • Tablet & Telepon: 2%

Modul Gambar Klon Tiga Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda menyelesaikan pengaturan modul, Anda dapat mengkloning seluruh modul tiga kali dan menempatkan duplikatnya di kolom baris yang tersisa.

Ubah Gambar

Pastikan Anda mengubah gambar di setiap modul duplikat.

Ubah Spasi Modul Gambar #2 & #4

Kemudian, buka pengaturan Modul Gambar di kolom 2 dan 4, dan terapkan nilai spasi berikut:

• Margin Bawah:
  • Tablet & Telepon: 10px
• Margin Kiri:
  • Tablet & Telepon: 2%
• Batas Kanan: /

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Latar Belakang Gradien

Buka pengaturan baris dan terapkan latar belakang gradien berikut:

• Warna 1: #11111
• Warna 2: rgba (255,255,255,0)

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar: 100%
• Lebar Maks: 2580px

Jarak

Kemudian, oleskan beberapa padding atas dan bawah.

• Padding Atas: 20vh
• Padding Bawah: 20vh

Posisi

Untuk menempatkan baris ini di atas grid gambar, kita akan menggunakan pengaturan posisi yang sesuai:

• Posisi: Absolut
• Lokasi: Pusat Atas
• Indeks Z: 12

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H1

Tambahkan Modul Teks pertama ke baris ini menggunakan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1

Pindah ke tab desain modul dan ubah pengaturan teks H1 yang sesuai:

• Font Judul: Kumbh Sans
• Berat Huruf Judul: Tebal
• Gaya Font Judul: Huruf Besar
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #ffdbaa
• Ukuran Teks Judul:
  • Desktop: 120px
  • Tablet: 60px
  • Telepon: 40px
• Spasi Judul Surat
  • Desktop: -3px
  • Tablet & Ponsel: 0px
• Judul Teks Bayangan:
  • Pilih: Opsi Ketiga
  • Warna Bayangan Teks Judul: rgba(0,0,0,0.4)

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar Maks: 900px
• Penyelarasan Modul: Pusat

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penjajaran Tombol

Pindah ke tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Kemudian, gaya tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol:
  • Desktop: 20px
  • Tablet: 16px
  • Telepon: 14px
• Ukuran Teks Tombol: #111111
• Warna Latar Tombol: #ffffff
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px

• Font Tombol: Kumbh Sans
• Berat Huruf Tombol: Tebal

Jarak

Dan gunakan beberapa nilai padding responsif dalam pengaturan spasi.

• Bantalan Atas:
  • Desktop & Tablet: 20px
  • Telepon: 15px
• Bantalan Bawah:
  • Desktop & Tablet: 20px
  • Telepon: 15px
• Bantalan Kiri:
  • Desktop & Tablet: 50px
  • Telepon: 40px
• Bantalan Kanan:
  • Desktop & Tablet: 50px
  • Telepon: 40px

2. Terapkan Pengaturan Lengket

Putar Baris #1 Lengket

Sekarang setelah kita memiliki semua elemen di tempatnya, kita dapat fokus pada pengaturan sticky. Buka pengaturan baris pertama dan terapkan pengaturan tempel berikut:

• Posisi Lengket: Menempel ke Atas
• Batas Lengket Bawah: Bagian
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Opasitas Lengket

Kemudian, ubah opacity di pengaturan filter.

• Bawaan: 20%
• Lengket: 100%

Modul Gambar #1 Pengaturan Lengket

Jarak

Selanjutnya, buka pengaturan Modul Gambar di kolom 1. Pindah ke tab desain dan tambahkan beberapa margin atas dan kanan yang lengket.

• Margin Atas Lengket: -20%
• Margin Kanan Lengket: -20%

Transisi

Tingkatkan durasi transisi juga.

• Durasi Transisi: 700ms

Modul Gambar #2 Jarak Tempel

Jarak

Pindah ke Modul Gambar di kolom 2 dan gunakan pengaturan jarak tempel berikut:

• Margin Atas Lengket: 20%
• Margin Kiri Lengket: -30%

Transisi

Tingkatkan durasi transisi di sini juga.

• Durasi Transisi: 1000ms

Modul Gambar #3 Jarak Tempel

Jarak

Selanjutnya, kita memiliki Modul Gambar di kolom 3. Gunakan nilai jarak tempel berikut:

• Margin Atas Lengket: -10%
• Margin Kiri Lengket: -25%
• Margin Kanan Lengket: -25%

Transisi

Ubah durasi transisi yang sesuai:

• Durasi Transisi: 700ms

Modul Gambar #4 Jarak Lengket

Jarak

Dan terakhir, buka Image Module di kolom 4. Terapkan nilai sticky spacing berikut:

• Margin Atas Lengket: -20%
• Margin Kiri Lengket: -30%

Transisi

Selesaikan pengaturan modul, dan tutorial ini, dengan meningkatkan durasi transisi. Itu dia! Simpan dan keluar halaman untuk melihat hasilnya.

• Durasi Transisi: 1000ms

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan bagian pahlawan Anda di Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara mengungkapkan kisi gambar pada gulir menggunakan bagian lengket Divi. Anda juga dapat mengunduh file JSON secara gratis. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk 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.