Cara Membuat Halaman Peta Situs HTML Dinamis di Divi

Halaman peta situs HTML dapat berguna bagi pengguna yang ingin menavigasi situs Divi Anda dari tampilan panorama. Pada dasarnya, peta situs HTML (seperti namanya) adalah peta situs Anda dalam HTML. Halaman peta situs biasanya berisi daftar tautan yang terorganisir ke semua konten yang relevan di seluruh situs Anda. Halaman Peta Situs HTML dapat dibuat secara manual, tetapi akan membantu jika Anda dapat menghasilkan konten halaman peta situs secara dinamis sehingga Anda tidak perlu khawatir tentang pembaruan terus-menerus.

Dalam tutorial ini, kami akan menunjukkan cara membuat layout halaman sitemap HTML dinamis di Divi menggunakan kombinasi Divi Design dan plugin WP Sitemap Page. Pengaturannya sangat mudah dan hasilnya sangat efektif.

Mari kita mulai.

Sneak Peek

Unduh Tata Letak Halaman Peta Situs HTML GRATIS

Untuk mengetahui tata letak halaman peta situs dari tutorial ini, 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!

Berlangganan Saluran Youtube Kami

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file JSON ke Divi Builder.

CATATAN: Tata letak ini bergantung pada kode pendek yang digunakan dengan plugin WP Sitemap Page. Jika Anda tidak memiliki plugin yang aktif di situs Anda, Anda tidak akan melihat konten di dalam modul.

Apa yang Anda Butuhkan untuk Tutorial ini

Untuk tutorial ini, Anda memerlukan yang berikut:

1. Tema Divi.
2. Konten WordPress. Untuk menghasilkan konten halaman peta situs HTML, Anda harus memiliki halaman, posting, kategori, produk, dll. yang sebenarnya di situs Anda.
3. Plugin Halaman Peta Situs WP. Ini dapat diakses dari dasbor WordPress yang akan kami tunjukkan cara melakukannya di bawah.

Langsung saja ke tutorialnya ya?

Perbedaan Antara Peta Situs XML dan HTML

Jika Anda baru mengenal peta situs, pada dasarnya ada dua jenis – XML dan HTML. Peta situs XML dibuat secara khusus untuk memberi mesin telusur peta terperinci situs Anda. Untuk sebagian besar, peta situs XML hanya ada untuk mesin pencari seperti Google untuk memudahkan mereka merayapi situs Anda yang akan membantu meningkatkan peringkat Anda. Dengan demikian, situs XML bukan untuk pengguna. Di sinilah peta situs HTML masuk. Peta situs HTML adalah HTML aktual bawaan (dan PHP karena kami menggunakan Divi dan WordPress) pada halaman peta situs aktual di situs web Anda. Idenya adalah untuk menghasilkan daftar terorganisir dari semua konten situs web yang relevan (posting, halaman, produk, kategori, dll.) untuk pengguna di satu tempat yang nyaman. Pada dasarnya, halaman peta situs HTML seperti menu mega untuk seluruh situs Anda.

Untuk info lebih lanjut tentang peta situs (seperti cara membuat peta situs XML di WordPress), lihat posting kami tentang cara membuat peta situs untuk situs WordPress Anda.

Menyiapkan Plugin

Untuk tutorial ini, kita akan menggunakan plugin WordPress GRATIS namun efektif yang disebut WP Sitemap Page yang memungkinkan kita menampilkan konten peta situs secara dinamis dalam modul Divi melalui penggunaan shortcode.

Untuk mengunduh plugin, buka Dasbor WordPress Anda dan arahkan ke plugins > Add New. Kemudian cari plugin halaman peta situs wp menggunakan bilah pencarian lalu instal dan aktifkan plugin.

Untuk membuka Pengaturan Plugin Halaman Peta Situs WP, navigasikan ke Pengaturan > Halaman Peta Situs WP. Di sana Anda akan melihat pengaturan yang tersedia. Untuk tutorial ini, kita akan membiarkan opsi di bawah tab pengaturan saja, tetapi jangan ragu untuk melihatnya nanti.

Klik tab Cara Menggunakan untuk melihat semua contoh kode pendek yang tersedia yang dapat kita gunakan untuk menampilkan konten halaman peta situs kita. Yang disorot adalah yang akan kita gunakan.

Membuat Halaman Peta Situs HTML di Divi

Setelah plugin disiapkan, kami siap untuk mulai mendesain tata letak halaman Peta Situs di Divi.

Membuat Halaman Baru

Untuk memulai, buat halaman baru, beri judul “Peta Situs”, lalu klik “Gunakan Divi Builder”.

Menambahkan Tata Letak Premade ke Halaman

Anda akan disambut dengan tiga opsi tentang bagaimana Anda ingin membangun halaman Anda. Pilih "Pilih Tata Letak Premade".

Kemudian cari dan temukan Paket Tata Letak Majalah dan klik untuk menggunakan Tata Letak Halaman Kategori.

Menghapus Elemen yang Tidak Perlu

Karena kita hanya akan menggunakan bagian atas dari tata letak yang dibuat sebelumnya ini, setelah tata letak dimuat ke dalam halaman, hapus semua bagian di bawah bagian pertama.

Kemudian tambahkan bagian reguler baru di bawah bagian atas.

Menambahkan Baris #1 untuk Menampilkan Halaman

Untuk baris pertama kami, kami akan menambahkan konten halaman peta situs HTML yang akan menampilkan semua halaman di situs. Mari kita mulai dengan menambahkan baris satu kolom.

Menambahkan Modul Teks ke Halaman Tampilan

Di dalam baris, tambahkan modul teks baru.

Kemudian rekatkan yang berikut ini di dalam kotak konten di bawah tab teks:

<h2>Pages</h2>

[wp_sitemap_page only="page" display_title="false"]

Pengaturan Desain Teks

Meskipun sebagian besar konten teks dihasilkan oleh kode pendek, kami masih dapat mendesain elemen tersebut menggunakan pengaturan desain Divi bawaan. Lompat ke tab desain dan perbarui yang berikut:

• Font Teks: Montserrat
• Berat Font Teks: Tebal

Kemudian pilih tab pengaturan tautan dan perbarui yang berikut:

• Warna Teks Tautan: #333333

Selanjutnya, pilih tab pengaturan daftar tidak berurutan dan perbarui yang berikut:

• Warna Teks Daftar Tidak Terurut: #c5e0dc
• Tipe Gaya Daftar Tidak Terurut: Kotak
• Posisi Gaya Daftar Tidak Terurut: Di dalam
• Indentasi Item Daftar Tidak Terurut: 5vw

CATATAN: Semua gaya tautan akan menggantikan gaya daftar yang tidak berurutan. Itu sebabnya kami dapat menambahkan warna teks daftar yang tidak berurutan ini dan itu hanya akan berlaku untuk peluru persegi kecil.

Perbarui gaya Judul 2 sebagai berikut:

• Judul 2 Font: Montserrat
• Judul 2 Berat Font: Tebal
• Judul 2 Ukuran Teks: 3vw (desktop), 38px (tablet)

Kemudian perbarui jarak dengan beberapa margin negatif kiri untuk menarik modul sedikit ke kiri. Ini akan menambahkan desain tumpang tindih yang bagus dengan heading dan bayangan kotak kita.

Terakhir, tambahkan Kelas CSS khusus ke modul agar kami dapat menargetkannya nanti dengan beberapa CSS khusus untuk memecah konten menjadi kolom.

• Kelas CSS: daftar kolom

Pengaturan Baris

Sekarang perbarui pengaturan baris sebagai berikut:

• Margin: 5vw bawah

• Bayangan Kotak: lihat tangkapan layar
• Posisi Horizontal Bayangan Kotak: -5vw
• Posisi Vertikal Bayangan Kotak: 0px
• Warna Bayangan: #c5e0dc

Menambahkan Baris #2 untuk Menampilkan Postingan dan Kategori

Duplikat Baris untuk Membuat yang Baru

Di baris kedua kami, kami akan menampilkan konten halaman peta situs HTML untuk posting blog kami. Untuk membuat baris kedua, duplikat baris yang baru saja kita buat yang berisi halaman kita.

Perbarui Modul Teks dengan Kode Pendek untuk Menampilkan Kategori

Kemudian buka pengaturan untuk modul teks di baris duplikat dan ganti konten dengan yang berikut:

<h2>Categories</h2>

[wp_sitemap_page only="category" display_title="false"]

Kode pendek ini akan secara dinamis menampilkan kategori posting.

Modul Teks Duplikat untuk Menampilkan Judul Terpisah untuk Postingan Berdasarkan Kategori

Untuk menampilkan posting berdasarkan kategori, duplikat modul teks yang berisi kategori posting dan perbarui konten dengan yang berikut:

<h2>Posts by Category</h2>

Modul Teks Duplikat dan Perbarui Konten dengan Kode Pendek untuk Membuat Daftar Postingan Berdasarkan Kategori

Kami akan menempatkan judul dalam modul teks terpisah dari kode pendek untuk alasan desain.

Gandakan modul teks yang baru saja Anda duplikasikan sekali lagi.

Kemudian perbarui konten modul teks duplikat baru dengan kode pendek baru sebagai berikut:

[wp_sitemap_page only="post" display_category_title_wording="false" display_title="false"]

Perbarui Desain Konten Kode Pendek dengan Divi

Karena kode pendek ini memiliki daftar bersarang, kita perlu mengoptimalkannya sedikit berbeda. Klik tab desain dan perbarui yang berikut:

• Posisi Gaya Daftar Tidak Terurut: Luar
• Indentasi Item Daftar Tidak Terurut: 0px

• Margin: 0px kiri
• Padding: 3.2vw tersisa

Kemudian ganti Kelas CSS dengan yang berikut ini:

• Kelas CSS: kolom-fleksibel

Menambahkan Baris #3 untuk Produk

Di baris ketiga dan terakhir ini, kita akan menambahkan konten halaman peta situs HTML yang menampilkan kategori produk dan semua produk.

Duplikat Baris #1

Untuk memulai, mari kita gandakan baris atas (yang menampilkan halaman).

Perbarui Pengaturan Modul Teks untuk Menampilkan Kategori Produk

Kemudian perbarui pengaturan teks duplikat dengan konten berikut:

<h2>Product Categories</h2>

[wp_sitemap_page only="product_cat" display_title="false"]

Kode pendek ini akan menampilkan kategori produk.

Modul Teks Duplikat untuk Menampilkan Produk

Selanjutnya, duplikat modul teks yang baru saja dibuat.

Kemudian perbarui pengaturan teks duplikat dengan konten berikut:

<h2>Products</h2>

[wp_sitemap_page only="product" display_title="false"]

Kode pendek ini akan menampilkan semua produk di seluruh situs.

Perbarui Warna Bayangan Kotak Baris

Untuk memberikan sedikit pemisahan antar bagian, kita dapat mengubah bayangan kotak untuk baris yang berisi kategori produk dan produk kita. Untuk melakukannya, perbarui pengaturan baris sebagai berikut:

• Warna Bayangan: #ffc077

Perbarui Judul Halaman

Sebelum kita lupa, lompat ke bagian atas dan perbarui dua modul teks dengan teks, "Peta Situs". Ini akan memberikan judul yang akurat untuk halaman peta situs kita.

Hasil Sejauh Ini

Inilah hasilnya sejauh ini.

Desain satu kolom ini terlihat sangat bagus, jadi jangan ragu untuk menyebutnya sehari dan mengikutinya. Tetapi jika Anda ingin meningkatkan tata letak dengan beberapa kolom, lihat di bawah.

Menambahkan Beberapa Kolom ke Konten Halaman Peta Situs dengan CSS Kustom

Saat ini, tata letak default akan menampilkan konten halaman peta situs dalam satu kolom. Jika Anda ingin memecahnya menjadi beberapa kolom di desktop dan tablet, Anda dapat menambahkan CSS khusus ke modul kode di Divi.

Pertama, tambahkan modul kode di bagian bawah halaman (tidak masalah di mana).

Kemudian paste kode CSS berikut ke dalam kotak kode:

<style>
@media all and (min-width: 767px) {
  
  .flex-columns .wsp-posts-list {
    display:flex;
    flex-wrap: wrap;
  }
  .flex-columns .wsp-posts-list>li>ul {
    width: 300px;
    padding: 2% 10% 10% 5%;
  }
  .column-list .wsp-container {
    column-count: 3;
  }
  
}
</style>

Cuplikan CSS ini hanya berlaku untuk tablet besar ke atas. Kode menargetkan modul teks dengan kelas CSS yang kami tambahkan sebelumnya. Untuk modul teks dengan kelas “flex-columns”, kode pendek yang menghasilkan posting berdasarkan kategori dibagi menjadi kolom dengan lebar 300px. Modul teks dengan kelas “daftar kolom” akan membagi konten halaman peta situs kode pendek menjadi tiga kolom.

Hasil Akhir

Lihat hasil akhirnya!

Cara lain untuk Menambahkan Konten Peta Situs

Kami juga dapat menambahkan konten peta situs ke halaman peta situs menggunakan Widget WordPress, modul Divi, dan kode pendek WooCommerce.

Gunakan Widget WordPress

WordPress memiliki beberapa widget standar yang akan menampilkan hal-hal seperti halaman, kategori, dan produk. Mereka dapat ditemukan di dasbor WordPress di bawah Appearance > Widgets. Jangan ragu untuk memanfaatkan mereka yang menggunakan modul bilah sisi Divi jika Anda perlu menambahkan sesuatu ke halaman peta situs.

Gunakan Modul Blog Divi

Modul blog Divi dilengkapi dengan pengaturan bawaan untuk menampilkan posting, halaman, proyek, dan produk. Dan jika Anda mengambil pendekatan minimalis untuk desain, Anda bisa mendapatkan daftar yang dapat disesuaikan yang cukup keren untuk halaman peta situs.

Misalnya, kita dapat menambahkan modul blog baru dan memilih produk sebagai jenis posting dan memberikan jumlah posting yang cukup besar sehingga sekarang kita akan menampilkan semua produk di situs kita.

Kemudian kita bisa menyembunyikan semua elemen kecuali link/judul produk.

Kita dapat melakukan hal yang sama untuk halaman juga. Cukup pilih halaman untuk jenis posting.

Kode Pendek Produk

Untuk produk WooCommerce, kita dapat menggunakan Shortcode Produk WooCommerce untuk menghasilkan daftar produk atau daftar kategori produk. Kode pendek produk sangat kuat dan serbaguna untuk menampilkan produk sesuai keinginan Anda. Anda bahkan dapat menggunakan kode pendek dalam Modul Divi untuk memanfaatkan pengaturan bawaan.

Pikiran Akhir

Menggunakan plugin Halaman Peta Situs WP yang dikombinasikan dengan kekuatan Divi adalah solusi sederhana yang bagus untuk menghasilkan halaman Peta Situs HTML dinamis untuk situs web Anda. Dan Anda dapat dengan mudah menambahkan konten yang lebih dinamis ke halaman peta situs Anda menggunakan kombinasi modul Divi dan shortcode WooCommerce juga. Jangan ragu untuk bereksperimen dan temukan desain yang tepat yang sesuai dengan kebutuhan Anda.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!