Divi: Cara menggunakan "Gradient Builder" untuk mempercantik gambar Anda

Apakah Anda ingin memberi bentuk pada gambar Anda menggunakan generator gradien? Divi ?

Masker gambar sering digunakan untuk menambahkan bentuk yang menarik pada gambar. Mereka memungkinkan gambar untuk melihat melalui bentuk, memberikan halaman elemen desain yang unik.

Dengan Pembangun Gradien de Divi, Anda tidak perlu menggunakan masker untuk membuat bentuk. Sebagai gantinya, Anda dapat menggunakan Gradien Berhenti dan parameter untuk membuatnya!

Pada artikel ini kita akan melihat cara mempercantik gambar Anda dengan Gradient Builder Divi untuk membantu Anda menambahkan desain unik pada gambar Anda.

Mari kita mulai.

penelitian

Pertama, mari kita lihat apa yang akan kita buat dalam tutorial ini pada ukuran layar yang berbeda.

Contoh Pertama – Bentuk Gambar Melingkar

Komputer desktop

berikan bentuk pada gambar Anda menggunakan generator gradien Divi

Tablette

Telepon

Contoh kedua – Bentuk gambar linier

Biro

Tablette

Telepon

Contoh ketiga – Bentuk gambar elips

Komputer desktop

Tablette

Telepon

Contoh Keempat – Bentuk Gambar Kerucut

Komputer desktop

Tablette

Telepon

Desain tata letak dengan Divi

Mari kita mulai dengan membuat tata letak yang akan kita gunakan di semua contoh. Tata letak ini dapat digunakan sebagai bagian pahlawan.

Ini akan mencakup judul dan deskripsi di satu sisi dan gambar di sisi lain. Kami kemudian akan menggunakan tata letak dan gambar ini untuk contoh.

Sesuaikan bagian

Pertama, buat halaman Divi baru dan sesuaikan bagiannya. Buka pengaturan bagian dan ubah couleur latar belakang #f0f3fb.

Latar belakang: #f0f3fb

Lalu pergi ke tab Mendesain dan ubah pengaturan spasi sebagai berikut:.

Padding (Atas dan Bawah): 10%

Tambahkan baris

Kemudian tambahkan baris dengan struktur kolom di bawah ini.

Akses parameter garis, di tab Mendesain, arahkan ke opsi Perekat dan mengubah parameter ukuran.

Gunakan Lebar Talang Kustom: YA
Lebar Maks: 1px

Pengaturan kolom pertama

Di tab Konten dari baris, buka pengaturan kolom pertama dari baris, buka tab Mendesain. Ubah spasi sebagai berikut.

Padding (Kiri dan Kanan): 9% Kiri, Kanan

Parameter modul Teks pertama

Kemudian tambahkan Modul teks ke kolom kiri.

Sélectionnez Heading 4 untuk teks dari isi dan tambahkan isi dari tubuh Anda.

Teks: "Selamat datang di BlogPasCher"

Lalu pergi ke tab Mendesain dan ubah pengaturan judul.

Font: Montserrat
Berat Huruf: Tebal
Gaya: TT
Warna Teks: #1d4eff

Ukuran Teks: Desktop 16px, Tablet 14px, Telepon 12px
Spasi Huruf: 0,3em
Tinggi Garis: 1,6 em

Gulir ke Jarak dan ubah margin bawah.

Margin (Bawah): 0px

Parameter modul Teks kedua

Kemudian tambahkan Modul teks di bawah yang pertama.

Setel jenis teks ke “Judul 1” dan tambahkan isi dari tubuh Anda.

Konten: “Rencanakan masa depan keuangan Anda”

Kemudian pilih tab Mendesain dan ubah opsi judul.

Font: Montserrat
Berat Huruf: Tebal
Warna Teks: #0f1154

Ukuran: Desktop 80px, Tablet 40px, Telepon 24px
Tinggi Baris: 110%

Parameter modul Teks ketiga

Kemudian tambahkan Modul teks di bawah yang kedua.

Biarkan jenis teks di "Paragraf" dan tambahkan konten tubuh Anda.

Tubuh: konten

Lalu pergi ke tab Pembuahan dan mengubah pengaturan teks.

Font Teks: Roboto
Berat Font: sedang
Warna Teks: #000000

Ukuran Teks: 18px (Desktop dan Tablet), 14px (Telepon)
Tinggi Garis: 180%

Terakhir, gulir ke bawah ke jarak dan mengatur margin bawah. Tutup pengaturan modul.

Margin (Bawah): 0px

Pengaturan modul gambar

Sekarang tambahkan Modul gambar ke kolom kanan.

pertama, hapus gambar dummy dengan mengklik tong sampah atau ikon reset di atas gambar.

Kemudian gulir ke bawah Latar belakang , pilih tab Gambar dan tambahkan gambar Anda. Biarkan semua pengaturan gambar pada nilai defaultnya. Gambar tidak akan menunjukkan banyak pada awalnya. Kami akan menyelesaikan ini sambil berjalan.

Kemudian pilih tab Gaya dan gulir ke Jarak.

Margin (Desktop): -10% (Atas), -30% (Kiri), 10% (Kanan)
Padding (Atas dan Bawah): 300px

Margin (Tablet/Telepon): 0% (Atas), 0% (Kiri dan Kanan)

Padding (Telepon): 150px (Atas dan Bawah)

Contoh gambar yang dibentuk dengan Divi's Gradient Builder

Contoh pertama – Bentuk melingkar

Contoh pertama kami memberikan gambar bentuk lingkaran dengan lubang di tengahnya.

Buka pengaturan modul Gambar dan gulir ke bawah ke Latar Belakang . Pilih Tab Gradien Latar Belakang dan atur 6 pemberhentian gradien:

Pemberhentian pertama: 0%, #f0f3fb
Kedua: 45%, #f0f3fb
Ketiga (di atas detik): 45%, rgba (41,196,169,0)
Keempat: 69%, rgba(250,255,214,0)
Kelima (di atas keempat): 69%, #f0f3fb
Keenam: 100%, #f0f3fb

Jenis: Bulat
Posisi: Tengah
Satuan: Persen
Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh kedua – Bentuk linier

Berikut adalah preview dari contoh bentuk gambar kedua. Contoh ini menempatkan garis diagonal di seluruh gambar.

Buka pengaturan, gulir ke bawah ke latar belakang dan pilihTab Gradien Latar Belakang. Tambahkan empat pemberhentian gradien:

Pemberhentian pertama: 0%, #f0f3fb
Kedua: 5%, #f0f3fb
Ketiga (di atas detik): 5%, rgba (175,175,175,0)
Keempat: 13%, rgba(41,196,169,0)

Mengetik: Linier
Kemudi: 150 derajat
Ulangi Gradien: YA
Satuan Gradien: Persen
Gradien Persegi Di Atas Gambar Latar Belakang : YA

Contoh ketiga – Bentuk elips

Ini adalah contoh bentuk gambar ketiga kami. Ini menggunakan bentuk elips.

Buka pengaturan modul Gambar dan gulir ke bawah ke Latar Belakang . Pilih tab Gradien Latar Belakang dan buat empat pemberhentian gradien:

Pemberhentian pertama: 0%, #f0f3fb
Kedua: 9%, #f0f3fb
Ketiga (di atas detik): 9%, rgba (175,175,175,0)
Keempat: 21%, rgba(41,196,169,0)

Tipe: Elips
Posisi Gradien: Kiri Atas
Ulangi Gradien: YA
Satuan Gradien: Persen
Gradien Persegi Di Atas Latar Belakang Gambar : YA

Contoh keempat – Bentuk Kerucut

Contoh keempat kami menggunakan "Berbentuk kerucut" untuk membuat satu bentuk gambar.

Buka pengaturan modul Gambar, gulir ke bawah ke Latar Belakang dan pilih tab Gambar latar belakang. Yang ini memiliki 5 Gradient Stop:

Pemberhentian pertama: 23%, #f0f3fb
Kedua: 35%, #f0f3fb
Ketiga (di atas detik): 35%, rgba (41,196,169,0)
Keempat: 65%, rgba(250,255,214,0)
Kelima (di atas keempat): 65%, #f0f3fb

Jenis: Meruncing
Arah Gradien: 180 derajat
Posisi Gradien: Bawah
Satuan: Persentase
Gradien Persegi Di Atas Gambar Latar Belakang : YA

Hasil akhir

Semua tata letak berjalan dengan baik. Bentuk gambar menonjol dan gambar selalu mudah dimengerti. Semuanya responsif, sehingga terlihat bagus di perangkat apa pun.