7 Praktik Terbaik Divi UX yang Harus Anda Ingat

Saya pikir kita semua dapat menyetujui fakta bahwa Divi sangat serbaguna. Ada begitu banyak kemungkinan untuk menyesuaikan dan mempersonalisasi situs web apa pun yang Anda buat. Jika Anda ingin meningkatkan produktivitas kerja Anda, ini mungkin pos yang ideal untuk Anda. Kami akan membahas 7 praktik terbaik Divi UX yang mungkin Anda kenal atau tidak. 7 tips yang akan saya bagikan adalah beberapa yang saya pribadi gunakan dan manfaatkan saat bekerja dengan Divi setiap hari.

Mari kita lakukan!

1. Menggunakan Animasi Mikro

Praktik terbaik Divi UX pertama yang mungkin ingin Anda ingat adalah menggunakan animasi mikro, bukan yang berlebihan. Dulu ada waktu di mana semakin banyak animasi yang dimiliki situs web, semakin 'lebih disesuaikan' atau 'maju' bagi publik. Namun, masa-masa itu sudah berakhir. Selain terlihat sangat mewah, animasi yang berlebihan tidak berkontribusi pada keseluruhan pengalaman pengguna yang dimiliki orang-orang di situs web Anda. Faktanya, mereka sering dapat mengalihkan pengunjung dari apa yang benar-benar penting. Memilih animasi mikro sebagai gantinya adalah cara yang harus dilakukan. Opsi animasi Divi memungkinkan Anda menyesuaikan kecepatan dan intensitas animasi apa pun yang Anda tambahkan. Kunci untuk membuat animasi mikro adalah menggunakan intensitas animasi yang rendah dengan durasi animasi yang sedikit lebih lama.

Buka Tab Desain dari Elemen Desain

Buka elemen desain apa pun pilihan Anda dan buka tab lanjutan. Di sana, Anda akan menemukan opsi animasi.

Gunakan Intensitas Animasi Dalam Jumlah Kecil

Anda dapat memilih jenis animasi apa pun dan mengurangi intensitas animasi. Semakin rendah Anda pergi, semakin halus animasinya. Dengan meningkatkan durasi animasi, Anda akan memastikan animasi tidak luput dari perhatian.

2. Mengoptimalkan Responsivitas Secara Manual

Salah satu keuntungan terbesar Divi adalah kenyataan bahwa mudah untuk membuat tata letak apa pun yang Anda buat juga responsif. Faktanya, Divi sudah melakukan sebagian besar pekerjaan untuk Anda. Semua yang Anda buat menjadi responsif sejak Anda menambahkannya. Sejak saat itu, satu-satunya yang tersisa untuk dilakukan adalah secara manual membuat perubahan pada elemen desain. Ini termasuk mengubah ukuran teks salinan yang Anda bagikan menurut ukuran layar, misalnya.

Sekarang, baris dan kolom memiliki nilai margin bawaan yang berubah sesuai dengan ukuran layar. Tetapi Anda tidak harus menggunakan nilai default ini. Saya, misalnya, telah menemukan bahwa banyak situs web populer menggunakan lebih sedikit margin kiri dan kanan pada ukuran layar yang lebih kecil. Dengan begitu, Anda dapat memasukkan lebih banyak konten secara horizontal, yang berarti lebih sedikit pengguliran vertikal yang diperlukan.

Margin kiri dan kanan default yang digunakan pada ukuran layar yang lebih kecil adalah 40px. Untuk memanfaatkan seluruh lebar ukuran layar yang lebih kecil, saya sarankan untuk mengganti nilai ini dengan 25px.

Mari kita melalui proses langkah demi langkah.

Ubah Ukuran Baris

Hal pertama yang harus Anda lakukan adalah menghapus semua ruang di antara bagian, baris, dan modul dengan mengaktifkan opsi berikut dalam pengaturan ukuran baris:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Tambahkan Bagian ATAU Baris Padding

Sekarang, kami masih ingin memiliki ruang yang cukup antara bagian dan baris. Anda dapat memilih apakah Anda ingin menambahkan bantalan kustom kiri dan kanan ke baris atau bagian yang sedang Anda kerjakan. Menambahkannya ke baris tidak akan memengaruhi baris lain di bagian tersebut. Namun di sisi lain, menerapkannya ke bagian akan memastikan margin ini tetap sama di seluruh bagian, tidak peduli berapa banyak baris yang Anda tambahkan.

• Padding Kiri: 23vw (Desktop), 30px (Tablet), 25px (Telepon)
• Padding Kanan: 23vw (Desktop), 30px (Tablet), 25px (Ponsel)

Tambahkan Padding Kolom

Ruang antara kolom dan modul juga penting. Anda dapat menyesuaikan nilai-nilai ini sesuai dengan ukuran layar yang berbeda.

• Kolom 1 Padding Kanan: 1vw (Desktop), 0vw (Tablet & Ponsel)
• Kolom 2 Padding Kiri: 1vw (Desktop), 0vw (Tablet & Ponsel)
• Kolom 2 Padding Kanan: 1vw (Desktop), 0vw (Tablet & Ponsel)
• Kolom 3 Padding Kiri: 1vw (Desktop), 0vw (Tablet & Ponsel)

Kurangi Ukuran Teks

Ingin 100% memanfaatkan lebar horizontal yang Anda dapatkan pada ukuran layar yang lebih kecil? Meskipun 13px untuk ukuran teks isi mungkin tampak kecil dari sudut pandang laptop, biasanya itu lebih dari cukup untuk perangkat seluler. Coba lihat ukuran teks isi 13px dari ponsel Anda, dikombinasikan dengan langkah-langkah di atas, dan Anda akan melihat apa yang saya bicarakan!

3. Menggunakan Unit Viewport Alih-alih Piksel

Ini adalah salah satu hal yang telah kami lakukan pada langkah sebelumnya juga. Untuk memastikan situs web Anda tetap responsif di semua ukuran layar desktop, sebaiknya gunakan unit area pandang, bukan piksel. Ini akan memastikan situs web Anda tampak hebat dan persis seperti yang Anda rancang, bahkan pada monitor desktop 27 inci.

Ukuran layar yang lebih kecil, di sisi lain, cenderung tidak berbeda sebanyak layar desktop 15″ vs 27″. Mungkin membantu untuk menggunakan unit viewport saat membuat tumpang tindih vertikal tetapi tetap menggunakan piksel untuk padding/margin kiri dan kanan tidak akan membahayakan.

4. Memperluas Gaya untuk Orientasi Teks

Salah satu hal yang akan segera dilihat orang di situs web Anda, bahkan secara tidak sadar, adalah seberapa konsisten Anda dalam desain yang Anda buat. Ini termasuk, namun tidak terbatas pada, orientasi teks yang Anda gunakan di seluruh halaman Anda. Salah satu praktik terbaik UX Divi adalah menyelesaikan desain dengan memeriksa orientasi teks. Anda pasti dapat menggabungkan orientasi teks yang berbeda dalam satu halaman, jika mereka dipikirkan dan dimainkan dengan baik. Namun, menjadi lebih sulit ketika Anda menggabungkan orientasi teks yang berbeda dalam satu bagian tertentu. Skenario terbaik; Anda menyimpan satu orientasi teks di seluruh halaman Anda. Tetapi jika Anda ingin bereksperimen lebih banyak, cobalah untuk setidaknya mempertahankan satu jenis orientasi teks per bagian. Anda dapat melakukannya hanya dengan melihat semua elemen desain yang berbeda, atau Anda dapat menggunakan salah satu fitur efisiensi Divi yang akan bekerja untuk Anda.

Hanya dalam beberapa langkah, Anda dapat memastikan bahwa Anda menggunakan orientasi dan konsistensi teks yang sama, di seluruh halaman atau bagian Anda.

Mari kita melalui langkah-langkah itu.

Buka Modul Apa Saja Yang Berisi Teks

Buka modul apa pun di halaman Anda yang berisi teks dan buka pengaturan teks.

Klik Kanan Opsi Orientasi Teks

Klik kanan opsi Orientasi Teks yang dapat Anda temukan di pengaturan teks dan pilih opsi 'Perpanjang Gaya'.

Perluas Orientasi Teks Pilihan Di Seluruh Bagian atau Seluruh Halaman

Sekarang, tergantung pada seberapa konsisten Anda menginginkan orientasi teks di seluruh halaman Anda, Anda dapat memilih untuk memperluas orientasi teks pilihan Anda di seluruh tata letak atau bagian tertentu.

5. Beralih Bolak Balik Antara Visual Builder & Mode Wireframe

Salah satu hal hebat tentang Divi's Visual Builder adalah Anda bahkan tidak perlu memilih antara mengedit sesuatu di backend atau frontend. Mengubah antara keduanya membutuhkan waktu kurang dari satu detik. Saya berpendapat bahwa Anda bisa mendapatkan tingkat produktivitas dan ikhtisar terbaik jika Anda menggabungkan keduanya. Terutama jika Anda berurusan dengan banyak tumpang tindih dalam tata letak Anda, beralih ke mode gambar rangka dapat membantu Anda membuat perubahan dengan cepat. Atau, jika Anda ingin menarik dan melepas elemen desain tertentu di tempat lain pada halaman, Anda dapat membuatnya lebih mudah dengan beralih ke mode gambar rangka dan menyeret elemen tertentu tanpa harus menggulir tanpa henti.

Dan tahukah Anda bahwa Anda dapat membuka modal elemen desain dan beralih antara Visual Builder dan Mode Wireframe sambil tetap membuka modal? Ini memungkinkan Anda untuk membuat perubahan di bagian belakang desain Anda dan melihat pengaturan desain baru Anda berlaku kapan pun Anda mau.

6. Tata Letak Impor/Ekspor Langsung di Halaman

Sekarang, kita semua sudah terbiasa dengan tata letak yang dibuat sebelumnya, tata letak yang disimpan, dan Perpustakaan Divi secara umum. Tetapi katakanlah Anda sedang mengerjakan halaman tertentu di host lokal, dan Anda ingin mengunggahnya ke situs web langsung setelah selesai, tanpa melalui kerumitan:

• Menyimpan tata letak ke Perpustakaan Divi Anda
• Pergi ke Perpustakaan Divi Anda dan mengekspor file JSON
• Pergi ke perpustakaan Divi situs web langsung Anda
• Mengunggah file JSON
• Pergi ke halaman situs web langsung Anda
• Mengunggah file JSON dari tata letak yang Anda simpan

Kemudian, Anda cukup menggunakan opsi impor/ekspor yang ada di halaman Anda. Ini akan memungkinkan Anda membuat file JSON tanpa harus mengakses Perpustakaan Divi sama sekali.

Dengan cara yang sama Anda mengekspor tata letak, Anda akan dapat mengimpor tata letak ke halaman baru Anda. Tetapi ketahuilah bahwa begitu Anda memilih pendekatan ini, Anda tidak akan dapat mengimpor tata letak ke Perpustakaan Divi Anda di situs web langsung Anda. Hanya langsung ke halaman.

7. Menggunakan Opsi 'Perkecil' Secara Teratur untuk Menjaga Perspektif

Ini mungkin salah satu fitur Divi UX favorit saya. Saya yakin kita pernah melakukan semuanya sebelumnya; buka tab biasa baru atau jendela penyamaran untuk melihat hasil halaman yang telah kita buat. Dan kemudian, diambil layar cetak seluruh halaman menggunakan ekstensi Chrome atau add-on Firefox. Semua ini untuk memberi Anda pandangan baru tentang tata letak yang sedang Anda kerjakan dan melihat apakah semuanya cocok dengan keseluruhan struktur halaman.

Meskipun saya tetap menyarankan untuk melakukannya sesekali, Anda tidak perlu melakukannya berkali-kali dalam waktu singkat. Sebagai gantinya, gunakan opsi perkecil yang ada di sana, di Visual Builder Anda. Ini tidak hanya akan memberi Anda perspektif yang Anda cari, tetapi juga akan membantu Anda membuat perubahan cepat tanpa harus meninggalkan halaman.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda 7 praktik terbaik Divi yang berbeda yang akan membantu Anda meningkatkan produktivitas saat membuat situs web dengan Divi. Kiat-kiat ini pasti akan berguna saat membuat situs web apa pun! Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Gambar Unggulan oleh aurielaki / shutterstock.com