Membuat Tampilan Responsive Divi 2 Kolom Mobile Phone

Tampilan Responsive Divi ini yang penting..Theme Divi Builder memiliki berbagai jenis tampilan atau layout dengan desain lengkap yang sangat mudah dipakai. Tapi memang sih untuk pengoptimalan tampilan halaman antara versi desktop dan versi mobile phone masih perlu untuk diatur.

Tidak secara otomatis tampilan dari layout divi menjadi tampilan responsive mobile phone (seluler). Untuk kesempatan artikel kali ini, apabila kamu sedang memerlukan informasi mengenai tampilan responsive divi sudah sangat tepat. Baca sampai tuntas biar ngga mengalami kegagalan.

tampilan divi 1 kolom mobile phone

Tampilan Divi Pada Komputer Laptop

Setelah melakukan pengambilan layout melalui plugin layout divi maupun divi den pro, tentunya langkah selanjutnya adalah membuat sebuah halaman, seperti:

  • Halaman Depan
  • Halaman Tentang Kami
  • Halaman Kontak
  • Halaman Blog
  • etc

Silahkan Download 30 Layout Divi Theme Landingpage

Tentunya untuk melakukan pengeditan template harus dengan menggunakan Divi Builder, Pengaturan tampilan divi untuk komputer laptop, tablet dan handphone akan terlihat pada icon View Desktop, View Table, View Phone

Seringkali yang menjadi perhatian dalam pembuatan website dengan divi builder hanya pada tampilan desktop, disinilah kita sering kelupaan untuk melakukan setting untuk tampilan handphone.

Pengaturan besar gambar, ukuran besar font yang dipakai pastinya akan berbeda pada perangkat yang melihatnya, Seperti pada tampilan perangkat laptop tampilan website tentunya juga akan berbeda.

Sangat perlu untuk melakukan penyettingan tata letak themes divi builder untuk ukuran besar gambar gambar yang digunakan maupun pada ukuran besar huruf baik untuk tampilan website melalui perangkat komputer desktop, perangkat table maupun tampilan website melalui smartphone.

Tampilan Responsive Divi

Sangat penting untuk memperhatikan tampilan website di perangkat smartphone, karena kini masyarakat atau penghuni bumi banyak menggunakan internet dan juga melakukan pencarian melalui mobile phone (seluler). Kenyamanan dalam memasuki sebuah website melalui perangkat mobile phone perlu diperhatikan untuk mengurangi scroll website yang panjang di ponsel

Untuk membuat kolom divi tetap terlihat responsive pada perangkat seluler, yang harus kita lakukan adalah membuat tampilan responsive Divi 2 kolom mobile phone dengan menambahkan baris kode pada kustom kode CSS divi.

Cara Membuat Tampilan Kolom Responsive Divi

tampilan responsive divi builder dumetnesia

 

Tampilan Responsive Dekstop, Tablet, Smartphone

Langkah-langkah untuk membuat kolom divi agar menjadi responsive dan juga tidak melanggar ketentuan dari google search console (GSC) untuk layout divi theme website di perangkat seluler:

Video Divi Builder Column

Untuk membuat kolom tampilan mobile phone sudah dipraktek, silahkan lihat video berikut untuk cara membuat tampilan kolom mobile phone divi builder :

  1. Menambahkan kode class ke baris > bagian CSS lanjutan (seperti “tiga kolom)
  2. Menambahkan kode class ke dalam kolom CSS kustom divi
  3. Menambahkan .et_pb_column setelah class
  4. Sesuaikan dengan ukuran yang sesuai untuk tampilan 3 kolom (seperti lebar: 33.33%)
  5. Copy paste kode yang telah disertakan dibawah ini kedalam Divi > Theme Option > Custom CSS

Code CSS Kolom Divi

@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;
}

}

 

Leave a Comment

Your email address will not be published. Required fields are marked *