Daftar Isi Artikel
Di Divi Builder, tampilan desain Anda dapat disesuaikan untuk berbagai perangkat seperti desktop, tablet, dan ponsel menggunakan pengaturan viewport. Ini memungkinkan Anda untuk membuat tampilan responsif yang optimal untuk pengguna di semua perangkat.
Berikut adalah langkah-langkah untuk memastikan desain Anda responsif di semua perangkat menggunakan Divi Builder:
1. Menggunakan Divi Builder untuk Responsif
Divi Builder sudah memiliki pengaturan responsif bawaan yang memungkinkan Anda menyesuaikan desain untuk perangkat yang berbeda. Anda dapat menyesuaikan elemen di desktop, tablet, dan ponsel dengan mudah.
Langkah-langkah Umum untuk Membuat Responsif di Divi:
- Masuk ke Pengaturan Elemen: Klik elemen yang ingin Anda ubah (misalnya teks, gambar, baris, atau kolom).
- Pilih Tab Desain: Setelah Anda memilih elemen, buka tab desain (Design).
- Periksa Ikon Responsif: Di beberapa pengaturan desain seperti padding, margin, font size, dan lainnya, Anda akan melihat ikon perangkat yang mewakili desktop, tablet, dan ponsel.
- Ikon desktop: Menunjukkan tampilan desktop.
- Ikon tablet: Menunjukkan tampilan tablet.
- Ikon ponsel: Menunjukkan tampilan ponsel.
Klik ikon perangkat tersebut untuk mengubah nilai pengaturan pada perangkat tersebut secara spesifik.
- Sesuaikan Ukuran dan Pengaturan untuk Setiap Perangkat:
- Desktop: Sesuaikan ukuran teks, padding, margin, dan elemen lainnya yang sesuai dengan tampilan desktop.
- Tablet: Sesuaikan elemen-elemen untuk ukuran layar tablet (biasanya antara 768px hingga 1024px).
- Ponsel: Sesuaikan elemen untuk ukuran layar ponsel (biasanya di bawah 768px).
- Pratinjau Perubahan: Setelah Anda membuat perubahan, klik ikon perangkat di bagian bawah untuk melihat bagaimana tampilan desain pada masing-masing perangkat (desktop, tablet, ponsel).
2. Menggunakan Mode Visual Builder
Divi Builder memiliki Visual Builder yang memungkinkan Anda melihat secara langsung desain responsif untuk berbagai perangkat.
- Aktifkan Visual Builder: Di halaman atau pos yang ingin Anda edit, klik Enable Visual Builder.
- Uji Responsivitas: Setelah Visual Builder aktif, Anda bisa melihat tampilan desain di desktop, tablet, atau ponsel dengan memilih ikon perangkat di bagian bawah kiri (ikon desktop, tablet, atau ponsel).
- Edit untuk Setiap Perangkat: Pilih perangkat yang ingin Anda sesuaikan dan lakukan perubahan di elemen desain sesuai kebutuhan.
3. Menggunakan CSS Kustom untuk Responsif
Jika Anda ingin lebih banyak kontrol atas desain responsif Anda, Anda bisa menambahkan CSS kustom untuk menetapkan aturan gaya khusus berdasarkan lebar layar perangkat.
Contoh kode CSS responsif:
/* Untuk layar Desktop */
@media only screen and (min-width: 1024px) {
.custom-class {
font-size: 20px;
}
}
/* Untuk layar Tablet */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.custom-class {
font-size: 18px;
}
}
/* Untuk layar Ponsel */
@media only screen and (max-width: 768px) {
.custom-class {
font-size: 16px;
}
}
Anda bisa menambahkan kode ini di Custom CSS untuk halaman atau elemen tertentu melalui Theme Customizer atau Page Settings.
4. Menggunakan Divi’s Built-in Section, Row, and Module Options
Divi memungkinkan Anda untuk membuat desain responsif untuk berbagai perangkat dengan memilih pengaturan yang berbeda di Section, Row, dan Module.
- Pengaturan Responsif untuk Section/Row/Module: Klik pada elemen seperti Section, Row, atau Module, lalu buka tab Advanced. Di sana Anda dapat menggunakan pengaturan seperti:
- Visibility Options: Anda dapat memilih untuk menyembunyikan elemen tertentu pada perangkat tertentu.
- Custom CSS: Menambahkan CSS khusus untuk setiap perangkat.
Ini memungkinkan Anda menyesuaikan tampilan dan menyembunyikan elemen tertentu di perangkat tertentu jika dibutuhkan.
5. Menggunakan Unit Pengukuran Responsif
Divi juga memungkinkan Anda untuk menggunakan unit pengukuran yang fleksibel seperti persen (%), vw (viewport width), vh (viewport height), dan em untuk memastikan elemen Anda lebih responsif di perangkat yang berbeda.
Misalnya:
- % (persen): Menyesuaikan ukuran elemen dengan persentase relatif terhadap elemen induk.
- vw (viewport width): Ukuran elemen berdasarkan lebar jendela tampilan.
- vh (viewport height): Ukuran elemen berdasarkan tinggi jendela tampilan.
6. Tes Responsif di Berbagai Perangkat
Setelah Anda selesai mengatur desain responsif, pastikan untuk melakukan uji responsivitas di berbagai perangkat untuk memastikan bahwa desainnya tampak baik di desktop, tablet, dan ponsel.
Tips Tes Responsif:
- Gunakan pratinjau responsif di Visual Builder untuk memeriksa hasilnya secara langsung.
- Coba buka situs Anda di berbagai perangkat fisik (desktop, tablet, ponsel) untuk memastikan elemen terlihat dengan benar.
- Anda juga bisa menggunakan alat pengembang (Developer Tools) di browser seperti Chrome untuk mengubah ukuran layar dan memeriksa tampilan responsif.
Dengan Divi Builder, Anda dapat dengan mudah membuat desain yang responsif untuk semua perangkat dengan memanfaatkan fitur viewport dan pengaturan responsif yang ada. Anda dapat menyesuaikan elemen untuk desktop, tablet, dan ponsel secara individual, sehingga memberikan pengalaman pengguna yang optimal di berbagai ukuran layar. Jangan ragu untuk bereksperimen dengan tools untuk riset kata kunci dan alat bantu lainnya, seperti seo audit tools, untuk memastikan bahwa desain responsif Anda juga mendukung kinerja SEO yang baik.
Dengan pendekatan ini, Anda akan bisa membuat situs yang tidak hanya terlihat menarik di semua perangkat tetapi juga berfungsi dengan baik, memberikan pengalaman pengguna yang lebih baik, dan mendukung tujuan SEO Anda.
