SEO EDU Nezzan – Bagaimana cara membuat kolom responsive Divi Mobile Phone? kadang- kadang, walaupun tampilan website di desktop sudah bagus dan kamu anggap oke, disaat dilihat dengan menggunakan layar smartphone. Kolom-kolom yang terlihat rapi di desktop bisa jadi berantakan di tampilan mobile. Nah, untuk memastikan kolom tetap rapi di tampilan tablet maupun mobile phone kamu bisa mengatur ukuran kolom secara responsif.
2 Kolom Responsive Divi Mobile Phone
Tampilan 1 kolom pada mobile seperti pada gambar dibawah:
Untuk bisa membuat kolom responsive pada tampilan mobile phone seperti tampilan website desktop, Langkah pertama adalah mengatur tata letak baris dan kolom. Berapa banyak kolom Divi yang ingin Kamu tampilkan secara berdampingan di setiap masing-masing perangkat.
Kalau pada bagian kolom (Row) menggunakan 4 kolom di Desktop, dan tampilan 2 kolom di Tablet, dan 1 kolom di Handphone atau smartphone! Atau mungkin juga ingin 3 kolom di Desktop dan Tablet, dan 1 kolom di Ponsel. Berikut cara membuat 2 kolom untuk tampilan website handphone.
membuat 2 kolom untuk tampilan website handphone, Berikut Kode Css dari joshhall.co:
@media only screen and (max-width: 980px) {
.two-columns .et_pb_column {
width: 50%!important;
}.three-columns .et_pb_column {
width: 33.33%!important;
}.four-columns .et_pb_column {
width: 25%!important;
}}
[/css]
- Copy Code diatas
- Pada dashboard Pilih Menu Divi Lalu Scrool Kebawah
- Tambahkan kode Class ke Kolom Cusrom CSS
- Setelah Kode di copy, lalu maasukan kedalam kolom area Custom CSS
- Simpan
2 Kolom Divi Mobile Phone
Setelah kode CSS dimasukan kedalam Menu DIVI > Theme Option, sekarang kamu bisa melakukan setting untuk membuat 2 Kolom Responsive Divi Mobile Phone. Lakukan edit ulang halaman yang menggunakan Divi Builder, setelah kamu sudah masuk dan berada dihalaman builder pilihlah row yang memiliki 4 kolom pada tampilan desktop dan ingin membuat 2 kolom mobile phone.
- Pilih row yang akan disetting pada bagian view mobile phone
- Klik Setting Row
- Lalu pilih Tab Advanced
- Pilih CSS ID & Classes
- Pada kolom CSS CLASSES masukan two-columns
- two-columns: untuk membuat 2 kolom Mobile Phone
- three-columns: untuk membuat 3 kolom Mobile Phone
- four-columns: untuk membuat 4 kolom Mobile Phone
Column Divi Responsive Mobile Phone sudah berhasil. Semoga ulasan singkat mengenai bagaimana cara membuat 2 kolom divi responsive tampilan handphone bisa membantu