Daftar Isi Artikel
Cara Mengubah Urutan Kolom Divi Builder Di Tampilan Ponsel – Halo teman-teman! Kali ini kita akan bahas soal cara mengubah urutan kolom di tampilan ponsel menggunakan Divi. Pasti banyak di antara kalian yang punya website dengan tema Divi, dan kadang-kadang, tampilan website di ponsel nggak selalu sesuai dengan yang kita inginkan. Mungkin ada beberapa kolom yang saling tumpang tindih atau urutannya nggak pas, sehingga pengunjung jadi bingung atau malah nggak nyaman saat membuka website di perangkat mobile mereka.
Nah, untungnya Divi punya fitur yang memungkinkan kita untuk mengontrol urutan kolom di tampilan ponsel dengan mudah. Kalau kamu belum tahu caranya, tenang aja, dalam artikel ini aku bakal kasih tahu langkah-langkahnya secara rinci. Jadi, simak terus ya!
Kenapa Urutan Kolom Itu Penting?
Sebelum kita masuk ke cara mengubah urutan kolom di Divi, mari kita bahas dulu kenapa urutan kolom itu penting banget, terutama di tampilan ponsel.
Saat mengakses website di desktop, pengguna biasanya punya lebih banyak ruang untuk melihat konten. Kolom-kolom di halaman website bisa ditata berdampingan tanpa masalah. Tapi, di ponsel, ruang layar sangat terbatas, dan kadang-kadang kolom-kolom ini bisa saling bertumpuk atau bahkan tampil secara acak.
Dengan mengubah urutan kolom di tampilan ponsel, kita bisa memastikan bahwa konten penting atau yang paling relevan tetap terlihat jelas terlebih dahulu, tanpa membuat pengunjung merasa kesulitan menavigasi halaman. Jadi, ini bukan cuma soal tampilan yang cantik, tapi juga soal pengalaman pengguna yang lebih baik.
Mengapa Menggunakan Divi?
Divi adalah salah satu tema WordPress yang sangat populer dan fleksibel. Salah satu keunggulannya adalah kemampuan untuk menyesuaikan tampilan website dengan sangat mudah, baik di desktop maupun di perangkat mobile. Fitur drag-and-drop yang dimilikinya memungkinkan kita untuk membuat layout website yang sesuai dengan kebutuhan tanpa perlu menulis kode.
Divi juga punya banyak opsi untuk pengaturan responsif, yang memungkinkan kamu mengubah tampilan website khusus untuk perangkat mobile. Termasuk di dalamnya, adalah kemampuan untuk mengubah urutan kolom dengan cara yang sangat simpel.
Langkah-Langkah Mengubah Urutan Kolom di Tampilan Ponsel dengan Divi
Sekarang, yuk langsung ke Pengaturan Responsive Divi Builder dengan langkah-langkah mengubah urutan kolom di tampilan ponsel. Langkah-langkah ini sangat mudah dan bisa dilakukan tanpa pengetahuan coding yang mendalam.
1. Masuk ke Divi Builder
Langkah pertama tentu saja masuk ke dashboard WordPress kamu, kemudian pilih halaman atau post yang ingin kamu edit. Setelah itu, klik tombol “Edit with Divi” untuk membuka Divi Builder.
2. Pilih Baris (Row) yang Ingin Diedit
Di Divi Builder, kamu akan melihat berbagai baris dan kolom yang sudah kamu buat. Untuk mengubah urutan kolom, kamu perlu memilih baris (row) yang berisi kolom-kolom tersebut. Klik ikon “Settings” pada baris yang ingin kamu ubah.
3. Akses Pengaturan Responsif
Pada halaman pengaturan baris (row settings), kamu akan melihat beberapa tab di bagian atas. Klik tab Advanced dan kemudian pilih Custom CSS. Tapi tenang dulu, kita nggak perlu menulis kode CSS manual kok.
Di sini, kita akan menggunakan fitur pengaturan responsif Divi Builder, yang memungkinkan kita menyesuaikan tampilan untuk desktop, tablet, dan ponsel. Jadi, kita fokus pada pengaturan tampilan di ponsel dulu.
Cara Mengontrol Urutan Penumpukan Kolom Divi di Ponsel
Langkah #1: Tambahkan 2 Baris CSS di Pengaturan Baris
Langkah pertama yang perlu dilakukan adalah menambahkan beberapa CSS di pengaturan baris Divi. CSS ini digunakan untuk memberi tahu kolom-kolom di dalam baris agar ditampilkan dengan tipe flex. Setelah langkah sederhana ini selesai, kamu sudah setengah jalan untuk mengontrol urutan penumpukan kolom Divi di tampilan ponsel.
Pergi ke Pengaturan Baris > Tab Advanced > Custom CSS. Lalu, tempelkan potongan CSS berikut di bagian Main Element.
display: flex;
flex-wrap: wrap;
Masukan kode seperti pada gambar dibawah
Lihat juga ya Kursus WordPress Divi Builder
Mengatur Urutan Penumpukan Kolom Divi Secara Manual
Langkah #2: Tentukan Nomor Urut untuk Setiap Kolom
Jika kamu merasa langkah #1 mudah, maka kamu beruntung. Langkah terakhir ini bahkan lebih mudah dan sedikit lebih menyenangkan.
Di dalam pengaturan baris, kamu akan melihat daftar kolom-kolom yang ada. Klik ikon pengaturan dan masuk ke Tab Advanced > Custom CSS.
Untuk setiap kolom, kamu perlu menentukan urutan kolom mana yang tampil lebih dulu di tampilan ponsel. Yang perlu kamu lakukan adalah menambahkan kata “order: 1;” atau “order: 2;” dan seterusnya ke setiap kolom. Cukup tulis atau tempelkan kata-kata sederhana itu di bagian Main Element.
5. Simpan Perubahan dan Cek Tampilan
Setelah kamu selesai mengubah urutan kolom, jangan lupa untuk klik tombol Save di bagian bawah pengaturan. Kemudian, pastikan kamu mengecek tampilan website di perangkat ponsel untuk memastikan semuanya terlihat rapi dan sesuai dengan harapan.
Untuk mengecek, kamu bisa menggunakan mode responsif di Divi Builder atau melihat langsung di ponsel kamu. Pastikan urutan kolom sudah benar dan pengunjung bisa menikmati pengalaman browsing yang lebih baik.
Tips Tambahan untuk Tampilan Mobile yang Lebih Baik
Selain mengubah urutan kolom, ada beberapa tips lain yang bisa kamu coba agar tampilan website di ponsel lebih menarik dan mudah digunakan:
1. Gunakan Gambar yang Responsif
Pastikan gambar yang kamu gunakan di halaman web bersifat responsif, artinya bisa menyesuaikan ukuran layar perangkat secara otomatis. Divi sudah mendukung fitur ini, jadi kamu nggak perlu khawatir.
2. Perhatikan Ukuran Font
Pilih ukuran font yang cukup besar untuk dibaca di layar ponsel, tapi jangan terlalu besar juga agar tidak membuat pengunjung harus scroll ke samping. Sesuaikan ukuran font di pengaturan responsif Divi untuk memastikan tampilannya oke di ponsel.
3. Jangan Terlalu Banyak Menggunakan Kolom
Walaupun Divi memungkinkan kita untuk membuat beberapa kolom, terlalu banyak kolom di tampilan ponsel bisa membuat pengunjung bingung. Pastikan kolom-kolom yang ditampilkan sesuai dengan pentingnya konten di halaman tersebut.
4. Gunakan Menu Dropdown atau Hamburger
Jika website kamu memiliki banyak menu atau pilihan, lebih baik menggunakan menu dropdown atau hamburger di tampilan ponsel. Ini akan menghemat ruang layar dan memudahkan pengunjung dalam menavigasi website.
Nah, itu dia cara mengubah urutan kolom di tampilan ponsel menggunakan Divi. Dengan langkah-langkah yang mudah dan cepat, kamu bisa memastikan tampilan website kamu tetap rapi dan profesional di perangkat mobile. Jangan lupa untuk mengecek tampilan website setelah melakukan perubahan, agar pengunjung mendapatkan pengalaman yang terbaik!
Kursus Wordpress Private Di Depok – Dengan mengikuti tips dan trik di artikel ini, kamu bisa lebih maksimal dalam mengelola tampilan website di ponsel, sehingga pengunjung nggak hanya nyaman, tapi juga betah berlama-lama menjelajahi halaman yang kamu buat. Semoga artikel ini bermanfaat dan bisa membantu kamu mengoptimalkan tampilan website di perangkat mobile. Selamat mencoba!
Dengan menggunakan teknik ini, kamu dapat mengatur urutan kolom Divi dengan mudah tanpa harus menulis kode manual. Artikel ini tidak hanya bermanfaat bagi pengguna Divi, tetapi juga membantu agar tampilan website lebih responsif dan ramah mobile.
