PoinTru.com – Saya pernah habiskan hampir seminggu penuh cuma untuk bikin satu template WordPress. Bukan karena bodoh, tapi karena ekosistemnya memang rumit. Elementor berat, PHP-nya bikin kepala pusing, belum lagi harus mikir responsifnya. Nah, waktu Saya pertama kali coba bikin template di WGS pakai Gemini Canvas, jujur rasanya beda banget. Dalam satu sesi, template-nya udah jadi. Masih kasar memang, tapi strukturnya benar dan bisa langsung dipakai.
Di artikel ini Saya mau sharing cara bikin template website WGS dari nol, mulai dari nulis prompt di Gemini Canvas, masukkan kode ke editor template WGS, sampai setting shortcut blog post supaya artikel-artikel Anda muncul otomatis di halaman depan. Ada juga bagian cloning template yang Saya rasa paling berguna untuk yang mau cepat-cepatan. Yuk mulai.
Kenapa Harus Tahu Struktur Layout Sebelum Bikin Template
Ini yang sering dilewatkan pemula. Sebelum nulis satu pun kata ke Gemini Canvas, Anda harus tahu dulu nama-nama elemen layout website. Kenapa? Karena kalau tidak tahu, promptnya nanti aneh. Masa mau nulis “buatkan kotak-kotak di atas halaman”? AI-nya bingung, hasilnya juga nggak karuan.
Nama elemen layout yang wajib dikenali sebelum mulai bikin template website.
- Header, bagian paling atas berisi logo dan menu navigasi
- Hero Section, area besar di bawah header dengan headline utama dan slider
- About Section, bagian perkenalan jasa atau produk
- Pricing Table, tabel harga paket layanan
- Testimoni Slider, slide ulasan pelanggan dengan tombol next dan prev
- Blog Grid, susunan kotak-kotak artikel dengan gambar, judul, dan tanggal
- Sidebar, kolom di pinggir halaman artikel untuk navigasi atau widget
- Footer, bagian bawah halaman berisi logo, link, dan copyright
Setelah hafal ini, nulis prompt jadi jauh lebih terarah. Percayalah.
Yang Perlu Disiapkan Sebelum Mulai
Persiapannya tidak banyak. Tapi kalau salah satu dari ini tidak ada, prosesnya bisa terhambat di tengah jalan.
- Akses ke WGS yang sudah aktif dan terinstall di domain Anda
- Akun Gemini dengan fitur Canvas aktif
- API ImageKit untuk upload gambar, daftar gratis dapat 25 GB
- Editor kode seperti W3 Schools atau Sublime Text untuk preview dan debug
- Pemahaman dasar tentang struktur halaman website, homepage, single post, dan archive
Langkah 1, Buat Prompt Template di Gemini Canvas
Ini titik awal yang paling penting. Kualitas prompt yang Anda tulis akan langsung menentukan kualitas kode yang dihasilkan. Jadi jangan asal ketik.
Contoh prompt untuk landing page jasa optimasi pagespeed, misalnya, bisa disusun seperti ini. Tulis elemen-elemen secara berurutan dari atas ke bawah, yaitu header dengan logo dan menu, hero section dengan slider tiga slide berisi gambar, judul, dan tombol next prev, about section berisi penjelasan jasa, pricing table dengan tiga paket harga, testimoni slider dengan gambar, nama, review bintang, dan next prev, blog grid tiga kolom dengan gambar, judul, tanggal, dan meta deskripsi, serta footer dengan logo, link, dan copyright. Tambahkan juga warna utama di prompt, misalnya biru untuk header.
- Buka Gemini Canvas di browser Anda.
- Tulis prompt secara terstruktur, sebutkan setiap elemen layout dari header sampai footer secara berurutan.
- Sertakan detail seperti jumlah slide, jumlah kolom grid, dan elemen di dalam setiap bagian.
- Tentukan warna utama template di akhir prompt, misalnya “warna utama biru tua”.
- Klik Generate dan tunggu sampai kode selesai dibuat.
- Salin seluruh kode hasil generate dari Canvas.
Langkah 2, Preview Kode dan Cek Responsifnya
Sebelum kode ditempel ke WGS, preview dulu di editor online seperti W3 Schools. Ini penting supaya Anda tahu template sudah jalan atau belum sebelum masuk ke sistem utama.
- Buka W3Schools Tryit Editor atau editor kode lain pilihan Anda.
- Tempel kode hasil Canvas ke editor tersebut.
- Klik Run untuk melihat tampilan awalnya.
- Cek tampilan mobile dengan mengecilkan jendela browser atau pakai fitur responsive preview.
- Pastikan menu berfungsi, slider bisa jalan, dan tombol next prev di testimoni bekerja.
- Kalau ada yang tidak responsif, tambahkan prompt di Canvas misalnya “perbaiki responsifnya untuk mobile” dan generate ulang.
Saya biasa lakukan ini karena kadang AI-nya bikin layout yang keren di desktop tapi ancur di mobile. Lebih baik ketahuan di sini dulu daripada sudah masuk WGS baru ribut.
Langkah 3, Masukkan Template ke Editor WGS
Setelah template lolos preview, saatnya masuk ke WGS. Ini prosesnya cepat sekali, salah satu hal yang Saya suka dari WGS dibanding WordPress.
- Login ke admin panel WGS Anda di URL domain-anda/wgs-admin.
- Masuk ke menu Appearance, lalu klik Edit Theme.
- Pilih file index atau home sesuai halaman yang mau diubah.
- Hapus kode lama yang ada, lalu tempel seluruh kode template baru hasil Canvas.
- Klik Save.
- Buka website Anda di tab baru, lalu refresh untuk melihat hasilnya.
Kalau sudah tampil, langsung masuk ke mode kustomisasi. Klik tombol Customize yang tersedia di dalam admin panel. Di sini Anda bisa ganti gambar, ubah teks, ganti warna header, dan edit teks tombol tanpa perlu menyentuh kode sama sekali. Editor ini semi-Elementor lah, lumayan membantu untuk yang tidak terlalu nyaman dengan coding.
Cara Ganti Warna Template dari Panel WGS
Kadang template yang dibuat AI warnanya tidak pas dengan brand Anda. Tenang, ini mudah diubah dari panel Customize tanpa perlu coding ulang.
- Masuk ke Customize dari admin panel.
- Cari bagian pengaturan warna, biasanya ada di bagian Header atau Colors.
- Ganti warna background header sesuai pilihan Anda.
- Kalau background header jadi gelap atau berwarna, jangan lupa ganti warna teks menu menjadi putih supaya tetap terbaca.
- Perbarui satu per satu warna link di dalam header supaya konsisten.
- Klik Save setelah selesai, lalu refresh halaman website untuk melihat hasilnya.
Sebagai Agen BRILink yang sehari-hari duduk di depan komputer dan mengelola berbagai keperluan digital sekaligus, Saya sangat menghargai alur kerja yang tidak banyak bolak-balik. Dan di WGS ini, dari generate sampai live di browser itu beneran cepat. Kalau WordPress butuh seminggu, di WGS bisa sehari. Ini bukan lebay, ini pengalaman nyata.
Langkah 4, Setting Shortcut Blog Post agar Artikel Muncul Otomatis
Nah, ini bagian yang paling sering bikin bingung. Setelah template homepage jadi, banyak yang bertanya kenapa artikel tidak muncul di bagian blog grid. Jawabannya karena shortcut blog post-nya belum disetting.
Konsepnya begini. WGS punya sistem shortcut yang berfungsi sebagai “pemanggil data” dari database Google Sheet. Jadi alih-alih nulis HTML statis, kita pasang placeholder khusus yang nanti diisi otomatis oleh data artikel yang sudah ada di sheet.
Pemangil-pemanggil yang perlu diketahui untuk blok artikel adalah sebagai berikut.
| Elemen | Shortcode Pemanggil | Keterangan |
|---|---|---|
| Gambar artikel | {image} | Mengambil URL gambar dari database |
| Judul artikel | {title} | Mengambil judul post |
| Tanggal terbit | {time} | Tanggal publish artikel |
| Meta deskripsi | {meta} | Deskripsi singkat artikel |
| Kategori | {category_1} | Kategori pertama artikel |
| Link artikel | {link} | URL permalink artikel |
| Tombol baca | {read_more} | Teks tombol ikut setting di config |
- Buka kode template homepage di editor kode pilihan Anda.
- Cari bagian blog grid yang berisi artikel statis bawaan AI.
- Sisakan satu blok artikel saja, hapus sisanya dulu.
- Ganti konten di dalam blok tersebut dengan shortcode pemanggil sesuai tabel di atas.
- Pastikan di bagian link atau tombol baca selengkapnya ada awalan slash sebelum {link}, misalnya “/artikel/{link}”.
- Setelah satu blok selesai diganti, salin kodenya ke bagian Short List Blog Post 1 di database sheet WGS.
- Ambil nama shortcut-nya, lalu tempelkan shortcut tersebut ke tempat blog grid di template homepage Anda.
- Atur jumlah artikel yang ditampilkan, misalnya 3 atau 6, di bagian setting viewnya.
- Klik Save dan refresh website.
Langkah 5, Buat Halaman Single Post untuk Tampilan Artikel
Kalau sudah ada daftar artikel di homepage tapi diklik masih blank, berarti halaman single post-nya belum dibuat. Ini memang harus dibikin terpisah.
- Kembali ke Gemini Canvas, buat prompt baru khusus untuk halaman tampilan artikel.
- Minta Gemini untuk membuat halaman single post, tanpa header dan tanpa footer karena keduanya sudah otomatis ngikut dari template utama.
- Minta tambahkan sidebar sederhana di pinggir dan seksi artikel terkait di bawah konten utama.
- Setelah kode jadi, ganti bagian judul dengan {title}, gambar dengan {image}, body dengan {body}, penulis dengan {author_name}, tanggal dengan {time}, dan waktu baca dengan {read_time}.
- Kalau ragu shortcode-nya apa, cek bagian Config di Google Sheet WGS Anda, ada daftar lengkap semua pemanggil di sana.
- Masukkan kode ini ke baris post.wgs di database sheet WGS.
- Refresh halaman artikel, sekarang isinya harusnya sudah muncul.
Ini bagian yang Saya akui memang butuh sedikit kesabaran ekstra. Tapi begitu sudah jalan, rasanya puas banget. Artikel terbaru otomatis muncul di grid homepage, diklik langsung ke halaman isinya. Semua dinamis dari Google Sheet.
Trik Cloning Template, Cara Tercepat Bikin Website WGS
Kalau Anda mau lebih cepat lagi, ada cara lain yang jauh lebih efisien dari generate pakai AI, yaitu cloning. Prinsipnya sederhana, ambil kode dari website yang sudah ada, modifikasi, lalu masukkan ke WGS.
Cloning ini bukan berarti plagiat mentah-mentah. Konsepnya lebih ke jadikan sebagai base code, lalu ubah warna, teks, gambar, dan elemen-elemen lainnya supaya jadi milik Anda sendiri. Sama seperti kalau Anda beli template premium, bedanya ini gratis karena Anda yang cari dan modifikasinya sendiri.
- Buka website yang ingin dijadikan referensi di browser.
- Gunakan fitur view page source atau inspect element untuk melihat kodenya.
- Salin bagian kode yang relevan, misalnya hanya bagian hero atau pricing table-nya saja.
- Edit kode sesuai kebutuhan, ganti teks, warna, dan gambar.
- Masukkan ke editor template WGS dan save.
Perbandingan WGS vs WordPress untuk Bikin Template
| Aspek | WGS | WordPress |
|---|---|---|
| Waktu bikin template | Sehari bisa selesai | Seminggu atau lebih |
| Embed HTML langsung | Bisa langsung | Perlu Elementor atau plugin |
| Biaya hosting | Gratis pakai Google Sheet | Bayar hosting tiap tahun |
| Plugin tambahan | Tidak perlu | Banyak yang berbayar |
| Keamanan plugin | Tidak ada risiko plugin | Risiko virus dari plugin |
| Kustomisasi warna | Dari panel Customize | Dari Elementor atau CSS |
Akhir Kata
Jadi, intinya membuat template website WGS dari nol itu jauh lebih cepat dari yang kebanyakan orang bayangkan. Dari prompt di Gemini Canvas, masukkan ke editor WGS, setting shortcut blog, sampai halaman artikel tampil penuh, semuanya bisa selesai dalam satu sesi kalau tidak ada gangguan. Dari pengalaman Saya yang juga sambil nyambi ngelola percetakan rumahan dna pekerjaan harian lainnya, waktu yang hemat itu sangat berarti. Cloning template juga jadi jalan pintas yang sangat masuk akal kalau sudah ada referensi desain yang disukai. Artikel tentang cara buat template website WGS dari nol ini hopefully bisa ngasih Anda gambaran yang lebih jelas dan motivasi untuk langsung coba. Kalau ada pertanyaan atau pengalaman serupa, feel free buat komen di bawah ya!
Baca artikel lainnya, cek aja di Sitemap.
Ada yang udah praktekin Buat? Kira-kira butuh waktu berapa lama ya buat proses lengkapnya?
@Wahyu kalo error biasanya tinggal di-restart atau diulang dari step sebelumnya gan, gak bakal ngerusak sistem kok.
Setau saya aman banget gan @Wahyu, saya udah jalan hampir sebulan setelah coba trik Website ini dan gak ada kendala sama sekali.
Nice info min. Mau nanya dong, ada resiko error di tengah jalan gak pas nerapin Nol ini?
@Nabila aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
Singkat, padat, dan solutif. Makasih admin udah mau berbagi ilmu.
Kebetulan kemarin lusa sempet nyobain langkah Template ini, dan beneran work lancar tanpa kendala.
Dulu pernah salah kaprah soal Website, sekarang jadi lebih jelas arahnya setelah baca tulisan ini.
Nice info min. Mau nanya dong, ada resiko error di tengah jalan gak pas nerapin Buat Template Website ini?
Ada yang udah praktekin Buat Template Website? Kira-kira butuh waktu berapa lama ya buat proses lengkapnya?
@Deni mending pake opsi pertama dulu kak, jauh lebih ramah buat pemula dan langkahnya lebih simpel.
Bantu jawab ya kak @Deni, kemarin saya nyoba di spek pas-pasan ternyata tetep aman dan lancar kok, asal jangan sambil buka banyak aplikasi berat aja.
@Hendra sip gan responnya jelas banget, makasih banyak pencerahannya!
Bagus pembahasannya, sudut pandangnya realistis dan gampang dipahami sama orang awam sekalipun.
Bagus pembahasannya, sudut pandangnya realistis dan gampang dipahami sama orang awam sekalipun.
Kak, kalo di tempat saya hasilnya agak beda, apa ada langkah kecil yang kemungkinan kelewat ya?
@Kevin kalo error biasanya tinggal di-restart atau diulang dari step sebelumnya gan, gak bakal ngerusak sistem kok.
@Vania mantap gan, makasih infonya, jadi makin yakin buat nyoba.
Setau saya aman banget gan @Kevin, saya udah jalan hampir sebulan setelah coba trik Tutorial/How-to ini dan gak ada kendala sama sekali.
Menarik pembahasannya. Btw ada syarat khusus gak sih min sebelum kita mulai setup Nol ini?
Gak butuh biaya tambahan kok kak @Rio, semuanya bisa pake opsi bawaan atau yang gratisan.
Bantu sharing ya kak @Rio, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
Dulu pernah salah kaprah soal Website, sekarang jadi lebih jelas arahnya setelah baca tulisan ini.
Dulu pernah salah kaprah soal Website, sekarang jadi lebih jelas arahnya setelah baca tulisan ini.
Wah pas banget lagi nyari panduan soal Template. Min, kalo ada kendala pas step akhir biasanya solusinya apa ya?
@Zahra mending pake opsi pertama dulu kak, jauh lebih ramah buat pemula dan langkahnya lebih simpel.
@Zahra kalo error biasanya tinggal di-restart atau diulang dari step sebelumnya gan, gak bakal ngerusak sistem kok.
Singkat, padat, dan solutif. Makasih admin udah mau berbagi ilmu.
Udah saya tes di kondisi real, efektivitas trik Tutorial/How-to ini emang mantap banget.
Udah pernah ngalamin problem serupa bulan lalu, untung nemu artikel ini jadi makin paham duduk perkaranya.
Izin ninggalin jejak dulu min, materinya daging banget.
Bookmark dulu gan, ntar malem pas santai baru mau dipelajari detail.
Wah baru tahu ada solusi sesimpel ini buat Website. Makasih ya min!
Kak, kalo di tempat saya hasilnya agak beda, apa ada langkah kecil yang kemungkinan kelewat ya?
Bantu sharing ya kak @Hendra, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
@Hendra coba periksa lagi koneksi sama settingan awalnya gan, kemarin saya juga sempet beda ternyata ada satu opsi yang belum diaktifin.
@Karina sip gan responnya jelas banget, makasih banyak pencerahannya!
@Hendra aman kok kak, tapi tetep sangat disaranin backup dulu buat jaga-jaga, biar lebih tenang ngerjainnya.
@Hendra pengalaman saya kemarin butuh sekitar 15-20 menitan gan, yang penting ikuti urutannya jangan ada yang diloncat.
Makasih infonya kak @Siti, sangat ngebantu buat yang masih pemula kayak saya.
Kira-kira butuh budget/biaya tambahan lagi gak ya min buat maksimalkan Buat Template Website ini?
@Ratih pengalaman saya kemarin butuh sekitar 15-20 menitan gan, yang penting ikuti urutannya jangan ada yang diloncat.
Akhirnya nemu panduan Nol yang runut dan gak bikin bingung.
Bener min, temen saya kemarin juga sempat bingung di bagian Website, pas dikasih tips ini langsung solved.
Menarik pembahasannya. Btw ada syarat khusus gak sih min sebelum kita mulai setup Template ini?
Penasaran sama bagian WGS tadi, mending pake opsi yang pertama atau kedua ya min buat hasil yang lebih optimal?
Bantu sharing ya kak @Guntur, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
@Guntur coba periksa lagi koneksi sama settingan awalnya gan, kemarin saya juga sempet beda ternyata ada satu opsi yang belum diaktifin.
Bener min, temen saya kemarin juga sempat bingung di bagian Tutorial/How-to, pas dikasih tips ini langsung solved.
Dulu pernah salah kaprah soal Tutorial/How-to, sekarang jadi lebih jelas arahnya setelah baca tulisan ini.
Dulu pernah salah kaprah soal WGS, sekarang jadi lebih jelas arahnya setelah baca tulisan ini.
Bookmark dulu gan, ntar malem pas santai baru mau dipelajari detail.
Awalnya sempet skeptis pas baca judulnya, tapi pas dipraktekin step by step ternyata hasilnya memuaskan.
Kak, kalo di tempat saya hasilnya agak beda, apa ada langkah kecil yang kemungkinan kelewat ya?
@Teguh kalo error biasanya tinggal di-restart atau diulang dari step sebelumnya gan, gak bakal ngerusak sistem kok.
@Teguh coba periksa lagi koneksi sama settingan awalnya gan, kemarin saya juga sempet beda ternyata ada satu opsi yang belum diaktifin.
Kebetulan kemarin lusa sempet nyobain langkah Buat ini, dan beneran work lancar tanpa kendala.
Izin nanya gan, ini berlaku juga buat versi sebelum atau sesudahnya gak ya? Ada yang pernah coba?
Bantu sharing ya kak @Angga, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
Wah makasih banyak ya kak @Arif udah bantu jawab, langsung saya coba sekarang deh.
Min mau tanya, kalo buat pemula yang baru pertama kali nyoba Tutorial/How-to, step awalnya mending mulai dari mana dulu ya?
Terima kasih banyak infonya kak, ngebantu banget buat tugas saya.
Kalo dibandingin sama cara yang lama, metode Nol ini ada kelemahan tersendiri gak sih? Masih agak ragu nih.
Nice share min, ilmunya sangat aplikatif.
Min mau tanya, kalo buat pemula yang baru pertama kali nyoba Buat, step awalnya mending mulai dari mana dulu ya?
Bantu sharing ya kak @Vicky, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
Kalo dibandingin sama cara yang lama, metode Tutorial/How-to ini ada kelemahan tersendiri gak sih? Masih agak ragu nih.
Bantu jawab ya kak @Bayu, kemarin saya nyoba di spek pas-pasan ternyata tetep aman dan lancar kok, asal jangan sambil buka banyak aplikasi berat aja.
Mau tanya min, kalo datanya belum di-backup dulu aman langsung dieksekusi gak ya? Makasih sebelumnya.
Bantu sharing ya kak @Budi, di versi sebelumnya juga jalan kok, kemaren sempet tes di device temen dan work.
Nice info min. Mau nanya dong, ada resiko error di tengah jalan gak pas nerapin Tutorial/How-to ini?
Bener min, temen saya kemarin juga sempat bingung di bagian Nol, pas dikasih tips ini langsung solved.
Nice share min, ilmunya sangat aplikatif.