Cara mengganti font dengan variabel desain font divi 5

Pembaruan font bisa menjadi sakit kepala. Ubah font judul, dan tiba -tiba, Anda melacak setiap tempat yang muncul. Kehilangan satu atau dua judul, dan desain Anda segera terasa tidak aktif. Memperbarui font secara manual mengundang inkonsistensi.

Divi 5 memecahkan ini dengan variabel dan preset font. Alih -alih mengejar setiap contoh, Anda dapat mengatur font Anda sekali dan membiarkan sistem menangani sisanya. Tipografi tetap bersih dan bersatu, tidak peduli berapa banyak modul yang Anda gunakan. Lihatlah betapa sederhananya itu.

Mengapa font statis dapat menimbulkan masalah

Pengaturan font statis membuat jaringan komplikasi yang tumbuh lebih buruk dari waktu ke waktu. Saat Anda menambahkan font langsung ke setiap elemen, Anda menyebarkan pilihan tipografi di ratusan tempat yang berbeda.

Anda membangun situs menggunakan Playfair Display untuk judul dan poppins untuk teks tubuh. Beberapa bulan kemudian, Anda ingin beralih ke tumpukan font yang lebih modern. Sekarang, Anda berburu melalui setiap modul, setiap preset, setiap pengaturan khusus untuk menemukan di mana font itu tinggal. Nona bahkan satu judul terkubur jauh di bagian testimonial, dan desain Anda bisa terlihat rusak.

Saat Anda memperbarui font secara manual satu per satu, Anda dapat secara tidak sengaja menggunakan berbagai ukuran atau bobot. Anda memperbarui sebagian besar judul ke 32px tetapi melewatkan beberapa yang tetap di 28px. Desain Anda yang dulunya kohesif sekarang terasa tidak seimbang.

Metode yang tersebar ini mengubah perubahan font sederhana menjadi proyek -proyek besar. Apa yang seharusnya memakan waktu beberapa menit menjadi jam berburu dan memperbarui yang membosankan. Anda menghabiskan lebih banyak waktu mengelola tipografi daripada benar -benar mendesainnya.

Apa yang harus Anda gunakan sebagai gantinya: Variabel Desain & Preset Divi 5

Variabel desain menyimpan pengaturan desain Anda, yang dapat Anda gunakan kembali di mana saja. Atur font sekali, simpan sebagai variabel desain, lalu gunakan di seluruh situs Anda. Ubah variabel nanti, dan semua elemen menggunakannya memperbarui secara otomatis.

Divi menawarkan enam jenis variabel: angka, teks, gambar, tautan, warna, dan font. Dua variabel font default siap digunakan: satu untuk judul dan satu untuk teks tubuh. Manajer variabel berada di bilah sisi kiri di bawah ikon database.

Variabel -variabel ini bekerja di bidang yang tidak mendukungnya, seperti bidang angka, bidang font, dan pengaturan jarak. Klik ikon variabel di sebelah bidang yang didukung untuk melihat opsi Anda.

Preset opsi apa yang dilakukan preset

Preset grup opsi menyimpan grup gaya tertentu, seperti tipografi, perbatasan, atau jarak, bukan seluruh modul. Misalnya, Anda dapat membuat preset hanya untuk memimpin font dan ukuran.

Saat Anda menerapkan preset grup opsi, itu hanya mengubah area gaya itu. Sisa modul Anda tetap sama. Anda dapat menggabungkan berbagai preset pada satu elemen tanpa masalah. Variabel desain campuran dengan preset grup opsi untuk lebih banyak fleksibilitas. Buat preset yang menggunakan variabel Anda. Saat Anda memperbarui variabel, semua preset menggunakannya juga.

Panduan langkah demi langkah untuk membuat sistem font dinamis dengan Divi 5

Menyiapkan variabel font membutuhkan waktu sekitar dua puluh menit. Begitu mereka bekerja, perubahan font terjadi secara instan di seluruh situs Anda. Inilah cara menuju ke sana:

1. Buat variabel font untuk sistem baru Anda

Buka Variable Manager dengan mengklik ikon database di bilah sisi kiri Anda. Pergi ke tab Font. Anda akan melihat dua variabel default: satu untuk judul dan satu untuk teks tubuh.

• Atur font utama Anda: Klik variabel heading. Pilih keluarga dan berat badan font Anda, lalu simpan. Lakukan hal yang sama untuk teks tubuh, tetapi pilih sesuatu yang bersih dan mudah dibaca.
• Tambahkan lebih banyak font jika diperlukan: Beberapa desain memerlukan font tambahan untuk kutipan, testimonial, atau teks khusus. Klik "Tambahkan Variabel Baru" dan beri nama yang jelas.
• Isi semua detail: Setiap variabel memegang keluarga font, berat, gaya, dan pengaturan lainnya. Gunakan bobot tebal untuk tajuk utama, beban reguler untuk teks tubuh, dan huruf miring saat Anda ingin menambahkan penekanan.
• Jaga agar nama Anda sederhana: Alih -alih label yang membingungkan, panggil mereka "Kutipan Font" atau "Sorot Font."
• Ingatlah untuk menyimpan: Perubahan Anda tidak akan menempel sampai Anda menekan tombol simpan.

Sebagian besar situs web hanya perlu heading dan font tubuh. Hanya tambahkan variabel tambahan untuk kebutuhan desain khusus, bukan tweak teks kecil. Lebih sedikit variabel membuat membuat konten baru lebih mudah.

2. Tambahkan variabel angka untuk ukuran font

Beralih ke tab Numbers di Variable Manager. Di sini, Anda membuat variabel ukuran yang berfungsi dengan font Anda. Pikirkan ini sebagai skala tipografi Anda.

Mulailah dengan ukuran heading Anda. Buat variabel bernama H1, H2, H3, dan sebagainya. Atur masing -masing ke ukuran berbeda yang masuk akal untuk desain Anda. Anda dapat menggunakan nilai piksel biasa seperti 32px atau unit responsif seperti Clamp () untuk ukuran yang beradaptasi dengan layar lain.

Teks tubuh juga membutuhkan variabel ukurannya. Sebut saja sesuatu seperti "ukuran tubuh" dan atur ke ukuran bacaan yang nyaman, biasanya sekitar 16px hingga 18px.

Anda juga dapat membuat variabel untuk kebutuhan teks khusus. Mungkin Anda menginginkan variabel "teks kecil" untuk teks atau variabel "teks besar" untuk testimonial. Sebutkan mereka dengan jelas sehingga Anda ingat untuk apa mereka nanti.

Variabel angka ini berfungsi di mana pun Anda membutuhkan ukuran yang konsisten. Gunakan mereka untuk ketinggian garis, jarak, atau pengukuran apa pun yang muncul beberapa kali di situs Anda. Saat Anda memperbarui variabel angka, semuanya menggunakannya berubah secara otomatis.

Sebagian besar situs web hanya perlu heading dan font tubuh. Hanya tambahkan variabel tambahan untuk kebutuhan desain khusus, bukan tweak teks kecil. Lebih sedikit variabel membuat membuat konten baru lebih mudah.

3. Gunakan Temukan dan Ganti untuk menukar font statis

Klik kanan bidang font apa pun di pengaturan modul Anda untuk melihat opsi Temukan dan Ganti. Ini membuka panel tempat Divi memuat pengaturan font Anda saat ini secara otomatis. Anda sekarang dapat menukar font statis itu dengan salah satu variabel desain Anda.

Bidang elemen sumber menunjukkan modul mana Anda mulai. Anda dapat mengubah ini untuk memilih elemen lain di halaman Anda sebagai titik awal Anda.

Nilai Temukan menampilkan font apa pun yang ingin Anda ganti. Alih -alih memilih font statis lain, atur nilai ganti Anda ke salah satu variabel desain font Anda.

Temukan dan ganti pekerjaan untuk ukuran font juga. Klik kanan pada bidang ukuran font apa pun untuk mengakses panel pengganti yang sama. Ini memungkinkan Anda menukar ukuran tingkat elemen seperti 24px dengan variabel nomor Anda.

Cari modul teks di mana Anda mengatur ukuran font secara manual. Pengaturan ukuran yang tersebar ini menciptakan masalah yang sama dengan font statis. Ketika Anda ingin menyesuaikan skala tipografi Anda, Anda akhirnya berburu melalui setiap modul untuk menemukan setiap ukuran. Ganti ukuran statis ini dengan H1, H2, ukuran tubuh, atau variabel bilangan lainnya.

Atur Batas Penggantian Anda

Temukan dan ganti kontrol lokasi di mana perubahan terjadi. Pilih "seluruh halaman" untuk memperbarui font di seluruh tata letak Anda. Pilih "elemen saat ini dan anak -anak" untuk membatasi perubahan pada bagian tertentu dan apa pun yang bersarang di dalamnya.

Anda juga dapat menargetkan wadah induk atau area halaman tertentu.

Temukan dan ganti jenis elemen membantu Anda fokus pada modul tertentu. Pilih "Semua Elemen" untuk pertukaran font lengkap, atau pilih "Modul" untuk melewatkan kontainer dan elemen struktural. Anda bisa menjadi lebih spesifik dengan menargetkan hanya jenis modul tertentu.

Hindari penggantian yang tidak disengaja

Opsi "Only Replace Identical Fields" mencegah perubahan yang tidak diinginkan. Hidupkan ini saat Anda ingin mengganti font tanpa mempengaruhi pengaturan lain yang mungkin memiliki nilai yang sama.

Ini menjaga radius perbatasan Anda pada 10px bahkan ketika Anda mengganti font yang kebetulan disebut "10px" atau sesuatu yang serupa.

Tanpa pengaturan ini, temukan dan ganti mencari nilai target Anda di mana -mana. Dengan itu diaktifkan, sistem hanya mengubah bidang font yang sebenarnya, meninggalkan pengaturan desain lainnya saja.

4. Bekerja melalui sistem font Anda

Anda akan memerlukan operasi temukan dan mengganti yang terpisah untuk berbagai bobot dan gaya font. Situs Anda mungkin menggunakan keluarga font yang sama dalam beban biasa dan berani. Tangani setiap variasi secara individual, menggantinya dengan variabel desain yang sesuai yang Anda buat sebelumnya.

Setiap kali, prosesnya sama: klik kanan bidang font, atur nilai penggantian Anda ke variabel desain, pilih ruang lingkup Anda, dan terapkan perubahannya. Ulangi ini untuk setiap font statis yang perlu diperbarui.

5. Buat preset dengan variabel Anda

Akses modul teks apa pun dan arahkan ke tab Desain. Temukan tipografi dan klik ikon preset. Pilih variabel heading font Anda dari menu dropdown. Terapkan variabel nomor H1 Anda untuk ukuran.

Konfigurasikan tinggi garis dan nilai jarak. Beri nama preset "Heading Utama" dan simpan. Klik ikon Star untuk mengatur ini sebagai default Anda. Modul teks baru akan secara otomatis mengadopsi pengaturan ini. Semua modul yang ada dengan tag heading yang sama dan tidak ada gaya juga yang akan mewarisi pengaturan ini.

Anda dapat mengulangi proses ini untuk setiap tingkat tajuk. Setiap preset mempertahankan konsistensi sambil melayani tujuan yang berbeda.

Preset tipografi ini berfungsi dengan modul apa pun yang berisi bidang teks. Modul blurb, konten akordeon, testimonial, dan formulir kontak semua menerima preset yang sama. Kompatibilitas cross-module ini menghilangkan tugas gaya berulang.

Preset grup opsi hanya menargetkan kategori gaya spesifik. Terapkan preset tajuk untuk teks tombol sambil menjaga latar belakang tombol dan pengaturan perbatasan tetap utuh.

6. Perluas variabel baru Anda di semua elemen

Klik kanan elemen apa pun menggunakan variabel baru Anda. Pilih "Perpanjang atribut" dari menu. Konfigurasikan elemen sumber sebagai modul Anda yang baru -baru ini diperbarui.

Atur lokasi ke "seluruh halaman" untuk pembaruan lengkap. Di bawah jenis atribut, pilih "gaya" untuk fokus pada elemen desain saja.

Aktifkan "hanya mengganti bidang yang identik" untuk mencegah perubahan yang tidak diinginkan pada padding, margin, atau nilai numerik lainnya yang mungkin cocok dengan ukuran font Anda. Pilih "Semua Elemen" untuk memperbarui modul dan wadah, atau memilih "modul" untuk menargetkan elemen konten secara khusus.

Proses halaman kompleks di bagian yang lebih kecil daripada pembaruan di seluruh situs. Pilih "Bagian Saat Ini" untuk membatasi perubahan pada satu area pada satu waktu. Mulailah dengan bagian header Anda. Terapkan ekstensi variabel, tinjau hasil, dan lanjutkan ke area konten utama. Lengkapi bagian footer terakhir.

Pendekatan metodis ini mengidentifikasi format konflik lebih awal dan mengontrol proses pembaruan.

Divi 5 membuat tipografi lebih mudah

Anda biasa beralih dari tampilan playfair ke sesuatu yang modern dan memperbarui sebagian besar judul, tetapi lewatkan kesaksian itu di halaman tiga. Situs Anda tampak miring selama berminggu -minggu.

Variabel Divi 5 merampingkan tipografi situs web Anda. Ubah variabel heading Anda dari ikon database di bilah sisi, dan setiap modul teks memperbarui secara instan. Footer bentuk kontak itu disertakan.

Lain kali Anda mengubah citra, Anda akan memperbarui dua variabel alih -alih mengklik melalui lima puluh modul. Alat temukan dan ganti menangkap apa yang biasanya Anda lewatkan. Tipografi Anda tetap ketat, dan akhir pekan Anda tetap menjadi milik Anda.