Cara Membuat Desain Mobile-First dengan Divi

Banyak situs web mendapatkan banyak pengunjung dari perangkat seluler. Ini mengarah pada pertanyaan apakah desain Anda cukup dioptimalkan untuk ukuran layar yang lebih kecil atau tidak. Dengan Divi, desain yang dibuat untuk pengalaman desktop juga menjadi responsif secara instan. Tetapi hanya karena sesuatu yang responsif tidak berarti itu dioptimalkan juga.

Jika seluler adalah sumber pengunjung utama Anda, akan sangat membantu untuk mulai mendesain dan membangun dari perspektif seluler alih-alih desktop. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana melakukannya. Setelah melalui beberapa tip dan trik yang harus Anda ingat, kami juga akan membuat ulang contoh dari awal yang mempertimbangkan tip ini.

Mari kita lakukan!

Pratinjau

Seperti yang disebutkan sebelumnya, kita akan memulai dengan membahas beberapa tips dan trik. Setelah itu, kami akan membuat ulang contoh dari awal yang menggunakan tips ini. Mari kita lihat hasilnya.

Seluler

Desktop

Mendekati

Berlangganan Saluran Youtube Kami

1. Beralih ke Tampilan Seluler Setelah Menambahkan Halaman Baru

Hal pertama yang perlu Anda lakukan, setelah menambahkan halaman baru, segera beralih ke tampilan seluler. Ini akan memungkinkan Anda membuat desain yang berorientasi seluler dan akurat.

2. Aktifkan Opsi Responsif untuk Setiap Elemen Desain & Ubah Nilai Seluler terlebih dahulu

Setelah Anda mulai mendesain desain apa pun yang Anda inginkan, Anda harus mengaktifkan opsi responsif untuk elemen desain. Ini termasuk namun tidak terbatas pada ukuran teks, padding dan margin. Nilai pertama yang akan Anda tambahkan adalah nilai seluler (bukan nilai desktop) untuk memastikan desain dioptimalkan untuk seluler terlebih dahulu.

3. Hapus Ruang Default Antar Kolom & Tambahkan Padding Secara Manual jika Diperlukan

Untuk membuat lebih banyak ruang horizontal, disarankan juga untuk menghapus semua padding kustom default antar kolom. Jika perlu, Anda selalu dapat menambahkan bantalan secara manual ke setiap kolom atau elemen desain dan memilih sendiri seberapa jauh jarak yang Anda inginkan.

4. Tempatkan 2 atau 3 Kolom di Sebelah Satu Sama Lain untuk Membuat Desain Horizontal

Struktur responsif di Divi berorientasi vertikal. Ini berarti bahwa modul dan kolom muncul di bawah satu sama lain. Namun, ini membutuhkan pengguliran yang lebih vertikal. Bergantung pada desain yang Anda kerjakan, menciptakan aliran yang lebih horizontal benar-benar dapat membuat perbedaan.

5. Ubah Tampilan Desktop & Tablet Sepanjang Jalan atau Setelahnya

Meskipun Anda mendesain untuk tujuan yang mengutamakan seluler, penting juga untuk menjaga agar tampilan lain tetap teratur. Opsi responsif yang disertakan dalam setiap elemen desain akan membantu Anda mencapainya. Anda dapat memilih untuk mengubah nilai-nilai ini setelahnya atau selama proses perancangan.

Mari Mulai Membuat Ulang Contoh!

Tambahkan Bagian Baru

Buka halaman baru, alihkan ke tampilan seluler dan tambahkan bagian baru untuk memulai.

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian Anda menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Baris

Tambahkan Konten H2

Tambahkan Modul Teks ke kolom baris Anda dan masukkan beberapa konten judul H2.

Pengaturan Teks H2

Kemudian, buka pengaturan teks judul dan ubah tampilan judul.

• Judul 2 Font: Didact Gothic
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #333333
• Judul 2 Ukuran Teks: 5.5vw (Telepon), 5vw (Tablet), 2vw (Desktop)

Tambahkan Modul Pembagi ke Baris

Visibilitas

Tepat di bawah Modul Teks yang telah Anda tambahkan, lanjutkan dan tambahkan Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #333333

Perekat

Ubah juga pengaturan ukuran.

• Lebar: 48%
• Penyelarasan Modul: Pusat

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang ke baris.

• Warna Latar Belakang: #ffe69e

Warna Latar Belakang Kolom 2

Tambahkan warna latar belakang ke kolom kedua dari baris juga.

• Kolom 2 Warna Latar Belakang: #ffd65b

Penyelarasan

Kemudian, ubah perataan baris.

• Penjajaran Baris: Kiri

Perekat

Buka pengaturan ukuran berikutnya. Di sini, kami ingin menghapus semua ruang default di antara kolom. Kami juga menggunakan lebar khusus untuk kolom agar terlihat bagus di desktop.

• Gunakan Lebar Kustom: Ya
• Satuan: PX
• Lebar Kustom: 700px
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Lanjutkan dengan masuk ke pengaturan spasi dan tambahkan beberapa margin kustom dan nilai padding secara manual.

• Margin Atas: 5vw
• Margin Bawah: 5vw
• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 1 Padding Atas: 10vw (Telepon), 8vw (Tablet), 4vw (Desktop)
• Kolom 1 Padding Bawah: 10vw (Telepon), 8vw (Tablet), 4vw (Desktop)

Berbatasan

Tambahkan beberapa sudut membulat ke baris juga.

• Kanan Atas: 10px
• Kanan Bawah: 10px

Bayangan Kotak

Dan berikan juga bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.16)

CSS khusus

Last but not least, kita akan menempatkan kolom di samping satu sama lain pada ukuran layar yang lebih kecil untuk memastikan kita memanfaatkan sepenuhnya ruang horizontal yang kita miliki. Buka tab lanjutan dan tambahkan satu baris kode CSS ke elemen utama.

display: flex;

Tambahkan Modul Teks ke Kolom 1

Tambahkan Konten H3

Saatnya mulai menambahkan modul! Tambahkan judul Modul Teks ke kolom pertama dan masukkan beberapa konten H3.

Pengaturan Teks H3

Lalu, buka tab desain dan ubah pengaturan teks judul.

• Judul 3 Font: Didact Gothic
• Judul 3 Berat Font: Tebal
• Judul 3 Perataan Teks: Tengah
• Judul 3 Warna Teks: #ee6f49
• Judul 3 Ukuran Teks: 4vw (Telepon), 3vw (Tablet), 1.5vw (Desktop)

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Tambahkan Modul Pembagi berikutnya. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Kemudian, ubah warna pembagi.

• Warna: #ffffff

Perekat

Seiring dengan pengaturan ukuran.

• Berat Pembagi: 4px
• Lebar: 30%
• Penyelarasan Modul: Pusat

Jarak

Tambahkan beberapa margin atas kustom ke modul juga.

• Margin Atas: 4vw (Telepon), 2vw (Tablet), 1.5vw (Telepon)

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul berikutnya dan terakhir yang dibutuhkan pada kolom pertama adalah Modul Tombol. Masukkan beberapa salinan.

Penyelarasan

Lalu buka tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Ubah juga tampilan tombol di pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 3vw (Telepon), 2vw (Tablet), 1.5vw (Desktop)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #ee6f49
• Lebar Batas Tombol: 0px
• Font Tombol: Didact Gothic
• Berat Huruf: Tebal

Tambahkan Modul Gambar ke Kolom 2

Unggah Ikon

Satu-satunya modul yang kita perlukan di kolom 2 adalah Modul Gambar. Anda dapat menggunakan gambar apa pun pilihan Anda, tetapi jika Anda ingin menggunakan ikon yang sama persis dengan yang digunakan dalam contoh ini, Anda dapat membuka Paket Tata Letak Toko Furnitur dan mengunduhnya di akhir posting.

Penyelarasan

Lalu, buka tab desain dan ubah perataan gambar.

• Penjajaran Gambar: Tengah

Baris Klon #2

Setelah selesai memodifikasi baris, Anda dapat melanjutkan dan mengkloningnya.

Ubah Warna Latar Baris

Kita perlu membuat beberapa perubahan pada duplikat ini, dimulai dengan warna latar belakang baris.

• Warna Latar Belakang: #8ee5cf

Hapus Warna Latar Belakang Kolom 2

Lanjutkan dengan menghilangkan warna background kolom 2.

Tambahkan Warna Latar Kolom 1

Kami menambahkan warna latar belakang ke kolom pertama sebagai gantinya.

• Warna Latar Kolom 1: #47e5bd

Ubah Modul di Kolom

Kami juga mengganti kolom untuk modul.

Ubah Ikon di Modul Gambar

Kemudian, ubah ikon di Modul Gambar.

Tambahkan Filter ke Modul Gambar

Dan cocokkan dengan warna latar belakang baris dan kolom baru dengan mengubah rona dalam pengaturan filter.

• Warna: 65 derajat

Ubah Perataan Baris

Ubah perataan baris berikutnya.

• Penjajaran Baris: Kanan

Ubah Batas Baris

Seiring dengan sudut membulat.

• Kiri Atas: 10px
• Kiri Bawah: 10px

Ubah Warna Teks Modul Teks di Kolom 2

Kami juga menggunakan warna teks lain untuk Modul Teks di kolom 2.

• Judul 3 Warna Teks: #7b9710

Ubah Warna Latar Belakang Tombol

Dan kami menggunakan warna yang sama untuk latar belakang tombol.

• Warna Latar Tombol: #7b9710

Klon Kedua Baris

Sekarang kita memiliki kedua sisi baris, kita dapat mengkloning keduanya sebanyak yang kita butuhkan dan menempatkannya secara berurutan.

Ubah Duplikat #1

Ubah Warna Latar Baris

Kita akan mulai dengan mengubah warna latar belakang baris dari duplikat pertama.

• Warna Latar Belakang: #ffc9cf

Ubah Warna Kolom

Kemudian, kita juga akan memodifikasi warna latar belakang kolom 2.

• Kolom 2 Warna Latar Belakang: #ffadb6

Ubah Ikon di Modul Gambar

Ubah ikon di Modul Gambar ke yang lain pilihan Anda.

Tambahkan Filter ke Modul Gambar

Dan ubah rona dalam pengaturan filter agar cocok dengan warna latar belakang baris dan kolom baru.

• Warna: 309deg

Ubah Warna Teks

Kami juga mengubah warna teks.

• Judul 3 Warna Teks: #f862b0

Ubah Warna Latar Belakang Tombol

Dan kami menggunakan warna yang sama untuk latar belakang tombol.

• Warna Latar Tombol: #f862b0

Ubah Duplikat #2

Ubah Warna Latar Baris

Ke duplikat berikutnya dan terakhir! Ubah warna latar belakang baris.

• Warna Latar Belakang: #b2c4ff

Ubah Warna Kolom

Lakukan hal yang sama untuk warna background kolom 1.

• Warna Latar Kolom 1: #9eb4ff

Ubah Ikon di Modul Gambar

Kemudian, ubah ikon yang sedang digunakan.

Tambahkan Filter ke Modul Gambar

Seiring dengan rona dalam pengaturan filter Modul Gambar.

• Warna: 221 derajat

Ubah Warna Teks

Ubah warna teks dari Modul Gambar selanjutnya.

• Judul 3 Warna Teks: #6287f9

Ubah Warna Latar Belakang Tombol

Dan gunakan warna yang sama untuk latar belakang tombol.

• Warna Latar Tombol: #6287f9

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.

Seluler

Desktop

Pikiran Akhir

Jika sumber pengunjung utama Anda berasal dari perangkat seluler, penting untuk mengoptimalkan semuanya untuk ukuran layar tertentu. Dengan Divi, semuanya menjadi langsung responsif. Tetapi hanya karena ada sesuatu yang responsif, tidak berarti itu juga dioptimalkan untuk ukuran layar tertentu. Cara lain untuk mendekati desain untuk ponsel adalah dengan memulai desain Anda dari perspektif mobile-first. Dalam posting ini, kami telah membagikan beberapa tips dan trik tentang cara melakukannya. Setelah itu, kami telah membuat ulang contoh yang sesuai dengan aturan ini dan memungkinkan kami untuk membuat hasil yang menakjubkan. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!