Cara Menggabungkan Tumpang Tindih dengan Opsi Lengket Divi untuk Membuat Transisi yang Mudah

Seiring berkembangnya teknologi, desain pun ikut berkembang. Lebih dari sebelumnya, Anda dapat menemukan situs web yang membuat Anda kagum dan bertanya-tanya bagaimana situs tersebut dibuat. Meskipun situs web yang memiliki interaksi gulir terjadi bukan untuk setiap jenis bisnis, mengetahui cara bekerja ekstra sangat membantu untuk meninggalkan kesan yang baik. Dengan Divi, banyak hal menjadi mungkin tanpa harus menyentuh satu baris kode pun. Tutorial hari ini membantu Anda memahami Divi dari perspektif lain. Kami akan menunjukkan cara menggabungkan opsi lengket Divi dengan pengaturan bawaan lainnya untuk membuat transisi yang mudah. 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 Ulang Struktur Desain

Tambahkan Bagian Baru

Jarak

Di bagian pertama tutorial ini, kita akan fokus pada pembuatan ulang struktur desain di dalam Divi. Kemudian, di bagian dua, kita akan menghabiskan waktu melalui semua opsi tempel untuk mencapai efek yang dapat Anda lihat di pratinjau posting ini. Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian, buka tab desain dan tambahkan beberapa bantalan bawah.

• Padding Bawah: 100vh

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 yang sesuai:

• Lebar: 90%
• Lebar Maks: 100%

Indeks Z

Tetapkan indeks az ke baris ini juga.

• Indeks Z: 1

Tambahkan Modul Gambar ke Kolom

Biarkan Kotak Gambar Kosong

Saatnya menambahkan modul, dimulai dengan Modul Gambar. Biarkan kotak konten kosong.

Gunakan Gambar Latar Sebagai gantinya

Dan gunakan gambar latar belakang pilihan Anda.

• Ukuran Gambar Latar Belakang: Sampul

Perekat

Ubah lebar modul berikutnya.

• Lebar: 100%

Jarak

Kemudian, terapkan beberapa bantalan atas dan bawah khusus ke pengaturan jarak.

• Padding Atas: 40vh
• Padding Bawah: 40vh

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

Ke modul berikutnya, yaitu Modul Teks yang berisi beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Ubah pengaturan teks H2 modul yang sesuai:

• Judul 2 Font: Montserrat
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks:
  • Desktop: 10vw
  • Tablet: 14vw
  • Telepon: 15vw
• Spasi Judul 2 Huruf: -0.5vw

Perekat

Pastikan modulnya juga "100%".

• Lebar: 100%

Posisi

Dan reposisi modul di tab lanjutan.

• Posisi: Absolut
• Lokasi: Pusat

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya. Gunakan 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: 1
• Lebar: 90%
• Lebar Maks: 100%

Indeks Z

Tetapkan indeks az ke baris ini juga.

• Indeks Z: 2

Spasi Kolom 1

Selesaikan pengaturan baris dengan membuka pengaturan kolom pertama dan menetapkan beberapa padding kiri dan kanan.

• Padding Kiri: 5%
• Padding Kanan: 5%

Tambahkan Modul Teks ke Kolom 1

Tambahkan Konten H3

Sekarang pengaturan baris sudah ada, saatnya untuk menambahkan modul. Tambahkan Modul Teks ke kolom 1 dengan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

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

• Judul 3 Font: Montserrat
• Judul 3 Gaya Font: Garis Bawah
• Judul 3 Warna Garis Bawah: #ffffff
• Judul 3 Gaya Garis Bawah: Padat
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks:
  • Desktop: 4vw
  • Tablet & Telepon: 10vw
• Spasi Judul 3 Huruf: -3px

Jarak

Tambahkan beberapa bantalan yang tepat pada ukuran layar yang lebih kecil.

• Padding Kanan: 20% (Hanya Tablet & Ponsel)

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Tambahkan Modul Teks lain ke kolom 2 dengan beberapa konten deskripsi pilihan Anda.

Warna latar belakang

Ubah warna latar belakang berikutnya.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Kemudian, ubah pengaturan teks sebagai berikut:

• Font Teks: Tampilan Playfair
• Gaya Font Teks: Miring
• Ukuran teks:
  • Desktop: 1.6vw
  • Tablet: 3vw
  • Telepon: 4vw
• Tinggi Baris Teks: 1.5em

Jarak

Terapkan beberapa nilai padding kustom juga.

• Padding Atas: 10vh
• Padding Bawah: 10vh
• Padding Kiri: 10%
• Padding Kanan: 10%

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Modul berikutnya dan terakhir yang akan kita tambahkan adalah Modul Tombol ke kolom 2. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

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

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol:
  • Desktop: 1.2vw
  • Tablet: 2.5vw
  • Telepon: 3.5vw
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #ffffff
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Montserrat

• Gaya Font Tombol: Garis Bawah
• Warna Garis Bawah Tombol: #000000
• Gaya Garis Bawah Tombol: Padat

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 50px
• Padding Kanan: 50px

Posisi

Dan reposisi modul di tab lanjutan.

• Posisi: Absolut
• Lokasi: Kanan Bawah

2. Terapkan Efek Lengket

Modul Gambar di Baris #1

Pengaturan Lengket

Sekarang setelah kita membangun fondasi desain kita, saatnya untuk mulai menerapkan efek lengket khusus. Buka Modul Gambar di baris #1 dan putar modul menjadi lengket sebagai berikut:

• Posisi Lengket: Menempel ke Atas
• Batas Lengket Bawah: Bagian
• Offset Dari Elemen Lengket Sekitarnya: Tidak

Ukuran Lengket

Setelah pengaturan sticky telah diterapkan, kita juga dapat mengubah gaya sticky dari modul kita. Hal pertama yang akan kita lakukan adalah mengubah lebar dalam keadaan lengket.

• Lebar Lengket: 80%

Jarak Lengket

Selanjutnya, kita akan memodifikasi padding atas dan bawah yang lengket.

• Padding Atas Lengket: 50vh
• Padding Bawah Lengket: 50vh

Latar Belakang Gradien Lengket

Kami akan menerapkan latar belakang gradien lengket ke modul kami juga.

• Warna 1: #00336b
• Warna 2: rgba(41.196.169,0)
• Tipe Gradien: Linier
• Arah Gradien: 90 derajat
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Transisi

Dan untuk memastikan transisi yang mulus, kami akan meningkatkan durasi transisi modul.

• Durasi Transisi: 1500ms

Kolom 2 di Baris #2

Kolom 2 Pengaturan Lengket

Selanjutnya, kita juga akan mengubah kolom kedua dari baris kedua kita menjadi lengket.

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

Modul Teks di Kolom Tempel

Warna Latar Belakang Lengket

Sekarang kolom 2 dari baris #2 telah berubah menjadi sticky, kita dapat menerapkan beberapa gaya sticky ke Modul Teks di dalam kolom ini. Mulailah dengan mengubah warna latar belakang dalam keadaan lengket.

• Warna Latar Lengket: #333333

Warna Teks Lengket

Selanjutnya, ubah warna teks dalam keadaan lengket.

• Warna Teks Lengket: #ffffff

Transisi

Dan selesaikan pengaturan modul dengan meningkatkan durasi transisi di tab lanjutan. Itu dia!

• 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 opsi lengket Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menggabungkan tumpang tindih dengan opsi lengket Divi untuk membuat transisi yang mudah. Setelah Anda mendapatkan pendekatan yang digunakan sepanjang tutorial ini, Anda akan dapat membuat variasi yang berbeda tanpa akhir. 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.