Apakah Anda ingin membuat pola latar belakang khusus menggunakan opsi Pengulangan Gradien dari Divi ?
Pilihan latar belakang dari Divi menawarkan banyak cara untuk membuat pola latar belakang. Anda bahkan dapat membuat pola latar belakang hanya menggunakan gradien. Opsi Gradient Repeat membuatnya sederhana dan mudah.
Pada artikel ini kita akan melihat cara menggunakan opsi Gradient Repeat Divi untuk membuat pola latar belakang khusus.
Mari kita mulai.
Lihat juga: Divi: Cara membuat formulir kontak yang muncul setelah mengklik tombol
Apa itu pengulangan gradien?
Opsi Gradient Repeat membuat pola berdasarkan Gradient Stops. Perhentian gradien adalah pengukuran yang menentukan di mana warna muncul dan berhenti di gradien. Divi dan Gradient Builder-nya menggunakan pemberhentian ini untuk membuat pola.
Warna terakhir memberitahu gradien di mana breakpoint berada di gradien. Anda dapat memiliki warna sebanyak yang Anda inginkan sebelum breakpoint ini.
Le Pembangun Gradien kemudian akan mengulanginya untuk mengisi layar yang membuat pola. Opsi ini dapat ditambahkan ke bagian, baris, kolom, atau modul mana pun, dan semuanya dapat digunakan bersama-sama.
Aktifkan opsi "Background Gradient"
Untuk mengaktifkan opsi Pengulangan Gradien, buka setelan bagian dengan mengeklik ikon roda giginya. Ini juga berfungsi dengan baris, kolom, dan modul.
Gulir ke Latar Belakang . Pilih tab Latar Belakang Gradien dan klik Tambahkan Gradien Latar Belakang.
Di bawah bar penghenti gradien adalah pengaturan yang disebut Pengulangan Gradien . Ini dinonaktifkan secara default. Cukup klik untuk mengaktifkannya.
Gradien sekarang akan berulang, membuat pola berdasarkan pemberhentian gradien Anda dan pengaturan gradien lainnya, seperti unit gradien.
Satuan gradien
Satuan gradien adalah satuan pengukuran. Ini menentukan apa yang ditunjukkan oleh angka penghentian gradien pada bilah gradien, yang menentukan bagaimana penghentian gradien diukur. Ini memengaruhi pola yang dibuat oleh opsi pengulangan.
Generator gradien latar belakang Divi menawarkan 15 unit. Mari kita lihat contoh dari empat opsi paling populer. Seperti yang akan kita lihat dalam contoh kita, hasilnya akan berubah tergantung pada jumlah pemberhentian gradien dan pengaturan Anda.
Persen (persen)
Persentase mengukur penghentian gradien dalam persentase. Ini menghitung titik gradien berdasarkan elemen induk. Semakin kecil jahitan gradien terakhir, semakin ketat pola yang dibuat. Saat menyesuaikan posisi salah satu warna, warna itu bergerak sementara yang lain tetap di tempatnya.
Piksel (px)
Piksel mengukur jumlah piksel untuk setiap pemberhentian gradien. Ini memberikan gradien pola yang lebih kecil daripada kebanyakan tipe unit lainnya. Memindahkan posisi warna pertama atau terakhir mengubah posisi setiap warna.
Tinggi jendela (vh)
Viewport adalah area jendela browser yang terlihat. Ini diukur tinggi dan lebarnya secara terpisah. Tinggi jendela menggunakan pemberhentian gradien untuk mengukur persentase tinggi ukuran jendela. Menyesuaikan posisi warna pertama atau terakhir mempengaruhi semua warna.
Lebar jendela (vw)
Lebar jendela menggunakan penghentian gradien untuk mengukur persentase lebar ukuran jendela (atau lebar browser). Penyesuaian berubah tergantung pada lebarnya. Saat Anda menyesuaikan angka lebih besar atau lebih kecil, warna tertentu berubah posisi sementara yang lain tetap sama.
Contoh penggunaan opsi "Ulangi Gradien"
Baca juga: Divi: Cara membuat tablet dengan konten penggoda yang dapat digulir
Untuk contoh kami, kami menggunakan bagian Ajakan Bertindak di halaman beranda paket tata letak akupunktur gratis tersedia di Divi.
Kita perlu melakukan penyesuaian pada kolom pertama dari bagian tersebut. Buka Mereka parameter garis dengan mengklik ikon roda giginya.
Kemudian pilih ikon perkakas untuk kolom pertama.
kolom satu gradien
Kolom pertama memiliki gradien latar belakang sendiri. Itu bagian dari tata letak. Kami tidak akan mengubah itu. Kami akan menggunakan gradien yang sama dalam empat contoh kami. Berikut adalah pengaturan jika Anda membutuhkannya.
- Gradien Berhenti:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Pengaturan gradien
- Tipe Gradien: Linier
- Posisi Gradien: 180 derajat
- Ulangi Gradien: TIDAK
- Satuan Gradien: Persen
- Gradien Persegi Di Atas Gambar Latar Belakang: TIDAK
jarak
Kami akan menambahkan spasi di sebelah kiri kolom. Akses tab Mendesain, gulir ke Jarak dan pilih ikon tablet untuk membuka opsi perangkat.
Tambahkan bantalan kiri 5% untuk tab desktop dan tablet. Pilih tab telepon dan hapus padding kiri. Biarkan Atas dan Kanan pada pengaturan mereka saat ini.
- Lapisan
- Atas: 180px
- Kiri: 5%
- Kiri: 80px
contoh satu
Contoh pertama kami membuat pola berulang diagonal dengan garis tipis.
Yang ini memiliki tiga pemberhentian gradien.
- Gradien Berhenti:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Gunakan pengaturan berikut.
- Tipe Gradien: Linier
- Arah Gradien: 156 derajat
- Ulangi Gradien: YA
- Satuan Gradien: piksel
- Gradien Persegi Di Atas Gambar Latar Belakang: Tidak
Contoh kedua
Contoh kedua kami menciptakan pola berulang diagonal dengan garis yang lebih besar.
Yang ini memiliki tiga pemberhentian gradien.
- Gradien Berhenti:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Untuk pengaturan gradien,
- Tipe Gradien: Linier
- Arah Gradien: 156 derajat
- Ulangi Gradien: YA
- Satuan Gradien: piksel
- Gradien Persegi Di Atas Gambar Latar Belakang: TIDAK
Contoh tiga
Contoh ketiga kami membuat pola melingkar berulang dengan lingkaran berukuran sedang.
Yang ini memiliki tiga pemberhentian gradien.
- Gradien Berhenti
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Terapkan pengaturan gradien berikut
- Tipe Gradien: Melingkar
- Posisi Gradien: Bawah
- Ulangi Gradien: YA
- Satuan Gradien: Persen
- Gradien Persegi Di Atas Gambar Latar Belakang: TIDAK
Contoh 4
Contoh keempat kami menciptakan pola melingkar dengan lingkaran besar.
Yang ini memiliki tiga pemberhentian gradien.
- Gradien Berhenti:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Untuk pengaturan Gradient, ubah sebagai berikut:
- Tipe Gradien: Melingkar
- Posisi Gradien: Tengah
- Ulangi Gradien: YA
- Satuan Gradien: Persen
- Gradien Persegi Di Atas Gambar Latar Belakang: Tidak
Unduh DIVI Sekarang!!!
Kesimpulan
Ini adalah tampilan kami tentang cara menggunakan opsi untuk Pengulangan Gradien dari Divi untuk membuat latar belakang khusus. Banyak penyesuaian dalam pengaturan gradien mempengaruhi desain gradien.
Gradient Repeat bekerja dengan baik dengan semua tweak ini untuk membuat pola latar belakang kustom yang menarik dengan mudah.
Kami merekomendasikan untuk mencoba contoh yang kami berikan di sini dan membuat perubahan untuk melihat bagaimana gradien terpengaruh dan membuat gradien latar belakang kustom Anda sendiri.
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 memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca 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.
...
