Membandingkan Jenis Gradien di Pembuat Gradien Divi

Jenis gradien adalah bagian dari Divi Gradient Builder yang baru. Jenis gradien Divi baru memberi Anda kemampuan untuk menambahkan berbagai bentuk dan warna ke latar belakang Anda. Dalam posting ini, kami akan membandingkan jenis gradien ini dan menunjukkan cara menggunakannya untuk membuat latar belakang yang unik!

Mari kita mulai.

Apa Jenis Gradien Divi?

Gradient Builder baru Divi menambahkan beberapa fitur gradien baru yang mencakup tipe gradien. Ada empat jenis gradien untuk dipilih:

• Linier
• Bundar
• Berbentuk bulat panjang
• Berbentuk kerucut

Masing-masing tipe menampilkan gradien secara berbeda. Mereka digunakan untuk membentuk gradien untuk ditampilkan sebagai pola warna linier, dalam lingkaran, elips, atau kerucut. Kita akan melihat ini secara rinci dalam contoh kita.

Jenis gradien juga dipengaruhi oleh kontrol lain, seperti posisi, pengulangan atau tidak, unit pengukuran untuk bilah penggeser gradien, dan penempatan gradien di atas latar belakang.

Setiap penyesuaian dapat memiliki dampak kecil atau besar pada gradien. Gradiennya bisa halus, atau bisa menonjol. Perubahan kecil atau besar dapat dilakukan dengan satu penyesuaian.

Dengan mengingat hal ini, mari kita lihat beberapa contoh gradien menggunakan masing-masing tipe gradien. Kami akan menunjukkan tiga contoh dari setiap jenis gradien. Yang pertama akan menjadi jenis gradien standar yang akan Anda lihat di seluruh web. Dua berikutnya akan sedikit lebih eksperimental, hanya untuk melihat apa yang bisa dilakukan dengan tipe gradien.

Contoh Jenis Gradien

Untuk contoh tipe gradien, saya menggunakan bagian pahlawan dari halaman arahan Paket Tata Letak Tempat Tidur dan Sarapan gratis yang tersedia dalam Divi. Bagian ini sudah memiliki gradien, tetapi kami akan menggantinya dan melakukan beberapa eksperimen. Kita dapat menghapus gradien latar belakang asli atau memodifikasinya. Hasilnya sama. Untuk mempermudah, saya akan memodifikasinya.

Saya menyesuaikan teks judul, mengubahnya dari hitam menjadi putih.

Tipe Gradien Linier

Gradien linier menampilkan gradien seolah-olah tersebar di seluruh halaman.

Contoh Gradien Linier Pertama

Berikut ini adalah contoh pertama kami. Ini menampilkan warna yang lebih terang di sebelah kiri layar dan warna yang lebih gelap di sebelah kanan, dengan transisi yang mulus di antara keduanya.

Untuk membuat contoh ini, tambahkan dua warna. Yang pertama adalah rgba (92.158.82.0.76) pada posisi 0%. Yang kedua adalah rgba(0,10,4,0,76) pada posisi 97%.

• Warna 1: rgba (92.158.82,0.76) (pada posisi 0%)
• Warna 2: rgba(0,10,4,0,76) (pada posisi 97%)

Selanjutnya, ubah Gradient Type menjadi Linear dan atur Direction ke 131deg. Apakah tidak terulang . Atur Unit ke Persen. Tempatkan gradien di atas gambar latar belakang.

• Tipe Gradien: Linier
• Arah: 131 derajat
• Ulangi: Tidak
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Gradien Linier Kedua

Berikut ini adalah contoh gradien linier kedua. Ini bekerja seperti yang pertama, tetapi memiliki pemberhentian yang sulit di sebelah kiri di mana warna yang lebih gelap mengambil alih.

Untuk membuat yang ini, tambahkan tiga Gradient Stops. Yang pertama adalah rgba(18,76,41,0.76) di posisi 13%. Yang kedua adalah rgba (92.158.82.0.76) di posisi 13%. Warna 3 adalah rgba (18,76,41,0,76) pada posisi 34%.

• Warna 1: rgba(18,76,41,0,76) (pada posisi 13%)
• Warna 2: rgba (92.158.82,0.76) (pada posisi 13%)
• Warna 3: rgba(18,76,41,0.76) (pada posisi 34%)

Selanjutnya, atur Gradient Type ke Linear dan atur Direction ke 90deg. Apakah tidak terulang . Ubah Unit menjadi Persen. Tempatkan di atas gambar latar belakang.

• Tipe Gradien: Linier
• Arah: 90 derajat
• Ulangi: Tidak
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Gradien Linier Ketiga

Contoh ketiga kami menempatkan garis warna terang secara diagonal di sudut kanan atas, menyentuh garis warna yang lebih gelap.

Yang ini memiliki tiga warna. Warna 1 adalah rgba (92.158.82.0.76) pada posisi 13%. Warna 2 adalah rgba (92.158.82.0.76) pada posisi 23%. Warna ketiga adalah rgba(18,76,41,0.76) pada posisi 32%.

• Warna 1: rgba (92.158.82,0.76) (pada posisi 13%)
• Warna 2: rgba (92.158.82.0.76) (pada posisi 23%)
• Warna 3: rgba(18,76,41,0,76) (pada posisi 32%)

Atur Gradient Type ke Linear pada Arah 209deg. Jangan ulangi dan atur Unit ke Persen. Tempatkan gradien di atas gambar latar belakang.

• Tipe Gradien: Linier
• Arah: 209 derajat
• Ulangi: Tidak
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Tipe Gradien Melingkar

Jenis gradien melingkar menciptakan lingkaran dengan warna.

Contoh Gradien Melingkar Pertama

Contoh gradien melingkar pertama kami menempatkan warna terang di tengah dan warna yang lebih gelap di sekitar tepinya.

Yang ini ada 2 warna. Yang pertama adalah rgba (92.158.82.0.76) pada posisi 0%. Yang kedua adalah rgba(0,10,4,0,76) di posisi 62%.

• Warna 1: rgba (92.158.82,0.76) (pada posisi 0%)
• Warna 2: rgba(0,10,4,0,76) (pada posisi 62%)

Atur Gradient Type menjadi Circular. Pusatkan arah . Jangan ulangi , ubah Unit menjadi Percent, dan letakkan di atas gambar latar belakang.

• Tipe Gradien: Melingkar
• Arah: Pusat
• Ulangi: Tidak
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Gradien Melingkar Kedua

Gradien ini menempatkan tepi melingkar yang jelas di tengah layar.

Ini memiliki empat warna. Dua warna ditumpuk. Yang pertama adalah rgba(18,76,41,0.76) di posisi 13%. Yang kedua adalah rgba (92.158.82.0.76) di posisi 33%. Warna 3 adalah rgba (92.158.82,0.76) pada posisi 51%. Warna 4 adalah rgba (18,76,41,0.76). Itu ditempatkan pada posisi 51%, di atas Warna 3.

• Warna 1: rgba(18,76,41,0,76) (pada posisi 13%)
• Warna 2: rgba (92.158.82,0.76) (pada posisi 33%)
• Warna 3: rgba (92.158.82,0.76) (pada posisi 51%)
• Warna 4: rgba(18,76,41,0,76) (pada posisi 51%)

Atur Gradient Type ke Circular dan tempatkan Direction di Kiri Atas. Jangan ulangi , ubah Unit menjadi Percent, dan letakkan di atas gambar latar belakang.

• Tipe Gradien: Melingkar
• Arah: Kiri Atas
• Ulangi: Tidak
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Gradien Lingkaran Ketiga

Contoh ini menempatkan beberapa lingkaran terang di dalam warna yang lebih gelap, dimulai dari tengah lingkaran.

Yang ini juga menumpuk dua warna dalam urutan tertentu untuk mendapatkan desain ini. Warna pertama adalah rgba(18,76,41,0.76) pada posisi 13%. Warna 2 adalah rgba (18,76,41,0,76) pada posisi 44%. Warna ketiga menumpuk di atas warna kedua. Ini rgba (92.158.82.0.76) di posisi 44%. Warna 4 adalah rgba (92.158.82.0.76) pada posisi 51%.

• Warna 1: rgba(18,76,41,0,76) (pada posisi 13%)
• Warna 2: rgba(18,76,41,0,76) (pada posisi 44%)
• Warna 3: rgba (92.158.82.0.76) (pada posisi 44%)
• Warna 4: rgba (92.158.82.0.76) (pada posisi 51%)

Ubah Gradient Type menjadi Circular. Tempatkan Arah di Bawah. Memiliki satu ini untuk Ulangi . Atur Unit ke Percent dan tempatkan gradien di atas gambar latar belakang.

• Tipe Gradien: Melingkar
• Arah: Bawah
• Ulangi: Ya
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Tipe Gradien Elips

Gradien elips menempatkan warna dalam bentuk elips.

Contoh Gradien Elips Pertama

Contoh elips pertama kami menempatkan elips dengan warna terang di tengah layar dengan warna lebih gelap di sekitarnya.

Yang ini memiliki dua warna. Yang pertama adalah rgba (92.158.82.0.76) pada posisi 0%. Yang kedua adalah rgba(0,10,4,0,76) pada posisi 50%.

• Warna 1: rgba (92.158.82,0.76) (pada posisi 0%)
• Warna 2: rgba (0,10,4,0,76) (pada posisi 50%)

Ubah Gradient Type menjadi Elliptical. Atur Arah ke Pusat. Minta yang ini jangan ulangi , atur Unit ke Percent, dan letakkan di atas gambar latar belakang.

• Tipe Gradien: Elips
• Arah: Pusat
• Ulangi: Tidak
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Gradien Elips Kedua

Contoh kedua kami menempatkan banyak garis melingkar halus di seluruh gradien.

Ini memiliki dua warna. Yang pertama adalah rgba (92.158.82.0.76) pada posisi 34pt. Yang kedua adalah rgba(0,10,4,0,76) di posisi 39pt.

• Warna 1: rgba (92.158.82.0.76) (pada posisi 34pt)
• Warna 2: rgba(0,10,4,0,76) (pada posisi 39pt)

Ubah Gradient Type menjadi Elliptical dan atur Direction ke Left. Minta yang ini untuk diulang . Ubah Unit menjadi Poin. Tempatkan di atas gambar latar belakang.

• Tipe Gradien: Elips
• Arah: Kiri
• Ulangi: Ya
• Satuan: Poin
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Gradien Elips Ketiga

Contoh ketiga kami menempatkan banyak setengah lingkaran di dalam gradien.

Yang ini memiliki dua warna. Yang pertama adalah rgba(32,68,35,0.73) pada posisi 34vmin. Yang kedua adalah rgba(0,10,4,0,76) pada posisi 39vmin.

• Warna 1: rgba (32,68,35,0,73) (pada posisi 34vmin)
• Warna 2: rgba (0,10,4,0,76) (pada posisi 39vmin)

Ubah Gradient Type menjadi Elliptical dan atur Direction ke Top. Minta yang ini untuk diulang . Ubah Unit ke Viewport Minimum. Tempatkan di atas gambar latar belakang.

• Tipe Gradien: Elips
• Arah: Atas
• Ulangi: Ya
• Satuan: Minimum Viewport
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Tipe Gradien Kerucut

Jenis gradien kerucut menampilkan gradien dalam bentuk kerucut seolah-olah kerucut dilihat dari atas.

Contoh Gradien Kerucut Pertama

Contoh ini menempatkan garis diagonal dari pusat gradien ke kiri dengan warna terang di satu sisi dan warna gelap di sisi lain.

Ini memiliki dua warna. Yang pertama adalah rgba (92.158.82.0.76) pada posisi 0%. Yang kedua adalah rgba(0,10,4,0,76) pada posisi 50%.

• Warna 1: rgba (92.158.82,0.76) (pada posisi 0%)
• Warna 2: rgba (0,10,4,0,76) (pada posisi 50%)

Ubah Jenis Gradien menjadi Kerucut. Atur Arah ke 221deg. Pusatkan Posisi dan jangan ulangi . Tempatkan gradien di atas gambar.

• Tipe Gradien: Kerucut
• Arah: 221deg
• Posisi: Tengah
• Ulangi: Tidak
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Gradien Kerucut Kedua

Contoh ini mirip dengan yang sebelumnya, tetapi menempatkan garis dari tengah ke atas.

Yang ini memiliki empat warna. Yang pertama adalah rgba(20,40,20,0.76) pada posisi 7%. Warna 2 adalah rgba(30,73,25,0.68) pada posisi 24%. Warna 3 adalah rgba(103,132,30,0.68) pada posisi 65%. Warna keempat adalah rgba (38,86,26,0.68) pada posisi 85%.

• Warna 1: rgba (20,40,20,0,76) (pada posisi 7%)
• Warna 2: rgba(30,73,25,0.68) (pada posisi 24%)
• Warna 3: rgba(103,132,30,0.68) (pada posisi 65%)
• Warna 4: rgba (38,86,26,0.68) (pada posisi 85%)

Atur Gradient Type menjadi conical dan Direction pada 0deg. Pusatkan Posisi . Jangan ulangi dan letakkan di atas gambar.

• Tipe Gradien: Kerucut
• Arah: 0deg
• Posisi: Tengah
• Ulangi: Tidak
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Gradien Kerucut Ketiga

Contoh terakhir kami menempatkan ledakan garis dari tengah atas gradien ke luar ke segala arah.

Yang ini memiliki dua warna. Yang pertama adalah rgba(30,73,25,0.68) pada posisi 5 derajat. Yang kedua adalah rgba(20,40,20,0.76) pada posisi 7 derajat.

• Warna 1: rgba(30,73,25,0.68) (pada posisi 5 derajat)
• Warna 2: rgba (20,40,20,0,76) (pada posisi 7 derajat)

Atur eth Gradient Type ke Conical dan Direction ke 221deg. Tempatkan Posisi di Atas. Minta yang ini ulangi dan letakkan di atas gambar latar belakang.

• Tipe Gradien: Kerucut
• Arah: 221deg
• Posisi: Atas
• Ulangi: Ya
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Mengakhiri Pikiran

Itulah pandangan kami dalam membandingkan tipe gradien di Divi's Gradient Builder. Seperti yang Anda lihat dalam contoh ini, pengaturannya sederhana, tetapi salah satu dari mereka dapat membuat perbedaan besar dalam desain gradien. Untuk hasil terbaik, coba jenis gradien dengan arah dan posisi yang berbeda, dan aktifkan atau nonaktifkan opsi pengulangan untuk melihat apa yang dapat Anda buat.

Kami ingin mendengar dari Anda. Sudahkah Anda menggunakan tipe gradien yang berbeda di Divi Gradient Builder? Beri tahu kami tentang pengalaman Anda di komentar.