Mengubah Karakter Besar Menjadi Topeng Latar Belakang dengan Divi (Unduh Gratis!)

Ketika datang ke topeng latar belakang, orang cenderung menggunakan perangkat lunak pengedit gambar di luar Divi, dan kemudian mengunggah gambar ke situs web yang mereka buat. Meskipun itu cara yang solid untuk menyesuaikan dan mempersonalisasi situs web Anda, itu belum tentu satu-satunya cara untuk pergi. Anda juga dapat membuat topeng latar belakang di dalam Divi itu sendiri, dengan menggabungkan berbagai elemen desain dan opsi filter secara kreatif. Itulah tepatnya yang akan kita lakukan dalam posting ini! Kami akan mengubah karakter yang terlalu besar menjadi topeng latar belakang yang terlihat bagus di berbagai ukuran layar. Kami harap tutorial ini menginspirasi Anda untuk membuat desain Anda sendiri menggunakan karakter besar dan opsi bawaan Divi.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Contoh 1

Contoh #2

Unduh Bagian Pahlawan GRATIS

Untuk mendapatkan bagian pahlawan gratis, pertama-tama Anda harus mengunduhnya 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 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!

Buat Ulang Contoh #1

Berlangganan Saluran Youtube Kami

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 itu:

• Warna Latar Belakang: #000000

Jarak

Kemudian, buka pengaturan spasi dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Pindah ke tab lanjutan dan sembunyikan kelebihan bagian. Ini akan menjadi penting nanti pada tutorial ini ketika kita memposisikan ulang Modul Teks yang berisi karakter yang terlalu besar.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna Latar Kolom 1

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang ke kolom pertama.

• Warna Latar Kolom 1: #848484

Gambar Latar Kolom 1

Tambahkan juga warna latar belakang. Untuk menggabungkan warna latar belakang dan gambar, kita akan menerapkan mode campuran.

• Campuran Gambar Latar Belakang Kolom: Multiply

Perekat

Pindah ke tab desain dan biarkan baris memenuhi seluruh lebar layar dengan menerapkan pengaturan ukuran berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Kami juga menyingkirkan semua padding atas dan bawah khusus dari baris.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Teks ke Kolom

Tambahkan Karakter ke Kotak Konten

Saatnya menambahkan Modul Teks yang berisi karakter berukuran besar. Tambahkan huruf 'o' ke kotak konten.

Warna latar belakang

Lanjutkan dengan masuk ke pengaturan latar belakang dan tambahkan warna latar belakang hitam.

• Warna Latar Belakang: #000000

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks. Perhatikan bagaimana kita menggunakan nilai tinggi untuk ukuran teks.

• Font Teks: Poppins
• Ukuran Teks: 100vw
• Orientasi Teks: Tengah

Jarak

Kemudian, buka pengaturan spasi dan tambahkan beberapa nilai margin dan padding khusus.

• Margin Atas: -6vw
• Padding Atas: 15vw
• Padding Bawah: 49vw

Filter

Saatnya membuat keajaiban terjadi! Buka pengaturan filter modul dan ubah mode campuran yang sesuai:

• Mode Campuran: Kalikan

Tambahkan Baris #2

Struktur Kolom

Setelah karakter besar Anda telah ditambahkan ke desain, Anda dapat melanjutkan dengan menambahkan modul yang tersisa yang ingin Anda tampilkan di bagian, sebaiknya dengan menambahkan baris baru:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default juga.

• Padding Atas: 0px
• Padding 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 di pratinjau posting ini, mulailah dengan menambahkan Modul Teks dengan beberapa konten H1.

Pengaturan Teks H1

Pindah ke tab desain dan ubah pengaturan teks H1.

• Font Judul: Tampilan Playfair
• Berat Huruf Judul: Tebal
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 6vw

Jarak

Lanjutkan dengan masuk ke pengaturan spasi dan biarkan Modul Teks tumpang tindih dengan karakter yang terlalu besar dengan menambahkan beberapa margin atas negatif. Kami juga memastikan ada ruang di sisi kiri dan kanan modul untuk memastikan responsivitas.

• Margin Atas: -47vw
• Margin Kiri: 1vw
• Margin Kanan: 1vw

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul selanjutnya yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Buka tab desain berikutnya dan ubah warna pembagi.

• Warna: #ffffff

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 13px
• Lebar: 16%
• Penyelarasan Modul: Pusat

Jarak

Dan tambahkan beberapa margin atas untuk membuat ruang antara Modul Teks dan Modul Pembagi.

• Margin Atas: 16vw

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Modul selanjutnya yang kita butuhkan adalah Modul Teks dengan beberapa konten paragraf.

Pengaturan Teks

Buka pengaturan teks dan buat perubahan berikut terjadi:

• 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 beberapa nilai spasi kustom juga.

• Margin Atas: 3vw
• Margin Bawah: 3vw (Desktop), 10vw (Tablet & Ponsel)
• Margin Kiri: 27vw (Desktop), 10vw (Tablet), 8vw (Telepon)
• Margin Kanan: 27vw (Desktop), 10vw (Tablet), 8vw (Telepon)

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Ke modul berikutnya dan terakhir, yaitu Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Penyelarasan

Lanjutkan dengan mengubah perataan tombol di tab desain.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Pindah ke pengaturan tombol dan gaya tombol sesuai keinginan Anda.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Lebar Perbatasan Tombol: 1px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Buka Sans
• Berat Huruf: Sangat Tebal
• Gaya Font: Huruf Besar

Jarak

Last but not least, kami juga menambahkan beberapa margin kustom dan nilai padding untuk mencapai hasil yang diinginkan.

• Margin Bawah: 10vw
• Padding Atas: 15px
• Padding Bawah: 15px
• Padding Kiri: 50px
• Padding Kanan: 50px

Buat Ulang Contoh #2

Tambahkan Bagian Baru

Ke contoh kedua! Tambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.

Meluap

Sembunyikan luapan bagian di tab lanjutan.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Warna Latar Kolom 1

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang ke kolom pertama.

• Kolom 1 Warna Latar Belakang: #dddddd

Gambar Latar Kolom 1

Tambahkan juga gambar latar belakang dan gabungkan warna latar belakang dengan gambar menggunakan mode campuran.

• Campuran Gambar Latar Belakang Kolom: Layar

Perekat

Kemudian, buka pengaturan ukuran baris dan biarkan memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Lepaskan bantalan atas dan bawah berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Teks ke Kolom

Tambahkan Karakter ke Kotak Konten

Saatnya menambahkan Modul Teks yang berisi karakter berukuran besar! Salin karakter berikut: '◊◊◊' dan tambahkan ini ke kotak konten. Anda dapat menggunakan karakter apa pun yang Anda inginkan dengan membuka Character Map (Windows) atau Character Palette (Mac) di komputer Anda.

Warna latar belakang

Ubah warna latar belakang modul ini menjadi putih.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Lalu, buka tab desain dan ubah pengaturan teks.

• Font Teks: Poppins
• Warna Teks: #0c0c0c
• Ukuran Teks: 80vw
• Orientasi Teks: Tengah

Jarak

Ubah juga nilai padding atas dan bawah.

• Padding Atas: 27.8vw
• Padding Bawah: 27.8vw

Filter

Dan buat efek topeng latar belakang dengan menambahkan modul campuran khusus ke modul.

• Mode Campuran: Layar

Tambahkan Baris #2

Struktur Kolom

Setelah karakter besar Anda terpasang, Anda dapat menambahkan baris baru dengan modul yang tersisa.

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 1vw
• Padding Bawah: 1vw
• Padding Kiri: 3vw
• Padding Kanan: 3vw

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H1

Saatnya menambahkan modul yang tersisa. Jika Anda ingin membuat ulang desain yang sama persis seperti yang Anda lihat di pratinjau posting ini, mulailah dengan menambahkan Modul Teks dengan beberapa konten H1.

Pengaturan Teks H1

Pindah ke tab desain dan ubah pengaturan teks H1.

• Font Judul: Poppins
• Berat Huruf Judul: Semi Tebal
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 5vw

Jarak

Buat tumpang tindih antara modul ini dan Modul Teks yang berisi karakter besar dengan menambahkan beberapa margin atas negatif.

• Margin Atas: -38vw

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul selanjutnya yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #000000

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 13px
• Lebar: 16px
• Penyelarasan Modul: Pusat

Jarak

Seiring dengan nilai padding dalam pengaturan spasi.

• Margin Atas: 2vw
• Margin Bawah: 2vw

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Modul selanjutnya yang kita butuhkan adalah Modul Teks lainnya. Masukkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Kemudian, buka pengaturan teks dan buat beberapa perubahan.

• Font Teks: Buka Sans
• Warna Teks: #000000
• Ukuran Teks: 1vw (Desktop), 2vw (Tablet), 2.5vw (Telepon)
• Tinggi Baris Teks: 1.9em
• Orientasi Teks: Tengah

Jarak

Tambahkan beberapa nilai margin khusus juga.

• Margin Atas: 3vw
• Margin Bawah: 3vw (Desktop), 10vw (Tablet & Ponsel)
• Margin Kiri: 27vw (Desktop), 10vw (Tablet), 8vw (Telepon)
• Margin Kanan: 27vw (Desktop), 10vw (Tablet), 8vw (Telepon)

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan adalah Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Penyelarasan

Lalu, buka tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Gaya tombol agar terlihat persis seperti yang Anda inginkan.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 50px
• Font Tombol: Buka Sans
• Berat Huruf: Sangat Tebal
• Gaya Font: Huruf Besar

Jarak

Dan lengkapi desain dengan menambahkan beberapa margin kustom dan nilai padding ke tombol.

• Margin Bawah: 10vw
• Padding Atas: 15px
• Padding Bawah: 15px
• Padding Kiri: 50px
• Padding Kanan: 50px

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Contoh 1

Contoh #2

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menggunakan karakter berukuran besar untuk membuat topeng latar belakang yang indah dengan Divi. Ini adalah cara yang bagus untuk membuat desain web yang disesuaikan dan dipersonalisasi tanpa harus menggunakan perangkat lunak pengedit gambar apa pun. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.