Cara Menggunakan Divi Gradient Builder untuk Memadukan Beberapa Warna Gradien Dengan Mudah

Gradient Builder baru Divi adalah alat yang ampuh yang menciptakan semua jenis latar belakang gradien yang Anda inginkan. Mudah digunakan dan Anda dapat menambahkan beberapa warna untuk membuat gradien yang menarik dan unik. Namun, menambahkan lebih banyak warna dapat membutuhkan lebih banyak pemikiran dalam proses desain. Dalam posting ini, kita akan melihat bagaimana menggunakan Divi Gradient Builder untuk memadukan beberapa warna gradien dengan mudah untuk membantu Anda memulai membuat gradien multi-warna Anda sendiri.

Pratinjau Beberapa Warna Gradien

Pertama, mari kita lihat apa yang akan kita buat dalam tutorial ini. Kami akan membuat empat gradien berbeda menggunakan tata letak yang sama.

Hasil Contoh Pertama

Hasil Contoh Kedua

Hasil Contoh Ketiga

Hasil Contoh Keempat

Praktik Terbaik untuk Menggabungkan Beberapa Warna Gradien

Seperti semua prinsip desain, ada beberapa hal yang perlu diingat saat menggabungkan beberapa warna gradien. Berikut adalah beberapa hal yang perlu diingat saat menggabungkan beberapa warna gradien untuk mendapatkan tampilan dan nuansa terbaik untuk situs web Anda.

Fokus pada Keluarga Warna

Tetap dalam keluarga warna yang sama saat menggunakan nuansa berbeda dengan warna yang sama. Ini menjaga kontras yang lebih rendah antara warna latar belakang, yang membuat latar belakang tidak terlalu mengganggu. Kami akan menggunakan teknik ini untuk contoh pertama kami.

Coba Warna yang Melembutkan

Cobalah berbagai nuansa warna yang melunak dengan level yang sama. Ini memberi Anda lebih banyak warna sambil menjaga kontras di antara keduanya tetap rendah. Pastel adalah contoh yang baik untuk ini. Ini memberi latar belakang Anda beberapa nuansa warna tanpa mengganggu latar depan. Kami akan menggunakan metode ini dalam contoh kedua kami.

Prioritaskan Keterbacaan

Selalu utamakan keterbacaan dalam desain Anda. Saat mendesain warna dan pola dengan gradien Anda, pastikan konten Anda selalu terbaca. Salah satu cara untuk melakukannya adalah dengan mendorong gradien ke satu sisi layar. Ini memungkinkan Anda mendesain gradien yang menonjol tanpa menghalangi konten. Kami akan menggunakan metode ini untuk contoh ketiga kami.

Gunakan Intersecting dan Blended Gradients

Gabungkan gradien berpotongan dengan gradien campuran untuk membuat garis keras dan nada lembut. Ini dapat membuat pola yang menarik tanpa menghalangi konten Anda. Coba arah dan titik berhenti gradien yang berbeda untuk melihat mana yang paling cocok untuk tata letak Anda. Gunakan pengaturan ini untuk membuat lingkaran, garis keras, dan banyak lagi. Kami juga akan menggunakan metode ini untuk contoh ketiga kami.

Gunakan Jenis Gradien yang Berbeda

Bereksperimenlah dengan berbagai jenis gradien untuk mendapatkan hasil yang unik. Misalnya, kerucut adalah jenis gradien yang bagus untuk menciptakan tampilan dan nuansa unik dengan warna gradien yang berbeda. Kami akan menggunakan kerucut dalam contoh keempat kami.

Jangan Gunakan Terlalu Banyak Warna

Jangan gunakan lebih banyak warna hanya demi memiliki lebih banyak warna. Dua hingga tiga warna biasanya ideal, tetapi Anda dapat menggunakan lebih banyak jika Anda berhati-hati. Saat menggunakan lebih banyak warna, pertahankan agar semirip mungkin sehingga menjadi warna yang kontras, bukan kontras.

Jangan Memilih Warna Secara Acak

Gunakan warna yang sesuai dengan konten dan situs web Anda. Ini tidak hanya membuat konten Anda terbaca, tetapi juga terlihat seperti milik situs web.

Ingat UX

Selalu pertimbangkan pengalaman pengguna. Periksa gradien dengan konten di atasnya untuk melihat seberapa baik kerjanya. Minta beberapa pengguna melihat konten dan gradien untuk memastikannya berfungsi dengan baik untuk mereka.

Uji Gradien Anda

Coba beberapa jenis dan warna gradien dengan pengujian a/b untuk melihat apa yang mendapatkan hasil terbaik.

Beberapa Contoh Warna Gradien

Sekarang, mari kita lihat beberapa contoh Gradient Builder. Untuk contoh ini, saya telah mengubah pahlawan dari Halaman Tentang dari Paket Tata Letak Lantai gratis yang tersedia di Divi. Saya telah memberinya warna latar belakang baru, #6294d1, dan warna tombol baru, #c1fff4.

• Warna Latar Belakang: #6294d1
• Warna Tombol: #c1fff4

Cara Membuat Beberapa Warna Gradien dengan Divi Gradient Builder

Pertama, mari kita lihat bagaimana membuat penyesuaian dalam Divi Gradient Builder. Kami akan menambahkan gradien ke latar belakang bagian. Untuk memulai, klik ikon pengaturan bagian .

Selanjutnya, gulir ke bawah ke Latar Belakang . Pilih tab Background Gradient dan klik Add Background Gradient .

Gradien dimulai dengan dua warna. Pilih gradien pada bilah Gradient Stops untuk mengubah warnanya dan seret ke posisi awal yang baru. Tambahkan gradien sebanyak yang Anda inginkan. Anda dapat menambahkan lebih banyak, menghapusnya, mengeditnya, dll.

Sesuaikan Type , Direction , Repeat , Unit , dan apakah Anda menginginkannya di atas gambar latar belakang untuk mendapatkan desain yang Anda inginkan.

Untuk ikhtisar terperinci tentang Divi Gradient Builder, lihat artikel Memperkenalkan The Advanced Gradient Builder Untuk Divi.

Beberapa Warna Gradien Contoh Satu

Untuk contoh pertama kami, kami akan membuat empat pemberhentian gradien. Buka tab Background Gradient dan pilih gradien pertama . Biarkan Gradient Position pada 0% dan ubah Gradient Color menjadi #6294d1.

• Gradien Berhenti Posisi Poin Pertama: 0%
• Warna: #6294d1

Selanjutnya, tambahkan perhentian warna baru dengan mengklik bilah Gradient Stop. Pindahkan Gradient Position menjadi 29% dan ubah Color menjadi #b5bfd1,

• Gradien Berhenti Posisi Poin Kedua: 29%
• Warna: #b5bfd1

Selanjutnya, tambahkan Gradient Stop ketiga dan pindahkan Posisinya menjadi 84%. Ubah Warnanya menjadi #8eacd1.

• Gradien Stop Posisi Poin Ketiga: 84%
• Warna: #8eacd1

Terakhir, ubah warna Gradient Stop keempat menjadi #b5bfd1. Kami akan meninggalkan Posisi Gradien ini pada 100%.

• Gradien Stop Posisi Poin Keempat: 100%
• Warna: #b5bfd1

Selanjutnya, kita akan menyesuaikan pengaturan gradien. Ubah Arah ke 225deg. Biarkan sisa pengaturan pada defaultnya. Saya akan menyertakan pengaturan tersebut di sini sehingga Anda dapat melihatnya. Anda sekarang dapat menutup pengaturan modul dan menyimpan pekerjaan Anda.

• Jenis: Linier
• Arah: 225deg
• Ulangi Gradien: Tidak
• Satuan Gradien: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Tidak

Beberapa Warna Gradien Contoh Dua

Untuk contoh kedua kami, kami akan membuat tiga pemberhentian gradien. Buka pengaturan Background Gradient dan ubah Color dari gradient stop pertama menjadi #bffffc. Biarkan Posisinya di 0%.

• Posisi Berhenti Gradien Pertama: 0%
• Warna: #bffffc

Tambahkan pemberhentian gradien baru dan pindahkan Posisinya ke 42%. Ubah Warnanya menjadi #bbc7f9.

• Posisi Berhenti Gradien Kedua: 42%
• Warna: #bbc7f9

Selanjutnya, ubah Color dari perhentian gradien ketiga menjadi #adbdd1. Kami akan meninggalkan Gradient Position pada 100%.

• Posisi Berhenti Gradien Ketiga: 100%
• Warna: #adbdd1

Selanjutnya, ubah Gradient Type menjadi Circular. Biarkan sisa pengaturan pada defaultnya. Ini menciptakan hot spot di tengah bagian. Tutup pengaturan Anda dan simpan pekerjaan Anda.

• Tipe Gradien: Melingkar

Beberapa Warna Gradien Contoh Tiga

Untuk contoh ketiga kami, kami akan menggunakan tiga pemberhentian gradien untuk membangun gradien kami. Pindahkan Posisi untuk gradien pertama menjadi 15% dan ubah Warnanya menjadi #afc3ed.

• Posisi Berhenti Gradien Pertama: 15%
• Warna: #afc3ed

Selanjutnya, pindahkan gradient stop kedua ke 33% dan ubah Color menjadi #adbdd1.

• Posisi Berhenti Gradien Kedua: 33%
• Warna: #bffffc

Selanjutnya, pindahkan gradient stop ketiga ke 33%, tepat di atas gradient stop kedua, dan ubah Color menjadi #adbdd1. Ini akan terlihat seperti Anda memiliki dua gradien pada bilah Gradient Stop.

• Posisi Berhenti Gradien Ketiga: 33%
• Warna: #adbdd1

Yang ini akan memiliki lengkungan menarik yang akan kita buat dengan pengaturan. Ubah Gradient Type menjadi Circular dan Gradient Position menjadi Right. Tutup pengaturan dan simpan pekerjaan Anda.

• Jenis: Melingkar
• Posisi: Kanan

Beberapa Warna Gradien Contoh Empat

Contoh keempat kami mencakup lima pemberhentian gradien. Untuk perhentian gradien pertama , ubah Color menjadi #878ebc. Biarkan yang ini di 0% untuk Posisi.

• Posisi Berhenti Gradien Pertama: 0%
• Warna: #878ebc

Tambahkan perhentian gradien kedua pada Posisi 22%. Ubah Warnanya menjadi #a0c1d6.

• Posisi Berhenti Gradien Kedua: 22%
• Warna: #a0c1d6

Selanjutnya, tambahkan pemberhentian gradien ketiga pada Posisi 48%. Ubah Warnanya menjadi #bffffc.

• Posisi Berhenti Gradien Ketiga: 48%
• Warna: #bffffc

Untuk perhentian gradien keempat kami, letakkan di 73% Position dan ubah Warnanya menjadi #d3d8ff.

• Posisi Berhenti Gradien Keempat: 73%
• Warna: #d3d8ff

Untuk pemberhentian gradien kelima , pindahkan ke Posisi 77% dan ubah Warnanya menjadi #c6dfff.

• Posisi Berhenti Gradien Kelima: 77%
• Warna: #c6dffff

Terakhir, ubah Gradient Type menjadi Conical dan ubah Gradient Direction menjadi 233deg. Tutup pengaturan dan simpan pekerjaan Anda.

• Tipe: Kerucut
• Arah: 233deg

Beberapa Hasil Warna Gradien

Hasil Contoh Pertama

Hasil Contoh Kedua

Hasil Contoh Ketiga

Hasil Contoh Keempat

Mengakhiri Pikiran tentang Beberapa Warna Gradien

Itulah pandangan kami tentang cara menggunakan Divi Gradient Builder untuk memadukan beberapa warna gradien dengan mudah. Gradient Builder menyenangkan untuk dimainkan. Anda dapat menambahkan warna sebanyak yang Anda inginkan, tetapi Anda harus mengikuti beberapa prinsip desain sederhana untuk membuatnya tampak hebat bersama-sama. Contoh-contoh ini menunjukkan betapa mudahnya menggunakan tiga hingga lima warna untuk membangun gradien Anda sambil membuatnya bekerja dengan baik dengan desain situs web Anda.

Kami ingin mendengar dari Anda. Sudahkah Anda menggunakan metode ini untuk membuat beberapa warna gradien dengan Gradient Builder baru Divi? Beri tahu kami tentang pengalaman Anda di komentar.