Cara Membuat Animasi Amplop dengan Efek Gulir Divi

Setiap kali fitur Divi baru keluar, kami mencoba membagikan beberapa tutorial keren dan berguna yang akan membantu Anda berpikir di luar kebiasaan dan berkreasi dengan Divi. Tutorial hari ini melakukan hal itu. Kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat animasi amplop responsif dengan efek gulir Divi. Ini adalah cara yang bagus untuk menekankan blok ajakan bertindak, misalnya, tetapi Anda juga dapat menggunakannya untuk tujuan lain. 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

Berlangganan Saluran Youtube Kami

Unduh Layout Animasi Amplop GRATIS

Untuk mendapatkan tata letak animasi amplop 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!

Buat Ulang Struktur Elemen

Tambahkan Bagian Baru ke Tengah atau Bawah Halaman

Warna latar belakang

Mulailah dengan menambahkan bagian baru di suatu tempat di tengah atau di bagian bawah halaman Anda. Buka bagian pengaturan dan ubah warna latar belakang menjadi putih.

• Warna Latar Belakang: #FFFFFF

Jarak

Ubah pengaturan spasi berikutnya.

• Padding Atas: 5vw
• Padding Bawah: 0px

Meluap

Dan sembunyikan bagian yang meluap.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris #1

Struktur Kolom

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

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang.

• Warna Latar Belakang: #FFFFFF

Perekat

Pindah ke tab desain baris berikutnya dan ubah pengaturan ukuran sebagai berikut:

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

Jarak

Kemudian, tambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 14vw (Desktop), 11vw (Tablet & Ponsel)
• Padding Bawah: 14vw (Desktop), 11vw (Tablet & Ponsel)
• Padding Kiri: 20vw (Desktop), 10vw (Tablet & Ponsel)
• Padding Kanan: 20vw (Desktop), 10vw (Tablet & Ponsel)

Berbatasan

Tambahkan beberapa radius perbatasan juga.

• Semua Sudut: 20px

Bayangan Kotak

Kami juga menggunakan bayangan kotak halus.

• Posisi Vertikal Bayangan Kotak: 38px
• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.08)

Indeks Z

Selesaikan pengaturan baris dengan meningkatkan indeks z di tab lanjutan.

• Indeks Z: 11

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H2

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama. Masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Ubah pengaturan teks H2 modul sebagai berikut:

• Judul 2 Font: Poppins
• Judul 2 Ukuran Teks: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dan masukkan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Ukuran Teks: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Tinggi Baris Teks: 2.6em

Jarak

Tambahkan beberapa nilai atas dan bawah khusus di berbagai ukuran layar juga.

• Padding Atas: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Padding Bawah: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

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

Pengaturan Tombol

Kemudian, gaya tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #0f33ff
• Lebar Batas Tombol: 0px

• Radius Batas Tombol: 100px
• Font Tombol: Poppins

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Padding Kanan: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)

Tambahkan Baris #2

Struktur Kolom

Sekarang setelah kita memiliki baris ajakan bertindak, saatnya untuk mulai membuat bentuk amplop. Untuk melakukannya, tambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Biarkan baris mengambil lebar seluruh bagian dengan mengubah pengaturan ukuran sebagai berikut:

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

Jarak

Hapus semua padding atas dan bawah default juga.

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

Menampilkan

Dan untuk memastikan kolom muncul bersebelahan pada ukuran layar yang lebih kecil, kita akan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Gambar ke Kolom 1

Biarkan Kotak Gambar Kosong

Tambahkan Modul Gambar ke kolom 1 dan biarkan kotak gambar kosong.

Latar Belakang Gradien

Sebagai gantinya, kami menggunakan latar belakang gradien.

• Warna 1: rgba (255,255,255,0)
• Warna 2: #e8e8e8
• Tipe Gradien: Linier
• Arah Gradien: 150deg
• Posisi Awal: 50%
• Posisi Akhir: 50%

Jarak

Ubah nilai padding modul yang sesuai:

• Padding Atas: 15vw
• Padding Bawah: 15vw

Kloning Modul Gambar di Kolom 1 & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan Modul Gambar di kolom 1, Anda dapat mengkloning seluruh modul dan menempatkan duplikatnya di kolom 2.

Ubah Latar Belakang Gradien

Ubah latar belakang gradien sebagai berikut:

• Warna 1: rgba (255,255,255,0)
• Warna 2: #efefef
• Tipe Gradien: Linier
• Arah Gradien: 210 derajat
• Posisi Awal: 50%
• Posisi Akhir: 50%

Tambahkan Baris #3

Struktur Kolom

Untuk membuat bagian bawah amplop, kita memerlukan baris lain dengan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

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

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Menampilkan

Dan izinkan kedua kolom muncul bersebelahan dengan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Indeks Z

Selesaikan pengaturan baris dengan meningkatkan indeks z di tab lanjutan.

• Indeks Z: 12

Tambahkan Modul Gambar ke Kolom 1

Biarkan Kotak Gambar Kosong

Tambahkan Modul Gambar ke kolom 1 dan, sekali lagi, biarkan kotak gambar kosong.

Latar Belakang Gradien

Gunakan latar belakang gradien sebagai gantinya.

• Warna 1: rgba (255,255,255,0)
• Warna 2: #efefef
• Tipe Gradien: Linier
• Arah Gradien: 213deg
• Posisi Awal: 40%
• Posisi Akhir: 40%

Jarak

Dan tingkatkan ukuran modul dengan menambahkan beberapa bantalan atas dan bawah.

• Padding Atas: 20vw
• Padding Bawah: 20vw

Kloning Modul Gambar di Kolom 1 & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan Modul Gambar di kolom 1, Anda dapat mengkloningnya dan menempatkan duplikatnya di kolom 2.

Ubah Latar Belakang Gradien

Pastikan Anda mengubah latar belakang gradien duplikat.

• Warna 1: rgba (255,255,255,0)
• Warna 2: #e8e8e8
• Tipe Gradien: Linier
• Arah Gradien: 147deg
• Posisi Awal: 40%
• Posisi Akhir: 40%

Tambahkan Gerakan Vertikal ke Baris #1

Sekarang, bagian terakhir untuk membuat animasi amplop berfungsi adalah menambahkan efek gulir gerakan vertikal responsif ke baris pertama di bagian Anda dan selesai!

• Aktifkan Gerakan Vertikal: Ya
• Mulai Offset:
  • Desktop: 0 (pada 68%)
  • Tablet: 0,5 (pada 61%)
  • Telepon: 0,5 (pada 43%)
• Offset Tengah:
  • Desktop: 6,5 (pada 81%)
  • Tablet & Telepon: 21,5 (pada 82%)
• Mengakhiri Offset:
  • Desktop: 16 (pada 95%)
  • Tablet & Telepon: 21,5 (pada 82%)

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 efek gulir Divi. Lebih khusus lagi, kami telah menunjukkan cara menyusun animasi amplop. Anda dapat menggunakan animasi ini untuk banyak hal, untuk menyorot blok CTA Anda misalnya. 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.