Loncat ke Konten Utama

Cara membuat desain yang ideal untuk pratinjau eBuku dengan Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

Hari ini, saya akan menunjukkan kepada Anda bagaimana merancang desain untuk ulasan buku yang menarik menggunakan Paket Layout Ebook Divi dan hanya opsi Divi terintegrasi. Ini adalah cara yang bagus 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 pendaratan 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 dengan menggunakan parameter berikut:

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

jarak

Kami juga mengubah pengaturan spasi baris.

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

Tambahkan modul gambar ke kolom 1

Unggah 1: 1 Gambar

Setelah parameter baris Anda berada di tempat, 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.

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]

  • Penjajaran gambar: kiri

perekat

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

  • 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 melengkapi 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 rekatkan 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
  • Lapisan 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

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

  • 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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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 tutorial ini, kami menggunakan sampul buku yang disediakan dengan Buku Presentasi Divi, tetapi Anda juga dapat menambahkan sampul buku Anda sendiri.

Buat Toko Online Anda dengan mudah

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

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.

final pikiran

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!

Artikel ini berisi komentar 0

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