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.

Bagaimana Cara UMKM Dapat Berhasil di Saluran Online?

Bagaimana Cara UMKM Dapat Berhasil di Saluran Online?

Banyak sekali jargon untuk UMKM, seperti "UMKM Go Digital" dan UMKM Naik Kelas, akan tetapi ternyata hanya sebatas jargon. Apa yang terjadi adalah semua masuk marketplace yang memancing persaingan tidak sehat untuk ekosistem perekonomian UMKM. Lantas, bagaimana cara...

Cara Jual Lebih Banyak Barang dan Tekan Biaya Secara Cepat

Cara Jual Lebih Banyak Barang dan Tekan Biaya Secara Cepat

Bisnis 'brick and mortar' telah alami penurunan sejak masa pandemi yang membutuhkan cara jual lebih banyak barang yang juga sekaligus dapat menekan biaya operasional. Bagusnya, era transformasi digital berikan peluang bagi bisnis retail mulai dari supermarket hingga...

Potensi Website Berusia Belasan Tahun di Era Digital

Potensi Website Berusia Belasan Tahun di Era Digital

Bagi anda atau perusahaan anda memiliki website yang berusia belasan tahun, ada potensi website yang dapat membuat perusahaan atau bisnis anda menjadi lebih unggul. Ya, dengan beberapa upaya yang tepat anda dapat meningkatkan daya saing di era digital. Seperti kita...

Strategi Pemasaran Produk Harus Libatkan Mesin Pencari

Strategi Pemasaran Produk Harus Libatkan Mesin Pencari

Bisnis saat ini harus melibatkan mesin pencari dalam strategi pemasaran produk mereka agar dapat menembus pasar secara efisien. Dengan 213 juta pengguna internet yang tersebar di seluruh Indonesia, tentu search engine merupakan media promosi yang tidak akan ingin Anda...

Tidak Siap Digital? Siap-siap Bisnis Menjadi Tenggelam

Tidak Siap Digital? Siap-siap Bisnis Menjadi Tenggelam

Walau kini sudah banyak yang melek internet, akan tetapi masih banyak pengusaha di Indonesia yang belum siap digital. Sementara itu, persaingan secara global perlahan merangsek pangsa pasar. Tandanya dapat kita lihat banyaknya perusahaan dari luar Indonesia yang...

Masih Perlukah Platform Periklanan Menyadap Pengguna?

Masih Perlukah Platform Periklanan Menyadap Pengguna?

Mungkin banyak yang sudah mulai merasa bahwa platform periklanan menyadap anda sebagai pengguna internet. Mulai dari apa yang anda ketika bahkan anda bicarakan tanpa menggunakan ponsel pun mereka sadap secara diam-diam. Perasaan tersebut mungkin saja benar, ketika...

Pin It on Pinterest

Share This