Daftar Isi

1. Pengenalan Elementor
2. Persiapan Awal
3. Instalasi Plugin Elementor
4. Membuat Laman Baru di WordPress
5. Memulai Mendesain dengan Elementor
6. Menambahkan Elemen Dasar
7. Desain Responsif (Mobile & Tablet)
8. Menerapkan Tema Warna Kalem
9. Menambahkan Interaksi dan Animasi Ringan
10. Tips Optimasi Kecepatan Halaman
11. Mempublikasikan dan Menyusun Navigasi
12. Penutup

1. Pengenalan Elementor

Elementor adalah plugin page builder berbasis drag-and-drop untuk WordPress. Dengan Elementor, pengguna dapat membangun halaman dengan mudah tanpa coding.

Kelebihan Elementor:

• Interface visual drag-and-drop.
• Banyak elemen desain (judul, gambar, tombol, ikon, dll).
• Responsif di berbagai perangkat.
• Kompatibel dengan hampir semua tema WordPress.

2. Persiapan Awal

Sebelum memulai, pastikan Anda telah:

• Memiliki domain dan hosting aktif.
• WordPress telah terinstal.
• Memilih tema ringan dan kompatibel dengan Elementor (seperti Hello Elementor, Astra, atau Neve).
• Login ke dashboard admin WordPress (yourdomain.com/wp-admin).

3. Instalasi Plugin Elementor

Langkah-langkah:

1. ) Masuk ke Dashboard WordPress.

2.) Pilih menu Plugins > Add New.

3.) Lalu ketika sudah ke add plugin agar muncul tampilan seperti ini.

4.) Ketik “Elementor” di kolom pencarian.

Catatan : Ketika sudah terinstal lalu aktifkan plugin elementor

4. Membuat Laman Baru di WordPress

Langkah-langkah:

1.) Masuk ke menu Laman> Add Page.

2.) Klik tombol Sunting dengan Elementor.

5. Memulai Mendesain dengan Elementor

Setelah halaman terbuka di editor Elementor:

• Area kerja terbagi dua: sebelah kiri (panel elemen) dan kanan (preview laman).
• Klik ikon + untuk menambahkan section baru.
• Pilih struktur kolom sesuai kebutuhan.

6. Menambahkan Elemen Dasar

Elemen yang sering digunakan:

Elemen	Fungsi
Heading	Judul utama atau subjudul
Text Editor	Paragraf atau penjelasan
Image	Menambahkan gambar
Button	CTA (Call to Action)
Divider	Garis pemisah
Icon	Simbol visual
Spacer	Jarak antar elemen

Contoh:

Untuk membuat hero section:

1. Tambah 1 kolom.
2. Masukkan elemen Heading: “Selamat Datang di Website Kami”.
3. Tambah Text Editor: “Kami menyediakan solusi digital yang elegan”.
4. Tambah Button: “Pelajari Lebih Lanjut”.

---

7. Desain Responsif (Mobile & Tablet)

Elementor memiliki fitur responsive mode untuk menyesuaikan tampilan di:

• Desktop
• Tablet
• Mobile

Klik ikon Responsive Mode di bagian bawah editor untuk berpindah antar perangkat. Anda dapat mengatur ukuran teks, margin, padding, dan tampilan elemen berbeda sesuai perangkat.

8. Menerapkan Tema Warna Kalem

Rekomendasi Palet Warna Kalem:

Warna	Kode Hex	Kesan
Pastel Blue	#A8DADC	Tenang, profesional
Soft Lavender	#E9D8FD	Lembut, kreatif
Pale Peach	#FFD6BA	Hangat, ramah
Mist Gray	#E5E5E5	Netral, elegan
Sage Green	#B7C6A4	Alam, menenangkan

Cara Mengatur Warna Default di Elementor:

1. Klik ikon hamburger di kiri atas.
2. Pilih Site Settings.
3. Pilih Colors.
4. Atur warna Primer, Sekunder, Teks, dan Background sesuai tema.

---

9. Menambahkan Interaksi dan Animasi Ringan

Untuk membuat halaman lebih hidup:

• Gunakan Entrance Animation pada elemen (Fade In, Slide In).
• Atur Hover Effects pada tombol.
• Gunakan Motion Effects di Elementor Pro.

Tips: Jangan berlebihan agar halaman tetap ringan.

---

10. Tips Optimasi Kecepatan Halaman

• Gunakan gambar terkompresi (format WebP atau JPEG).
• Minimalkan penggunaan widget berat (seperti video autoplay).
• Aktifkan caching plugin (misalnya: LiteSpeed Cache, WP Super Cache).
• Gunakan tema ringan.
• Aktifkan Lazy Load untuk gambar.

---

11. Mempublikasikan dan Menyusun Navigasi

Mempublikasikan:

Klik tombol Publish di kiri bawah setelah selesai mendesain.

Menambahkan ke Navigasi:

1. Masuk ke Appearance > Menus.
2. Buat menu baru jika belum ada.
3. Tambahkan halaman yang baru dibuat.
4. Simpan dan tampilkan menu di lokasi utama (misal: Primary Menu).

---

12. Penutup

Dengan bantuan Elementor, Anda bisa membuat halaman WordPress yang indah, responsif, dan cepat, tanpa menulis kode sama sekali. Gunakan warna-warna kalem untuk menciptakan suasana yang profesional dan nyaman bagi pengunjung.

Rangkuman Manfaat Elementor:

• Mudah digunakan siapa saja.
• Fleksibel untuk berbagai jenis konten.
• Kompatibel dengan tema dan plugin populer.
• Tersedia versi gratis dan pro.

13.) Contoh Membuat Header ala Netflix dengan Elementor

1. Tambahkan Section Baru

• Klik tombol ( + ) Add Section di Elementor.
• Pilih 1 kolom penuh.

# Contoh Ketika Sudah Klik tombol (+) Section

2. Atur Background Section

• Klik ikon Edit Section (ikon 6 titik di atas section).
• Di tab Style > Background > Background Type, pilih Classic.
• Upload gambar latar: bisa gambar tema film, atau warna gelap polos (#141414).
• Atur posisi Center Center, Size: Cover, Repeat: No-repeat.

3. Tambahkan Logo

• Siapkan background terlebih dahulu
• Tambahkan Widget Image ke dalam section.
• Upload logo Anda (atau logo Netflix sebagai contoh).
• Letakkan di bagian kiri atas.

#Tampilan ketika belum diberi logo

#Tampilan ketika sudah diberi logo

4. Tambahkan Judul Deskripsi dan Button

#Menambahkan Judul Deskripsi

• Tambahkan Heading dengan teks seperti: “Film dan Acara TV Terbaik Tanpa Batas”
• Tambahkan Text Editor: “Tonton kapan saja. Di mana saja. Batalkan kapan saja.”

Tambahkan Tombol Aksi (CTA)

• Tambahkan Button.
• Teks tombol: “Mulai Sekarang”
• Style tombol:
  • Warna background: Merah (#e50914)
  • Warna teks: Putih
  • Hover effect: Gelap sedikit (#b20710)

#Hasil ketika sudah diberi Teks dan Button