Membuat sistem jarak berbasis celah dengan Divi 5

Jarak yang konsisten adalah dasar dari situs web profesional yang dipoles. Alih -alih mengelola margin pada elemen individu satu per satu, Anda dapat mengandalkan satu sistem yang menjaga tata letak tetap bersih dan seimbang di seluruh situs Anda.

Dengan variabel desain baru Divi 5 dan fitur flexbox, Anda sekarang dapat membangun sistem jarak berbasis celah secara langsung di pembangun visual, tidak diperlukan pengkodean khusus. Mari kita lihat!

Mengapa metode jarak tradisional gagal

Margin dan bantalan tampak cukup sederhana. Tambahkan beberapa ruang di sini, sesuaikan bantalan di sana. Tetapi pendekatan ini bisa dengan mudah menjadi berantakan. Beginilah praktiknya:

Anda mengatur margin 30px pada satu blok teks. Kemudian Anda membutuhkan ruang di sekitar tombol, jadi Anda menambahkan 20px.

Modul lain membutuhkan ruang bernafas, jadi Anda memilih 40px. Setiap keputusan terasa tepat pada saat ini, tetapi Anda sedang membangun rumah kartu.

Beralih ke ponsel, dan semuanya mungkin terlihat tidak seimbang. Nilai piksel yang dipilih dengan cermat tidak diterjemahkan. Jarak Anda terlihat sempurna di desktop, tetapi tidak seimbang dengan ukuran layar yang lebih kecil. Jadi Anda membuat nilai spesifik seluler, lalu nilai tablet.

Sekarang Anda mengelola tiga sistem jarak yang berbeda. Pendekatan split ini membuat mempertahankan ritme visual yang konsisten di seluruh situs Anda sulit.

Bagaimana properti celah membuat jarak sederhana

Properti celah bekerja secara berbeda dari margin tradisional. Anda tidak menerapkan jarak ke setiap elemen secara individual. Sebaliknya, Anda menetapkan aturan jarak pada wadah induk. Wadah menangani jarak antara semua elemen anak secara otomatis.

Dengan Flexbox diaktifkan, Anda mendapatkan dua kontrol celah: horizontal dan vertikal. Atur celah horizontal ke 24px, dan semua elemen anak mendapatkan 24px ruang di antara mereka secara horizontal. Atur celah vertikal ke 15px, dan elemen bertumpuk dapatkan 15px ruang vertikal.

Ini berfungsi untuk konten apa pun di dalam wadah Flexbox. Modul teks, gambar, tombol, pembagi, dan apa pun yang Anda masukkan di sana mendapatkan jarak yang konsisten yang sama. Anda tidak perlu menggali melalui modul individual dan menyesuaikan margin mereka secara terpisah; Properti celah menangani matematika jarak.

Metode tradisional membuat pilihan jarak acak: 10px di sini, 20px di sana, 40px di tempat lain. Nilai -nilai yang tersebar ini menyebabkan ketidakkonsistenan dan membuatnya sulit untuk mengetahui jarak mana yang berlaku. Properti celah menghapus dugaan dengan menggunakan satu aturan yang konsisten untuk semua elemen.

Pendekatan ini masih memiliki keterbatasan. Anda masih perlu mengingat setiap nilai yang Anda gunakan dan menerapkannya secara manual di mana pun Anda membutuhkannya. Anda harus menebak nilai apa yang berfungsi di mana. Setelah Anda mengatur nilai -nilai itu, mengubah pikiran Anda berarti menemukan masing -masing dan menggantinya secara manual, meninggalkan ruang untuk kesalahan dan ketidakkonsistenan.

Sistem jarak berbasis gap dengan flexbox dan variabel desain adalah pendekatan yang jauh lebih baik.

Cara mengatur sistem celah di divi 5

Membangun sistem jarak berbasis celah terdengar kompleks, tetapi Divi 5 membuatnya secara mengejutkan langsung. Anda tidak memerlukan pengetahuan pengkodean atau kerangka kerja eksternal. Visual Builder menangani segalanya melalui variabel desain dan kontrol flexbox. Kami akan memandu Anda melalui setiap langkah, dari membuat variabel jarak Anda hingga menghemat preset yang dapat digunakan kembali.

1. Buat variabel jarak

Divi 5 dapat menyimpan nilai celah di dalam pembangun visual menggunakan variabel desain. Anda membangun sistem jarak satu kali dan menerapkan nilai -nilai itu di mana pun kontrol flexbox muncul, tidak ada fungsi CSS khusus yang diperlukan.

Manajer variabel dapat ditemukan di bilah sisi kiri pembangun visual Anda. Klik ikon itu, lalu buka tab Numbers di mana variabel jarak dapat ditambahkan.

Di sini, Anda akan membuat nilai yang dapat digunakan di seluruh situs alih -alih piksel hardcoded. Beberapa variabel desain tersedia; Kami tidak akan membahasnya di posting ini, tetapi kami memiliki panduan yang sangat baik.

Mulailah dengan unit jarak dasar Anda. Sebagian besar desainer bekerja dengan 8-12px sebagai fondasi mereka, tetapi Anda dapat memilih 4px, 10px, atau apa pun yang sesuai dengan ritme desain Anda. Anda dapat menggunakan unit canggih di sini, selain hanya piksel. Misalnya, kami mulai dengan REM alih -alih piksel (dengan asumsi browser default 1rem = 16px):

• GAP XS: 0.75REM (~ 12px untuk hubungan yang ketat untuk kolom dengan hanya ikon dan teks)
• GAP S: 1.25REM (~ 20px untuk kolom dengan blok teks)
• GAP M: 2REM (~ 32px untuk kotak fitur, kolom layanan)
• GAP L: 3REM (~ 48px untuk bagian konten utama, tata letak bilah samping)

Label ini tidak diperbaiki; Anda dan tim Anda dapat mengganti nama mereka sesuai kebutuhan. Anda juga dapat menambahkan lebih banyak variabel celah. Skala Unit REM dengan pengaturan font browser, sehingga pengunjung yang meningkatkan ukuran teks mendapatkan jarak proporsional. Ini meningkatkan aksesibilitas.

Gunakan klem untuk membuat celah yang dapat diskalakan

Kami juga dapat menggunakan Clamp (). Kami akan menjelaskan secara singkat jika Anda tidak tahu apa itu klem (). Tapi pertama -tama, pertimbangkan untuk menambahkan yang berikut ini ke variabel angka juga:

• Kesenjangan kolom horizontal: klem (16px, 2vw, 32px) (untuk celah horizontal antara kartu, fitur, dll.)
• Kesenjangan kolom vertikal: klem (16px, 1.5VW, 32px) (untuk celah vertikal antara kartu, fitur, dll.)

Clamp () adalah unit CSS yang aman untuk digunakan. Anda memberikan tiga nilai: min, lebih disukai, dan maks. Browser mencoba nilai yang disukai, tetapi jika terlalu kecil, ia menggunakan min, dan jika terlalu besar, ia menggunakan maks.

Misalnya, celah kolom horizontal: klem (16px, 2vw, 32px). Skala GAP dengan lebar layar (2VW = 2% viewport). Ini tidak akan berada di bawah 16px pada layar kecil atau di atas 32px di layar besar. Ini membuat jarak seimbang tanpa breakpoint atau kueri media.

Anda dapat menggunakan nilai apa pun. Kami memilih metode ini karena mudah dipertahankan, beradaptasi untuk berubah, dan menghasilkan hasil yang lebih konsisten.

2. Aktifkan Layout Flexbox di bagian Anda

Bagian baru menggunakan FlexBox secara default. Untuk situs yang lebih lama, konversi bagian dengan mengklik ikon Pengaturan, membuka tab Desain, memilih gaya tata letak di bawah tab Layout, dan memilih "Flex." Lakukan hal yang sama untuk baris dan kolom Anda.

Setelah mengaktifkan Flex, Anda mendapatkan opsi seperti membenarkan konten untuk penyelarasan dan distribusi. Sejajarkan kontrol item memungkinkan Anda mengatur bagaimana item berperilaku ketika ruang habis secara horizontal.

Di sini, Anda dapat melihat kontrol celah, yang memiliki slider horizontal dan vertikal terpisah untuk mengatur jarak antara kolom atau modul dalam satu baris.

3. Terapkan nilai celah menggunakan variabel Anda

Setelah Anda mengatur variabel gap Anda di Variable Manager Divi, menerapkannya pada pengaturan Flexbox Gap menjadi langsung melalui sistem konten dinamis. Arahkan ke pengaturan tata letak Anda dan melayang di atas label di bidang celah horizontal atau vertikal untuk mengungkapkan ikon konten dinamis.

Klik ikon konten dinamis untuk membuka dialog pemilihan variabel. Variabel kesenjangan yang disimpan Anda muncul di menu ini.

Seperti yang mungkin Anda perhatikan, kami menambahkan dua set celah berdasarkan konteks di mana mereka akan digunakan. Mari kita selam lebih dalam untuk memahami mengapa:

Kesenjangan klem: antara kolom fleksibel

Kesenjangan klem Anda akan bekerja di level "wadah" melalui pengaturan Flexbox Divi.

Terapkan celah kolom horizontal [klem (16px, 2vw, 32px)] Ketika Anda memiliki kolom yang disusun berdampingan, seperti tiga kartu layanan dalam satu baris. Setelah dipilih, Divi secara otomatis menerapkannya pada pengaturan GAP. Bidang akan menampilkan nama variabel Anda, mengonfirmasi koneksi. Ini menciptakan jarak horizontal proporsional antara kolom 1, kolom 2, dan kolom 3 ketika arah tata letak diatur sebagai baris.

Terapkan celah kolom vertikal [klem (16px, 1.5VW, 32px)] Ketika arah tata letak Anda diatur ke kolom, menumpuk item secara vertikal. Ini akan spasi item secara proporsional dari atas ke bawah ketika arah tata letak diatur sebagai kolom.

Saat kolom dengan Wrap Direction Baris ke beberapa baris, seperti enam kartu yang disusun dalam tiga kolom per baris, terapkan kedua celah. Gap spasi horizontal item dalam setiap baris, sedangkan celah vertikal ruang baris itu sendiri.

Kesenjangan dasar: konten dalam baris

Kesenjangan dasar Anda mengontrol hubungan antara potongan -potongan konten di dalam setiap kolom. Ketika tajuk diikuti oleh paragraf dan tombol di kolom yang sama, pertimbangkan untuk menerapkan GAP XS (0,75rem) di antara mereka.

Pertimbangkan untuk menggunakan GAP S (1.25REM) untuk grup konten dengan beberapa elemen teks atau celah L (3REM) jika Anda membutuhkan jarak yang signifikan antara dua kolom, terutama jika arah tata letak kolom diatur ke baris.

Keuntungan Variabel Desain

Variabel desain memiliki beberapa manfaat daripada nilai pengetikan secara manual. Karena label dapat berupa kontekstual, mereka menjaga jarak konsisten tanpa menghafal nilai piksel atau REM.

Saat Anda mengubah filosofi jarak, perbarui variabel di variabel Manager untuk memperbarui setiap celah yang digunakan di seluruh situs.

Metode visual ini juga menghindari kesalahan jarak ketika anggota tim memasukkan nilai yang berbeda. Variabel celah menciptakan bahasa umum untuk jarak, menjaga tata letak sejajar dengan standar desain yang Anda tetapkan. Ini sangat membantu pada proyek besar dengan banyak kontributor atau setelah penyerahan klien ketika klien mengedit atau menambahkan halaman.

4. Mengatur kesenjangan responsif

Ponsel memiliki ruang horizontal yang terbatas. Tata letak layanan tiga kolom Anda tampak bagus di desktop, tetapi menjadi sempit dan kaku untuk dibaca di layar telepon 360px.

Divi 5 memberi Anda tujuh breakpoint yang dapat disesuaikan untuk dikerjakan: telepon, lebar telepon, tablet, lebar tablet, desktop, layar lebar, dan sangat lebar. Setiap breakpoint bekerja secara mandiri. Anda dapat mengubah arah tata letak, bertukar variabel celah, atau menyesuaikan penyelarasan pada ponsel tanpa mengacaukan desktop. Ini memungkinkan Anda menargetkan lebar layar yang tepat di mana tata letak Anda perlu diubah.

Beralih ke breakpoint ponsel Anda dan ubah arah tata letak dari "baris" ke "kolom." Bersihkan opsi celah horizontal karena kolom Anda menumpuk secara vertikal alih -alih berjuang untuk ruang horizontal.

Celah vertikal berbasis klem menyusut dan tumbuh secara otomatis saat lebar viewport berubah. Pada layar telepon kecil, 2VW sama dengan sekitar 7px, tetapi klem tidak akan melebihi minimum 16px. Pada layar yang lebih besar, 2VW mungkin berarti 18px, dan pada layar yang lebih besar, 20px.

Jaraknya tumbuh dengan lancar di antara batas -batas ini saat ukuran layar berubah. Tanpa menetapkan nilai yang berbeda secara manual, Anda mendapatkan jarak yang ketat pada jarak seluler dan murah hati di desktop.

Kesenjangan dasar mungkin masih membutuhkan tweak manual per breakpoint. Gap m mungkin terasa terlalu ketat di ponsel. Beralih ke breakpoint seluler Anda dan terapkan celah l alih -alih opsi celah vertikal.

Anda juga dapat membuat variabel spesifik seluler, seperti "Gap Mobile S" atau "Gap Mobile L," dan menerapkannya pada breakpoint telepon dan tablet. Namun, kesenjangan dasar dan penjepit bekerja dengan baik dalam banyak kasus.

5. Simpan konfigurasi Anda sebagai preset

Sistem celah Anda bekerja dengan baik sekarang. Variabel desain memberi Anda kendali atas jarak melalui antarmuka visual yang telah Anda kerjakan. Tetapi menyiapkan konfigurasi FlexBox berulang -ulang menjadi tua dengan cepat. Anda harus menyesuaikan arah tata letak, penyelarasan, dan pengaturan pembungkus. Kemudian Anda menerapkan variabel celah Anda untuk setiap bagian baru. Proses ini memakan waktu.

Preset grup opsi memperbaiki masalah ini. Ini menyimpan pengaturan flexbox lengkap Anda, termasuk arah tata letak, penyelarasan, pembungkus, pembenaran, dan celah horizontal dan vertikal yang merujuk variabel desain Anda.

Setelah Anda mengonfigurasi semua pengaturan FlexBox, arahkan arwah di atas panel gaya tata letak. Anda akan melihat ikon Preset Grup Opsi.

Klik dan pilih “Buat Preset dari Gaya Saat Ini.” Sebutkan berdasarkan apa yang dilakukan tata letak: "Tiga Kotak Kolom," "Layanan Kisi," atau "Tampilan Kartu."

Preset membawa konfigurasi Flexbox ke wadah apa pun. Itu tidak menyalin warna latar belakang, font, atau gaya visual lainnya.

Terapkan preset "tiga kolom" Anda ke barisan apa pun. Secara otomatis mengatur perilaku jarak, penyelarasan, dan pembungkus yang sama. Setiap baris atau kolom menjaga tampilan visualnya saat menggunakan struktur tata letak yang sama.

Anda menghabiskan lebih sedikit waktu untuk menciptakan kembali pengaturan yang sudah Anda sempurnakan. Identitas visual tetap unik untuk setiap bagian. Landasan struktural tetap konsisten di situs Anda. Sistem celah Anda tetap cepat untuk diimplementasikan, dan pola tata letak Anda terbukti dapat digunakan kembali secara efisien.

Dapatkan jarak yang sempurna setiap kali dengan Divi 5

Dengan flexbox dan variabel desain baru divi 5, jarak yang konsisten menjadi mudah. GAP mengontrol tata letak keseimbangan di seluruh perangkat, sementara variabel memastikan pembaruan mencerminkan di seluruh situs Anda dengan satu perubahan.

Alih -alih perbaikan konstan, Anda mendapatkan sistem yang jelas yang bisa Anda percayai. Atur jarak Anda sekali, gunakan kembali di mana -mana, dan fokuslah untuk merancang pengalaman hebat bagi pengunjung Anda.