5 Tips Untuk Menavigasi Antarmuka Divi 5 Seperti Profesional

Dengan dirilisnya Public Alpha Divi 5, pengguna kini dapat menjelajahi peningkatan kuat yang terjadi di balik layar di Elegant Themes. Divi 5 adalah pembaruan besar yang menawarkan fondasi yang diperbarui untuk meningkatkan kecepatan, stabilitas, dan skalabilitas. Baik Anda seorang profesional berpengalaman atau baru memulai Divi, Visual Builder baru ini akan memungkinkan Anda membangun situs web dengan lebih efisien, dengan langkah lebih sedikit, dan waktu muat lebih cepat. Terlibatlah dalam pembaruan baru dari Tema Elegan ini dan jelajahi seperti seorang profesional.

Temukan lebih lanjut tentang Divi 5 Public Alpha dan cara mengunduhnya.

Unduh Divi 5 Public Alpha

5 Tips Menguasai Antarmuka Divi 5

Menavigasi antarmuka Divi 5 bisa menjadi hal yang menarik bagi pengguna baru dan berpengalaman. Antarmuka yang diperbarui memberikan pendekatan baru untuk pembuatan situs web dengan desain modern dan fungsionalitas yang ditingkatkan. Berikut beberapa tip yang kami bagikan untuk membantu Anda membiasakan diri dengan antarmuka:

1. Akses Elemen dengan Cepat Melalui Tampilan Lapisan

Panel Lapisan bukanlah hal baru di Divi 5. Kami memiliki Tampilan Lapisan di Divi 4. Namun, panel ini telah diberikan UI yang ditingkatkan dengan akses yang lebih mudah di sidebar kiri. Ini juga merupakan salah satu panel utama yang dapat dipasang ke dok yang ingin Anda lihat selama pembuatan. Ini adalah pengubah permainan dalam mengelola tata letak yang kompleks, terutama ketika elemen tumpang tindih atau sulit untuk dipilih. Hal ini juga berguna untuk mencari/memfilter berdasarkan elemen berbeda yang Anda cari dengan cepat menemukan banyak elemen di halaman besar.

Buka Panel Lapisan di sebelah kiri layar Anda untuk melihat semua elemen dalam tata letak Anda, terlepas dari posisi atau visibilitasnya di kanvas. Anda dapat memilih lapisan mana pun langsung dari sana, meskipun tersembunyi di balik modul atau bagian lain.

Kiat Pro

Selalu pertahankan tampilan lapisan terlihat sebagai salah satu panel yang dipasang ke dok. Ini terlalu berguna dan nyaman untuk diabaikan.

Contoh Praktis

Katakanlah Anda ingin memperbarui semua tombol CTA di halaman Anda dengan konten baru. Di Divi 5, Anda dapat menggunakan panel lapisan untuk mencari elemen (tombol) yang Anda inginkan agar semuanya terlihat. Kemudian, dengan satu klik pada setiap tombol, Anda dapat memperbarui pengaturan di panel pengaturan, yang akan segera muncul. Alur kerja yang mulus ini merupakan terobosan baru dalam menangani desain yang kompleks dan banyak konten.

2. Mempercepat Pengeditan dengan Panel Dockable dan Sekali Klik

Panel Divi 5 yang dapat dipasang ke dok dan fitur pengeditan sekali klik memungkinkan Anda membiarkan beberapa panel pengaturan tetap terbuka sambil membuat perubahan cepat dengan satu klik. Hal ini memungkinkan penyesuaian cepat dan navigasi modul lebih lancar tanpa membuka dan menutup panel berulang kali.

Kiat Pro

Letakkan panel yang relevan di sisi layar Anda untuk akses cepat, terutama saat mengerjakan beberapa bagian atau modul secara bersamaan. Ini mengurangi jumlah klik yang diperlukan dan mempercepat alur kerja Anda.

Contoh Praktis

Melanjutkan contoh di tip pertama kami, Anda perlu menyesuaikan teks tombol semua modul. Dengan menyatukan kedua lapisan dan panel tombol di sisi yang sama, Anda dapat dengan mudah beralih di antara keduanya untuk pengeditan cepat dengan satu klik, sehingga Anda tidak perlu repot membuka kembali panel setiap kali Anda perlu melakukan penyesuaian atau harus memindahkan kursor dari satu panel. ujung layar ke layar lainnya. Pengaturan ini ideal ketika mengerjakan beberapa bagian yang memerlukan pembaruan.

3. Sederhanakan Navigasi dengan Panel Pengaturan Breadcrumbs

Breadcrumbs di panel pengaturan adalah fitur unik di Divi 5. Breadcrumbs memungkinkan pengguna menavigasi ke salah satu elemen induk dari elemen anak di Divi langsung dari panel pengaturan. Elemen induk pada dasarnya adalah wadah elemen anak. Berikut adalah ilustrasi sederhana struktur induk dan anak elemen Divi.

Bahkan modul memiliki elemen turunan (seperti akordeon atau formulir kontak), dan bagian memiliki “Halaman” sebagai induknya, yang membuat remah roti menjadi lebih berguna. Sebelumnya, di Divi 4, Anda harus mengandalkan tampilan lapisan atau mencoba menemukan elemen induk dengan mengklik di dalam pembuatnya.

Saat Anda membuka pengaturan untuk modul apa pun di Divi 5, jejak remah roti muncul di bagian atas panel pengaturan. Jejak ini menunjukkan lokasi Anda saat ini dan memungkinkan Anda kembali ke elemen induk dengan satu klik. Di bawah ini adalah contoh remah roti saat item akordeon dipilih. Anda akan melihat “Accordion” sebagai salah satu tautan di menu runut tautan karena merupakan induk langsung dari item akordeon yang dipilih.

Breadcrumbs sangat berguna saat mendesain formulir kontak atau CTA yang menggunakan beberapa elemen induk untuk membuat satu desain. Setelah Anda mendesain modul, Anda dapat dengan mudah melompat ke elemen kolom atau baris untuk menyesuaikan desainnya.

Contoh Praktis

Katakanlah Anda sedang mendesain formulir kontak dan ingin memasukkan baris dan bagian dalam desain Anda. Anda dapat membuat perubahan dan menggunakan runut tautan untuk mengakses elemen induk yang Anda perlukan—semuanya tanpa harus menutup panel.

4. Desain Responsif yang Mudah dengan Penskalaan Kanvas

Di Divi 5, Anda dapat menskalakan kanvas secara real-time untuk menyimulasikan tampilan desain Anda di perangkat seluler, tablet, dan desktop. Alat ini memungkinkan Anda mengubah ukuran kanvas secara visual tanpa meninggalkan pembuatnya, artinya Anda tidak perlu lagi beralih ke mode pratinjau atau mengubah ukuran jendela browser secara manual. Pembuat Divi 5 secara otomatis beradaptasi saat Anda menskalakan kanvas untuk menampilkan perubahan pada ukuran perangkat tertentu, sehingga lebih mudah untuk menyempurnakan desain responsif.

Kiat Pro

Gunakan Canvas Scaling untuk memastikan desain seluler Anda terlihat sempurna. Sesuaikan padding, font, dan perataan saat dalam tampilan seluler sehingga tata letak Anda berfungsi dengan lancar di layar yang lebih kecil.

Contoh Praktis

Setelah melakukan penyesuaian pada teks, Anda sekarang perlu memastikan desainnya terlihat bagus di perangkat seluler. Dengan menggunakan Canvas Scaling, Anda dapat dengan mudah menyesuaikan tata letak tampilan seluler dan tablet tanpa beralih antar perangkat atau layar yang berbeda.

Untuk lebih lanjut, lihat cara menguasai pengeditan responsif di Divi 5.

5. Menyederhanakan Lapisan Interaksi Berbeda Pada Mode Tampilan Berbeda

Divi 5 menyederhanakan pengelolaan efek hover, elemen lengket, dan desain responsif. Di Divi 4, Anda harus mengaktifkan pengaturan ini untuk setiap elemen secara manual dan sering kali beralih di antara panel yang berbeda, sehingga memakan waktu lama untuk menerapkan dan melihat pratinjau efek. Divi 5 menyederhanakan proses ini dengan membuat lapisan interaksi tersedia langsung dalam panel pengaturan yang sama, mengurangi jumlah langkah dan klik yang diperlukan untuk menyempurnakan desain Anda.

Cara Kerjanya

Di Divi 5, opsi desain untuk status hover, stick, dan responsif dibangun langsung ke panel pengaturan untuk setiap modul. Anda dapat dengan cepat beralih antara status default, hover, dan sticky dengan mengklik tab dalam pengaturan modul. Antarmuka intuitif ini memungkinkan Anda menerapkan efek desain—seperti animasi hover atau perilaku melekat—tanpa menavigasi menu yang berbeda atau mengkodekannya secara manual.

Kiat Pro

Beralih antara mode hover dan tempel untuk melihat pratinjau bagaimana elemen desain Anda akan berperilaku di seluruh perangkat dan selama interaksi. Divi 5 memudahkan untuk melihat efek secara real time dan menyesuaikannya dengan cepat. Sebelumnya, di Divi 4, Anda harus menerapkan perubahan ke setiap fitur, sehingga memakan waktu.

Contoh Praktis

Kami telah menambahkan tombol untuk konsultasi di beranda kami. Dengan lapisan interaksi Divi 5 yang disederhanakan, Anda dapat beralih antara pengaturan responsif, hover, dan status tempel langsung di panel pengaturan yang sama, memastikan setiap elemen berperilaku sempurna di seluruh perangkat. Kita akan mulai dengan mengubah warna latar belakang tombol beranda dan memeriksa perilakunya pada pengaturan responsif.

Kami akan menindaklanjutinya dengan masuk ke mode hover, mengubah warna latar belakang tombol, dan kembali ke mode desktop setelah melakukan perubahan. Ini akan menunjukkan bahwa tombol di versi desktop akan memiliki warna aslinya (hitam) sebelum kursor digerakkan ke arahnya.

Terakhir, kita akan mengaktifkan mode tempel sebelum memeriksa perilaku tombol dalam mode tempel. Ini memungkinkan Anda dengan cepat menerapkan dan melihat pratinjau efek sambil menggulir tampilan yang berbeda tanpa meninggalkan pembuatnya atau mengaktifkan pengaturan terpisah.

Pelajari lebih lanjut tentang bagaimana Divi 5 menyederhanakan proses desain di sini.

Menavigasi Divi 5 Seperti Profesional

Dengan menguasai fitur-fitur penting antarmuka Divi 5 ini, Anda dapat menavigasi desain Anda dengan lebih efisien dan menghindari frustrasi umum yang dapat memperlambat alur kerja Anda. Baik menggunakan Panel Lapisan untuk mengelola elemen yang tumpang tindih atau memanfaatkan Pengeditan Sekali Klik dan Penskalaan Kanvas untuk desain responsif, tips berikut akan membantu Anda memaksimalkan Divi 5.

Mulailah bereksperimen dengan alat-alat ini di Divi 5 Public Alpha dan bawa desain Anda ke level berikutnya. Untuk tip dan sumber daya lebih lanjut tentang memulai Divi 5, lihat ikhtisar antarmuka lengkap kami dan postingan blog lainnya.

Unduh Divi 5 Public Alpha