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

Tips Pemasaran Online Untuk Hotel Yang Baru Jadi

Tips Pemasaran Online Untuk Hotel Yang Baru Jadi

Pada umumnya, mereka yang berhasil membangun sebuah penginapan sudah memiliki "jaminan" untuk mengisi omset penjualan kamar. Masalahnya, pembatalan juga dapat terjadi, musim berganti, dan hal-hal dinamis sering terjadi. Oleh karena itu, sejak awal semestinya para...

Optimasi Iklan Online Menghemat Biaya Secara Signifikan

Optimasi Iklan Online Menghemat Biaya Secara Signifikan

Beriklan secara online kini telah menjadi kebutuhan bisnis. Mereka tentu juga pernah atau masih alami biaya iklan yang membengkak karena kurang efektif. Efisiensi dan akurasi telah menjadi prinsip transformasi digital. Untuk itu, kami akan berikan informasi untuk...

Kenapa Website dan S.E.O Semakin Dibutuhkan untuk Branding?

Kenapa Website dan S.E.O Semakin Dibutuhkan untuk Branding?

Tak kenal maka tak sayang, no trust maka no deal, merupakan falsafah yang populer dalam bisnis. Branding bertujuan agar produk atau bisnis dikenal baik oleh para calon pembeli. Di era digital sekarang ini, Website dan S.E.O semakin menempati prioritas untuk mereka...

Pengalaman Menarik Digital Marketing KiosMaya 2023-2024

Pengalaman Menarik Digital Marketing KiosMaya 2023-2024

Sepanjang tahun 2023 hingga tahun 2024 ini, ada beberapa pengalaman menarik yang semoga dapat menambah wawasan para praktisi digital marketing di Indonesia. Beberapa Pengalaman Menarik Digital Marketing KiosMaya Setelah beberapa tahun meneliti grafik di Google Search...

Apa Target Menggunakan SEO Untuk Organik Traffic Saja?

Apa Target Menggunakan SEO Untuk Organik Traffic Saja?

Mungkin Anda tidak jarang mendengar kata SEO. Kepanjangannya search engine optimization, merupakan cara untuk meledakkan traffic dengan menjadikan situs bisa nangkring di halaman dan rangking pertama mesin pencari. Target menggunakan SEO itu sendiri sangat beragam....

Pilih WordPress atau Laravel untuk Website Perusahaan?

Pilih WordPress atau Laravel untuk Website Perusahaan?

Wordpress dan Laravel merupakan platform yang berguna untuk membangun website. Saat ini, pengguna Laravel terus meningkat karena kemampuannya yang melebih Wordpress. Masalahnya, kurang tepatnya pemilihan platform website antara Wordpress atau Laravel dapat...

Pin It on Pinterest

Share This