Cara Membuat Gambar Background Di WordPress

Apakah Anda ingin menambahkan atau ingin membuat gambar Background di situs wordpress Anda? Gambar Background dapat digunakan untuk membuat website Anda terlihat lebih menarik dan menyenangkan secara Seketika.

Pada artikel yang menarik kali ini, Saya akan menunjukkan kepada Anda cara membuat gambar Background yang mudah dan menarik untuk situs WordPress Anda.

Cara menambahkan Gambar Background di wordpress

Metode 1. Membuat Gambar Background Menggunakan Pengaturan Tema WordPress Anda

Tema WordPress paling populer hadir dengan dukungan Background khusus. Fitur ini memungkinkan Anda dengan mudah mengatur gambar Background di situs WordPress Anda.

Jika tema Anda mendukung fitur Background khusus, Saya merekomendasikan penggunaan metode ini untuk membuat gambar Background.

Namun, jika tema Anda tidak mendukung fitur ini, atau Anda tidak menyukai cara menampilkan gambar Background, maka Anda dapat mencoba opsi lain yang saya akan sebutkan dalam tutorial ini.

Pertama, Anda perlu mengunjungi halaman Customize > Active site di admin WordPress Anda. Ini akan meluncurkan penyesuaian tema WordPress di mana Anda dapat mengubah pengaturan theme yang berbeda sambil melihat pratinjau langsung di website Anda.

Gambar Background Putih

Selanjutnya, Anda perlu mengklik opsi Background image. Panel akan meluncur masuk dan menunjukkan pilihan untuk meng-upload atau memilih background untuk website Anda.

Gambar Background hitam

Klik pada tombol pilih gambar untuk melanjutkan.

Ini akan memunculkan pop-up pengunggah media WordPress tempat Anda dapat meng-upload gambar dari komputer Anda. Anda juga dapat memilih gambar yang diunggah sebelumnya dari perpustakaan media.

Gambar Background keren

Selanjutnya, Anda perlu mengklik tombol pilih gambar setelah meng-upload atau memilih gambar yang ingin Anda gunakan sebagai latar belakang.

Ini akan menutup pop-up pengunggah media, dan Anda akan melihat pratinjau gambar yang Anda pilih di penyesuai tema.

Gambar Background koran

Di bawah gambar, Anda juga akan dapat melihat opsi gambar Background. Di bawah Preset, Anda dapat memilih bagaimana Anda ingin gambar latar ditampilkan: mengisi layar, menyesuaikan layar, ulangi, atau kustom.

Anda juga dapat memilih posisi gambar Background dengan mengklik panah di bawah. Mengklik di tengah akan menyelaraskan gambar ke tengah layar.

Jangan lupa untuk mengklik tombol Save & publish di bagian atas untuk menyimpan pengaturan Anda. Itu saja, Anda telah berhasil membuat gambar Background Anda yang indah ke website wordpress anda.

Silakan dan kunjungi website Anda untuk melihatnya beraksi.

Metode 2. Membuat Gambar Background Custom Menggunakan Plugin WordPress

Metode ini jauh lebih fleksibel. Ini berfungsi dengan tema WordPress apa pun dan memungkinkan Anda mengatur beberapa gambar Background.

Anda juga dapat mengatur background berbeda untuk setiap posting, halaman, kategori, atau bagian lain dari situs WordPress Anda.

Itu secara otomatis membuat semua gambar Background Anda layar penuh dan responsif seluler. Artinya, Background image Anda akan secara otomatis mengubah ukurannya di perangkat yang lebih kecil.

Pertama, Anda perlu Install dan Aktifkan plugin Full Screen Background Pro . Untuk lebih jelasnya, lihat panduan langkah demi langkah tentang 13 Plugin SEO Terbaik Untuk WordPress .

Setelah aktivasi, Anda perlu mengunjungi Appearance > Full screen BG image untuk mengkonfigurasi pengaturan plugin.

Latar belakang layar penuh

Anda akan diminta untuk menambahkan kunci lisensi Anda. Anda bisa mendapatkan informasi ini dari email yang Anda terima setelah membeli plugin atau dari akun Anda di website plugin tersebut.

Selanjutnya, Anda perlu mengklik tombol save settings untuk menyimpan perubahan Anda. Anda sekarang siap untuk mulai membuat gambar Background di situs WordPress Anda.

Silakan dan klik tombol Add new image di halaman pengaturan plugin. Ini akan membawa Anda ke layar upload gambar background.

tambahkan gambar latar belakang baru

Klik tombol Pilih Gambar untuk mengupload atau memilih gambar. Segera setelah Anda memilih gambar, Anda akan dapat melihat pratinjau langsung dari gambar tersebut di layar Anda.

Selanjutnya, Anda perlu memberi nama untuk gambar ini. Nama ini akan digunakan secara internal, jadi Anda dapat menggunakan apa saja di sini.

Terakhir, Anda perlu memilih di mana Anda ingin gambar ini digunakan sebagai halaman Background.

Full Screen Background Pro memungkinkan Anda untuk mengatur gambar sebagai Background global, atau Anda dapat memilih dari berbagai bagian situs Anda seperti kategori, arsip, halaman depan atau blog.

Jangan lupa klik tombol save image untuk menyimpan gambar Background Anda.

Anda dapat menambahkan gambar sebanyak yang Anda inginkan dengan mengunjungi halaman Appearance > Full screen BG image.

Jika Anda mengatur lebih dari satu gambar untuk digunakan secara global, maka plugin akan secara auto mulai menampilkan Background image sebagai slideshow yang indah.

Anda dapat menyesuaikan waktu yang diperlukan untuk memudarnya gambar dan waktu setelah gambar ground baru mulai memudar.

Gambar Background bunga

Waktu yang Anda masukkan di sini dalam milidetik. Jika Anda ingin gambar latar memudar setelah 20 detik, Anda harus memasukkan 20000.

Jangan lupa untuk mengklik tombol simpan pengaturan untuk menyimpan perubahan Anda.

Gambar Background untuk Posting, Halaman, dan Kategori

Full Screen Background Pro juga memungkinkan Anda mengatur gambar Background untuk satu posting, halaman, kategori, tag, dan banyak lagi.

Cukup edit posting / halaman di mana Anda ingin menampilkan gambar Background yang berbeda. Pada layar edit posting, Anda akan melihat kotak Gambar Background full screen baru di bawah editor posting.

Gambar Background animasi

Untuk menggunakan gambar Background untuk kategori tertentu, Anda perlu mengunjungi halaman Tampilan > Gambar BG Layar Penuh dan kemudian klik tombol Tambah Gambar Baru.

Setelah mengunggah gambar Anda, Anda dapat memilih Kategori sebagai konteks di mana Anda ingin menampilkan gambar Background.

Gambar Background alam

Sekarang masukkan ID kategori tertentu atau siput tempat Anda ingin menampilkan gambar.

Jangan lupa untuk menyimpan gambar Anda untuk menyimpan pengaturan Anda.

Metode 3. Membuat Gambar Background menggunakan CSS Hero

CSS Hero adalah plugin WordPress yang memungkinkan Anda membuat perubahan apa pun pada tema Anda tanpa menyentuh satu baris kode pun.

Anda dapat membuat gambar Background dengan cepat dalam beberapa langkah sederhana. Pertama, Anda perlu menginstall dan mengaktifkan CSS Hero . Setelah Anda selesai melakukannya, saatnya untuk mulai menyesuaikan website Anda.

Sekarang buka homepage Anda di browser Anda. Anda akan melihat tautan Customize witd CSS Hero di bilah admin Anda .

GAMBAR Background aesthetic

Setelah Anda mengklik tautan itu, Anda akan melihat opsi CSS Hero terbuka. Arahkan mouse Anda ke area yang ingin Anda tambahi gambar.

Pada gambar di bawah, Anda akan melihat .header-filter-gradientarea. Saat Anda mengklik area ini, Anda dapat memilih link Background di sidebar kiri.

Gambar Background api

Link Background akan terbuka. Dari sana, Anda dapat mengklik Gambar. Sekarang, Anda dapat memilih gambar dari Unsplash atau dari unggahan Anda untuk membuat Background.

Gambar Background gerak

Saat Anda mengklik gambar yang Anda inginkan, Anda akan melihat tombol Terapkan Gambar. Kemudian Anda dapat memilih ukuran gambar yang Anda inginkan. Disini Saya memilih versi besar sehingga akan membentang di halaman.

Tekan Simpan dan Publikasikan di bagian bawah, dan gambar Background sekarang disimpan untuk situs Anda.

GAMBAR Background cantik

Metode 4. Membuat Gambar Background Custom Di Mana Saja Menggunakan Kode CSS Di WordPress

Secara default, WordPress menambahkan beberapa kelas CSS ke elemen HTML yang berbeda di seluruh situs WordPress Anda. Anda dapat dengan mudah membuat gambar Background khusus ke setiap posting, kategori, penulis, dan halaman lain menggunakan kelas CSS yang dibuat WordPress ini.

Misalnya, Jika Anda memiliki kategori di website Anda yang disebut TV, maka WordPress akan secara otomatis menambahkan kelas CSS ini ke tag body ketika seseorang melihat halaman kategori TV.

<body class="archive category category-tv category-4">

Anda dapat menggunakan alat inspeksi untuk melihat dengan tepat kelas CSS mana yang ditambahkan oleh WordPress ke tag body.

Gambar Background blur

Anda dapat menggunakan salah satu category-tvatau category-4kelas CSS untuk menata halaman kategori ini secara berbeda.

Mari Buat gambar Background Custom ke halaman arsip kategori. Anda perlu menambahkan CSS khusus ini ke tema Anda.

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Jangan lupa untuk mengganti URL gambar background dan kelas kategori dengan kategori Anda sendiri.

Anda juga dapat membuat Background khusus ke setiap posting dan halaman. WordPress menambahkan kelas CSS dengan ID posting atau halaman di tag body. Anda dapat menggunakan kode CSS yang sama, cukup ganti .category-tv dengan kelas CSS khusus pos.

Saya harap artikel ini membantu Anda mempelajari cara membuat gambar Background di WordPress. Anda mungkin juga ingin melihat Cara Mudah Mengubah Ukuran Font Di WordPress .

Advertisements

Achyar

Panduan Blog

Leave a Reply