Cara Buat Template Website WGS dari Nol
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.
Posting Komentar