Cara Membuat Transisi Desain Latar Belakang yang Mulus Antara Elemen Divi

Membuat transisi desain latar belakang yang mulus antara elemen Divi adalah cara yang bagus untuk meningkatkan desain situs web Divi Anda. Idenya adalah untuk membuat desain latar belakang yang cocok (baik untuk baris dan bagian) yang berbagi ukuran dan posisi yang sama masing-masing dengan lebar browser (menggunakan satuan panjang vw). Ini memungkinkan Anda untuk dengan mulus mentransisikan gradien latar belakang, pola, dan topeng antara baris dan bagian dengan cara yang kreatif. Misalnya, Anda dapat memiliki transisi pola atau topeng ke dalam warna yang berbeda tanpa kehilangan keselarasan keseluruhan dan aspek simetris dari desain.

Dalam tutorial ini, kita akan menggunakan opsi desain latar belakang bawaan Divi untuk membuat transisi desain latar belakang yang mulus antara bagian dan baris Divi. Aplikasi dan keserbagunaan desain ini tidak terbatas, membawa opsi desain latar belakang Divi ke tingkat yang sama sekali baru!

Mari kita mulai.

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Berikut adalah beberapa contoh desain yang mungkin hanya dengan beberapa perubahan sederhana pada topeng dan pola latar belakang.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, 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 bersama 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!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, lakukan hal berikut:

1. Arahkan ke Perpustakaan Divi.
2. Klik tombol Impor di bagian atas halaman.
3. Di popup portabilitas, pilih tab impor
4. Pilih file unduhan dari komputer Anda (pastikan unzip file terlebih dahulu dan gunakan file JSON).
5. Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat Transisi Desain Latar Belakang yang Mulus Antara Bagian Divi dan Baris

Bagian 1: Membuat Judul sebagai Konten Palsu

Sebelum kita mulai mendesain latar belakang kita, kita perlu menambahkan heading sebagai konten tiruan. Untuk memulai, tambahkan baris satu kolom ke bagian default halaman.

Kemudian tambahkan modul teks ke baris.

Tambahkan judul H1 ke konten isi.

Di bawah tab desain, perbarui desain Teks Judul sesuka Anda. Untuk desain ini, ada baiknya menambahkan satuan panjang VW untuk ukuran teks judul sehingga akan menyesuaikan dengan desain lainnya.

2. Mendesain Latar Belakang Bagian

Menambahkan Padding VW ke Bagian

Setelah judul tiruan terpasang, buka pengaturan bagian dan perbarui spasi sebagai berikut:

• Padding: atas 15vw, bawah 15vw

Menambahkan Gradien latar belakang ke Bagian

Sekarang kita memiliki lebih banyak ruang untuk dikerjakan, kita siap untuk menambahkan desain latar belakang kita ke bagian tersebut. Di bawah tab gradien, tambahkan pemberhentian gradien berikut:

• Pemberhentian Gradien 1: #4f0f75 (pada 0%)
• Pemberhentian Gradien 2: #2843c9 (pada 25%)
• Pemberhentian Gradien 3: #4ae2e0 (pada 50%)
• Gradient Stop 4: #3881ff (pada 75%)
• Pemberhentian Gradien 5: #4f0f75 (pada 100%)

Menambahkan Pola Latar Belakang ke Bagian

Di bawah tab Pola, perbarui yang berikut ini:

• Pola: Garis-garis Diagonal
• Warna Pola: rgba (79,15,117,0.23)
• Transformasi Pola: Putar
• Ukuran Pola: Ukuran Khusus
• Lebar Pola: 7vw
• Tinggi Pola: 5vw
• Pola Pengulangan Asal: Pusat

Catatan: Pastikan menggunakan satuan panjang VW untuk lebar dan tinggi pola. Dan, pastikan juga untuk mengatur asal berulang ke "pusat". Ini akan menjaga pola latar belakang di tempat yang sama dengan pola latar belakang yang akan kita tambahkan ke baris nanti.

Menambahkan Topeng Latar Belakang ke Bagian

Di bawah tab Mask, tambahkan yang berikut ini:

• Topeng Latar Belakang: Lapisan Blob
• Warna Topeng: rgba (0,0,0,0.7)
• Ukuran Masker: 100vw
• Posisi Masker: Tengah

Catatan: Sama seperti pola, kita harus memberi ukuran topeng menggunakan satuan panjang VW. Kita juga harus memberi topeng posisi tengah.

3. Merancang Latar Belakang Baris

Salin dan Tempel Latar Belakang Bagian ke Latar Belakang Baris

Untuk mempercepat proses mendesain latar belakang baris, salin pengaturan latar belakang bagian.

Kemudian tempelkan latar belakang ke baris yang ada.

Pada titik ini, Anda sudah dapat melihat bagaimana pola latar belakang dan topeng pada baris sebagai transisi mulus ke latar belakang bagian. Sepertinya baris memiliki latar belakang transparan, tetapi sebenarnya pola dan topeng yang sama digunakan di bagian dengan ukuran dan posisi yang sama.

Sesuaikan Ukuran dan Padding Baris menggunakan VW

Selanjutnya, kita perlu memberikan lebar khusus pada baris kita menggunakan satuan panjang VW. Perbarui berikut ini:

• Lebar: 75vw
• Lebar Maks: 75vw
• Padding: 10vw atas, 10vw bawah, 10vw kiri, 10vw kanan

Gambaran Umum Spasi dan Ukuran dalam Unit Panjang VW

Sejauh ini, kami telah menambahkan nilai spasi dan posisi dalam tata letak kami menggunakan unit panjang VW. Berikut adalah ilustrasi singkat tentang nilai yang saat ini digunakan.

Sejauh ini, kita memiliki transisi mulus antara latar belakang baris dan latar belakang bagian untuk pola dan topeng. Selanjutnya, kita akan memperbarui gradien latar belakang baris sehingga mulus juga.

Sesuaikan Perhentian Gradien pada Baris

Selanjutnya, kita perlu menyesuaikan gradien berhenti pada latar belakang baris untuk transisi mulus ke gradien latar belakang bagian. Di bawah tab gradien, kita akan menyimpan tiga perhentian gradien tengah yang diwarisi dari latar belakang bagian) dan menghapus perhentian gradien pertama dan terakhir. Kemudian posisikan pemberhentian pertama pada 0% dan pemberhentian ketiga pada 100%. Setelah selesai, Anda harus memiliki gradien berikut.

• Gradien Berhenti 1: #2843c9 (pada 0%)
• Pemberhentian Gradien 2: #4ae2e0 (pada 50%)
• Gradient Stop 3: #3881ff (pada 100%)

Tambahkan Bayangan Kotak ke Baris

Untuk memberikan desain sedikit elevasi dan untuk menekankan transisi mulus dari latar belakang, kita dapat menambahkan bayangan kotak ke baris.

• Bayangan Kotak: lihat tangkapan layar
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 4vw
• Warna Bayangan Kotak: rgba (0,0,0,0.5)

Sesuaikan Warna Pola Latar Belakang Baris

Sekarang kita memiliki semua elemen latar belakang di tempat yang tepat, kita dapat mulai menyesuaikan warna untuk desain yang lebih kreatif. Di bawah opsi pola untuk baris, perbarui yang berikut ini:

• Warna Pola: rgba (255,255,255,0.23)

Sesuaikan Warna Topeng Latar Belakang Baris

Kami juga dapat memperbarui warna topeng untuk baris untuk benar-benar membuat desain menonjol! Di bawah tab topeng, perbarui yang berikut ini:

• Warna Topeng: #ffffff
• Transformasi Topeng: Terbalik

Hasil Akhir

Mari kita lihat hasil akhirnya.

Lebih Banyak Kemungkinan

Berikut adalah beberapa contoh desain yang mungkin hanya dengan beberapa perubahan sederhana pada topeng dan pola latar belakang.

Pikiran Akhir

Kunci untuk menciptakan transisi desain latar belakang yang mulus di Divi adalah dengan menggunakan unit panjang VW tersebut dengan bijak. Pertama, kita perlu membuat desain latar belakang bagian yang diskalakan dengan lebar viewport browser (dari posisi tengah pada halaman). Setelah selesai, kita dapat menggunakan desain latar belakang yang sama secara berurutan. Setelah itu, kita tinggal membuat beberapa penyesuaian pada gradien dan warna untuk desain yang menakjubkan. Mudah-mudahan, teknik ini akan menambah keterampilan desain lain yang berguna untuk proyek-proyek masa depan

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!