Perbedaan antara unit CSS absolut & relatif

Memilih unit CSS yang tepat lebih dari sekadar detail teknis. Inilah yang membantu desain Anda tetap konsisten, fleksibel, dan responsif di semua perangkat. Piksel mungkin tampak seperti pilihan yang mudah, tetapi mereka tidak selalu berperilaku dapat diprediksi di layar yang berbeda.

Dalam posting ini, kami akan menjelaskan perbedaan antara unit absolut dan relatif, dan menunjukkan bagaimana Divi 5 membantu Anda menggunakannya secara lebih efektif sejak awal.

Unit CSS Dijelaskan: Mengapa mereka penting bagi situs web Anda?

Unit CSS mengontrol seberapa besar semuanya muncul di situs Anda. Pilih salah, dan desain Anda rusak pada perangkat yang berbeda.

Kebanyakan orang menggunakan piksel karena mudah dan mudah dipahami. Tapi piksel tidak secara alami beradaptasi dengan baik dengan desain yang responsif. Mereka membutuhkan permintaan media atau fungsi CSS seperti Clamp () untuk menanggapi perubahan layar.

Unit lain beradaptasi secara otomatis. Viewport Unit Skala dengan jendela browser. Unit relatif seperti ukuran EM didasarkan pada teks di sekitarnya. Unit yang berbeda menyelesaikan masalah yang berbeda. Pilih dengan baik, dan desain Anda beradaptasi di seluruh perangkat tanpa pekerjaan tambahan.

Memecah unit absolut: saat ukuran tetap bekerja paling baik

Unit absolut menjaga ukuran yang sama tidak peduli apa yang terjadi di sekitar mereka. Jika Anda mengatur sesuatu ke lebar 20 piksel, ia tetap 20 piksel apakah seseorang melihatnya di telepon atau monitor desktop besar. Nilai tidak pernah berubah berdasarkan ukuran layar, elemen induk, atau pengaturan browser.

Pixels (PX) memerintah ruang ini. Unit absolut lainnya seperti sentimeter, milimeter, dan inci ada, tetapi mereka termasuk dalam desain cetak di mana pengukuran fisik penting. Untuk desain web, piksel menangani hampir setiap pengukuran absolut yang Anda butuhkan.

Mengapa Pixel Bekerja Baik Untuk Detail Kecil

Beberapa elemen desain membutuhkan kontrol yang tepat. Perbatasan 1 piksel harus terlihat renyah dan tipis di mana-mana. Jatuhkan bayangan perlu presisi agar terlihat benar. Ikon kecil bekerja lebih baik ketika mereka tetap konsisten di seluruh perangkat.

Piksel bekerja dengan sangat baik untuk detail kecil ini. Perbatasan tombol Anda harus setebal 2 piksel, bayangan halus itu harus persis 4 piksel offset, dan ikon navigasi Anda harus tepat 24 piksel persegi untuk penyelarasan sempurna.

Pengukuran ini tidak perlu skala dengan ukuran layar. Perbatasan yang 1 piksel di desktop harus tetap 1 piksel di ponsel. Membuatnya 2 piksel di ponsel akan terlihat tebal dan kikuk.

Elemen lain juga bekerja dengan baik dengan piksel. Logo merek sering menggunakan piksel untuk konsistensi merek. Elemen dekoratif kecil seperti titik atau garis perlu ukuran yang tepat. Memuat pemintal dan bilah kemajuan bekerja lebih baik dengan dimensi tetap.

Membuat piksel responsif dengan kueri media

Piksel tidak sepenuhnya kaku. Kueri media memungkinkan Anda menukar nilai piksel yang berbeda di berbagai ukuran layar. Judul Anda mungkin menggunakan teks 32-pixel di desktop, kemudian melompat ke 28 piksel pada tablet dan 24 di ponsel.

Pendekatan ini membutuhkan lebih banyak pekerjaan daripada unit relatif. Anda perlu mendefinisikan breakpoint dan menulis aturan terpisah untuk setiap ukuran layar, tetapi Anda memiliki kontrol total atas bagaimana hal -hal melihat setiap ukuran.

Pendekatan ini bekerja dengan baik ketika Anda menginginkan kontrol spesifik pada setiap ukuran layar. Anda memutuskan dengan tepat bagaimana teks Anda terlihat di ponsel versus tablet versus desktop pada dimensi tertentu. Tidak ada kejutan.

CSS ekstra sangat berharga untuk elemen yang membutuhkan ukuran yang tepat. Logo terlihat paling baik ketika mereka tetap seukuran yang tepat untuk setiap perangkat. Elemen navigasi sering membutuhkan dimensi spesifik untuk bekerja dengan benar. Batas dan bayangan dekoratif tergantung pada pengukuran yang tepat agar terlihat renyah.

Memahami Unit Relatif: Pendekatan Fleksibel untuk Desain Web

Unit relatif, sebaliknya, peregangan dan menyusut berdasarkan apa yang ada di sekitar mereka. Fleksibilitas ini membuat situs web bekerja di seluruh ponsel, tablet, dan komputer tanpa rusak. Tidak seperti unit absolut yang tetap tetap, unit relatif beradaptasi dengan ukuran layar, elemen induk, atau preferensi pengguna.

Unit -unit ini menyelesaikan masalah yang dibuat piksel. Tombol 75-pixel-lebar Anda berfungsi dengan baik di desktop tetapi menjadi dominan di ponsel. Unit relatif secara otomatis menyesuaikan, menyelamatkan Anda dari menulis gaya terpisah untuk setiap ukuran layar.

Bagaimana unit EM saling membangun

Unit EM relatif terhadap ukuran font dari elemen induk dekat mereka. Jika ukuran font dasar Anda adalah 16px dan Anda mengatur wadah ke ukuran font: 1.25em, itu menjadi 20px. Elemen anak di dalamnya diatur ke 1.5em sekarang akan menjadi 30px (1,5 × 20px), bukan 24px, karena didasarkan pada induk, bukan root.

Efek peracikan ini sangat kuat untuk jarak yang dapat diskalakan di sekitar teks. Tetapi jika Anda menjaga elemen bersarang dengan ukuran font berbasis EM, nilai-nilai Anda dapat bertambah dengan cepat. Unit EM bekerja paling baik untuk bantalan, margin, atau elemen yang terkait erat dengan teks di dekatnya. Untuk ukuran yang konsisten di seluruh tata letak Anda, pertimbangkan untuk menggunakan REM sebagai gantinya.

Unit REM menjaga hal -hal sederhana

REM selalu melihat elemen html root. Atur sesuatu ke 2rem dan ukurannya yang sama di mana -mana di halaman Anda.

Sebagian besar browser default ke 16px untuk root. Jadi 1rem = 16px, 2rem = 32px. Ubah ukuran akar, dan semuanya menjadi skala berbasis REM bersama-sama.

Unit viewport mengikuti layar Anda

Viewport Unit Skala dengan jendela browser Anda. 50VW = setengah lebar layar, dan 100VH = tinggi layar penuh. Ini bagus untuk bagian pahlawan yang mengisi layar.

Browser seluler biasanya tidak bermain dengan baik dengan unit viewport. Bilah alamat menyembunyikan dan menunjukkan kapan Anda menggulir, dan bagian 100VH Anda mungkin terputus saat bilah alamat muncul.

Vmin dan Vmax membandingkan lebar dan tinggi layar Anda, lalu pilih satu. Vmin menggunakan mana yang lebih kecil. Pada telepon yang dipegang tegak, lebarnya lebih kecil, jadi 50VMIN = 50% dari lebar. Putar ke lanskap dan tingginya menjadi lebih kecil, jadi 50VMIN beralih ke 50% dari tinggi. Vmax melakukan yang sebaliknya: selalu memilih dimensi yang lebih besar. Ini berguna untuk elemen yang perlu diukur dengan pengukuran yang lebih besar.

Persentase beradaptasi dengan wadah

Lebar berbasis persentase selalu berhubungan dengan lebar elemen induk. Persentase tinggi dapat skala dengan cara yang sama, tetapi hanya jika orang tua memiliki tinggi yang ditentukan; Kalau tidak, mereka mungkin tidak bekerja seperti yang diharapkan.

Persentase padding dan margin selalu dihitung dari lebar induk, bahkan untuk nilai atas dan bawah. Hal ini memungkinkan untuk membuat spasi yang konsisten dan tata letak proporsional, terutama dalam desain cairan.

Perbedaannya

Unit absolut seperti penguasa yang kaku, sementara unit relatif berperilaku lebih seperti pita pengukur. Keduanya mengukur hal -hal, tetapi mereka merespons dengan sangat berbeda ketika kondisi berubah. Begini cara mereka membandingkan:

Sebagian besar pengembang akhirnya menggunakan keduanya: piksel untuk hal -hal kecil yang perlu tetap renyah dan unit relatif untuk potongan struktural besar yang perlu dilenturkan.

Memilih unit yang tepat untuk desain Anda

Bagian yang berbeda dari situs web Anda membutuhkan pendekatan yang berbeda. Beberapa elemen tetap memiliki ukuran yang sama di mana -mana, sementara yang lain beradaptasi berdasarkan ukuran layar atau pengaturan pengguna. Sebagian besar pengembang terlalu memikirkan hal ini. Ada cara yang lebih mudah: Cocokkan unit dengan apa yang Anda ingin elemen itu lakukan.

Pikirkan tentang pengguna Anda terlebih dahulu

Orang -orang menelusuri situs Anda dengan cara yang tidak terduga. Seseorang mengunjungi telepon mereka. Teks Anda terlihat kecil, jadi mereka mencubit untuk memperbesar. Jika Anda membangun dengan unit REM, semuanya tumbuh bersama secara proporsional. Jika Anda menggunakan piksel di mana -mana, segalanya mulai tumpang tindih dan pecah.

Navigasi utama membutuhkan ukuran yang konsisten di seluruh halaman. Unit REM mengikatnya dengan ukuran font dasar Anda. Logo Anda membutuhkan dimensi yang tepat untuk konsistensi merek. Piksel tetap garing.

Banyak pengguna mengubah ukuran font default browser mereka untuk keterbacaan yang lebih baik. Saat piksel kode hardcode, Anda mengabaikan preferensi mereka. Jika seseorang memperbesar hingga 125%, tata letak berbasis piksel Anda berantakan. Unit relatif beradaptasi secara otomatis.

Cara cepat untuk memilih unit yang tepat

Inilah cara memecah pilihan Anda tanpa tersesat dalam detailnya:

• Teks dan jarak di sekitarnya: Gunakan Em atau Rem. Tombol scales bantalan tombol dengan ukuran teks. Margin tetap proporsional dengan judul.
• Elemen Terkait Layar: Gunakan Unit Viewport. Bagian pahlawan yang mengisi sebagian besar layar. Sidebars yang mengambil persentase layar tertentu.
• Elemen yang membutuhkan kontrol yang tepat: Gunakan piksel. Perbatasan tipis yang tetap segar. Ikon kecil dengan penyelarasan sempurna. Jatuhkan bayangan dengan offset yang tepat.
• Elemen Berbasis Kontainer: Penggunaan Persentase. Grid fleksibel yang beradaptasi dengan orang tua. Gambar yang skala dengan wadah.

Mulai sederhana. Gunakan piksel untuk bit dekoratif, REM untuk teks dan jarak terkait, unit viewport untuk bagian seukuran layar, dan persentase untuk wadah fleksibel. Pilih sistem untuk elemen terkait dan tetap menggunakannya.

Kesalahan unit CSS umum untuk dihindari

Anda memilih piksel untuk semuanya karena mereka merasa aman. Tombol Anda terlihat sempurna di 75 piksel lebar di laptop Anda. Kemudian seseorang membuka situs Anda di ponsel mereka, dan tombol yang sama memakan setengah layar. Logo Anda membutuhkan dimensi yang tepat, tetapi area konten Anda membutuhkan fleksibilitas. Campur pendekatan ini secara acak, dan Anda membuat kekacauan. Jadi, berikut adalah beberapa tips untuk menghindari kesalahan unit CSS standar:

1. Memilih piksel untuk semuanya

Piksel merasa aman karena 20 piksel berarti 20 piksel. Sederhana, kan? Sidebar 300-pixel-lebar Anda berfungsi dengan baik di desktop. Di ponsel, itu menjadi blok besar yang menghancurkan konten Anda menjadi strip tipis. Teks 16-pixel Anda menjadi tidak dapat dibaca di layar dengan kepadatan tinggi.

Ketika seseorang meningkatkan ukuran font browser mereka, tata letak berbasis piksel Anda tidak beradaptasi. Teks meluap wadah. Tombol menghilang di belakang elemen lain. Sidebar Anda menabrak konten utama Anda.

Simpan piksel untuk hal -hal yang benar -benar membutuhkan kontrol yang tepat: perbatasan tipis, ikon kecil, dan drop bayangan. Untuk yang lainnya, cobalah menggunakan unit relatif.

2. Em Unit yang melipatgandakan di luar kendali

Skala unit EM berdasarkan ukuran font orang tua mereka. Kedengarannya fleksibel, sampai Anda mulai bersarang. Katakanlah wadah Anda menggunakan 1.2em, dan judul Anda di dalamnya menggunakan 1.5em. Judul itu menjadi 1.8em relatif terhadap root karena 1.2 × 1.5 = 1.8. Tetap bersarang, dan ukurannya bisa bola salju. Ubah satu ukuran font induk, dan semuanya bergeser di hilir.

Unit REM memperbaiki ini. Mereka selalu merujuk elemen root, jadi 2rem berarti hal yang sama di mana pun digunakan. Itu membuat tipografi Anda lebih mudah untuk ditentukan dan dikendalikan.

3. Unit viewport yang melompat di ponsel

Atur bagian Pahlawan Anda ke 100VH, dan mengisi layar dengan sempurna. Kecuali browser seluler menyembunyikan dan menunjukkan bilah alamat mereka saat Anda menggulir. Safari di iOS dan Chrome di Android semuanya melakukan ini. Ketika bilah alamat menghilang, bagian 100VH Anda tiba -tiba menjadi terlalu tinggi. Saat muncul kembali, konten Anda terputus.

Unit DVH yang lebih baru beradaptasi dengan ukuran viewport yang berubah. Dukungan browser masih mengejar ketinggalan. Sebagai fallback, solusi JavaScript menggunakan CSS Custom Properties berfungsi.

Melanggar aksesibilitas dengan ukuran tetap

Pengguna sering menyesuaikan ukuran font default browser mereka untuk meningkatkan keterbacaan. Saat Anda menggunakan teks hardcode, tombol, dan jarak menggunakan piksel tetap, tata letak Anda dapat pecah - teks dapat meluap, tombol mungkin menjadi tidak dapat digunakan, dan elemen kritis mungkin hilang pada tingkat zoom yang lebih tinggi.

Target sentuh disarankan untuk setidaknya 44 × 44 piksel CSS, menurut pedoman aksesibilitas seperti standar WCAG dan Apple. Target yang lebih kecil dapat menantang bagi pengguna dengan gangguan motor untuk mengetuk secara akurat.

Alih -alih mengunci ukuran tetap, gunakan unit yang dapat diskalakan seperti REM untuk membuat tata letak yang menghormati preferensi pengguna. Atur ukuran font dasar Anda pada elemen, kemudian secara konsisten skala tajuk, tombol, dan jarak dengan unit relatif di seluruh situs Anda.

5. Teks kecil pada layar kepadatan tinggi

Perangkat yang berbeda mengemas piksel secara berbeda. Layar ponsel Anda mungkin memiliki 400 piksel per inci sementara monitor Anda memiliki 100. Jumlah piksel yang sama terlihat sangat berbeda di setiap perangkat.

Teks 14-pixel Anda terlihat bagus di monitor desktop. Pada layar ponsel dengan kepadatan tinggi, 14 piksel yang sama menjadi mikroskopis. Pengguna menyipit dan mencubit untuk memperbesar.

Sistem operasi dan browser menangani penskalaan secara otomatis saat Anda menggunakan unit relatif. Teks 1rem Anda menjadi lebih besar pada layar dengan kepadatan tinggi dan lebih kecil pada yang kepadatan rendah.

6. Unit pencampuran tanpa rencana

Anda menggunakan REM untuk beberapa judul, mereka untuk yang lain, dan piksel untuk teks tubuh. Desain Anda tidak memiliki ritme karena skala elemen yang berbeda pada tingkat yang berbeda. Pilih sistem untuk elemen terkait. Jika judul Anda menggunakan REM, semua judul Anda harus menggunakan REM. Jika jarak Anda menggunakan EM, tetap menggunakan EM untuk jarak terkait.

Uji pilihan Anda di seluruh perangkat dan pengaturan pengguna. Periksa bagaimana desain Anda terlihat ketika seseorang meningkatkan ukuran font mereka. Beberapa menit pengujian menghemat jam perbaikan bug di kemudian hari.

Bagaimana Unit Lanjutan Divi 5 Menyederhanakan Manajemen CSS

Gulat dengan unit CSS menjadi tua dengan cepat. Anda menghabiskan berjam -jam mengutak -atik nilai, menguji pada perangkat yang berbeda, dan memperbaiki tata letak yang rusak. Divi 5 mengubah ini sepenuhnya. Sistem baru mengeluarkan dugaan dari pemilihan unit dan memberi Anda kontrol visual atas perilaku responsif tanpa menyentuh kode. Tapi pertama -tama, mari kita mengerti apa itu Divi.

Apa itu Divi?

Divi adalah pembangun situs web yang mengubah WordPress menjadi sesuatu yang benar -benar masuk akal bagi orang -orang yang ingin situs mereka terlihat bagus.

Seret salah satu dari 200+ modul di sekitar halaman Anda. Ubah teks tepat di tempat yang duduk. Pilih warna baru dan tontonnya segera muncul. Anda sedang mengerjakan hal yang nyata, bukan mode pratinjau yang terletak pada Anda.

Tema ini mencakup 2000+ tata letak yang tidak payah. Desain nyata untuk restoran, fotografer, konsultan, dan lusinan bisnis lainnya. Temukan yang Anda sukai dan tweak sampai terasa benar.

Pembuat tema memungkinkan Anda mengendalikan segalanya. Buat header yang tidak terlihat generik, membangun halaman blog yang menonjol, dan mengubah 404 halaman Anda menjadi sesuatu yang mungkin ingin dilihat orang.

Bangun situs web menggunakan AI

Divi AI bekerja tepat di dalam area desain Anda. Butuh teks? Itu menulisnya.

Ingin gambar? Itu membuat mereka. Anda bahkan dapat menggambarkan pengeditan foto, dan menangani pekerjaan.

Demikian juga, untuk kode dan bagian baru.

Situs cepat divi memecahkan momen mengerikan itu ketika Anda menatap halaman kosong tanpa petunjuk harus mulai dari mana. Pilih dari situs pemula yang sebenarnya dirancang tim kami, lengkap dengan gambar asli dan karya seni.

Atau jelaskan bisnis Anda ke situs cepat divi + divi ai dan biarkan itu membangun sesuatu dari awal.

Situs-situs yang dibangun AI ini akan memiliki berita utama, salinan, dan gambar yang sesuai dengan apa yang Anda katakan. Hasilkan semuanya dengan AI, ambil foto dari Unsplash, atau jatuhkan placeholder untuk bidikan Anda sendiri. Atur font dan warna Anda terlebih dahulu, lalu biarkan AI bekerja di sekitarnya. Anda masih dapat mengedit semuanya sesudahnya.

Apa yang Baru di Divi 5

Divi 5 membangun kembali semuanya dari awal. Kami membatalkan sistem kode pendek lama dan membangun sesuatu yang bekerja lebih baik dengan standar web saat ini. Situs memuat lebih cepat, editor merespons lebih cepat, dan Anda mendapatkan akses ke alat yang tidak mungkin sebelumnya.

Tapi apa yang baru? Lihat:

Sistem Tata Letak Flexbox

Membangun situs web modern dan responsif di Divi sekarang lebih cepat dan lebih intuitif. Kami telah memperkenalkan sistem tata letak Flexbox penuh ke Divi 5, memberi Anda kontrol sederhana untuk penyelarasan vertikal, pembungkus konten, dan jarak. Buat tata letak yang tepat yang Anda inginkan tanpa berkelahi dengan kode atau menggunakan solusi yang kompleks.

Preset Grup Opsi

Preset grup opsi memungkinkan Anda menyimpan gaya yang dapat Anda campur dan cocok di mana saja. Buat gaya bayangan sekali, lalu gunakan pada tombol, kartu, bagian, apa pun yang membutuhkannya. Perbarui preset, dan semuanya berubah secara instan di seluruh situs Anda.

Variabel desain

Warna merek, font, dan jarak semua langsung di satu tempat sekarang. Anda dapat beralih dari biru ke hijau dengan mengedit satu variabel. Seluruh situs Anda memperbarui secara otomatis, jadi Anda tidak perlu berburu lusinan modul.

Unit lanjutan

Sekarang, Anda dapat menggunakan semua unit CSS canggih dengan Divi 5: dari PX ke VW/VH. Fungsi CSS juga bekerja tepat di pembangun sekarang. Ingin bagian yang 80% dari tinggi layar dikurangi header Anda? Ketik Calc (80VH - 100px) dan Anda diatur. Antarmuka menangani klem (), min (), max (): semua trik responsif itu.

Baris bersarang

Baris masuk ke dalam baris lain sekarang, sedalam yang Anda butuhkan. Bangun tata letak majalah yang kompleks atau halaman produk terperinci tanpa melawan struktur. Setiap level memberi Anda kontrol penuh atas jarak dan perilaku perangkat.

Pengeditan satu klik

Arahkan dan klik di mana saja di halaman Anda untuk mulai mengedit. Hari -hari mencari tombol edit kecil atau menavigasi melalui beberapa menu ada di belakang kami.

Breakpoint yang dapat disesuaikan

Alih -alih terjebak dengan tiga, breakpoint yang dapat disesuaikan Divi 5 memungkinkan Anda untuk mengaktifkan tujuh ukuran layar yang berbeda. Atur setiap breakpoint persis di mana desain Anda membutuhkannya, apakah 1200px untuk monitor besar, 900px untuk tablet, atau 650px untuk ponsel.

Ruang kerja multi-panel

Atur panel ruang kerja Anda sesuka Anda. Buka beberapa panel pengaturan terbuka secara bersamaan alih -alih terus -menerus melompat di antara berbagai area antarmuka.

Manajemen atribut

Salin elemen spesifik antara berbagai bagian situs Anda dengan presisi bedah. Ambil jarak hanya dari satu elemen, hanya warna dari yang lain, atau hanya preset dari sepertiga. Tidak ada lagi transfer semua atau tidak sama sekali.

Penskalaan kanvas

Sesuaikan ukuran ruang kerja Anda untuk melihat pratinjau bagaimana situs Anda muncul di perangkat yang berbeda. Lihat tampilan seluler, tablet, dan desktop tanpa beralih ke mode pratinjau terpisah.

Peningkatan Kinerja

Semuanya terasa lebih snappier sekarang. Halaman memuat lebih cepat, pembangun merespons lebih cepat, dan tata letak yang kompleks tidak menghambat antarmuka seperti dulu.

Grup modul

Bundel beberapa modul ke dalam satu wadah. Perlakukan blok teks, gambar, dan tombol sebagai satu unit. Pindahkan mereka bersama -sama, gaya bersama, dan salin semuanya ke halaman lain.

Sistem Warna HSL

Bangun skema warna dengan rona, saturasi, dan kontrol cahaya. Buat variasi warna merek yang terlihat profesional. Matematika menciptakan kombinasi yang menyenangkan secara otomatis.

Lebih banyak yang sedang dalam perjalanan…

• Loop Builder: Bangun templat untuk mengulangi konten seperti grid blog atau daftar produk. Desain sekali, biarkan sistem mengisinya dengan konten Anda yang sebenarnya.
• Modul WooCommerce: Modul khusus toko untuk grid produk, halaman produk individual, dan fungsionalitas gerobak. Semua yang dibutuhkan toko online, dibangun khusus untuk dijual.

Menggunakan variabel CSS di Divi 5

Styling situs web menjadi membosankan ketika Anda membutuhkan nilai yang konsisten di beberapa elemen. Variabel CSS menyelesaikan ini dengan menyimpan nilai yang dapat digunakan kembali di satu lokasi. Divi 5 mendukung variabel CSS tradisional dan sistem variabel desainnya sendiri, memberi Anda fleksibilitas dalam cara Anda mengelola penampilan situs Anda.

Divi 5 menerima unit CSS apa pun secara langsung di bidang inputnya. Tulis nilai REM, VW, atau persentase di mana Anda sebelumnya hanya bisa menggunakan piksel. Pembangun memproses unit -unit ini segera tanpa pengaturan tambahan.

Fungsi CSS bekerja dengan cara yang sama. Masukkan klem (1rem, 4VW, 3REM) untuk tipografi cairan atau min (500px, 90%) untuk lebar responsif. Pembangun visual menangani perhitungan ini secara real-time saat Anda mendesain.

Variabel berintegrasi dengan sistem ini. Tentukan variabel CSS seperti –Header-height: 80px, lalu referensi menggunakan var (–Header-height) di bidang apa pun. Divi mengenali sintaks dan menerapkan nilai tersimpan Anda secara otomatis.

Integrasi langsung ini berarti Anda dapat mencampur unit tradisional, fungsi CSS modern, dan variabel dalam proyek yang sama. Gunakan piksel untuk perbatasan, unit viewport untuk bagian, dan variabel untuk pengukuran berulang.

Variabel desain: cara yang lebih baik untuk menerapkan unit canggih

Variabel desain adalah alternatif bawaan Divi 5 untuk variabel CSS. Mereka bekerja sepenuhnya melalui antarmuka visual tanpa memerlukan pengetahuan kode apa pun. Anda membuat dan mengelola variabel -variabel ini menggunakan panel manajer variabel Divi.

Variabel -variabel ini melampaui angka dan warna sederhana. Simpan URL gambar lengkap, konten teks, atau nilai gaya yang kompleks. Saat Anda memperbarui variabel desain, setiap elemen menggunakannya berubah secara instan di seluruh situs web Anda.

Divi 5 menawarkan beberapa jenis variabel untuk menangani kebutuhan konten yang berbeda:

• Variabel warna menyimpan kode hex, gradien, warna merek, warna teks, latar belakang, dan perbatasan.
• Variabel font mengelola tipografi secara global di luar batasan tema dan bekerja untuk area teks apa pun.
• Variabel angka menerima unit CSS plus fungsi CSS seperti clamp (), calc (), min (), dan max () untuk jarak, ukuran, dan animasi.
• Variabel gambar menyimpan gambar yang dapat digunakan kembali seperti logo, latar belakang, dan pola.
• Variabel teks menyimpan string teks yang dapat digunakan kembali seperti info kontak, tagline, dan detail bisnis.
• Variabel URL menyimpan tautan yang dapat digunakan kembali untuk media sosial, afiliasi, promo, dan tautan tel/mailto.

Menyiapkan unit CSS dengan variabel desain angka

Variabel angka memberi Anda blok bangunan untuk desain yang tetap konsisten. Mereka bekerja paling baik ketika Anda mengulangi pengukuran yang sama di berbagai elemen. Plus, mereka jauh lebih sederhana daripada bergulat dengan kode CSS.

Temukan manajer variabel di antarmuka divi Anda. Buat variabel angka baru dan berikan nilai yang sesuai dengan desain Anda. Gunakan nama yang jelas seperti "Padding Tombol" atau "gap-gap" alih-alih label yang tidak jelas.

Membuat Perpustakaan Variabel Anda

Anda dapat menambahkan variabel umum, seperti:

• "Tombol-Height" di 3REM-skala tombol dengan ukuran teks
• "Padding Bagian" di 8VH-spasi beradaptasi dengan ketinggian layar
• "Border-Radius" di 0,5rem-sudut bulat tetap proporsional
• "Hero-Height" di 75VH-bagian pahlawan mengisi sebagian besar layar
• "Batas halus" di 1px-Garis renyah tetap tajam
• “Fluid-Text” di Clamp (1Rem, 2.5VW, 2REM)-Teks skala dengan lancar
• "Content-Width" di Min (90%, 1200px)-Wadah tetap dapat dibaca
• “Dynamic-Gap” di Calc (2REM + 2VW)-Spacing tumbuh dengan ukuran layar

Terapkan ini di modul, bagian, atau pengaturan baris Anda.

Skala Variabel REM Anda dengan ukuran teks. Unit VH beradaptasi dengan layar yang lebih kecil. Variabel dengan klem () menyesuaikan secara otomatis antara nilai minimum dan maksimum Anda.

Membangun preset yang terhubung

Setelah menata elemen Anda dengan variabel, simpan jarak sebagai preset grup opsi. Preset ini sekarang memiliki referensi ke variabel nomor Anda.

Saat Anda menerapkan preset ini ke modul lain, mereka mewarisi jarak berbasis variabel yang sama. Perbarui "Padding Kartu" dari 2REM ke 3REM di Variable Manager, dan setiap elemen menggunakan pembaruan preset secara otomatis.

Preset tetap sama, tetapi nilainya berubah. Ini berfungsi untuk semua variabel desain: warna, font, gambar, teks, dan URL. Preset Anda menjadi dinamis alih-alih statis, memungkinkan pembaruan di seluruh lokasi dengan satu perubahan.

Bangun situs web yang lebih baik dengan unit CSS dan Divi 5

Mendapatkan unit CSS yang benar mengubah cara Anda membangun situs web. Anda akan memperbaiki lebih sedikit tata letak yang rusak dan membuat desain yang berfungsi di seluruh perangkat. Piksel paku rincian yang tepat. Unit relatif beradaptasi dengan berbagai layar dan preferensi pengguna.

Divi 5 membuat bangunan dengan unit CSS canggih menjadi mudah. Ketik unit apa pun ke dalam pembangun dan lihat hasilnya secara instan. Variabel desain membuat pengukuran konsisten di situs Anda. Ubah satu nilai, dan semua pembaruan yang terhubung secara otomatis.

Situs web Anda layak mendapatkan lebih baik daripada pertempuran breakpoint dan perbaikan tata letak tanpa akhir. Coba Divi 5 dan saksikan unit CSS mengubah sesi desain yang membuat frustrasi menjadi alur kerja yang mulus.