Responsive Image Divi Builder Untuk Semua Perangkat

73

Untuk membuat gambar responsif di Divi Builder, Anda bisa mengandalkan beberapa fitur dan pengaturan bawaan Divi yang memungkinkan gambar beradaptasi dengan baik di berbagai perangkat seperti desktop, tablet, dan ponsel. Berikut adalah beberapa cara yang bisa Anda gunakan untuk memastikan gambar Anda tampil responsif di semua perangkat:

1. Menggunakan Pengaturan Gambar Bawaan Divi

Divi Builder memiliki pengaturan gambar yang responsif secara otomatis, tetapi ada beberapa penyesuaian yang bisa Anda lakukan untuk memastikan gambar ditampilkan dengan baik di perangkat apa pun.

Langkah-langkah:

1. Tambahkan Modul Gambar:
   • Buka halaman atau post yang ingin Anda edit menggunakan Divi Builder.
   • Tambahkan Image Module dengan memilih + Add New Module dan pilih Image.
2. Unggah Gambar:
   • Setelah memilih modul gambar, unggah gambar yang ingin Anda tampilkan di halaman.
3. Pengaturan Responsif:
   • Secara default, gambar di Divi akan menyesuaikan lebar dan tinggi sesuai ukuran layar perangkat. Namun, Anda bisa menyesuaikan gambar lebih lanjut menggunakan pengaturan responsif Divi.
4. Uji Responsivitas:
   • Klik ikon perangkat (Desktop, Tablet, dan Mobile) yang ada di bagian bawah Visual Builder untuk memeriksa tampilan gambar pada berbagai perangkat.

2. Menambahkan CSS Responsif untuk Gambar

Jika Anda ingin lebih banyak kontrol atas gambar responsif Divi, Anda bisa menambahkan kode CSS responsif khusus untuk menyesuaikan ukuran gambar berdasarkan perangkat.

Contoh CSS Responsif untuk Gambar:

/* Untuk desktop */
@media only screen and (min-width: 1024px) {
.custom-image-class img {
width: 100%; /* Gambar akan mengambil 100% 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 untuk ponsel */
height: auto;
}
}

Penjelasan:

• Pada desktop (lebih dari 1024px), gambar akan menggunakan lebar 100% dari kontainer induknya.
• Pada tablet (antara 768px dan 1024px), gambar akan menggunakan lebar 90% dari kontainer.
• Pada ponsel (di bawah 768px), gambar akan menggunakan lebar 80% dari kontainer.
• height: auto; menjaga agar rasio aspek gambar tetap terjaga, meskipun ukurannya berubah.

Cara Menambahkan CSS di Divi:

1. Buka halaman atau post yang ingin Anda edit menggunakan Divi Builder.
2. Klik pengaturan halaman atau modul.
3. Pilih tab Advanced.
4. Pada bagian Custom CSS, tambahkan kode CSS responsif yang telah Anda buat di atas.

3. Menggunakan Gambar dengan Background untuk Responsivitas

Alternatif lainnya adalah menggunakan gambar sebagai background di sebuah section, row, atau column. Ini akan memastikan gambar responsif secara otomatis saat elemen diubah ukurannya di berbagai perangkat.

Langkah-langkah Menggunakan Background Gambar:

1. Pilih Section atau Row:
   • Pilih section atau row yang ingin Anda beri gambar latar belakang.
2. Pilih Gambar Background:
   • Di pengaturan section atau row, buka tab Background.
   • Pilih Image dan unggah gambar yang ingin digunakan sebagai latar belakang.
3. Pengaturan Responsif:
   • Pilih opsi Background Image yang responsif. Divi otomatis akan mengatur gambar untuk menyesuaikan ukuran layar perangkat.
4. Uji Responsivitas:
   • Setelah menambahkan gambar, klik ikon perangkat (Desktop, Tablet, Mobile) untuk memeriksa bagaimana gambar latar belakang ditampilkan pada berbagai perangkat.

4. Menggunakan Fitur “Visibility” untuk Menyembunyikan Gambar di Perangkat Tertentu

Divi memungkinkan Anda untuk menyembunyikan gambar pada perangkat tertentu jika Anda merasa gambar tersebut tidak tampil dengan baik pada perangkat tersebut.

Langkah-langkah:

1. Pilih Modul Gambar:
   • Pilih modul gambar yang ingin Anda sesuaikan.
2. Pengaturan Visibility:
   • Buka tab Advanced.
   • Pilih opsi Visibility.
   • Pilih perangkat mana yang ingin Anda sembunyikan gambar ini. Anda bisa memilih untuk menyembunyikan gambar di desktop, tablet, atau ponsel.

   Misalnya, jika gambar terlalu besar di ponsel, Anda dapat memilih untuk menyembunyikan gambar tersebut di perangkat ponsel.

5. Menambahkan Gambar dengan Ukuran yang Berbeda untuk Perangkat yang Berbeda

Jika Anda ingin menggunakan gambar yang berbeda untuk perangkat tertentu (misalnya gambar yang lebih kecil untuk ponsel), Anda bisa mengunggah gambar berbeda di setiap perangkat menggunakan pengaturan responsif Divi.

Langkah-langkah:

1. Pilih Modul Gambar:
   • Pilih modul gambar dan unggah gambar yang sesuai untuk perangkat desktop.
2. Pengaturan Responsif untuk Tablet dan Ponsel:
   • Klik ikon perangkat di pengaturan gambar.
   • Pilih gambar yang berbeda untuk tablet dan ponsel, pastikan gambar yang lebih kecil diunggah untuk perangkat ponsel agar lebih ringan dan lebih cepat dimuat.

6. Menambahkan Gambar dengan Ukuran yang Fleksibel Menggunakan CSS

Jika Anda ingin memastikan gambar memiliki ukuran fleksibel di berbagai perangkat, Anda bisa menambahkan CSS khusus agar gambar mengisi kontainer secara dinamis.

Contoh CSS untuk Gambar Fleksibel:

/* Gambar fleksibel di seluruh perangkat */
.custom-image-class img {
width: 100%;
height: auto;
}

Penjelasan:

• width: 100% membuat gambar mengisi seluruh lebar kontainer induknya.
• height: auto; menjaga rasio aspek gambar tetap terjaga saat gambar disesuaikan ukurannya.

7. Menggunakan Gambar dengan Fitur Lazy Load

Divi mendukung lazy loading untuk gambar, yang memungkinkan gambar hanya dimuat saat elemen tersebut muncul di layar. Ini membantu meningkatkan kecepatan pemuatan halaman dan mengurangi beban gambar untuk perangkat dengan bandwidth terbatas.

Mengaktifkan Lazy Load di Divi:

1. Pergi ke Divi > Theme Options.
2. Di tab Builder, pilih Advanced dan aktifkan opsi Lazy Load Images.
3. Dengan ini, gambar hanya akan dimuat saat pengguna menggulir ke bawah halaman, yang membuat gambar responsif terhadap ukuran layar dan lebih cepat dimuat.

Dengan menggunakan Divi Builder, Anda memiliki banyak opsi untuk memastikan gambar responsif di berbagai perangkat. Anda dapat menyesuaikan gambar dengan pengaturan responsif Divi, menambahkan CSS kustom untuk kontrol lebih lanjut, atau menggunakan gambar sebagai background yang responsif secara otomatis. Jangan lupa untuk menguji tampilan gambar di berbagai perangkat untuk memastikan pengalaman pengguna yang optimal.

Kursus Wordpress – Jika Anda ingin mengoptimalkan kecepatan situs, pertimbangkan untuk menggunakan gambar dengan ukuran yang sesuai untuk perangkat tertentu dan mengaktifkan fitur lazy load untuk memuat gambar secara efisien.