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.

Manfaat Menulis untuk Para Profesional dan Pelaku Usaha

Manfaat Menulis untuk Para Profesional dan Pelaku Usaha

Menulis merupakan kegiatan yang menyelaraskan hati dan pikiran. Banyak sekali manfaat menulis untuk kita manusia. Oleh karena itu, mari ketahui apa manfaat menulis untuk para profesional dan para pelaku usaha, terutama di era digital. Pada era digital yang semakin...

Cara Mengembangkan Bisnis di Era Digital Melalui SEO

Cara Mengembangkan Bisnis di Era Digital Melalui SEO

SEO atau Search Engine Optimization merupakan salah satu cara mengembangkan bisnis di era digital yang semakin umum digunakan oleh banyak perusahaan. SEO sendiri memiliki tujuan untuk mendapatkan pemirsa yang relevan melalui mesin pencari seperti Google dan Bing....

Metode 5W 1H Untuk Meningkatkan Kualitas Konten SEO

Metode 5W 1H Untuk Meningkatkan Kualitas Konten SEO

Metode 5W 1H atau yang juga dikenal sebagai metode jurnalisme adalah teknik yang digunakan untuk mengumpulkan informasi secara sistematis dengan mengajukan enam pertanyaan pokok, yaitu who (siapa), what (apa), where (di mana), when (kapan), why (mengapa), dan how...

Contoh Pengembangan Website Perusahaan di Era Digital

Contoh Pengembangan Website Perusahaan di Era Digital

Corporate web development atau pengembangan website perusahaan berbeda dengan pembangunan website. Pengembangan website perusahaan merupakan penambahan konten dan fungsi pada website tersebut. Artikel ini selain menjelaskan definisi tersebut juga akan berikan contoh...

Pembuat Link Wa Me Gratis dan Sangat Mudah

Pembuat Link Wa Me Gratis dan Sangat Mudah

Untuk Anda yang sering berjualan online baik di medsos, website, dan sarana lainnya, sering memerlukan generator link Wa Me Whatsapp.  Wa Me ini sendiri maksudnya adalah WhatsApp Message alias perpesanan Whatsapp.  Alat ini kami buat untuk memudahkan Anda dalam...

GPT-4 Akan Segera Hadir Dengan Fitur Lebih Canggih

GPT-4 Akan Segera Hadir Dengan Fitur Lebih Canggih

Open A.I yang sebelumnya mengeluarkan GPT (Generative Pre-Trained Transformer) versi 3.5 yang kita kenal dengan ChatGPT, kini mengumumkan akan mengeluarkan GPT-4 dengan fitur yang lebih canggih. GPT-4 Hadir Pertengahan Maret 2023 Antusias tinggi terjadi pada komunitas...

Pin It on Pinterest

Share This