Semua yang perlu Anda ketahui tentang breakpoints yang dapat disesuaikan Divi 5

Bersiaplah untuk meningkatkan cara Anda membangun situs web secara drastis. Divi 5 memiliki fitur baru yang menarik, breakpoints yang dapat disesuaikan, yang memberi Anda kontrol luar biasa atas respons situs Anda. Dengan breakpoint baru yang dapat disesuaikan divi 5, Anda dapat membuat pengalaman mulus di semua perangkat. Apakah Anda merancang untuk tampilan desktop besar atau layar ponsel terkecil, Divi 5 membantu memastikan situs web Anda terlihat sempurna setiap saat.

Dalam posting ini, kami akan membahas semua yang perlu Anda ketahui tentang fitur baru ini dan tunjukkan cara menggunakannya!

Lihat video berikut untuk melihat fitur baru yang sedang beraksi.

Unduh Divi 5 dengan breakpoint yang dapat disesuaikan

Dengan breakpoint yang dapat disesuaikan, Anda sekarang dapat menyempurnakan respons situs web Anda agar lebih cocok dengan ukuran layar. Apakah Anda mendesain desktop ultra-lebar atau layar seluler yang luas, Divi 5 memegang kendali di tangan Anda.

Bisakah saya menggunakan Divi 5 di situs web saya?

Anda dapat menggunakan Divi 5 di situs web Anda, tetapi ketersediaannya tergantung pada kasus penggunaan spesifik Anda. Divi 5 saat ini berada dalam fase alfa publik, yang berarti masih dikembangkan dan disempurnakan secara aktif. Meskipun belum direkomendasikan untuk semua lingkungan produksi, ada skenario khusus di mana Anda dapat mulai menggunakannya tanpa masalah.

Gunakan Divi 5 di lokasi pementasan lokal &

Divi 5 saat ini tersedia untuk lingkungan lokal dan pementasan, memungkinkan pengguna untuk menguji fitur barunya dengan aman tanpa mempengaruhi situs web langsung mereka. Karena Divi 5 masih dalam fase alpha publik, pendekatan ini memastikan bahwa pengguna dapat bereksperimen dengan perbaikan Divi 5, melaporkan bug, dan memberikan umpan balik sambil menjaga stabilitas situs produksi mereka.

Anda dapat menggunakan Divi 5 dengan aman di situs web produksi baru

Divi 5 stabil dan siap meluncurkan situs web baru. Jika Anda mulai dari awal, Anda dapat sepenuhnya memanfaatkan kinerja yang cepat, kerangka kerja modular, dan teknologi tahan masa depan tanpa khawatir tentang masalah kompatibilitas ke belakang. Namun, fase pengujian menyeluruh sangat penting untuk situs yang ada yang mengandalkan integrasi pihak ketiga yang luas sebelum bermigrasi. Pada titik ini, kami masih belum merekomendasikan mengkonversi situs web yang ada ke Divi 5.

Memahami breakpoint yang dapat disesuaikan divi

Breakpoint adalah aspek mendasar dari desain responsif. Mereka bertindak sebagai ambang batas di mana konten situs Anda mengatur ulang dirinya sendiri untuk memastikan pengalaman pengguna yang optimal, apakah seseorang menjelajahi smartphone, tablet, atau desktop.

Breakpoint Divi 5 telah ditingkatkan secara signifikan, menawarkan lebih banyak fleksibilitas dan kontrol daripada versi Divi sebelumnya. Menyesuaikan hingga tujuh breakpoint memungkinkan Anda untuk menyempurnakan respons situs Anda untuk mengakomodasi berbagai perangkat dan ukuran layar.

Apa itu breakpoint?

Breakpoint adalah lebar layar tertentu di mana desain situs web Anda beradaptasi untuk memberikan pengalaman menonton yang optimal di berbagai perangkat. Breakpoints membantu memastikan konten Anda tetap dapat dibaca, menarik secara visual, dan mudah dinavigasi, terlepas dari ukuran layar.

Situs web responsif dirancang menggunakan kueri media CSS, yang memungkinkan gaya yang berbeda diterapkan ketika layar mencapai lebar tertentu. Ketika ukuran layar pengunjung melintasi breakpoint yang ditentukan, situs web secara otomatis menyesuaikan tata letak, font, jarak, atau elemen desain lainnya untuk mempertahankan kegunaan.

Dengan diperkenalkannya lebih banyak breakpoint di Divi 5, Anda dapat membatasi kebutuhan untuk kueri media CSS untuk mendefinisikan breakpoint untuk perangkat lain.

Berapa banyak breakpoint yang harus saya gunakan?

Jumlah breakpoint tergantung pada penggunaan perangkat audiens Anda. Pengguna mengakses situs web pada berbagai ukuran layar, dari smartphone kecil hingga layar desktop ultra-lebar. Secara tradisional, desainer web telah menggunakan tiga breakpoint standar - desktop, tablet, dan seluler - tetapi Divi 5 memperluas kemampuan ini, memungkinkan hingga 7 breakpoint yang dapat disesuaikan untuk fleksibilitas yang lebih besar.

Akankah memungkinkan lebih banyak breakpoint memperlambat situs saya?

Tidak, memungkinkan lebih banyak breakpoint di Divi 5 tidak akan memperlambat situs web Anda. Tidak seperti metode penanganan desain responsif yang lebih lama, kerangka kerja baru Divi 5 dioptimalkan untuk kinerja, memastikan bahwa breakpoint tambahan tidak menambah beban yang tidak perlu ke situs Anda.

Apakah breakpoint diaktifkan di level situs web atau halaman?

Breakpoint dalam Divi 5 diaktifkan dan diterapkan di tingkat situs web, bukan berdasarkan per halaman. Setelah Anda mengaktifkan dan menyesuaikan breakpoint, mereka akan memengaruhi seluruh situs web, memastikan desain yang konsisten dan responsif di semua halaman. Setiap perubahan yang Anda lakukan ke breakpoint akan secara universal menyesuaikan bagaimana situs Anda merespons ukuran layar yang berbeda daripada terbatas pada setiap halaman.

Bagaimana breakpoint yang dapat disesuaikan bekerja di divi

Sistem Divi 5 yang sangat fleksibel dan intuitif sangat cocok untuk mengelola breakpoint, memberi Anda kontrol yang lebih besar atas desain responsif situs web Anda. Tidak seperti versi sebelumnya, Divi 5 memungkinkan Anda untuk menyesuaikan hingga 7 breakpoint, memastikan situs Anda terlihat sempurna di setiap perangkat. Sistem ini dirancang untuk ramah pengguna sambil menawarkan opsi canggih bagi mereka yang membutuhkannya.

Di mana menemukan breakpoints

Dalam Divi 5, breakpoint diintegrasikan ke dalam pengaturan halaman Anda, membuatnya mudah untuk ditemukan dan disesuaikan. Anda dapat mengaksesnya langsung di dalam pembangun visual, memastikan alur kerja yang ramping.

Cara mengaktifkan breakpoints

Buka halaman yang ingin Anda edit dan aktifkan pembangun visual dengan mengklik Edit dengan Divi .

Klik menu Ellipsis (tiga titik) yang terletak di bilah tugas utama pembangun visual.

Di dalam pengaturan, Anda akan menemukan serangkaian sakelar sakelar yang memungkinkan Anda mengaktifkan atau menonaktifkan breakpoint sesuai kebutuhan.

Setelah diaktifkan, setiap breakpoint akan terlihat di bilah tugas, memungkinkan Anda untuk melakukan perubahan di seluruh desain Anda tanpa mengklik kontrol responsif dalam baris atau modul individual untuk menyesuaikan pengaturan.

Haruskah Anda menggunakan breakpoint standar atau milik Anda?

Breakpoint standar Divi 5 dirancang untuk menutupi ukuran layar yang paling umum, termasuk ponsel, tablet, dan desktop. Breakpoint yang telah ditentukan ini lebih dari cukup untuk banyak desainer, karena mereka melayani sebagian besar pengguna dan perangkat.

Namun, ada skenario di mana membuat breakpoint khusus dapat bermanfaat. Misalnya, jika Anda ingin mengakomodasi monitor ultra-lebar, smartphone yang dapat dilipat, atau tablet yang lebih kecil, breakpoint khusus dapat membantu Anda mengubah desain Anda untuk kasus penggunaan ini.

Menggunakan breakpoint khusus di Divi 5

Menyesuaikan breakpoint responsif berguna untuk mengatasi qualks desain atau masalah tampilan konten pada perangkat yang kurang umum atau resolusi layar. Mereka juga dapat membantu meningkatkan kinerja situs web dengan memuat hanya gaya yang diperlukan untuk ukuran layar yang diberikan, mengurangi waktu pemuatan halaman.

Untungnya, Divi 5 membuatnya sangat mudah untuk menyesuaikan breakpoint responsif ini dengan beberapa klik.

Dengan pengaturan perangkat responsif terbuka, atur breakpoint telepon ke lebar yang Anda inginkan, dan kemudian ulangi langkah -langkah untuk perangkat lain. Karena kami ingin membuat situs dapat diakses untuk perangkat yang lebih kecil, kami akan menetapkan nomornya ke 360px untuk ponsel. Setelah Anda menambahkan piksel yang diinginkan, klik tombol Simpan untuk melanjutkan.

Divi 5 akan memberi tahu Anda bahwa Anda akan menyesuaikan breakpoints situs web Anda. Klik tombol Perbarui untuk mengonfirmasi perubahan.

Kami akan menambahkan breakpoint berikut untuk ukuran layar yang tersisa:

Breakpoint ini mencakup berbagai perangkat untuk memastikan situs web Anda mencakup sebagian besar ukuran layar dan kasus penggunaan:

• Telepon: 767px mencakup sebagian besar ukuran layar smartphone, termasuk model lama seperti iPhone 8 atau Samsung G7.
• Telepon Lebar: 860px mencakup sebagian besar layar ponsel dalam mode lansekap, termasuk iPhone 14 Pro (dan di atas) dan perangkat Android modern.
• Tablet: 980px bagus untuk sebagian besar layar tablet dalam mode potret, termasuk semua iPad.
• Tablet Wide: 1024px adalah standar untuk tampilan lanskap di sebagian besar iPad dan tablet Samsung.
• Layar lebar: 1280px adalah lebar yang baik untuk sebagian besar laptop yang lebih kecil (Windows atau MacOS), termasuk MacBook Air, MacBook Pro 13 ″, dan perangkat Windows yang sebanding.
• Ultrawide: 2560px mencakup layar desktop yang lebih besar, seperti laptop MacBook Pro 15 ″ dan 16 ″, iMac, dan monitor definisi tinggi standar.

Menyesuaikan desain responsif Anda di dalam preset

Salah satu aspek Divi 5 yang paling kuat adalah bagaimana breakpoint yang dapat disesuaikan terintegrasi dengan preset dengan mulus. Ini memungkinkan Anda untuk membuat desain yang benar -benar responsif di seluruh situs web Anda dengan upaya minimal. Contoh yang sempurna adalah memodifikasi preset H1 dari situs pemula untuk memastikan semua H1 terlihat sempurna pada setiap ukuran layar.

Mulailah dengan mengklik di mana saja dalam H1 di bagian Pahlawan untuk memunculkan pengaturannya.

Selanjutnya, klik bidang Preset Heading di header modul.

Daftar preset akan muncul. Temukan preset yang memiliki tanda centang biru di sebelahnya.

Arahkan kursor di atas preset aktif untuk mengungkapkan pengaturannya. Klik ikon Pengaturan untuk mengeditnya.

Klik tab Desain dan kemudian sesuaikan ukuran teks heading ke ukuran yang diinginkan.

Buka pengaturan preset dan klik ukuran layar berikutnya di bilah tugas Divi 5 untuk menyesuaikan ukuran heading.

Ulangi langkah -langkah di atas untuk menyesuaikan preset heading untuk ukuran layar yang tersisa. Setelah Anda menyelesaikan ini, klik tombol Simpan Preset .

Saat Anda bertukar breakpoint, perubahan ukuran akan tercermin di preset heading.

Pengeditan Responsif dalam Divi 4 vs Divi 5

Divi selalu menjadi pemimpin dalam desain responsif, tetapi Divi 5 membawanya ke tingkat yang sama sekali baru. Sementara Divi 4 memberikan dasar yang kuat untuk membuat situs web yang responsif, Divi 5 membawa fitur yang membuat pengeditan responsif lebih intuitif, fleksibel, dan kuat dari sebelumnya. Berikut ini lebih dekat bagaimana Divi 5 meningkatkan kemampuan Divi 4.

Transisi yang mudah antara breakpoints

Dalam Divi 4, beralih di antara breakpoint cukup mudah tetapi melibatkan lebih banyak waktu dan tidak semulus transisi yang dapat Anda temukan di Divi 5.

Divi 5 meningkatkan alur kerja ini dengan antarmuka yang lebih halus dan lebih intuitif. Sekarang, Anda dapat langsung beralih di antara breakpoints, mempratinjau desain Anda saat Anda menyesuaikan, tanpa lag. Versi Divi baru ini memungkinkan Anda untuk membuat perubahan desain dengan cepat berdasarkan breakpoint yang Anda lihat. Tidak ada lagi pergantian antara mode atau berantakan konstan. Pengalaman yang mulus ini menghemat waktu dan memastikan desain yang lebih kohesif dan dipoles di setiap breakpoint.

Dari 3 hingga 7 breakpoints

Divi 4 mendukung 3 breakpoint yang berbeda; Ini dapat ditemukan di Divi 5 juga.

• Desktop: 981px dan di atas
• Tablet: <980px
• Mobile: <767px

Sementara breakpoint ini mencakup dasar -dasarnya, mereka terkadang gagal ketika mengakomodasi berbagai perangkat dan ukuran layar yang digunakan oleh audiens modern. Desainer kadang-kadang mungkin memerlukan kueri media CSS untuk menargetkan ukuran layar yang berbeda, terutama untuk monitor ultra-lebar atau perangkat seluler yang lebih kecil.

Divi 5 telah membahas batasan ini dengan memperluas jumlah breakpoint ke 7 opsi yang dapat disesuaikan, membuatnya lebih mudah untuk menargetkan sejumlah besar perangkat.

• Telepon: <767px
• Telepon Lebar: < 860px
• Tablet: <980px
• Tablet Wide: < 1024px
• Desktop: > 981px
• Layar lebar: > 1280px
• Ultra Wide: > 1440px

Peningkatan fleksibilitas ini memungkinkan Anda untuk menyempurnakan desain Anda untuk berbagai perangkat, memastikan situs Anda terlihat sempurna pada segala hal mulai dari smartphone kompak hingga monitor besar dan beresolusi tinggi. Misalnya, Anda sekarang dapat membuat breakpoint tablet khusus dalam mode lansekap atau mengoptimalkan situs Anda untuk layar ultra-lebar yang digunakan dalam pengaturan profesional.

Penskalaan kanvas untuk kontrol penuh

Salah satu fitur baru divi 5 yang paling menarik adalah penskalaan kanvas, yang memberi desainer kontrol yang belum pernah terjadi sebelumnya atas bagaimana situs web mereka muncul di berbagai resolusi.

Seperti inilah penampilan kanvas di Divi 4:

Fitur Rescaling Canvas Divi 5 membuat seluruh pengalaman menjadi lebih intuitif. Dengan hanya beberapa klik, Anda dapat skala kanvas desain untuk mencocokkan resolusi layar tertentu, menunjukkan dengan tepat bagaimana situs Anda akan muncul di perangkat yang berbeda. Fitur ini berguna untuk menguji layar seluler yang lebih kecil atau monitor desktop ultra-lebar, memastikan desain Anda sempurna-melampaui papan.

Divi 5 selamanya termasuk dalam keanggotaan Divi Lifetime Anda

Breakpoint yang dapat disesuaikan Divi 5 memberdayakan desainer untuk membuat situs web yang responsif dengan presisi yang lebih besar. Baik Anda memperbaiki tata letak yang ada atau membangun situs dari awal, alat-alat baru ini memberi Anda fleksibilitas untuk membuat pengalaman sempurna piksel untuk setiap ukuran layar.

Salah satu bagian terbaik dari Divi 5 adalah bahwa itu akan dimasukkan selamanya dalam keanggotaan Divi Anda (tanpa biaya tambahan). Jika Anda meningkatkan ke keanggotaan Divi Lifetime hari ini, Anda akan mendapatkan akses (dan pembaruan) ke Divi 5 dengan biaya satu kali dan mendapat manfaat dari produk yang berkembang ini untuk tahun-tahun mendatang.