Cara Membuat Latar Belakang Buram yang Indah dengan Divi

Latar belakang gradien saat ini adalah bagian dari hampir setiap situs web modern yang Anda temui. Tetapi segera setelah Anda ingin membuat gradien yang lebih kompleks, Anda mungkin cenderung menggunakan perangkat lunak pengedit gambar. Dengan Divi, ada alternatif. Berkat banyak opsi bawaan yang dimiliki Divi, Anda dapat mengubah Modul Gambar menjadi latar belakang buram. Kami akan mengaburkan latar belakang hingga titik di mana hanya warna yang terlihat dan dengan demikian membentuk gradien. Kami akan membuat ulang contoh yang indah dari awal dan juga membagikan contoh desain file JSON secara gratis!

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Latar Belakang Buram GRATIS

Untuk mendapatkan tata letak latar belakang buram gratis, 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! 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

• Kami menambahkan tiga modul berbeda ke satu kolom; dua Modul Gambar dan satu Modul CTA
• Gambar pertama mempertahankan tampilan awalnya
• Gambar kedua akan diburamkan dan ukurannya bertambah
• Kami juga akan meningkatkan warna dengan bermain-main dengan pengaturan filter lain yang disertakan dalam Modul Gambar
• Modul CTA akan tumpang tindih dengan Modul Gambar yang kabur dan menggunakannya sebagai latar belakangnya
• Untuk memastikan keburaman dan peningkatan ukuran Modul Gambar #2 tidak melampaui penampung kolom, kita akan menyembunyikan luapan kolom

Mari Mulai Berkreasi

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran di tab desain.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Lebar Maks: 100%

Kolom 2 Meluap

Pindah ke tab lanjutan dan sembunyikan kolom 2 overflow menggunakan satu baris kode CSS. Melakukan hal ini akan membantu kami memastikan tidak ada yang melebihi penampung kolom. Ini terutama akan menjadi penting setelah kita mulai mengubah Modul Gambar menjadi latar belakang buram dan meningkatkan ukurannya.

overflow: hidden;

Kolom 3 Meluap

Lakukan hal yang sama untuk kolom ketiga.

overflow: hidden;

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Salinan H2

Saatnya mulai menambahkan modul, dimulai dengan Modul Teks di kolom pertama. Masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2.

• Judul 2 Font: Poppins
• Judul 2 Warna Teks: #232323
• Judul 2 Ukuran Teks: 40px

Jarak

Tambahkan beberapa margin atas kustom juga.

• Margin Atas: 9vw

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Modul kedua yang kita butuhkan di kolom 2 adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain dan ubah warna garis.

• Warna Garis: #000000

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Teks lain dengan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks selanjutnya.

• Font Teks: Poppins
• Berat Font Teks: Ringan
• Ukuran Teks: 17px
• Tinggi Baris Teks: 2.1em

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di kolom 1 adalah Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain dan gaya tombol di pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 20px
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #f4f4f4
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Poppins
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Tambahkan beberapa nilai spasi kustom juga.

• Margin Atas: 20px
• Margin Bawah: 20px
• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 50px
• Padding Kanan: 50px

Tambahkan Modul Gambar #1 ke Kolom 2

Unggah Gambar 1:1

Ke kolom kedua! Di sini, modul pertama yang kita butuhkan adalah Modul Gambar. Unggah gambar dengan rasio 1:1. Ini berarti bahwa gambar Anda harus persegi yang sempurna (lebar harus sama dengan tinggi).

Perekat

Pindah ke tab desain dan aktifkan opsi 'Force Fullwidth'.

• Paksa Lebar Penuh: Ya

Tambahkan Modul Gambar #2 ke Kolom 2

Unggah Gambar 1:1

Modul kedua yang kita butuhkan di kolom 2 adalah Modul Gambar lainnya. Kami, sekali lagi, menggunakan gambar dengan rasio 1:1.

Perekat

Pindah ke tab desain dan ubah pengaturan ukuran.

• Paksa Lebar Penuh: Ya
• Tinggi: 320 piksel

Jarak

Buat tumpang tindih antara ini dan modul sebelumnya dengan menambahkan beberapa margin atas negatif.

• Margin Atas: -100px

Filter

Selanjutnya, kita akan mengubah pengaturan filter. Ini adalah bagian di mana kita mengubah gambar menjadi latar belakang kabur.

• Saturasi: 200%
• Kecerahan: 145%
• Kontras: 117%
• Kabur: 40px

Transformasi Skala

Untuk memastikan gambar menutupi seluruh lebar kolom, kami akan meningkatkan ukuran dalam pengaturan transformasi. Berkat luapan kolom tersembunyi yang telah kami tambahkan ke pengaturan baris, tidak ada yang akan melampaui penampung kolom.

• Kanan: 180%
• Bawah: 180%

Tambahkan Modul CTA ke Kolom 2

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan di kolom kedua adalah Modul CTA. Masukkan beberapa salinan pilihan Anda.

Tambahkan Tautan

Pindah ke pengaturan tautan dan tambahkan URL tautan tombol untuk membuat tombol muncul di desain.

Hapus Warna Latar Belakang

Hapus juga warna latar belakang.

• Gunakan Warna Latar Belakang: Tidak

Pengaturan Teks Judul

Lanjutkan dengan membuka tab desain dan mengubah pengaturan teks judul.

• Judul Judul Level: H3
• Judul Font: Poppins
• Ukuran Teks Judul: 40px
• Spasi Huruf Judul: -1px

Pengaturan Teks Tubuh

Ubah juga pengaturan teks isi.

• Font Tubuh: Poppins
• Berat Huruf Tubuh: Ringan
• Tinggi Garis Tubuh: 2.2em

Pengaturan Tombol

Bersamaan dengan pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 20px
• Warna Teks Tombol: #ffffff
• Warna Gradien 1: rgba (244,244,244,0.4)
• Warna Gradien 2: rgba(255,255,255,0)
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Poppins
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar

• Margin Atas: 50px
• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 50px
• Padding Kanan: 50px

Jarak

Last but not least, buat tumpang tindih antara modul ini dan latar belakang buram dengan menambahkan beberapa margin atas negatif. Kami juga meninggalkan beberapa spasi putih di sisi kiri dan kanan modul

• Margin Atas: -250px
• Padding Kiri: 2vw
• Padding Kanan: 2vw

Kloning Semua Modul di Kolom 2 & Tempatkan Duplikat di Kolom 3

Setelah Anda menyelesaikan semua modul di kolom kedua, Anda dapat mengkloningnya dan menempatkan duplikatnya di kolom ketiga.

Ubah Modul Gambar Duplikat #1

Ganti gambar

Ubah gambar di Modul Gambar #1.

Ubah Modul Gambar Duplikat #2

Ganti gambar

Lakukan hal yang sama untuk Modul Gambar kedua di kolom.

Ubah Pengaturan Filter

Dan ubah juga pengaturan filter dari Modul Gambar kedua.

• Saturasi: 180%
• Kecerahan: 102%
• Kontras: 117%
• Kabur: 35px

Ubah Modul CTA Duplikat

Ubah Salin

Lanjutkan dengan mengubah konten Modul CTA.

Ubah Latar Belakang Gradien Tombol

Seiring dengan warna gradien tombol pertama dan Anda selesai!

• Warna Gradien 1: rgba (244,244,244,0.15)

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat latar belakang buram menggunakan opsi bawaan Divi saja. Kami telah membuat ulang contoh indah dari awal yang dapat Anda gunakan untuk semua jenis situs web yang Anda buat. Kami harap tutorial ini menginspirasi Anda untuk membuat desain kustom Anda sendiri menggunakan tips yang dibagikan dalam tutorial ini. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.