Cara Melapisi Gambar di WordPress

Jika Anda antusias membuat situs web Anda luar biasa, Anda akan selalu bekerja keras untuk mempercantiknya. Ada jutaan cara di luar sana untuk membuat situs Anda menjadi inspirasi, dan salah satunya akan disebutkan dalam posting kami hari ini: overlay gambar .

Masih bertanya-tanya apa itu? Pelan-pelan saja, dan biarkan kami membawa Anda keluar!

Apa itu Overlay?

Seperti yang Anda lihat, saya menggunakan gambar dengan teks dan overlay sebagai judul; yang membuat perbedaan besar dari menulis judul teks sederhana. Terlihat jauh lebih gaya dan menarik dibandingkan dengan biasanya, bukan?

Lebih penting lagi, overlay pada gambar membantu menyorot teks sambil menjaga gambar latar belakang tetap terlihat. Anda dapat menambahkan gambar dengan teks dan overlay pada posting/halaman seperti itu dengan mudah dan menggunakannya untuk tujuan yang berbeda. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana melakukannya dalam langkah-langkah sederhana.

Sudah bersemangat belum? Mari kita mulai!

Cara Melapisi Gambar di WordPress

Ada dua metode yang dapat Anda coba untuk melapisi gambar di WordPress: menggunakan blok sampul Gutenberg dan menggunakan CSS. Meskipun menggunakan Gutenberg membantu Anda membuat postingan/halaman yang menyertakan gambar dengan overlay bahkan dari lembar kosong, menggunakan CSS akan membantu Anda menyesuaikan gambar dengan cepat pada postingan/halaman yang dibuat sebelumnya.

Kedua metode ini mudah digunakan dalam beberapa hal, dan kami akan menunjukkan cara menggunakannya satu per satu.

Metode 1: Menggunakan Blok Sampul Gutenberg

Buka editor halaman Gutenberg.

Langkah 1: Sisipkan Gambar Menggunakan Blok Sampul.

Klik Add block dan pilih jenis blok sebagai Cover .

Selanjutnya, pilih gambar latar belakang untuk ditampilkan di blok sampul itu. Anda dapat mengunggah gambar atau memilih gambar dari perpustakaan Anda.

Anda juga dapat mengubah gambar yang Anda tambahkan sebelumnya menjadi gambar sampul jika diperlukan. Klik gambar, pilih Change block style or type , dan pilih Cover :

Dalam kasus saya, saya akan memilih beanie ini sebagai latar belakang dan menulis beberapa teks acak di atasnya juga.

Juga, saya dapat mengatur lebar gambar saya dalam pengaturan di bawah ini. Saya hanya akan menyelaraskannya di tengah.

Sekarang blok sampul saya sudah siap dengan gambar latar belakang dan teks. Secara default, blok Cover sudah memiliki overlay warna hitam, jadi kita akan melihat bagaimana kita bisa mengeditnya di bagian selanjutnya:

Langkah 2: Sesuaikan overlay blok penutup

Selanjutnya, Anda akan melanjutkan dengan pengaturan blok untuk membuat overlay.

Klik pada blok > klik tombol Opsi (ditampilkan sebagai tombol tiga titik) > pilih Tampilkan lebih banyak pengaturan .

Menu pengaturan blokir sekarang harus siap di sebelah kanan layar Anda. Pergi ke bagian Hamparan .

Ini memberi Anda dua opsi warna Solid dan Gradien untuk melapisi gambar sampul Anda:

Kami akan mencoba kedua opsi ini. Pertama, mari kita coba hamparan warna Solid.

Hamparan Warna Solid

Sekarang kamu bisa:

• Pilih warna dari menu yang disarankan;
• Pilih warna kustom. Anda dapat memilih warna di palet atau menyisipkan kode warna. Warna kustom ditampilkan seperti di bawah ini.

Saya baru saja memilih warna pink yang manis untuk overlay saya. Selain itu, saya juga dapat mengubah opacity (tingkat transparansi) dari overlay:

Tingkat opacity dari 30 sampai 60% adalah nilai yang tepat. Jika Anda mengatur opacity di bawah atau di atas tingkat yang disarankan, overlay mungkin hampir tidak terlihat atau terlalu tebal untuk melihat latar belakang. Saya akan menjaga tingkat opacity pada 50% sebagai default.

Semuanya diatur di sini! Begitulah cara Anda menambahkan overlay warna solid ke gambar sampul Anda.

Sekarang mari kita pindah ke opsi warna gradien.

Hamparan Warna Gradien

Warna gradien, seperti yang disebutkan di atas, adalah skema setidaknya dua warna yang dipilih. Atau sederhananya, warna overlay masing-masing dan secara bertahap akan berubah dari warna pilihan pertama ke warna kedua (dan seterusnya).

Mari kita lihat bagaimana saya membuat gradien overlay untuk memahaminya dengan lebih baik.

Pertama, saya mengubah mode warna dari Solid ke Gradient. Juga, saya memilih satu set warna gradien dari menu saran. Ini adalah tampilannya:

Seperti yang Anda lihat, overlay terdiri dari 3 titik kontrol. Masing-masing membawa warna solid, dan Anda dapat memindahkan titik kontrol ini untuk menyesuaikan skema warna overlay.

Pengaturan warna default saat memilih warna gradien seimbang. Saya akan mencoba menyesuaikannya sedikit, dan beginilah perubahannya:

Penyesuaian lain yang dapat Anda lakukan adalah jenis skema warna. Anda dapat memilih antara tipe Linear dan Radial . Dengan tipe Linear , Anda juga dapat memilih arah overlay.

Untuk menguasai pilihan warna gradasi, Anda akan membutuhkan rasa artistik yang lebih baik dan juga belajar bagaimana mencampur dan mencocokkan warna untuk membuat kombinasi terbaik untuk overlay.

Metode 2: Menggunakan CSS

Jika Anda ingin menambahkan overlay ke gambar menggunakan Editor Klasik, diperlukan penggunaan CSS. Anda perlu menambahkan beberapa CSS. Buka Penampilan > Sesuaikan > CSS Tambahan .

Untuk hamparan gradien

Tambahkan kode ini untuk hamparan gradien:

 .background-gradient {
    posisi: relatif;
}
.background-gradient::before {
    isi: '';
    latar belakang: linear-gradient(135deg,#0693e3,#9b51e0);
    posisi: mutlak;
    atas: 0;
    kiri: 0;
    bawah: 0;
    kanan: 0;
    indeks-z: 1;
    opasitas: .5;
}

Untuk lapisan padat:

Tambahkan kode ini untuk overlay padat:

 .background-opacity {
    posisi: relatif;
}
.background-opacity:sebelum {
    isi: '';
    posisi: mutlak;
    atas: 0;
    kiri: 0;
    bawah: 0;
    kanan: 0;
    indeks-z: 1;
    opasitas: .5;
    warna-latar belakang: #000;
}

Catatan: kode ini akan membantu Anda untuk menambahkan overlay saja, bukan teks pada gambar.

Anda dapat menambahkan keduanya jika Anda ingin menambahkan banyak gambar dengan berbagai jenis overlay. Untuk menentukan overlay sebagai warna Solid atau Gradien , buka Editor teks dan tambahkan kelas ke gambar yang ingin Anda overlay:

• Padat: <div class="background-opacity"> … </div>
• Gradien: <div class="background-gradient is-style-default"> … </div>

Sebagai contoh:

Begitulah cara saya menyelesaikannya!

Putusan

Menambahkan overlay ke gambar sangat membantu Anda untuk mendekorasi posting/halaman Anda dan membuat kesan yang lebih baik pada pengunjung. Perlu digali tentang cara membuat overlay yang sempurna, jadi saya sangat menyarankan Anda untuk segera mengerjakannya. Anda juga dapat membuat situs web Anda lebih menarik dengan slider, spanduk popup, latar belakang video, ... Saya harap instruksi saya cukup jelas untuk Anda, dan jangan ragu untuk meninggalkan pertanyaan dan komentar di bawah jika ada. Selamat tinggal!