Semua yang perlu Anda ketahui tentang unit canggih Divi 5

Alat desain yang hebat memberi Anda kendali atas setiap aspek situs web Anda. Baik itu memaku bantalan yang sempurna atau memastikan skala teks dengan sempurna di seluruh perangkat, setiap detail penting. Divi telah menjadi teman terpercaya bagi desainer selama bertahun -tahun, menawarkan fondasi yang kuat untuk membangun situs web profesional. Divi 5 mengambilnya lebih jauh, memperkenalkan fitur yang disebut unit canggih.

Unit Lanjutan di Divi 5 membantu meningkatkan cara Anda membangun situs web. Dari perhitungan dinamis calc () hingga penskalaan cairan klem (), berbagai unit CSS seperti VW dan REM, dan fleksibilitas variabel CSS. Dalam posting ini, kami akan menyelam jauh ke unit canggih, cara menggunakannya di pembangun visual, dan mengapa mereka diperlukan untuk setiap pengguna Divi. Baik Anda tata letak yang menyempurnakan atau memimpikan desain baru yang berani, unit canggih memberikan lebih banyak kendali atas respons desain Anda.

Mari selami.

Apa unit canggih di Divi 5?

Unit Lanjutan di Divi 5 memungkinkan Anda mengontrol elemen desain dengan bidang unit multi-fungsionalnya. Ini adalah bidang input tunggal yang kuat yang menerima spektrum penuh unit, fungsi, dan variabel CSS.

Ini adalah perubahan kecil dalam pembangun visual yang mendukung semua unit CSS dengan dukungan baru untuk variabel fit-content, unset, calc (), clamp (), dan CSS.

Unit -unit lanjutan membebaskan Anda dari kendala nilai -nilai statis. Anda tidak perlu menebak ukuran piksel tetap atau bergulat dengan breakpoint untuk membuat segalanya sesuai seperti yang Anda inginkan. Tanpa meninggalkan pembangun visual, Anda dapat membangun tata letak yang melenturkan dan skala dengan mudah-dengan tipografi cairan, jarak adaptif, dan desain sadar-viewport. Ini bukan hanya tentang lebih banyak opsi; Ini tentang kreativitas yang lebih pintar, lebih terukur.

Menjelajahi Unit Lanjutan di Divi 5

Fitur Unit Lanjutan Divi 5 menawarkan berbagai opsi desain, masing -masing dengan cara unik untuk membentuk tata letak. Mari kita periksa pemain kunci dan lihat cara kerjanya.

Unit CSS di Divi 5

Unit canggih membuka palet penuh unit CSS, jauh di luar piksel dan persentase. Ambil Viewport Width (VW), misalnya - atur lebar bagian ke 80VW , dan itu akan selalu mengambil 80% dari lebar viewport (secara horizontal), penskalaan dengan sempurna dari desktop ke ponsel.

Ukuran Root Em (REM) mengikat ukuran font root situs - ide untuk tipografi yang konsisten, seperti 4.5rem untuk tajuk.

Anda juga dapat mencoba Fit-Content, yang mengukur elemen berdasarkan kontennya. Misalnya, menggunakan fit-content untuk lebar header dapat memastikan beradaptasi dengan sempurna. Anda dapat menambahkan fit-content ke bidang lebar berturut-turut untuk menjaga header tetap kompak dan proporsional, menghindari ruang yang berlebihan atau meluap sambil mempertahankan tampilan yang dipoles.

Unit -unit ini beradaptasi dengan ukuran dan konteks layar, memberikan tata letak yang terasa hidup daripada terkunci di tempatnya.

Calc () adalah kalkulator dinamis

Fungsi CACL () seperti kalkulator mini yang dibangun menjadi divi. Ini memungkinkan Anda mencampur unit dengan operasi - penambahan, pengurangan, perkalian, dan divisi - untuk hasil yang dinamis. Contoh klasik adalah Calc (100% - 50px) , yang menetapkan lebar bagian menjadi 100% dan mengurangi 50 piksel. Jika elemen Anda selaras secara terpusat, 25px dari kedua sisi berkurang.

Anda dapat menggunakan calc () untuk jarak responsif, seperti mengatur bagian atau lebar baris untuk meninggalkan talang sempurna di setiap sisi. Calc () menyesuaikan dengan cepat saat viewport berubah, memastikan desain Anda tetap seimbang tanpa membuat tweak manual.

Klem () untuk kontrol cairan

Fungsi klem () membantu Anda mengontrol ukuran yang menyesuaikan ukuran layar dengan lancar. Ini menggunakan tiga nilai: ukuran minimum, ukuran yang disukai, dan ukuran maksimum. Contoh yang baik adalah klem (36px, 4vw, 48px) .

Ini berarti ukuran dimulai pada 36px, meningkat berdasarkan 4% dari lebar viewport, tetapi tidak pernah berjalan di atas 48px. Ini bagus untuk teks, seperti modul heading yang terlihat bagus di kedua ponsel kecil dan layar besar. Clamp () memastikan desain Anda tetap seimbang dan dapat dibaca tidak peduli perangkatnya.

Variabel CSS untuk fleksibilitas global

Variabel CSS (atau properti khusus) memungkinkan Anda mendefinisikan nilai yang dapat digunakan kembali, seperti –font-size: 5em , dalam opsi tema Divi atau bidang pengaturan halaman CSS. Saat menambahkan variabel CSS di Divi 5, pastikan untuk melampirkannya di elemen induk seperti ini:

:root {
--font-size:5em;
}

Setelah didefinisikan, Anda dapat menjatuhkan var (–font-size) ke bidang ukuran teks tajuk untuk menerapkannya.

Ini adalah penghemat waktu yang membuat desain Anda konsisten dan dapat diedit dengan cepat.

Nilai unitless

Unit canggih Divi 5 juga mencakup nilai awal, tidak disetel, dan otomatis. Properti awal mengatur ulang properti CSS ke nilai defaultnya sebagaimana didefinisikan oleh spesifikasi CSS. Misalnya, Pengaturan Warna: Awal pada paragraf mengembalikannya menjadi hitam, mengabaikan gaya khusus atau warisan. UNSET membersihkan properti kembali ke keadaan alaminya, bertindak seperti awal untuk properti yang tidak dimiliki atau kembali ke nilai-nilai warisan jika berlaku. Sementara itu, Auto memungkinkan browser memutuskan nilai berdasarkan konteks, seperti tinggi bagian yang membentang agar sesuai dengan isinya.

Bagaimana unit canggih bekerja di Divi 5

Unit -unit canggih di Divi 5 membawa tingkat kontrol baru langsung ke pembangun visual, membuatnya mudah untuk membuat desain yang responsif dan dinamis. Anda dapat langsung mengetikkan unit, fungsi, atau variabel CSS apa pun - seperti VW, calc (), atau klem () - dan lihat hasilnya. Beginilah unit canggih bekerja di Divi.

Lebar bagian responsif dengan calc ()

Katakanlah Anda menginginkan bagian yang mencakup 80% dari tinggi viewport tetapi menghilangkan beberapa bantalan dari atas dan bawah. Arahkan ke tab Desain Bagian, cari bidang tinggi , dan tambahkan Calc (80VH - 60px) ke dalam bidang.

Perhitungan ini memungkinkan bagian untuk skala lancar dengan viewport, mempertahankan 80% dari tinggi viewport sambil mengurangi 30px dari atas dan bawah.

Tipografi cairan dengan klem ()

Clamp () dapat bermanfaat jika Anda membutuhkan judul yang tumbuh dengan ukuran layar tetapi tetap dapat dibaca. Di tab Desain Modul Heading, atur ukuran teks heading ke penjepit (52px, 2VW, 36px) .

Ini menetapkan teks pada 52px, skala naik berdasarkan 2% dari lebar viewport, dan membatasi ukuran pada 36px - dengan mudah memberikan tipografi yang responsif dan seimbang.

Ukuran font yang digerakkan oleh variabel

Variabel CSS Divi 5 adalah cara yang bagus untuk mendapatkan keseragaman dalam jarak, teks, dan area lainnya. Anda dapat mengatur variabel sekali dan kemudian menggunakannya berulang kali di seluruh desain Anda hanya dengan menambahkannya ke bidang modul, kolom, baris, atau bagian unit bagian. Misalnya, katakanlah Anda ingin ukuran heading yang konsisten tanpa mengaturnya secara manual atau menggunakan preset grup opsi untuk mendefinisikannya.

Anda dapat menambahkan yang berikut dalam opsi tema atau pengaturan halaman , di bawah canggih> CSS khusus :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

Dari sana, cukup tambahkan variabel ke ukuran teks heading di modul heading apa pun. Misalnya, untuk judul ini di bagian Pahlawan kami, kami cukup menambahkan VAR (–Text-size-H1) . Divi akan mengenalinya sebagai variabel dan menetapkan gaya yang sesuai untuk judul Anda.

Praktik terbaik untuk unit canggih

Untuk mendapatkan hasil maksimal dari unit canggih di Divi 5, pendekatan yang bijaksana dapat menghemat waktu dan memastikan desain Anda bersinar. Berikut adalah beberapa praktik terbaik untuk membimbing Anda:

Mulai sederhana

Jika Anda baru menggunakan fungsi dan variabel CSS, kemudahan dengan unit -unit yang akrab seperti piksel (PX) atau persentase (%), kemudian bereksperimen dengan calc () untuk penyesuaian dinamis dasar. Misalnya, coba calc (100% - 40px) untuk lebar bagian sebelum menyelam ke variabel klem () atau CSS. Ini membangun kepercayaan diri tanpa membuat Anda kewalahan sejak awal.

Variabel leverage untuk gaya umum

Tentukan variabel CSS dalam opsi tema untuk konsistensi di seluruh lokasi. Misalnya, pengaturan –Gutter: 30px memungkinkan Anda menggunakan kembali jarak itu di seluruh bagian, baris, dan modul. Variabel CSS juga bisa baik untuk mengatur ukuran teks yang seragam untuk semua judul Anda. Satu mengedit memperbarui semuanya, mempercepat proses desain dan menjaga desain Anda kohesif.

Tes responsif

Sistem tampilan responsif Divi adalah cara yang bagus untuk merancang desain Anda di berbagai ukuran layar. Setelah menerapkan unit seperti VW atau Clamp (), beralih antara desktop, tablet, dan tampilan seluler untuk memastikan tata letak Anda beradaptasi dengan lancar. Set tajuk untuk menjepit (20px, 3VW, 40px) mungkin terlihat sempurna di desktop tetapi mungkin perlu disesuaikan untuk layar yang lebih kecil, jadi uji untuk memastikan.

Jangan terlalu rumit

Meskipun Anda dapat menyarangkan fungsi seperti Calc (Clamp (20px, 5VW, 50px) - 10px), Anda harus tetap berpegang pada formula sederhana, setidaknya saat Anda belajar. Kompleksitas yang berlebihan dapat memperlambat kinerja dan membuat pemecahan masalah lebih sulit ketika hal -hal tidak muncul sebagaimana mestinya. Tetap tetap pada perhitungan yang bersih dan bertujuan untuk membuat hidup lebih mudah.

Mengapa Unit Lanjutan Meninggikan Divi 5

Unit canggih sangat bagus untuk merampingkan proses desain. Berikut adalah beberapa keuntungan utama yang datang dengan fitur baru ini:

• Kebebasan Kreatif: Unit pencampuran, fungsi, dan variabel membuka tata letak yang lebih memakan waktu untuk dicapai dalam versi Divi sebelumnya. Rumus sederhana memungkinkan Anda untuk menyesuaikan ketinggian, lebar, ukuran font, dan banyak lagi. Fleksibilitas ini memungkinkan Anda membangun lebih baik dan mengeksekusi lebih cepat, semua di dalam pembangun visual.
• Desain responsif yang lebih baik: Unit lanjutan menggeser Divi ke arah desain cairan yang beradaptasi dengan mudah. Menggunakan VW atau Clamp () memastikan situs Anda terasa alami pada perangkat apa pun, mengurangi kebutuhan untuk overrides manual dan memberikan pengalaman yang dipoles.
• Masa Depan: Unit-unit lanjutan selaras dengan misi Divi 5 untuk memodernisasi pembangun visual untuk web hari ini. Dengan merangkul kekuatan penuh CSS, Divi 5 melengkapi Anda dengan alat yang diperlukan untuk membangun situs web modern. Ini bukan hanya tentang mengikuti; Ini tentang tetap di depan kurva dengan alat yang mencerminkan apa yang digunakan pengembang profesional.

Unduh Divi 5 Alpha Terbaru

Unit Advanced adalah fitur yang bermanfaat yang baru -baru ini ditambahkan ke Divi 5. Dari ketepatan calc () hingga fluiditas klem () dan efisiensi variabel CSS, alat -alat ini membuat jarak, ukuran, dan skalabilitas lebih intuitif dari sebelumnya. Apakah Anda telah menggunakan Divi selama bertahun -tahun atau hanya menemukannya, Anda dapat membangun situs web yang responsif dan dinamis dengan sedikit usaha.

Siap melihatnya sendiri? Unduh Divi 5 Alpha sekarang dan mulailah bereksperimen dengan unit canggih. Mainkan dengan VW dan VH untuk jarak viewport, test clamp () untuk tipografi, atau mengatur variabel untuk memikirkan kembali cara Anda membangun. Ini adalah kesempatan untuk mendorong desain Anda lebih jauh dan menemukan apa yang mungkin.