Panduan Mengedit Website Dengan Elementor di WordPress

Elementor adalah plugin page builder populer di WordPress yang memudahkan pengguna dalam membuat dan mengedit website dengan elementor tanpa perlu kemampuan coding. Dengan sistem drag-and-drop yang intuitif, Elementor memungkinkan siapa saja, baik pemula maupun profesional, untuk mendesain halaman web secara visual, cepat, dan fleksibel sesuai kebutuhan.

Panduan Edit Website Dengan Elementor

Berikut panduan step by step mengedit website dengan Elementor di WordPress yang bisa kamu ikuti dari nol sampai publish.

1. Login ke Dashboard WordPress

• Buka: namadomain.com/wp-admin
• Masukkan username & password
• Masuk ke halaman dashboard

Baca juga: Cara Memperbaiki Widget Error Pada WordPress

2. Buka Halaman yang Ingin Diedit

• Pilih menu Pages (Halaman)
• Klik halaman yang ingin diedit (misalnya: Home, About, dll)
• Klik link “Edit with Elementor”

3. Mengenal Tampilan Elementor

Saat Elementor terbuka, ada 2 bagian utama:

• Panel Kiri (Panel Widget) → tempat elemen (teks, gambar, tombol, dll)
• Panel Kanan (Preview Halaman) → tampilan website kamu
• Klik salah satu yang ingin kamu edit di bagian Panel Kanan, maka bagian panel kiri akan berubah menjadi informasi mengenai area editing tersebut.

4. Mengedit Teks

• Klik bagian teks di halaman
• Di panel kiri, ubah tulisan sesuai kebutuhan
• Bisa atur: Font, Ukuran, Warna, Alignment, dan sebagainya.

5. Mengganti Gambar

• Klik gambar yang ingin diganti
• Klik Choose Image
• Upload gambar baru atau pilih dari media library
• Klik Insert Media

6. Menambahkan Elemen Baru

• Drag & drop widget dari kiri ke halaman, contoh:
  • Heading (Judul)
  • Text Editor
  • Image
  • Button
  • Video
• Letakkan di posisi yang diinginkan

7. Mengatur Layout (Section & Column)

Struktur Pada Elementor

• Section (bagian utama)
• Column (kolom)
• Widget (isi)

Cara edit:

• Klik icon titik 6 (section)
• Atur:
  • Background (warna/gambar)
  • Padding & margin
  • Lebar section

8. Mengedit Background

• Klik section
• Masuk ke tab Style
• Pilih:
  • Warna background
  • Gambar background
  • Gradient

9. Mengedit Tombol (Button)

• Klik tombol
• Ubah:
  • Text tombol
  • Link (URL tujuan)
  • Warna & ukuran
  • Hover effect

10. Responsive (Tampilan HP & Tablet)

• Klik icon Responsive Mode (ikon monitor)
• Pilih:
  • Desktop
  • Tablet
  • Mobile
• Sesuaikan ukuran font & layout agar rapi di HP

11. Simpan Perubahan

• Klik tombol Update / Publish
• Cek hasilnya di website

12. Tips Penting Biar Website Lebih Profesional

• Gunakan font maksimal 2–3 jenis
• Jangan terlalu banyak warna
• Gunakan gambar berkualitas tinggi
• Perhatikan spacing (jarak antar elemen)
• Pastikan mobile-friendly