Apakah Anda ingin membuat transisi latar belakang antar elemen Divi ?
Buat transisi desain latar belakang yang mulus antar elemen Divi adalah cara yang bagus untuk meningkatkan desain Anda situs jaringan Divi.
Ini memungkinkan Anda untuk dengan mulus mentransisikan gradien, pola, dan topeng latar belakang antara garis dan bagian dengan cara yang kreatif.
Misalnya, Anda dapat memiliki transisi pola atau topeng dalam warna yang berbeda tanpa kehilangan keselarasan keseluruhan dan tampilan 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 garis Divi. Aplikasi dan keserbagunaan desain ini tidak terbatas, membawa opsi desain latar belakang Divi ke tingkat yang sama sekali baru!
Mari kita mulai.
penelitian
Berikut sekilas desain yang akan kita buat dalam tutorial ini.
Berikut adalah beberapa contoh desain lain yang mungkin hanya dengan beberapa perubahan sederhana pada topeng dan pola latar belakang.
Buat halaman baru dengan Divi Builder
Untuk memulai, Anda perlu melakukan hal berikut:
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Membuat transisi mulus di latar belakang antara bagian Divi dan garis
Membuat header sebagai konten placeholder
Baca juga: Divi: Cara membuat tab dengan efek hover dari garis
Sebelum kita masuk, kita perlu menambahkan header sebagai isi samaran. Untuk memulai, tambahkan baris satu kolom ke bagian default halaman.
Kemudian tambahkan modul Teks ke baris.
Tambahkan teks ukuran H1.
Di bawah tab Mendesain, perbarui desain teks header sesuai keinginan.
- Font: Roboto Dipadatkan
- Berat Huruf: Tebal
- Gaya: TT
- Perataan Teks: Terpusat
- Warna Teks: #000000
- Ukuran Teks Judul: 4vw
- Spasi Huruf: 0.1em
- Tinggi Garis: 1.3em
Desain latar belakang bagian
Menambahkan bantalan ke bagian
Setelah tajuk palsu terpasang, buka pengaturan bagian dan perbarui spasi sebagai berikut:
- Padding (Atas dan 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 Latar Belakang, tambahkan titik gradien berikut:
- Gradien Berhenti:
- 0%: #4f0f75 (pada 0%)
- 25%: #2843c9 (pada 25%)
- 50%: #4ae2e0 (pada 50%)
- 75%: #3881ff (pada 75%)
- 100%: #4f0f75 (pada 100%)
Menambahkan pola latar belakang ke bagian
Di bawah tab Pola Latar Belakang, perbarui berikut ini:
- Pola: Garis-garis Diagonal
- Warna Pola: rgba (79,15,117,0.23)
- Transformasi: Putar
- Ukuran Pola: Ukuran Khusus
- Lebar: 7vw
- Tinggi: 5vw
- Pola Pengulangan Asal: Pusat
Catatan: Pastikan untuk menggunakan satuan panjang VW untuk lebar dan tinggi pola. Dan, pastikan juga untuk mengatur origin berulang ke "center". 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 Topeng Latar Belakang, tambahkan berikut ini:
- Topeng Latar Belakang: Lapisan Blob
- Warna Topeng: rgba (0,0,0,0.7)
- Lebar Topeng: 100vw
- Posisi: Tengah
Catatan: Sama seperti pola, kita perlu mengukur topeng menggunakan satuan panjang VW. Kita juga perlu memberi topeng posisi sentral.
Desain latar belakang garis
Salin dan tempel latar belakang bagian ke latar belakang baris
Untuk mempercepat proses desain latar belakang garis, salin pengaturan latar belakang bagian.
Kemudian tempelkan latar belakang pada baris yang ada.
Pada titik ini Anda sudah dapat melihat bagaimana pola latar belakang dan topeng pada garis membuat transisi mulus ke latar belakang bagian.
Sepertinya garis memiliki latar belakang transparan, tetapi sebenarnya pola dan topeng yang sama digunakan di bagian dengan ukuran dan posisi yang sama.
Sesuaikan ukuran baris dan padding menggunakan VW
Selanjutnya, kita perlu memberikan lebar khusus baris kita menggunakan satuan panjang VW. Perbarui berikut ini:
- Lebar: 75vw
- Lebar Maks: 75vw
- Padding (Atas, Bawah, Kiri dan Kanan): 10vw
Sesuaikan pemberhentian gradien secara online
Selanjutnya, kita perlu menyesuaikan gradien berhenti pada latar belakang garis untuk transisi mulus ke gradien latar belakang bagian.
Di bawah tab Gradien Latar Belakang, kita akan menyimpan tiga titik gradien tengah yang diwarisi dari latar belakang bagian) dan menghapus pemberhentian gradien pertama dan terakhir.
Kemudian atur pemberhentian pertama menjadi 0% dan pemberhentian ketiga menjadi 100%. Setelah selesai, Anda harus memiliki gradien berikut.
- Gradien Berhenti
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
Tambahkan bayangan kotak ke garis
Untuk memberikan sedikit peningkatan pada desain dan menekankan transisi mulus dari latar belakang, kita dapat menambahkan bayangan kotak ke baris.
- Bayangan Kotak: lihat tangkapan layar
- Posisi Vertikal: 0px
- Kekuatan Buram Bayangan Kotak: 4vw
- Warna Bayangan: rgba (0,0,0,0.5)
Sesuaikan warna pola latar belakang garis
Sekarang setelah kita memiliki semua elemen latar belakang, kita dapat mulai menyesuaikan warna untuk desain yang lebih kreatif.
Di bawah opsi Pola Latar Belakang baris, perbarui yang berikut:
- Warna Pola: rgba (255,255,255,0.23)
Sesuaikan warna topeng latar belakang garis
Kami juga dapat memperbarui warna topeng untuk garis agar desainnya benar-benar menonjol.
Di bawah tab Topeng Latar Belakang, perbarui berikut ini:
- Warna Topeng: #ffffff
- Transformasi Topeng: terbalik
Hasil akhir
Mari kita lihat hasil akhirnya.
Unduh DIVI sekarang!!!
Lebih banyak kemungkinan
Berikut adalah beberapa contoh desain lain yang mungkin hanya dengan beberapa perubahan sederhana pada topeng dan pola latar belakang.
Lihat juga: Divi: Cara menggunakan "Gradient Builder" untuk mempercantik gambar Anda
Unduh DIVI sekarang!!!
Kesimpulan
Kunci untuk menciptakan transisi desain latar belakang yang mulus di Divi adalah dengan menggunakan unit panjang VW ini dengan bijak.
Pertama, kita perlu membuat desain background bagian yang sesuai dengan lebar viewport browser (dari posisi tengah halaman). Setelah selesai, kita dapat menggunakan desain latar belakang satu baris yang sama. Setelah itu, kami hanya memiliki beberapa penyesuaian gradien dan warna untuk desain yang menakjubkan.
Semoga teknik ini akan menambah keterampilan desain lain yang berguna untuk proyek-proyek masa depan.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
