Divi: Perbandingan berbagai jenis gradien

Apakah Anda ingin menggunakan Gradient Builder dari Divi tetapi Anda tidak tahu jenis gradien mana yang harus dipilih?

Jenis gradien adalah bagian dari yang baru Divi Pembangun Gradien . Jenis gradien baru Divi memungkinkan Anda menambahkan berbagai bentuk dan warna ke latar belakang Anda. 

Dalam artikel 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:

• Linear
• Circulaire
• 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. Kami akan melihatnya secara rinci dalam contoh kami.

Jenis gradien juga dipengaruhi oleh kontrol lain, seperti posisi, pengulangan atau tidak, satuan ukuran untuk bilah gulir gradien, dan penempatan gradien di atas latar belakang.

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

Dengan mengingat hal itu, mari kita lihat beberapa contoh gradien menggunakan masing-masing tipe gradien. Kami akan menunjukkan tiga contoh dari setiap jenis gradien. 

Yang pertama adalah tipe gradien standar yang akan Anda lihat di web. Dua berikutnya akan sedikit lebih eksperimental, hanya untuk melihat apa yang dapat Anda lakukan dengan jenis gradien.

Contoh jenis gradien

Untuk contoh tipe gradien, kami menggunakan bagian Pahlawan di beranda paket tata letak tempat tidur dan sarapan gratis tersedia di 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, kami akan memodifikasinya.

Kami menyesuaikan teks judul dengan mengubahnya dari hitam menjadi putih.

Jenis gradien linier

Baca juga: Divi: Cara menggunakan pencampuran pola pada gambar latar belakang

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

Contoh pertama dari tipe gradien linier

Berikut adalah preview dari 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. itu perdana menteri adalah rgba (92,158,82,0.76) pada posisi 0%. itu kedua adalah rgba(0,10,4,0.76) pada posisi 97%.

• Gradien Berhenti:
  • 0%: rgba (92,158,82,0.76)
  • 97%: rgba (0,10,4,0.76)

Kemudian ubah Tipe gradien ke Linear dan atur Kepemimpinan lebih dari 131 derajat. bahwa ia jangan ulangi. Mengaturpersatuan pada Persentase. Tempatkan gradien di atas gambar latar belakang.

• Tipe Gradien: Linier
• Arah Gradien: 131deg
• Ulangi Gradien: TIDAK
• Satuan Gradien: Persen
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh kedua dari tipe gradien linier

Berikut adalah pratinjau 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 Stop. itu perdana menteri adalah rgba (18,76,41,0.76) pada posisi 13%. itu kedua adalah rgba(92,158,82,0.76) pada posisi 13%. warna 3 adalah rgba(18,76,41,0.76) pada posisi 34%.

• Gradien Berhenti:
  • 13%: rgba (18,76,41,0.76)
  • 13%: rgba (92,158,82,0.76)
  • 34%: rgba (18,76,41,0.76)

Kemudian atur Tipe gradien ke Linear dan atur Kepemimpinan lebih dari 90 derajat. bahwa ia jangan ulangi . Mengubahpersatuan persentase. Tempatkan di atas gambar latar belakang.

• Tipe Gradien: Linier
• Arah Gradien: 90deg
• Ulangi Gradien: TIDAK
• Satuan Gradien: Persen
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh ketiga dari tipe gradien linier

Contoh ketiga kami menempatkan garis berwarna terang secara diagonal di sudut kanan atas, menyentuh garis berwarna 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%. Itu warna ketiga adalah rgba(18,76,41,0.76) pada posisi 32%.

• Gradien Berhenti:
  • 13%: rgba (92,158,82,0.76)
  • 23%: rgba (92,158,82,0.76)
  • 32%: rgba (18,76,41,0.76)

Tentukan Tipe gradien ke Linear di a arah dari 209 derajat. Lahir jangan ulangi dan aturpersatuan pada Persentase. Tempatkan gradien di atas gambar latar belakang.

• Tipe Gradien: Linier
• Arah Gradien: 209deg
• Ulangi Gradien: TIDAK
• Satuan Gradien: Persen
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Jenis gradien melingkar

Jenis gradien melingkar menciptakan lingkaran dengan warna.

Contoh pertama dari tipe gradien melingkar

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

Yang ini ada 2 warna. itu perdana menteri adalah rgba (92,158,82,0.76) pada posisi 0%. itu kedua adalah rgba(0,10,4,0.76) pada posisi 62%.

• Gradien Berhenti:
  • 0%: rgba (92,158,82,0.76)
  • 62%: rgba (0,10,4,0.76)

Tentukan Tipe gradien pada Edaran. Pusatkan arah . Pastikan dia jangan ulangi , mengubahpersatuan sebagai persentase dan letakkan di atas gambar latar belakang.

• Tipe Gradien: Melingkar
• Posisi Gradien: Tengah
• Ulangi Gradien: TIDAK
• Satuan Gradien: Persen
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh kedua dari tipe gradien melingkar

Gradien ini menempatkan tepi melingkar yang jelas di tengah layar.

Ini memiliki empat warna. Dua warna ditumpangkan. itu perdana menteri adalah rgba (18,76,41,0.76) pada posisi 13%. itu kedua adalah rgba(92,158,82,0.76) pada 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.

• Gradien Berhenti:
  • 13%: rgba (18,76,41,0.76)
  • 33%: rgba (92,158,82,0.76)
  • 51%: rgba (92,158,82,0.76)
  • 51%: rgba (18,76,41,0.76)

Tentukan Tipe gradien ke Circular dan tempatkan Kepemimpinan di pojok kiri atas. Pastikan dia jangan ulangi , mengubah persatuan sebagai persentase dan letakkan di atas gambar latar belakang.

• Tipe Gradien: Melingkar
• Posisi Gradien: Kiri Atas
• Ulangi Gradien: TIDAK
• Satuan Gradien: Persen
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh ketiga dari tipe gradien melingkar

Contoh ini menempatkan beberapa lingkaran terang dalam warna paling gelap, mulai dari tengah lingkaran.

Yang ini juga menumpuk dua warna dalam urutan tertentu untuk mencapai desain ini. Itu premiere warna rgba (18,76,41,0.76) pada posisi 13%. warna 2 adalah rgba (18,76,41,0.76) pada posisi 44%. Itu ketiga warna tumpang tindih dengan warna kedua. Ini adalah rgba (92,158,82,0.76) di posisi 44%. warna 4 adalah rgba(92,158,82,0.76) pada posisi 51%.

• Gradien Berhenti:
  • 13%: rgba (18,76,41,0.76)
  • 44%: rgba (18,76,41,0.76)
  • 44%: rgba (92,158,82,0.76)
  • 51%: rgba (92,158,82,0.76)

ubahlah tipe gradien dalam lingkaran. Tempatkan arah turun. ulangi yang ini. Mengaturpersatuan pada Persentase dan tempatkan gradien di atas gambar latar belakang.

• Tipe Gradien: Melingkar
• Posisi Gradien: Bawah
• Ulangi Gradien: YA
• Satuan Gradien: Persen
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Jenis gradien elips

Gradien elips menempatkan warna dalam bentuk elips.

Contoh pertama dari tipe gradien elips

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

Yang ini memiliki dua warna. itu perdana menteri adalah rgba (92,158,82,0.76) pada posisi 0%. itu kedua adalah rgba(0,10,4,0.76) pada posisi 50%.

• Gradien Berhenti:
  • 0%: rgba (92,158,82,0.76)
  • 50%: rgba (0,10,4,0.76)

ubahlah tipe gradien dalam bentuk elips. Mengatur arah di Pusat. Pastikan yang ini jangan ulangi , sesuaikanpersatuan pada Persentase dan letakkan di atas gambar latar belakang.

• Tipe Gradien: Elips
• Posisi Gradien: Tengah
• Ulangi Gradien: TIDAK
• Satuan Gradien: Persen
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh kedua dari tipe gradien elips

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

Ini memiliki dua warna. itu perdana menteri adalah rgba (92,158,82,0.76) pada posisi 34pt. itu kedua adalah rgba(0,10,4,0.76) pada posisi 39pt.

• Gradien Berhenti:
  • 34pt: rgba(92,158,82,0.76)
  • 39pt: rgba(0,10,4,0.76)

ubahlah Tipe gradien ke Elliptical dan sesuaikan Kepemimpinan di kiri. Miliki yang ini di mengulang. Mengubahpersatuan dalam titik-titik. Tempatkan di atas gambar latar belakang.

• Tipe Gradien: Elips
• Posisi Gradien: Kanan
• Ulangi Gradien: YA
• Satuan Gradien: Titik (pt)
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh ketiga dari tipe gradien elips

Contoh ketiga kami menempatkan banyak setengah lingkaran di gradien.

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

• Gradien Berhenti:
  • 34vmin: rgba (32, 68, 35, 0.73)
  • 39vmin: rgba (0,10,4,0.76)

ubahlah Tipe gradien ke Elliptical dan sesuaikan Kepemimpinan di Tinggi. Miliki yang ini di mengulang. MengubahSatuan di Viewport Minimum. Tempatkan di atas gambar latar belakang.

• Tipe Gradien: Elips
• Posisi Gradien: Atas
• Ulangi Gradien: YA
• Unit Gradien: Minimum Viewport (vmin)
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Jenis gradien kerucut

Lihat juga: Divi: Cara membuat transisi latar belakang antar elemen

Jenis gradien kerucut menampilkan gradien sebagai kerucut seolah-olah kerucut dilihat dari atas.

Contoh pertama dari tipe gradien kerucut

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. itu perdana menteri adalah rgba (92,158,82,0.76) pada posisi 0%. itu kedua adalah rgba(0,10,4,0.76) pada posisi 50%.

• Gradien Berhenti:
  • 0%: rgba (92,158,82,0.76)
  • 50%: rgba (0,10,4,0.76)

ubahlah tipe gradien dalam bentuk kerucut. Sesuaikan arah lebih dari 221 derajat. Pusatkan posisi et jangan ulangi . Tempatkan gradien di atas gambar.

• Tipe Gradien: Kerucut
• Arah Gradien: 221deg
• Posisi: Tengah
• Ulangi Gradien: TIDAK
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh kedua dari tipe gradien kerucut

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

Yang ini memiliki empat warna. itu perdana menteri 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%. Itu keempat warna rgba (38,86,26,0.68) pada posisi 85%.

• Gradien Berhenti:
  • 7%: rgba (20,40,20,0.76)
  • 24%: rgba (30,73,25,0.68)
  • 65%: rgba (103,132,30,0.68)
  • 85%: rgba (38,86,26,0.68)

Tentukan tipe gradien pada kerucut dan arah pada 0 derajat. Pusatkan posisi . Lahir jangan ulangi dan letakkan di atas gambar.

• Tipe Gradien: Kerucut
• Arah Gradien: 0deg
• Posisi: Tengah
• Ulangi Gradien: TIDAK
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh ketiga dari tipe gradien kerucut

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

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

• Gradien Berhenti:
  • 5 derajat: rgba(30,73,25,0.68)
  • 7 derajat: rgba(20,40,20,0.76)

Mengatur Tipe Gradien pada Conical dan Kepemimpinan pada 221 derajat. Tempatkan posisi di bagian atas Ulang yang ini dan letakkan di atas gambar latar belakang.

• Tipe Gradien: Kerucut
• Arah Gradien: 221deg
• Posisi: Atas
• Ulangi Gradien: YA
• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Unduh DIVI Sekarang!!!

Kesimpulan

Ini adalah tampilan kami pada perbandingan tipe gradien di Gradient Builder Divi. 

Seperti yang Anda lihat dari contoh-contoh ini, pengaturannya sederhana, tetapi salah satu dari mereka dapat membuat perbedaan besar dalam desain gradien. 

Untuk hasil terbaik, bereksperimenlah dengan jenis gradien dengan arah dan posisi berbeda, dan aktifkan atau nonaktifkan opsi pengulangan untuk melihat apa yang dapat Anda buat.

Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.

Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.

Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...