Responsive Image Elementor Builder Untuk Semua Perangkat

98

Responsive Elementor Builder – Untuk membuat gambar responsif di Elementor, Anda dapat memanfaatkan beberapa teknik yang memungkinkan gambar beradaptasi dengan baik di berbagai perangkat seperti desktop, tablet, dan ponsel. Elementor memudahkan penyesuaian gambar dengan antarmuka yang ramah pengguna, tetapi Anda juga dapat menambahkan kode CSS khusus untuk mendapatkan kontrol lebih lanjut. Berikut adalah beberapa cara untuk memastikan gambar di Elementor tetap responsif di semua perangkat:

1. Menggunakan Pengaturan Gambar Responsif di Elementor

Elementor sudah menyediakan pengaturan responsif untuk gambar di dalam antarmuka pembangunannya. Dengan menggunakan pengaturan ini, Anda dapat menyesuaikan ukuran gambar untuk berbagai perangkat (desktop, tablet, dan ponsel) dengan mudah.

Langkah-langkah:

1. Pilih Widget Gambar:
   • Buka halaman atau posting yang ingin Anda edit menggunakan Elementor.
   • Pilih Image Widget dari panel Elementor dan tarik ke dalam area kerja.
2. Unggah Gambar:
   • Klik pada gambar untuk mengunggah gambar yang ingin digunakan.
3. Pengaturan Responsif untuk Gambar:
   • Setelah gambar diunggah, pergi ke tab Style.
   • Di bawah bagian Image, Anda dapat menyesuaikan ukuran gambar dengan mengubah Width dan Height untuk perangkat tertentu.
4. Menyesuaikan Gambar untuk Desktop, Tablet, dan Ponsel:
   • Untuk menyesuaikan gambar di perangkat yang berbeda, klik ikon perangkat di sebelah pengaturan Width dan Height di bagian Style.
     • Ikon desktop untuk mengatur gambar di desktop.
     • Ikon tablet untuk mengatur gambar di tablet.
     • Ikon ponsel untuk mengatur gambar di ponsel.

   Anda bisa menyesuaikan lebar gambar dengan persentase atau piksel untuk memastikan gambar beradaptasi dengan ukuran layar perangkat yang berbeda.

2. Menambahkan CSS Responsif untuk Gambar

Jika Anda membutuhkan lebih banyak kontrol atas gambar responsif, Anda bisa menambahkan CSS kustom untuk menyesuaikan gambar di berbagai perangkat. CSS ini memberi Anda fleksibilitas untuk mengatur ukuran gambar dengan lebih halus, misalnya mengubah ukuran gambar berdasarkan lebar layar atau memberikan batasan tertentu.

Contoh CSS Responsif:

/* Untuk Desktop */
@media only screen and (min-width: 1024px) {
.custom-image-class img {
width: 100%;  /* Gambar akan mengambil 100% dari lebar kontainer */
height: auto; /* Menjaga rasio aspek gambar */
}
}
/* Untuk Tablet */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.custom-image-class img {
width: 90%;  /* Gambar akan sedikit lebih kecil */
height: auto;
}
}
/* Untuk Ponsel */
@media only screen and (max-width: 768px) {
.custom-image-class img {
width: 80%;  /* Gambar akan lebih kecil pada ponsel */
height: auto;
}
}

Penjelasan:

• Desktop: Gambar menggunakan lebar penuh (100%) dari kontainer induk dan menjaga rasio aspek gambar dengan height: auto.
• Tablet: Gambar memiliki lebar 90% dari kontainer induk.
• Ponsel: Gambar memiliki lebar 80% dari kontainer induk.

Cara Menambahkan CSS di Elementor:

1. Pilih widget gambar yang ingin Anda sesuaikan.
2. Buka tab Advanced.
3. Di bagian Custom CSS, tempelkan kode CSS responsif yang telah Anda buat.

3. Menggunakan Gambar Sebagai Background untuk Responsivitas Otomatis

Sebagai alternatif, Anda bisa menggunakan gambar sebagai background di widget atau elemen tertentu. Gambar latar belakang akan secara otomatis menyesuaikan ukuran dan posisi untuk berbagai perangkat.

Langkah-langkah:

1. Pilih Section, Column, atau Widget:
   • Pilih section, kolom, atau widget di mana Anda ingin menambahkan gambar latar belakang.
2. Tambahkan Gambar Latar Belakang:
   • Klik kanan pada section, kolom, atau widget dan pilih Edit Section (untuk section), Edit Column (untuk kolom), atau Edit Widget.
   • Pergi ke tab Style dan pilih Background.
   • Unggah gambar yang ingin digunakan sebagai latar belakang.
3. Pengaturan Responsif untuk Background:
   • Setelah memilih gambar latar belakang, Anda dapat menyesuaikan posisi dan ukuran gambar menggunakan pengaturan berikut:
     • Position: Mengatur posisi gambar (misalnya center-center).
     • Attachment: Pilih Fixed untuk gambar latar belakang yang tetap saat menggulir (atau gunakan Scroll untuk gambar yang menggulir).
     • Size: Pilih Cover untuk memastikan gambar latar belakang mengisi seluruh area atau pilih Contain jika Anda ingin gambar berada dalam area tanpa memotong.
     • Repeat: Pilih No-repeat agar gambar tidak diulang.
4. Uji Responsivitas:
   • Anda dapat mengklik ikon perangkat (Desktop, Tablet, Mobile) di bagian bawah editor Elementor untuk melihat bagaimana gambar latar belakang tampil di perangkat yang berbeda.

4. Menggunakan Gambar dengan Ukuran Fleksibel Menggunakan CSS

Jika Anda ingin memastikan gambar memiliki ukuran yang fleksibel di berbagai perangkat, Anda bisa menggunakan CSS dengan unit % atau vw (viewport width) untuk memastikan gambar beradaptasi dengan ukuran layar secara dinamis.

Contoh CSS untuk Gambar Fleksibel:

/* Gambar fleksibel untuk seluruh perangkat */
.custom-image-class img {
width: 100%;
height: auto; /* Menjaga rasio aspek gambar */
}

Penjelasan:

• width: 100% memastikan gambar akan mengisi seluruh lebar kontainer induknya.
• height: auto; memastikan gambar menjaga rasio aspek asli.

5. Menggunakan Gambar dengan Lazy Load untuk Efisiensi

Lazy load adalah teknik di mana gambar hanya dimuat saat elemen tersebut muncul di layar pengguna. Ini membantu meningkatkan waktu pemuatan halaman dan mengurangi beban untuk perangkat dengan koneksi internet terbatas.

Mengaktifkan Lazy Load di Elementor:

1. Masuk ke Dashboard WordPress.
2. Pergi ke Elementor > Settings.
3. Di tab Advanced, aktifkan opsi Lazy Load Images.
4. Setelah diaktifkan, gambar hanya akan dimuat saat pengguna menggulir ke bawah halaman.

Ini adalah cara yang bagus untuk meningkatkan kinerja dan memastikan gambar responsif dengan memuat hanya gambar yang terlihat di layar pengguna.

6. Menggunakan Fitur Visibility di Elementor

Elementor memungkinkan Anda untuk menyembunyikan gambar atau elemen lain di perangkat tertentu jika Anda merasa gambar tersebut tidak cocok atau terlalu besar di perangkat tertentu.

Langkah-langkah Menyembunyikan Gambar:

1. Pilih gambar yang ingin Anda sesuaikan.
2. Pergi ke tab Advanced.
3. Pilih bagian Responsive.
4. Pilih opsi untuk menyembunyikan gambar di desktop, tablet, atau ponsel sesuai kebutuhan.

Ini memungkinkan Anda untuk menampilkan gambar yang berbeda atau menyembunyikan gambar pada perangkat tertentu untuk pengalaman pengguna yang lebih baik.

Dengan Elementor, Anda memiliki banyak opsi untuk memastikan gambar responsif di berbagai perangkat. Anda bisa memanfaatkan pengaturan responsif bawaan, menambahkan CSS kustom untuk kontrol lebih lanjut, atau menggunakan gambar sebagai latar belakang yang secara otomatis menyesuaikan ukuran.

Kursus Wordpress Elementor – Selain itu, Anda juga dapat memanfaatkan Lazy Load untuk meningkatkan kinerja halaman dan menggunakan fitur Visibility untuk menyembunyikan gambar pada perangkat tertentu. Semua ini akan membantu Anda menciptakan pengalaman pengguna yang optimal di semua perangkat.