Loncat ke Konten Utama

Cara mengubah huruf menjadi latar di Divi

Divi: tema WordPress termudah untuk digunakan

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Sehubungan dengan topeng latar belakang, pengguna cenderung menggunakan perangkat lunak pengedit gambar di luar Divi, dan kemudian mengunggah gambar ke situs web yang mereka buat. Meskipun ini cara yang cukup nyaman untuk mempersonalisasi situs web Anda, itu belum tentu satu-satunya solusi. Anda juga dapat membuat topeng latar belakang dalam Divi, dengan menggabungkan berbagai elemen desain dan opsi filter secara kreatif. Itulah tepatnya yang akan kami lakukan di pos ini! Kami mengubah karakter besar menjadi topeng latar belakang yang tampak hebat terlepas dari ukuran layar. Kami berharap tutorial ini akan menginspirasi Anda untuk membuat desain sendiri menggunakan karakter berukuran besar dan opsi Divi bawaan.

Mari kita pergi!

Pratinjau Sampel

Sebelum terjun ke tutorial, berikut adalah jenis latar belakang yang dapat 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

Kemudian, pergi ke pengaturan spasi dan hapus semua isi atas dan bawah secara default.

  • Top Padding: 0px
  • Padding bawah: 0px

melimpah

Buka tab Tingkat Lanjut dan sembunyikan luapan bagian tersebut. Ini akan menjadi penting nanti dalam tutorial ini ketika kita memposisikan ulang modul teks yang berisi karakter besar.

  • 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 lagi, buka pengaturan garis 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, kami akan menerapkan mode penggabungan.

  • Gambar Latar Belakang Kolom Campuran: Multiply

perekat

Buka tab Desain dan biarkan garis mengisi lebar penuh layar dengan menerapkan parameter ukuran berikut:

  • Gunakan lebar selokan khusus: Ya
  • Selokan lebar: 1
  • Lebar: 100%
  • Lebar maksimum: 100%

jarak

Kami juga menyingkirkan semua bantalan atas dan bawah di baris.

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

  • Top Padding: 0px
  • Padding bawah: 0px

Tambahkan modul teks ke kolom

Tambahkan karakter ke area konten

Saatnya menambahkan modul teks yang berisi karakter besar. Tambahkan huruf "o" ke area konten.

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 edit pengaturan teks. Perhatikan bagaimana kami menggunakan nilai tinggi untuk ukuran teks.

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

jarak

Lalu, akses pengaturan jarak dan tambahkan margin khusus dan isi nilai.

  • Margin atas: -6vw
  • Padding terbaik: 15vw
  • Lapisan bawah: 49vw

karakter kebesaran

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 lebih banyak modul, buka parameter garis dan biarkan menempati lebar penuh layar.

  • Gunakan lebar selokan khusus: Ya
  • Selokan lebar: 1
  • Lebar: 100%
  • Lebar maksimum: 100%

jarak

Hapus juga semua bantalan standar atas dan bawah

  • Top Padding: 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 dalam pratinjau pesan ini, mulailah dengan menambahkan modul teks yang berisi konten H1.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

Pengaturan Teks H1

Buka 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 spasi dan biarkan modul teks tumpang tindih dengan karakter yang kebesaran dengan menambahkan margin atas negatif. Kami juga memastikan bahwa ada ruang di kiri dan kanan modul untuk memastikan responsif.

  • Margin atas: -47vw
  • Margin kiri: 1vw
  • Margin kanan: 1vw

Tambahkan modul divisi ke kolom

jarak penglihatan

Modul selanjutnya yang kita butuhkan adalah modul divisi. Pastikan opsi "Tampilkan Pemisah" diaktifkan.

  • Show Divider: Ya

Warna

Pergi ke tab desain berikutnya dan ubah warna pemisah.

  • 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 berikutnya yang kita butuhkan adalah modul teks dengan konten 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

Juga tambahkan nilai spasi khusus.

  • Margin atas: 3vw
  • Margin bawah: 3vw (komputer desktop), 10vw (tablet dan telepon)
  • Margin kiri: 27vw (desktop), 10vw (tablet), 8vw (telepon)
  • Margin kanan: 27vw (desktop), 10vw (tablet), 8vw (telepon)

Tambahkan modul tombol ke kolom

Tambahkan salinan

Pada modul berikutnya dan terakhir, yang merupakan 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
  • Padding bawah: 15px
  • Padding kiri: 50px
  • Jok Kanan: 50px

Hasil akhir

Inilah yang tampak seperti apa yang telah kami bangun sejauh ini.

Pikiran terakhir

Pada artikel ini, kami menunjukkan kepada Anda cara menggunakan karakter besar untuk membuat topeng latar belakang yang indah dengan Divi. Ini adalah cara terbaik untuk membuat desain web khusus tanpa harus menggunakan perangkat lunak pengedit gambar. Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah!

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
2 saham
saham2
menciak
Register
Ada apa