Cara Membuat Halaman Daftar Putar dengan Modul Slider Video Divi

Halaman daftar putar adalah cara efektif untuk menyajikan konten serupa dengan cara yang mudah diakses pengguna. Modul Divi Video Slider adalah cara yang bagus untuk membuat halaman daftar putar dengan konten video, seperti kursus dan tutorial. Pada artikel ini, kita akan melihat cara membuat halaman playlist dengan modul Video Slider Divi menggunakan beberapa bagian dan beberapa modul pendukung.

Mari kita mulai.

Pratinjau Halaman Daftar Putar

Pertama, lihat apa yang akan kita buat.

Desktop

Telepon

Buat Halaman Daftar Putar

Halaman kita akan memiliki tiga bagian dengan masing-masing dua baris. Setiap bagian akan memiliki 5 modul. Setelah kami membuat bagian pertama, kami akan menyalinnya dua kali dan membuat perubahan untuk membuat bagian kedua dan ketiga.

Bagian dan baris pertama kita akan menggunakan gaya default. Saya menggunakan antrian gaya dari Paket Tata Letak Toko Cetak gratis yang tersedia di Divi. Agar mudah diikuti, saya akan membuat halaman dengan Wireframe View dan menatanya dengan Desktop View.

Baris Lebar Penuh

Pertama, buat halaman baru , aktifkan Visual Builder , dan tambahkan baris lebar penuh .

2/3 1/3 Baris

Di bawah baris ini, tambahkan 2/3, 1/3 baris .

Tambahkan Modul Teks Judul Slider Video

Di baris lebar penuh, tambahkan modul Teks .

Tambahkan Modul Penggeser Video

Selanjutnya, tambahkan modul Video Slider ke kolom kiri baris 2/3, 1/3.

Tambahkan Modul Teks Judul Deskripsi Slider Video

Selanjutnya, tambahkan modul Teks di bawah modul Video Slider. Ini akan digunakan untuk memperkenalkan deskripsi.

Tambahkan Modul Teks Deskripsi Slider Video

Selanjutnya, tambahkan modul Teks yang akan berisi deskripsi. Ini berada di bawah modul Judul Deskripsi.

Tambahkan Modul Orang

Terakhir, tambahkan modul Person di kolom kanan baris 2/3, 1/3.

Gaya Halaman Daftar Putar Video

Halaman Anda sekarang akan terlihat seperti milik saya. Ini adalah Tampilan Wireframe. Sekarang saatnya untuk menata modul. Kami akan beralih ke Tampilan Desktop. Karena cara saya membuat halaman, halaman saya tidak akan menampilkan konten default.

Gaya Modul Teks Judul Slider Video Halaman Daftar Putar

Buka pengaturan untuk modul Teks pertama.

Ubah Level Teks ke Heading 2 dan tambahkan judul Pillar One: Divi Fundamentals (atau judul Anda) ke konten isi.

• Tingkat Teks: H2
• Isi Tubuh: Pilar Satu: Divi Fundamentals

Selanjutnya, buka tab Desain . Pilih Teks Judul H2 dan ubah Font menjadi Oswald. Atur Style ke TT, Alignment ke Center, dan Color ke #000645.

• Tingkat Judul: H2
• Font: Oswald
• Gaya: TT
• Penjajaran: Pusat
• Warna: #000645

Selanjutnya, atur ukuran Font menjadi 46px untuk Desktop, 32px untuk Tablet, dan 20px untuk Telepon. Ubah Letter Spacing menjadi 1px dan Line Height menjadi 1.4em. Tutup pengaturan modul.

• Ukuran Font: Desktop 46px, Tablet 32px, Telepon 20px
• Spasi Huruf: 1px
• Tinggi Garis: 1.4em

Gaya Modul Slider Video Halaman Daftar Putar

Selanjutnya, kita akan menambahkan konten dan gaya modul Video Slider . Arahkan kursor ke modul dan klik ikon roda gigi untuk membuka pengaturannya .

Klik Tambahkan Video Baru .

Tambahkan video Anda dan tutup submodule.

Lanjutkan prosesnya hingga Anda menambahkan semua video untuk bagian pertama. Saya menggunakan pengaturan default, tetapi Anda juga dapat menggunakan Dot Navigation sebagai pengganti Slider Track dan mengaktifkan Overlay jika Anda tidak ingin menampilkan gambar unggulan default untuk video.

Gaya Slider Video Halaman Daftar Putar Deskripsi Judul Teks Modul

Selanjutnya, buka pengaturan untuk modul Teks langsung di bawah Video Slider. Ini akan digunakan sebagai judul deskripsi kami.

Ubah Body Text menjadi Heading 3 dan masukkan teks About This Series ke dalam area Body Content.

• Tingkat Teks: Judul 3
• Konten: Tentang Seri Ini

Selanjutnya, buka tab Desain . Pilih Heading Text H3 dan ubah Font menjadi Oswald, Style menjadi TT, Alignment menjadi Left, dan warna menjadi #000645. Tutup pengaturan modul.

• Teks Judul: H3
• Font: Oswald
• Gaya: TT
• Perataan: Kiri
• Warna: #000645

Gaya Slider Video Halaman Daftar Putar Modul Teks Deskripsi

Selanjutnya, buka pengaturan untuk modul Teks berikutnya. Ini akan berisi deskripsi seri video.

Masukkan deskripsi seri ke dalam area Isi Tubuh.

• Konten: deskripsi video

Selanjutnya, buka tab Desain dan gulir ke bawah ke Perataan Teks. Atur Perataan ke Kiri. Kami akan membiarkan sisa pengaturannya pada default. Tutup pengaturan modul.

• Perataan: Kiri

Gaya Modul Orang Halaman Daftar Putar

Terakhir, buka pengaturan untuk modul Person .

Di tab Umum , di bawah Teks, masukkan nama orang tersebut ke dalam bidang Nama dan ketik Instruktur di bidang Posisi. Masukkan salah satu tautan media sosial yang Anda inginkan. Saya membiarkannya kosong untuk tutorial ini.

• Nama: nama orang
• Posisi: Instruktur

Gulir ke bawah ke area konten dan tambahkan deskripsi instruktur. Di bawah Gambar , pilih gambar dari perpustakaan media Anda.

• Isi: deskripsi
• Gambar: gambar orang

Teks Judul

Buka tab Desain dan gulir ke Teks Judul. Pilih Tingkat Judul H4. Atur Font ke Oswald, Weight ke Semi Bold, Style ke TT, dan Color ke #000645. Atur Size ke 20px, Spacing ke 1px, dan Line Height ke 1.5em.

• H4
• Oswald
• Semi Tebal
• TT
• #000645
• 20px
• Spasi 1px
• Tinggi garis 1.5em

Teks Posisi

Terakhir, gulir ke bawah ke Teks Posisi . Pilih Oswald untuk Font dan atur Weight ke Semi Bold. Atur Style ke TT, Color ke #8f9ca4, Size ke 15px, Line Spacing ke 1px, dan Line Height ke 1.5em. Tutup pengaturan modul.

• Font: Oswald
• Berat: Semi Tebal
• Gaya: TT
• Warna: #8f9ca4
• Ukuran: 15px
• Spasi: 1 piksel
• Tinggi Garis: 2em

Gandakan Bagian Halaman Daftar Putar

Sekarang Bagian dirancang dan ditata seperti yang kita inginkan, arahkan kursor ke pengaturannya dan buat 2 duplikat .

Gaya Bagian Kedua Halaman Daftar Putar

Untuk bagian kedua, kita akan mengubah warna latar belakang , sehingga menonjol dari yang lain. Kami juga akan mengubah konten modul.

Pengaturan Bagian

Selanjutnya, buka pengaturan untuk bagian kedua .

Gulir ke bawah ke Latar Belakang dan atur warnanya ke #f9f7f4. Tutup pengaturan.

• Warna Latar Belakang: #f9f7f4

Modul Teks Judul Slider Video Kedua

Buka judul untuk bagian kedua dan ubah untuk mencerminkan kumpulan video kedua. Saya menyebut bagian ini Pilar Dua: Modul Divi. Tutup pengaturan.

• Konten: Pilar Dua: Modul Divi

Modul Penggeser Video Kedua

Buka pengaturan untuk modul Video Slider bagian kedua . Ganti video dengan video untuk bagian kedua. Tutup pengaturan.

• Submodul: pilih video

Modul Teks Judul Deskripsi Slider Video Kedua

Judul ini akan tetap sama, jadi kita tidak perlu melakukan perubahan.

Modul Teks Deskripsi Slider Video Kedua

Selanjutnya, buka modul Teks dengan deskripsi video kedua dan buat deskripsi untuk kumpulan video kedua.

• Isi Tubuh: deskripsi video

Modul Orang Kedua

Jika instruktur yang berbeda mengajarkan kumpulan video kedua, buka modul Orang kedua dan ganti namanya. juga, ubah atau tambahkan URL media sosial jika Anda menggunakannya.

• Nama: nama instruktur

Selanjutnya, gulir ke bawah ke area Konten Tubuh dan Gambar dan ganti deskripsi dan gambar orang tersebut.

• Isi Tubuh: deskripsi orang
• Gambar: gambar orang

Gaya Bagian Ketiga

Untuk bagian ketiga , kami akan mengubah konten modul. Bagian ini akan menggunakan pengaturan default, sehingga kita dapat beralih ke judul pertama.

Modul Teks Judul Slider Video Ketiga

Buka modul teks judul dan ubah judul agar sesuai dengan kumpulan video ini. Tutup pengaturan modul.

• Isi Tubuh: Pilar Tiga: Tata Letak Divi

Modul Penggeser Video Ketiga

Buka modul Video Slider ketiga dan ganti video dengan yang untuk set ini. Ubah Label Amin jika Anda mau dan tutup pengaturan modul.

• Tambahkan Video Baru: ganti setiap video

Modul Teks Deskripsi Slider Video Ketiga

Buka modul Teks untuk deskripsi video bagian ketiga. Buat deskripsi untuk kumpulan video ini. Tutup pengaturan modul Teks.

• Isi Tubuh: deskripsi video

Modul Orang Ketiga

Terakhir, buka modul Person untuk bagian ini dan ganti namanya jika berbeda dari kumpulan video pertama. Jika orang yang sama dengan set kedua, cukup salin modul itu, tempel ke kolom ini, dan hapus modul ini. Ubah atau tambahkan tautan jejaring sosial jika Anda menggunakannya.

• Nama: Nama Instruktur

Gulir ke bawah ke area Konten Tubuh dan Gambar dan ganti agar sesuai dengan informasi orang ini. Tutup modul, simpan halaman Anda, dan keluar dari Visual Builder.

• Isi Tubuh: deskripsi orang
• Gambar: gambar orang

Hasil Halaman Daftar Putar

Beginilah tampilan halaman daftar putar kami di desktop dan ponsel.

Desktop

Telepon

Mengakhiri Pikiran

Itulah tampilan kami tentang cara membuat halaman playlist dengan modul Video Slider Divi. Ini adalah proses yang sederhana dan membuat duplikat setelah Anda menata bagian pertama membuat pembuatan bagian kedua dan ketiga menjadi lebih mudah. Kita hanya perlu mengubah isinya dan selesai. Modul Video Slider Divi adalah pilihan yang sangat baik untuk halaman daftar putar mana pun dengan video.

Kami ingin mendengar dari Anda. Sudahkah Anda membuat halaman daftar putar dengan modul Video Slider Divi? Beritahu kami tentang pengalaman Anda di komentar.