Mengedit halaman beranda dengan Elementor: Menambahkan modul (teks, gambar, tombol, dll.)

Belajar menambahkan modul dasar adalah keterampilan inti dalam merancang halaman menggunakan Elementor. Bagian ini akan memandu Anda langkah demi langkah tentang cara menambahkan elemen umum seperti teks, gambar, tombol, dan menyesuaikan gaya mereka, sehingga Anda dapat membuat halaman beranda yang terstruktur dengan baik.

Persiapan: Masuk ke mode edit Elementor.

1. Masuk ke dasbor WordPress, lalu masuk ke "Halaman" → temukan "Halaman Beranda" (atau halaman yang ingin Anda edit), lalu klik "Edit".
2. Di bagian atas halaman, klik tombol "Edit dengan Elementor" (berwarna biru, dengan ikon Elementor), untuk masuk ke antarmuka pengeditan visual.

Setelah masuk, antarmuka dibagi menjadi tiga bagian:

• Di sebelah kiri: panel modul.(Termasuk semua elemen yang dapat ditambahkan)
• Di tengah: area pengeditan.(Menampilkan efek halaman secara real-time)
• Di sisi kanan: panel gaya.(Setelah elemen dipilih, Anda dapat menyesuaikan gaya detailnya.)

Langkah pertama: Tambahkan modul "Judul" (judul teks).

Judul adalah "kerangka" halaman, yang digunakan untuk membantu pengunjung memahami hierarki konten.

1. Temukan modul judul.Di panel modul sebelah kiri, temukan modul "Judul" di bawah kategori "Dasar" (dengan ikon "T").
2. Drag dan drop untuk menambahkan ke halaman.Tahan modul "Judul", seret ke lokasi "+" Seret elemen ke sini" di area edit tengah, lalu lepaskan mouse. Saat itu, halaman akan menampilkan judul default "Ini adalah judul".
3. \nUbah konten judul.Pilih modul judul yang baru saja ditambahkan, maka panel edit akan muncul di sisi kanan:
   • Di bagian "Konten" → "Teks Judul", hapus teks default, lalu masukkan judul Anda (misalnya, "Selamat datang di blog pribadi saya").
   • Di bagian "Level Judul", pilih level (H1 yang terbesar, cocok untuk judul utama; H2 yang kedua, cocok untuk subjudul, pilih sesuai dengan hierarki konten).
4. \nSesuaikan gaya judul.Klik tab "Gaya" di panel kanan untuk menyesuaikannya:
   • \nFontDi dalam kotak drop-down "Font", pilih font yang kamu suka (seperti "Microsoft YaHei" atau "Arial").
   • Ukuran: Seret slider "Ukuran Font", atau masukkan nilai langsung (disarankan ukuran judul antara 24-48px).
   • Warna.Klk pada kotak "Warna Teks", lalu pilih warna untuk judul (misalnya hitam, biru tua).
   • \nSejajarkan.Klik tombol "Penyelarasan Teks", lalu atur judul agar berada di kiri, tengah, atau kanan (disarankan untuk menggunakan tengah untuk judul utama halaman beranda).

Langkah kedua: Tambahkan modul "Paragraf" (teks utama).

Paragraf digunakan untuk menampilkan konten terperinci, seperti pengantar, penjelasan, dan lain-lain.

1. \nTambahkan modul paragraf.Di sisi kiri, dalam kategori "Dasar", temukan modul "Paragraf" (dengan ikon berupa simbol paragraf), lalu seret dan letakkan di bawah modul judul.
2. \nUbah isi paragraf.Pilih modul paragraf, lalu masukkan konten di bagian "Konten" → "Teks" di sisi kanan (misalnya, "Di sini saya membagikan pemikiran hidup dan catatan belajar saya. Selamat datang untuk sering berkunjung dan berkomunikasi!").
3. \nMengoptimalkan gaya paragraf.Beralih ke tab "Gaya":
   • Ukuran fontDi sini disarankan untuk mengatur ukuran font menjadi 16-18 piksel (agar mudah dibaca).
   • \nTinggi baris: Sesuaikan menjadi 1,5-1,8 kali (untuk membuat jarak antar kata lebih nyaman).
   • Warna.Pilih warna yang berbeda dari judul (seperti abu-abu tua, untuk menghindari terlalu mirip dengan warna latar belakang).

Langkah ketiga: Tambahkan modul "Gambar" (Sisipkan gambar)

Gambar dapat membuat halaman lebih hidup, jadi disarankan untuk memilih gambar yang jelas dan relevan (seperti foto pribadi, gambar produk, atau pemandangan).

1. Unggah atau pilih gambar.Di bagian kiri, temukan modul "Gambar" di bawah kategori "Dasar", lalu seret ke bawah paragraf. Pilih modul gambar, lalu klik "Pilih Gambar" di bagian kanan "Konten" → "Gambar":
   • Jika gambar sudah ada di komputer, klik "Unggah File" → Pilih gambar → Klik "Pilih".
   • Jika Anda sudah mengunggahnya sebelumnya, pilih saja gambar yang sudah ada di "Perpustakaan Media".
2. \nMengatur efek tampilan gambar.Beralih ke tab "Gaya":
   • \nUkuranDi bagian "Lebar", atur rasio gambar terhadap halaman (misalnya, 100% menunjukkan lebar layar penuh, sedangkan 80% menunjukkan lebar yang sedikit lebih sempit).
   • \nSudut bulat.: Seret slider "Radius Bingkai" untuk membuat sudut gambar menjadi bulat (semakin tinggi nilainya, semakin jelas tampilan sudut bulatnya).
   • \nBayangan: Dengan mengaktifkan "Bayangan Kotak", Anda dapat menambahkan bayangan ringan pada gambar (untuk membuat gambar terlihat lebih tiga dimensi).
3. Tambahkan deskripsi gambar (opsional).Memasukkan deskripsi gambar (seperti "Foto perjalanan saya") di bagian "Konten" → "Teks Alternatif" dapat membantu mesin pencari memahami konten gambar dan meningkatkan SEO.

Langkah keempat: Tambahkan modul "Tombol" (untuk mengarahkan klik).

Tombol sering digunakan untuk mengarahkan pengunjung melakukan tindakan, seperti "Lihat Lebih Banyak", "Hubungi Saya", "Beli Sekarang", dan lain-lain.

1. Modul tombol tambahkan.Di sisi kiri, dalam kategori "Dasar", temukan modul "Tombol", lalu seret dan jatuhkan di bawah gambar.
2. \nMengatur konten tombol dan tautan.Modul tombol pilih, di bagian "Konten" di sisi kanan:
   • \nTeks: Masukkan teks tombol (seperti "Lihat Artikel Saya").
   • tautan (di situs web)Klk kotak input di samping "Dinamis", lalu masukkan alamat tautan (seperti alamat halaman daftar blog Anda, atau tautan eksternal).
     • Jika ingin menautkan ke halaman dalam situs, Anda dapat mengklik ikon "Pilih Halaman" di sebelah kanan kotak input, lalu langsung memilih halaman target.
3. \nMendesain gaya tombol.Beralih ke tab "Style", dan buat tombol yang menarik:
   • Warna.Pilih warna putih untuk "Warna Teks", dan pilih warna cerah (seperti biru atau oranye) untuk "Warna Latar Belakang", yang harus sesuai dengan skema warna utama halaman.
   • \nUkuranPilih "Sedang" atau "Besar" untuk "Ukuran Tombol", sehingga tombol lebih mudah diklik.
   • \nBentuknya: "Radius bingkai" diatur menjadi 5-10 piksel (sudut bulat yang sedikit lebih menarik secara visual).
   • *Efek hover**: Klik tab "hover", atur warna saat mouse melayang (seperti warna yang lebih gelap), untuk meningkatkan interaktivitas.

Langkah kelima: Sesuaikan jarak antar modul (untuk membuat halaman lebih rapi)

Setelah menambahkan beberapa modul, mungkin terjadi masalah jarak yang terlalu dekat atau terlalu jauh, sehingga perlu menyesuaikan tata letaknya:

1. Pilih modul.: Klik tepi modul (maka akan muncul bingkai biru).
2. \nSesuaikan margin luar.Di panel sisi kanan "Lanjutan" → "Margins Luar", atur jarak antara modul dan elemen atas dan bawah (misalnya, "Margins Atas" diatur menjadi 30px, untuk meningkatkan jarak dengan modul di atasnya).
3. Menyelaraskan secara seragam.: Tahan Ctrl Kunci (atau Command Untuk memilih beberapa modul secara bersamaan, klik tombol "Sejajarkan" di toolbar atas (seperti "Sejajarkan di tengah"), sehingga elemen-elemennya tertata lebih rapi.

Langkah keenam: Simpan dan pratinjau.

1. \nSimpan perubahan.Klk tombol "Perbarui" di pojok kiri bawah halaman (disarankan untuk menyimpan setelah setiap modifikasi).
2. Efek pratinjau.Klik tombol "Pratinjau" di pojok kiri atas, pilih "Pratinjau Desktop", "Pratinjau Tablet", dan "Pratinjau Ponsel", lalu periksa tampilannya di berbagai perangkat (pastikan teks di ponsel tidak tumpang tindih dan gambar tidak terdistorsi).

Tips untuk pemula.

• Modul dapat ditambahkan berulang kali: Jika Anda membutuhkan beberapa paragraf atau gambar, cukup seret dan jatuhkan modul yang sesuai beberapa kali.
• Menghapus modul: Setelah memilih modul, tekan tombol di keyboard. Delete Klik tombol, atau klik ikon "Tempat Sampah" di atas modul.
• Modul Salin: Setelah memilih modul, klik ikon "Salin" untuk menyalin elemen dengan gaya yang sama dengan cepat (cukup ubah kontennya).

Dengan langkah-langkah di atas, Anda telah menguasai keterampilan menambahkan modul paling inti di Elementor. Selanjutnya, Anda dapat mencoba menambahkan modul seperti "Ikon", "Garis Pemisah", "Daftar", dan lain-lain, untuk membuat halaman beranda Anda lebih kaya dan berwarna!