Cara Membentuk Gambar Anda dengan Divi's Gradient Builder

Masker gambar sering digunakan untuk menambahkan bentuk yang menarik pada gambar. Mereka memungkinkan gambar untuk mengintip melalui bentuk, memberikan halaman elemen desain yang unik. Dengan Gradient Builder Divi, Anda tidak perlu menggunakan topeng untuk membuat bentuk. Sebagai gantinya, Anda dapat menggunakan Gradient Stop dan pengaturan untuk membuatnya! Dalam posting ini, kita akan melihat bagaimana membentuk gambar Anda dengan Divi's Gradient Builder untuk membantu Anda menambahkan desain unik ke gambar Anda.

Mari kita mulai.

Pratinjau

Pertama, mari kita lihat apa yang akan kita buat dalam tutorial ini.

Contoh Pertama – Bentuk Gambar Melingkar

Desktop

Tablet

Telepon

Contoh Kedua – Bentuk Gambar Linier

Desktop

Tablet

Telepon

Contoh Ketiga – Bentuk Gambar Elips

Desktop

Tablet

Telepon

Contoh Keempat – Bentuk Gambar Kerucut

Desktop

Tablet

Telepon

Buat Tata Letaknya

Pertama, mari buat 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 itu untuk contoh.

Sesuaikan Bagian

Pertama, buat halaman Divi baru dan sesuaikan Bagian. Buka pengaturan bagian dan ubah Warna Latar menjadi #f0f3fb.

• Warna Latar Belakang: #f0f3fb

Selanjutnya, buka tab Desain dan tambahkan 10% Padding ke Atas dan Bawah. Tutup pengaturan.

• Padding: 10% Atas, Bawah

Tambahkan Baris

Selanjutnya, tambahkan Baris dengan kolom 2/3 dan kolom 1/3.

• 2/3, 1/3 Baris

Buka tab Desainnya. Aktifkan Use Custom Gutter Width dan atur Max Width ke 1480px.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Maks: 1480px

Pengaturan Kolom Pertama

Di tab Konten Baris, buka pengaturan untuk kolom pertama Baris, buka tab Desain dan tambahkan Padding 9% ke Kiri dan Kanan. Tutup pengaturan Kolom dan Baris.

• Padding: 9% Kiri, Kanan

Pengaturan Modul Teks Pertama

Selanjutnya, tambahkan Modul Teks ke kolom kiri.

Pilih Judul 4 untuk teks konten dan tambahkan konten tubuh Anda.

• Judul: 4
• Tubuh: Selamat datang di Divi

Selanjutnya, buka tab Desain . Atur Font H4 menjadi Montserrat, Weight menjadi bold, Style menjadi TT, dan Color menjadi #1d4eff.

• Judul 4 Font: Montserrat
• Berat: Tebal
• Gaya: TT
• Warna: #1d4eff

Atur Ukuran Font desktop ke 16px, ukuran tablet ke 14px, dan ukuran ponsel ke 12px. Ubah Letter Spacing menjadi 0.3em dan Line Height menjadi 1.6em.

• Ukuran: Desktop 16px, Tablet 14px, Telepon 12px
• Spasi Huruf: 0.3em
• Tinggi Garis: 1.6em

Gulir ke bawah ke Spasi dan ubah Margin Bawah menjadi 0px. Tutup modul.

• Margin: 0px Bawah

Pengaturan Modul Teks Kedua

Selanjutnya, tambahkan Modul Teks di bawah yang pertama.

Atur jenis teks ke Heading 1 dan tambahkan konten isi Anda.

• Judul: 1
• Tubuh: Rencanakan masa depan keuangan Anda

Selanjutnya, pilih tab Desain . Ubah Heading Font menjadi Montserrat, Weight menjadi Bold, dan Color menjadi #0f1154.

• Judul 1 Font: Montserrat
• Berat: Tebal
• Warna: #0f1154

Atur Ukuran Font menjadi 80px untuk desktop, 40px untuk tablet, dan 24px untuk ponsel. Ubah Tinggi Garis menjadi 110%. Tutup modul.

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

Pengaturan Modul Teks Ketiga

Selanjutnya, tambahkan Modul Teks di bawah yang kedua.

Biarkan jenis teks ke Paragraf dan tambahkan konten tubuh Anda.

• Judul: Paragraf
• Tubuh: konten

Selanjutnya, buka tab Desain . Ubah Font Teks menjadi Roboto, atur Weight menjadi Medium, dan Color menjadi hitam.

• Font Teks: Roboto
• Berat: Sedang
• Warna: #000000

Ubah Ukuran untuk desktop dan tablet menjadi 18px, dan ponsel menjadi 14px. Atur Tinggi Garis menjadi 180%.

• Ukuran: Desktop 18px, Tablet 18px, Ponsel 14px
• Tinggi Garis: 180%

Terakhir, gulir ke bawah ke Spasi dan atur Margin Bawah menjadi 0%. Tutup pengaturan modul.

• Margin: 0px Bawah

Pengaturan Modul Gambar

Sekarang, tambahkan Modul Gambar ke kolom di sebelah kanan.

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

Selanjutnya, gulir ke bawah Latar Belakang , pilih tab Gambar , dan tambahkan gambar Anda. Biarkan semua pengaturan gambar pada defaultnya. Gambar tidak akan menunjukkan banyak pada awalnya. Kami akan memperbaikinya sambil berjalan.

Selanjutnya, pilih tab Desain dan gulir ke bawah ke Spasi . Untuk desktop, tambahkan -10% Atas, -30% Kiri, 10% Margin Kanan. Tambahkan Padding Atas dan Bawah 300px. Ini adalah pengaturan desktop. Kami akan membuat penyesuaian untuk tablet dan ponsel.

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

Selanjutnya, kami ingin memastikan bahwa bentuk gambarnya responsif. Pilih ikon tablet untuk membuka pengaturan untuk tablet dan ponsel. Arahkan kursor ke pengaturan Margin dan pilih ikon tablet yang muncul. Ini membuka satu set tab dengan tab untuk setiap jenis perangkat. Pilih tab Tablet dan ubah Margin menjadi 0% Top, 0% Left, 0% Right Margin. Tab Telepon akan mengikuti pengaturan Tablet, jadi kita tidak perlu menyesuaikannya untuk Margin.

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

Selanjutnya, pilih ikon tablet yang muncul saat Anda mengarahkan kursor ke pengaturan Padding. Pilih tab Phone dan ubah Padding menjadi 150px Top dan 150px Bottom. Tablet Padding akan mengikuti pengaturan desktop. Tutup pengaturan modul.

• Padding: Atas 150px, Bawah 150px

Bentuk Gambar dengan Contoh Gradient Builder Divi

Selanjutnya, kita akan menggunakan pengaturan tersebut dan membentuk gambar dengan Divi's Gradient Builder. Seperti yang akan kita lihat, beberapa pengaturan membantu kita membuat bentuk gambar yang menarik dengan Gradient Builder Divi.

Beberapa pengaturan utama yang perlu diingat termasuk menumpuk Gradient Stop dan mengatur pola untuk diulang. Pastikan untuk menguji pola Anda pada semua ukuran layar untuk memastikan Anda menyukai bentuknya.

Untuk informasi lebih lanjut tentang menggunakan Divi's Gradient Builder, cari di blog Elegant Themes untuk "Gradient Builder". Anda akan menemukan beberapa posting dengan tutorial terperinci untuk memandu Anda melalui kontrol dan pengaturan.

Contoh Pertama – Bentuk Gambar Pembuat Gradien 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 Background Gradient dan atur 6 Gradient Stops:

• Pemberhentian Pertama: 0%, #f0f3fb
• Kedua: 45%, #f0f3fb
• Ketiga (di atas Kedua): 45%, rgba(41.196.169,0)
• Keempat: 69%, rgba(250.255.214,0)
• Kelima (di atas Keempat): 69%, #f0f3fb
• Keenam: 100%, #f0f3fb

Selanjutnya, pilih Circular untuk Gradient Type, atur Position ke Center, gunakan Percent untuk Unit, dan aktifkan Place Gradient Above Background Image.

• Jenis: Melingkar
• Posisi: Tengah
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Kedua – Bentuk Gambar Pembuat Gradien Linier

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

Buka pengaturan, gulir dowl ke Background , dan pilih tab Background Gradient . Tambahkan empat Gradient Stop:

• Pemberhentian Pertama: 0%, #f0f3fb
• Kedua: 5%, #f0f3fb
• Ketiga (di atas Kedua): 5%, rgba(175.175.175,0)
• Keempat: 13%, rgba(41.196.169,0)

Atur Gradient Type ke Linear dengan Arah 150deg. Setel ke Ulangi. Gunakan Persen untuk Unit dan aktifkan Tempatkan Gradien Di Atas Gambar Latar Belakang.

• Mengetik: Linier
• Arah: 150 derajat
• Ulangi: Ya
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Ketiga – Bentuk Gambar Pembangun Gradien Elips

Berikut contoh bentuk gambar ketiga kami. Yang ini menggunakan bentuk elips.

Buka pengaturan Modul Gambar dan gulir ke bawah ke Latar Belakang . Pilih tab Background Gradient dan buat empat Gradient Stops:

• Pemberhentian Pertama: 0%, #f0f3fb
• Kedua: 9%, #f0f3fb
• Ketiga (di atas Kedua): 9%, rgba(175.175.175,0)
• Keempat: 21%, rgba(41.196.169,0)

Selanjutnya, ubah Gradient Type menjadi Elliptical dan atur Position ke Top Left. Pilih Ulangi Gradien, gunakan Persentase sebagai Unit dan aktifkan Tempatkan Gradien Di Atas Gambar Latar Belakang.

• Mengetik: Elips
• Posisi: Kiri Atas
• Ulangi Gradien: Ya
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Contoh Keempat – Bentuk Gambar Pembuat Gradien Kerucut

Contoh keempat kami menggunakan Conical untuk membuat bentuk gambar yang unik.

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

• Pemberhentian Pertama: 23%, #f0f3fb
• Kedua: 35%, #f0f3fb
• Ketiga (di atas Kedua): 35%, rgba(41.196.169,0)
• Keempat: 65%, rgba(250.255.214,0)
• Kelima (di atas Keempat): 65%, #f0f3fb

Atur Gradient Type ke Conical dan biarkan Direction pada pengaturan default. Atur Posisi ke Bawah, gunakan Persen untuk Unit, dan aktifkan Tempatkan Gradien Di Atas Gambar Latar Belakang.

• Mengetik: Kerucut
• Arah: 180 derajat
• Posisi: Bawah
• Satuan: Persen
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Hasil Bentuk Bulder Gradien

Semua tata letak ternyata baik. Bentuk gambarnya menonjol dan gambarnya masih mudah dipahami. Semuanya responsif, sehingga terlihat bagus di perangkat apa pun.

Contoh Pertama – Bentuk Gambar Melingkar

Desktop

Tablet

Telepon

Contoh Kedua – Bentuk Gambar Linier

Desktop

Tablet

Telepon

Contoh Ketiga – Bentuk Gambar Elips

Desktop

Tablet

Telepon

Contoh Keempat – Bentuk Gambar Kerucut

Desktop

Tablet

Telepon

Mengakhiri Pikiran

Itulah tampilan kami tentang cara membentuk gambar Anda dengan Divi's Gradient Builder. Gradient Builder dapat membuat beberapa bentuk gambar yang menarik. Bermain-main dengan Gradient Stops, mencoba berbagai Jenis Gradien, dan mengaktifkan Gradient Repeat adalah cara yang bagus untuk membuat desain baru. Pastikan untuk memeriksa desain Anda pada semua ukuran layar dan lakukan penyesuaian jika diperlukan.

Kami ingin mendengar dari Anda. Sudahkah Anda menggunakan Divi's Gradient Builder untuk membentuk gambar Anda? Beri tahu kami tentang pengalaman Anda di komentar.