Dalam hal topeng latar belakang, pengguna cenderung menggunakan perangkat lunak pengedit gambar selain dari Divi, lalu unggah gambar ke situs jaringan yang mereka ciptakan. Meskipun ini cara yang cukup praktis untuk menyesuaikan situs jaringan, itu belum tentu satu-satunya solusi. Anda juga dapat membuat topeng latar belakang di dalam Divi, menggabungkan berbagai elemen desain dan opsi filter dengan cara yang kreatif. Itulah tepatnya yang akan kami lakukan di postingan ini! Kami mengubah karakter berukuran besar menjadi masker latar belakang yang terlihat bagus pada ukuran layar apa pun. Kami harap tutorial ini menginspirasi Anda untuk membuat desain Anda sendiri menggunakan karakter berukuran besar dan opsi bawaan Divi.
Mari kita pergi!
Pratinjau sampel
Sebelum kita menyelami tutorial, berikut adalah jenis-jenis latar belakang yang bisa Anda capai dengan teknik ini.
Pembuahan
Kami akan memulai desain dengan membuat latar belakang hitam dengan huruf yang memiliki gambar sebagai latar belakang.
Tambahkan bagian baru
Warna latar belakang
Mari kita mulai dengan contoh pertama! Tambahkan bagian reguler baru ke halaman baru atau yang sudah ada dan tambahkan latar belakang ke bagian ini:
- Warna latar: #000000
jarak
Lalu pergi ke pengaturan jarak dan hapus semua bantalan atas dan bawah default.
- Top Padding: 0px
- Lapisan bawah: 0px
melimpah
Beralih ke tab Advanced dan sembunyikan bagian overflow. Ini akan menjadi penting nanti dalam tutorial ini ketika kita memposisikan ulang modul teks yang berisi karakter oversize.
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
Tambahkan baris 1
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
Kolom 1 Warna Latar Belakang
Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang ke kolom pertama.
- Kolom 1 Warna Latar Belakang: #848484
Kolom 1 Gambar latar belakang
Tambahkan juga warna latar belakang. Untuk menggabungkan warna latar belakang dan gambar, kita akan menerapkan mode campuran.
- Campuran gambar latar belakang kolom: Multiply
perekat
Beralih ke tab Desain dan biarkan baris memenuhi lebar penuh layar dengan menerapkan pengaturan ukuran berikut:
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Lebar: 100%
- Lebar maksimum: 100%
jarak
Kami juga menyingkirkan semua bantalan atas dan bawah di baris.
- Top Padding: 0px
- Lapisan bawah: 0px
Tambahkan modul teks ke kolom
Tambahkan karakter ke area konten
Saatnya menambahkan modul teks yang berisi karakter berukuran besar. Tambahkan huruf “o” ke dalam kotak isi.
Warna latar belakang
Lanjutkan dengan masuk ke pengaturan latar belakang dan menambahkan warna latar belakang hitam.
- Warna latar: #000000
Pengaturan teks
Buka tab Desain dan ubah pengaturan teks. Perhatikan bagaimana kami menggunakan nilai tinggi untuk ukuran teks.
- Font Teks: Poppins
- Ukuran teks: 100vw
- Orientasi Teks: Tengah
jarak
Lalu pergi ke pengaturan jarak dan tambahkan margin kustom dan nilai padding.
- Margin atas: -6vw
- Padding terbaik: 15vw
- Lapisan bawah: 49vw
filter
Saatnya melakukan sihir! Akses pengaturan filter modul dan ubah mode gabungan sesuai:
- Blend Mode: Multiply
- Brightness: Anda dapat mengubah nilai ini sesuai dengan keinginan Anda
Tambahkan baris 2
Struktur kolom
Setelah karakter besar Anda ditambahkan ke desain, Anda dapat melanjutkan dengan menambahkan modul yang tersisa yang ingin Anda tampilkan di bagian tersebut, lebih disukai dengan menambahkan baris baru:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan memenuhi seluruh lebar layar.
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Lebar: 100%
- Lebar maksimum: 100%
jarak
Hapus juga semua bantalan standar atas dan bawah
- Top Padding: 0px
- Lapisan bawah: 0px
Tambahkan modul teks # 1 ke kolom
Tambahkan konten H1
Di baris baru ini, Anda dapat menambahkan modul pilihan Anda. Untuk membuat ulang contoh persis yang dibagikan dalam pratinjau postingan ini, mulailah dengan menambahkan modul teks yang berisi isi H1.
Pengaturan Teks H1
Beralih ke tab Desain dan ubah pengaturan teks H1.
- Font judul: Tampilan Playfair
- Berat font: Tebal
- Penyelarasan Teks Judul: Pusat
- Warna teks judul: #ffffff
- Ukuran Judul Teks: 6vw
jarak
Lanjutkan dengan pergi ke pengaturan jarak dan biarkan modul teks tumpang tindih dengan karakter yang terlalu besar dengan menambahkan margin atas negatif. Kami juga memastikan bahwa ada ruang di kiri dan kanan modul untuk memastikan daya tanggap.
- Margin atas: -47vw
- Margin kiri: 1vw
- Margin kanan: 1vw
Tambahkan modul divisi ke kolom
jarak penglihatan
Modul selanjutnya yang kita butuhkan adalah modul pembagian. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
- Show Divider: Ya
Warna
Buka tab desain di sebelah dan ubah warna pembatas.
- Warna: #ffffff
perekat
Juga ubah parameter ukuran.
- Berat pembagi: 13px
- Lebar: 16%
- Penyelarasan modul: pusat
jarak
Juga tambahkan margin atas untuk membuat ruang antara modul teks dan modul divisi.
- Margin atas: 16vw
Tambahkan modul teks # 2 ke kolom
Tambahkan konten
Modul selanjutnya yang kita perlukan adalah modul teks dengan a isi paragraf.
Pengaturan teks
Akses pengaturan teks dan buat perubahan berikut:
- Font Teks: Buka Sans
- Warna teks: #ffffff
- Ukuran teks: 1vw (desktop), 2vw (tablet), 2.5vw (telepon)
- Tinggi baris teks: 1.9em
- Orientasi Teks: Tengah
jarak
Tambahkan juga nilai spasi kustom.
- Margin atas: 3vw
- Margin bawah: 3vw (komputer desktop), 10vw (tablet dan telepon)
- Margin kiri: 27vw (desktop), 10vw (tablet), 8vw (ponsel)
- Margin kanan: 27vw (desktop), 10vw (tablet), 8vw (telepon)
Tambahkan modul tombol ke kolom
Tambahkan salinan
Pada modul berikutnya dan terakhir, yaitu modul tombol. Masukkan salinan pilihan Anda.
penjajaran
Lanjutkan dengan mengubah perataan tombol pada tab Desain.
- Alignment tombol: tengah
Pengaturan tombol
Beralih ke pengaturan tombol dan sesuaikan tombol yang diinginkan.
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 1vw (desktop), 2.5vw (tablet), 3vw (telepon)
- Warna teks tombol: #ffffff
- Lebar batas tombol: 1px
- Radius batas tombol: 0px
- Font Tombol: Buka Sans
- Berat font: Ultra Bold
- Gaya Huruf: huruf besar
jarak
Akhirnya, kami juga menambahkan margin khusus dan mengisi nilai untuk mendapatkan hasil yang diinginkan.
- Margin bawah: 10vw
- Padding: 15px
- Lapisan bawah: 15px
- Padding kiri: 50px
- Jok Kanan: 50px
Hasil akhir
Inilah yang tampak seperti apa yang telah kami bangun sejauh ini.
final pikiran
Pada artikel ini, kami telah menunjukkan kepada Anda bagaimana menggunakan karakter berukuran besar untuk membuat topeng latar belakang yang mengagumkan dengan Divi. Ini adalah cara terbaik untuk membuat desain web kustom tanpa harus menggunakan perangkat lunak pengedit gambar. Jika Anda memiliki pertanyaan atau saran, pastikan untuk memberikan komentar di bagian komentar di bawah!
