Loncat ke Konten Utama

Cara membuat desain yang ideal untuk pratinjau eBuku dengan Divi

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Hari ini, saya akan menunjukkan kepada Anda bagaimana merancang desain untuk ulasan buku yang menarik menggunakan Paket Layout Ebook Divi dan opsi Divi bawaan saja. Ini adalah cara terbaik untuk menambahkan bukti sosial ke halaman arahan Anda, meningkatkan kredibilitas, dan membagikan ulasan singkat dari pengguna secara elegan.

Ayo mulai desainnya

Transfer tata letak halaman arahan paket ebooks

Hal pertama yang harus dilakukan adalah membuat halaman baru menggunakan presentasi halaman pendaratan Paket Layout Ebook yang akan Anda temukan di layout yang telah ditentukan.

Tambahkan bagian baru

Gulir tata letak dan tambahkan bagian baru ke tempat Anda ingin menampilkan ulasan buku.

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:

Latar Belakang Gradien Kolom 1

Tanpa menambahkan modul lagi, buka pengaturan garis dan tambahkan latar belakang gradien ke kolom pertama.

  • Warna 1: #ffffff
  • Warna 2: #f4f4f4
  • Kolom 1 Posisi Awal: 12%
  • Kolom 1 Posisi Akhir: 12%

Kolom 2 Warna Latar Belakang

Tambahkan juga warna latar belakang khusus ke kolom kedua.

  • Kolom 2 Warna Latar Belakang: #9400ff

perekat

Beralih ke tab Desain dan hapus semua ruang khusus di antara kolom menggunakan parameter berikut:

  • Gunakan lebar selokan khusus: Ya
  • Selokan lebar: 1

jarak

Kami juga mengubah pengaturan spasi baris.

  • Margin atas: 100px
  • Margin bawah: 100px
  • Top Padding: 0px
  • Padding bawah: 0px

Tambahkan modul gambar ke kolom 1

Unggah 1: 1 Gambar

Setelah parameter garis Anda siap, Anda dapat mulai menambahkan modul yang berbeda, dimulai dengan modul gambar di kolom pertama. Unggah gambar pilihan Anda tetapi pastikan rasio gambarnya adalah 1: 1. Ini berarti tinggi dan lebar harus memiliki nilai yang sama.

Gambar Keselarasan

Pilih perataan gambar kiri di tab Desain.

  • Penjajaran gambar: kiri

perekat

Kami juga mengubah lebar modul ini untuk ukuran layar yang berbeda.

Divi: Tema WordPress terbaik sepanjang masa!

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

  • Lebar: 20% (desktop dan tablet), 30% (telepon)

jarak

Untuk memungkinkan tumpang tindih di sisi kiri garis, kami menambahkan nilai margin kiri negatif dalam pengaturan jarak modul Gambar.

  • Margin kiri: -30px

batas

Untuk menyelesaikan desain gambar, kami juga menambahkan '50vw' ke masing-masing sudut dalam pengaturan perbatasan. Ini akan memastikan bahwa gambar tetap berbentuk bundar di berbagai ukuran layar.

Tambahkan modul teks # 1 ke kolom 1

Tambahkan simbol bintang ke area konten

Mari kita beralih ke modul berikutnya, yang merupakan modul teks peringkat. Untuk menyorot jumlah bintang, kami akan menggunakan simbol. Lanjutkan, salin simbol-simbol berikut dan tempel ke area konten modul teks baru: ★★★★.

Warna latar belakang

Ubah bagian bawah modul itu.

  • Warna latar: # 9400ff

Pengaturan teks

Buka tab Desain dan ubah pengaturan teks juga.

  • Font Teks: Montserrat
  • Berat font teks: Berat
  • Ukuran teks: 45px (desktop), 30px (tablet), 25px (telepon)
  • Tinggi baris teks: 1em
  • Penyelarasan teks: pusat

perekat

Lanjutkan dengan mengubah lebar modul.

  • Lebar: 35%

jarak

Dan tambahkan spasi kustom.

  • Margin kiri: 50px
  • Margin kanan: 50px
  • Top Padding: 20px
  • Padding bawah: 20px

Kotak bayangan

Untuk menyorot kotak evaluasi, kami akan menambahkan bayangan halus.

  • Box Shadow Blur Force: 50px
  • Warna warna: rgba (0,0,0,0,3)

Terjemahan Transformer

Akhirnya, kami akan memposisikan ulang modul teks menggunakan nilai konversi dari terjemahan kustom. Anda dapat menunda langkah ini hingga Anda juga telah menambahkan semua modul ke kolom Anda.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

  • Kanan: 360px (desktop), -84px (tablet), -70px (telepon)
  • Bawah: -113px (desktop), 190px (tablet), 141px (telepon)

Tambahkan modul teks # 2 ke kolom 1

Tambahkan konten

Modul berikutnya yang kita butuhkan di kolom 1 adalah modul teks lain. Tambahkan konten pilihan Anda dan tautan ke ulasan dan buku.

Pengaturan teks

Buka tab Desain dan ubah pengaturan teks sesuai:

  • Font Teks: Montserrat
  • Ukuran teks: 18px

Pengaturan tautan teks

Ubah warna teks tautan juga.

  • Tautan warna teks: #9400ff

jarak

Lalu, buka pengaturan jarak dan posisikan ulang item menggunakan nilai margin khusus.

  • Margin teratas: -100px (desktop), 0px (tablet dan telepon)
  • Margin kiri: 200px (desktop), 50px (tablet), 20px (telepon)
  • Margin kanan: 50px (tablet), 20px (telepon)

Tambahkan modul teks # 3 ke kolom 1

Tambahkan konten H3

Mari kita beralih ke modul berikutnya, yang merupakan modul teks yang berisi judul revisi H3.

Pengaturan teks H3

Buka tab Desain dan ubah pengaturan teks H3.

  • Tajuk 3 Font: Montserrat
  • Judul 3 Berat font: tebal
  • Judul 3 Warna teks: #000000

jarak

Tambahkan juga margin khusus.

  • Margin teratas: 80px (desktop), 50px (tablet dan telepon)
  • Margin kiri: 50px (desktop dan tablet), 20px (telepon)
  • Margin kanan: 50px (desktop dan tablet), 20px (telepon)

Tambahkan modul teks 4 ke kolom 1

Tambahkan konten

Mari kita beralih ke modul berikutnya dan terakhir yang kita butuhkan di kolom 1, yang merupakan modul teks lain dengan revisi yang sebenarnya.

jarak

Akses pengaturan jarak untuk modul ini dan terapkan pengaturan berikut:

  • Margin atas: 20px
  • Margin bawah: 50px
  • Margin kiri: 50px (desktop dan tablet), 20px (telepon)
  • Margin kanan: 50px (desktop dan tablet), 20px (telepon)

Tambahkan modul gambar ke kolom 2

Ubah pengaturan CSS kolom 2

Kami akan menggunakan properti fleksibel untuk menyelaraskan gambar di tengah:

display: melenturkan;

Unduh gambar sampul buku

Pada kolom kedua, kita akan membutuhkan dua modul, dimulai dengan modul gambar dengan sampul buku. Untuk ini TutorielKami menggunakan sampul buku yang disediakan dengan Buku Presentasi Divi, tetapi Anda juga dapat menambahkan sampul buku Anda sendiri.

perekat

Buka tab Desain dari modul Gambar dan ubah lebar.

  • Lebar: 79% (desktop), 40% (tablet dan telepon)

Elemen Utama Lanjut

Di sini kita akan mencoba menyelaraskan gambar di tengah.

  • menyelaraskan diri: pusat;

Kloning desain sebanyak yang Anda inginkan

Setelah membuat ulasan buku pertama, Anda dapat mengkloning seluruh baris sebanyak yang Anda inginkan, tergantung pada berapa banyak ulasan yang ingin Anda lihat di halaman arahan Anda.

Pikiran terakhir

Dalam tutorial ini, kami menunjukkan kepada Anda bagaimana merancang ulasan buku yang bagus untuk halaman penerbitan ebook Anda berikutnya. Ini membantu Anda menambahkan bukti sosial ke halaman Anda dan meyakinkan pengunjung akan kredibilitas buku Anda. Jika Anda memiliki pertanyaan atau saran, pastikan untuk meninggalkan komentar di bagian komentar di bawah ini!

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
3 saham
saham3
menciak
Register
Ada apa