Panduan Lengkap Theme Builder Elementor Pro untuk Pemula: Header, Footer, dan Custom Template Tanpa Coding

Membangun website profesional tidak harus ribet. Dengan Theme Builder Elementor Pro, Anda bisa mendesain header, footer, halaman single post, archive, 404, hingga bagian WooCommerce langsung dari antarmuka visual. Tidak perlu menyentuh file tema atau menulis kode sama sekali.

Sayangnya, banyak panduan di internet hanya membahas header dan footer secara terpisah. Padahal, Theme Builder punya potensi jauh lebih besar. Artikel ini dibuat sebagai panduan satu pintu: mulai dari persiapan, cara membuat header, footer, custom template, display conditions, hingga troubleshooting error yang sering ditemui pemula.

Jika Anda baru mengenal fitur ini, cek juga pembahasan fitur Theme Builder Elementor Pro untuk gambaran umum sebelum praktik langsung.

Apa Itu Theme Builder Elementor Pro?

Theme Builder adalah fitur bawaan Elementor Pro yang mengubah cara Anda mendesain website WordPress. Biasanya, tampilan header, footer, dan layout halaman ditentukan oleh tema yang aktif. Dengan Theme Builder, Anda bisa menggantikan bagian-bagian tersebut menggunakan template desain sendiri.

Template yang bisa dibuat meliputi:

• Header – menggantikan header.php tema
• Footer – menggantikan footer.php tema
• Single Post – menggantikan single.php
• Single Page – menggantikan page.php
• Archive – menggantikan archive.php, taxonomy.php, author.php
• Search Results – menggantikan search.php
• 404 Error Page – menggantikan 404.php
• WooCommerce Pages – product single, archive produk, checkout, dan lainnya

Fitur ini mengandalkan Dynamic Content, yaitu widget yang menampilkan data situs secara otomatis. Misalnya, widget Post Title akan selalu menampilkan judul artikel sesuai halaman yang dibuka, tanpa perlu diedit manual satu per satu.

Mengapa Harus Elementor Pro?

Theme Builder hanya tersedia di Elementor Pro. Versi gratis Elementor memang bisa membuat halaman landing, tida*k bisa membuat template situs global seperti header, footer, single post, atau archive.

Dengan Elementor Pro, Anda mendapatkan:

• Akses penuh ke Theme Builder
• Lebih dari 100 widget pro dan dinamis
• Display Conditions untuk mengatur di mana template ditampilkan
• Integrasi WooCommerce
• Update berkala dan dukungan resmi

Bagi pemula yang ingin mulai mendesain website sendiri, paket lisensi resmi Elementor Pro dari Elementor Pro ID sudah termasuk Essential Addons Pro tanpa biaya tambahan. Plugin add-on ini menambah ratusan widget dan ribuan template siap pakai, sementara jasa instalasi semacam itu di tempat lain umumnya mulai dari Rp50.000. Lihat Paket Starter untuk mulai membangun website Anda.

Persiapan Sebelum Menggunakan Theme Builder

Agar hasil maksimal dan minim error, siapkan beberapa hal berikut:

1. Gunakan Tema yang Ringan

Elementor merekomendasikan Hello Elementor Theme sebagai base theme karena sangat ringan dan tidak memiliki styling header/footer sendiri. Tema ini membuat Theme Builder bekerja tanpa bentrok dengan tampilan bawaan tema.

Anda tetap bisa pakai tema lain, tapi pastikan tema tersebut kompatibel dengan Elementor dan tidak memaksa tampilan header/footer bawaannya.

2. Pastikan Elementor Pro Aktif

Pastikan plugin Elementor dan Elementor Pro sudah terinstall dan lisensinya aktif. Tanpa lisensi aktif, menu Theme Builder tidak akan muncul di dashboard.

3. Atur Site Identity

Sebelum membuat header, masuk ke Appearance → Customize → Site Identity atau Settings → General. Isi Site Title, Tagline, dan upload Site Logo. Data ini akan dipakai widget Site Logo dan Site Title secara otomatis.

4. Buat Backup

Sebelum mengubah struktur tema, lakukan backup website. Meskipun Theme Builder aman, backup memberikan rasa tenang jika terjadi kesalahan konfigurasi.

5. Bersihkan Cache

Jika menggunakan plugin cache atau CDN, nonaktifkan sementara saat mendesain. Cache sering menyebabkan perubahan template tidak langsung terlihat.

Cara Membuat Header di Elementor Pro

Header adalah bagian paling atas website yang biasanya berisi logo, menu navigasi, dan tombol aksi. Berikut langkah-langkahnya.

Langkah 1: Buka Theme Builder

Di dashboard WordPress, pilih Templates → Theme Builder. Klik tab Header, lalu klik tombol Add New.

Langkah 2: Pilih Template atau Mulai dari Kosong

Anda bisa memilih template header yang sudah jadi dari library Elementor, atau klik Create Template untuk mulai dari nol. Pemula bisa mulai dari template agar lebih cepat memahami struktur.

Langkah 3: Desain Header

Gunakan Flexbox Container untuk membuat layout header. Susunan umum:

• Kiri: Site Logo
• Tengah: Nav Menu
• Kanan: Tombol CTA atau ikon media sosial

Klik widget, drag ke canvas, lalu atur warna, typography, spacing, dan responsif di panel kiri.

Langkah 4: Atur Display Conditions

Setelah desain selesai, klik Publish. Anda akan diminta mengatur Display Conditions. Pilih Entire Site jika ingin header muncul di seluruh website, atau pilih halaman/kategori tertentu.

Langkah 5: Simpan dan Periksa

Klik Save & Close. Buka frontend website untuk melihat hasilnya.

Tips Desain Header

• Gunakan sticky header agar navigasi tetap terlihat saat scroll.
• Atur breakpoint mobile agar menu berubah menjadi hamburger.
• Pertahankan tinggi header konsisten agar terlihat profesional.

Cara Membuat Footer di Elementor Pro

Footer berada di bagian bawah website dan biasanya berisi informasi kontak, link penting, copyright, dan media sosial.

Langkah 1: Tambah Footer Template

Masuk ke Templates → Theme Builder → Footer, lalu klik Add New.

Langkah 2: Pilih Layout

Pilih template dari library atau mulai dari kosong. Footer umumnya memiliki beberapa kolom: tentang kami, menu cepat, kontak, dan newsletter.

Langkah 3: Tambahkan Widget Umum Footer

Widget yang sering dipakai di footer antara lain:

• Site Logo – menampilkan logo perusahaan
• Nav Menu – menu tambahan atau link legal
• Icon List – alamat, email, telepon
• Social Icons – link media sosial
• Text Editor – teks copyright

Langkah 4: Set Display Conditions

Pilih Entire Site agar footer muncul di semua halaman, atau kondisi tertentu sesuai kebutuhan.

Langkah 5: Publish

Klik Publish, lalu periksa di frontend.

Cara Membuat Custom Template: Single Post

Single Post template menentukan tampilan setiap artikel blog Anda. Dengan template ini, semua post akan memiliki layout seragam.

Langkah 1: Pilih Single Post

Buka Templates → Theme Builder → Single, lalu klik Add New. Pilih Single Post.

Langkah 2: Susun Layout

Struktur umum single post:

1. Featured Image – gambar utama artikel
2. Post Title – judul artikel
3. Post Info – tanggal, kategori, author
4. Post Content – isi artikel
5. Author Box – profil penulis
6. Post Navigation – link artikel sebelumnya/selanjutnya
7. Post Comments – kolom komentar

Langkah 3: Gunakan Dynamic Widgets

Cari widget bernama Post Title, Post Content, Featured Image, dan sebagainya di panel widget. Widget ini akan otomatis mengambil data dari artikel yang sedang dibuka.

Langkah 4: Atur Spacing dan Typography

Sesuaikan jarak antar elemen, ukuran font, dan lebar konten. Untuk readability, lebar konten teks biasanya sekitar 700–800 px.

Langkah 5: Set Display Conditions

Pilih All Posts atau kategori tertentu. Klik Publish.

Memahami Display Conditions

Display Conditions adalah fitur kunci yang menentukan di mana template ditampilkan. Tanpa kondisi yang benar, template bisa tidak muncul atau malah muncul di tempat yang salah.

Pilihan Kondisi Utama

• Entire Site – template muncul di seluruh halaman
• Singular – halaman spesifik, post, atau page tertentu
• Archive – halaman arsip kategori, tag, author, tanggal
• Taxonomy – kategori atau tag tertentu
• Post Type – semua post, page, atau custom post type

Kapan Menggunakan Entire Site vs Kondisi Spesifik?

Gunakan Entire Site untuk header dan footer utama yang ingin konsisten di semua halaman. Gunakan kondisi spesifik untuk template khusus, misalnya single post untuk kategori “Tutorial” memiliki layout berbeda dari kategori “Berita”.

Green Dot vs Gray Dot

Di daftar Theme Builder, setiap template memiliki indikator warna:

• Green Dot – template sudah live karena memiliki Display Conditions
• Gray Dot – template masih draft karena belum memiliki Display Conditions

Jika template Anda berwarna abu-abu, cek kembali apakah Display Conditions sudah diatur.

Jenis Template Lain yang Bisa Dibuat

Selain header, footer, dan single post, Theme Builder juga mendukung:

• Single Page – layout untuk halaman statis
• Archive – halaman daftar artikel berdasarkan kategori, tag, atau author
• Search Results – halaman hasil pencarian
• 404 Error Page – halaman error kustom
• WooCommerce – product page, shop page, checkout, cart, my account

Dengan semua jenis template ini, Anda bisa mengendalikan seluruh tampilan website dari satu dashboard Elementor.

Dynamic Widgets yang Sering Digunakan

Widget dinamis memudahkan pembuatan template karena kontennya otomatis mengikuti data situs. Berikut daftar widget yang paling sering dipakai:

• Site Logo – logo situs
• Site Title – judul situs
• Post Title – judul artikel/halaman
• Post Content – isi artikel/halaman
• Post Excerpt – cuplikan artikel
• Post Info – tanggal, kategori, tag, komentar
• Featured Image – gambar utama artikel
• Author Box – informasi penulis
• Post Navigation – link post sebelumnya/berikutnya
• Post Comments – area komentar
• Archive Posts – daftar artikel di halaman arsip
• Archive Title – judul halaman arsip

Pelajari kombinasi widget ini agar bisa membuat template yang kaya informasi tanpa kode.

Tips Responsive Design untuk Mobile

Website yang bagus harus nyaman dibaca di semua perangkat. Berikut tips responsive untuk template Theme Builder:

• Gunakan Flexbox Container daripada kolom lama agar kontrol layout lebih fleksibel.
• Cek tampilan di tiga breakpoint: desktop, tablet, dan mobile.
• Perkecil ukuran font judul di mobile agar tidak terlalu besar.
• Atur padding dan margin lebih kecil untuk layar sempit.
• Sembunyikan elemen yang tidak penting di mobile dengan opsi Hide on Mobile.
• Pastikan tombol CTA mudah diklik dengan ukuran minimal 44 x 44 px.

Troubleshooting Error Umum Theme Builder

Berikut masalah yang sering dialami pemula dan cara mengatasinya.

1. “Content Area Was Not Found”

Pesan ini biasanya muncul saat tema tidak mendukung Elementor atau tidak memiliki area konten yang benar. Solusi:

• Ganti tema ke Hello Elementor Theme.
• Hubungi developer tema jika ingin tetap menggunakan tema tersebut.

2. Header atau Footer Tidak Muncul

• Cek Display Conditions, pastikan tidak salah memilih halaman.
• Pastikan tidak ada template lain yang bertabrakan kondisinya.
• Bersihkan cache browser dan plugin cache.

3. Template Masih Gray Dot

Gray dot berarti template belum memiliki Display Conditions. Klik Edit Conditions dan pilih halaman yang sesuai.

4. Header Tampil Ganda

Ini terjadi jika tema masih menampilkan header bawaannya. Solusi:

• Nonaktifkan header bawaan tema di customizer tema.
• Gunakan Hello Elementor Theme untuk menghindari konflik.

5. Halaman 404 Custom Tidak Berfunami

Pastikan template 404 memiliki Display Conditions 404 Page. Kadang perlu mengatur permalink dan menyimpan ulang struktur permalink di Settings → Permalinks.

6. Perubahan Tidak Terlihat

• Bersihkan cache.
• Cek apakah sedang menggunakan mode perbaikan atau maintenance.
• Hard refresh browser dengan Ctrl+F5 atau Cmd+Shift+R.

Backup Template dengan Export/Import

Template yang sudah Anda buat bisa diekspor sebagai backup atau dipindahkan ke website lain.

Cara Export Template

1. Masuk ke Templates → Saved Templates.
2. Arahkan kursor ke template yang ingin diekspor.
3. Klik Export Template.
4. File JSON akan diunduh ke komputer Anda.

Cara Import Template

1. Masuk ke Templates → Saved Templates.
2. Klik Import Templates.
3. Pilih file JSON, lalu klik Import Now.

Biasanya untuk backup global Theme Builder, gunakan fitur export template satu per satu. Simpan file JSON di cloud atau drive eksternal agar mudah dipulihkan kapan saja.

FAQ

Apa itu Theme Builder di Elementor?

Theme Builder adalah fitur Elementor Pro untuk membuat template global seperti header, footer, single post, archive, 404, dan halaman WooCommerce tanpa coding.

Apakah Theme Builder bisa digunakan di Elementor gratis?

Tidak. Theme Builder hanya tersedia di Elementor Pro. Versi gratis hanya bisa mengedit konten halaman individual.

Elementor Pro untuk apa?

Elementor Pro digunakan untuk membuat website profesional dengan fitur lanjutan seperti Theme Builder, dynamic content, popup builder, form builder, WooCommerce builder, dan ratusan widget tambahan.

Perbedaan Elementor Pro dan Elementor gratis?

Elementor gratis memungkinkan desain halaman dengan widget dasar. Elementor Pro menambahkan Theme Builder, widget dinamis, template kit, support resmi, dan fitur e-commerce.

Bagaimana cara membuat header dan footer di Elementor?

Masuk ke Templates → Theme Builder, pilih Header atau Footer, buat desain, lalu atur Display Conditions dan publish.

Cara menggunakan Elementor di WordPress?

Install plugin Elementor dari dashboard WordPress, aktifkan lisensi Elementor Pro, lalu buka editor Elementor dari halaman atau menu Theme Builder.

Berapa biaya Elementor Pro?

Biaya berlangganan Elementor Pro bervariasi tergantung paket. Untuk pengguna Indonesia, Elementor Pro ID menyediakan pilihan lisensi resmi dengan Essential Addons Pro included. Lihat Paket Starter untuk informasi lebih lanjut.

Kesimpulan

Theme Builder Elementor Pro adalah alat yang sangat kuat untuk pemula yang ingin membangun website profesional tanpa coding. Dengan memahami cara membuat header, footer, dan custom template seperti single post, Anda sudah menguasai fondasi utama desain website modern.

Jangan lupa memanfaatkan Display Conditions dengan benar, selalu cek tampilan mobile, dan lakukan backup template secara berkala.

Jika Anda siap mulai, lisensi resmi Elementor Pro dari Elementor Pro ID sudah termasuk Essential Addons Pro tanpa biaya tambahan, sehingga Anda bisa langsung memperluas kemampuan desain website. Lihat Paket Starter dan mulai bangun website impian Anda hari ini.