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.

Manfaat Google Bisnisku Untuk Bisnis Offline dan Online

Manfaat Google Bisnisku Untuk Bisnis Offline dan Online

Banyak sekali manfaat Google Bisnisku atau Google Business Profile bagi bisnis di era digital sekarang ini. Setiap orang selalu melakukan pencarian di Google. Ada 160 juta pengguna mesin pencari di Indonesia, dan Anda tidak ingin melewatkan kesempatan ini bukan?....

Template Design Website Terbaru dari DIVI Elegant Themes

Template Design Website Terbaru dari DIVI Elegant Themes

DIVI Builder merupakan alat pembangunan website dari Elegant Themes yang selalu menghadirkan layout pack atau template design website terbaru yang sangat menarik untuk digunakan di website berbasis CMS Wordpress (self-hosted). Walaupun template, layout pack dari DIVI...

Komponen Dasar Strategi SEO Yang Kuat

Komponen Dasar Strategi SEO Yang Kuat

Menurut sebuah studi baru-baru ini, lebih dari 43% orang menghadapi reaksi balik dalam bisnis mereka. Dan sisanya adalah orang-orang yang telah mempelajari dasar-dasar aura yang terus bergerak. Ketika seluruh dunia tertidur selama pandemi, teknologi dan internet...

3 Metrik SEO Untuk Mengukur Kinerja Content Marketing Anda

3 Metrik SEO Untuk Mengukur Kinerja Content Marketing Anda

Bagaimana Anda bisa membuktikan bahwa konten Anda berhasil? Anda harus memasukkan 3 metrik SEO ini ke dalam pelaporan Anda. Membuktikan ROI untuk SEO tidaklah mudah. Pelajari Metrik SEO Terbaik dan Cara Menggunakannya pada setiap laporan SEO. Ini adalah salah satu...

Brand SERP Harus Dominasi “Orang Juga Bertanya” di Google

Brand SERP Harus Dominasi “Orang Juga Bertanya” di Google

Dominasi Brand SERP harus menjadi prioritas dalam aktivitas online branding bagi para praktisi atau para konsultan digital marketing. Ini karena dalam pencarian Google terkadang hasil penelusuran untuk Brand juga menampilkan hasil untuk "orang lain juga bertanya"...

Renovasi Website atau Redesign Website, Apa Manfaatnya?

Renovasi Website atau Redesign Website, Apa Manfaatnya?

Renovasi website atau desain ulang situs web adalah proses terperinci untuk memperbarui situs Anda, yang mencakup pembaruan konten, penyegaran tata letak, dan peningkatan navigasi untuk konversi dan kinerja situs yang lebih baik. Hampir setiap merek memiliki situs...

Pin It on Pinterest

Share This