MODUL PELATIHAN – MINGGU 3

Web Design Professional Program

Topik: Elementor Dasar – Desain Website dengan Drag & Drop

1. Tujuan Pembelajaran

A. Pengetahuan:

– Memahami fungsi Elementor sebagai page builder.

– Mengetahui elemen dasar: Section, Column, dan Widget.

– Memahami konsep layout responsif.

B. Keterampilan:

– Menggunakan Elementor untuk membuat layout dasar.

– Menambahkan widget teks, gambar, dan tombol.

– Mengatur struktur halaman menggunakan section dan column.

C. Sikap:

– Kreatif dalam menata elemen visual.

– Teliti dalam memilih ukuran, warna, dan keseimbangan desain.

2. Materi Pembelajaran Minggu 3

Sesi 1 – Pengenalan Elementor

• Elementor adalah editor visual berbasis drag-and-drop.

• Kelebihan Elementor:

   – Mudah digunakan tanpa coding.

   – Banyak template siap pakai.

   – Kompatibel dengan tema Astra.

• Bagian utama Elementor:

   – Panel Widget (kiri)

   – Area Kanvas (tengah)

   – Toolbar bawah (Preview, Update, Responsiveness)

Sesi 2 – Section, Column, & Widget

• Section = blok besar pembentuk halaman.

• Column = pembagian ruang dalam section.

• Widget = elemen isi (teks, gambar, ikon, tombol, dll).

Langkah latihan:

1. Tambahkan section baru.

2. Pilih jumlah kolom.

3. Tambahkan widget Heading, Text Editor, dan Image.

4. Atur alignment, padding, dan spacing.

Sesi 3 – Membuat Hero Section

• Hero section adalah bagian paling atas halaman yang menarik perhatian.

• Komponen hero section:

   – Judul utama (Heading)

   – Subjudul (Text Editor)

   – Tombol aksi (Button)

   – Gambar atau ilustrasi pendukung.

• Langkah membuat hero section:

   1. Tambahkan section 2 kolom.

   2. Kiri: Heading + Text + Button.

   3. Kanan: Tambahkan gambar/ilustrasi.

   4. Atur padding agar tampilan rapi.

Sesi 4 – Menggunakan Template Block Elementor

• Template block adalah desain siap pakai yang bisa diambil per bagian.

• Cara menggunakan:

   1. Klik ikon folder di area kanvas.

   2. Pilih “Blocks”.

   3. Pilih kategori (hero, services, contact, dll).

   4. Klik Insert.

• Peserta dapat memodifikasi warna, teks, dan gambar.

3. Output Minggu Ketiga

– Hero section selesai dibuat.

– Peserta memahami struktur section, column, dan widget.

– Menghasilkan halaman awal menggunakan Elementor.

– Mampu mengedit konten dengan drag & drop.

4. Tugas Mingguan

1. Buat ulang hero section dengan gaya pribadi.

2. Tambahkan minimal 1 section baru berisi:

   – Heading

   – Deskripsi singkat

   – Gambar atau ikon

3. Kirimkan link halaman hasil desain.