Mengubah warna merek klien Anda menjadi sistem warna Divi 5

Warna merek biasanya dimulai dengan kode hex diterapkan di seluruh judul, tombol, dan latar belakang. Ini cukup sederhana pada awalnya, tetapi seiring dengan tumbuhnya tata letak, Anda sering membutuhkan variasi warna yang lebih terang, keadaan melayang, atau aksen pelengkap. Mengelola itu secara manual bisa berantakan.

Sistem warna baru di Divi 5 membuat ini lebih mudah dengan membiarkan Anda mendefinisikan palet sekali dan membangun warna yang terhubung dari palet warna awal Anda. Setiap warna tetap sinkron, bahkan ketika desain berkembang. Dalam panduan ini, Anda akan belajar cara membuat sistem warna yang fleksibel dan dapat diskalakan yang membuat semuanya konsisten di situs klien Anda.

Memahami Sistem Warna Divi 5

Jika Anda telah bekerja dengan warna global di Divi 4, Anda sudah tahu betapa berguna untuk menentukan warna sekali dan menerapkannya di situs Anda. Divi 5 membangun ide yang sama, tetapi kali ini, itu mengubah warna menjadi sistem lengkap yang berskala dengan Anda.

Berlangganan saluran YouTube kami

Berikut adalah tiga peningkatan utama:

Dimulai dengan variabel desain. Anda mendefinisikan palet merek Anda di dalam tab Warna di Variable Manager, dan nilai -nilai ini menjadi fondasi Anda. Setelah didefinisikan, mereka siap digunakan di modul atau bagian apa pun. Dan ketika merek berkembang di telepon, Anda hanya perlu memperbarui variabel di satu tempat. Semuanya terkait dengan mereka menyesuaikan diri.

Peningkatan kedua adalah filter warna HSL. Slider memungkinkan Anda untuk menyesuaikan rona, saturasi, dan cahaya, memberi Anda lebih banyak kontrol saat bekerja dengan nada dan kontras.

Jika hijau utama Anda terasa terlalu keras untuk latar belakang, Anda dapat melunakkannya sedikit, menyesuaikan kecerahan, dan menyimpan versi itu sebagai variabelnya. Ini akan menjadi warna baru, tetapi masih terkait dengan warna aslinya.

Ini juga membuka ruang untuk berpikir dalam hubungan daripada nilai -nilai yang terisolasi. Anda dapat menghubungkan variabel bersama -sama sehingga seseorang selalu menempuh jarak tertentu dari yang lain, seperti lebih gelap, lebih ringan, sedikit lebih hangat, atau lebih tenang. Ini disebut warna relatif, yang merupakan perbaikan ketiga.

Warna hover, misalnya, dapat didefinisikan sebagai 20% lebih gelap dari primer. Jika warna utama berubah, keadaan hover menjaga hubungannya tanpa perlu penyesuaian manual.

Sistem tiga bagian ini menciptakan sistem warna kerja yang fleksibel dan membumi. Anda tidak hanya menerapkan warna satu modul sekaligus; Anda sedang membangun palet yang dapat bergeser sesuai kebutuhan sambil menjaga desain Anda konsisten dan bersih.

Pelajari segalanya tentang sistem warna baru Divi

Jika Anda telah mengandalkan kode hex sampai sekarang, ini adalah titik di mana alur kerja mulai terasa terbatas. Dan itulah isyarat Anda untuk beralih ke sistem warna yang siap di masa depan.

Mengubah warna merek klien Anda menjadi sistem warna Divi 5

Sekarang setelah Anda tahu bagaimana sistem warna Divi 5 bekerja, mari kita berjalan seperti apa dalam proyek nyata. Untuk contoh ini, kami telah mengimpor tata letak halaman beranda augmented reality dari perpustakaan Divi.

Mari kita bangun skenario. Misalkan klien ingin menambahkan warna pelengkap untuk menyeimbangkan hijau tebal yang digunakan di seluruh situs. Alih -alih menambahkannya secara manual di beberapa tempat, mari kita ambil ini sebagai kesempatan untuk mengalihkan tata letak ke sistem warna Divi 5 sehingga kita tidak harus membuat perubahan manual di masa depan jika ditanya lagi.

Jika Anda melihat melalui tata letak, Anda akan melihat bahwa hijau yang sama muncul di beberapa tempat, seperti judul, tombol, dan elemen aksen. Masing -masing menggunakan kode hex tetap. Tujuan kami adalah mengganti mereka dengan variabel warna dan membangun palet yang dapat beradaptasi dengan perubahan nanti.

Biasanya, memperbarui tata letak seperti ini berarti mengedit setiap modul dengan tangan. Tetapi dalam beberapa langkah berikutnya, kami akan menggunakan variabel warna, filter HSL, dan logika warna yang terhubung untuk membangun sesuatu yang lebih stabil. Anda dapat mengikuti tata letak yang sama atau menggunakan proyek Anda sebagai basis.

1. Simpan warna utama klien Anda sebagai variabel desain

Jika klien Anda telah berbagi kode hex baru, atau Anda tetap dengan warna merek yang ada, langkah pertama adalah menambahkannya ke manajer variabel desain. Ini menjadi warna dasar Anda dan akan menjadi fondasi untuk variasi warna yang Anda bangun di sekitarnya.

Menambahkan warna primer

Untuk memulai, buka manajer variabel dan beralih ke tab Warna .

Panel mungkin sudah memasukkan nilai default untuk teks primer, sekunder, heading, dan tubuh. Di bidang warna primer, masukkan kode hex untuk warna merek utama dan klik variabel simpan.

Menambahkan warna sekunder

Selanjutnya, kami akan membuat versi relatif dari warna sekunder ini menggunakan primer sebagai basis. Dengan begitu, setiap perubahan di masa depan pada warna dasar akan terbawa secara otomatis.

Dalam contoh ini, karena kami menambahkan warna pelengkap untuk menyeimbangkan hijau yang ada, kami akan menetapkannya sebagai warna sekunder. Latar belakang tata letak berwarna hitam, jadi pasangan ini menonjol dengan jelas.

Jika Anda hanya bekerja dengan satu warna untuk saat ini, jangan ragu untuk meninggalkan slot sekunder yang diatur ke hitam.

Klik swatch warna sekunder untuk membuka jendela warna. Semua nilai yang Anda simpan akan terdaftar di bawah warna global, dengan warna utama yang terdaftar terlebih dahulu.

Pilih itu. Ini membawa warna dasar sebagai titik awal Anda.

Sekarang, klik pada swatch lagi untuk membuka kembali jendela, lalu buka dropdown filter warna . Ini mengungkapkan slider HSL, di mana Anda dapat menyesuaikan rona, saturasi, dan cahaya.

Gunakan slider ini untuk membentuk warna baru. Setelah Anda senang dengan itu, simpan. Dan begitu saja, Anda memiliki warna sekunder yang terhubung ke primer.

Jika Anda ingin menjaga warna sekunder hitam tetapi tetap menghubungkannya ke primer, balikkan cahaya dan saturasi slider sampai ke -100.

Untuk menciptakan warna yang lebih gelap sebagai gantinya, tinggalkan rona dan saturasi apa adanya dan mengurangi hanya cahaya.

Pada titik ini, Anda dapat bereksperimen dengan bebas. Sesuaikan nilainya sampai nada terasa tepat untuk desain Anda. Apakah warna baru menyatu dengan lembut dengan palet merek atau menonjol sebagai kontras, itu akan tetap terkait dengan primer dan berkembang dengannya.

2. Bangun warna pendukung menggunakan penyesuaian HSL

Dengan warna primer dan sekunder Anda, langkah selanjutnya adalah memperluas palet. Warna -warna pendukung ini memberi ruang desain Anda untuk bernafas. Mereka menambahkan fleksibilitas, kontras halus, dan ritme visual di seluruh tata letak.

Untuk membuat variasi ini, buka panel HSL dan sesuaikan slider:

• Buat nuansa yang lebih ringan untuk bagian atau latar belakang yang membutuhkan kontras tanpa menarik perhatian.
• Gunakan nada yang sedikit lebih gelap untuk tombol, melayang -layang, atau tajuk tebal yang perlu menonjol.
• Geser rona atau saturasi sedikit untuk membentuk warna aksen. Warna ini bagus untuk pembagi, ikon, atau sorotan visual kecil lainnya.

Kami akan menunjukkan kepada Anda bagaimana melakukannya sekali, dan Anda dapat mengikuti pendekatan yang sama untuk menentukan semua warna baru yang Anda inginkan. Katakanlah kami ingin membuat versi hover dari warna sekunder. Kami akan membuat variabel warna baru, memberi nama yang jelas, menyesuaikan slider untuk mendapatkan nada yang benar, dan menyimpannya.

Sekarang variabel disimpan, kita dapat menerapkannya pada keadaan hover tombol, seperti warna lainnya.

Saat Anda menambahkan warna pendukung, cobalah menganggapnya sebagai ekspresi nada dari merek, variasi yang mencerminkan berbagai tingkat penekanan, kontras, atau suasana hati. Misalnya, nada lunak bekerja dengan baik untuk latar belakang, yang berani menarik perhatian pada ajakan untuk bertindak, dan nada yang diredam berguna untuk overlay atau teks sekunder.

Anda secara teknis dapat membuat semua ini secara manual menggunakan kode hex. Dan jika Anda hanya membangun situs satu halaman, itu mungkin baik-baik saja. Tetapi saat klien Anda ingin mengubah warna inti, setiap jalan pintas mulai menunjukkan batasnya. Yang kami maksud adalah, Anda tidak akan melacak berapa banyak tempat Anda menggunakan naungan latar belakang di situs web. Dalam skenario itu, membangun variasi ini karena variabel yang terhubung membutuhkan waktu lebih banyak waktu di muka, tetapi begitu mereka ada di tempatnya, mereka akan menjaga desain Anda konsisten tidak peduli seberapa sering hal -hal berubah.

3. Ganti warna statis yang ada dengan variabel

Dengan variabel warna baru Anda disimpan, saatnya untuk mengganti nilai hex hardcoded yang digunakan di seluruh tata letak. Di sinilah bergerak dari statis ke dinamika mulai membuat perbedaan nyata, tidak hanya dalam konsistensi, tetapi pada betapa mudahnya mempertahankan desain dari waktu ke waktu.

Mulailah dengan memindai tata letak untuk setiap elemen yang masih menggunakan nilai warna tetap. Ini mungkin termasuk tombol, judul, latar belakang, ikon, atau pembagi bagian. Di mana saja warna merek diterapkan secara manual sekarang merupakan kesempatan untuk menghubungkannya dengan sistem baru Anda.

Untuk melakukan itu, Divi memberi Anda dua opsi: Perluas atribut dan temukan dan ganti. Keduanya memungkinkan Anda memperbarui beberapa elemen dengan cepat, tetapi masing -masing bersinar dalam situasi yang sedikit berbeda.

• Gunakan Atribut Perpanjang Saat Anda sudah menerapkan variabel yang benar ke satu elemen dan ingin mencocokkan sisanya.
• Gunakan Temukan dan Ganti saat Anda ingin menukar nilai hex spesifik di mana pun itu muncul, bahkan jika itu diterapkan di berbagai elemen.

Mari kita mulai dengan atribut EXTLE.

Menggunakan atribut Perpanjangan

Dalam contoh ini, kami ingin menetapkan warna sekunder baru untuk semua H2S di tata letak. Kami akan mulai dengan menerapkannya hanya untuk salah satunya.

Setelah selesai, kami akan mengklik kanan elemen dan memilih atrik atribut. Di panel yang muncul, kami akan mengatur ruang lingkup ke seluruh halaman dan jenis elemen ke teks.

Dengan satu klik, setiap H2 di seluruh halaman mengadopsi warna sekunder yang sama, yang akan tetap sinkron karena terikat dengan warna utama Anda jika warna dasar itu pernah berubah.

Menggunakan Temukan dan Ganti

Sekarang mari kita coba temukan dan ganti, yang bekerja sangat baik ketika Anda ingin menukar nilai warna tertentu di seluruh situs.

Dalam hal ini, kami ingin memperbarui warna teks tubuh. Untuk melakukannya, kami akan pergi ke Pengaturan> Desain> Warna Teks Tubuh , Klik Kanan, dan Pilih Temukan & Ganti. Kemudian , kami akan melayang di atas bidang nilai ganti dan memilih variabel baru kami.

Hanya itu yang diperlukan. Setiap contoh warna lama itu sekarang diperbarui dengan variabel baru Anda.

Tidak ada metode tunggal yang harus Anda ikuti di sini. Perpanjang atribut adalah cara yang lebih cepat untuk membawa perubahan itu di elemen serupa jika Anda sudah memperbarui satu modul secara manual. Jika Anda masih bekerja dengan kode hex statis dan ingin mengubahnya dalam jumlah besar, temukan dan ganti akan membantu Anda bergerak cepat.

Pilih pendekatan apa pun yang membuat pembersihan lebih mudah. Setelah selesai, Anda akan melihat manfaat nyata dari sistem ini: bagaimana desain Anda merespons ketika Anda hanya mengubah satu warna.

Menguji skema warna baru Anda

Semua yang Anda lakukan adalah tentang pengaturan. Sekarang saat seluruh pengaturan mulai menunjukkan nilainya.

Dengan sistem Anda di tempat, cobalah mengubah warna utama. Seluruh tata letak akan merespons dalam hitungan detik - latar belakang, tombol, efek melayang, dan elemen lain yang terhubung akan diperbarui secara instan.

Pembaruan di masa depan juga lebih mudah dari sebelumnya. Misalkan klien Anda ingin beralih dari neon hijau ke kuning yang lebih hangat, yang berarti memperbarui seluruh situs web, setiap halaman, dan setiap modul secara manual.

Kedengarannya menyakitkan, tetapi tidak untuk Anda. Anda hanya memperbarui warna utama, dan seluruh situs berikut.

Atau mungkin ini Black Friday dan mereka telah meminta skema warna merah-emas-hitam. Anda memperbarui yang utama ke nada emas, kemudian mengubah sekunder menjadi merah yang lebih dalam. Tata letak beradaptasi secara instan, hingga detail terakhir.

Dalam beberapa kasus, warna merek mungkin tetap sama, tetapi sekunder membutuhkan penyegaran. Itu hanya masalah menyesuaikan slider HSL. Tidak perlu menyentuh setiap tombol atau latar belakang secara individual.

Begitu banyak pekerjaan warna tentang menjaga keseimbangan. Anda menjaga variasi selaras bahkan ketika warna inti berubah. Sistem ini memberi Anda cara untuk mengontrol nada, kontras, dan penekanan di seluruh desain Anda tanpa perlu menelusuri kembali langkah -langkah Anda.

Dan ingat, apa yang telah kami lakukan di sini hanya satu halaman. Karena variabel desain bersifat global, pengaturan ini meluas ke seluruh situs Anda, termasuk header, footer, posting blog, halaman arahan, dan apa pun yang terhubung dengan palet Anda.

Itu berarti setiap pembaruan di masa depan, apakah kampanye musiman, penyegaran merek, atau arah warna baru, dimulai dari satu tempat. Anda memperbarui beberapa variabel dan menonton semuanya cocok dengan skema warna baru Anda.

Divi membuat alur kerja warna Anda tahan masa depan

Tidak sulit untuk memilih warna biru. Yang sulit adalah menjaga agar biru itu konsisten di seluruh lusinan modul, tata letak, halaman, dan kampanye, dan memperbaruinya nanti tanpa merusak sesuatu dalam prosesnya.

Divi 5 menyederhanakannya sepenuhnya. Dengan alat -alat seperti sistem warna baru, filter HSL, dan variabel desain, Anda dapat mengelola seluruh identitas visual Anda dari satu tempat. Mengetahui bahwa setiap warna, di setiap tata letak, akan tetap konsisten dan mudah diperbarui adalah apa yang dijanjikan Divi 5.

Dan itu hanya salah satu dari banyak yang telah kami buat selama beberapa bulan terakhir, termasuk Loop Builder, Flexbox Layout, dan antarmuka yang sepenuhnya dibayangkan kembali untuk desainer web modern. Jika Anda belum menjelajahinya, sekarang adalah waktu yang tepat.