Tutorial Cara Merubah Urutan Baris di Tampilan Mobile

Agu 9, 2021 | Tutorial, Tutorial DIVI Builder

Seperti kita ketahui, website masa kini harus sudah mobile responsive. Video tutorial kali ini akan membahas cara merubah urutan baris agar tampilan website di layar selular tetap terjaga alurnya.

Hal ini sangat penting untuk menjaga tampilan website tetap profesional. Sebab, jika halaman website tampil tidak konsisten atau tidak berurutan, maka akan mengurangi pengalaman para pengunjung website dan juga dapat menurunkan kredibilitas bisnis.

Apalagi ketika kita memberikan jasa pembuatan website, tingkat penyelesaian atau delivery harus dapat berkualitas sebaik mungkin. Oleh karena itu, mari simak penjelasan dan langkah-langkah untuk mengurutkan baris pada sebuah content di website agar tampilan mobile tetap profesional.

Cara Merubah Urutan Baris Pada Tampilan Mobile

Menggunakan Divi builder, ada beberapa cara sebetulnya untuk mengurutkan baris pada tampilan mobile.

Dalam membuat halaman website atau sebuah landing page, biasanya pada tampilan default (laptop / desktop) kita meletakkan kolom teks di sebelah kiri dan kolom gambar di sebelah kanan, atau sebaliknya.

Pada tampilan desktop tentu baik-baik saja, akan tetapi di ponsel jika gambar berada di urutan ke-2 (atau di sebelah kanan pada tampilan desktop) maka posisi gambar akan berada setelah kolom teks.

 

cara design website mobile friendly

Pada gambar di atas, kita dapat lihat tampilam mobil untuk sebuah halaman website. Sebelah kiri sebelum kita rubah urutan barisnya, dan gambar sebelah kanan yang sudah kita ubah urutan barisnya sehingga gambar berada di atas teks.

Sekarang mari kita lihat video tutorial cara merubah urutan baris untuk tampilan mobile dengan menggunakan DIVI Builder.

Video Tutorial Cara Merubah Urutan Baris Pada Tampilan Mobile

Keterangan atau Langkahnya

  1. Klik Row Settings -> Advance -> Custom CSS
  2. Klik pada bidang “Main Element”
  3. Tambahkan kode CSS berikut:

display: flex;
flex-wrap: wrap;

  1. Kllik Column Setting yang paling atas
  2. Klik Advance -> Custom CSS
  3. Pada “Main Element” rubah urutannya pada tampilan mobile dengan menyisipkan kode CSS: order:2;
  4. Tekan tombol ceklis hijau pada pengaturan kolom maka layar setting akan kembali ke depan
  5. Klik setting pada kolom ke-2
  6. Lakukan langkah ke-6 dan sisipkan: order:1;

Pada langkah ke 6 dan 9, pembalikan urutan pada mode seluler terjadi.

Dengan membalikkan urutan, maka website dapat lebih tampil mobile-friendly.

Video Tutorial ini kami ambil sembari menerapkan pada salah satu Client jasa web managed service dan search engine marketing kami, sehingga halaman website pada versi mobile dapat lebih tampil profesional. 

Thanks to Nelson Lee Miller for its lesson @peeayecreative.com.

9 Plugin WordPress Yang Tidak Aman Untuk Anda Gunakan

9 Plugin WordPress Yang Tidak Aman Untuk Anda Gunakan

Baru-baru ini kami mendapatkan laporan bahwa ada sembilan plugin wordpress yang tidak aman untuk Anda gunakan. Anda harus meninjau ulang penggunaan plugin-plugin tersebut jika terpasang di website Anda atau lakukan update sesegera mungkin.Daftar Plugin Wordpress Yang...

Keahlian SEO Specialist Yang Paling Mendasar dan Gajinya

Keahlian SEO Specialist Yang Paling Mendasar dan Gajinya

Ketika semakin banyak bisnis yang sudah 'on-board' pada saluran digital, persaingan terjadi dan keahlian SEO Specialist semakin banyak yang cari. SEO Specialist adalah keahlian khusus terkait optimasi website di mesin pencari. Ini tidak hanya melakukan analisa keyword...

Algoritma Google Terbaru E-A-T Berfokus Pada Kualitas Web

Algoritma Google Terbaru E-A-T Berfokus Pada Kualitas Web

Sejak Juni 2021 hingga akhir Desember 2021 terdapat beberapa algoritma Google terbaru yang dikenal dengan E-A-T yang berfokus pada kualitas website, tidak hanya pada kecepatan website saja. Lantas, apakah E-A-T itu? Algoritma Google Terbaru E-A-T Setelah sebelumnya...

Manfaat Social Media Monitoring Tools untuk Bisnis Anda

Manfaat Social Media Monitoring Tools untuk Bisnis Anda

Keluhan pelanggan dapat menjadi viral ketika pelanggan menceritakan pengalaman negative mereka di media sosial. Social media monitoring tools dapat bermanfaat untuk mencegah hal tersebut terjadi.     Ketika ada pelanggan yang puas atau kecewa, Anda selalu...

Kenapa Website Tidak Terindeks Oleh Google? Apa Sebabnya?

Kenapa Website Tidak Terindeks Oleh Google? Apa Sebabnya?

Untuk Anda yang sedang bertanya-tanya kenapa website tidak terindeks oleh google, mungkin dapat temui jawabannya di sini. Pelajari apa sebabnya dan mulailah lakukan perbaikan, lihat dalam beberapa hari kedepan perubahan yang terjadi. SEO telah menjadi salah satu...

Kualitas Website Mempengaruhi Ranking SEO Website Anda

Kualitas Website Mempengaruhi Ranking SEO Website Anda

Sejak September 2021 kemarin, Google melakukan update besar-besaran pada algoritma mesin pencari mereka yang semakin kompleks. Salah satu perubahaan terbesar itu adalah mengenai kualitas website yang berpengaruh pada ranking SEO. Bagaimana Kualitas Website...

Pin It on Pinterest

Share This