Tutorial Mudah Cara Menambahkan Gambar di Elementor

Elementor adalah salah satu builder WordPress paling populer karena mudah digunakan dan tampilannya visual. Salah satu hal paling dasar dalam membuat halaman web adalah menambahkan gambar.
Dalam artikel ini, kamu akan belajar bagaimana cara menambahkan gambar di Elementor dengan bahasa sederhana, seperti sedang mengajari anak SD.

Mengapa Perlu Menambahkan Gambar?

Gambar membuat website terlihat lebih menarik.
Gambar juga membantu pengunjung memahami isi halaman dengan lebih cepat.
Contohnya:

Gambar produk

Foto layanan

Foto kantor

Banner promosi

Ilustrasi halaman website

Dengan Elementor, menambahkan gambar tidak membutuhkan coding sama sekali. Hanya drag and drop.

Bagian 1: Cara Menambahkan Gambar Menggunakan Image Widget

Ini adalah cara paling umum dan paling mudah.

1. Buka Halaman dengan Elementor

Masuk ke dashboard WordPress dan pilih halaman yang ingin diedit.
Klik tombol:

“Edit with Elementor”

Halaman akan terbuka dengan editor visual Elementor.

2. Cari Widget “Image”

Di sisi kiri panel Elementor, terdapat daftar widget.

Cari widget bernama “Image”.

Kamu bisa menemukannya dengan dua cara:

Scroll ke bawah daftar widget

Atau ketik “image” di kolom pencarian widget

3. Drag Widget “Image” ke Area Halaman

Klik dan tahan widget “Image”, lalu geser ke bagian halaman yang ingin kamu beri gambar.

Setelah dilepas, kotak gambar kosong akan muncul.

4. Upload atau Pilih Gambar dari Media Library

Klik kotak gambar tersebut.
Elementor akan membuka Media Library dari WordPress.

Kamu punya dua pilihan:

Upload gambar baru

Pilih gambar yang sudah pernah kamu upload sebelumnya

Setelah memilih gambar, klik tombol “Insert Media”.

Gambar akan langsung tampil di halaman.

5. Atur Ukuran Gambar

Masih di panel sebelah kiri, kamu bisa mengatur:

Ukuran gambar

Tinggi gambar

Posisi gambar

Alignment (kiri, tengah, kanan)

Link (opsional)

Gunakan ukuran yang sesuai agar gambar tidak terlalu besar atau terlalu kecil.

Bagian 2: Mengatur Style Gambar di Elementor

Setelah menambahkan gambar, kamu bisa membuat tampilannya lebih menarik.

1. Buka Tab “Style”

Klik gambar, lalu buka tab “Style” di panel sebelah kiri.

Di dalam tab ini, kamu bisa mengatur:

Border (garis pinggir)

Border radius (untuk membuat sudut gambar melengkung)

Shadow (bayangan gambar)

Opacity (kejernihan gambar)

Semua pengaturan dilakukan secara visual, jadi kamu bisa melihat hasilnya langsung.

2. Membuat Gambar Jadi Bulat

Jika ingin gambar wajah menjadi bulat:

Pada bagian Border Radius, isi angka besar seperti 500px.

Gambar otomatis berubah menjadi bentuk lingkaran.

3. Mengatur Hover Effect

Hover effect adalah efek ketika gambar disentuh mouse.

Kamu bisa mengatur:

Perubahan warna

Perubahan opacity

Zoom in/zoom out

Masuk ke Style → Hover.

Bagian 3: Menambahkan Link pada Gambar

Jika ingin membuat gambar bisa diklik, Elementor sudah menyediakan fitur ini.

1. Klik Gambar

Pastikan gambar yang ingin diberi link sudah dipilih.

2. Buka Tab “Content”

Di bagian Link, pilih:

Custom URL → untuk arahkan ke halaman lain

Media File → untuk membuka gambar versi besar

None → jika tidak ingin gambar bisa diklik

Masukkan URL tujuan jika memilih Custom URL.

Contoh:

Link ke WhatsApp

Link ke halaman produk

Link ke halaman booking

Bagian 4: Mengatur Responsivitas Gambar (Mobile & Tablet)

Elementor menyediakan pengaturan responsif untuk memastikan gambar tampil rapi di semua perangkat.

1. Klik Ikon Responsif

Di hampir semua pengaturan, terdapat ikon untuk:

Desktop

Tablet

Mobile

Kamu bisa mengatur ukuran gambar untuk perangkat-perangkat tersebut secara terpisah.

2. Sesuaikan Ukuran Gambar

Pastikan gambar:

Tidak terlalu besar di mobile

Tidak merusak layout

Tetap proporsional

Elementor memudahkan semua pengaturan ini tanpa coding.

Kesimpulan

Menambahkan gambar di Elementor sangat mudah dilakukan.
Langkah-langkahnya adalah:

Masuk ke halaman dan klik Edit with Elementor

Ambil widget Image

Drag ke halaman

Upload atau pilih gambar

Atur ukuran dan tampilannya

Tambahkan link jika perlu

Sesuaikan tampilan untuk mobile

Dengan langkah-langkah sederhana ini, kamu bisa membuat halaman website yang lebih menarik, profesional, dan mudah dipahami pengunjung.