Cara Menganimasikan Header Global Anda dengan Divi

Header Anda adalah salah satu bagian terpenting dari situs web Anda. Ini menghubungkan halaman, posting, dan ajakan bertindak Anda. Ini juga salah satu hal yang dicari pengunjung Anda secara otomatis, sehingga mereka tidak membuang waktu untuk menemukan apa yang mereka cari. Jika Anda sedang mencari cara untuk menekankan header Anda, Anda akan menikmati posting ini. Kami akan menunjukkan cara menganimasikan tajuk global yang dibuat khusus menggunakan Pembuat Tema Divi. Kemungkinannya tidak terbatas, tetapi kami akan menunjukkan kepada Anda dua contoh animasi yang dapat Anda mulai segera. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat dua contoh di berbagai ukuran layar.

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Unduh Header Global Animasi GRATIS

Untuk mendapatkan tajuk global animasi 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!

Berlangganan Saluran Youtube Kami

1. Buka Divi Theme Builder & Mulai Buat Header Global

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder di backend WordPress Anda.

Bangun Header Global Dari Awal

Klik 'Add Global Header' dan lanjutkan dengan memilih 'Build Global Header'.

2. Bangun Desain Blok Header Global

Pengaturan Bagian

Jarak

Setelah Anda berada di dalam editor template, Anda dapat mulai membuat header global. Kami memastikan bahwa kami memiliki desain 'blok' sehingga kami dapat, nanti, menambahkan animasi ke dua wadah yang berbeda; kolom + modul. Buka bagian yang dapat Anda lihat di dalam editor template dan hapus semua padding atas dan bawah default.

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

Bayangan Kotak

Tambahkan bayangan kotak berikutnya.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (13,60,216.0.24)

Indeks Z

Dan pastikan Anda meningkatkan indeks z bagian di tab lanjutan juga. Ini akan memastikan konten tajuk global akan muncul di atas semua konten halaman/posting.

• Indeks Z: 99999

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 layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Visibilitas

Pastikan Anda mengatur overflow baris ke 'terlihat' juga.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Pengaturan Kolom (Ketiganya)

Warna latar belakang

Setelah Anda menyelesaikan pengaturan baris, Anda juga perlu menata kolom. Buka masing-masing kolom dan ubah warna latar belakangnya:

• Kolom 1 Warna Latar Belakang: #efefef
• Kolom 2 Warna Latar Belakang: #ffcb0f
• Warna Latar Kolom 3: #2848ff

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus ke setiap kolom juga.

• Padding Atas: 0.5vw (Desktop), 1vw (Tablet & Telepon)
• Padding Bawah: 0.5vw (Desktop), 1vw (Tablet & Telepon)

Elemen Utama

Dan untuk memastikan semua konten kolom dipusatkan secara vertikal, kita akan menambahkan tiga baris kode CSS ke elemen utama setiap kolom.

display: flex;
flex-direction: column;
justify-content: center;

Indeks Kolom 1 Z

Last but not least, buka pengaturan kolom 1 dan tingkatkan indeks z di pengaturan visibilitas.

• Indeks Z: 10

Tambahkan Modul Menu ke Kolom 1

Pilih Menu

Saatnya menambah modul, dimulai dengan Modul Menu di kolom 1. Pilih menu pilihan Anda.

Unggah Logo

Unggah logo Anda selanjutnya.

Hapus Latar Belakang

Lanjutkan dengan menghapus warna latar belakang modul.

Tata Letak

Pindah ke tab desain dan pastikan pengaturan berikut berlaku untuk tata letak:

• Gaya: Rata Kiri
• Arah Menu Dropdown: Ke Bawah

Pengaturan Teks Menu

Gaya pengaturan teks berikutnya:

• Font Menu: Montserrat
• Warna Teks Menu: #000000
• Ukuran Teks Menu: 0,7vw (Desktop), 2vw (Tablet), 3vw (Telepon)

Pengaturan Menu Dropdown

Seiring dengan pengaturan menu dropdown.

• Warna Garis Menu Dropdown: #ffffff

Pengaturan Ikon

Dan ubah warna ikon menu hamburger juga.

• Warna Ikon Menu Hamburger: #2848ff

Perekat

Lanjutkan dengan mengubah lebar maksimum logo di berbagai ukuran layar.

• Logo Lebar Maks: 6vw (Desktop), 9vw (Tablet), 13vw (Telepon)

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa margin kiri dan kanan.

• Margin Kiri: 2vw
• Margin Kanan: 2vw

Tambahkan Modul Kode ke Kolom 1

Masukkan Kode CSS untuk Responsivitas VW

Sekarang, dalam modul menu, kita telah menggunakan unit lebar viewport untuk ukuran teks dan nilai spasi. Kami melakukan ini untuk memastikan Anda dapat menempatkan hingga 8 item menu di berbagai ukuran layar desktop, tanpa membaginya menjadi dua baris. Kita harus memastikan ruang antara item menu dibuat dengan unit vw juga. Untuk melakukannya, kita akan menambahkan Modul Kode ke kolom 1 dan menyisipkan baris kode CSS berikut:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

Tambahkan Modul Ikuti Media Sosial ke Kolom 2

Tambahkan Jejaring Sosial

Ke kolom berikutnya, di sana, kita membutuhkan Modul Ikuti Media Sosial. Tambahkan jejaring sosial pilihan Anda.

Setel Ulang Gaya Jejaring Sosial Satu per satu

Lanjutkan dengan mengatur ulang pengaturan setiap jaringan.

Penyelarasan

Selesaikan pengaturan modul dengan mengubah perataan modul.

• Penyelarasan Modul: Pusat

Tambahkan Modul Tombol ke Kolom 3

Tambahkan Salinan

Ke kolom berikutnya dan terakhir. Di sana, kita hanya membutuhkan Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penyelarasan

Pindah ke tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Selesaikan pengaturan modul dengan menata tombol.

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

• Radius Perbatasan Tombol: 0px
• Font Tombol: Montserrat
• Berat Huruf Tombol: Sangat Tebal
• Gaya Font Tombol: Huruf Besar

3. Tambahkan Animasi yang Cocok ke Elemen

Kombo Animasi Header Global #1

Kolom 1 Animasi

Sekarang setelah kita membuat header global, saatnya menambahkan animasi! Untuk membuat ulang animasi pertama, buka pengaturan kolom 1 dan tambahkan animasi berikut:

• Gaya Animasi: Zoom
• Arah Animasi: Atas
• Animasi Mulai Opacity: 100%

Kolom 2 Animasi

Tambahkan pengaturan animasi berikut ke kolom 2 berikutnya:

• Gaya Animasi: Zoom
• Arah Animasi: Bawah
• Penundaan Animasi: 500ms
• Animasi Mulai Opacity: 100%

Kolom 3 Animasi

Selesaikan pengaturan kolom dengan menetapkan animasi berikut ke kolom 3:

• Gaya Animasi: Zoom
• Arah Animasi: Atas
• Penundaan Animasi: 1000ms
• Animasi Mulai Opacity: 100%

Animasi Modul (Ketiga Modul)

Setelah Anda menyelesaikan pengaturan kolom, buka masing-masing modul satu per satu dan gunakan animasi berikut untuknya:

• Gaya Animasi: Memudar
• Penundaan Animasi: 1500ms

Kombo Animasi Header Global #2

Kolom 1 Animasi

Ingin membuat ulang set animasi kedua? Buka pengaturan kolom 1 dan tambahkan animasi berikut:

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Animasi Mulai Opacity: 100%

Kolom 2 Animasi

Gunakan pengaturan animasi berikut untuk kolom 2 selanjutnya:

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Penundaan Animasi: 500ms
• Animasi Mulai Opacity: 100%

Kolom 3 Animasi

Dan selesaikan pengaturan kolom dengan menerapkan pengaturan animasi berikut ke kolom 3:

• Gaya Animasi: Slide
• Arah Animasi: Atas
• Penundaan Animasi: 1000ms
• Animasi Mulai Opacity: 100%

Animasi Modul (Ketiga Modul)

Kemudian, buka setiap modul satu per satu dan tambahkan animasi berikut:

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Penundaan Animasi: 1500ms

4. Simpan Perubahan Pembuat & Lihat Hasil

Setelah Anda menyelesaikan pengaturan animasi, Anda dapat menyimpan tajuk global, keluar dari Pembuat Tema dan melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat contoh terakhir di berbagai ukuran layar.

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Pikiran Akhir

Dalam tutorial ini, kami telah menunjukkan kepada Anda cara menganimasikan header global Anda menggunakan opsi bawaan Divi dan Pembuat Tema. Ini adalah cara yang bagus untuk menarik perhatian ke tajuk situs web Anda. Dengan opsi animasi bawaan Divi, kemungkinannya tidak terbatas. Untuk membantu Anda memulai, kami telah menunjukkan kepada Anda dua contoh berbeda. Anda juga dapat mengunduh file JSON secara gratis!

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.