Cara Menggunakan Elementor untuk Pemula (Panduan Lengkap Step by Step)
Elementor merupakan salah satu page builder WordPress yang paling populer di dunia. Dengan Elementor, Anda dapat membuat tampilan website profesional menggunakan sistem drag and drop, sehingga tidak perlu memiliki kemampuan coding seperti HTML, CSS, maupun PHP.
Melalui tutorial ini, Anda akan belajar cara menggunakan Elementor dari nol hingga mampu membuat halaman website sendiri.
Apa Itu Elementor?
Elementor adalah plugin WordPress yang digunakan untuk mendesain halaman website secara visual.
Beberapa kelebihan Elementor antara lain:
- Mudah digunakan oleh pemula.
- Sistem drag and drop.
- Banyak template siap pakai.
- Responsif di desktop, tablet, dan smartphone.
- Tersedia versi gratis dan Pro.
- Kompatibel dengan hampir semua tema WordPress.
Elementor sangat cocok digunakan untuk membuat:
- Company Profile
- Landing Page
- Website UMKM
- Website Sekolah
- Website Yayasan
- Toko Online WooCommerce
- Portfolio
Artikel lainnya: Cara install wordpress di hosting
Langkah 1. Install Plugin Elementor
Masuk ke Dashboard WordPress.
Kemudian pilih:
Plugins → Add New Plugin
Pada kolom pencarian ketik:
Elementor
Klik:
Install Now
Setelah selesai klik:
Activate
Sekarang Elementor sudah siap digunakan.
Langkah 2. Membuat Halaman Baru
Masuk ke menu:
Pages → Add New
Beri judul halaman.
Contoh:
- Home
- Tentang Kami
- Layanan
- Kontak
Setelah itu klik tombol:
Edit with Elementor
Langkah 3. Mengenal Tampilan Elementor
Saat Elementor terbuka, Anda akan melihat dua bagian utama.
Panel Kiri
Berisi berbagai widget seperti:
- Heading
- Image
- Button
- Text Editor
- Icon
- Video
- Google Maps
- Spacer
- Divider
Area Kanan
Merupakan tampilan website yang dapat diedit secara langsung.
Semua perubahan dapat langsung dilihat secara real-time.
Langkah 4. Menambahkan Section
Klik ikon + untuk membuat Section baru.
Pilih jumlah kolom.
Contohnya:
- 1 Kolom
- 2 Kolom
- 3 Kolom
- 4 Kolom
Section merupakan wadah utama tempat Anda menyusun isi halaman.
Langkah 5. Menambahkan Widget
Drag widget dari panel kiri ke area halaman.
Widget yang paling sering digunakan:
- Heading
- Text Editor
- Image
- Button
- Icon Box
- Video
- Gallery
- Divider
Cukup klik dan tarik ke posisi yang diinginkan.
Langkah 6. Mengubah Teks
Klik widget Heading.
Kemudian ubah:
- Judul
- Warna
- Ukuran Font
- Jenis Font
- Alignment
Semua perubahan akan langsung terlihat.
Langkah 7. Menambahkan Gambar
Drag widget Image.
Klik:
Choose Image
Pilih gambar dari Media Library atau upload gambar baru.
Anda juga dapat mengatur:
- Border Radius
- Shadow
- Ukuran
- Alignment
Langkah 8. Membuat Tombol (Button)
Drag widget Button.
Kemudian ubah:
- Teks tombol
- Link tujuan
- Warna
- Hover Effect
- Ikon
Contoh tombol:
- Hubungi Kami
- Konsultasi Gratis
- Pesan Sekarang
Langkah 9. Mengatur Background
Klik Section.
Masuk ke tab:
Style
Anda dapat menggunakan:
- Warna
- Gradient
- Background Image
- Video Background (Pro)
Tambahkan Overlay agar tulisan lebih mudah dibaca.
Langkah 10. Mengatur Tampilan Mobile
Klik ikon Responsive Mode.
Pilih:
- Desktop
- Tablet
- Mobile
Periksa kembali ukuran font, gambar, dan jarak antar elemen agar tampil rapi di semua perangkat.
Langkah 11. Simpan Halaman
Jika desain sudah selesai, klik tombol:
Publish
atau
Update
Halaman akan langsung dapat diakses oleh pengunjung.
Langkah 12. Menggunakan Template Elementor
Elementor menyediakan banyak template siap pakai.
Klik ikon Folder pada editor Elementor.
Pilih:
- Landing Page
- About
- Contact
- Services
- Hero Section
- FAQ
Klik Insert untuk menggunakannya.
Widget Elementor yang Paling Sering Digunakan
Widget berikut sangat membantu dalam membuat website profesional:
- Heading
- Image
- Text Editor
- Button
- Icon Box
- Testimonial
- Accordion
- Tabs
- Counter
- Progress Bar
- Google Maps
- Gallery
- Contact Form
Tips Menggunakan Elementor
Agar website tetap cepat dan nyaman digunakan, perhatikan beberapa tips berikut:
- Gunakan tema yang ringan seperti Astra, GeneratePress, atau Kadence.
- Kompres ukuran gambar sebelum diunggah.
- Hindari penggunaan animasi yang berlebihan.
- Gunakan warna dan font yang konsisten.
- Simpan desain sebagai Template jika ingin digunakan kembali.
- Selalu cek tampilan di perangkat mobile sebelum dipublikasikan.
Kelebihan Elementor
Beberapa alasan mengapa Elementor menjadi favorit banyak pengguna WordPress:
- Tidak memerlukan kemampuan coding.
- Editor visual yang mudah dipahami.
- Ribuan template siap pakai.
- Mendukung desain responsif.
- Integrasi dengan WooCommerce.
- Cocok untuk berbagai jenis website, mulai dari blog hingga company profile.
Kesimpulan
Elementor adalah solusi terbaik bagi pemula yang ingin membuat website profesional tanpa harus belajar pemrograman. Dengan sistem drag and drop, Anda dapat menyusun halaman, menambahkan gambar, tombol, hingga mengatur tampilan responsif dengan mudah.
Setelah memahami dasar-dasar Elementor, Anda bisa mulai membuat berbagai halaman seperti Beranda, Tentang Kami, Layanan, Portofolio, hingga Landing Page yang menarik. Semakin sering berlatih, semakin cepat Anda menguasai Elementor dan menghasilkan desain website yang modern serta profesional.
