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.

Apakah Jasa Digital Marketing Untuk Meningkatkan Omset Saja?

Apakah Jasa Digital Marketing Untuk Meningkatkan Omset Saja?

Secara bisnis, memang jasa digital marketing untuk meningkatkan omset penjualan, jika tidak untuk apa? Ini sangat benar. Akan tetapi dengan persaingan bisnis yang hadir di saluran online, tantangan digital marketing semakin meningkat. Siapapun tidak bisa serta merta...

Mau Jasa SEO Bergaransi? Sebaiknya Anda Berhati-hati

Mau Jasa SEO Bergaransi? Sebaiknya Anda Berhati-hati

Jasa SEO bergaransi memang cukup menarik bagi mereka yang awam terhadap digital marketing terutama SEO atau pemasaran organik. Jaminan muncuk di halaman pertama hasil pencarian tentu akan menarik minat banyak orang. Masalahnya, Google sendiri telah memberitahukan...

Cara Identifikasi Momentum Bisnis dari Tren Kata Kunci

Cara Identifikasi Momentum Bisnis dari Tren Kata Kunci

Bisnis setelah pandemi terlihat akan rebounding dari momentum downturn kemarin. Karena kami sering melihat trend dan analytics dari metrik-metrik digital marketing, saat ini kami sedang melihat adanya momentum pasca downturn dan ada issue hangat di 2023. Seperti...

Digital Marketing untuk Data Center di Indonesia

Digital Marketing untuk Data Center di Indonesia

Tahun 2022 ini merupakan momentum untuk data cnter di Indonesia. Untuk memaksimalkan upaya, digital marketing untuk data center sangat perlu dilakukan. Apa Pentingnya Digital Marketing untuk Data Center di Indonesia? Data center di Indonesia terus bertumbuh pesat,...

Berapa Biaya Digital Marketing untuk Bisnis Retail dan B2B?

Berapa Biaya Digital Marketing untuk Bisnis Retail dan B2B?

Setiap bisnis berbeda, demikian dengan biaya digital marketing yang dibutuhkan. Apa yang dapat kita jadikan dasar dalam penerapan anggaran digital marketing merupakan faktor terpenting untuk suksesnya upaya digital marketing perusahaan Anda. Dasar Penerapan Biaya...

Kelebihan SEO Dibanding Iklan Berbayar dan Media Sosial

Kelebihan SEO Dibanding Iklan Berbayar dan Media Sosial

Banyak yang menanyakan apa kelebihan SEO jika dibandingkan dengan iklan berbayar dan pemasran melalui media sosial. Sebetulnya, masing-masing saluran pemasaran digital memiliki kelebihan dan kekurangannya sendiri, demikian SEO (optimasi di mesin pencari). Dalam...

Pin It on Pinterest

Share This