WordPress'te Arka Plan Rengi Nasıl Değiştirilir (Başlangıç ​​Kılavuzu)

WordPress web sitenizin arka plan rengini değiştirmenin kolay bir yolunu mu arıyorsunuz?

Web sitenizin arka plan rengi, tasarımınızda ve markalaşmanızda ve içeriğinizin daha okunaklı hale getirilmesinde önemli bir rol oynar.

Bu yazıda, WordPress sitenizin arka plan rengini nasıl kolayca değiştireceğinizi göstereceğiz.

WordPress'te Arka Plan Rengini Neden Değiştirmelisiniz?

Bir WordPress teması, varsayılan bir arka plan rengiyle birlikte gelir. Arka plan rengini değiştirmek, web sitesi tasarımınızı kişiselleştirmenize ve okunabilirliği artırmanıza yardımcı olabilir.

Örneğin, farklı bir arka plan rengi kullanarak bir sayfanın belirli bir bölümünü belirgin hale getirebilirsiniz. Bu, harekete geçirici mesajınızı (CTA) vurgulamanıza ve dönüşümleri artırmanıza yardımcı olur.

Yazarlara, yorumlara veya kategorilere göre WordPress blogunuzdaki farklı gönderiler için farklı arka plan renkleri kullanabilirsiniz. Bu, makaleleri web sitenizdeki diğer içeriklerden ayırt etmenize yardımcı olur.

Ziyaretçilerinizin dikkatini anında çekmek ve etkileşimi artırmak için video arka planı eklemenin bir yolu da vardır.

Bununla birlikte, WordPress'te arka plan renginin nasıl değiştirileceğine bir göz atalım. Size arka plan rengini özelleştirmenin farklı yollarını göstereceğiz, böylece tercih ettiğiniz herhangi bir bölüme atlayabilirsiniz:

• WordPress Özelleştirici kullanarak Arka Plan Rengini Değiştirin
• Özel CSS kullanarak Arka Plan Rengini Değiştirin
• Arka Plan Renklerini Rastgele Değiştir
• Bireysel Gönderiler için Arka Plan Rengini Değiştirin
• Arka Planda Video Kullanın
• Özel Açılış Sayfası Oluşturun

WordPress Tema Özelleştirici kullanarak Arka Plan Rengini Değiştirin

Temanıza bağlı olarak, WordPress Tema Özelleştirici'yi kullanarak arka plan rengini değiştirebilirsiniz. Sitenizin görünümünü gerçek zamanlı olarak ve kod düzenlemeye gerek kalmadan düzenlemenizi sağlar.

WordPress Tema Özelleştiriciye erişmek için web sitenize giriş yapabilir ve ardından Görünüm » Özelleştir seçeneğine gidebilirsiniz.

Bu, temanızı değiştirmek için birden fazla seçenek bulacağınız Tema Özelleştirici'yi açacaktır. Buna menüler, renkler, ana sayfa, widget'lar, arka plan görüntüsü ve daha fazlası dahildir.

Mevcut belirli seçenekler, sitenizin kullandığı WordPress temasına bağlı olacaktır. Bu eğitim için varsayılan Twenty Twenty-One temasını kullanıyoruz.

Web sitenizin arka plan rengini değiştirmek için devam edin ve soldaki menüden 'Renkler ve Koyu Mod' ayarları sekmesine tıklayın.

Ardından, 'Arka Plan Rengi' seçeneğini tıklamanız ve web siteniz için bir renk seçmeniz gerekecek. Renk seçici aracını kullanabilir veya arka planınız için bir Hex renk kodu girebilirsiniz.

Değişiklikleri tamamladığınızda, 'Yayınla' düğmesini tıklamayı unutmayın. Artık yeni arka plan rengini çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

Temanız, Tema Özelleştirici'de bu seçeneğe sahip olmayabilir. Bu durumda aşağıdaki yöntemlerden birini deneyebilirsiniz.

Özel CSS Ekleyerek Arka Plan Rengini Değiştirin

WordPress web sitenizin arka plan rengini değiştirmenin başka bir yolu da WordPress Tema Özelleştirici'ye özel CSS eklemektir.

Başlamak için Görünüm » Özelleştir'e gidin ve ardından 'Ek CSS' sekmesine gidin.

Ardından, aşağıdaki kodu girebilirsiniz:

body {
 background-color: #FFFFFF;
}

Tek yapmanız gereken arka plan renk kodunu web sitenizde kullanmak istediğiniz renk koduyla değiştirmek. Ardından, devam edin ve kodu Ek CSS sekmesine girin.

İşiniz bittiğinde, 'Yayınla' düğmesini tıklamayı unutmayın. Artık yeni arka plan rengini görüntülemek için web sitenizi ziyaret edebilirsiniz.

Daha fazla ayrıntı için lütfen WordPress sitenize özel CSS'yi nasıl kolayca ekleyeceğiniz konusunda kılavuzumuza bakın.

WordPress'te Arka Plan Renklerini Rastgele Değiştirin

Şimdi, WordPress'te arka plan rengini rastgele değiştirmenin bir yolunu mu arıyorsunuz?

Farklı arka plan renkleri arasında otomatik olarak geçiş yapmak için yumuşak bir arka plan rengi değiştirme efekti ekleyebilirsiniz. Efekt, son renge ulaşana kadar birden çok renkten geçer.

Efekti eklemek için WordPress web sitenize kod eklemeniz gerekir. Aşağıdaki süreçte size yol göstereceğiz.

Yapmanız gereken ilk şey, yumuşak arka plan rengi değiştirme efektini eklemek istediğiniz alanın CSS sınıfını bulmak.

Bunu, tarayıcınızdaki Inspect aracını kullanarak yapabilirsiniz. Yapmanız gereken tek şey, farenizi rengini değiştirmek istediğiniz alana götürüp sağ tıklayarak Denetleme aracını seçmektir.

Bundan sonra, hedeflemek istediğiniz CSS sınıfını yazmanız gerekecek. Örneğin, yukarıdaki ekran görüntüsünde, alanı bir CSS sınıfı 'page-header' ile hedeflemek istiyoruz.

Ardından, bilgisayarınızda not defteri gibi düz bir metin düzenleyici açmanız ve yeni bir dosya oluşturmanız gerekir. Dosyayı masaüstünüze 'wpb-background-tutorial.js' olarak kaydetmeniz gerekecek.

Bu yapıldıktan sonra, az önce oluşturduğunuz JS dosyasına aşağıdaki kodu ekleyebilirsiniz:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];
 
            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        }); 

Kodu incelerseniz, web sitemizde hedeflemek istediğimiz alan olduğu için 'page-header' CSS sınıfını kullandığımızı fark edeceksiniz.

Hex renk kodunu kullanarak dört renk kullandığımızı da göreceksiniz. Arka planınız için istediğiniz kadar renk ekleyebilirsiniz. Tek yapmanız gereken, snippet'teki renk kodlarını girmek ve diğer renkler gibi virgül ve tek tırnak kullanarak ayırmaktır.

Artık JS dosyanız hazır olduğuna göre, bir dosya aktarım protokolü (FTP) hizmeti kullanarak onu WordPress temanızın JS klasörüne yüklemeniz gerekecek.

Bu eğitim için FileZilla kullanıyoruz. Windows, Mac ve Linux için ücretsiz bir FTP istemcisidir ve kullanımı çok kolaydır.

Başlamak için web sitenizin FTP sunucusunda oturum açmanız gerekir. Oturum açma kimlik bilgilerini barındırma sağlayıcınızdan gelen e-postada veya barındırma hesabınızın cPanel panosunda bulabilirsiniz.

Giriş yaptıktan sonra, 'Uzak site' sütunu altında web sitenizin klasör ve dosyalarının bir listesini göreceksiniz. Devam edin ve sitenizin temasındaki JS klasörüne gidin.

Temanızın bir js klasörü yoksa, bir tane oluşturabilirsiniz. FTP istemcisinde temanızın klasörünü sağ tıklayın ve 'Dizin oluştur' seçeneğini tıklayın.

Ardından, 'Yerel site' sütunu altında JS dosyanızın konumunu açmanız gerekir. Ardından dosyayı sağ tıklayın ve dosyayı temanıza eklemek için 'Yükle' seçeneğini tıklayın.

Daha fazla ayrıntı için, WordPress'e dosya yüklemek için FTP'nin nasıl kullanılacağına ilişkin eğiticimizi takip edebilirsiniz.

Ardından, temanızın funtions.php dosyasına aşağıdaki kodu girmeniz gerekecek. Bu kod, JavaScript dosyasını ve bu kodun çalışması için ihtiyacınız olan bağımlı jQuery komut dosyasını düzgün şekilde yükler.

function wpb_bg_color_scripts() {    
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); 
 } 
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

Kodu sitenize güvenle eklemek için Kod Parçacıkları eklentisini kullanmanızı öneririz. Daha fazla ayrıntı için web'den WordPress'e snippet'lerin nasıl yapıştırılacağına ilişkin kılavuzumuza bakın.

Hedeflediğiniz alanda rastgele değişen renkleri hareket halinde görmek için artık web sitenizi ziyaret edebilirsiniz.

Bireysel Gönderiler için Arka Plan Rengini Değiştirin

Özel CSS kullanarak web sitenizde tek bir renk kullanmak yerine WordPress'teki her bir blog gönderisinin arka plan rengini de değiştirebilirsiniz.

Belirli gönderilerin görünümünü değiştirmenize ve arka planlarını kişiselleştirmenize olanak tanır. Örneğin, her gönderinin stilini yazarlara göre özelleştirebilir veya en çok yorum yapılan gönderiniz için farklı bir arka plan rengi gösterebilirsiniz.

Belirli bir kategorideki gönderilerin arka plan rengini bile değiştirebilirsiniz. Örneğin, haber gönderileri, öğreticilere kıyasla farklı arka plan renklerine sahip olabilir.

Yapmanız gereken ilk şey, temanızın CSS'sinde post ID sınıfını bulmak. Bunu, herhangi bir blog gönderisini görüntüleyerek ve ardından tarayıcınızda Inspect aracını kullanmak için sağ tıklayarak yapabilirsiniz.

İşte neye benzeyeceğine bir örnek:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized"> 

Gönderi kimliğinizi aldıktan sonra, aşağıdaki özel CSS'yi kullanarak tek bir gönderinin arka plan rengini değiştirebilirsiniz. Gönderi kimliğini kendinize ve istediğiniz arka plan rengi koduna uyacak şekilde değiştirmeniz yeterlidir.

.post-104 { 
background-color: #D7DEB5;
color:#FFFFFF; 
} 

Özel CSS'yi eklemek için WordPress Tema Özelleştirici'yi kullanabilirsiniz. İlk olarak, WordPress web sitenize giriş yaptığınızdan emin olun. Ardından, blog yayınınızı ziyaret edin ve üst kısımdaki 'Özelleştir' seçeneğini tıklayın.

Bundan sonra, solunuzdaki menüden Ek CSS sekmesine gidin.

Ardından, özel CSS'yi girin ve ardından 'Yayınla' düğmesini tıklayın.

Artık yeni arka plan rengini görmek için blog gönderinizi ziyaret edebilirsiniz.

Yazara, yorumlara veya kategoriye göre arka plan rengini değiştirmek istiyorsanız, her WordPress gönderisini farklı şekilde nasıl şekillendireceğinizle ilgili ayrıntılı eğitimimize göz atın.

Arka Planda Video Kullanın

Videoları web sitenizin arka planı olarak kullanmak, ziyaretçilerinizin dikkatini çekmenin ve kullanıcı etkileşimini artırmanın harika bir yoludur.

Arka plana video eklemenin en kolay yolu bir WordPress eklentisi kullanmaktır. Bu eğitimde, arka plan videoları için mb.YTPlayer kullanacağız.

WordPress web sitenizin arka planında YouTube videolarını oynatmanıza izin veren ücretsiz bir eklentidir. Ayrıca mb.YTPlayer filigranını kaldırmanıza izin veren ve daha fazla özelleştirme özelliği sunan premium bir sürümü de mevcuttur.

İlk olarak, eklentiyi web sitenize yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin eğiticimizi takip edebilirsiniz.

Etkinleştirmenin ardından, WordPress yönetici alanınızdan mb.ideas » YTPlayer'a gidebilirsiniz .

Bir sonraki ekranda, YouTube videonuzun URL'sini girmeniz ve arka plan videosunu etkinleştirmeniz gerekecek.

Bunun yanı sıra, eklenti arka plan videonuzu göstermek için konumu seçmenize izin verir. Statik bir ana sayfa, blog dizini ana sayfası veya her ikisini birden seçebilirsiniz. 'Tümü'nü seçerseniz, videoyu sitenizin tamamında gösterme seçeneği de vardır.

Video URL'sini girip arka planı etkinleştirdikten sonra, video arka planını çalışırken görmek için web sitenizi ziyaret edin.

Özel Açılış Sayfası Oluşturun

WordPress'te özel açılış sayfaları oluşturmak, işletmeniz için olası satışlar oluşturmanıza ve satışları artırmanıza olanak tanır. Sayfanın arka plan rengi ve tasarımı üzerinde tam kontrole sahipsiniz.

Oldukça ilgi çekici bir özel açılış sayfası oluşturmanın en kolay yolu SeedProd kullanmaktır. WordPress için en iyi açılış sayfası eklentisidir ve kodu düzenlemeden sayfalar oluşturmak için kullanımı kolay bir sürükle ve bırak sayfa oluşturucu sunar.

Yapmanız gereken ilk şey, SeedProd'u web sitenize kurmak ve etkinleştirmektir. Bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza başvurabilirsiniz.

Not: Daha güçlü özellikler, şablonlar ve özelleştirme seçenekleri sunduğu için SeedProd Pro sürümünü kullanacağız. Ancak, WordPress.org'da ücretsiz bir sürümü de mevcuttur.

Eklenti aktif olduğunda, lisans anahtarınızı girmeniz istenecektir. Anahtarı SeedProd hesap alanınızda bulabilirsiniz. Anahtarı girdikten sonra, 'Anahtarı Doğrula' düğmesine tıklayın.

Ardından, SeedProd »Sayfalarına gidebilir ve 'Yeni Açılış Sayfası Ekle' düğmesini tıklayabilirsiniz.

Bundan sonra, açılış sayfanız için bir tema seçmeniz gerekecek. SeedProd, başlamak için çok sayıda güzel açılış sayfası şablonu sunar.

Sıfırdan başlamak için boş bir şablon da kullanabilirsiniz. Ancak, bir açılış sayfası oluşturmanın daha kolay ve daha hızlı bir yolu olduğu için bir şablon kullanmanızı öneririz.

Bir şablon seçtiğinizde, bir Sayfa Adı girmeniz ve bir URL seçmeniz istenecektir.

Bir sonraki ekranda SeedProd sayfa oluşturucusunu göreceksiniz. Burada, solunuzdaki menüden blok eklemek için sürükle ve bırak oluşturucuyu kullanabilirsiniz. Başlık, video, resim, düğme vb. ekleyebilirsiniz.

Aşağı kaydırdığınızda, Gelişmiş bölümünün altında daha fazla blok var. Örneğin, aciliyet oluşturmak için bir geri sayım sayacı ekleyebilir, takipçileri artırmak için sosyal profilleri gösterebilir, potansiyel müşteri toplamak için bir seçenek formu ekleyebilir ve daha fazlasını yapabilirsiniz.

Sürükle ve bırak oluşturucuyu kullanarak, açılış sayfanızdaki her bloğun konumunu değiştirmek zahmetsizdir. Metnin düzenini, boyutunu, rengini ve yazı tipini bile değiştirebilirsiniz.

Açılış sayfanızın arka plan rengini değiştirmek için sayfanın herhangi bir bölümünü seçmeniz yeterlidir. Artık arka plan stilini, rengini düzenlemek ve bir resim eklemek için soldaki menüde seçenekler göreceksiniz.

Açılış sayfanızı düzenlemeyi bitirdikten sonra, üst kısımdaki 'Kaydet' düğmesini tıklamayı unutmayın.

Ardından, 'Bağlan' sekmesine gidebilir ve sayfayı farklı e-posta pazarlama hizmetleriyle entegre edebilirsiniz. Örneğin, Constant Contact, SendinBlue ve diğerlerine bağlanabilirsiniz.

Bundan sonra, devam edin ve 'Sayfa Ayarları' sekmesine tıklayın. Burada, sayfanızı yayına almak için Sayfa Durumunu Taslak'tan Yayınla'ya değiştirebilirsiniz.

Bunun dışında sayfanın SEO ayarlarını değiştirebilir, analizleri görüntüleyebilir, Scripts altında özel kod ekleyebilir ve özel bir alan adı girebilirsiniz.

İşiniz bittiğinde, SeedProd sayfa oluşturucudan çıkabilir ve özel açılış sayfanızı ziyaret edebilirsiniz.

Bu makalenin, WordPress'te arka plan rengini nasıl değiştireceğinizi öğrenmenize yardımcı olacağını umuyoruz. Ayrıca, en iyi web sitesi oluşturucunun nasıl seçileceğine ilişkin kılavuzumuza veya en iyi web tasarım yazılımı karşılaştırmamıza da göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.