Cara Menambahkan Hamparan Warna & Gradien ke Divi Parallax & Latar Belakang Video

Hamparan warna dan gradien adalah elemen desain luar biasa yang dapat menarik perhatian audiens Anda dan membuat konten Anda menonjol. Mereka bekerja sangat baik dengan gambar latar belakang. Tambahkan gambar latar belakang ke bagian, baris, atau kolom, tambahkan overlay warna atau gradien, lalu tempatkan konten Anda di atasnya. Namun, satu masalah adalah overlay warna dan gradien tidak berfungsi dengan paralaks dan latar belakang video di Divi secara default.

Dalam tutorial ini, kami akan menunjukkan cara menambahkan overlay warna dan gradien ke latar belakang dengan gambar dalam paralaks atau video menggunakan plugin pihak ketiga dari pasar kami. Kita juga akan melihat overlay bekerja dengan pembagi bagian. Ini biasanya memerlukan kode, tetapi dengan alat yang tepat, tidak sulit bagi siapa pun untuk menerapkannya.

Mari kita mulai.

Sneak Peek

Berikut ini adalah apa yang akan kita buat dalam tutorial ini.

Saya membuat tata letak dengan latar belakang paralaks di satu bagian dan latar belakang video di bagian lain. Latar belakang paralaks akan memiliki gradien dan latar belakang video akan memiliki hamparan warna tunggal. Kami juga akan memberi gaya pada pembagi bagian. Saya menggunakan halaman arahan dari Paket Tata Letak Pizzeria karena, yah, pizza. Ini adalah tampilannya di desktop.

Beginilah tampilan desain yang sama di ponsel.

Standar Divi Parallax dan Latar Belakang Video

Alat Divi standar memungkinkan Anda untuk menambahkan gambar dan video latar belakang ke bagian, baris, dan kolom, tetapi overlay untuk mereka terbatas. Untuk gambar latar belakang, Anda dapat menambahkan overlay gradien tetapi bukan overlay untuk warna solid. Pilihan untuk video tidak termasuk overlay.

Opsi untuk gambar latar belakang memang menyertakan paralaks, tetapi jika Anda mengaktifkan paralaks untuk gambar latar belakang, hamparan tidak lagi ditampilkan di atas gambar. Ini dimatikan, meskipun Anda telah memilihnya untuk menampilkan overlay.

Cara Menambahkan Hamparan Warna & Gradien ke Divi Parallax & Latar Belakang Video

Kami akan menambahkan overlay warna dan gradien ke paralaks dan latar belakang video menggunakan plugin pihak ketiga yang disebut Divi Background Plus. Kita juga akan melihat cara menata pemisah bagian menggunakan plugin ini.

Instal Divi Background Plus

Divi Background Plus tersedia di Divi Marketplace. Mari kita lihat bagaimana memulainya. Pertama, beli dan unduh Divi Background Plus ke komputer Anda.

Di dasbor WordPress Anda, buka Plugin dan pilih Add New . Klik Unggah Plugin di bagian atas layar.

Pilih Pilih File , navigasikan ke file zip di komputer Anda, pilih file, dan klik Instal Sekarang .

Setelah file diunggah, klik Activate Plugin . Tidak diperlukan pengaturan lain. Plugin sekarang siap digunakan.

Modul baru ditambahkan ke Divi Builder yang disebut Divi Background Plus. Kami akan menggunakan modul ini untuk membuat gradien dan overlay warna untuk latar belakang video iklan paralaks. Plugin ini dan latar belakang di bagian adalah semua yang kita perlukan untuk tutorial ini.

Tambahkan Hamparan Gradien ke Latar Belakang Divi Parallax

Buka pengaturan bagian tempat Anda akan mengunggah gambar latar belakang. Dalam contoh ini, saya menggunakan gambar latar belakang dengan bagian pertama dalam paket tata letak Pizzeria, tetapi Anda dapat mengunggahnya ke bagian, baris, atau kolom mana pun yang Anda inginkan.

Buka tab gambar di pengaturan Konten. Aktifkan Gunakan Efek Paralaks . Saya menggunakan True Parallax, yang merupakan pengaturan default. CSS Parallax juga berfungsi.

Mengaktifkan efek paralaks menonaktifkan gradien, tetapi pengaturan untuk gradien masih ada. Daripada menggunakan gradien di pengaturan bagian, kami akan menambahkan gradien di pengaturan di modul Divi Background Plus.

Jika Anda ingin menggunakan gradien yang sama yang sudah digunakan untuk bagian ini (seperti saya), pilih tab Gradient dan klik kanan di suatu tempat pada gradien. Klik Salin Warna Gradien Latar Belakang .

Pilih untuk menambahkan modul baru ke bagian dengan gambar latar belakang Anda dan pilih Divi Background Plus .

Di pengaturan Tata Letak di tab Konten, pilih untuk menerapkan pengaturan ke bagian, baris, atau kolom. Saya memilih Bagian .

Buka pengaturan Latar Belakang dan pilih tab Gradien. Gradien default diterapkan secara otomatis. Anda dapat menyesuaikan opacity sehingga latar belakang Anda terlihat, membuat gradien Anda sendiri, atau menggunakan salah satu dari tata letak.

Untuk menggunakan salah satu dari tata letak, klik kanan, dan pilih Tempel Warna Gradien Latar Belakang . Ini tidak hanya akan menerapkan warna, tetapi juga pengaturan untuk jenis gradien, arah, posisi awal, posisi akhir, dan penempatan gradien di atas gambar latar belakang.

Berikut hasilnya. Saya sekarang memiliki versi asli yang menyertakan gambar dan overlay yang sama, tetapi sekarang menampilkan latar belakang dalam paralaks yang sebenarnya.

Begini tampilan tata letak yang sama di telepon.

Tambahkan Hamparan Warna ke Latar Belakang Video Divi

Tambahkan bagian reguler baru di bawah bagian pertama. Kami akan menambahkan video latar belakang ke bagian ini, modul Divi Background Plus untuk overlay, dan menambahkan modul teks untuk menampilkan pesan, informasi kontak, dan CTA di overlay.

Saya berencana untuk menggunakan teks dari bagian Ajakan Bertindak. Ini mudah dilakukan dengan alat Lapisan Divi. Untuk melakukannya, klik kanan pada bagian yang ingin Anda salin dan pilih Go To Layer .

Klik kanan pada baris yang ingin Anda salin dan pilih Salin Baris .

Kemudian, pilih bagian tempat Anda ingin meletakkan baris, klik kanan, dan pilih Tempel Baris . Saya melakukan ini untuk kedua baris yang ingin saya salin dari bagian ini. Sebagai alternatif, saya dapat menyalin bagian ini dan menambahkan modul Divi Background Plus ke dalamnya.

Saya sekarang memiliki bagian baru dengan Divi Background Plus, beberapa modul teks, dan CTA.

Selanjutnya, tambahkan video ke latar belakang bagian. Warna dalam video bekerja dengan baik dengan warna dalam teks, tetapi saya ingin menambahkan overlay untuk membuatnya sedikit lebih menonjol. Untuk video latar belakang saya, saya menggunakan video gratis Topping Campuran Tima Miroshnichenko Di Atas Pizza dari Pexels.

Buka pengaturan Divi Background Plus dan pilih Bagian untuk tata letak.

Gulir ke bawah ke tab Latar Belakang dan pilih opsi warna. Tentu saja, warna Anda akan berbeda tergantung pada video Anda. Saya ingin memberi warna merah pada video. Saya telah menggunakan:

• rgba(150,0,0,0.15)

Begini tampilan video latar belakang dengan hamparan berwarna merah di desktop.

Berikut tata letak yang sama di telepon.

Untuk beberapa contoh lagi, ini dia dengan latar belakang ungu standar dengan opacity 30%.

Ini adalah oranye standar dengan opacity 80%.

Gaya Pembagi Bagian

Hamparan juga berfungsi dengan pembagi bagian. Untuk menambahkan pemisah bagian, buka pengaturan bagian.

Buka tab Desain, pilih Pembagi , dan pilih Atas atau Bawah , tergantung di mana Anda ingin menambahkan pembagi. Saya menambahkan pembagi hanya di bagian bawah. Klik pada kotak dropdown berlabel Gaya Pembagi untuk memilih pembagi Anda.

Pilih gaya pembagi yang Anda inginkan. Saya memilih gaya kelima, yang menciptakan sudut dengan dua warna.

Pilih ikon edit untuk menambahkan warna khusus. Ini adalah warna yang muncul di bagian di mana pembagi tidak terlihat. Warna default adalah putih, seperti yang Anda lihat pada contoh sebelumnya. Tambahkan warna sebagai kode hex atau pilih warna dari pemilih warna. Saya menambahkan warna #0d0d0d, yang merupakan salah satu warna di bagian bawah video.

• Warna #0d0d0d

Video sekarang memiliki pembagi bergaya untuk bagian bawah bagian itu. Anda dapat melihat video yang ditampilkan melalui bagian transparan dari pembagi, dan itu menyatu dengan baik dengan kedua bagian.

Hasil

Mari kita lihat bagaimana tata letak terlihat di desktop dan seluler.

Berikut tampilan versi desktopnya. Ini memiliki latar belakang paralaks yang benar dengan overlay gradien di bagian pertama. Bagian kedua menyertakan gambar latar belakang dengan hamparan warna dan pemisah bagian yang memisahkannya dari bagian berikutnya.

Begini tampilan tata letak di telepon. Semua elemen berfungsi dengan baik di perangkat seluler.

Mengakhiri Pikiran

Itulah tampilan kami tentang cara menambahkan overlay warna dan gradien ke paralaks Divi dan latar belakang video. Divi Background Plus membuatnya mudah dibuat dan digunakan. Ini bekerja dengan bagian, baris, dan kolom dan mudah untuk memilih di antara mereka. Semua penyesuaian adalah alat dan pengaturan Divi standar, jadi sudah tidak asing lagi.

Sekarang latar belakang Anda dapat menyertakan overlay warna dan gradien tanpa harus menonaktifkan paralaks dan video!

Kami ingin mendengar dari Anda. Sudahkah Anda membuat overlay warna dan gradien untuk gambar dan video paralaks Anda dengan Divi Background Plus? Beri tahu kami pendapat Anda tentang hal itu di komentar.

Gambar Unggulan melalui Lauritta / shutterstock.com