Cara mengganti gaya statis dengan variabel desain Divi 5

Jika Anda pernah men-tweak warna, padding, atau font satu modul pada satu waktu, Anda mungkin menyadari betapa lambatnya, rawan kesalahan, dan perubahan gaya manual yang membosankan bisa terjadi.

Divi 5 memperkenalkan cara yang lebih cerdas untuk menanganinya. Dengan variabel desain dan temukan dan ganti, Anda dapat memperbarui gaya statis di seluruh tata letak Anda dan membangun sistem desain yang dapat digunakan kembali dalam hitungan menit. Mari kita lihat caranya.

Divi 5 siap digunakan di situs web baru.

Apa itu "gaya statis"?

Saat Anda mengimpor tata letak divi atau menggunakan bagian yang telah dirancang sebelumnya, semuanya, seperti font, warna, jarak, dan perbatasan, sudah diatur. Jika tata letak tidak menggunakan preset, Anda akan melihat bahwa nilai -nilai ini diterapkan pada level elemen.

Judul mungkin memiliki ukuran font yang diketik secara manual, tombol mungkin menggunakan kode warna tertentu, dan bantalan atau jarak mungkin menggunakan angka tetap. Nilai -nilai yang diterapkan secara langsung ini disebut gaya statis.

Dan sementara mereka tampak tidak berbahaya pada awalnya, mereka dapat dengan cepat menjadi masalah ketika Anda ingin melakukan perubahan. Masalah dengan gaya statis adalah mereka membutuhkan lebih banyak waktu untuk mengelola. Jika Anda ingin mengubah warna semua tombol Anda atau menyesuaikan jarak di seluruh bagian, Anda harus mengedit masing -masing secara manual. Itu lambat dan membuat frustrasi.

Sekarang, bayangkan Anda memperbarui merek situs web lengkap secara manual atau mengerjakan tata letak kompleks yang penuh dengan gaya berulang. Banyak desainer telah berbagi betapa frustrasi proses ini. Tetapi selama bertahun -tahun, tidak ada cara yang dapat diandalkan untuk memperbaikinya. Itu sebabnya kami membangun solusi yang lebih cerdas di Divi 5.

Bagaimana Divi 5 Membuat Mengganti Gaya Statis Mudah

Salah satu tujuan kami dengan Divi 5 adalah membuat alur kerja desain Anda lebih cepat dan kurang berulang. Untuk membantu itu, kami telah menambahkan dua fitur yang kuat: variabel desain , yang memungkinkan Anda memusatkan gaya Anda, dan menemukan dan mengganti , yang memungkinkan Anda memperbaruinya secara instan di seluruh tata letak Anda. Mari kita pahami secara detail.

Variabel desain memungkinkan Anda mendefinisikan gaya global Anda

Dengan Divi 5, Anda akhirnya dapat membangun kerangka desain Anda sendiri secara visual dan menggunakannya untuk memodifikasi gaya merek Anda dengan cepat.

Alih -alih secara manual menerapkan warna, font, atau jarak yang sama di setiap modul, Divi 5 sekarang memungkinkan Anda menyimpan nilai -nilai itu sebagai variabel desain. Ini adalah nilai yang dapat digunakan kembali, Anda dapat merujuk di seluruh situs Anda untuk membuat desain Anda lebih konsisten dan lebih mudah untuk dipelihara.

Di dalam pembangun visual, manajer variabel memungkinkan Anda membuat dan mengatur variabel dalam enam jenis yang berbeda: warna, font, angka (seperti jarak atau ukuran), teks, gambar, dan tautan.

Anda dapat menyimpan setiap variabel dengan nama yang jelas, seperti bantalan bagian, jadi menemukan dan menggunakan kembali itu lebih mudah. Tidak seperti menulis variabel CSS secara manual, antarmuka Divi memungkinkan Anda mengelola nilai -nilai ini secara visual tanpa menyentuh kode.

Menerapkan variabel yang disimpan ini juga lebih mudah. Saat menyesuaikan modul, buka pengaturan, cari ikon Variable Manager , dan pilih variabel Anda dari daftar.

Anda akan melihat keunggulan sebenarnya ketika saatnya melakukan perubahan. Katakanlah Anda ingin mengganti bantalan di mana -mana. Alih -alih mengedit lusinan modul, Anda cukup memperbarui nilai sekali di Variable Manager , dan memperbarui di seluruh situs Anda.

Perhatikan nilai yang berubah secara real time di bidang pengaturan yang diterapkan? Itulah kekuatan sistem desain global.

Dan ini juga tidak terbatas pada gaya desain. Untuk mengelola konten berulang secara efektif, Anda juga dapat menyimpan teks, gambar, dan tautan, seperti alamat, email, atau tagline perusahaan, sebagai variabel konten. Tidak perlu lagi menyalin-pasta, cukup masukkan seperti konten dinamis, dan itu akan tetap konsisten di situs Anda.

Pelajari segalanya tentang variabel desain

Temukan dan ganti memungkinkan Anda beralih dari statis ke gaya global

Fitur Temukan dan Ganti Divi 5 memungkinkan Anda dengan cepat memperbarui nilai gaya di seluruh tata letak Anda tanpa mengedit setiap modul secara individual. Ini dirancang untuk membantu Anda mengubah nilai statis seperti warna, font, jarak, atau pengaturan lain yang berulang di seluruh bagian dari satu titik awal dengan hanya beberapa klik.

Untuk menggunakannya, klik kanan pada bidang gaya apa pun di dalam pembangun visual atau melayang dan klik tiga titik. Anda akan melihat opsi Temukan & Ganti di dropdown.

Ini membuka panel temuan dan baru. Di sini, Anda dapat membuat perubahan yang diinginkan dan menerapkannya dalam jumlah besar.

• (1.) Elemen Sumber: Pengaturan yang Anda targetkan (misalnya, teks, warna, atau jarak). Buka dropdown, dan Anda akan melihat itu sebenarnya hierarki lapisan.
• (2.) Temukan Nilai: Nilai pasti yang ingin Anda ganti, seperti font atau kode warna tertentu.
• (3.) Ganti Nilai: Nilai atau variabel baru yang ingin Anda terapkan sebagai gantinya.
• (4.) Temukan dan ganti di lokasi: Pilih tempat untuk menerapkan perubahan. Modul ini, bagian, atau seluruh halaman.
• (5.) Temukan dan ganti dalam jenis elemen: Putuskan apakah perubahan harus berlaku untuk semua elemen atau hanya jenis modul tertentu.
• (6.) Hanya mengganti bidang yang identik: Saat diaktifkan, penggantian hanya terjadi jika pengaturan dan nilai cocok dengan tepat.

Begini cara kerjanya. Katakanlah Anda ingin mengubah font heading yang digunakan di halaman. Alih -alih menggunakan modul demi modul, kami akan menggunakan panel Temukan dan Ganti.

Saat Anda membukanya dari pengaturan heading, elemen sumber dipilih secara otomatis, jadi Anda tidak selalu harus memilihnya secara manual.

(Anda juga dapat mengklik berbagai elemen, dan opsi panel akan menyesuaikan secara otomatis.)

Dalam nilai temukan, masukkan nilai yang akan diganti. Sebagai contoh kami, ini adalah Medula One, font yang diterapkan saat ini. Dalam nilai ganti , pilih nilai baru yang ingin Anda terapkan. Mari Pilih Aclonica.

Kemudian pilih apakah Anda ingin memperbarui semua contoh di seluruh halaman atau hanya kolom, baris, atau bagian di lokasi temukan dan ganti di lokasi. Simpan temukan dan ganti jenis elemen karena semua elemen karena kami ingin menargetkan semua modul heading.

Dan itu saja. Cukup tekan Temukan dan ganti, dan dalam hitungan detik, 20 instance judul diperbarui. Perhatikan teks dan tombol tubuh tetap tidak tersentuh? Itu karena mereka menggunakan nilai yang berbeda. Dan itulah tepatnya sistemnya.

Divi hanya menerapkan perubahan di mana ia menemukan kecocokan yang tepat. Ini berarti Anda dapat membersihkan gaya statis dengan percaya diri, tanpa mengacaukan desain yang tidak perlu berubah. Tapi bagaimana variabel desain cocok di sini?

Mereka seperti lapisan gula pada kue. Anda juga dapat menggunakan variabel desain di bidang Nilai Ganti . Arahkan kursor, klik ikon Variable Manager, dan masukkan variabel yang disimpan.

Ini menautkan gaya Anda ke sistem yang dapat digunakan kembali secara global yang jauh lebih mudah dan lebih efisien untuk diperbarui. Inilah tepatnya bagaimana kami akan mengganti semua nilai statis kami dengan variabel desain ke situs web kami di masa depan untuk pembaruan yang lebih mudah.

Pelajari segalanya tentang menemukan dan mengganti

Kedua fitur ini (dan banyak lagi) tersedia di dalam Divi 5. Pembangun telah ditata ulang untuk menawarkan kinerja yang lebih cepat, alur kerja yang lebih cerdas, dan lebih banyak kontrol. Jujur, membaca tentang mereka itu menarik, tetapi Anda akan melihat perubahan nyata ketika Anda mengalami fitur -fitur ini untuk diri sendiri.

Cara mengganti gaya statis dengan variabel yang disimpan

Sekarang Anda tahu alat apa yang akan kami gunakan, saatnya melihatnya beraksi.

Untuk memandu Anda melalui proses, saya telah mengimpor tata letak halaman pendaratan toko pai sebagai contoh. Detail desain tata letak ini, seperti font, warna, dan jarak, diterapkan sebagai gaya statis. Cara tradisional mengharuskan Anda untuk menyesuaikan modul dengan modul. Tetapi dalam tutorial ini, kami akan menggantinya langkah demi langkah menggunakan alur kerja yang baru saja kami bahas.

Tetapi sebelum Anda menyelam, luangkan waktu sejenak untuk memindai tata letak Anda untuk pola. Cari gaya berulang, seperti warna yang sama yang digunakan lintas tombol, ukuran font yang sama dalam judul, jarak yang konsisten antar bagian, atau pengaturan perbatasan yang identik. Nilai berulang ini adalah kandidat terbaik Anda untuk variabel desain, terutama jika Anda cenderung mengubahnya nanti.

1. Simpan variabel desain Anda

Setelah menganalisis tata letak toko pie, saya telah mengidentifikasi beberapa nilai yang muncul secara konsisten di seluruh halaman dan ingin memperbaruinya dengan gaya pilihan saya. Ini termasuk:

• Lebar perbatasan baris
• Bantalan tombol
• Heading Text
• Teks tubuh
• Warna teks tubuh

Saat ini, mereka diterapkan sebagai gaya statis. Jadi, alih -alih mengulangi pengaturan yang sama secara manual, saya akan mengubahnya menjadi variabel desain. Ini memberi saya kerangka kerja sederhana dan dapat digunakan kembali untuk memperbarui gaya halaman hanya dengan beberapa klik.

Mari kita mulai dengan lebar perbatasan pada baris. Untuk membuat dan menyimpan variabel, buka manajer variabel dan pilih jenisnya. Untuk lebar perbatasan baris, saya akan memilih variabel angka . Selanjutnya, beri nama variabel Anda dan tetapkan nilai. Klik Simpan Variabel.

Setelah disimpan, variabel ini siap digunakan kembali dengan klik. Ini akan muncul di mana saja lebar perbatasan dapat ditetapkan. Saya akan mengikuti proses yang sama untuk teks heading, font tubuh, warna teks, dan bantalan tombol. Variabel yang disimpan ini sekarang membentuk fondasi bahasa desain tata letak saya. Anda melakukan hal yang sama.

Dengan cara ini, jika Anda memutuskan untuk mengubah jarak tombol Anda atau mengubah font nanti, Anda tidak perlu memperbarui setiap modul satu per satu. Cukup perbarui variabel, dan sisanya akan memperbarui diri.

2. Gunakan Temukan dan Ganti untuk beralih gaya statis ke variabel

Dengan variabel desain kami siap, langkah selanjutnya adalah mengganti nilai statis melintasi tata letak menggunakan Find and Replace. Mari kita mulai dengan bantalan tombol.

Saat ini, setiap tombol menggunakan padding yang dimasukkan secara manual: 6px untuk atas dan bawah, dan 1px untuk kiri dan kanan. Untuk membawa konsistensi dan membuat pembaruan lebih mudah, saya telah membuat dua variabel:

• Tombol-T = 12px untuk bantalan atas dan bawah.
• Button-L = 32px untuk bantalan kiri dan kanan.

Untuk menerapkan ini, saya akan membuka pengaturan tombol apa pun, pergi ke Design> Spacing> Padding , klik kanan nilai padding, dan pilih Temukan & Ganti dari opsi.

Di panel Temukan dan Ganti, saya akan mengganti nilai statis yang ada dengan variabel yang disimpan dari manajer variabel.

Setelah mengklik Temukan & Ganti , semua instance lima tombol di seluruh pembaruan halaman secara instan untuk menggunakan nilai padding baru.

Anda dapat mengikuti langkah yang sama untuk gaya statis lain yang kami identifikasi sebelumnya. Gunakan Temukan dan Ganti untuk menukar masing -masing dengan variabel yang Anda simpan, dan Anda akan berakhir dengan tata letak yang sepenuhnya terhubung ke sistem desain global Anda.

3. Konversikan gaya pilihan Anda menjadi preset (opsional)

Langkah ini opsional untuk ruang lingkup artikel ini, tetapi ini adalah cara yang ampuh untuk memperluas sistem desain Anda.

Setelah Anda mengganti gaya statis dengan variabel, Anda dapat menyimpan modul -modul tersebut sebagai preset grup opsi. Misalnya, setelah menetapkan variabel yang disimpan untuk lebar perbatasan ke baris, saya menyimpan baris itu sebagai preset perbatasan baris.

Menggunakan variabel di dalam preset berarti setiap pembaruan di masa depan untuk sistem desain Anda, seperti mengubah nilai variabel, akan secara otomatis mencerminkan semua modul menggunakan preset itu. Tidak perlu menerapkan kembali atau memperbarui apa pun secara manual.

Jadi, kami tidak hanya memperbarui seluruh halaman dengan branding baru hanya dalam beberapa klik, tetapi kami juga menciptakan sistem fleksibel yang membuat pembaruan di masa depan lebih cepat, lebih mudah, dan terhubung sepenuhnya. Bagaimana cara kerjanya dalam tata letak nyata? Saatnya melihatnya beraksi.

Memperbarui gaya halaman Anda lebih mudah dari sebelumnya

Alasan kami beralih dari gaya statis ke variabel desain adalah sederhana: mereka membuat pembaruan lebih mudah. Dengan variabel desain di tempat, mengedit tata letak Anda menjadi sangat sederhana.

Jika Anda ingin mengubah font judul di situs web Anda, Anda tidak perlu mengedit setiap modul satu per satu. Cukup buka manajer variabel, perbarui nilai font yang Anda simpan sebelumnya, dan perubahan berlaku di mana -mana variabel itu digunakan.

Preset grup opsi Anda juga akan diperbarui secara otomatis jika mereka menggunakan variabel desain. Ini membuat gaya Anda tetap terhubung, jadi Anda tidak perlu mengulangi pengeditan yang sama pada modul atau halaman yang berbeda.

Ketika saya menyesuaikan tata letak toko pie lebih awal, saya tidak secara manual menyesuaikan setiap tombol atau tajuk. Saya cukup mengedit variabel yang saya simpan. Font, padding, dan warna yang saya tetapkan sebelumnya diterapkan di halaman secara otomatis. Tata letak mengikuti sistem yang sudah saya bangun.

Tentu, mengutak -atik bantalan atau mengubah warna dalam satu modul tidak sulit. Tetapi ketika Anda memperbarui lusinan gaya di seluruh situs, perbedaannya sangat besar. Ini bukan hanya lebih cepat, itu lebih bersih, lebih dapat diandalkan, dan jauh lebih rentan terhadap kesalahan.

Ini adalah nilai nyata dari beralih ke variabel: seluruh desain Anda menjadi lebih mudah dikelola. Dan ketika klien Anda meminta perubahan branding cepat bulan depan? Anda akan selesai sebelum mereka menyelesaikan kopi mereka.

Membuat pengeditan curah mudah dengan menemukan dan mengganti

Anda tidak perlu memulai dari awal setiap kali desain Anda berubah. Dengan sistem Divi 5, pembaruan terasa kurang seperti tugas dan lebih seperti langkah maju yang sederhana.

Alur kerja ini tidak hanya membantu selama pengaturan. Itulah yang membuat pembaruan di masa depan lebih mudah. Apakah klien Anda meminta font baru atau Anda ingin menguji warna merek yang berbeda, Anda dapat melakukan perubahan sekali dan melihatnya tercermin di mana -mana.

Divi 5 dirancang untuk mendukung bagaimana orang nyata merancang situs web. Dan sekarang, sistem desain Anda bisa sama fleksibelnya dengan ide -ide Anda.