Cara Membuat Bilah Konten Audio Lengket di Divi

Menambahkan bilah konten audio yang lengket adalah cara yang bagus untuk menampilkan klip audio agar mudah diakses saat pengguna menggulir konten halaman Anda. Misalnya, podcaster dapat "menempelkan" audio unggulan mereka di bagian atas halaman episode sehingga pengguna selalu dapat memiliki akses ke kontrol audio tersebut sambil mendengarkan dan terlibat dengan konten halaman lainnya.

Dalam tutorial ini, kita akan sedikit berkreasi dengan opsi posisi lengket bawaan Divi untuk membuat bilah konten audio lengket di Divi. Kami akan menunjukkan cara mengonversi konten audio yang ada pada halaman (seperti baris dengan modul audio) menjadi bilah konten audio lengket yang tetap berada di bagian atas jendela setelah pengguna melewatkan konten audio saat menggulir. Selain itu, kami juga akan menunjukkan cara mengubah konten, gaya, dan tata letak bilah setelah status tempel diaktifkan (atau macet di bagian atas jendela). Transisi dan fungsionalitas yang mulus dari desain ini menawarkan solusi unik untuk menampilkan konten audio di situs web Divi mana pun.

Mari kita lakukan!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Berikut adalah tampilan transisi konten audio ke bilah konten audio yang lengket.

Dan inilah tampilan bagaimana seseorang dapat terlibat dengan bilah audio saat menggulir halaman.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, 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!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Unggah Paket Tata Letak Podcast Premade dari Divi Builder

Untuk memulai desain bilah audio lengket kami di Divi, kami akan menggunakan tata letak halaman arahan podcast yang sudah dibuat sebelumnya. Dari menu pengaturan, pilih ikon plus "Muat Dari Perpustakaan". Kemudian temukan tata letak halaman arahan podcast dan muat ke halaman.

Bagian 2: Membuat Baris Lengket untuk Memegang Konten Audio

Di bagian paling atas dari tata letak yang dibuat sebelumnya, temukan baris di dalam bagian atas itu. Kemudian tambahkan baris satu kolom baru di bawah baris yang ada.

Pengaturan Baris

Sebelum menambahkan modul apa pun, buka pengaturan untuk baris baru dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%
• Padding (desktop): 10px atas, 10px, bawah, 10% kiri, 10% kanan
• Padding (tablet dan ponsel): 10px atas, 10px, bawah, 10px kiri, 10px kanan

Untuk membuat baris lengket, buka tab lanjutan dan perbarui yang berikut:

• Posisi Lengket: Menempel ke Atas

Ini akan menyebabkan baris (segera menjadi bilah konten audio kami) menempel di bagian atas jendela browser saat menggulir halaman ke bawah.

Bagian 3: Menambahkan Konten Audio

Menambahkan Modul Audio ke Baris

Selanjutnya, pindahkan/tarik modul audio (pra-desain) yang ada dari baris pertama di bagian atas ke baris baru yang baru saja Anda buat. Ini akan berfungsi sebagai audio unggulan yang akan kami sertakan di dalam pemutar audio yang lengket

Menambahkan CTA Menggunakan Modul Blurb

Selanjutnya, kita akan membuat CTA yang akan ditampilkan di sisi kanan bilah konten audio lengket kita.

Untuk membuat CTA, salin modul uraian dengan ikon putar di bagian atas tata letak.

Kemudian, tempel modul duplikat uraian di bawah modul audio di baris kedua bagian atas.

Bagian 4: Menata Konten Audio

Menata Modul Audio

Setelah baris mewarisi posisi lengket, kami ingin memiliki gaya yang berbeda untuk modul audio kami. Untuk melakukannya, buka pengaturan untuk modul audio dan perbarui opsi status tempel berikut:

• Ukuran Teks Judul (lengket): 14px
• Tinggi Baris Judul (lengket): 1.3em
• Tinggi Garis Keterangan (lengket): 1.3em

Semua ini dilakukan adalah mengecilkan teks dan spasi sedikit sehingga konten audio tidak memakan banyak ruang vertikal di bar lengket kami.

Selanjutnya, kita ingin mengubah lebar modul audio dalam keadaan lengket sebagai berikut:

• Lebar (desktop): 80%
• Lebar (lengket): 100%
• Lebar Maks (lengket): 100%

Selanjutnya, kita perlu mengatur jarak dari modul audio sebagai berikut:

• Margin: 0px atas, 0px bawah
• Padding: 0px atas, 0px bawah, 0px kiri, 20px kanan

Terakhir, kita perlu menambahkan beberapa potongan CSS khusus di bawah pengaturan lanjutan untuk meratakan kiri teks kita dan menambahkan warna unik ke tombol dan penggeser pemutar audio kita.

Tambahkan CSS berikut ke Judul Audio hanya di bawah tab tempel :

text-align:left;

Tambahkan CSS berikut ke Meta Audio hanya di bawah tab lengket :

text-align:left !important;

Tambahkan CSS berikut ke Tombol Pemain hanya di bawah tab lengket :

color: #fe4943;

Tambahkan CSS berikut ke Player Sliders Current hanya di bawah tab sticky :

background: #2c4ca3;

Menata CTA Blurb

Selanjutnya, kita akan menata modul uraian kita yang akan berfungsi sebagai CTA tiruan untuk melihat semua episode.

Pertama, tambahkan teks "Semua Episode" ke konten isi uraian.

Di bawah tab desain, perbarui yang berikut ini:

• Font Tubuh: Lato
• Berat Huruf Tubuh: Tebal
• Gaya Huruf Tubuh: TT
• Ukuran Teks Tubuh: 10px
• Spasi Huruf Isi: 2px
• Tinggi Garis Tubuh: 1.3em

Kemudian sesuaikan ukuran ikon uraian:

• Ukuran Font Ikon: 50px

Kemudian sesuaikan ukuran modul sebagai berikut:

• Lebar Konten: 100%
• Lebar: 20%

Sekarang kembali ke tab konten dan tambahkan latar belakang untuk uraian sebagai berikut:

• Warna Latar Belakang: #1a1844
• Gambar Latar Belakang: [tambahkan gambar]
• Campuran Gambar Latar Belakang: Luminositas

Kami ingin modul ini disembunyikan pada awalnya dari tampilan hingga baris mencapai status lengket dan bilah kontrol audio macet di bagian atas jendela. Untuk melakukan ini, kita dapat menambahkan beberapa potongan css yang menyembunyikan modul di desktop dan menampilkan modul dalam status lengket.

Di bawah tab Lanjutan, perbarui CSS khusus berikut:

Elemen Utama CSS (desktop):

display:none;

Elemen Utama CSS (lengket):

display:block;

CSS Gambar Kabur:

margin-bottom: 10px

Bagian 5: Mengubah Penjajaran Konten Bilah Audio dalam Status Lengket

Saat ini baris lengket hanya memiliki satu kolom dengan dua modul ditumpuk di atas satu sama lain. Jadi bilah lengket akan menampilkan uraian CTA di bawah modul audio. Ini akan memakan terlalu banyak ruang vertikal untuk batang yang lengket dan tidak akan terlihat bagus.

Untuk memastikan semuanya sejajar secara horizontal dan vertikal di dalam kolom, kami. dapat menggunakan properti flex CSS untuk menyesuaikan tata letak modul kita dalam status lengket.

Untuk melakukan ini, buka pengaturan untuk kolom yang berisi kedua modul.

Di bawah tab lanjutan, tambahkan CSS khusus berikut ke Elemen Utama

Elemen Utama (desktop):

display:flex;
flex-direction:column;

Elemen Utama (lengket):

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

Itu dia! Mari kita tinjau hasilnya.

Hasil Akhir

Berikut adalah desain di desktop setelah baris dalam status lengket.

Dan inilah desain di ponsel.

Dan berikut adalah beberapa klip video tentang cara kerja bilah tempel konten audio di halaman langsung.

Pikiran Akhir

Opsi posisi lengket Divi dapat menjadi alat yang ampuh untuk desainer web. Dalam tutorial ini, kami menunjukkan kepada Anda cara membuat bilah konten audio yang lengket menggunakan opsi gaya lengket Divi dengan cara yang canggih dan kreatif. Salah satu teknik unik yang ditampilkan dalam tutorial ini adalah bagaimana menyelaraskan konten dari sticky row menggunakan properti flex. Untungnya, Divi's memiliki cara mudah untuk menambahkan cuplikan kode khusus ke status tempel menggunakan blok CSS khusus lanjutan untuk memberi kami fleksibilitas desain yang kami butuhkan. Mudah-mudahan, ini akan memberi Anda beberapa inspirasi untuk membuat satu di proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!