Membuat sistem ukuran dan jarak dengan variabel desain Divi 5

Divi 5 memberi Anda cara terstruktur untuk mendefinisikan, mengelola, dan menggunakan kembali ukuran dan penegasan keputusan di seluruh situs Anda. Menggunakan variabel dan preset desain, Anda dapat membuat sistem desain yang dapat diskalakan yang mudah dipelihara, menyesuaikan, dan mereplikasi.

Dalam posting ini, kami akan menunjukkan cara berpikir dalam sistem, dan kami akan memandu Anda dengan membangun sistem ukuran dan jarak yang komprehensif.

Divi 5 siap digunakan di situs baru yang Anda buat, tetapi disarankan agar Anda menunda pada migrasi situs yang ada (untuk saat ini).

Mengapa menggunakan sistem ukuran dan jarak?

Sebagian besar pengguna Divi menginginkan konsistensi dalam tata letak, margin, dan tipografi. Tetapi sedikit yang meluangkan waktu untuk menentukan standar -standar ini sejak dini. Atau jika Anda melakukannya, Anda mungkin melakukannya melalui tema anak yang sangat bergaya. Sekarang, Anda bisa:

Berlangganan saluran YouTube kami

1. Tentukan variabel angka sekali (seperti 16px atau klem (16px, 4vw, 48px))
2. Tetapkan preset modul/elemen
3. Atau preset grup opsi (seperti jarak atau ukuran)
4. Perbarui variabel nanti dan lihat perubahan yang dipantulkan di seluruh situs
5. Gunakan lebih sedikit CSS secara keseluruhan untuk halaman yang lebih ramping

Dengan pembangun situs lainnya, desainer cenderung bersandar pada kerangka kerja CSS untuk menerapkan jarak dan ukuran yang konsisten saat menggunakan sistem yang dapat mereka ambil dari proyek ke proyek. Dengan Divi 5, Anda dapat membuat "kerangka desain" Anda sendiri yang berfungsi dalam divi UI menggunakan variabel desain Divi tanpa perlu menyentuh satu baris kode.

Ukuran elemen, bantalan, dan margin

Setiap elemen web memiliki tiga komponen yang mempengaruhi jarak dan ukuran keseluruhan:

• Ukuran elemen : Ukuran konten inti dari suatu elemen, ditentukan oleh lebar dan tinggi.
• Padding : Ruang ditambahkan di dalam elemen, meningkatkan area yang dapat diklik dan ukuran visual.
• Margin : Ruang ditambahkan di luar elemen, mendorongnya menjauh dari elemen lain.

Contoh praktis untuk elemen divi

Secara umum, ini adalah bagaimana Anda dapat mengharapkan untuk menggunakan padding dan margin di Divi:

• Bagian biasanya memiliki bantalan atas dan bawah (bukan margin) untuk membuat jarak vertikal dalam satu halaman.
• Baris sering mendapat manfaat dari bantalan vertikal, tetapi sebaliknya membiarkan konten mengisinya.
• Kolom terutama fokus pada margin yang diterapkan untuk membuat celah kolom.
• Modul biasanya menggunakan margin bawah untuk memisahkan elemen yang ditumpuk dengan jelas, tetapi jumlah margin tergantung pada pengelompokan visual.

Nilai Jarak Default Divi

Pemula untuk desain web yang menggunakan Divi mungkin bahkan tidak menyadari bahwa Divi membuat beberapa keputusan jarak untuk Anda di luar kotak. Desainer yang lebih berpengalaman sering menyesuaikan ini agar sesuai dengan tujuan mereka, tetapi default ini memungkinkan kebanyakan orang memulai proyek mereka dengan cepat.

Default ini dapat membantu, tetapi desainer sering lebih suka menetapkan standar jarak sendiri. Jika Anda ingin melihat seperti apa halaman Anda tanpa pengaturan padding default, Anda dapat melakukan ini:

1. Pergi ke elemen apa pun dan temukan grup opsi jarak di bawah tab Desain .
2. Buka grup opsi default dan atur padding atas dan bawah ke 0 (nol).
3. Simpan preset OG spasi default untuk menerapkannya di seluruh situs ke setiap elemen.

Ini akan menunjukkan kepada Anda seperti apa halaman Anda tanpa pengaturan default Divi. Ini tidak akan terlihat sebagus, tetapi Anda akan mulai melihat apa yang perlu Anda lakukan untuk membuat sistem desain Anda sendiri (atau Anda dapat menggunakan default Divi dan membuat perubahan sesuai keinginan Anda).

Menggunakan skala jarak 8 poin

Skala 8 poin adalah skema tata letak di mana nilai jarak dibangun menggunakan peningkatan 8. Jadi, alih-alih menggunakan nilai sewenang-wenang seperti 13px atau 27px, Anda tetap pada nilai seperti 8, 16, 24, 32, 40, 48, dan seterusnya.

Sistem ini membantu:

• Simpan ritme vertikal dan horizontal menggunakan rubrik ukuran yang konsisten
• Pastikan tumpukan jarak dengan bersih di seluruh breakpoints
• Mempercepat pengambilan keputusan (lebih sedikit pilihan = desain lebih cepat)

Anda dapat menggunakan skala dalam PX atau REM, tergantung pada preferensi atau jenis skala Anda. Misalnya, 16px menjadi 1rem ketika ukuran font dasar adalah 16px.

Mockup halaman yang mengelompokkan perhatian Anda untuk memilih area dan mendorong pengunjung ke halaman dengan jarak vertikal

Jarak vertikal memberi tahu pembaca di mana harus fokus. Item yang dikelompokkan bersama dengan jarak yang lebih ketat secara alami dipandang satu sama lain. Hal -hal yang dipisahkan oleh lebih banyak ruang menunjukkan ide baru.

Cara membuat sistem ukuran & jarak

Suatu sistem untuk ukuran dan ruang Anda terdiri dari dua hal: pengaturan variabel atau token yang akan digunakan di seluruh desain dan secara konsisten menggunakan variabel -variabel tersebut di seluruh desain situs. Inilah cara Anda bisa melakukannya dengan Divi.

Langkah 1: Buat variabel angka di Manajer Variabel Desain

Divi 5 memperkenalkan antarmuka visual untuk mendefinisikan nilai numerik yang dapat digunakan kembali. Setiap variabel angka termasuk:

1. Nama yang mudah ditarik kembali (misalnya, celah-sm, teks-h1) yang tidak terlalu panjang
2. Nilai numerik atau fungsi kalk () atau klem ()
3. Unit CSS (PX, REM, %, VW, dll.)

Karena manajer variabel, Anda tidak perlu menulis variabel CSS dalam stylesheet yang terpisah. Anda mengatur semua ini di manajer variabel desain dan kemudian memilihnya dari bidang input di pembangun visual.

Di bawah ini adalah set awal variabel angka untuk mencocokkan sistem desain 8 poin. Anda tidak harus menggunakan ini, tetapi itu memberi Anda gambaran tentang apa yang mungkin.

Dan inilah rasanya diisi ini di manajer variabel.

Perhatikan bahwa nilai -nilai jarak ini akan bermanfaat dalam fitur Flexbox yang akan datang divi 5

Langkah 2: Merencanakan sistem jarak 8 poin Anda

Halaman Anda biasanya akan berisi pola elemen yang berulang. Cari kelompok biasa atau kelompok seperti:

• Heading, paragraf, tombol
• Judul kecil, judul besar, paragraf
• Ikon, paragraf
• Kartu yang berisi banyak elemen

Dengan wireframes awal Anda (atau desain placeholder), Anda akan memiliki kesempatan untuk membuat pola potensial. Anda juga akan membuat hal -hal yang tidak sesuai dengan pola yang Anda harus memutuskan bagaimana menangani. Tapi itu semua bagian dari desain.

Anda dapat melakukan ini di Figma atau dengan secara langsung membuat halaman wireframe dengan elemen placeholder di Divi. Dapatkan semua yang bisa Anda letakkan di halaman. Anda dapat menggunakan ekstensi krom yang disebut Ukur Everything untuk membantu Anda memvisualisasikan jarak (pada awalnya dengan jarak default Divi) saat Anda mulai menyesuaikannya.

Untuk menggunakan ekstensi, aktifkan dari toolbar ekstensi chrome. Kemudian klik elemen pada halaman yang Anda minati, memfokuskan alat pada elemen itu. Dari sana, gerakkan mouse Anda untuk mengukur berbagai aspek antara elemen yang saat ini dipilih dan elemen lain saat Anda melayang di atasnya.

Langkah 3: Tetapkan variabel nomor untuk preset grup opsi

Dengan bingkai gambar dari pengaturan halaman dan variabel desain di tempatnya, Anda dapat mulai membuat perubahan jarak dan ukuran yang terkait dengan halaman Anda. Anda dapat mulai dengan kelompok konten terlebih dahulu. Mari kita fokus pada judul, paragraf, dan tombol di bagian Pahlawan.

Wireframe dengan konten placeholder dan ukuran font/font di tempat

Perhatikan bahwa pada titik ini, Anda sudah ingin membuat draft pertama dari tipografi Anda yang sudah diatur. Ini termasuk font, ukuran font, dan jarak tinggi/jarak surat. Tanpa ini, Anda sangat mungkin menyeimbangkan semua ukuran Anda setelah Anda membangun sistem tipografi Anda.

Contoh opsi ukuran tipografi yang diatur sebagai variabel angka

Sekarang, kami ingin menilai jarak default apa yang diterapkan dalam desain. Untuk melakukan ini, Anda dapat melihat grafik sebelumnya di pos dan membandingkannya dengan apa yang telah kami lakukan di bagian Pahlawan. Jelas, ada bagian (#1) dan dua baris (#2 dan#3). Untuk sekarang, kami akan mengatur bantalan/bantalan bawah baris default ke nol.

Selanjutnya, kami memiliki dua opsi untuk jarak bagian: kami dapat mengatur bantalan ke nol dan mencari tahu nanti, atau kami dapat mengatur beberapa bantalan pendahuluan atas dan bawah dalam elemen default yang ditetapkan untuk bagian untuk terlihat seperti ini:

• Desktop : Padding atas & bawah diatur ke Space-XXXL
• Tablet : Padding Atas & Bawah diatur ke Space-XXL
• Mobile : Setdding atas & bawah diatur ke Space-XL

Tetapi apa yang Anda lakukan sepenuhnya terserah Anda dan variabel desain jarak yang akhirnya Anda atur (atau menggunakan default jika Anda lebih suka mengadopsinya sebagai milik Anda). Apa yang kami miliki sekarang (dengan bantalan baris default diatur ke padding bagian nol dan kustom):

Langkah 4: Jarak modul

Hal berikutnya yang harus dilakukan adalah bekerja pada jarak antar modul dalam bagian/baris. Kuncinya adalah memilih cara yang konsisten untuk menerapkan jarak ke modul.

Anda memiliki opsi, Anda dapat membagi jarak dengan berbagai cara:

• Oleskan jarak ke margin-top
• Oleskan jarak ke margin-bottom
• Terapkan jarak secara merata antara margin-top dan margin-bottom

Penting untuk diingat bahwa banyak modul memiliki margin-bawah yang diterapkan secara default, jadi saya sarankan Anda pergi dengan konvensi itu dan mulai di sana ketika mengatur paradigma jarak Anda. Sebagai permulaan, Anda dapat mengatur margin atas/bawah ke nol untuk melihat bagaimana jarak antar modul terlihat tanpa default yang diterapkan pada mereka.

Di bagian ini, kami menerapkan 0px ke atas margin dan bawah untuk melihat semua modul ini tanpa jarak default

Sekarang, kita dapat mulai menetapkan variabel desain jarak ke margin-botin dari modul-modul ini untuk membuat sistem jarak. Kami akan mulai dengan tajuk dan teks tubuh.

Ketika Anda mulai melihat pola dengan jarak modul Anda, Anda mungkin ingin menambahkan pilihan jarak ini ke preset elemen default. Dan karena Anda perlu membuat aturan jarak untuk elemen yang menyimpang, Anda dapat membuat preset elemen khusus. Elemen baru akan menggunakan preset default dari sana, tetapi Anda dapat dengan cepat memilih preset elemen khusus untuk berbagai situasi.

Bagaimana Anda menggunakan Divi 5 untuk ukuran dan jarak?

Membuat sistem jarak dan ukuran yang Anda sukai datang untuk mempraktikkan fundamental dan bersandar pada alat yang ada. Divi 5 sedang dalam perjalanan untuk membuat sistem desain de facto untuk situs web WordPress. Ini mengenai sweet spot memiliki banyak fleksibilitas, tetapi mudah untuk membungkus kepala Anda.

Jika Anda tidak pernah mempertimbangkan untuk membuat sistem desain, Divi memungkinkan Anda untuk memikirkannya dari variabel desain dan tingkat preset, tidak hanya pada tingkat modul atau elemen individu. Ini membantu Anda secara konsisten menerapkan keputusan desain dasar ke elemen lebih cepat dari sebelumnya.

Apakah Anda akan mencoba sistem 8 poin, atau apakah Anda memiliki hal-hal lain yang direncanakan? Juga, apakah ini pertama kalinya Anda memikirkan tentang jarak default Divi? Itu membuat desain dengan Divi otomatis, tetapi untuk desainer profesional, Anda mungkin ingin mengubah beberapa default untuk mencapai visi piksel-sempurna Anda.

Divi 5 siap digunakan di situs baru yang Anda buat.