Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis.

Apakah Anda ingin menambahkan konten penggoda ke tablet yang dapat digulir di Divi?

Menambahkan konten penggoda ke situs web Anda bisa menjadi strategi pemasaran yang efektif. Ini bekerja sangat baik untuk mempromosikan hal-hal seperti ebooks. 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 dapat menggunakannya untuk mempromosikan bab pertama dari ebook apa pun, menampilkan desain sampel 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. 

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

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

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

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.

Tablet Divi dengan konten bergulir untuk penggoda

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.

Tablet yang dapat digulir di Divi

Dan beginilah desainnya ditumpuk di layar tablet dan ponsel.

Tablet yang dapat digulir di Divi
Tablet yang dapat digulir di Divi

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. 

Mudah-mudahan ini akan berguna saat Anda perlu menampilkan konten penggoda di situs web Anda.

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 kitajika 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 itubagikan artikel ini di berbagai jejaring sosial Anda.

...