Tutorial Cara Mengubah Urutan Baris di Tampilan Mobile

Agu 9, 2021 | Tutorial, Tutorial DIVI Builder

Video Tutorial Cara Mengubah Urutan Baris di Tampilan Mobile

Seperti kita ketahui, website masa kini harus sudah mobile responsive. Video tutorial kali ini akan membahas cara mengubah 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 Mengubah 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 tampilan mobil untuk sebuah halaman website. Sebelah kiri sebelum kita ubah 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 mengubah urutan baris untuk tampilan mobile dengan menggunakan DIVI Builder.

Video Tutorial Cara Mengubah 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” ubah 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.

Masa Depan SEO Terletak di Literasi, Sudah Siap Beradaptasi?

Masa Depan SEO Terletak di Literasi, Sudah Siap Beradaptasi?

SEO sering dianggap sebagai permainan teknis. Banyak orang fokus pada kata kunci, backlink, dan optimasi teknis tanpa mempertimbangkan aspek literasi. Padahal, algoritma mesin pencari semakin canggih dalam memahami konteks pencarian. Literasi digital menjadi faktor...

Kenapa Website Jadul Dapat Merusak Reputasi Bisnis?

Kenapa Website Jadul Dapat Merusak Reputasi Bisnis?

Di era serba digital seperti sekarang, punya website jadul bukan cuma bikin malu, tapi juga bisa merusak reputasi perusahaan. Belum lagi ancaman serangan siber yang kerap mengeksploitasi website yang tidak update. Sekarang ini, Website telah menjadi wajah digital dari...

4 Penyebab Kenapa Website Anda Tidak Mendatangkan Client

4 Penyebab Kenapa Website Anda Tidak Mendatangkan Client

Punya website bisnis tapi tidak ada yang menghubungi? Bisa jadi ada sesuatu yang salah! Banyak bisnis mengira bahwa setelah membuat website, klien akan datang dengan sendirinya. Faktanya, website yang tidak dikelola dengan baik justru bisa jadi penghalang dalam...

Pasar Industri Jasa Pembuatan Website di Indonesia 2025

Pasar Industri Jasa Pembuatan Website di Indonesia 2025

Pasar Industri Jasa Pembuatan Website di Indonesia 2025 akan tumbuh pesat seiring meningkatnya kebutuhan digitalisasi di berbagai sektor bisnis. Perusahaan dari berbagai skala, mulai dari UMKM hingga korporasi besar, berlomba-lomba membangun kehadiran digital mereka...

Jasa SEO Website Profesional Itu Seperti Apa Cirinya?

Jasa SEO Website Profesional Itu Seperti Apa Cirinya?

Jasa SEO website profesional menjadi solusi utama bagi bisnis yang ingin meningkatkan visibilitas online. Di era digital ini, memiliki website saja tidak cukup jika tidak muncul di hasil pencarian mesin pencari seperti Google. Layanan SEO membantu website mendapatkan...

Mengapa Bisnis Grosir Harus Beralih ke Toko Online Grosir

Mengapa Bisnis Grosir Harus Beralih ke Toko Online Grosir

Perubahan besar dalam dunia bisnis terus terjadi, dan sektor grosir tidak luput dari dampaknya. Kehadiran teknologi digital membuat banyak pelaku bisnis grosir mulai berpikir ulang tentang cara mereka menjalankan usaha. Toko online grosir menjadi pilihan strategis...