Cara membuat sistem warna dengan divi 5

Pilihan warna acak jarang mengarah pada desain yang kohesif. Jika Anda membangun situs web secara profesional, Anda memerlukan sistem yang disengaja. Anda dapat membangun sistem warna nyata di dalam Divi 5 menggunakan manajemen warna dan variabel desain. Ini adalah warna yang Anda atur langsung di editor visual, dapat mengakses di bidang warna apa pun, dan datang dengan banyak kenyamanan lainnya (yang akan kami tunjukkan di bawah).

Posting ini akan menunjukkan kepada Anda cara mengatur sistem warna yang fleksibel dan dapat diskalakan di Divi 5.

Apa itu sistem warna?

Sistem warna pada dasarnya adalah palet warna yang telah direncanakan sebelumnya digunakan secara konsisten di situs Anda. Ini membantu semuanya terlihat ditata dengan sengaja daripada disatukan secara acak. Untuk sistem yang baik, Anda biasanya membutuhkan:

• Warna utama : Warna bermerek utama.
• Warna sekunder : mendukung dan kontras dengan yang utama.
• Warna Teks : Jelas dan dapat dibaca untuk judul dan paragraf.
• Aksen : Warna lain untuk peringatan, pemberitahuan, dan hal -hal penting lainnya (opsional).
• Warna latar belakang : Biasanya netral atau warna halus.

Aturan 60-30-10 berlaku untuk warna dalam desain web. Secara umum, warna netral (seperti latar belakang bagian dan ruang negatif) akan digunakan untuk 60%dari desain, warna primer untuk 30%, dan warna sekunder/aksen untuk sisa 10%.

Cara memilih warna situs web

Warna merek dan warna yang digunakan di situs web Anda bukanlah keputusan yang harus diambil dengan enteng. Membuat palet warna yang bertujuan tergantung pada keterampilan desainer Anda, psikologi warna, industri, dan diferensiasi merek. Tetapi begitu Anda memiliki warna dasar dan aset merek (seperti variasi logo), Anda dapat mulai membuat sistem desain.

Anda dapat melakukan beberapa tugas cepat untuk mempersiapkan Bangunan Situs Web Anda jika Anda memiliki sumber daya desain yang terbatas. Pertama, lakukan bacaan sepintas tentang psikologi warna. Cari nilai merek apa yang ingin Anda sampaikan (kepercayaan, pemuda, inovasi, dll.) Dan cobalah untuk mencocokkan warna berdasarkan nilai -nilai tersebut. Kemudian, lihat beberapa merek yang dapat dikenali rumah tangga yang menurut Anda sesuai dengan nilai merek Anda. Warna apa yang mereka gunakan? Bagaimana mereka menggunakannya di situs web, iklan, dan posting sosial mereka?

Nilai perusahaan Anda bahkan mungkin ditentukan oleh jenis pekerjaan yang Anda lakukan. Tukang kunci dan tukang ledeng harus dapat diandalkan, jadi biru adalah cara yang bagus untuk menyampaikannya. Perencana keuangan dan lanskap berurusan dengan pertumbuhan dan keberlanjutan (di bidangnya masing -masing), jadi hijau adalah jangkar yang baik di sana. Petani bunga, pusat pengasuhan anak, dan restoran dapat bersandar pada merah dan kuning untuk menghubungkan energi dan vitalitas dengan merek mereka. Setelah Anda memiliki ide umum, gunakan sesuatu seperti pendingin untuk membuat palet sederhana.

Membangun Sistem Warna Anda di Divi 5

Divi 5 hadir dengan manajer variabel desain, yang merupakan cara termudah untuk menangani warna global. Di dalamnya, Anda memiliki empat warna global yang telah ditetapkan sebelumnya untuk Anda kerjakan di luar kotak. Mereka adalah:

1. Warna utama
2. Warna sekunder
3. Menuju warna teks
4. Warna teks tubuh

Langkah 1: Tentukan warna dasar Anda sebagai variabel

Di bilah sisi kiri Divi, buka manajer variabel desain. Temukan bagian Warna , dan Anda harus melihat empat default yang berbeda ini.

Keempat label ini tidak dapat dihapus, tetapi Anda dapat memilih warna apa yang akan diatur masing -masing. Selain keempat ini, Anda dapat menambahkan sebanyak mungkin warna dengan mengklik tombol Tambahkan Global Color . Silakan dan masukkan nilai hex warna dari generator warna.

Variabel -variabel ini langsung tersedia di mana -mana di pembangun visual Divi, yang sangat berguna. Tapi pastikan untuk menyimpannya!

Langkah 2: Buat nuansa & warna dengan warna HSL

Menggunakan filter HSL Divi, kita dapat membuat warna (versi yang lebih ringan dari warna kita) dan nuansa (versi lebih gelap dari warna kita). Untuk proyek ini, kami hanya akan membuat variasi untuk warna primer dan sekunder. Anda dapat menggunakan generator palet warna untuk membuat variasi warna ini.

Langkah pertama di sini adalah menciptakan warna global lainnya. Namun, alih -alih menempelkan nilai hex, pilih warna yang ada untuk membuat variasi (nuansa dan warna).

Sekarang, kita perlu menerapkan filter ke warna dasar itu untuk membuat variasi. Klik pada chip warna dan kemudian pilih "Warna Filter," atau klik Color Swatch untuk variabel warna relatif baru Anda.

Lakukan ini untuk setiap variasi warna Anda. Pastikan untuk memberikan variasi warna Anda nama yang dapat dikenali dan simpan.

Misalnya, karena warna primer cukup gelap, kita dapat menambahkan beberapa warna yang lebih ringan dan beberapa warna yang lebih gelap. Itu seharusnya memberi saya banyak pilihan saat kami menerapkan sistem warna saya ke desain halaman.

Ulangi langkah -langkah di atas untuk warna sekunder dan/atau aksen Anda. Saat membuat variasi ini, selalu pilih warna dasar dan kemudian terapkan filter di atasnya. Dengan begitu, jika Anda pernah mengubah warna utama Anda, variasi ini akan mengikuti.

Menerapkan warna Anda dalam desain dengan divi

Variabel Anda ada sekarang. Waktu untuk menggunakannya. Kami akan mulai dengan halaman Divi kosong dan bekerja secara berurutan menuju tata letak yang dirancang dengan baik.

Langkah 1. Buat gambar gambar halaman Anda

Anda dapat mulai dari rangka gambar daripada halaman kosong, yang dapat membantu Anda lebih memahami sistem warna Anda. Setelah Anda memahami struktur dan aliran umum halaman, Anda dapat mulai membuat pilihan desain. Anda juga dapat menggunakan salah satu dari banyak paket tata letak divi atau situs pemula. Tidak masalah jika mereka sudah memiliki warna yang ditentukan; Kami dapat dengan mudah mengubah ini.

Untuk contoh ini, kami memilih untuk memodifikasi paket tata letak konsultasi dan menggunakan tata letak beranda. Jika Anda melakukan hal serupa, Anda dapat mengimpor preset. Namun, Anda akan ingin mengedit warna dalam preset tersebut. Demi kesederhanaan, kami akan memodifikasi gaya secara langsung pada tingkat modul/elemen.

Langkah 2. Tipografi dan Warna

Secara default, Divi menggunakan warna heading global dan teks tubuh Anda, membuat teks Anda bersih dan mudah dibaca. Anda selalu dapat mengesampingkan pilihan warna yang telah ditentukan ini dengan mengubah warna teks pada modul atau preset, tetapi Anda tidak perlu terlalu sering melakukannya.

Perhatikan bagaimana warna heading tidak ada dalam modul. Divi secara otomatis memberikan warna global ke judul dan teks tubuh untuk Anda. Tentu saja, Anda dapat menimpanya dengan memilih warna yang berbeda.

Anda dapat menyesuaikan warna yang dapat membuatnya lebih terlihat dan menarik klik.

Mungkin ada modul lain (selain modul heading dan teks) dengan teks yang ingin Anda gaya. Modul seperti formulir kontak, penghitung waktu mundur, dan modul blog semua mungkin memerlukan warna untuk diterapkan secara unik.

Langkah 3. Tombol Styling

Tombol Divi sederhana secara default dan mengambil warna utama Anda. Tetapi Anda tidak dipaksa masuk ke keputusan ini jika Anda menginginkan sesuatu yang berbeda. Buka panel pengaturan modul, navigasikan ke tab desain , dan pilih tombol . Di bawah pengaturan tombol, aktifkan "Gunakan gaya kustom untuk tombol." Atur latar belakang Anda ke warna global pilihan dan teks tombol Anda ke warna yang dapat dibaca, seperti putih.

Jika Anda memiliki dua tombol berdampingan atau beberapa tombol pada halaman, Anda dapat membuat tombol preset terpisah untuk gaya tombol sekunder menggunakan warna sekunder atau aksen lain.

Buat status hover dengan warna dan/atau nuansa

Melayang -layang negara menambah interaksi dan tujuan. Gunakan warna dan nuansa Anda sebelumnya dengan gaya hover. Jelas untuk diimplementasikan pada tombol, tetapi dapat digunakan secara halus di tempat lain juga.

Klik ikon kursor di sebelah opsi warna latar belakang untuk mengaktifkan status hover. Atur warna latar belakang hover Anda. Ketika pengguna melayang di atas tombol, itu merespons secara visual, memandu interaksi secara alami.

Langkah 4. Membuat bagian dengan preset warna dan gradien

Bagian di Divi memiliki latar belakang transparan secara default. Ini berarti bahwa jika dibiarkan tidak disetel, mereka biasanya akan terlihat putih. Anda dapat menambahkan beberapa intrik dengan membuat variasi warna netral berdasarkan rona salah satu warna utama Anda.

Warna latar belakang ini dekat dengan hitam, tetapi berbagi rona dasar yang sama dengan warna utama untuk memberikannya halus 'pada tema' kohesi.

Anda juga dapat bereksperimen dengan gradien menggunakan varian warna Anda. Kuncinya di sini adalah tidak menggunakan terlalu banyak kombinasi warna. Anda menginginkan desain yang disiplin dan kohesif berdasarkan pasangan warna dan hierarki.

Pengingat pada titik ini. Anda ingin menyimpan sebagian besar pasangan warna dan keputusan ini ke dalam preset (baik grup opsi atau preset elemen). Setelah Anda membuat dan mengimplementasikan variabel desain Anda dalam desain Anda melalui preset, Anda dapat menggunakan sistem desain Anda untuk membuat halaman berikutnya jauh lebih cepat. Ini juga memastikan bahwa Anda bekerja dengan pola desain yang konsisten di seluruh situs Anda.

Dan jika Anda kemudian menentukan bahwa warna sedikit mati, Anda dapat menyesuaikan nilai HSL dari warna dasar, dan semua contoh warna itu (dan semua warna yang relatif dibuat berdasarkan warna itu) akan berubah untuk Anda.

Menutup Sistem Warna Divi 5 Anda

Sistem warna yang bijaksana adalah salah satu kemenangan termudah dalam desain web, dan Divi 5 memberi Anda alat untuk membuatnya bekerja untuk Anda. Dengan hanya beberapa langkah, Anda bisa:

• Tentukan warna merek inti Anda sebagai variabel desain yang dapat digunakan kembali
• Memperluasnya menjadi nuansa dan warna yang berguna dengan filter HSL
• Terapkan secara konsisten di seluruh teks, tombol, bentuk, dan bagian
• Simpan pilihan Anda sebagai preset sehingga setiap halaman baru mengikuti aturan yang sama

Imbalannya lebih besar dari estetika. Sistem warna solid menciptakan kejelasan, mengarahkan pengunjung ke arah aksi, dan membuat merek Anda terasa kohesif di setiap sudut situs Anda. Dan karena semua yang ada di Divi digerakkan oleh variabel, satu penyesuaian warna dasar dapat secara instan berurutan melalui seluruh situs. Itu berarti lebih sedikit bermain -main dan lebih percaya diri bahwa desain Anda akan bersatu saat Anda skala.