Membuat Arsip Cantik dan Menampilkan Halaman Catatan untuk Podcast Anda

Kemarin, kami menggunakan pembuat visual Divi untuk menyiapkan halaman beranda podcast Anda yang benar-benar akan mengesankan pendengar Anda, tetapi bagaimana jika mereka ingin menggali lebih dalam acara Anda?

Mereka akan menuju ke arsip yang indah dan menunjukkan halaman catatan yang akan saya ajarkan kepada Anda cara membuatnya hari ini.

Produk Akhir Hari Ini: Tampilkan Halaman Catatan dan Arsip

Halaman itu sendiri dirancang untuk melengkapi beranda, tetapi tidak mencerminkan elemennya secara langsung.

Di halaman catatan acara, saya ingin memastikan setiap pengunjung dapat mendengarkan episode secara langsung di browser mereka, melihat sorotan dan tautan untuk episode tertentu, dan memiliki kesempatan untuk mendaftar ke daftar email Anda.

Halaman arsip sama-sama sederhana namun fungsional seperti halaman catatan acara. Halaman arsip memiliki satu tujuan: agar pengguna Anda dapat melihat katalog belakang Anda dengan cepat dan mudah. Itulah tepatnya yang dilakukan halaman ini. Dengan kutipan singkat tentang acara tersebut, pendengar Anda akan dapat memindai acara Anda untuk menemukan topik yang ingin mereka dengarkan dengan tepat.

Aset yang Anda Butuhkan

Seperti kemarin, Anda akan membutuhkan beberapa gambar latar belakang beresolusi tinggi. Dua yang saya gunakan ada di koleksi ini di Unsplash (yang juga menyertakan latar belakang dari beranda kemarin). Saya mengeditnya menjadi skala abu-abu di Pratinjau, tetapi perangkat lunak pengeditan gambar apa pun akan dapat menerapkan efek hitam-putih/skala abu-abu atau membiarkan Anda memindahkan penggeser saturasi ke 0.

Hidup Anda juga akan sedikit lebih mudah jika Anda telah membangun beranda karena Anda akan menggunakan beberapa gaya yang sama.

Itu saja, jadi mari kita mulai membangun!

Membangun Halaman Catatan Pertunjukan

Catatan acara hanyalah "postingan" di WordPress, jadi navigasikan ke dasbor Anda dan buka Posting -> Tambah Baru.

Anda akan melakukan ini setiap kali Anda ingin membuat halaman catatan acara untuk setiap episode acara Anda. Beri judul apa yang Anda inginkan dan atur siput URL menjadi sesuatu yang sederhana (agar pendengar Anda mengingatnya setelah episode Anda berakhir).

Pertama, pastikan Anda mengklik "Gunakan Divi Builder."

Itu akan membuka rangkaian opsi berikutnya yang kita butuhkan. Di sisi kanan halaman, atur posting ke "Lebar Penuh" karena kami tidak akan menggunakan bilah sisi untuk catatan acara kami. Dan atur Judul Posting ke "Sembunyikan" sehingga metadata seperti penulis, komentar, dan tanggal untuk posting itu sendiri tidak muncul.

Kemudian Anda ingin masuk ke Visual Builder dan disajikan oleh halaman web kosong yang menyenangkan.

Hal pertama yang ingin Anda lakukan adalah mengklik ikon roda gigi di bagian biru di sudut kiri atas halaman untuk masuk ke pengaturan bagian.

Dari sana, unggah gambar latar belakang Anda. Gulir sedikit lebih jauh ke bawah ke dalam pengaturan dan nyalakan Gunakan Efek Paralaks. Biarkan Metode Paralaks ke "Paralaks Sejati" default.

Simpan pengaturan itu, dan Anda akan melihat sesuatu seperti ini:

Tidak persis apa yang ada di produk akhir di atas, bukan? Kita harus meregangkannya sedikit dengan menambahkan konten ke halaman.

Klik + hijau dan masukkan satu baris kolom (yang ada di sudut kiri atas).

Selanjutnya, Anda akan senang telah melakukannya di beranda kemarin. Segera setelah Anda memilih baris, Anda akan disambut oleh jendela yang meminta Anda untuk memilih elemen. Anda akan memilih pemutar podcast yang kami simpan kemarin dengan mengklik "Tambah Dari Perpustakaan."

Saya telah menamai milik saya hanya "Episode Podcast," tetapi jika Anda memilih sesuatu yang berbeda, pastikan Anda memilihnya.

Badabing-badaboom, Anda memiliki episode podcast yang ditambahkan ke halaman catatan acara Anda seperti sulap.

Ingatlah bahwa Anda harus mengedit judul dan media (dan kemungkinan seni episode) untuk setiap halaman catatan acara baru. Apa yang baru saja Anda tambahkan adalah salinan persis dari apa yang telah Anda simpan.

Catatan acara Anda yang sebenarnya akan langsung berada di bawah pemutar podcast, jadi arahkan mouse ke pemutar dan tekan + hitam. Gulir ke bawah hingga Anda melihat modul teks. Tambahkan ke halaman.

Di bawah tab Konten di Pengaturan Teks, masukkan catatan Anda ke editor WYSIWYG dan buka tab Desain.

Di tab Desain, perbarui opsi berikut:

Warna Teks: Cahaya
Orientasi Teks: Kiri
Font Teks: Elite Khusus
Ukuran Font Teks: 20px
Warna Teks Teks: #ffffff

Simpan, dan Anda akan melihat blok teks baru yang mengkilap dan halaman yang mirip dengan ini.

Kami mencapai bentangan beranda untuk halaman catatan acara–hanya dua elemen yang tersisa. Klik lagi + hitam, dan tambahkan templat tombol yang Anda simpan kemarin.

Alih-alih membawa pengguna ke arsip seperti yang akan dilakukan kemarin, yang ini akan mengembalikan mereka ke halaman beranda. Arahkan ke halaman pengaturan tombol dan atur URL ke garis miring terbalik sederhana.

Mengapa tidak pergi ke /home atau yang serupa? Yah, hanya menggunakan garis miring terbalik akan membawa pengguna Anda ke halaman depan situs web Anda, apa pun yang terjadi. Dan karena Anda berada di situs yang sama, bahkan memindahkan domain tidak akan memengaruhi tombol. Ia akan selalu pulang. Yang persis seperti yang Anda ingin lakukan!

Buka dan isi pengaturan tombol lainnya. Buka di jendela yang sama, ubah teks tombol menjadi "Kembali ke Rumah" (atau apa pun yang Anda suka), dan perataan tombol menjadi "Kanan" (keduanya agar tidak menghalangi konten, dan membuatnya berdiri bertentangan dengan isinya). Gaya tab Desain seharusnya diimpor dari Perpustakaan Divi.

Anda akan memiliki tombol navigasi yang bagus sekarang, dan saya sarankan menambahkannya ke Perpustakaan Anda sehingga Anda dapat menggunakannya di banyak halaman.

Dan terakhir, mari siapkan pendaftaran email sehingga kita bisa mendapatkan alamat email yang manis dan manis itu untuk membuat pengguna terus mendapatkan berita terbaru tentang podcast.

Untuk ini, kami menginginkan baris kolom tunggal yang benar-benar baru. Jadi klik + hijau dan letakkan di tempatnya. Kemudian tambahkan modul Email Optin dari dropdown. Sama seperti kemarin, navigasikan ke pengaturan modul dan masukkan judul apa pun yang ingin Anda tampilkan serta teks ajakan bertindak yang Anda inginkan di editor WYSIWYG.

Juga, tambahkan teks apa pun yang Anda inginkan untuk tombol itu sendiri. Saya memilih "Berlangganan" yang benar-benar unik.

Pilih penyedia dan daftar layanan email Anda (ingat dari kemarin bahwa modul lengkap tidak akan muncul di halaman saat ditayangkan jika Anda tidak memilih daftar).

Ubah latar belakang RGBA menjadi transparan.

Di bawah tab Desain, atur Font Header ke "Special Elite" dan ukurannya menjadi 36px.

Anda juga akan mengatur Body Font menjadi “Special Elite” dan ukurannya menjadi 16px.

Tidak seperti hampir semua hal lain untuk situs ini, kami ingin menggunakan perbatasan untuk modul Email Optin. Jadi pindahkan "User Border" ke yes, dan atur warnanya ke #ffffff, dan Custom Padding menjadi 15px di semua sisi.

Setelah selesai, pindah ke tab Advanced dan tambahkan ini ke Elemen Utama di bawah Custom CSS untuk membulatkan sudut modul:

border-radius:10px;

Simpan pekerjaan Anda, dan Anda akan mendapatkan email optin!

Satu-satunya hal lain yang diperlukan halaman catatan acara Anda adalah menyimpan modul ini untuk digunakan di halaman lain. Karena Anda ingin optin email Anda konsisten di seluruh situs, kami akan menyimpan ini sebagai item global. Klik "Tombol Tambahkan ke Perpustakaan" saat Anda mengarahkan mouse ke modul, dan pastikan Anda mencentang kotak "Jadikan ini item global."

Sekarang Anda memiliki satu elemen yang dapat Anda gunakan di beberapa halaman. Dan jika Anda membuat perubahan apa pun, itu akan tercermin di semua instance, tidak seperti pemutar podcast dan tombol di atas di mana setiap modul dapat diubah satu per satu.

Dan di sana, teman-teman, adalah templat halaman Perlihatkan Catatan Anda! Saya juga menyarankan untuk menyimpan seluruh halaman ke Perpustakaan Anda sehingga Anda dapat mengimpornya dan mengubah elemen yang Anda perlukan untuk setiap episode.

Sekarang…lanjutkan ke Arsip! Garis finish sudah di depan mata!

Membangun Halaman Arsip Anda

Buka dasbor WordPress Anda dan navigasikan ke Tambahkan Halaman Baru, beri nama (milik saya adalah "Arsip"), dan buka Divi Visual Builder. Mudah.

Setelah Anda berada di sana, tambahkan baris kolom tunggal baru dengan modul teks.

Arahkan ke pengaturan dan masukkan judul halaman Anda di editor WYSIWYG.

Di tab Desain, atur Warna Teks ke Cahaya dan Orientasi ke Pusat. Atur font menjadi "Special Elite" dan Ukuran Font menjadi 50px.

Untuk membuat teks terlihat bagus di seluler, pastikan untuk mengubah margin atas dan bawah menjadi 40px.

Simpan pekerjaan Anda, dan–siapkan diri Anda–bersiaplah untuk menambahkan latar belakang ke Arsip! Buka pengaturan di kotak + biru, dan pilih gambar latar belakang Anda dan atur paralaks seperti yang Anda lakukan untuk Show Notes. Sekali lagi, saya membuat skala abu-abu ini menggunakan Pratinjau.

Di bawah tab Design, atur padding atas dan bawah masing-masing menjadi 55px dan 176px sehingga seluruh halaman memungkinkan efek paralaks terlihat tidak peduli berapa banyak posting yang Anda miliki di arsip Anda.

Mengapa 176px bukannya 175? Karena aku pemberontak, itu sebabnya.

Anda akan melihat ini saat menyimpan pekerjaan Anda:

Selanjutnya, tambahkan baris satu kolom baru, hanya saja kali ini, masukkan modul Blog. Ini akan menampilkan Loop WordPress apa pun yang Anda atur, dan kami hanya ingin itu menjadi Kutipan dan Judul sehingga pendengar Anda tahu apa yang diharapkan.

Buka pengaturan dan perbarui opsi di tab Konten sebagai berikut:

Nomor Posting: 10 (atau apa pun yang menurut Anda paling cocok untuk situs Anda–ini akan memberi nomor halaman setelah nomor ini ditampilkan)
Konten: Tampilkan Kutipan (karena kami ingin pengguna mengklik dan mendengarkan episode di pemutar)
Tampilkan Gambar Unggulan: YA
Warna Latar Belakang Ubin Kisi: rgba(73,73,73,0.72)

Di tab Desain, perbarui opsi berikut:

Tata Letak: Kotak
Font Header: Elite Khusus
Warna Teks Tajuk: #ffffff
Font Tubuh: Elite Khusus
Warna Teks Tubuh: #ffffff
Meta Font: Elite Khusus
Warna Teks Meta: #ffffff
Gunakan Perbatasan: YA
Warna Perbatasan: #ffffff
Lebar Perbatasan: 1px
Gaya Perbatasan: Padat

Setelah semuanya siap, Anda memiliki satu gaya terakhir yang harus dilakukan. Kisi itu sendiri memiliki sudut persegi yang tajam di setiap kotak, dan kami ingin mendapatkan radius batas 10px sehingga cocok dengan bagian situs lainnya.

Arahkan ke Dasbor WordPress Anda -> Divi -> Opsi Tema, lalu gulir ke bawah ke CSS Kustom. Tambahkan kode ini ke dalam kotak untuk membulatkan sudut setiap kotak kutipan:

.et_pb_post {
 border-radius: 10px;
}

Perlu diingat bahwa “.et_pb_post” adalah Kelas CSS yang digunakan Divi untuk menyesuaikan kotak-kotak itu secara keseluruhan.

Setelah itu, simpan semua pekerjaan Anda.

Satu-satunya yang tersisa untuk dilakukan adalah menambahkan tombol Kembali ke Beranda dari perpustakaan Anda, dan Anda akan selesai. Klik tanda + hitam untuk menambahkannya ke baris yang sama dengan modul Blog Anda.

Hot diggity dog, Anda baru saja selesai menyiapkan halaman Arsip Anda.

Selamat! Anda baru saja selesai menyiapkan halaman Arsip Anda. Simpan halaman Arsip Anda sebagai template dengan mengklik + ungu di bagian bawah layar, dan Anda dapat memeriksa item lain dari daftar ember Anda-karena antara kemarin dan hari ini, Anda baru saja membuat pemutar podcast yang berfungsi penuh, beranda, arsip, dan template untuk catatan acara individu.

Kesimpulannya

Dan itu saja! Terima kasih telah mengikuti dua tutorial halaman podcast saya. Anda dapat menangkap yang pertama Cara Membuat Halaman Podcast Cantik dengan Divi di tautan ini. Jika Anda memiliki pertanyaan atau komentar, jangan ragu untuk meninggalkannya di bawah dan saya akan melakukan yang terbaik untuk menjawabnya!