Membandingkan pemetik warna Divi 4 dan Divi 5

Warna mengatur nada sebelum satu kata dibaca, tetapi pemetik warna tradisional membuatnya sulit untuk mencapai konsistensi merek yang sebenarnya. Alih-alih presisi, Anda sering mendapatkan perkiraan dan pendekatan yang cukup dekat.

Itulah mengapa Divi 5 benar -benar menata kembali sistem warnanya. Dalam posting ini, kami akan membandingkannya secara langsung dengan pemetik warna Divi 4 dan menunjukkan betapa jauh lebih kuat dan fleksibel.

Pemetik warna dibandingkan

Masukkan mereka berdampingan, dan Anda akan segera melihat seberapa kuat antarmuka baru itu. Pemilih warna Divi 4 melayani kami dengan baik dengan spektrum pelangi yang akrab dan pendekatan drag-to-select.

Anda akan menyeret lingkaran putih itu untuk memilih warna, bekerja dengan kode hex, dan mengatur berbagai hal melalui tab yang disimpan, global, dan terbaru. Segitiga putih kecil pada swatch warna memberi tahu Anda mana yang merupakan warna global.

Di luar penampilannya, pemetik warna Divi 4 memiliki fondasi yang bagus. Alat warna ajaibnya cukup pintar, menarik dari warna halaman Anda dan pilihan terbaru untuk menyarankan palet yang benar -benar bekerja bersama. Ketukan ini dimulai dari awal setiap saat.

Dimana divi 4 menjadi terbatas

Namun, tidak semua sempurna. Semuanya menggunakan kode HEX atau RGBA saja. Mendapatkan versi yang lebih ringan dari warna biru Anda berarti menebak atau menggunakan aplikasi lain untuk mengetahuinya. Jika branding Anda sering membutuhkan 20% lebih gelap atau 40% warna yang lebih terang dari warna merek utama, Divi 4 tidak dapat melakukan ini untuk Anda.

Setiap warna hidup dengan sendirinya. Anda tidak dapat membangun sistem warna pintar di mana warna terkait satu sama lain di dalam Divi itu sendiri. Membangun rasio kontras yang tepat mengambil pekerjaan manual di luar Divi.

Apa 5 Perubahan Visual Divi

Divi 5 menjaga pemetik warna visual tetapi menambahkan slider yang tepat dengan lebih banyak opsi (kita akan membahas ini lebih lanjut). Tab global berkembang menjadi ikon variabel dinamis yang terhubung langsung ke sistem variabel Divi, yang mencakup warna.

Warna swatch sendiri menjadi lebih pintar; Mereka benar -benar menunjukkan jenis warna apa yang Anda kerjakan dan bagaimana terhubung ke sistem Anda.

Apa yang Anda lihat adalah divi yang bergerak dari pengambilan warna individu ke sistem warna. Divi 4 dibangun untuk "Saya butuh biru khusus ini." Divi 5 dibangun untuk "Saya butuh biru yang 20% lebih ringan dari warna utama saya dan pembaruan secara otomatis ketika saya mengubah warna merek saya sama sekali."

Antarmuka harus berubah karena apa yang terjadi.

Pemetik Warna Baru Divi 5

Tim kami membangun kembali sistem warna karena pendekatan lama tidak dapat menangani alur kerja desain modern. Pemilih baru ini berpusat di sekitar rona, saturasi, dan cahaya (HSL), hubungan warna relatif, dan integrasi mendalam dengan sistem variabel Divi 5.

Alih -alih bekerja dengan kode hex yang terisolasi, Anda sekarang dapat membangun keluarga warna yang terhubung di mana mengubah satu warna secara otomatis memperbarui semua variasi terkait. Ada slider terpisah untuk rona, saturasi, cahaya, dan opacity, yang memungkinkan Anda melakukan penyesuaian yang tepat. Antarmuka menunjukkan jenis warna apa yang Anda kerjakan melalui indikator visual.

Color Swatch sekarang menampilkan informasi tentang diri mereka sendiri. Anda dapat melihat apakah warna adalah nilai statis, variabel, atau warna relatif dengan modifikasi HSL yang diterapkan. Sistem ini menunjukkan semua detail warna yang perlu Anda ketahui.

Bagaimana sistem baru sebenarnya bekerja

Warna relatif dimulai dengan variabel warna dasar dan memungkinkan Anda untuk menerapkan variasi. Pilih variabel biru utama Anda, kurangi cahaya hingga 20%, dan simpan sebagai variabel "Royal Deep Blue".

Pilihan Warna HSL Divi 5 Vs Divi 4's Color Picker

Kedua sistem membantu Anda mengelola warna di seluruh situs Anda tetapi bekerja dengan cara yang sama sekali berbeda. Memahami perbedaan ini menjelaskan mengapa antarmuka harus berubah secara dramatis dan mengapa pendekatan baru mempercepat pembangunan.

Bagaimana cara kerja warna global Divi 4

Warna global Divi 4 bekerja seperti sistem palet dasar. Simpan merek Anda biru sekali, lalu klik setiap kali Anda membutuhkan warna yang tepat. Kemudian, bertukar biru itu dengan yang berbeda dan tonton setiap tombol, header, dan pembaruan latar belakang di seluruh situs Anda.

Kebanyakan orang mengatur tiga atau empat warna merek utama dengan cara ini. Ini mengalahkan perburuan melalui kode hex atau mencoba mengingat jika Anda menggunakan #2E86C1 atau #3498DB untuk tautan Anda.

Masalahnya muncul kemudian ketika Anda memiliki delapan warna global dan tidak dapat mengingat mengapa Anda menyimpan warna abu -abu tertentu. Apakah itu untuk teks? Perbatasan? Latar belakang latar belakang? Warna global tidak memiliki label atau deskripsi untuk meluncurkan ingatan Anda.

Mengapa Divi 5 pindah ke variabel desain

Variabel desain sekarang menangani lebih dari sekadar warna. Font, nomor jarak, gambar, dan string teks semuanya mendapatkan perlakuan yang sama. Semuanya hidup dalam satu manajer variabel alih -alih mengambang di sekitar panel yang berbeda.

Setiap variabel mendapatkan nama dan deskripsi yang tepat. Alih -alih "Global Color 3," Anda dapat menyebutnya "Teks Header Grey" atau "Overlay Latar Belakang yang halus." Enam bulan kemudian, Anda akan tahu persis untuk apa itu.

Tapi di sinilah segalanya menjadi menarik. Variabel dapat saling merujuk dan membentuk hubungan. Atur hijau utama Anda sebagai fondasi. Buat "lumut terbakar" yang mengambil hijau itu dan mengurangi kecerahannya. Kemudian, bangun "bayangan (lumut terbakar)" yang membawa warna lumut yang terbakar ini dan menjatuhkan opacity menjadi 15%.

Dan, tentu saja, ketiga variasi memperbarui secara otomatis jika Anda mengubah hijau utama Anda menjadi oranye. Versi terbakar tetap kurang cerah dari warna apa pun yang Anda pilih, dan bayangannya beradaptasi. Hubungan menempel.

Perbedaan utama dalam latihan

Warna global berarti memiliki warna yang sama di banyak tempat. Variabel berarti memiliki hubungan warna yang beradaptasi bersama. Melayang -layang negara tetap terhubung dengan warna dasar. Warna bayangan berhubungan dengan palet merek Anda alih -alih hidup sebagai abu -abu acak. Sistem mempertahankan koneksi ini tanpa Anda harus melakukan pekerjaan tambahan.

Menyiapkan sistem warna Anda di Divi 4 vs Divi 5

Membuat sistem warna yang tepat menentukan apakah situs web Anda terlihat profesional atau seperti tambalan pilihan acak. Kedua versi Divi menawarkan cara untuk mengatur warna Anda, tetapi pendekatan mereka tidak bisa lebih berbeda. Inilah cara membangun sistem warna di setiap versi dan mengapa prosesnya penting untuk alur kerja desain Anda:

Menyiapkan warna di Divi 4

Pilihan warna Anda membentuk bagaimana pengunjung mengalami situs web Anda. Lihatlah pendekatan untuk manajemen warna Divi 4 mengambil:

1. Tambahkan warna global Anda

Pengaturan warna Divi 4 mengandalkan sistem warna global dan organisasi manual. Anda akan mulai dengan menavigasi ke opsi warna elemen apa pun, kemudian membuat warna global dengan menavigasi ke tab "Global", mengklik ikon plus di sebelah pemetik warna, atau mengedit warna global yang ada dengan mengkliknya. Antarmuka memungkinkan Anda memasukkan kode hex secara langsung atau menggunakan pemetik visual untuk memilih warna.

Apakah Anda sudah memiliki warna yang diterapkan yang ingin Anda konversi? Klik kanan di atasnya dan pilih "Konversi ke Global." Ini menambah warna yang tepat ke palet global Anda dan mengganti modul untuk menggunakan versi global. Ini sangat membantu ketika Anda menyadari bahwa Anda seharusnya membuat sesuatu yang global sejak awal.

Saran warna ajaib

Fitur warna ajaib Divi 4 membangun palet terkoordinasi dari pilihan desain Anda yang ada. Alih -alih menebak warna mana yang bekerja bersama, alat ini membuat saran berdasarkan apa yang sudah Anda gunakan.

Cari tiga titik (elips) di bawah eyedropper warna aktif Anda. Klik titik -titik itu untuk mendapatkan banyak saran palet warna. Divi melihat warna apa yang sudah Anda gunakan di halaman Anda dan dalam proyek terbaru dan menunjukkan kepada Anda kombinasi yang harus bekerja bersama.

2. Menerapkan warna global Anda

Menggunakannya cukup mudah setelah Anda mengatur beberapa warna global. Klik ke modul apa pun di mana Anda ingin menerapkan warna. Kemudian, pergilah ke tab Desain dan temukan pengaturan warna yang ingin Anda ubah.

Klik Global untuk melihat palet warna global Anda. Klik swatch warna global apa pun, dan segera berlaku untuk modul Anda.

3. Memodifikasi Warna Global Anda

Di sinilah segalanya menjadi menarik. Ketika Anda ingin mengubah warna global, Anda tidak perlu berburu melalui setiap modul yang menggunakannya. Cukup buka pengaturan warna apa pun, klik tab global, dan temukan warna yang ingin Anda edit.

Menyiapkan warna Anda di Divi 5

Membangun sistem warna yang tepat di Divi 5 membutuhkan empat langkah. Mengikuti pendekatan ini mengalahkan metode lama menebak kode warna kapan pun Anda membutuhkan warna yang sedikit berbeda:

1. Buat variabel warna dasar Anda

Buka manajer variabel desain dan tambahkan warna merek utama Anda sebagai variabel warna primer dan sekunder yang ada. Anda juga dapat menambahkan lebih banyak warna, seperti warna tersier atau aksen. Ini menjadi warna fondasi Anda. Warna dasar Anda harus mewakili palet merek utama Anda, yang mendefinisikan identitas visual Anda.

2. Bangun warna relatif dari pangkalan Anda

Sekarang Anda dapat membuat variasi warna yang terhubung ke warna dasar Anda. Tambahkan warna baru di manajer variabel desain dan pilih warna dasar Anda.

Gunakan slider HSL untuk menyesuaikannya: cahaya bawah sebesar 25% untuk teks heading, 20% untuk teks tubuh; Naikkan cahaya sebesar 20% untuk keadaan melayang, atau mengubah saturasi untuk latar belakang yang diredam. Berikan variasi ini nama -nama yang jelas seperti "oranye dalam" dan "crimson cerah," atau "hover state (warna primer)," "latar belakang yang diredam (warna sekunder)."

Semua variabel desain dapat ditumpuk, sehingga Anda dapat membangun lebih banyak warna dari yang Anda buat. Mereka semua tetap terhubung ke sistem.

Jika Anda mengubah warna dasar Anda nanti, warna terkait ini diperbarui secara otomatis, menjaga hubungan tetap utuh.

3. Terapkan variabel ke elemen Anda

Gunakan ikon konten dinamis di bidang warna apa pun untuk mengakses variabel Anda. Antarmuka menunjukkan apakah setiap warna statis, variabel, atau warna relatif dengan modifikasi HSL.

Pilih dari sistem warna terorganisir Anda alih-alih menciptakan warna satu kali acak yang merusak konsistensi.

Saat Anda mengubah properti dari salah satu basis Anda atau warna yang dibangun, semuanya diwarisi dari yang akan secara otomatis beradaptasi dengan perubahan baru. Tidak perlu menggosok secara manual dan mengganti warna saat Anda memutuskan penyegaran merek.

4. Preset bangunan yang merujuk variabel warna HSL

Bangun strategi Anda menggunakan preset grup opsi untuk bagian desain tertentu. Preset ini berbeda dari preset elemen. Preset grup opsi grup gaya target seperti latar belakang, perbatasan, atau warna teks menggunakan variabel Anda.

Simpan bayangan sebagai preset grup opsi menggunakan variabel warna bayangan berdasarkan warna utama Anda.

Gunakan preset ini pada kolom, bagian, baris, dan modul.

Buat preset grup opsi terpisah untuk warna yang berbeda: satu untuk perbatasan dengan warna aksen Anda, yang lain untuk teks dengan warna sekunder Anda, dll. Campurkan preset ini di seluruh elemen tanpa mengubah gaya lainnya.

Preset elemen menyimpan pengaturan modul penuh, termasuk konten dan semua gaya. Membuat preset elemen untuk tombol bergaya terkunci di preset grup opsi dan variabel warna yang digunakan. Menerapkannya secara instan memberi Anda tombol yang sama persis.

5. Menggulirkan warna di situs Anda

Fitur Extand Atribut mengambil ini lebih jauh dengan membiarkan Anda menyalin properti desain antar elemen. Saat Anda menyempurnakan skema warna ikon menggunakan variabel Anda, Anda dapat memperluas atribut tersebut ke ikon lain di baris, halaman, atau seluruh situs Anda.

Ini mempertahankan hubungan warna Anda sambil menyebarkan gaya yang konsisten tanpa pekerjaan manual.

Divi 5's Find and Rect Fitur mempercepat proses konversi untuk situs yang ada dengan warna statis yang tersebar. Klik kanan bidang warna apa pun dan pilih "Temukan dan Ganti."

Atur ruang lingkup Anda untuk menargetkan elemen spesifik, seluruh bagian, atau seluruh halaman. Di bawah "Ganti dengan," pilih variabel baru Anda dari tab Global. Periksa "ganti semua nilai yang ditemukan" untuk menukar setiap contoh warna itu dengan variabel Anda.

Ini bekerja dengan sempurna saat bermigrasi desain lama ke sistem warna baru. Anda dapat mengganti lusinan jeruk serupa tetapi tidak identik dalam detik dengan satu variabel yang konsisten.

Semua aspek bekerja bersama: Tetapkan variabel warna Anda, gunakan Temukan dan ganti untuk membersihkan inkonsistensi yang ada, kemudian gunakan atribut Perluasan untuk mempertahankan standar desain saat Anda membangun bagian baru. Kemudian, bangun halaman secara normal, karena gaya dapat dengan mudah diterapkan menggunakan grup opsi dan preset elemen.

Pemetik warna baru akan sesuai dengan alur kerja Anda

Sistem warna Divi 5 memperbaiki masalah alur kerja yang telah memperlambat proyek selama bertahun -tahun. Anda tidak lagi harus menggunakan alat eksternal untuk menemukan warna yang tepat. Slider HSL memberi Anda kontrol yang tepat tanpa meninggalkan pembangun.

Keputusan warna Anda tetap terhubung melalui variabel desain. Saat Anda mengubah warna merek utama Anda, pembaruan warna terkait secara otomatis sambil menjaga hubungan mereka. Ini mengalahkan secara manual memburu setiap variasi biru yang Anda buat dengan mata.

Cobalah sistem warna baru di Divi 5 hari ini!