Menggunakan klem () dalam Divi 5 untuk membuat tipografi responsif cairan

Divi 5 sekarang mendukung tipografi cairan menggunakan CSS Clamp (). Ini adalah langkah maju yang besar dalam desain responsif dan secara dramatis akan meningkatkan kecepatan dan kualitas pembangunan situs web. Di sini, saya ingin menunjukkan kepada Anda cara memulai menggunakan Clamp () di Divi 5, bahkan jika Anda tidak tahu apa -apa sebelum membaca ini.

Baca bersama untuk memahami teori dan bagaimana menerapkannya. Saya juga menautkan ke alat yang bermanfaat yang dapat membuat perhitungan klem () Anda lebih mudah.

Klem () vs kueri media untuk tipografi responsif

Kueri media dapat mengubah ukuran tipografi Anda berdasarkan ukuran breakpoint. Ketika sebuah halaman menskala ke atas atau ke bawah dan mengenai breakpoint yang ditentukan berikutnya, kueri media akan secara otomatis menerapkan gaya yang terkait dengannya. Jadi, jika Anda memiliki tiga breakpoint (seluler, tablet, desktop), teks Anda dapat berubah di setiap breakpoint tersebut.

Ini bekerja dengan sangat baik dan apa yang digunakan oleh banyak perancang web. Namun, itu tidak cair, artinya ukuran font 1 tajuk Anda pada lebar viewport 767px bisa 100px besar tetapi pada 776px dapat segera turun menjadi 56px (jika itu adalah breakpoint Anda dan nilai H1 yang ditetapkan pada keduanya).

Clamp (), di sisi lain, memungkinkan Anda untuk memiliki tipografi yang lebih kecil pada layar yang lebih kecil dan meningkatkannya saat layar viewports meningkat. Video ini membandingkan pengaturan tiga breakpoint dengan tiga font-ukuran untuk H1 dan konvensi ukuran yang serupa tetapi dilakukan di Clamp () sebagai gantinya.

Dalam contoh ini, klem () transisi dengan lancar dari 30px ke 100px tanpa lompatan tiba -tiba, sedangkan deklarasi piksel sederhana di berbagai breakpoint menyebabkan perubahan besar selama lebar piksel tunggal. Hasilnya adalah saya memiliki ukuran font min/max yang saya pilih, tetapi dengan klem (), font saya jauh lebih responsif dan terlihat lebih baik berdasarkan ukuran layar. Saya harus menggunakan semua tujuh breakpoint divi untuk mendapatkan ukuran font hardcoded agar terlihat bagus pada sebagian besar ukuran layar.

Divi 5 Elemen Tipografi Yang Mendukung Clamp ()

Di Divi 5, Anda kemungkinan akan menggunakan Clamp () paling banyak dengan pengaturan tipografi. Secara khusus, Anda dapat menggunakan Clamp () untuk mengatur:

• Ukuran font (penggunaan paling umum)
• Tinggi garis
• Jarak surat

Ini memberi Anda tipografi yang dapat dibaca dan responsif tanpa mengatur deklarasi breakpoint untuk pengaturan tipografi Anda. Jadi, tidak hanya ini membuat desain yang lebih cair, tetapi Anda juga mempercepat waktu pembangunan Anda.

Ukuran font, jarak huruf, dan tinggi saluran tersedia untuk judul dan tipografi tubuh.

Bagaimana Clamp () bekerja

Fungsi klem () menggunakan tiga nilai:

clamp(min-value, preferred-value, max-value)

Setiap nilai dipisahkan oleh koma, dan masing -masing melayani peran tertentu:

Nilai min: Ini adalah ukuran terkecil yang diizinkan. Tidak peduli seberapa kecil layarnya, font Anda tidak akan menyusut di bawah ini.

Nilai Pilihan: Ini adalah ukuran ideal atau "target" Anda. Biasanya menggunakan unit dinamis atau fungsi matematika (seperti calc ()) untuk skala lancar antara min dan maks Anda.

Nilai Max: Ini menetapkan ukuran terbesar yang mungkin. Bahkan di layar besar, elemen tidak akan melebihi nilai ini.

Memahami Unit CSS di Clamp ()

Unit sangat mempengaruhi bagaimana skala klem ():

• px (piksel): unit absolut; Ukuran tetap dan stabil. Berguna untuk nilai min/maks untuk menetapkan batasan yang jelas.
• REM : Unit relatif berdasarkan ukuran font root. Jika font browser pengguna berubah, REM skala yang sesuai. Bagus untuk aksesibilitas.
• VW (Lebar Viewport): Unit dinamis skala berdasarkan lebar layar. Ideal untuk nilai yang disukai untuk membuat penskalaan cairan.
• VH (Tinggi Viewport): Mirip dengan VW, tetapi untuk ketinggian. Kurang berguna kecuali bekerja dengan bahasa yang mencetak dari atas ke bawah alih -alih kanan ke kiri (atau sebaliknya).
• EM : Relatif terhadap ukuran font elemen induk, ideal untuk penskalaan responsif yang lebih terkontrol.
• Dan unit apa pun yang Anda nyaman gunakan.

Biasanya, Min dan Max menggunakan unit absolut atau stabil seperti PX/REM, sedangkan nilai yang disukai menggunakan unit dinamis seperti VW/% atau fungsi matematika untuk penskalaan responsif.

Bagaimana nilai yang lebih disukai mempengaruhi klem ()

Nilai yang disukai adalah di mana klem () benar -benar bersinar. Ini mendefinisikan bagaimana skala teks Anda.

Nilai pilihan yang lebih tinggi berarti elemen akan mencapai batas klem maksimal lebih cepat. Ini menjadi membingungkan dengan cepat (karena hal -hal seperti VW dan REM adalah unit relatif), tetapi saya ingin menunjukkan kepada Anda dua fungsi klem () serupa yang menggunakan pengali VW yang sedikit berbeda dalam nilai yang disukai. Judul di atas memiliki nilai yang lebih kecil - perhatikan ukuran sebenarnya dari heading sebagai skala viewport (disorot dengan warna kuning).

Nilai yang disukai lebih rendah skala turun ke nilai minimum pada viewport yang sedikit lebih lebar lebih cepat dari nilai yang lebih tinggi (lebih cepat saat penskalaan). Inverse berlaku untuk nilai yang lebih tinggi, yang mencapai nilai maks pada lebar layar yang lebih kecil lebih cepat dari nilai yang lebih rendah (lebih cepat saat penskalaan).

Berikut adalah tampilan grafik tentang apa yang terjadi dalam hal ini:

Demi demonstrasi, inilah grafik lain yang membandingkan dua fungsi klem () yang sedikit lebih sederhana yang hanya sedikit berbeda.

Sekali lagi, ini terasa rumit, tetapi dalam praktiknya, jauh lebih sedikit. Saya sangat menyarankan Anda menggunakan generator ukuran tipografi yang mendukung klem CSS. Salah satu favorit saya adalah kalkulator skala tipe fluida. Anda memberikan nilai yang ingin Anda coba, dan secara otomatis akan menghasilkan variabel CSS dengan fungsi penjepit Anda. Super Nazzy!

Anda dapat menggulir ke bawah dan melihat bagaimana tipografi Anda akan skala berdasarkan lebar layar.

Dan segera Anda akan dapat menyimpan variabel CSS tersebut dalam variabel desain Divi 5 dan dengan mudah menyebutnya di preset Anda tanpa mengandalkan stylesheet CSS yang terpisah.

Menggunakan klem () untuk tipografi dengan divi

Mari kita lihat Clamp () beraksi. Inilah salah satu cara untuk mengatur tipografi untuk seluruh situs web Anda menggunakan Divi.

Menerapkan klem () ke judul dan judul

Saya akan menggunakan generator skala tipe fluida yang ditampilkan di atas untuk kemudahan. Ini adalah salah satu set tipografi cairan menggunakan klem () yang saya buat dengannya. Anda dapat menggunakan VAR seperti ini, tetapi saya akan menggunakan nilai -nilai secara langsung dalam preset grup opsi default untuk menunjukkan kepada Anda cara menggunakan Divi sepenuhnya.

:root {
--divi-sm-body: clamp(0.8rem, 0.11vi + 0.77rem, 0.94rem);
--divi-button: clamp(1rem, 0.2vi + 0.95rem, 1.25rem);
--divi-body: clamp(1.25rem, 0.33vi + 1.17rem, 1.67rem);
--divi-h6: clamp(1.56rem, 0.53vi + 1.43rem, 2.22rem);
--divi-h5: clamp(1.95rem, 0.81vi + 1.75rem, 2.96rem);
--divi-h4: clamp(2.44rem, 1.2vi + 2.14rem, 3.95rem);
--divi-h3: clamp(3.05rem, 1.77vi + 2.61rem, 5.26rem);
--divi-h2: clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem);
--divi-h1: clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem);
}

Pertama, buat preset grup opsi default untuk setiap tingkat heading/judul. Untuk melakukannya, klik pada modul dengan judul atau judul (mereka berbagi grup opsi, meskipun mereka memiliki nama yang sedikit berbeda di seluruh modul). Di tab Desain , temukan teks tajuk atau teks judul . Klik ikon preset grup opsi .

Ini akan menampilkan menu setidaknya preset grup opsi default. Kami akan melanjutkan dan menggunakan preset OG default di sini untuk H1 kami. Klik ikon " Gear " untuk membuka pengaturan desain preset OG. Dalam langkah-langkah selanjutnya, kami akan membuat lebih banyak preset OG untuk setiap tingkat tajuk (H1-H6).

Anda akan melihat grup opsi yang kami kerjakan secara terbalik dari mode terang ke mode gelap (atau sebaliknya jika Anda memulai dalam mode gelap), yang merupakan cara yang bermanfaat untuk mengetahui konteks desain mana Anda berada. Gulir ke bawah untuk memimpin ukuran teks dan menempelkan nilai klem () dari preferensi Anda. Dalam kasus kami, kami menggunakan ini untuk H1:

 clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem) 

Pastikan untuk menggulir ke bawah dan klik simpan , atau Anda tidak akan berhasil menerapkan preset OG Anda.

Sekarang, kami akan melanjutkan melalui semua tingkat tajuk kami. Saya hanya akan menunjukkan kepada Anda tingkat heading berikutnya (H2). Melalui metode yang sama seperti sebelumnya, dapatkan ke area preset OG, hanya klik Tambahkan preset baru kali ini.

Agar preset OG kami digunakan pada H2S, kami akan menggunakan fungsi klem ini () dari generator:

 clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem); 

Pilih opsi H2 dari area pemilihan level heading . Kemudian tempel nilai klem () menjadi ukuran teks heading , yang akan mengatur ukuran judul H2 menggunakan preset OG itu.

Dari sana, Anda akan melanjutkan melalui tingkat tajuk Anda. Kita juga dapat mengatur ukuran teks tubuh kita dan hal -hal seperti teks tombol. Banyak modul memiliki jenis teks khusus yang mungkin dapat menggunakan nilai klem () ini, tetapi untuk beberapa orang, Anda mungkin ingin membuat lebih banyak (seperti label modul formulir atau teks meta posting blog).

Jika Anda ingin menggunakan variabel CSS, Anda akan mengikuti langkah-langkah yang sama persis (dengan asumsi Anda telah memuat variabel ukuran font dalam opsi tema> CSS ), tetapi alih-alih menempelkan nilai klem (), Anda akan menempelkan var (sesuatu seperti "–Divi-h1" atau konvensi penamaan apa pun yang Anda pilih untuk digunakan).

Lompat ke pengalaman Divi 5 hari ini

Divi 5 menambahkan fitur dengan kecepatan tinggi. Breakpoint responsif, semua unit CSS canggih, dan preset grup opsi hanyalah beberapa buah pertama dari infrastruktur kami yang baru dikembangkan.

Membangun situs web profesional dengan Divi semakin mudah dan lebih kuat. Saya tidak bisa lebih bersemangat bagi Anda untuk mencoba pengalaman baru. CSS Clamp hanyalah salah satu dari banyak fitur yang diminta pengguna Divi dan sekarang miliki. Jadi, jika Anda belum mengunduh Divi 5 Alpha terbaru, sekarang saatnya.

Cobalah berbagai fungsi CSS di seluruh bangunan Anda untuk melihat bagaimana mereka membuka kemungkinan desain baru. Fitur kecil ini memiliki dampak besar, dan membuktikan bahwa Divi 5 dirancang untuk membuat proses desain Anda lebih baik dari sebelumnya.