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.