Cara Membuat Daftar Isi yang Dapat Diklik untuk Postingan Blog dengan Blok Tata Letak Divi

Menambahkan daftar isi yang dapat diklik ke posting blog adalah cara yang bagus untuk meningkatkan pengalaman pengguna. Dalam banyak kasus, daftar isi posting blog menggunakan tautan jangkar untuk membantu pengguna menavigasi konten. Dan, daftar isi (dengan tautan jangkar) sangat mudah dibuat menggunakan HTML dasar. Namun, menambahkan desain/CSS khusus untuk menyesuaikannya bisa menjadi tantangan. Di sinilah Blok Tata Letak Divi berguna.

Dalam tutorial ini, kita akan mendesain daftar isi yang dapat diklik untuk satu postingan blog (di Gutenburg) yang menggunakan tautan jangkar untuk mengarahkan pengguna ke judul yang ditentukan di seluruh postingan. Untuk melakukan ini, kita akan menggunakan blok Tata Letak Divi untuk membuat Daftar Isi dengan semua alat desain canggih dari pembuat Divi yang kita miliki.

Mari kita mulai!

Sneak Peek

Unduh Blok Tata Letak Daftar Isi yang Dapat Digunakan Kembali GRATIS

Untuk meletakkan tangan Anda di blok tata letak Daftar Isi dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Cara Menggunakan Unduhan untuk Mengimpor Blok Tata Letak ini di Situs Anda

Untuk mengimpor Blok Tata Letak Gambar Divi yang dapat digunakan kembali ini ke situs Anda, pertama-tama, Anda perlu mengekstrak file unduhan. Di sana Anda akan menemukan tiga file JSON yang perlu Anda impor ke situs Anda.

Pergi untuk mengedit posting menggunakan editor default (Gutenberg). Buka menu "Alat & Opsi Lainnya" di kanan atas halaman dan pilih "Kelola semua Blok yang Dapat Digunakan Kembali".

Kemudian klik tombol Impor dari JSON. Pilih salah satu file JSON dari folder unduhan dan klik tombol impor.

Setelah selesai, tambahkan blok baru di dalam Gutenberg. Kami akan dapat menemukan blok tata letak Reusable yang diimpor di bawah sakelar opsi Reusable. Cukup klik yang bernama "Daftar Isi" untuk menambahkannya ke posting Anda.

Itu dia!

Langsung saja ke tutorialnya ya?

Apa yang Kita Butuhkan untuk Memulai

Untuk memulai, kita perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat posting baru di WordPress dan gunakan editor default (Gutenberg) untuk menambahkan beberapa konten tiruan (judul, heading, paragraf, gambar unggulan, dll.). Pastikan Anda membuat setidaknya tiga blok judul dengan konten di bawah masing-masing. Karena kita akan menambahkan tautan jangkar ke daftar isi, kita memerlukan tiga judul untuk ditautkan ke bagian bawah pos.

Setelah itu, kita siap untuk memulai.

Membuat Daftar Isi yang Dapat Diklik untuk Postingan Blog dengan Blok Tata Letak Divi

Tambahkan Blok Tata Letak Divi

Pertama, tambahkan Blok Tata Letak Divi baru ke bagian atas konten posting blog Anda.

Kemudian klik tombol Bangun Tata Letak Baru. Ini akan menyebarkan editor tata letak yang merupakan pembuat Divi untuk blok tata letak.

Menambahkan baris

Di Layout Editor, mulai desain dengan menambahkan baris satu kolom.

Tambahkan Pembagi Atas

Di dalam kolom, tambahkan modul pembagi. Ini akan menjadi salah satu dari dua pembagi yang akan kita gunakan untuk membingkai daftar isi.

Pengaturan Pembagi

Selanjutnya perbarui pengaturan pembagi sebagai berikut:

• Warna Garis: #eeeeee
• Posisi Garis: Berpusat Vertikal
• Berat Pembagi: 3px
• Lebar: 25%
• Padding: 30px atas, 30px bawah

Tambahkan Pembagi Bawah

Untuk membuat pembagi kedua, duplikat pembagi sebelumnya.

Buat Judul Daftar Isi dengan Modul Blurb

Setelah pembagi berada di tempatnya, mari buat heading untuk daftar isi.

Tambahkan modul uraian baru di antara dua pembagi.

Konten Buram

Buka pengaturan uraian dan perbarui konten sebagai berikut:

• Judul : “Daftar Isi”
• Gunakan Ikon: YA
• Ikon: lihat tangkapan layar

Pengaturan Desain Blurb

Di bawah tab desain, perbarui yang berikut ini:

• Warna Ikon: #eeeeee
• Penempatan Gambar/Ikon: Kiri
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 100px
• Judul Judul Tingkat: H2
• Lebar Konten: 100%
• Tinggi: 38px

Perhatikan bahwa tinggi blurb kurang dari tinggi ikon. Ini memungkinkan ikon memanjang ke bawah di sebelah item uraian yang akan kita tambahkan selanjutnya.

Setelah uraian judul di tempat, kami siap untuk mulai menambahkan item/penjelasan yang dapat diklik yang membentuk daftar isi kami. Untuk melakukan ini, kita juga akan menggunakan modul blurb.

Tambahkan Item #1 Blurb

Tambahkan modul uraian baru di bawah judul uraian.

Konten Buram

Buka pengaturan uraian dan keluarkan konten isi default sehingga hanya judul yang terlihat. Judul adalah tempat Anda akan menambahkan blok teks yang sesuai dengan bagian/judul yang ingin kami tautkan untuk lebih jauh ke bawah pos.

Kemudian perbarui konten dengan ikon panah kanan di desktop.

Terapkan opsi arahkan kursor untuk ikon dan ubah ikon menjadi Panah Bawah saat mengarahkan kursor. Ini akan menjadi interaksi mikro yang bagus yang menekankan tautan akan menggulir ke lokasi di bawah pos.

Desain kabur

Sekarang kita bisa mendesain modul blurb sesuka kita. Untuk contoh ini, mari kita perbarui pengaturan uraian sebagai berikut:

• Warna Ikon: #b856c7
• Ikon Lingkaran: YA
• Warna Lingkaran: #ffffff
• Tampilkan Batas Lingkaran: YA
• Warna Batas Lingkaran: #b856c7
• Penempatan Gambar/Ikon: Kiri
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 16px
• Ukuran Teks Teks: 16px
• Tinggi Baris Judul: 2em
• Lebar Konten: 100%
• Margin: 118px kiri
• Padding: 10px atas
• Padding (arahkan kursor): 10px ke kiri

Duplikat Blurb untuk Lebih Banyak Item

Sekarang setelah item uraian pertama kami selesai, kami dapat menggandakannya sebanyak yang diperlukan tergantung pada jumlah tautan yang dapat diklik yang ingin kami sertakan dalam posting. Untuk saat ini, mari kita gandakan dua kali untuk membuat total tiga item untuk daftar isi kita.

Menambahkan URL Tautan Jangkar

Saat ini item uraian kami tidak dapat diklik sehingga kami perlu menambahkan URL tautan jangkar yang diperlukan ke masing-masing item tersebut. URL tautan jangkar selalu dimulai dengan tagar (#) diikuti dengan ID apa pun yang ingin Anda sertakan.

Tautan Jangkar #satu

Untuk mempermudah, kita akan menambahkan tautan jangkar "#one" ke uraian pertama dalam daftar. Untuk melakukan ini, buka pengaturan untuk modul uraian pertama dalam daftar (bukan uraian judul) dan perbarui yang berikut:

• URL Tautan Modul: #one

Tautan Jangkar #dua

Kemudian buka pengaturan item uraian kedua dan tambahkan tautan berikut:

• URL Tautan Modul: #dua

Tautan Jangkar #tiga

Terakhir, tambahkan tautan berikut ke item uraian ketiga:

• URL Tautan Modul: #three

Mengencangkan Jarak

Pengaturan Baris

Saat ini, ada terlalu banyak ruang di antara elemen baris kita. Untuk memperbaikinya, buka pengaturan baris dan perbarui lebar dan bantalan selokan sebagai berikut:

• Lebar Talang: 1
• Lebar: 100%
• Padding: 0px atas, 0px bawah

Pengaturan Bagian

Mari kita keluarkan padding bagian juga. Buka pengaturan bagian dan perbarui yang berikut ini:

• Padding: 0px atas, 0px bawah

Simpan Tata Letaknya

Kami selesai dengan desain daftar isi kami. Pastikan Anda menyimpan dan keluar dari editor tata letak.

Sekarang Anda akan melihat daftar isi baru Anda di dalam editor blok default.

Menambahkan Jangkar HTML ke Judul Posting

Kami telah menambahkan URL tautan jangkar ke setiap uraian yang membentuk item daftar isi kami. Sekarang kita perlu menambahkan ID CSS yang sesuai (atau HTML Anchor) ke blok heading di bagian bawah postingan.

Jangkar HTML satu

Klik pada blok yang berisi tajuk pertama yang ingin Anda tautkan/lompati. Kemudian buka pengaturan untuk blok itu. Di bawah sakelar Opsi lanjutan, tambahkan "satu" ke kotak input Jangkar HTML:

Jangkar HTML: satu

Ingat, item uraian pertama kami memiliki URL "#one" yang akan ditautkan ke yang ini. Tapi jangan tambahkan hashtag ke HTML Anchor ini. Itu tidak diperlukan.)

Jangkar HTML dua

Selanjutnya, pilih blok heading kedua dan perbarui yang berikut:

• Jangkar HTML: dua

Jangkar HTML tiga

Dan terakhir, pilih blok heading ketiga dan tambahkan HTML Anchor sebagai berikut:

• Jangkar HTML: tiga

Hasil Akhir

Mari kita lihat hasil akhirnya di live post.

Dan inilah bagaimana tautan jangkar akan berfungsi. Perhatikan efek hover pada ikon dan bagaimana tautan bergulir dengan mulus ke jangkar yang sesuai di bawah halaman.

Menambahkan Daftar Isi sebagai Blok Tata Letak yang Dapat Digunakan Kembali

Jika Anda ingin tetap menggunakan blok tata letak ini sebagai templat untuk posting mendatang, sebaiknya simpan blok tata letak sebagai blok tata letak yang dapat digunakan kembali. Ini akan memungkinkan Anda untuk menambahkan blok "daftar isi" dengan mudah dari daftar blok bawaan.

Untuk melakukan ini, klik Blok Tata Letak Divi yang berisi daftar isi dan buka menu pengaturan lainnya. Kemudian pilih "Tambahkan ke Blok Tata Letak yang Dapat Digunakan Kembali".

Masukkan nama untuk blok yang dapat digunakan kembali (“Daftar Isi”) dan klik simpan.

Sekarang Anda akan memiliki blok yang tersedia di bawah daftar Blok yang Dapat Digunakan Kembali saat menambahkan blok baru ke pos.

Sekarang blok tata letak berfungsi sebagai templat yang nyaman untuk membuat daftar isi untuk posting Anda. Jangan lupa untuk mengonversi blok menjadi blok tata letak biasa sebelum menyesuaikannya untuk posting tertentu. Anda tidak ingin mengubah blok tata letak yang dapat digunakan kembali.

Untuk melakukan ini, buka menu pengaturan lainnya dari blok tata letak yang dapat digunakan kembali dan pilih "Konversikan ke Blok Reguler".

Pikiran Akhir

Saya harap daftar isi blok tata letak Divi ini terbukti bermanfaat untuk posting yang cukup panjang untuk membutuhkannya. Jika Anda tertarik melakukan ini untuk Anda secara dinamis (seperti membuat daftar isi untuk Anda secara otomatis berdasarkan judul posting), ada plugin di luar sana seperti Daftar Isi Plus yang melakukan hal semacam ini untuk Anda. Posting ini untuk mereka yang suka mendesain dengan Divi dan tidak keberatan membuat daftar isi berdasarkan posting demi posting.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!