15%

Hemat 15% di Semua Layanan Hosting

Uji kemampuanmu dan dapatkan Diskon pada paket hosting apa saja

Gunakan kode:

Skills
Memulai
21.10.2024

Cara Menggunakan Starter Templates di WordPress untuk Membangun Situs Apa Pun yang Anda Butuhkan

Template starter di WordPress adalah tata letak halaman yang sudah dirancang sepenuhnya dan dapat Anda impor ke situs Anda hanya dengan satu klik, memberikan struktur visual yang lengkap — header, footer, halaman dalam, tipografi, dan skema warna — tanpa menulis satu baris kode pun. Template ini disertakan bersama tema seperti Astra, Neve, Kadence, dan OceanWP, dan diakses melalui plugin pendamping yang terhubung ke perpustakaan desain khusus industri.

Nilai praktisnya sangat signifikan: alih-alih membangun halaman utama dari awal, Anda mengimpor template yang sesuai dengan niche Anda (produk SaaS, firma hukum, toko WooCommerce, portofolio), lalu mengganti konten placeholder dengan konten Anda sendiri. Seluruh proses dari instalasi WordPress kosong hingga situs multi-halaman yang telah ditata dapat diselesaikan dalam waktu kurang dari 30 menit — asalkan lingkungan hosting Anda dikonfigurasi dengan benar.

Yang Anda Butuhkan Sebelum Memulai

Sebelum menyentuh dasbor WordPress, verifikasi prasyarat sisi server berikut. Banyak kegagalan impor template yang disebabkan oleh konfigurasi hosting yang tidak memadai, bukan bug plugin.

Persyaratan minimum PHP dan memori:

  • PHP 7.4 atau lebih tinggi (PHP 8.1+ direkomendasikan untuk tema modern)
  • memory_limit diatur minimal 256 MB di php.ini
  • max_execution_time sebesar 300 detik atau lebih
    upload_max_filesize dan post_max_size keduanya minimal 64 MB atau lebih tinggi
    
    Jika Anda menggunakan paket VPS Hosting, Anda dapat mengedit nilai-nilai ini langsung di /etc/php/8.1/fpm/php.ini (sesuaikan path versi agar cocok dengan stack Anda) dan muat ulang PHP-FPM:
    sudo nano /etc/php/8.1/fpm/php.ini
    # Set: memory_limit = 256M, max_execution_time = 300
    sudo systemctl reload php8.1-fpm
    Pada lingkungan shared, batas ini sering diatur melalui panel kontrol hosting. Jika Anda menggunakan paket Shared Web Hosting, periksa bagian konfigurasi PHP di cPanel atau hubungi dukungan untuk meningkatkan batas sebelum mencoba impor situs penuh.
    SSL sangat direkomendasikan sebelum peluncuran. Mengimpor template melalui HTTP dan kemudian beralih ke HTTPS setelahnya menyebabkan masalah konten campuran pada gambar dan skrip yang disematkan. Konfigurasikan Sertifikat SSL Anda sebelum menjalankan impor.
    Langkah 1: Pilih Tema yang Mendukung Starter Templates
    Tidak setiap tema WordPress dilengkapi dengan perpustakaan template. Berikut empat ekosistem yang paling matang, masing-masing dengan ratusan template dan pengembangan aktif:
    
    
    
    Tema
    Ukuran Perpustakaan Template
    Kompatibilitas Page Builder
    Base Ringan (KB)
    Tier Gratis
    
    
    
    
    
    
    
    
    —
    —
    —
    —
    —
    
    
    
    
    
    
    
    
    **Astra**
    250+ template
    Elementor, Gutenberg, Beaver Builder, Brizy
    ~50 KB
    Ya
    
    
    
    
    
    
    
    
    **Neve**
    100+ template
    Elementor, Gutenberg, Brizy
    ~30 KB
    Ya
    
    
    
    
    
    
    
    
    **Kadence**
    100+ template
    Gutenberg (native), Elementor
    ~40 KB
    Ya
    
    
    
    
    
    
    
    
    **OceanWP**
    50+ template
    Elementor, Gutenberg
    ~60 KB
    Ya
    
    
    
    
    
    Astra adalah pilihan yang paling banyak digunakan dan memiliki integrasi Elementor yang paling mendalam. Kadence adalah pilihan terkuat jika Anda ingin tetap sepenuhnya menggunakan editor blok Gutenberg native dan menghindari ketergantungan pada page builder pihak ketiga. Neve adalah yang paling dioptimalkan untuk performa secara bawaan.
    Untuk menginstal tema pilihan Anda:
    
    Masuk ke dasbor WordPress Anda.
    Navigasikan ke Appearance > Themes.
    Klik Add New, cari tema Anda berdasarkan nama.
    Klik Install, lalu Activate.
    
    Langkah 2: Instal Plugin Starter Templates
    Setiap ekosistem tema menggunakan plugin yang sedikit berbeda untuk menampilkan perpustakaan templatenya. Tabel di bawah ini memetakan tema ke plugin pendampingnya:
    
    
    
    Tema
    Nama Plugin
    Slug WordPress.org
    
    
    
    
    
    
    
    
    —
    —
    —
    
    
    
    
    
    
    
    
    Astra
    Starter Templates
    `astra-sites`
    
    
    
    
    
    
    
    
    Neve
    Neve Pro / Otter Blocks
    `otter-blocks`
    
    
    
    
    
    
    
    
    Kadence
    Kadence Starter Templates
    `kadence-starter-templates`
    
    
    
    
    
    
    
    
    OceanWP
    Ocean Extra
    `ocean-extra`
    
    
    
    
    
    Untuk Astra (alur kerja yang paling umum):
    
    Pergi ke Plugins > Add New.
    Cari Starter Templates.
    Instal dan aktifkan plugin bernama Starter Templates – Elementor, Gutenberg & Beaver Builder Templates.
    
    Setelah diaktifkan, item menu baru muncul di bawah Appearance > Starter Templates.
    Kasus tepi yang kritis: Jika Anda memigrasikan situs yang sudah ada dan sudah memiliki konten, jangan jalankan impor situs penuh. Ini akan menimpa halaman, menu, dan widget Anda yang sudah ada. Gunakan Import Single Page atau Import Home Template sebagai gantinya, dan gabungkan secara manual elemen desain yang Anda butuhkan.
    Langkah 3: Pilih dan Impor Starter Template
    Setelah mengaktifkan plugin, wizard impor diluncurkan secara otomatis atau dapat diakses melalui Appearance > Starter Templates.
    Alur kerja:
    
    Pilih page builder Anda. Wizard menanyakan apakah Anda ingin menggunakan Elementor, Gutenberg, atau Beaver Builder. Pilihan ini bersifat permanen untuk impor — Anda tidak dapat mencampur builder dalam satu impor template. Pilih Gutenberg jika Anda menginginkan pengaturan yang lebih ringan tanpa plugin tambahan; pilih Elementor jika Anda membutuhkan fleksibilitas drag-and-drop yang lebih canggih.
    
    
    Filter berdasarkan kategori. Template diorganisir berdasarkan industri (Bisnis, eCommerce, Agensi, Restoran, Portofolio, Pendidikan, dll.). Gunakan bilah pencarian untuk pemfilteran berdasarkan kata kunci.
    
    
    Pratinjau sebelum mengimpor. Klik thumbnail template mana pun untuk membuka pratinjau langsung. Periksa halaman dalam (Tentang, Kontak, Blog) — bukan hanya halaman utama — karena halaman utama sering terlihat rapi sementara halaman dalam terlihat kurang lengkap.
    
    
    Pilih cakupan impor Anda:
    
    
    Import Complete Site — mengimpor semua halaman, postingan, menu, widget, dan pengaturan theme customizer. Terbaik untuk situs baru.
    Import Home Template — hanya mengimpor tata letak halaman utama. Terbaik untuk situs yang sudah ada di mana Anda hanya ingin memperbarui halaman depan.
    
    
    Konfirmasi impor. Plugin akan mengunduh konten demo, gambar (dari Unsplash atau CDN plugin), dan pengaturan customizer. Pada koneksi yang lebih lambat atau server yang membatasi, ini dapat memakan waktu 60–90 detik.
    
    Apa yang diimpor dan apa yang tidak:
    
    
    
    Aset
    Diimpor
    Catatan
    
    
    
    
    
    
    
    
    —
    —
    —
    
    
    
    
    
    
    
    
    Tata letak halaman
    Ya
    Semua halaman dalam demo
    
    
    
    
    
    
    
    
    Gambar demo
    Ya
    Gambar placeholder dari Unsplash CDN
    
    
    
    
    
    
    
    
    Plugin (WooCommerce, dll.)
    Diminta
    Penginstal plugin berjalan sebagai bagian dari wizard
    
    
    
    
    
    
    
    
    Postingan/halaman Anda yang sudah ada
    Tidak
    Konten yang sudah ada tidak dihapus kecuali Anda memilih “Delete Previously Imported Data”
    
    
    
    
    
    
    
    
    Pengaturan domain/DNS kustom
    Tidak
    Harus dikonfigurasi secara terpisah
    
    
    
    
    
    
    
    
    Sertifikat SSL
    Tidak
    Harus dikonfigurasi sebelumnya
    
    
    
    
    
    Langkah 4: Kustomisasi Template
    Menggunakan Editor Elementor
    Navigasikan ke Pages, arahkan kursor ke halaman mana pun, dan klik Edit with Elementor. Editor visual terbuka dengan tata letak yang diimpor dan dapat diedit sepenuhnya.
    Tindakan kustomisasi utama:
    
    Ganti gambar: Klik widget gambar mana pun, lalu klik thumbnail gambar di panel kiri untuk membuka perpustakaan media. Ganti gambar demo dengan aset Anda sendiri.
    Edit teks secara langsung: Klik langsung pada elemen teks mana pun untuk mengeditnya di tempat.
    Warna dan Font Global: Di Elementor, pergi ke Site Settings > Global Colors dan Global Fonts untuk menentukan palet merek dan sistem tipografi Anda secara menyeluruh. Mengubah warna global memperbarui setiap elemen yang mereferensikannya di semua halaman secara bersamaan.
    Struktur section dan kolom: Klik kanan section mana pun untuk menduplikasi, menghapus, atau memindahkannya. Gunakan panel Navigator (ikon lapisan di toolbar bawah) untuk tata letak kompleks dengan section yang bersarang.
    
    Setelah mengedit, klik Update (bukan Publish — halaman sudah dipublikasikan; Update menyimpan perubahan Anda).
    Menggunakan Editor Blok Gutenberg
    Navigasikan ke Pages, klik Edit pada halaman target. Editor blok terbuka dengan tata letak berbasis pola yang diimpor.
    Tindakan kustomisasi utama:
    
    Klik blok mana pun untuk memilihnya. Gunakan toolbar di atas blok untuk opsi perataan, warna, dan pemformatan.
    Gunakan List View (ikon garis bertumpuk di toolbar atas) untuk melihat dan menavigasi hierarki blok penuh — penting untuk template kompleks dengan blok Group dan Cover yang bersarang.
    Untuk mengubah gaya global, pergi ke Appearance > Editor > Styles (tema Full Site Editing) atau Appearance > Customize (tema klasik).
    Panel Styles di Site Editor memungkinkan Anda mengatur tipografi global dan palet warna yang diterapkan ke semua blok.
    
    Catatan performa: Template berbasis Gutenberg menghasilkan HTML yang lebih bersih dan memuat lebih cepat dibandingkan yang berbasis Elementor karena tidak memerlukan runtime JavaScript Elementor. Untuk situs di mana Core Web Vitals menjadi prioritas, jalur Gutenberg secara terukur lebih baik.
    Langkah 5: Konfigurasikan Pengaturan Tema Global
    Setelah mengimpor, buka Appearance > Customize untuk menyempurnakan sistem desain global. Panel yang tersedia bervariasi berdasarkan tema, tetapi semua tema starter-template utama menampilkan:
    Tipografi:
    
    Atur keluarga font utama untuk heading (H1–H6) dan teks isi.
    Tentukan ukuran font, tinggi baris, dan spasi huruf secara global.
    Gunakan font sistem (-apple-system, BlinkMacSystemFont, sans-serif) atau pilihan Google Fonts. Font sistem menghilangkan permintaan HTTP eksternal dan meningkatkan skor LCP.
    
    Warna:
    
    Tentukan warna utama (aksen merek), warna sekunder, warna teks, dan warna latar belakang.
    Nilai-nilai ini mengisi properti kustom CSS (--wp--preset--color--primary) yang direferensikan oleh semua blok dan widget yang diimpor.
    
    Tata Letak:
    
    Atur lebar container global (biasanya 1200px–1440px untuk desain modern).
    Konfigurasikan tata letak header: header sticky, header transparan saat digulir, perilaku menu mobile.
    Konfigurasikan kolom footer, area widget, dan teks hak cipta.
    
    Khusus Astra: Customizer Astra memiliki panel Performance di mana Anda dapat menonaktifkan pemuatan Google Fonts (berguna jika Anda meng-host font sendiri untuk kepatuhan GDPR) dan mengaktifkan minifikasi CSS.
    Langkah 6: Ganti Konten Placeholder
    Konten demo template sengaja dibuat generik. Penggantian sistematis lebih cepat daripada mengedit halaman per halaman:
    
    Pergi ke Pages dan urutkan berdasarkan Date untuk menemukan semua halaman yang diimpor selama pengaturan template.
    Buka setiap halaman dan ganti:
    
    
    Judul dan isi teks dengan konten aktual Anda.
    Gambar demo dengan foto Anda sendiri atau gambar stok berlisensi. Gunakan teks alt yang deskriptif untuk setiap gambar.
    Nomor telepon, alamat, dan alamat email placeholder.
    Tautan navigasi demo — periksa Appearance > Menus untuk memastikan semua item menu mengarah ke halaman yang nyata.
    
    
    Perbarui Site Title dan Tagline di bawah Settings > General.
    Atur Homepage dan Blog page Anda di bawah Settings > Reading.
    
    Langkah kritis untuk SEO: Setelah mengganti konten, instal Yoast SEO atau Rank Math dan atur meta title dan meta description yang unik untuk setiap halaman. Impor template tidak mengisi metadata SEO.
    Langkah 7: Perluas Fungsionalitas dengan Plugin
    Starter template menyediakan kerangka desain, bukan fungsionalitas. Bergantung pada jenis situs Anda, Anda akan membutuhkan plugin tambahan:
    
    
    
    Jenis Situs
    Plugin yang Direkomendasikan
    Tujuan
    
    
    
    
    
    
    
    
    —
    —
    —
    
    
    
    
    
    
    
    
    eCommerce
    WooCommerce
    Katalog produk, keranjang, checkout
    
    
    
    
    
    
    
    
    Perolehan prospek
    WPForms atau Contact Form 7
    Formulir kontak dan pertanyaan
    
    
    
    
    
    
    
    
    Keanggotaan
    MemberPress atau Restrict Content Pro
    Konten berbayar
    
    
    
    
    
    
    
    
    SEO
    Rank Math atau Yoast SEO
    SEO on-page, sitemap, schema
    
    
    
    
    
    
    
    
    Performa
    WP Rocket atau LiteSpeed Cache
    Caching, minifikasi, lazy loading
    
    
    
    
    
    
    
    
    Keamanan
    Wordfence atau Solid Security
    Firewall, pemindaian malware
    
    
    
    
    
    
    
    
    Backup
    UpdraftPlus
    Backup otomatis di luar situs
    
    
    
    
    
    Jika Anda menjalankan WooCommerce, verifikasi bahwa paket hosting Anda dapat menangani beban database tambahan. VPS dengan cPanel memberi Anda ruang sumber daya dan antarmuka manajemen untuk menangani WooCommerce dalam skala besar tanpa batasan shared hosting.
    Langkah 8: Pratinjau, Uji, dan Luncurkan
    Sebelum mempublikasikan, jalankan daftar periksa pra-peluncuran ini:
    QA Visual:
    
    Pratinjau di desktop, tablet, dan mobile menggunakan pratinjau responsif WordPress Customizer atau browser DevTools.
    Periksa bahwa tidak ada gambar demo yang tersisa di halaman mana pun.
    Verifikasi bahwa semua font dimuat dengan benar (throttling jaringan di DevTools dapat mengungkapkan kedipan font-swap).
    
    Pengujian fungsional:
    
    Kirim setiap formulir dan konfirmasi email notifikasi tiba. Periksa konfigurasi Email Hosting Anda jika email transaksional tidak terkirim — wp_mail() default WordPress mengandalkan fungsi mail() PHP, yang diblokir oleh banyak host. Gunakan plugin SMTP (WP Mail SMTP, Post SMTP) dengan kredensial yang terautentikasi.
    Klik setiap tautan navigasi dan tombol. Template yang diimpor terkadang mengandung URL demo yang dikodekan secara keras.
    Uji alur checkout jika WooCommerce aktif.
    
    Baseline performa:
    
    Jalankan uji PageSpeed Insights pada halaman utama. Targetkan LCP di bawah 2,5 detik dan skor CLS di bawah 0,1.
    Jika skor buruk, aktifkan caching, optimalkan gambar (konversi ke WebP), dan pertimbangkan CDN.
    
    Keamanan:
    
    Pastikan HTTPS diterapkan di seluruh situs. Verifikasi tidak ada peringatan konten campuran di konsol browser.
    Ubah nama pengguna admin WordPress default jika masih admin.
    Atur izin file: direktori di 755, file di 644, dan wp-config.php di 600.
    
    Setelah semua pemeriksaan lulus, situs siap diluncurkan. Jika masih menggunakan domain sementara, perbarui WordPress Address (URL) dan Site Address (URL) di bawah Settings > General setelah mengarahkan domain Anda. Anda dapat mendaftarkan atau mentransfer domain Anda melalui Pendaftaran Domain jika belum melakukannya.
    Kesalahan Umum dan Cara Menghindarinya
    Impor gagal di tengah proses: Biasanya disebabkan oleh memory_limit atau max_execution_time PHP yang terlalu rendah. Tingkatkan nilai-nilai ini seperti yang dijelaskan di bagian prasyarat, lalu coba impor lagi.
    Gambar demo tidak dimuat setelah impor: Plugin Starter Templates menarik gambar dari CDN eksternal. Jika server Anda memiliki pembatasan HTTP keluar atau firewall yang memblokir permintaan eksternal, gambar tidak akan diunduh. Masukkan domain CDN plugin ke daftar putih atau sementara longgarkan aturan keluar selama impor.
    Template terlihat berbeda dari pratinjau: Ini hampir selalu berarti plugin yang diperlukan (Elementor Pro, add-on tertentu) tidak diinstal. Wizard impor mencantumkan plugin yang diperlukan — instal semuanya sebelum mengimpor.
    Perubahan Customizer tidak diterapkan ke halaman yang diimpor: Beberapa template Elementor menggunakan pengaturan global Elementor sendiri, bukan theme customizer. Perubahan yang dibuat di Appearance > Customize tidak akan memengaruhi elemen yang dikontrol Elementor. Gunakan Elementor > Site Settings untuk halaman-halaman tersebut.
    Penurunan performa setelah impor: Impor situs penuh memuat semua plugin dan aset demo. Audit plugin aktif Anda setelah impor dan nonaktifkan apa pun yang tidak Anda butuhkan. Setiap plugin aktif menambahkan overhead eksekusi PHP pada setiap pemuatan halaman.
    Matriks Keputusan Teknis: Memilih Jalur Pembangunan Anda
    
    
    
    Skenario
    Jalur yang Direkomendasikan
    
    
    
    
    
    
    
    
    —
    —
    
    
    
    
    
    
    
    
    Situs baru, tidak ada konten yang sudah ada, butuh kecepatan
    Astra + Starter Templates + Elementor, impor situs penuh
    
    
    
    
    
    
    
    
    Situs kritis performa (prioritas Core Web Vitals)
    Kadence + Kadence Starter Templates + Gutenberg saja
    
    
    
    
    
    
    
    
    Situs yang sudah ada, desain ulang halaman utama saja
    Tema apa pun + impor template halaman tunggal
    
    
    
    
    
    
    
    
    Toko WooCommerce
    Astra atau Kadence + template khusus WooCommerce
    
    
    
    
    
    
    
    
    Developer yang membangun untuk klien
    Neve + child theme + impor blok selektif
    
    
    
    
    
    
    
    
    Diperlukan jejak plugin minimal
    Kadence + Gutenberg, tanpa Elementor
    
    
    
    
    
    Daftar Periksa Pra-Peluncuran
    
    Batas memori PHP adalah 256 MB atau lebih tinggi sebelum impor
    Sertifikat SSL aktif dan HTTPS diterapkan
    Impor situs penuh diselesaikan di lingkungan staging terlebih dahulu, kemudian didorong ke produksi
    Semua teks dan gambar placeholder demo diganti
    Meta title dan deskripsi SEO diatur di setiap halaman
    Semua formulir diuji dengan konfirmasi pengiriman email nyata
    Menu navigasi diverifikasi — tidak ada tautan mati atau URL demo
    Baseline performa diukur dengan PageSpeed Insights
    Plugin caching aktif dan dikonfigurasi
    Nama pengguna admin diubah dari default admin
  • Izin wp-config.php diatur ke 600
  • DNS domain mengarah ke IP server yang benar

FAQ

Bisakah saya menggunakan starter template di situs WordPress yang sudah ada tanpa kehilangan konten saya saat ini?

Ya, tetapi Anda harus memilih “Import Single Page” atau “Import Home Template” daripada “Import Complete Site.” Impor situs penuh akan menimpa halaman, menu, dan area widget yang sudah ada. Selalu buat backup penuh sebelum operasi impor apa pun.

Apakah starter template berfungsi dengan tema WordPress mana pun, atau hanya tema tertentu?

Starter template terikat pada ekosistem tema tertentu. Plugin Astra Starter Templates hanya berfungsi dengan tema Astra. Kadence Starter Templates memerlukan tema Kadence. Anda tidak dapat mengimpor template secara silang antara tema yang tidak kompatibel.

Mengapa halaman yang saya impor terlihat berbeda dari pratinjau template?

Penyebab paling umum adalah plugin yang diperlukan tidak ada — biasanya Elementor Pro atau add-on premium. Wizard impor mencantumkan semua plugin yang diperlukan; instal semuanya sebelum mengimpor. Penyebab sekunder adalah batas memori PHP yang menyebabkan impor gagal secara diam-diam, meninggalkan beberapa aset yang tidak diunduh.

Apakah menggunakan starter template akan merugikan SEO situs saya?

Tidak secara inheren, tetapi starter template mengimpor konten demo tanpa metadata SEO. Anda harus secara manual mengatur meta title, deskripsi, dan data terstruktur yang unik untuk setiap halaman. Selain itu, beberapa template berbasis Elementor yang berat menghasilkan HTML yang membengkak yang dapat berdampak negatif pada Core Web Vitals — audit dengan PageSpeed Insights setelah impor.

Bisakah saya beralih ke starter template yang berbeda setelah saya sudah mengkustomisasi situs saya?

Secara teknis ya, tetapi bersifat destruktif. Mengimpor template situs penuh yang baru akan menimpa kustomisasi Anda yang sudah ada. Pendekatan praktisnya adalah mengekspor pengaturan customizer Anda saat ini (menggunakan alat ekspor tema), mengimpor template baru di situs staging, memigrasikan konten Anda secara manual, kemudian mendorong situs staging ke produksi.

15%

Hemat 15% di Semua Layanan Hosting

Uji kemampuanmu dan dapatkan Diskon pada paket hosting apa saja

Gunakan kode:

Skills
Memulai