Cara Menggunakan Elementor dengan Tema (WordPress Theme)
Panduan hub Elementor di tema WordPress TokoPressID: persyaratan, kategori widget TokoPress, template library, dan alur membangun halaman.
Kalau Anda memakai Elementor, tema WordPress by TokoPressID sudah menambahkan dua hal penting: LarisManisKit (template library) dan widget kustom di kategori TokoPress (prefiks TP -). Dengan kombinasi ini, Anda bisa membangun landing page, homepage, sampai halaman promo produk tanpa perlu coding.
Tutorial ini adalah panduan hub. Untuk langkah yang lebih detail, lanjutkan ke tutorial template library dan daftar widget di bawah.
Tutorial ini berlaku untuk semua tema WordPress by TokoPressID, termasuk LarisManis, Adora, Salvia, LarisGram, LarisDigital, dan tema TokoPressID lainnya dengan struktur Theme Settings yang sama.
Prasyarat
- Tema WordPress by TokoPressID aktif dengan lisensi valid
- Plugin Elementor terpasang dan aktif
- (Untuk widget produk) WooCommerce aktif
- Koneksi internet untuk mengunduh template dari API TokoPressID
Elementor Pro tidak wajib. Tema mendaftarkan hook WooCommerce dasar jika Pro tidak terpasang.
Apa yang disediakan tema
| Komponen | Fungsi |
|---|---|
| LarisManisKit Template Library | Template halaman dari server TokoPressID |
| Widget kategori TokoPress | 17 widget kustom (heading, slider, form, produk, dll.) |
| Dukungan WooCommerce | Widget TP - WooCommerce Products dan hook katalog |
Cara mulai membangun halaman
- Buat atau edit page di WordPress.
- Klik Edit with Elementor.
- (Opsional) Buka LarisManisKit template library untuk impor desain.
- Seret widget dari kategori TokoPress ke kanvas.
- Atur konten dan style di panel kiri Elementor.
- Publish atau Update.
Kategori widget Elementor
Widget tema berada di kategori TokoPress (bukan kategori Elementor default). Cari prefiks TP - di daftar widget.
Daftar lengkap: Widget Elementor Tema.
Widget WooCommerce: Widget WC Products Grid.
Template library
LarisManisKit menambahkan tombol library di editor Elementor. Tab default: Pages (template halaman penuh dari API api.tokopress.id).
Alur singkat:
- Di editor Elementor, buka library LarisManis.
- Jelajahi template Pages.
- Klik Insert pada template pilihan.
- Sesuaikan teks, gambar, dan warna dengan branding toko.
Detail: LarisManisKit Template Library.
Halaman vs Theme Settings
| Kebutuhan | Gunakan |
|---|---|
| Layout header/footer global | Theme Settings |
| Homepage Elementor penuh | Pages + Elementor + template LarisManisKit |
| Katalog produk WooCommerce | Halaman Shop (tema) + Theme Settings WooCommerce |
| Section produk di landing | Widget TP - WooCommerce Products |
Tetapkan halaman Elementor sebagai static homepage di Settings → Reading jika ingin menjadi beranda utama.
Kompatibilitas dan tips
- Jangan campur Elementor dengan block editor di halaman yang sama; pilih satu builder per halaman
- Setelah impor template, ganti gambar placeholder dan teks demo
- Untuk performa, batasi jumlah section berat (slider besar, banyak produk) di satu halaman
- Classic Cart/Checkout WooCommerce tetap memakai template tema, bukan Elementor
Troubleshooting singkat
| Masalah | Solusi |
|---|---|
| Kategori TokoPress tidak muncul | Pastikan tema aktif dan Elementor terinstal |
| Template library kosong | Cek koneksi internet; API TokoPressID mungkin sibuk |
| Widget produk tidak ada | Aktifkan WooCommerce |
| Layout rusak setelah update Elementor | Regenerate CSS Elementor (Elementor → Tools) |