Apakah Anda ingin menambahkan konten penggoda ke tablet yang dapat digulir di Divi?
Menambahkan konten penggoda ke situs jaringan bisa menjadi strategi pemasaran efektif. Ini bekerja sangat baik untuk memajukan hal-hal seperti eBook. Anda memberi mereka pratinjau konten sehingga mereka menginginkan lebih.
Dalam tutorial hari ini, kami akan menunjukkan cara menampilkan konten penggoda di tablet drop-down di Divi.
Untuk melakukan ini, kami akan memanfaatkan opsi bawaan Divi untuk mengubah kolom menjadi wadah drop-down (dirancang agar terlihat seperti tablet) yang dapat menyertakan semua jenis konten yang Anda inginkan.
Anda bisa menggunakannya untuk memajukan bab pertama eBook mana pun, lihat contoh desain dari portofolio Anda atau jenis konten lainnya.
Mari kita mulai!
penelitian
Berikut ini sekilas tentang tablet dengan konten yang dapat digulir yang akan kita buat dalam tutorial ini.
Buat halaman baru dengan Divi Builder
Di dasbor WordPress, buka “Halaman > Tambah Baru”
Berikan judul yang masuk akal bagi Anda, lalu klik “Gunakan DiviBuilder”
kemudian klik “Mulai Membangun”
Desain tablet dengan konten teaser yang dapat digulir di Divi
Membuat wadah tablet drop-down dengan kolom Divi
Tambahkan satu baris
Untuk memulai, buat baris dua kolom dengan bagian reguler.
Pengaturan kolom 1
Warna latar belakang
Buka pengaturan kolom 1 dan tambahkan latar belakang putih ke kolom.
- Latar belakang: #ffffff
Perbatasan dan Margin
Buka tab Mendesain opsi tarik turun Jarak dan ubah pengaturannya sebagai berikut:
- Padding (Atas, Bawah, Kiri dan Kanan): 25px (atas, bawah, kiri, kanan)
Kemudian tarik ke bawah opsi Batas dan ubah pengaturan yang sesuai:
- Sudut Bulat: 20px
- Lebar Perbatasan: 30px
- Warna Perbatasan: #000000
Kotak bayangan
Untuk memberikan kedalaman pada desain tablet, tarik ke bawah opsi Bayangan Kotak dan tambahkan bayangan kotak berikut:
- Bayangan Kotak: lihat tangkapan layar
- Box Shadow (Horisontal dan Vertikal) Posisi: 5 px
- Warna Bayangan: #555555
Tinggi dan lebar kolom khusus dengan CSS
Kunci untuk membuat konten kolom dapat digulir adalah dengan memberikan ketinggian yang ditentukan. Ini akan menyebabkan konten meluap setinggi kolom.
Kami juga ingin rasio aspek tablet tetap konsisten, jadi sebaiknya berikan juga lebar maksimum kolom.
Untuk memberikan tinggi dan lebar khusus pada kolom, buka tab Advanced dan perbarui yang berikut:
Di bawah Kustom CSS, tambahkan CSS berikut untuk tampilan desktop (Elemen Utama):
height:650px;
max-width: 488px;
Kemudian aktifkan tab untuk tampilan lain dan rekatkan CSS khusus berikut untuk tampilan ponsel elemen utama:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Luapan vertikal: gulir
Seperti disebutkan sebelumnya, kolom sekarang memiliki ketinggian yang ditentukan yang pasti akan menyebabkan isi kolom meluap secara vertikal.
Untuk memastikan bahwa konten yang meluap dapat dilihat dengan menggulir ke bawah kolom, setel opsi luapan vertikal visibilitas ke "menggulir". Untuk melakukan ini, perluas opsi Jarak penglihatan tab Advanced
- Luapan Vertikal: Gulir
Tambahkan konten penggoda ke kolom tarik-turun
Pada titik ini, kolom (atau rak) siap untuk konten. Anda dapat menggunakan modul Divi apa pun di kolom ini untuk membuat konten pratinjau.
Dalam contoh ini, kami menambahkan konten ebook dummy yang akan terdiri dari modul uraian (untuk menampilkan ajakan bertindak awal), sebuah modul Gambar (untuk menampilkan sampul buku) dan modul Teks (untuk menampilkan beberapa bab dari ebook).
Menggulir CTA (Call to Action) dengan latar belakang sampul buku
Item konten penggoda pertama yang akan kita tambahkan adalah modul uraian yang akan berfungsi sebagai ajakan untuk bertindak “gulir untuk melihat pratinjau”.
Kami akan menggunakan ikon presentasi, judul, dan latar belakang dengan sampul buku sebagai gambar latar belakang dan hamparan gradien warna.
Di kolom tablet, tambahkan modul uraian.
Perbarui konten sebagai berikut:
- Judul: Gulir untuk membaca kutipan
Opsi tarik-turun “Gambar & Ikon”
- Gunakan Ikon: Ya
- Ikon: lihat tangkapan layar
Kemudian tarik ke bawah opsi Latar Belakang dan tambahkan gradien
- Warna sisi kiri: rbga(0,0,0,0,0.0)
- Warna Sisi Kanan: #ffffff
- Posisi awal: 20%
- Posisi akhir: 85%
- Gradien Persegi Di Atas Gambar Latar Belakang : YA
Kemudian tambahkan gambar sampul buku. Untuk hasil terbaik, tambahkan gambar kira-kira 600px kali 850px .
Pada tab Desain, perbarui gaya berikut untuk ikon dan judul:
- Warna Ikon: #000000
- Ukuran font ikon: 80px (desktop dan tablet), 70px (ponsel)
- Judul Font: Montserrat
- Perataan Teks Judul: terpusat
- Warna Teks: #000000
Kemudian kita dapat memindahkan ikon dan judul ke bawah kolom dengan menambahkan margin atas.
Untuk mengukur dan memberi ruang pada uraian, perbarui yang berikut ini:
- Tinggi: 100%
- Margin: 25px (Bawah)
- Padding: 400px (desktop dan tablet), 270px (ponsel)
Gambar sampul buku
Konten teaser selanjutnya adalah gambar sampul buku. Untuk menambahkan gambar, cukup tambahkan modul Gambar di bawah modul Blurb.
Kemudian unggah gambar yang sama yang digunakan untuk latar belakang blurb.
Isi pratinjau teks
Bagian terakhir dari konten penggoda akan menjadi teks yang akan mencakup beberapa bab fiksi dari ebook kami. Untuk menambahkan teks, tambahkan modul Teks baru di bawah gambar sebelumnya.
Kemudian rekatkan kode HTML berikut ke dalam tab teks isi:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Di bawah tab Desain, perbarui gaya heading dan spasi sebagai berikut (Heading 3):
- Font: Montserrat
- Berat Huruf: Sangat Tebal
- Perataan Teks: Terpusat
- Tinggi Garis: 1,3 em
- Padding: 10% (Atas dan Bawah)
Beberapa sentuhan akhir
Perbarui parameter garis
Dengan konten yang ada, kita perlu melakukan beberapa penyesuaian pada baris untuk membuat desain lebih responsif. Buka Pengaturan Jalur dan perbarui yang berikut:
- Lebar: 100% (desktop), 90% (tablet dan ponsel)
- Lebar Maks: 1px (desktop), 080px (tablet dan ponsel)
Tambahkan konten tambahan ke kolom 2
Pada titik ini kita dapat menambahkan konten tambahan ke kolom 2 jika diperlukan. Untuk contoh ini, kami menambahkan modul Teks dan modul Tombol dan menyesuaikannya mirip dengan desain yang ditampilkan dalam paket tata letak ebook kami.
Unduh DIVI Sekarang!!!
Hasil akhir
Sekarang mari kita lihat hasil akhirnya.
Lihat konten drop-down yang tersedia di dalam tablet laptop.
Dan beginilah desainnya ditumpuk di layar tablet dan ponsel.
Kesimpulan
Mungkin hal terbaik tentang desain tablet bergulir ini adalah keserbagunaannya. Karena tablet pada dasarnya adalah kolom Divi, Anda dapat menggunakan sejumlah modul Divi (teks, gambar, tombol) untuk mendesain konten yang ingin Anda presentasikan.
Semoga ini bisa membantu Anda saat Anda perlu menampilkan beberapa konten penggoda di Anda situs jaringan.
Jika Anda ingin tahu lebih banyak tentang Divi, jangan ragu untuk mengunjungi katalog kami tutorial Divi. Anda juga dapat berkonsultasi Cara membuat halaman Blog dengan modul Blog Divi
Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Tapi sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
