Panduan Edit Website dengan Elementor untuk Pemula
Halo Sobat MalakaTech! 👋
Kembali lagi bersama admin paling kece yang siap bantu kamu memahami cara edit website menggunakan Elementor dengan mudah dan santai.
Banyak pengguna WordPress sebenarnya tidak ingin mengubah keseluruhan desain website. Kadang hanya ingin:
- Mengganti gambar,
- Mengubah tulisan,
- Memperbaiki heading,
- Menambah section,
- Atau merapikan tampilan website saja.
Di artikel ini admin akan membahas cara edit website menggunakan Elementor lengkap beserta fungsi setiap bagian pentingnya.
Apa Itu Elementor?
Elementor adalah plugin page builder WordPress yang digunakan untuk membuat dan mengedit tampilan website secara visual menggunakan sistem drag and drop. Artinya, kamu bisa langsung melihat perubahan website saat diedit tanpa perlu coding.
Elementor biasanya digunakan untuk:
- Landing page
- Company profile
- Website bisnis
- Portfolio
- Toko online
- Blog
Mengenal Tampilan Dasar Elementor
Saat membuka Elementor, biasanya terdapat 3 bagian utama:
1. Panel Kiri Elementor
Bagian ini berisi:
-
- Widget
- Pengaturan konten
- Style
- Advanced setting
Di sinilah semua proses edit dilakukan.
2. Area Preview Website
Bagian tengah digunakan untuk melihat tampilan website secara langsung. Semua perubahan bisa langsung terlihat secara realtime.
3. Menu Navigator
Berfungsi untuk melihat struktur section, container, dan widget yang digunakan pada halaman. Sangat membantu ketika halaman website cukup panjang.
Penjelasan Tab Elementor
1. Content
Digunakan untuk mengubah isi konten seperti:
-
- Judul
- Tulisan
- Gambar
- Button
- Link
2. Style
Digunakan untuk mengatur tampilan seperti:
-
- Warna
- Font
- Ukuran tulisan
- Background
- Border
- Shadow
3. Advanced
Digunakan untuk pengaturan tambahan seperti:
-
- Margin
- Padding
- Motion effect
- Responsive
- Custom CSS
Cara Mengganti Judul di Elementor
1. Widget Heading
Widget ini digunakan untuk membuat judul atau heading.
2. Cara Mengedit:
-
- Klik tulisan heading pada halaman
- Panel kiri akan terbuka
- Pada tab Content, ubah teks sesuai kebutuhan
- Pada tab Style, atur:
- ukuran font,
- warna,
- ketebalan tulisan,
- alignment
Cara Mengedit Tulisan atau Deskripsi
1. Widget Text Editor
Widget ini digunakan untuk paragraf atau deskripsi. Cara Mengedit:
-
- Klik area tulisan
- Edit isi teks pada tab Content
- Atur typography pada tab Style
Cara Mengganti Gambar di Elementor
1. Widget Image
Digunakan untuk menampilkan gambar. Cara Mengedit:
-
- Klik gambar
- Pilih tab Content
- Klik gambar lama
- Upload gambar baru atau pilih dari media library
2. Tips:
-
- Gunakan gambar berkualitas bagus
- Hindari ukuran file terlalu besar
- Gunakan rasio gambar yang konsisten
Cara Mengatur Background Section
1. Background Section / Container
Digunakan untuk mengubah:
-
- Warna background,
- Gambar background,
- Gradient,
- Overlay.
2. Cara Mengedit:
-
- Klik section/container
- Buka tab Style
- Pilih:
- Background Type
- Color
- Image
3. Tips:
-
- Gunakan warna yang sesuai branding
- Jangan gunakan background terlalu ramai
Cara Mengatur Spacing dan Padding
1. Margin dan Padding
Bagian ini sangat penting agar website terlihat rapi.
Margin : Jarak luar antar elemen.
Padding : Jarak dalam pada elemen.
2. Cara Mengedit
-
- Klik widget atau section
- Buka tab Advanced
- Atur nilai margin/padding
3. Tips
-
- Gunakan spacing yang konsisten
- Jangan terlalu rapat
Cara Menambah Section Baru di Elementor
1. Menambah Section
-
- Klik ikon “+”
- Pilih struktur kolom
- Tambahkan widget ke dalam section
Cara Menambah Kolom atau Container Baru
1. Container / Flexbox
Container digunakan untuk menyusun layout website.
2. Cara Menambah
-
- Klik kanan section
- Pilih:
- Add New Container
- Duplicate Container
3. Cara Mengatur Kolom
-
- Atur Width
- Direction
- Justify Content
- Align Items
4. Tips
-
- Gunakan layout sederhana
- Jangan terlalu banyak kolom kecil
Cara Drag & Drop Widget
Elementor menggunakan sistem drag and drop.
1. Cara
-
- Pilih widget dari panel kiri
- Tahan dan tarik ke area website
- Lepaskan pada kolom yang diinginkan
