Unduh 9 Hamparan Gambar Berbentuk GRATIS untuk Divi

Cara Anda menampilkan gambar di situs web Anda benar-benar dapat membuat perbedaan dalam keseluruhan desain yang Anda buat. Dengan opsi bawaan Divi, Anda sudah dapat menerapkan berbagai pengaturan desain yang akan membantu Anda menampilkan gambar dengan cara yang menakjubkan, misalnya, memikirkan batas dan bayangan kotak. Tetapi jika Anda ingin memberikan gambar Anda bentuk yang lebih unik, posting ini akan membantu Anda. Kami akan membagikan 9 hamparan gambar berbentuk GRATIS yang dapat Anda unduh dan gunakan di situs web apa pun yang Anda buat. Setelah membagikan hamparan gambar berbentuk ini, kami juga akan menunjukkan kepada Anda cara memanfaatkannya saat membangun situs web dengan Divi. Kami berharap tutorial ini akan menginspirasi Anda untuk membuat jenis overlay gambar berbentuk Anda sendiri juga.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial dan mengunduh, mari kita lihat sekilas hasil yang dapat Anda harapkan di berbagai ukuran layar.

Desktop

Telepon

Unduh Hamparan Gambar Berbentuk GRATIS

Untuk meletakkan tangan Anda pada hamparan gambar berbentuk, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin dan Jumat! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Mendekati

• Hamparan gambar berbentuk yang dapat Anda temukan di folder unduhan siap digunakan jika Anda menggabungkannya dengan baris putih dan/atau warna latar bagian
• Jika Anda ingin menyesuaikan overlay gambar berbentuk sesuai dengan warna latar belakang lain, Anda harus mengekspor overlay gambar berbentuk dalam warna lain menggunakan file ilustrator yang disertakan dalam unduhan di atas
• Kami akan menunjukkan cara mengubah warna overlay gambar berbentuk di bagian pertama tutorial (menggunakan Adobe Illustrator)
• Kemudian, kita akan beralih ke Divi dan mengunggah salah satu hamparan gambar berbentuk ke Modul Gambar
• Kami juga akan menambahkan gambar latar belakang dan latar belakang gradien ke Modul Gambar yang akan ditampilkan melalui hamparan gambar berbentuk

Memodifikasi Hamparan Gambar Berbentuk ke Warna Latar Bagian dengan Adobe Illustrator

Buka File Illustrator di Folder Download

Seperti disebutkan di bagian pendekatan posting ini, jika Anda ingin menggunakan overlay berbentuk gambar pada latar belakang putih, Anda siap untuk pergi hanya dengan menggunakan file PNG yang dapat Anda temukan di folder unduhan. Namun, jika Anda ingin menggunakan overlay gambar berbentuk pada warna latar belakang baris dan/atau bagian yang berbeda, Anda perlu mengubah warna secara manual menggunakan file Adobe Illustrator yang disertakan dalam folder unduhan juga. Mengubah warna membutuhkan sedikit atau tanpa waktu dan memungkinkan Anda untuk menggunakan hamparan gambar berbentuk di situs web apa pun yang Anda buat, jadi mari kita ikuti langkah-langkahnya. Pertama-tama, Anda perlu membuka file Adobe Illustrator.

Pilih Hamparan Bentuk Gambar Pilihan

Setelah Anda membuka file, Anda akan menemukan 9 artboard berbeda dengan hamparan gambar berbentuk yang bebas Anda gunakan untuk tujuan apa pun. Pilih yang ingin Anda edit.

Ubah Warna untuk Mencocokkan Warna Latar Belakang Bagian

Lanjutkan dengan mengubah warna bentuk menjadi warna latar belakang yang sama yang Anda rencanakan untuk digunakan untuk baris dan/atau bagian Anda.

Pilih Papan Seni

Setelah warnanya dimodifikasi, Anda dapat memilih seluruh artboard yang berisi hamparan gambar berbentuk.

Simpan Hamparan Gambar Berbentuk PNG untuk Web

Dan simpan sebagai file gambar PNG untuk web dengan membuka File > Ekspor > Simpan untuk Web .

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Saatnya beralih ke Divi dan ciptakan hasilnya! Buat halaman baru atau buka yang sudah ada dan tambahkan bagian reguler baru.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Gambar ke Kolom 1

Unggah Hamparan Gambar Berbentuk

Satu-satunya modul yang kita perlukan di kolom 1 adalah Modul Gambar. Di sinilah semua keajaiban akan terjadi. Kita akan mulai dengan mengunggah overlay gambar berbentuk. Anda akan melihat bahwa satu bagian dari gambar benar-benar transparan. Ini akan memungkinkan gambar latar belakang dan latar belakang gradien untuk ditampilkan dalam langkah-langkah yang akan datang.

Latar Belakang Gradien

Silakan dan tambahkan latar belakang gradien pilihan Anda selanjutnya.

• Warna 1: #aa2bff
• Warna 2: #09f7eb

Gambar latar belakang

Dan unggah gambar latar belakang PNG, atau hanya yang biasa jika Anda tidak ingin latar belakang gradien terlihat. Anda juga dapat mengunduh ilustrasi yang kami gunakan dengan membuka posting berikut yang telah kami buat tentang cara mengubah latar belakang gradien saat melayang.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah Bawah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

Perekat

Langkah penting lainnya untuk membuat tutorial ini berfungsi adalah mengaktifkan opsi 'Force Fullwidth' dalam pengaturan ukuran Modul Gambar. Ini akan memastikan latar belakang gradien dan gambar latar belakang hanya akan ditampilkan melalui area transparan dari hamparan gambar berbentuk.

• Paksa Lebar Penuh: Ya

Tambahkan Modul Teks Judul ke Kolom 2

Tambah isi

Mari kita beralih ke kolom kedua. Di sini, modul pertama yang kita perlukan adalah modul teks judul. Tambahkan beberapa konten pilihan.

Pengaturan Teks

Kemudian, buka pengaturan teks judul dan buat beberapa perubahan.

• Judul 2 Font: Antic Didone
• Judul 2 Berat Font: Tebal
• Judul 2 Ukuran Teks: 45px
• Spasi Judul 2 Huruf: -2px

Jarak

Tambahkan beberapa margin atas kustom juga.

• Margin Atas: 100px

Tambahkan Modul Teks Deskripsi ke Kolom 2

Tambah isi

Modul kedua yang kita perlukan adalah Modul Teks deskripsi. Masukkan beberapa konten pilihan.

Pengaturan Teks

Kemudian, buka pengaturan teks dan ubah orientasi teks modul.

• Orientasi Teks: Justify

Perekat

Ubah lebar dalam pengaturan ukuran juga.

• Lebar: 63%

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita perlukan adalah Modul Tombol. Masukkan beberapa konten pilihan.

Pengaturan Tombol

Lanjutkan dengan masuk ke pengaturan tombol dan mengubah tampilan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 17px
• Warna Teks Tombol: #ffffff
• Warna Gradien 1: #aa2bff
• Warna Gradien 2: #09f7eb
• Arah Gradien: 111deg

• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px
• Jarak Huruf Tombol: -2px
• Berat Huruf: Sangat Tebal
• Gaya Font: Huruf Besar

Jarak

Tambahkan beberapa bantalan khusus tambahan ke tombol juga.

• Padding Atas: 10px
• Padding Bawah: 10px
• Padding Kiri: 50px
• Padding Kanan: 50px

Bayangan Kotak

Last but not least, lengkapi desain dengan menambahkan bayangan busur halus ke tombol.

• Kekuatan Buram Bayangan Kotak: 50px
• Kekuatan Penyebaran Bayangan Kotak: -5px

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Telepon

Pikiran Akhir

Dalam posting ini, kami telah membagikan 9 overlay gambar berbentuk GRATIS untuk Divi yang dapat Anda gunakan untuk semua jenis situs web yang Anda bangun. Kami harap tutorial ini menginspirasi Anda untuk membuat overlay gambar berbentuk unik Anda sendiri yang dapat terus Anda gunakan kembali. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!