Hari ini saya akan menunjukkan kepada Anda bagaimana merancang desain untuk resensi buku yang menarik dengan menggunakan Ebook Paket Tata Letak Divi dan opsi bawaan Divi saja. Ini adalah cara yang bagus untuk menambahkan bukti sosial ke halaman arahan Anda, meningkatkan kredibilitas, dan membagikan ulasan singkat orang-orang dengan cara yang elegan.
Ayo mulai desainnya
Unggah tata letak halaman arahan paket ebook
Hal pertama yang harus dilakukan adalah membuat halaman baru menggunakan tata letak halaman arahanEbook Paket Tata Letak yang akan Anda temukan di Tata Letak Premade.
Tambahkan bagian baru
Gulir ke bawah tata letak dan tambahkan bagian baru di mana Anda ingin menampilkan resensi 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 kustom antar kolom menggunakan pengaturan 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 pengaturan baris Anda siap, Anda dapat mulai menambahkan modul yang berbeda, dimulai dengan modul gambar di kolom pertama. Unggah gambar pilihan Anda tetapi pastikan rasio aspeknya 1: 1. Ini berarti tinggi dan lebarnya harus memiliki nilai yang sama.
Gambar Keselarasan
Pilih perataan gambar kiri pada tab Desain.
- Perataan gambar: kiri
perekat
Kami juga mengubah lebar modul ini untuk berbagai ukuran layar.
- Lebar: 20% (desktop dan tablet), 30% (telepon)
jarak
Untuk memungkinkan tumpang tindih di sisi kiri garis, kami menambahkan nilai margin kiri negatif dalam pengaturan Spasi modul Gambar.
- Margin kiri: -30px
Batas
Untuk melengkapi desain gambar, kami juga menambahkan '50vw' ke masing-masing sudut di pengaturan perbatasan. Ini akan memastikan bahwa gambar mempertahankan bentuk melingkar di berbagai ukuran layar.
Tambahkan modul teks # 1 ke kolom 1
Tambahkan simbol bintang ke area konten
Mari kita lanjutkan ke modul berikutnya, yaitu modul teks pemeringkatan. Untuk menyorot jumlah bintang, kita akan menggunakan simbol. Silakan salin simbol-simbol berikut dan tempelkan ke dalam kotak isi dari modul teks baru: ★★★★.
Warna latar belakang
Ubah bagian bawah modul itu.
- Warna latar: # 9400ff
Pengaturan teks
Beralih ke 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 peringkat, kami akan menambahkan bayangan halus.
- Box Shadow Blur Force: 50px
- Warna bayangan: rgba (0,0,0,0,3)
Terjemahan Transformer
Terakhir, kami akan memposisikan ulang modul teks menggunakan nilai konversi terjemahan kustom. Anda dapat menunda langkah ini sampai Anda juga 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 selanjutnya yang kita butuhkan di kolom 1 adalah modul teks lainnya. Tambahkan isi pilihan Anda dan tautan ke resensi dan buku.
Pengaturan teks
Beralih ke tab Desain dan ubah pengaturan teks yang sesuai:
- Font Teks: Montserrat
- Ukuran teks: 18px
Pengaturan tautan teks
Ubah warna teks tautan juga.
- Tautan warna teks: #9400ff
jarak
Lalu pergi ke pengaturan jarak dan posisikan ulang elemen 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
Beralih ke 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
Pergi ke pengaturan jarak 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 flex untuk menyelaraskan gambar di tengah:
display: melenturkan;
Unduh gambar sampul buku
Pada kolom kedua kita membutuhkan dua modul, dimulai dengan modul gambar dengan sampul buku. Untuk tutorial ini, kami menggunakan sampul buku yang disediakan dengan buku ikhtisar Divi, tetapi Anda juga dapat menambahkan sampul buku Anda sendiri.
perekat
Pergi ke tab Design dari modul Image dan ubah lebarnya.
- Lebar: 79% (desktop), 40% (tablet dan telepon)
Elemen Utama Lanjut
Di sini kami 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 cara mendesain resensi buku yang mengagumkan untuk halaman penerbitan ebook Anda berikutnya. Ini membantu Anda menambahkan bukti sosial ke halaman Anda dan meyakinkan pengunjung kredibilitas buku Anda. Jika Anda memiliki pertanyaan atau saran, pastikan untuk memberikan komentar di bagian komentar di bawah!
