Cara Membuat Transisi Halaman Animasi dengan Pembuat Tema Divi

Biasanya, ketika pengunjung menavigasi dari halaman ke halaman di situs web Divi Anda, transisi terjadi secara instan. Sekarang, bagaimana jika ada cara untuk menganimasikan transisi halaman ini? Dengan Pembuat Tema Divi pasti ada, tanpa perlu kode khusus apa pun! Segera setelah pengunjung Anda meninggalkan halaman untuk masuk ke halaman lain, Anda dapat membuat animasi yang berlaku. Dalam tutorial hari ini, kami akan menunjukkan cara membuat transisi halaman animasi ini. Lebih dari itu, kami juga akan membagikan tiga contoh berbeda yang dapat Anda terapkan pada proyek Anda berikutnya segera. Anda juga dapat mengunduh file template JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Transisi Halaman Animasi #1

Desktop

Seluler

Transisi Halaman Animasi #2

Desktop

Seluler

Transisi Halaman Animasi #3

Desktop

Seluler

Unduh Template Halaman GRATIS

Untuk mendapatkan templat halaman 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!

1. Buka Divi Theme Builder & Tambahkan Template Halaman Baru

Buka Divi Theme Builder & Tambahkan Template Baru

Hal pertama yang harus Anda lakukan adalah pergi ke Divi Theme Builder Anda dan klik 'Add New Template'.

Gunakan Template di Semua Halaman

Gunakan template baru di semua halaman (atau halaman yang Anda inginkan untuk menerapkan transisi).

• Gunakan Di: Semua Halaman

Mulai Membangun Tubuh Template

Kemudian, mulailah membuat badan kustom dari templat halaman Anda.

2. Buat Isi Halaman Menggunakan Modul Konten Posting

Pengaturan Bagian

Jarak

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan hapus semua padding atas dan bawah default.

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

Visibilitas

Untuk memastikan tidak ada bilah gulir horizontal yang muncul saat animasi sedang berlangsung, kita harus menyembunyikan kedua bagian yang meluap di tab lanjutan dari pengaturan bagian.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar wadah bagian.

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

Jarak

Kami juga menghapus padding atas dan bawah default baris. Pada titik ini, wadah bagian, baris dan kolom memiliki ukuran yang sama persis. Tidak ada spasi putih di antara wadah apa pun. Ini penting untuk apa yang akan terjadi di langkah berikutnya; menambahkan konten halaman dinamis.

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

Tambahkan Modul Konten Posting ke Kolom

Satu-satunya modul yang kita butuhkan untuk membuat konten halaman muncul secara dinamis adalah Modul Konten Posting. Silakan dan tambahkan modul ini ke kolom baris Anda. Berkat pengaturan bagian dan baris yang kami terapkan di bagian sebelumnya dari posting ini, konten halaman dinamis akan mengambil seluruh lebar dan tinggi wadah bagian.

3. Terapkan Transisi Halaman Animasi Pilihan Anda

Buat Ulang Transisi Halaman Animasi #1

Pengaturan Bagian

Warna latar belakang

Saatnya menerapkan transisi halaman animasi! Kami membagikan tiga contoh berbeda, tetapi dengan opsi bawaan Divi, kemungkinan animasi tidak terbatas. Untuk menerapkan transisi halaman animasi pertama, buka wadah bagian dan tambahkan warna latar belakang.

• Warna Latar Belakang: #d8cdbe

Animasi

Kami juga menerapkan pengaturan animasi berikut ke bagian:

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Pengaturan Baris

Warna latar belakang

Buka pengaturan baris berikutnya dan tambahkan warna latar belakang berikut:

• Warna Latar Belakang: #e2e2e2

Animasi

Lanjutkan dengan menerapkan animasi berikut ke baris:

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Penundaan Animasi: 500ms
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Pengaturan Kolom

Warna latar belakang

Ke container berikutnya yang akan kita animasikan, yaitu container kolom. Buka pengaturan kolom dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Animasi

Tambahkan animasi khusus ke kolom juga.

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Penundaan Animasi: 1200ms
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Pengaturan Modul Konten Posting

Animasi

Last but not least, kami akan menganimasikan Modul Konten Postingan (berisi semua konten halaman dinamis).

• Gaya Animasi: Memudar
• Penundaan Animasi: 2500ms
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Buat Ulang Transisi Halaman Animasi #2

Pengaturan Bagian

Warna latar belakang

Ingin membuat animasi kedua saja? Buka pengaturan bagian dan gunakan warna latar belakang berikut:

• Warna Latar Belakang: #d8cdbe

Animasi

Kemudian, terapkan animasi khusus ke bagian tersebut.

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Pengaturan Baris

Latar Belakang Gradien

Buka pengaturan baris berikutnya dan gunakan latar belakang gradien berikut untuk itu:

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

Animasi

Tambahkan animasi khusus ke baris Anda juga.

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Penundaan Animasi: 800ms
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In
• Pengulangan Animasi: Sekali

Pengaturan Kolom

Warna latar belakang

Kemudian, buka pengaturan kolom baris dan gunakan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Animasi

Lanjutkan dengan menambahkan animasi ke kolom.

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Penundaan Animasi: 2000ms
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Pengaturan Modul Konten Posting

Animasi

Last but not least, buka pengaturan Post Content Module dan gunakan pengaturan animasi berikut:

• Gaya Animasi: Memudar
• Penundaan Animasi: 3000ms
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Buat Ulang Transisi Halaman Animasi #3

Pengaturan Bagian

Latar Belakang Gradien

Ke transisi halaman animasi berikutnya dan terakhir! Buka pengaturan bagian dan gunakan latar belakang gradien berikut:

• Warna 1: #d8cdbe
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Awal: 20%
• Posisi Akhir: 20%

Animasi

Pindah ke tab desain bagian dan ubah pengaturan animasi yang sesuai:

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Intensitas Animasi: 10%
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Pengaturan Baris

Latar Belakang Gradien

Kemudian, buka pengaturan baris dan terapkan latar belakang gradien:

• Warna 1: #ffffff
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 50%
• Posisi Akhir: 50%

Animasi

Ubah juga pengaturan animasi baris.

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Penundaan Animasi: 1000ms
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In
• Pengulangan Animasi: Sekali

Pengaturan Kolom

Warna latar belakang

Lanjutkan dengan membuka pengaturan kolom. Ubah warna latar belakang.

• Warna Latar Belakang: #ffffff

Animasi

Terapkan juga pengaturan animasi berikut ke kolom:

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Penundaan Animasi: 1500ms
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Pengaturan Modul Konten Posting

Animasi

Dan selesaikan transisi halaman animasi ketiga dengan menerapkan pengaturan animasi berikut ke Modul Konten Postingan:

• Gaya Animasi: Memudar
• Penundaan Animasi: 3000ms
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

6. Simpan Semua Perubahan Pembuat Tema & Hasil Pratinjau

Setelah Anda membuat badan templat halaman dan menambahkan transisi halaman animasi pilihan Anda, Anda dapat menyimpan semua perubahan Pembuat Tema dan melihat hasilnya di situs web Anda!

Pratinjau

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

Transisi Halaman Animasi #1

Desktop

Seluler

Transisi Halaman Animasi #2

Desktop

Seluler

Transisi Halaman Animasi #3

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat transisi halaman animasi dengan opsi bawaan Divi dan Pembuat Tema saja. Ini adalah cara yang bagus untuk menambahkan tingkat interaksi lain ke situs web Anda, tanpa memerlukan kode tambahan. Anda juga dapat mengunduh contoh file JSON template 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.