Cara Memesan Elemen pada Breakpoint yang Berbeda di Divi 5

Desain responsif membutuhkan lebih dari sekadar tata letak penskalaan, itu juga membutuhkan pengendalian bagaimana tumpukan konten di seluruh perangkat. Desain yang terasa terstruktur di desktop dapat menjadi pesanan yang membingungkan di ponsel, dengan sidebar atau elemen sekunder mendorong konten kunci tidak terlihat. Divi 5 membahas hal ini dengan sistem flexbox baru, yang memperkenalkan struktur kolom responsif prebuilt dan kontrol pemesanan yang tepat.

Dalam posting ini, kita akan melihat mengapa pemesanan ulang elemen penting, bagaimana alat flexbox Divi membuatnya sederhana, dan berjalan melalui langkah -langkah untuk merestrukturisasi tata letak di breakpoint yang berbeda.

Mengapa Anda ingin memesan ulang elemen

Ketika tata letak bergeser dari desktop ke ponsel, pesanan susun tidak selalu mencerminkan pengalaman yang Anda maksudkan. Desain desktop tiga kolom yang seimbang dapat runtuh menjadi tumpukan vertikal di mana kolom kiri selalu lebih dulu, mendorong ajakan bertindak, formulir pendaftaran, atau info kontak jauh di bawah halaman, di mana pengguna mungkin tidak pernah melihatnya.

Berlangganan saluran YouTube kami

Sistem Flexbox Divi 5 memperbaikinya dengan membiarkan Anda memesan ulang elemen secara visual di setiap breakpoint. Anda dapat memindahkan CTA langsung di bawah judul di ponsel, membawa testimonial di atas tabel harga, atau menyoroti info kontak sebelum konten panjang. Alih -alih terjebak dengan logika stacking default browser, Anda memutuskan hierarki. Ini memastikan konten terpenting Anda selalu muncul di tempat yang paling penting.

Bagaimana Flexbox Divi Membuat Pemesanan Penyusunan Penyusunan

Divi 5 memberi Anda kontrol langsung atas bagaimana elemen menumpuk di breakpoints. Anda dapat menggunakan Struktur Kolom Flex Prebuilt untuk mengatur tata letak yang beradaptasi secara alami, kemudian menyempurnakan struktur kolom dan pesanan kolom pada setiap ukuran layar.

Flexbox bertindak seperti wadah brilian yang menyesuaikan berdasarkan ruang. Alih -alih menumpuk konten secara acak, Anda mengontrol pesanan pada setiap perangkat.

Divi 5 juga menangani tata letak bersarang dan kompleks dengan baik. Anda dapat mengubah struktur baris, ukuran kolom, dan pesanan modul di setiap breakpoint tanpa menyalin konten atau pengkodean.

Ini juga secara otomatis mengelola penyelarasan dan penentuan posisi vertikal, membuat konten Anda terlihat bertujuan, sepenuhnya responsif, dan tidak diatur secara acak.

Panduan langkah demi langkah untuk menata ulang responsif di Divi 5

Mari kita lihat bagaimana tepatnya Anda dapat memesan ulang elemen di Divi 5 menggunakan sistem flexbox baru. Langkah -langkah di bawah ini memandu Anda melalui pengaturan struktur kolom dan menyesuaikan pesanan di breakpoint yang berbeda sehingga tata letak Anda tetap jelas dan konsisten di setiap perangkat.

1. Atur tujuh breakpoint kustom Anda

Divi 5 memberi Anda tujuh breakpoint, bukan tiga. Anda dapat mengubah setiap nilai piksel sehingga situs Anda terlihat tepat di perangkat apa pun.

Klik menu Ellipsis di bilah tugas Anda dan temukan sakelar sakelar breakpoint. Masing -masing memiliki rentang default, tetapi Anda dapat mengubah angka -angka ini agar lebih sesuai dengan audiens Anda.

Anda akan melihat telepon (di bawah 767px), telepon lebar (di bawah 860px), tablet (di bawah 980px), lebar tablet (di bawah 1024px), desktop (lebih dari 981px), layar lebar (lebih dari 1280px), dan ultra lebar (lebih dari 1440px).

Setelah Anda menyalakannya, ikon kecil muncul di bilah tugas Anda. Klik ikon apa pun untuk melihat bagaimana situs Anda melihat ukuran layar itu segera.

Alih -alih mengklik setiap ikon dan terbatas dalam pengujian Anda, Anda dapat mengambil tepi kanvas Anda dan menyeretnya ke kiri atau kanan. Desain Anda menyusut atau mengembang saat Anda menarik, menunjukkan bagaimana tata letak Anda berubah pada lebar yang berbeda.

Seret kanvas ke 300px dan saksikan tata letak desktop tiga kolom Anda berubah menjadi satu tumpukan seluler. Tarik kembali ke 1200px dan lihat konten Anda tersebar lagi. Anda tidak perlu mengganti mode pratinjau atau mengubah ukuran jendela browser Anda.

2. Akses Kontrol Flex

Klik ikon Pengaturan dari setiap baris untuk membuka panel Pengaturan di sisi kanan. Arahkan ke tab Desain di bagian atas panel ini. Di bawah menu tata letak, Anda akan menemukan semua kontrol Flexbox Divi 5. Secara default, Flex dipilih di bawah gaya tata letak.

Jika tidak diterapkan pada tata letak Anda yang ada, Anda dapat mengubahnya untuk melenturkan dengan klik.

Gulir ke bawah untuk menemukan bidang arah tata letak. Ini akan menentukan urutan dan cara di mana kolom muncul (berdampingan atau di atas dan di bawah satu sama lain).

Di bawah ini adalah opsi konten yang membenarkan untuk mengendalikan penyelarasan dan distribusi. Sementara itu, opsi Align item muncul tepat di bawah opsi penentuan posisi.

3. Struktur tata letak fine-tune untuk setiap ukuran layar

Kontrol Flexbox Anda sekarang aktif, tetapi tata letak desktop mungkin memerlukan penyesuaian struktural untuk layar yang lebih kecil. Tata letak tiga kolom mungkin bekerja dengan indah di atas desktop tetapi menjadi luar biasa dan penuh sesak di tablet, membutuhkan kisi 2 × 2 sebagai gantinya, bahkan lebih pada perangkat seluler di mana hanya ada ruang untuk satu kisi.

Untungnya, ikon perangkat di kanan atas kontrol Anda memungkinkan Anda melihat tata letak Anda di berbagai layar dan menyempurnakan pengaturan Flexbox untuk setiap breakpoint. Ini memungkinkan Anda menyesuaikan desain sehingga terlihat bagus dan berfungsi dengan baik di setiap perangkat.

Beralih ke breakpoint tablet dan klik tombol Struktur Kolom Ubah. Alih -alih pengaturan saat ini, pilih tata letak simetris 2 × 2. Ini langsung membuat tampilan kurang berlebihan dengan menunjukkan lebih sedikit kartu di setiap baris. Sesuaikan celah vertikal dan horizontal sesuai kebutuhan untuk tampilan yang seimbang. Kemudian pilih kolom CTA, atur kelas kolomnya ke fullwidth di bawah pengaturan ukuran, dan pilih "Grow to Fill."

Versi tablet Anda sekarang menunjukkan dua kartu secara bersamaan, menjaga penampilan yang seragam itu. Tombol ajakan bertindak dengan baik di barisan di bagian bawah, membuatnya menonjol, mirip dengan tata letak desktop Anda. Pembaruan ini membantu menciptakan pengalaman yang lebih bersih dan lebih mengundang yang menghindari nuansa berantakan dari terlalu banyak pilihan yang penuh sesak.

Untuk ponsel, gunakan opsi Ubah Struktur Kolom untuk beralih ke struktur satu kolom. Dalam kontrol Flexbox, atur arah tata letak ke balik kolom. Sesuaikan celah dengan apa yang terlihat terbaik untuk konten Anda.

4. Pesan ulang kolom di breakpoints

Menggunakan nilai pesanan adalah cara yang bagus untuk secara manual memutuskan urutan elemen anak wadah fleksibel Anda (seringkali kolom) di berbagai ukuran layar. Tab pesanan di pengaturan baris memberi setiap kolom angka yang memberi tahu browser, "Tunjukkan kolom ini di posisi 1, yang ini di posisi 2," dan seterusnya. Angka yang lebih rendah muncul lebih dulu, dan angka yang lebih tinggi muncul terakhir. Sederhana seperti itu.

Anda bahkan dapat menggunakan urutan "0" atau angka negatif seperti "-1" untuk memaksa konten spesifik muncul lebih dulu, terlepas dari nilai-nilai lain.

Setiap breakpoint mendukung sistem pemesanannya sendiri, memberi Anda kontrol penuh atas penentuan posisi elemen di seluruh perangkat.

Mari kita lihat contoh praktis: di desktop, pilih Kolom 1 dan atur urutannya ke 1. Pilih Kolom 2 dan atur urutannya ke "2," dan lakukan hal yang sama untuk sisa kolom. Tata letak desktop Anda mengalir secara alami dari kiri ke kanan, diakhiri dengan ajakan untuk bertindak.

Menyesuaikan pesanan di tablet dan ponsel

Sekarang, beralih ke breakpoint tablet menggunakan sakelar perangkat. Dan ubah pesanan kolom:

Atur kolom 6 (ajakan bertindak) ke "3" sehingga muncul di baris tengah. Tinggalkan kolom 1 dan 2 sebagaimana adanya, kolom 3 sebagai 4, dan sisanya seperti yang diinginkan. Pengguna tablet melihat ajakan bertindak Anda segera setelah proposisi nilai, diikuti oleh detail pendukung.

Kemudian, beralih ke ponsel menggunakan sakelar perangkat. Ubah urutan kolom CTA menjadi "3" dan tinggalkan urutan dua kolom pertama. Buat sisa urutan kolom mirip dengan pengaturan tablet.

Urutan sumber yang mendasari konten Anda tetap sama, tetapi CTA bergerak dari posisi terakhir ke yang ketiga tanpa mempengaruhi tata letak desktop. Dengan cara ini, Anda dapat mengontrol bagaimana bagian muncul di breakpoint yang berbeda tanpa menduplikasi atau merestrukturisasi konten Anda.

Kontrol Bagaimana Semuanya Menumpuk dengan Divi 5

Sistem Flexbox baru Divi 5 memberi Anda kontrol yang tepat atas bagaimana tumpukan konten di seluruh perangkat. Dengan tujuh breakpoint yang dapat disesuaikan dan penskalaan kanvas hidup, Anda dapat melihat pratinjau dan menyesuaikan tata letak pada ukuran layar apa pun secara real time.

Alih -alih mengandalkan pesanan susun default browser, Anda memutuskan dengan tepat di mana bilah samping, CTA, dan konten utama muncul. Flexbox memungkinkan Anda untuk mempertahankan hierarki dan kejelasan di setiap perangkat tanpa solusi atau kode tambahan.