Unduh Pratinjau Buku GRATIS Tata Letak Halaman Arahan Divi Termasuk Tautan Jangkar & CTA

Baik Anda menjual buku fisik atau e-book, memiliki halaman arahan yang efektif dapat melakukan keajaiban. Anda dapat mendekati halaman arahan ini dengan cara tradisional, atau Anda dapat mengubahnya menjadi halaman arahan pratinjau buku. Halaman arahan pratinjau buku memungkinkan orang membaca bagian atau bab tertentu dari buku Anda terlebih dahulu. Itu juga dilengkapi dengan tautan jangkar yang membuat navigasi melalui bagian atau bab yang berbeda menjadi mulus. Selain itu, Anda juga ingin menempatkan CTA dalam sorotan yang akan mengarahkan lalu lintas ke mana pun Anda menjual buku Anda.

Dalam tutorial ini, kita akan membuat ulang halaman arahan pratinjau buku yang menakjubkan dari awal dengan Divi. Anda juga dapat mengunduh tata letak JSON secara gratis jika Anda ingin segera menambahkannya ke situs web Anda.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Halaman Arahan Pratinjau Buku GRATIS

Untuk mendapatkan tata letak halaman arahan pratinjau buku gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Reguler Baru

Jarak

Mulailah dengan membuat halaman baru dan tambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan hapus semua bantalan atas dan bawah khusus.

• Padding Atas: 0px
• Padding Bawah: 0px

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Kolom 3 Latar Belakang Gradien

Tambahkan latar belakang gradien ke kolom ketiga juga.

• Warna 1: #6a30ff
• Warna 2: #a202ff
• Kolom 3 Jenis Gradien: Linier
• Kolom 3 Arah Gradien: 166deg

Perekat

Kemudian, buka pengaturan ukuran dan biarkan baris memenuhi seluruh lebar layar dengan menambahkan pengaturan ukuran berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Pindah ke pengaturan spasi dan hapus padding atas dan bawah khusus dari baris. Tambahkan beberapa nilai padding ke kolom pertama dan ketiga juga.

• Padding Atas: 0vw
• Padding Bawah: 0vw
• Kolom 1 Padding Atas: 15vw (Desktop), 10vw (Tablet & Ponsel)
• Kolom 2 Padding Bawah: 15vw (Desktop), 10vw (Tablet & Ponsel)
• Kolom 1 Padding Kiri: 7vw

Kolom 2 ID CSS

Seperti yang Anda lihat di pratinjau posting ini, ada bilah gulir yang melekat pada kolom kedua. Jika Anda ingin menata scrollbar ini nanti di postingan, lanjutkan dan tambahkan ID CSS ke kolom kedua.

• Kolom 2 ID CSS: style-scrollbar

Kolom 2 Elemen Utama

Hal berikutnya yang akan kita lakukan adalah membiarkan kolom dapat digulir dengan menambahkan baris kode CSS berikut ke elemen utama kolom 2:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Sekarang kita telah memodifikasi semua pengaturan baris, kita dapat mulai menambahkan modul! Mulailah dengan Modul Teks di kolom 1 dan tambahkan beberapa konten pilihan Anda.

Pengaturan Teks

Buka pengaturan teks modul dan buat beberapa perubahan.

• Font Teks: Lato
• Warna: #666666
• Ukuran Teks: 1.6vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Tinggi Baris Teks: 2vw

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Modul selanjutnya yang akan kita tambahkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warnanya.

• Warna: #5802ed

Perekat

Bermain-main dengan nilai ukuran juga.

• Berat Pembagi: 4px
• Lebar: 3vw (Desktop), 6vw (Tablet), 9vw (Telepon)
• Tinggi: 0px

Jarak

Dan tambahkan beberapa bantalan atas dan bawah khusus untuk menciptakan ruang.

• Margin Atas: 1vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Margin Bawah: 7vw

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Ke modul ketiga, yang merupakan Modul Teks lainnya. Di sini, kami telah menambahkan simbol (►) diikuti dengan judul bab pertama ke kotak konten.

Tambahkan Tautan

Kami menautkan seluruh modul ini ke ID jangkar yang akan kami tambahkan nanti di posting ini.

• URL Tautan Modul: https://yourwebsite.com/pagetitle/#chapter-1

Pengaturan Teks

Lanjutkan dengan masuk ke pengaturan teks dan gaya konten persis seperti yang Anda inginkan.

• Font Teks: Lato
• Berat Font Teks: Ringan
• Warna Teks: #666666
• Ukuran Teks: 1.3vw (Desktop), 2vw (Tablet), 3.3vw (Telepon)

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 1vw
• Padding Bawah: 1vw

Modul Teks Klon #2 Dua Kali

Setelah Anda selesai memodifikasi Modul Teks, klon dua kali (atau hingga bab sebanyak yang ingin Anda bagikan).

Ubah Konten

Ubah konten masing-masing duplikat.

Ubah Tautan

Bersama dengan ID jangkar di akhir URL tautan modul. Dalam hal ini, itu berarti menambahkan '#bab-2' ke duplikat pertama dan '#bab-3' ke duplikat kedua.

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Ke kolom berikutnya, yang dapat digulir. Di sini, kita akan menggunakan Modul Teks untuk menambahkan halaman yang berbeda dari pratinjau buku. Mulailah dengan menambahkan Modul Teks pertama dengan beberapa konten pilihan Anda.

Warna latar belakang

Kemudian, pergi ke pengaturan latar belakang dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Ubah juga pengaturan teks.

• Font Teks: Lato
• Ukuran Teks: 0.8vw (Desktop), 1.6vw (Tablet), 2.1vw (Telepon)
• Tinggi Baris Teks: 1.7vw (Desktop), 3.3vw (Tablet), 3.8vw (Telepon)

Pengaturan Teks H2

Bermain-main dengan pengaturan teks H2 juga.

• Judul 2 Font: Lato
• Judul 2 Berat Font: Berat
• Judul 2 Warna Teks: #5802ed
• Judul 2 Ukuran Teks: 2vw (Desktop), 2.5vw (Tablet), 2.9vw (Telepon)
• Pos 2 Tinggi Baris: 2.3vw

Jarak

Lanjutkan dengan masuk ke pengaturan spasi dan menambahkan margin kustom dan nilai padding berikut:

• Margin Atas: 2vw (Desktop), 7vw (Tablet), 10vw (Telepon)
• Margin Bawah: 2vw (Desktop), 7vw (Tablet), 10vw (Telepon)
• Margin Kiri: 5vw
• Margin Kanan: 5vw
• Padding Atas: 6vw
• Padding Bawah: 6vw
• Padding Kiri: 6vw
• Padding Kanan: 6vw

Bayangan Kotak

Bentuk Modul Teks dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.09)

ID CSS

Lanjutkan dengan menambahkan ID CSS ke Modul Teks. Pastikan Anda menggunakan ID CSS yang sama dengan yang Anda tautkan di kolom pertama baris.

• ID CSS: bab-1

Modul Teks Klon Dua Kali

Setelah Anda menata Modul Teks, klon modul itu sebanyak yang Anda mau.

Ubah Konten

Ubah konten setiap duplikat Modul Teks.

Ubah ID CSS

Bersama dengan ID CSS.

• ID CSS: bab-2
• ID CSS: bab-3

Tambahkan Modul Teks ke Kolom 3

Tambah isi

Ke kolom berikutnya dan terakhir! Tambahkan Modul Teks dengan beberapa konten pilihan Anda.

Pengaturan Teks

Lalu, buka tab desain dan ubah pengaturan teks.

• Font Teks: Lato
• Berat Font Teks: Berat
• Warna Teks: #ffffff
• Ukuran Teks: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Tinggi Baris Teks: 2vw
• Orientasi Teks: Tengah

Jarak

Tambahkan beberapa bantalan kiri dan kanan khusus berikutnya.

• Kiri: 2vw
• Kanan: 2vw

Tambahkan Modul Tombol ke Kolom 3

Tambahkan Salinan

Lanjutkan dengan menambahkan Modul Tombol ke kolom ketiga dengan beberapa salinan pilihan Anda.

Penyelarasan

Ubah perataan tombol berikutnya.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Ubah juga pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 1.5vw (Tablet), 2.4vw (Telepon)
• Warna Teks Tombol: #5802ed
• Warna Latar Tombol: #ffffff
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 10vw
• Jarak Huruf Tombol: 0px
• Berat Huruf: Sangat Tebal
• Gaya Font: Huruf Besar

Jarak

Dan tambahkan beberapa nilai margin dan padding khusus untuk menata dan memposisikan modul.

• Margin Atas: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 3vw (Desktop), 7vw (Tablet), 9vw (Telepon)
• Padding Kanan: 3vw (Desktop), 7vw (Tablet), 9vw (Telepon)

Bilah Gulir Gaya

Buka Pengaturan Halaman

Bagian terakhir dari tutorial ini didedikasikan untuk menata scrollbar kolom kedua. Apakah Anda menata bilah gulir kolom atau tidak, sepenuhnya terserah Anda. Tidak menata itu tidak mengubah apa pun tentang fungsionalitasnya. Jika Anda memutuskan untuk menata bilah gulir, buka pengaturan halaman.

Tambahkan Kode CSS

Kemudian, buka tab lanjutan dan tambahkan beberapa CSS khusus ke kotak CSS Kustom dan selesai!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat halaman arahan pratinjau buku yang menakjubkan dan efektif dengan tautan jangkar ke berbagai bagian atau bab buku Anda dan CTA yang menonjol. Kami juga telah membagikan tata letak JSON secara gratis sehingga Anda dapat mulai menambahkannya ke situs web apa pun yang Anda buat segera! Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.