Cara Menambahkan Bilah Audio "Episode Terbaru" Tetap ke Header Divi Anda

Jika Anda menghosting situs web podcast dengan Divi, kemungkinan besar Anda sudah menggunakan Modul Audio bawaan. Sekarang, jika Anda mencari cara khusus untuk menyoroti episode terbaru Anda, Anda akan menyukai tutorial ini. Hari ini, kami akan menunjukkan cara memasukkan bilah audio episode terbaru yang diperbaiki di header Divi Anda. Kami akan menyertakan animasi loop Modul Teks untuk menarik perhatian ke bilah audio dan Anda juga dapat mengunduh templat tajuk global, termasuk bilah audio!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Template Header Bilah Audio secara GRATIS

Untuk mendapatkan template tajuk bilah audio 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!

Buka Divi Theme Builder & Mulai Buat Header Global

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder di bagian belakang situs WordPress Anda.

Mulai Membangun Header Global

Kemudian, mulailah membuat tajuk global.

Buat Header Global dengan Bilah Audio Episode Terbaru

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan ubah warna latar belakang. Kami mencocokkan tajuk global ini dengan Paket Tata Letak Podcast, tetapi jangan ragu untuk menggunakan jenis gaya desain pilihan Anda lainnya.

• Warna Latar Belakang: #1a1844

Jarak

Kemudian, lanjutkan ke tab desain dan tambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 50px (Desktop), 80px (Tablet & Ponsel)
• Padding Bawah: 0px

Bayangan Kotak

Untuk memisahkan header dari konten halaman/posting, kami juga akan menambahkan bayangan kotak ke bagian kami.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama ke bagian Anda menggunakan struktur kolom berikut:

Warna latar belakang

Seluruh baris ini akan didedikasikan untuk bilah audio episode terbaru kami. Tetapi sebelum kita sampai pada itu, buka pengaturan baris dan ubah warna latar belakang.

• Warna Latar Belakang: #fe4943

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran berikutnya.

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

Jarak

Kami juga menambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 10px
• Padding Bawah: 10px

Berbatasan

Kemudian, kita akan pergi ke pengaturan perbatasan dan kita akan menambahkan beberapa sudut membulat.

• Kiri Bawah: 10px
• Kanan Bawah: 10px

Bayangan Kotak

Kami juga menyertakan bayangan kotak.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba(0,0,0,0.3)

Posisi

Selanjutnya, kita akan pergi ke tab lanjutan dan membuat seluruh baris diperbaiki. Kami akan meningkatkan indeks z baris juga untuk memastikannya tumpang tindih dengan baris kedua yang akan kami tambahkan ke bagian kami.

• Posisi: Tetap
• Lokasi: Pusat Atas
• Indeks Z: 11

Visibilitas Kolom 1

Selesaikan pengaturan baris dengan mengatur overflow kolom 1 menjadi tersembunyi. Ini akan membantu dengan animasi teks yang dapat Anda perhatikan di pratinjau posting ini. Dengan menyetel luapan ke tersembunyi, kami akan memastikan animasi disembunyikan di luar penampung kolom.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya menambahkan modul, dimulai dengan Modul Teks di kolom 1. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Teks

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

• Font Teks: Buka Sans
• Gaya Font Teks: Huruf Besar
• Warna Teks: #ffffff
• Ukuran Teks: 15px
• Spasi Huruf Teks: 3px

Jarak

Kami akan menambahkan beberapa margin kiri negatif ke modul kami juga. Ini akan membantu dengan animasi loop kita.

• Margin Kiri: -190%

Animasi

Last but not least, tambahkan animasi loop berikut ke Modul Teks Anda:

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Durasi Animasi: 9000ms
• Intensitas Animasi: 30%
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Linear
• Pengulangan Animasi: Loop

Tambahkan Modul Audio ke Kolom 2

Hapus Semua Konten

Di kolom 2, satu-satunya modul yang kita butuhkan adalah Modul Audio. Pastikan konten dihapus.

Unggah File Audio

Kemudian, unggah file audio yang berisi episode terbaru Anda.

Hapus Warna Latar Belakang

Hapus warna latar belakang modul berikutnya.

Jarak

Kemudian, lanjutkan ke tab desain dan hapus beberapa nilai padding default dengan menambahkan '0px' ke dalamnya.

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

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya. Baris ini akan berisi logo, menu, dan ikon media sosial kami. Pilih struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

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

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Tambahkan Modul Menu ke Kolom 1

Pilih Menu

Kemudian, tambahkan Modul Menu ke kolom 1 dan pilih menu pilihan Anda.

Unggah Logo

Unggah logo berikutnya.

Hapus Warna Latar Belakang

Kemudian, hapus warna latar belakang putih default.

Pengaturan Teks Menu

Pindah ke tab desain dan ubah pengaturan teks menu sebagai berikut:

• Font Menu: Buka Sans
• Warna Teks Menu: #ffffff (Desktop), #1a1844 (Tablet & Ponsel)
• Ukuran Teks Menu: 15px
• Perataan Teks: Kanan

Pengaturan Teks Menu Dropdown

Kami juga mengubah warna garis menu dropdown di pengaturan menu dropdown.

• Warna Garis Menu Dropdown: #ffffff

Pengaturan Ikon

Seiring dengan warna ikon menu hamburger di pengaturan ikon.

• Warna Ikon Menu Hamburger: #fe4943

Perekat

Dan kami akan menyelesaikan pengaturan modul dengan menetapkan lebar maksimum logo dalam pengaturan ukuran.

• Lebar Maks Logo: 65%

Tambahkan Modul Ikuti Media Sosial ke Kolom 2

Tambahkan Jejaring Sosial

Di kolom kedua dari baris kedua, kita membutuhkan Modul Ikuti Media Sosial. Tambahkan jejaring sosial pilihan Anda.

Penyelarasan

Pindah ke tab desain modul dan ubah perataan modul.

• Penyelarasan Modul: Pusat

Jarak

Tambahkan beberapa nilai margin kustom berikutnya.

• Margin Atas: 20px
• Margin Bawah: -4% (Hanya Tablet & Ponsel)

Berbatasan

Dan lengkapi header dengan menambahkan beberapa sudut membulat ke pengaturan batas modul. Setelah Anda menyelesaikan tajuk global, pastikan untuk menyimpan semua perubahan Divi Theme Builder dan lihat hasilnya di situs web Anda!

• Semua Sudut: 50vw

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 Modul Audio bawaan Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menyertakan bilah audio tetap di header global yang dibuat khusus. Ini adalah cara yang bagus untuk menekankan episode terbaru podcast Anda. 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.