10 Trik Desain Latar Belakang Sekarang Mungkin dengan Pengaturan Latar Belakang Baru Divi

Sejak rilis antarmuka opsi latar belakang baru Divi, Divi menjadi lebih kuat. Fitur-fitur baru telah membuka banyak kemungkinan desain baru. Hari ini, saya akan memperkenalkan beberapa trik desain baru yang mungkin tidak Anda ketahui dan, semoga, saya dapat menginspirasi Anda untuk membuat beberapa desain latar belakang yang mengagumkan.

Ada banyak kombinasi dan campuran desain latar belakang yang dapat Anda buat menggunakan Visual Builder. 10 trik yang saya tentukan untuk posting ini hanya akan menggores permukaan, tetapi itu dimaksudkan untuk memperkenalkan Anda pada konsep yang berbeda dan memicu minat Anda. Sebagian besar trik desain ini dilakukan dengan menggunakan opsi latar belakang baru seperti opsi latar belakang gradien baru dan menggabungkan gambar latar belakang dengan warna gradien.

Saya harus memperingatkan Anda sekalipun. Setelah Anda mulai menggali opsi latar belakang, Anda mungkin tidak akan pernah berhenti! Ini sangat menyenangkan. Yah, setidaknya seperti itu bagiku.

Menikmati.

Berikut adalah Sneak Peek dari Trik Desain

Cara Mengikuti Postingan Ini

Daripada harus memulai dari awal setiap kali saya menjelaskan trik desain baru, saya menggunakan contoh desain yang sama untuk sebagian besar dari mereka dan menambahkan trik berbeda ke desain itu. Ini berarti bahwa sebagian besar contoh mengharuskan Anda untuk menyelesaikan trik desain sebelumnya sebelum Anda dapat menerapkan trik baru. Trik #1-9 semua mengikuti pengaturan dasar yang sama dan memerlukan trik #1 sebagai prasyarat. Jadi jika Anda menguji fitur-fiturnya, saya sarankan memulai dengan Trik #1.

10 Trik Desain Latar Belakang dengan Divi

Berlangganan Saluran Youtube Kami

Trik #1: Hamparan diagonal

Tambahkan bagian lebar penuh lalu masukkan modul header lebar penuh.

Kemudian perbarui pengaturan modul header sebagai berikut:

Opsi Konten

Judul: [masukkan judul]
Subjudul: [masukkan subjudul]
URL Gambar Logo: [masukkan logo]
Warna Gradien Latar Belakang: rgba(12.113.195.0.55), rgba(255.255.255,0)
Tipe Gradien: Linier
Arah Gradien: 135deg
Posisi Awal: 60%
Posisi Akhir: 60% (apa pun yang 60% atau lebih rendah akan berfungsi)

Karena gradien dimulai dan diakhiri pada titik yang sama, pada dasarnya tidak ada efek gradien yang terjadi sama sekali. Jadi hasilnya adalah dua warna di setiap sisi penanda 60%. Itu dikombinasikan dengan sudut arah gradien menciptakan efek.

Pilihan Desain

Warna Teks: Cahaya
Judul Font: Default, Tebal (B), Huruf Besar (TT)
Judul Ukuran Font: 40px
Ukuran Font Subjudul: 24px

Opsi Lanjutan

Di bawah Custom CSS di kotak Elemen Utama, tambahkan CSS berikut:

Padding: 150px 0;

Ini hanya untuk menambahkan beberapa bantalan tambahan ke bagian atas dan bawah modul header

Simpan Pengaturan

Sekarang saatnya menambahkan latar belakang ke bagian lebar penuh Anda. Buka Pengaturan Bagian Lebar Penuh dengan mengklik ikon roda gigi di kotak kontrol ungu.

Kemudian perbarui Bagian Pengaturan Opsi Konten sebagai berikut:

Gambar Latar Belakang: [masukkan gambar latar belakang di sini. Lebarnya setidaknya harus 1960px. Saya memilih gambar ini dari unsplash.com dan memotongnya sehingga bagian gambar yang menonjol ada di sisi kanan.]
Gunakan Efek Parallax: YA (ini opsional tapi saya pikir ini bekerja dengan baik dengan overlay diagonal)
Metode Paralaks: Paralaks Sejati

Itu dia! Jangan ragu untuk menyesuaikan opacity warna gradien dan derajat arah gradien sesuai keinginan Anda.

Kami memulai dengan baik, saya pikir. Mari kita lanjutkan ke trik kedua.

Trik #2 : Melapisi Hamparan Diagonal

Trik desain ini merupakan lanjutan dari Trik #1 jadi pastikan Anda telah menyelesaikan trik #1 sebelum melanjutkan.

Dalam trik #1, kami tinggalkan dengan overlay diagonal menggunakan opsi gradien latar belakang di Modul Header Lebar Penuh.

Menggunakan contoh yang sama, tambahkan gradien latar belakang tambahan ke bagian lebar penuh. Kami sudah memiliki gambar latar belakang untuk bagian itu, tetapi dengan opsi baru Divi kami dapat menggabungkan warna gradien ke gambar latar belakang Anda dan kemudian memadukannya dengan efek tertentu.

Buka pengaturan Bagian Lebar Penuh dan perbarui opsi Konten berikut:

Warna Gradien Latar Belakang: rgba(131,0,233,0,38), rgba(255,255,255,0)
Tipe Gradien: Linier
Arah Gradien: 135deg (sama dengan arah gradien lainnya di modul header Anda)
Posisi Awal: 38%
Posisi Akhir: 38%

Sekarang klik ikon gambar latar belakang dan ubah yang berikut:

Gunakan Efek Paralaks: Tidak
Campuran Gambar Latar Belakang: Kalikan

Sekarang Anda memiliki 2 overlay diagonal yang tumpang tindih yang dapat dengan mudah disesuaikan untuk desain latar belakang yang unik.

Trik #3: Hamparan lingkaran

Trik desain ini merupakan lanjutan dari Trik #1 jadi pastikan Anda telah menyelesaikan trik #1 sebelum melanjutkan.

Sekarang kita akan mengubah overlay diagonal dari Trick #1 menjadi overlay lingkaran. Untuk melakukannya, buka Pengaturan Modul Lebar Penuh dan perbarui yang berikut ini:

Opsi Konten

Jenis Gradien Latar Belakang: Radial
Arah Radial: Pusat
Posisi Awal: 30%
Posisi Akhir: 30%

Pilihan Desain

Orientasi Teks & Logo: Tengah

Sekarang periksa latar belakang tajuk baru.

Trik ini membuat header atau ajakan bertindak yang tampak bagus. Ukuran overlay lingkaran dapat dengan mudah disesuaikan dan merespons dengan baik ke berbagai ukuran layar. Saat ini saya menggunakan warna gradien semi-transparan di atas gambar latar belakang, tetapi ini akan terlihat bagus tanpa gambar latar belakang.

Berikut adalah contoh tampilannya tanpa gambar latar dan dengan warna teks yang lebih gelap.

Trik #4 : Melapisi Lingkaran Overlay untuk membuat batas lingkaran

Ini adalah kelanjutan dari Trik #3 di mana kami tinggalkan dengan menambahkan overlay lingkaran ke modul header fullwidth. Setelah hamparan lingkaran Anda terpasang, kita dapat menambahkan hamparan lingkaran kedua untuk berfungsi sebagai batas untuk yang pertama. Kami melakukan ini dengan menambahkan gradien latar belakang lain ke Bagian Fullwidth yang berada di belakang Modul Header Fullwidth.

Buka Pengaturan Bagian Lebar Penuh dan perbarui yang berikut ini:

Opsi Konten

Di bawah tab Gambar Latar Belakang:

Gunakan Efek Paralaks: TIDAK
Campuran Gambar Latar Belakang: Kalikan

Di bawah tab Gradien Latar Belakang:

Warna Gradien Latar Belakang: rgba(0,0,0,0.45), rgba(255,255,255,0)
Jenis Gradien Latar Belakang: Radial
Arah Radial: Pusat
Posisi Awal: 34%
Posisi Akhir: 34%

Simpan Pengaturan

Itu dia.

Anda juga dapat dengan mudah mengubah ukuran lingkaran gradien latar belakang Anda dengan menyesuaikan persentase Posisi Awal.

Trik #5: Hamparan Lingkaran Terbalik

Ini adalah lanjutan dari Trik #3 yang diakhiri dengan overlay lingkaran di modul header fullwidth. Saat ini lingkaran berwarna biru semi-transparan dan sisa gambar latar belakang tidak memiliki warna overlay gradien sama sekali. Untuk trik ini, saya akan mengganti ini dan membalikkan overlay lingkaran sehingga overlay gradien biru semi-transparan akan mengelilingi lingkaran dan di dalam lingkaran akan mengekspos gambar latar belakang di belakangnya.

Untuk melakukannya, buka Pengaturan Header Lebar Penuh dan perbarui yang berikut ini:

Opsi Konten

Warna Gradien Latar Belakang: rgba(255,255,255,0), rgba(12,113,195,0,79)

Catatan: Yang Anda lakukan di sini hanyalah menukar warna di kiri dan kanan. Sekarang warna transparan adalah apa yang terlihat di dalam lingkaran dan gradien biru mengelilinginya. Saya akan meningkatkan opacity biru sehingga sedikit lebih gelap.

Coba lihat…

Trik #6: Hamparan lingkaran terbalik dengan Latar Belakang Video

Ini adalah kelanjutan dari Trick #5 yang meninggalkan kita dengan overlay lingkaran terbalik dengan latar belakang biru di sekitarnya. Saat ini lingkaran memperlihatkan gambar latar belakang di belakangnya. Anda dapat dengan mudah menambahkan latar belakang video untuk duduk di belakang hamparan lingkaran ini. Saya akan menyarankan menggunakan video yang tidak terlalu mengganggu. Juga setiap kali Anda menggunakan video, pastikan ukuran filenya kecil sehingga waktu buka halaman Anda tidak terganggu.

Untuk mengganti gambar latar belakang dengan video, buka Pengaturan Bagian Lebar Penuh, klik pada
ikon video latar belakang dan tambahkan video Anda.

Sekarang buka Pengaturan header Fullwidth dan perbarui yang berikut:

Opsi Konten

Warna Gradien Latar Belakang: rgba (12.113.195.0.67), #333333

Dengan warna gradien baru, video latar belakang hanya terlihat di dalam lingkaran. Dan warna overlay benar-benar membuat teks muncul.

Trik #7: Hamparan lingkaran terbalik di luar pusat

Ini adalah kelanjutan dari Trik #5 yang meninggalkan kami dengan overlay lingkaran terbalik. Jika Anda kembali ke Pengaturan Header Lebar Penuh, Anda dapat menyesuaikan Arah Radial ke pengaturan yang berbeda untuk membuat tampilan berbeda untuk header Anda.

Buka Pengaturan Header Fulwidth dan perbarui yang berikut:

Opsi Konten

Arah Radial: Kanan

Pilihan Desain

Orientasi Teks & Logo: Kiri

Berikut adalah hasil akhir dan beberapa contoh arah radial yang berbeda:

Contoh-contoh ini jelas membutuhkan beberapa pekerjaan tetapi Anda mendapatkan idenya.

Trik #8: Menggunakan Gradien untuk efek bayangan

Trik ini mungkin tidak mengejutkan, tetapi sangat berguna. Bagi kita yang tidak ingin repot menggunakan editor foto seperti Photoshop untuk menambahkan bayangan pada gambar Anda, ini untuk Anda.

Ini adalah kelanjutan dari Trik #1 yang ditinggalkan dengan overlay diagonal menggunakan opsi gradien latar belakang di Modul Header Lebar Penuh. Sekarang mari kita ubah overlay biru semi-transparan menjadi beberapa bayangan gelap yang dimulai di sebelah kiri gambar dan secara bertahap memudar ke kanan. Dengan cara ini bagian utama gambar di sebelah kanan tetap tidak tersentuh dan bayangan gelap di sebelah kiri membantu membuat teks lebih mudah dibaca.

Untuk menambahkan efek bayangan, buka Pengaturan Header Lebar Penuh dan perbarui yang berikut:

Opsi Konten

Warna Gradien Latar Belakang: rgba(0,0,0,0.55), rgba(0,0,0,0)
Arah Gradien: 90 derajat
Posisi Awal: 38%
Posisi Akhir: 85%

Inilah hasilnya.

Trik #9: Campuran Gambar Latar Belakang

Opsi latar belakang baru Divi mencakup mode campuran CSS untuk menyesuaikan gambar. Menjelajahi campuran gambar yang berbeda sangat menyenangkan dan cenderung menciptakan beberapa desain yang mengejutkan. Bagi Anda yang bukan desainer, Anda tidak perlu tahu definisi Saturation atau Luminosity untuk memanfaatkan opsi keren ini. Anda harus memiliki warna latar belakang atau gradien yang diatur dalam kombinasi dengan gambar latar belakang untuk melihat semua efek keren (itu tidak akan benar-benar berfungsi hanya dengan gambar latar belakang). Kemudian bermain-main sampai Anda mendapatkan tampilan yang Anda inginkan. Hasilnya mungkin mengejutkan Anda.

Untuk contoh ini, saya akan melanjutkan dari Trik #1 yang diakhiri dengan overlay diagonal menggunakan opsi gradien latar belakang di Modul Header Lebar Penuh.

Buka Pengaturan Header Lebar Penuh dan hapus gradien latar belakang di bawah Opsi Konten.

Simpan Pengaturan

Sekarang buka Pengaturan Bagian dan perbarui yang berikut:

Opsi Konten

Warna Gradien Latar Belakang: rgba(0,0,0,0.76), #0c71c3
Arah Gradien: 90 derajat
Posisi Awal: 50%
Posisi Akhir: 50%

Anda belum dapat melihat perubahan apa pun. Tidak apa-apa. Buka tab Gambar Latar Belakang dan perbarui yang berikut ini:

Gunakan Efek Paralaks: TIDAK
Campuran Gambar Latar Belakang: Cahaya Keras

Itu dia. Lihat hasilnya.

Catatan: warna yang digunakan di sini akan menciptakan efek yang berbeda berdasarkan gambar latar yang Anda gunakan. Jadi saya sarankan bermain-main dengan pilihan warna dan campuran sampai Anda mendapatkan yang Anda suka.

Trik #10: Layering untuk menambahkan lebih banyak warna ke latar belakang gradien Anda.

Secara default, setiap bagian, baris, kolom, dan modul dapat memiliki dua gradien warna. Namun, saat Anda menggabungkannya dan melapisinya di atas satu sama lain, Anda dapat membuat 5 warna untuk latar belakang gradien Anda. Dan ketika 5 warna ini menyatu, Anda dapat membuat spektrum yang cukup keren.

Inilah cara Anda melakukannya. Pertama, tambahkan Bagian Reguler dengan baris struktur 1 kolom. Kemudian di dalam baris, tambahkan Modul Blurb.

Perbarui pengaturan Modul Blurb sebagai berikut:

Opsi Konten

Judul: [masukkan judul]
Konten: [masukkan konten]

Pilihan Desain

Warna Teks: Cahaya
Orientasi Teks: Tengah
Font Header: Default, Tebal (B)
Ukuran Font Tajuk: 56px
Ukuran Font Tubuh: 22px
Padding Kustom: 100px Atas, 100px Bawah

Karena teks uraian berwarna putih dengan latar belakang putih, Anda belum dapat melihatnya, tetapi tidak apa-apa. Kamu akan segera. Saatnya untuk mulai menambahkan warna gradien.

Kami akan bekerja dengan cara kami dari belakang ke depan, kiri ke kanan. Untuk memulai, buka Pengaturan Bagian dan perbarui yang berikut ini:

Opsi Konten

Warna Gradien Latar Belakang: #ff0077, #0c71c3
Arah Gradien: 90 derajat
Posisi Awal: 0%
Posisi Akhir: 30%

Pilihan Desain

Padding Kustom: 0px Atas, 0px Bawah

Sekarang mari kita perbarui level warna gradien berikutnya – baris kita. Buka Pengaturan Baris dan perbarui yang berikut:

Opsi Konten

Warna Gradien Latar Belakang: rgba(255,255,255,0), #8300e9
Arah Gradien: 90 derajat
Posisi Awal: 25%
Posisi Akhir: 50%
Kolom 1 Warna Gradien Latar Belakang: rgba(255,255,255,0), #e02b20
Arah Gradien: 90 derajat
Posisi Awal: 50%
Posisi Akhir: 75%

Pilihan Desain
Jadikan Baris Ini Lebar Penuh: YA
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Padding Kustom: 0px Atas, 0px Bawah

Simpan Pengaturan

Sekarang untuk lapisan terakhir gradien kita perlu pergi ke Modul Blurb dan memperbarui yang berikut:

Opsi Konten
Warna Gradien Latar Belakang: rgba(255,255,255,0), #edf000
Arah Gradien: 90 derajat
Posisi Awal: 75%
Posisi Akhir: 100%

Pilihan Desain

Padding Kustom: 100px Atas, 100px Bawah

Itu dia. Sekarang Anda memiliki lima warna gradien yang menyatu untuk menciptakan latar belakang yang cukup berwarna.

Jangan lupa, Anda juga dapat mengubah Gradient Type menjadi Radial (melingkar) dan sepenuhnya mengubah desain (membutuhkan waktu sekitar 20 detik).

Jika Anda mengubah Gradient Type menjadi Radial untuk semua layer (bagian, baris, kolom, dan modul uraian), Anda akan mendapatkan sesuatu seperti ini.

Trik Bonus

Berikut adalah contoh bagaimana Anda dapat melapisi gambar latar belakang dengan paralaks. Ini adalah bagian biasa dengan gambar latar belakang menggunakan True Parallax. Di dalam section terdapat 1 baris kolom yang dibuat fullwidth dan tanpa padding sehingga membentang full width dari section. Untuk baris, saya menambahkan gambar latar belakang transparan dengan beberapa lingkaran gradien (seharusnya terlihat seperti gelembung) menggunakan metode CSS Parallax. Kemudian saya menambahkan Modul Ajakan Bertindak ke baris dengan latar belakang transparan. Kombinasi ini menciptakan gerakan saat menggulir ke bawah bagian pada halaman.

Trik ini sedikit lebih rumit karena memerlukan pembuatan foto khusus di luar Divi. Saya hanya berharap untuk menunjukkan kepada Anda kemungkinannya.

Beberapa contoh lagi

Saya akan mengakhiri ini dengan beberapa contoh desain yang saya buat saat menguji trik yang sama yang disebutkan dalam posting ini.

Pikiran Akhir

Saya harap Anda menikmati menjelajahi opsi latar belakang baru ini dan bersemangat tentang kemungkinan yang mereka bawa. Dan, karena opsi ini tersedia di bagian, baris, kolom, dan modul, Anda dapat menerapkan trik desain ini di bagian mana pun dari situs web Anda. Jika Anda belum melakukannya, luangkan waktu untuk menggali lebih dalam dan biarkan jus kreatif itu mengalir. Saya yakin bahwa jika Anda meluangkan waktu untuk menjelajahi opsi latar belakang sendiri, Anda akan bersemangat untuk menerapkannya pada proyek Anda berikutnya. Saya tidak sabar untuk melihat apa yang Anda dapatkan.

Looking forward untuk mendengar dari Anda di komentar.