Bagaimana Cara Menambahkan Gambar Latar Belakang WordPress dengan Benar ke Situs Web Anda?
Diterbitkan: 2022-01-06Apakah menambahkan gambar latar WordPress ke situs web Anda mudah? Jawabannya adalah ya untuk sebagian besar kecuali tema Anda tidak mendukungnya.
Sebenarnya, banyak tema WordPress saat ini telah menawarkan beberapa cara mudah untuk menambah dan mengubah gambar latar belakang yang ada.
Anda juga dapat mengubah gambar latar WordPress menggunakan CSS atau plugin, yang membuka opsi untuk mengatur gambar latar belakang pada halaman, posting, dan kategori.
Artikel ini akan menunjukkan kepada Anda bagaimana melakukan semua hal di atas untuk membuat situs web Anda menonjol dengan tampilan dan nuansa yang menarik.
Apa itu Gambar Latar Belakang WordPress ?
Gambar latar WordPress adalah gambar yang diterapkan di belakang konten utama. Alih-alih menjadi fokus utama situs web Anda, seperti gambar pahlawan, mereka sering kali lebih halus dan melengkapi konten lain di halaman web Anda.
Selain membantu membuat halaman web yang memberikan pengalaman membaca yang lebih baik, gambar latar WP menawarkan banyak kemungkinan desain yang membedakan situs web Anda dari pesaing.
Menjadi berbeda dari pesaing berarti meningkatkan kesadaran merek Anda dengan memberikan upaya ekstra ke dalam desain situs web Anda, yang tidak selalu mudah. Dalam kasus seperti itu, Anda dapat meminta agen digital untuk layanan desain web profesional.
Tetapi mengapa Anda ingin mengubah latar belakang? Yah, yang default mungkin tidak menarik bagi Anda atau tidak menyerupai merek Anda. Atau, mungkin itu bukan gambar sama sekali, hanya warna solid. Atau mungkin Anda menyukai yang sudah ada pada awalnya, tetapi sekarang Anda bosan.
Apa pun alasannya, mari bereksperimen dengan mengubahnya.
Gunakan Penyesuai WordPress Default untuk Menambahkan Gambar Latar WordPress
Tema WordPress biasanya menawarkan cara yang mudah untuk menggunakan warna atau gambar di latar belakang. Kebanyakan orang memilih untuk mengubah warna latar belakang yang lebih sesuai dengan merek dan selera situs mereka.
Dalam panduan ini, kita akan menggunakan Woostify—tema fantastis untuk situs eCommerce. Tergantung pada tema Anda, metodenya mungkin sedikit berbeda.
- Dari dasbor WordPress, buka Appearance > Wallpaper/ Background atau Appearance > Customize > Wallpaper .
- Klik tombol Select Image untuk membuka Media Library.
- Pilih gambar yang Anda inginkan. Anda dapat mengunggahnya dari komputer Anda atau memilih yang sudah ada dari Perpustakaan Media.
- Klik tombol Pilih Gambar saat Anda senang.
- Jika Anda menyukai apa yang Anda lihat di Pratinjau, klik tombol Terbitkan . Dan itu dia!
Selain itu, WordPress menawarkan alat pengeditan gambar latar belakang sederhana. Anda dapat bereksperimen dengannya untuk melihat ukuran, posisi, dll. yang terbaik.
Jangan khawatir tentang terjebak dengan apa pun. Sangat mudah untuk kembali ke pengaturan dan mengubah latar belakang (dan opsi terkait) kapan pun Anda mau.
Gunakan Pembuat Halaman Elementor untuk Menambahkan Gambar Latar WordPress ke Postingan/Halaman
Elementor adalah pembuat halaman umum yang mempercepat produksi situs web secara dramatis. Ini menawarkan plugin gratis yang dapat Anda gunakan untuk menambahkan gambar latar WordPress.
- Untuk memulai, Anda perlu menginstal dan mengaktifkan plugin Elementor.
- Pertama, buka postingan atau halaman pilihan Anda. Setelah berada di editor halaman WordPress default, klik tombol Edit dengan Elementor .
Editor Elementor akan dibuka. Di sisi kiri, Anda akan melihat menu yang mencantumkan semua blok drag-and-drop untuk membangun dan mengedit posting/halaman Anda.
- Klik ikon pengaturan kecil di sudut kiri bawah pembuat halaman.
- Kemudian, pilih tab Gaya .
- Setelah itu, klik ikon kuas untuk menambahkan gambar latar WordPress .
- Selanjutnya, klik tombol Choose Image untuk membuka Media Library.
- Pilih gambar yang Anda inginkan. Anda dapat mengunggahnya dari komputer Anda atau memilih yang sudah ada dari Perpustakaan Media.
- Kemudian, klik tombol 'Sisipkan Media' di sudut kanan bawah.
Sekarang, gambar latar belakang yang dipilih akan muncul di pratinjau di sebelah kanan. Anda mungkin perlu menyesuaikan konten lain untuk memastikan item seperti gambar dan teks muncul dengan benar.
- Ingatlah untuk menekan tombol 'PERBARUI' untuk menyimpan semua perubahan dan memperbarui posting/halaman.
Selain itu, Elementor menyediakan beberapa penyesuaian untuk gambar latar WordPress seperti Posisi, Lampiran, Ulangi, dll. Jangan ragu untuk bereksperimen dengan mereka untuk mengetahui latar belakang terbaik.
Gunakan Plugin untuk Menambahkan Gambar Latar Belakang WordPress
Ada beberapa plugin gratis tapi luar biasa yang dapat melakukan pekerjaan menambahkan gambar latar belakang WordPress . Misalnya Gambar Latar Belakang Layar Penuh Sederhana, Latar Belakang WordPress Tingkat Lanjut, Manajer Latar Belakang Penuh, dll.
Tambahkan Gambar Latar Belakang WordPress untuk Seluruh Situs
Dalam panduan ini, kita akan menggunakan Gambar Latar Belakang Layar Penuh Sederhana karena sederhana, sesuai dengan namanya.
Plugin ini menyediakan instalasi dan pengaturan langsung dari gambar latar WordPress untuk situs web Anda. Ini secara otomatis menskalakan gambar dengan browser. Jadi selalu memenuhi layar, apa pun perangkat yang digunakan pengunjung Anda.
Untuk mewujudkannya hanya membutuhkan beberapa langkah sederhana. Ada versi berbayar yang tersedia yang menambahkan fitur tambahan. Namun, yang gratis adalah semua yang kita butuhkan.
- Instal dan aktifkan plugin Gambar Latar Layar Sederhana.
- Dari dasbor WordPress, buka Appearance > Fullscreen BG Image .
- Klik tombol Pilih Gambar untuk membuka Perpustakaan Media.
- Pilih gambar yang Anda inginkan. Anda dapat mengunggahnya dari komputer Anda atau memilih yang sudah ada dari Perpustakaan Media.
- Klik tombol Pilih Gambar saat Anda senang.
- Terakhir, klik tombol 'Simpan Opsi' dan periksa situs web Anda. Gambar sekarang harus ditampilkan di situs sebagai gambar latar WordPress layar penuh.
Perhatikan bahwa pengaturan plugin untuk gambar latar WordPress menggantikan Penyesuai WordPress default. Ini bukan hal yang buruk dalam bentuk apa pun, hanya sesuatu yang perlu diingat.
Tambahkan Gambar Latar Belakang WordPress pada Halaman / Pos Tertentu
Dalam panduan ini, kami akan menggunakan plugin Advanced WordPress Backgrounds yang kami sebutkan di atas.
Plugin ini memungkinkan menambahkan latar belakang menggunakan blok Gutenberg. Anda dapat mengatur warna, gambar, atau bahkan video sebagai latar belakang WordPress. Semuanya dapat dilihat di perangkat seluler. Selain itu, Anda dapat menambahkan efek paralaks ke gambar dan video latar WordPress.
Dalam hal ini, kami hanya akan menambahkan gambar latar statis ke area konten, khususnya posting/halaman.
Karena ini berfungsi dengan blok Gutenberg, pastikan untuk beralih dari mode Editor Klasik jika perlu.
- Instal dan aktifkan plugin.
- Buka postingan/halaman yang ada atau buat yang baru.
- Klik tombol plus di pojok kiri atas. Kemudian, gulir ke bawah ke bagian Desain, dan pilih blok AWB. Bilah ikon atas dan kolom menu samping akan muncul di samping blok.
- Klik tombol Gambar di kolom samping. Kemudian klik tombol Select Image di bawahnya untuk membuka Media Library.
- Pilih gambar yang diinginkan. Kemudian, klik tombol Pilih . Setelah Anda selesai melakukannya, Anda akan melihat gambar latar belakang.
- Di bilah ikon atas, klik ikon bentuk hamburger. Kemudian, pilih opsi Lebar Penuh untuk menutupi seluruh lebar. Ini sepenuhnya opsional.
Di kolom samping, Anda dapat mengubah ukuran, spasi, posisi gambar latar WordPress, dan banyak lagi. Jangan ragu untuk bereksperimen dengannya.
Sekarang, yang tersisa hanyalah menambahkan konten di dalam blok. Jika Anda mengedit posting/halaman yang ada, cukup potong dan tempel konten ke dalam blok.
Ingatlah untuk menyimpan posting/halaman saat Anda puas dengan hasilnya.
Gunakan CSS untuk Menambahkan Gambar Latar Belakang WordPress
Sekarang, kita akan mengeksplorasi cara mengubah gambar latar WordPress menggunakan CSS . Ini dapat dilakukan untuk seluruh situs atau untuk kategori tertentu menggunakan Penyesuai WordPress.
- Dari dasbor WordPress, buka Appearance > Customize untuk mengakses WordPress Customizer.
- Gulir ke bawah dan klik pada bagian CSS tambahan .
- Salin dan tempel kode yang sesuai di bawah ini ke dalam bidang CSS:
Tambahkan Gambar Latar Belakang WordPress untuk Seluruh Situs
body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
Pastikan untuk mengganti teks placeholder 'imageURL' dengan URL file gambar yang sebenarnya. Untuk melihat ini, pilih gambar yang Anda inginkan di Perpustakaan Media untuk melihat informasi gambar.
Dan jika Anda tahu CSS, jangan ragu untuk mengubahnya sesuka Anda.
Tambahkan Gambar Latar Belakang WordPress pada Halaman Kategori Tertentu
body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
Pastikan untuk mengganti teks placeholder 'imageURL' dengan URL file gambar yang sebenarnya dan 'categoryid' dengan nama kategori yang sesuai.
Untuk mengetahui ID kategori, ikuti petunjuk di bawah ini:
- Dari dasbor WordPress, buka Posting > Kategori .
- Arahkan mouse ke teks Edit dari kategori yang ingin Anda rujuk. Anda akan melihat URL di kiri bawah halaman, menunjukkan ID kategori.
Praktik Terbaik untuk Menggunakan Gambar Latar Belakang di WordPress
Mengatur gambar latar belakang kustom di WordPress sepertinya tugas yang mudah. Ya! Memang benar dalam banyak kasus, tetapi tidak selalu.
Oleh karena itu, kami menyarankan untuk mengikuti praktik terbaik gambar latar belakang WordPress untuk menghilangkan sebanyak mungkin masalah.
Periksa Dukungan Gambar Latar Belakang Sebelum Menggunakan Tema WordPress
Sayangnya, tidak semua tema WordPress mendukung gambar latar kustom. Biasanya karena latar belakang tidak sesuai dengan keseluruhan desain tema. Karena itu, pengembang memilih untuk mematikannya sepenuhnya.
Oleh karena itu, Anda harus memeriksa daftar fitur saat mengunduh tema baru, terutama jika Anda berencana membayar yang premium. Banyak situs web yang menjual tema memberikan informasi apakah tema WordPress mendukung gambar latar atau tidak.
Tetap dengan Gambar Berkualitas Tinggi
Resolusi gambar latar belakang yang Anda maksudkan sering membuat atau merusak presentasinya. Anda mungkin berpikir bahwa foto yang Anda ambil dengan ponsel Anda cukup bagus untuk latar belakang. Tapi kemungkinan itu perlu kualitas yang jauh lebih tinggi.
Anda dapat membayar untuk foto bebas royalti dari situs seperti Shutterstock. Situs-situs ini sering kali memiliki gambar kelas profesional yang siap diunggah sebagai gambar latar besar. Anda juga dapat menemukan banyak dari mereka di situs stok gambar gratis.
Gambar latar belakang mungkin tidak sepenuhnya terlihat di situs WordPress Anda, karena sebagian besar tertutup oleh konten. Namun, itu masih ditampilkan di seluruh layar. Oleh karena itu, Anda berisiko melihat latar belakang yang membentang jika Anda tidak menggunakan gambar berkualitas tinggi.
Optimalkan Gambar Latar Belakang
Seperti semua foto yang diunggah ke situs WordPress Anda, Anda harus mengoptimalkan gambar latar belakang sebelum dipublikasikan.
Ini sangat penting untuk gambar latar belakang karena sering muncul di beberapa halaman di seluruh situs Anda. Plus, mereka adalah foto besar dan memakan banyak ruang layar. Selain itu, gambar yang lebih besar memberikan beban yang signifikan pada server. Oleh karena itu, ingatlah untuk mengoptimalkan gambar latar belakang Anda sehingga situs Anda dimuat dengan cepat.
Anda memiliki dua opsi di sini:
- Optimalkan gambar latar belakang (dan semua foto situs web Anda) sebelum mengunggahnya ke server. Anda dapat menyelesaikan proses manual ini dengan bantuan alat seperti Photoshop, GIMP, dan Pixlr.
- Otomatiskan proses pengoptimalan dengan menginstal plugin WordPress yang mengubah ukuran dan mengecilkan gambar saat diunggah.
Pikiran Akhir
Menambahkan gambar latar WordPress ke situs web Anda mungkin tampak seperti hal kecil. Tapi jika dilakukan dengan baik, itu bisa membuat dampak besar.
Selain itu, ini dapat membantu menjaga kehadiran online Anda tetap segar. Sehingga pengunjung Anda tidak bosan melihat foto yang sama berulang-ulang.
Idealnya, gunakan Penyesuai WordPress untuk menambahkan gambar latar jika memungkinkan, karena ini dirancang khusus untuk berfungsi sebagaimana dimaksud.
Namun, Anda juga memiliki opsi lain untuk menambahkan dan mengubah gambar latar WordPress, seperti yang telah kami tunjukkan di atas.
Sekarang, lanjutkan dan berkreasilah dengan latar belakang situs web Anda untuk melibatkan pengunjung Anda secara visual.