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

Web sitenizin arka plan rengi, tasarımınızda ve markalaşmanızda önemli bir rol oynar. İçeriğinizi daha okunabilir hale getirir ve biri web sitenize girer girmez kullanıcının dikkatini çekmeye yardımcı olur.

WPBeginner’da 15 yılı aşkın süredir WordPress kullanıyoruz ve kullanıcıların arka plan renklerini değiştirmelerini çok daha kolay hale getirmek için nasıl geliştiğini gördük. Örneğin, temayı değiştirmek ve farklı bir renk seçmek için tam site düzenleyicisini veya tema özelleştiricisini kullanabilirsiniz.

Bu makalede, WordPress sitenizin arka plan rengini kolayca değiştirmenin birkaç yolunu göstereceğiz.

WordPress’te Arka Plan Rengi Neden Değiştirilir?

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

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

WordPress blogunuzdaki farklı yazılar için yazarlara, yorumlara veya kategorilere göre 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 planları eklemenin bir yolu da var.

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 bölüme geçebilirsiniz:

Video Eğitimi

Yazılı talimatları tercih ediyorsanız, okumaya devam edin.

WordPress Tema Özelleştiricisini Kullanarak Arka Plan Rengini Değiştirme

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

WordPress Tema Özelleştiricisine erişmek için web sitenizde oturum açabilir ve ardından Görünüm ” Özelleştir‘e gidebilirsiniz.

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

Kullanılabilecek belirli seçenekler, sitenizin hangi WordPress temasını kullandığı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 sol taraftaki menüden ‘Renkler ve Koyu Mod’ ayarları sekmesine tıklayın.

Ardından, ‘Arka Plan Rengi’ seçeneğine tıklamanız ve web siteniz için bir renk seçmeniz gerekir.

Renk seçici aracını kullanabilir veya arka planınız için bir Onaltılık renk kodu girebilirsiniz.

Değişiklikleri tamamladığınızda, ‘Yayınla’ düğmesine tıklamayı unutmayın.

Artık yeni arka plan rengini çalışırken görmek için WordPress web sitenizi ziyaret edebilirsiniz.

Temanızda Tema Özelleştirici’de bu seçenek bulunmayabilir. Bu durumda, aşağıdaki yöntemlerden birini deneyebilirsiniz.

Tam Site Düzenleyicisini Kullanarak Arka Plan Rengini Değiştirme

Tam site editörü (FSE), sitenizin arka plan rengini düzenlemek için kullanabileceğiniz blok tabanlı bir WordPress tema editörüdür. Web sitesi tasarımını özelleştirmek için farklı bloklar sunar ve WordPress blok düzenleyicisini kullanmaya benzer.

Tam site editörü şu anda Twenty Twenty-Two teması gibi belirli WordPress temalarında mevcuttur. Arka plan rengi değişikliği yapmak için WordPress panonuzdan Görünüm ” Düzenleyici ‘ye gidebilirsiniz.

Tam site düzenleyicisine girdiğinizde, her bir bloğun arka plan rengini değiştirebilirsiniz.

İlk olarak, düzenlemek istediğiniz bir blok seçin. Ardından, sağ tarafınızdaki ayarlar panelinden ‘Renk’ bölümüne gidin ve bir renk seçmek için ‘Arka Plan’ seçeneğine tıklayın.

İşiniz bittiğinde, devam edin ve ‘Kaydet’ düğmesine tıklayın.

Öte yandan, tüm blokların arkasında görünen bir arka plan rengi eklemek isterseniz, bir Kapak bloğu ekleyebilirsiniz.

İlk olarak, üstteki ‘+’ işaretine tıklayın ve ‘Kapak’ bloğunu ekleyin.

Ardından, tema şablonunda aralarından seçim yapabileceğiniz birkaç arka plan rengi seçeneğiyle birlikte ‘Kapak’ bloğunu göreceksiniz.

Alternatif olarak, sağ tarafınızdaki ayarlar panelinden Kaplama bölümüne gidebilir ve ‘Renk’ seçeneğine tıklayabilirsiniz.

Bir renk seçtikten sonra, bir sonraki adım bu rengi tüm sayfanızda göstermektir.

Başlamak için en üstteki 3 tire Liste Görünümü simgesine tıklamanız gerekir. Bu, temanızın ana hatlarını açacak ve farklı bölümleri gösterecektir.

Ardından, Liste Görünümündeki tüm tema öğelerini Kapak bloğunun altına sürükleyip bırakabilirsiniz.

Bunu yaptığınızda, Kapak bloğu renginiz tüm web sitesinde arka plan rengi olarak görünecektir.

Değişikliklerinizi kaydetmek için en üstteki ‘Kaydet’ düğmesine tıklamayı unutmayın.

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

CSS kullanarak arka plan rengini nasıl değiştireceğinizi merak ediyor musunuz?

WordPress web sitenizin arka plan rengini değiştirmenin bir başka 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ştirmektir. Ardından, devam edin ve kodu Ek CSS sekmesine girin.

İşiniz bittiğinde, ‘Yayınla’ düğmesine tıklamayı unutmayın. Artık yeni arka plan rengini görmek için web sitenizi ziyaret edebilirsiniz.

Daha fazla ayrıntı için lütfen WordPress sitenize nasıl kolayca özel CSS ekleyebileceğinize ilişkin kılavuzumuza bakın.

WordPress’te Arka Plan Renklerini Rastgele Değiştirme

Ş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 fazla renkten geçer.

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

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

Bunu tarayıcınızdaki Inspect aracını kullanarak yapabilirsiniz. Tek yapmanız gereken farenizi rengini değiştirmek istediğiniz alana götürmek ve sağ tıklayarak İncele aracını seçmektir.

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

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

Bu işlem tamamlandıktan sonra, aşağıdaki kodu yeni oluşturduğunuz JS dosyasına 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.

Ayrıca 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 renk kodlarını kod parçacığına 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 WordPress temanızın JS klasörüne yüklemeniz gerekir.

Bu eğitim için FileZilla’yı kullanacağız. 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. Giriş 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örlerinin ve dosyalarının bir listesini göreceksiniz. Devam edin ve sitenizin temasındaki JS klasörüne gidin.

Temanızda bir js klasörü yoksa, bir tane oluşturabilirsiniz.

FTP istemcisinde temanızın klasörüne sağ tıklayın ve ‘Dizin oluştur’ seçeneğine tıklayın.

Ardından, JS dosyanızın konumunu ‘Yerel site’ sütunu altında açmanız gerekir.

Ardından dosyaya sağ tıklayın ve dosyayı temanıza eklemek için ‘Yükle’ seçeneğine 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ğitimimizi takip edebilirsiniz.

Ardından, aşağıdaki kodu temanızın funtions.php dosyasına girmeniz gerekir. Bu kod, JavaScript dosyasını ve bu kodun çalışması için ihtiyacınız olan bağımlı jQuery betiğini düzgün bir ş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üvenli bir şekilde eklemek için ücretsiz WPCode eklentisini kullanmanızı öneririz. Daha fazla ayrıntı için web’deki parçacıkların WordPress’e nasıl yapıştırılacağına ilişkin kılavuzumuza bakın.

Artık web sitenizi ziyaret ederek rastgele değişen renkleri hedeflediğiniz alanda çalışırken görebilirsiniz.

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

Ayrıca özel CSS kullanarak web sitenizin tamamında tek bir renk kullanmak yerine WordPress’te her bir blog gönderisinin arka plan rengini 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 bir gönderinin stilini yazarlara göre özelleştirebilir veya en çok yorum alan gönderiniz için farklı bir arka plan rengi gösterebilirsiniz.

Belirli bir kategorideki gönderiler için 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 gönderi kimliği sınıfını bulmaktır. Bunu herhangi bir blog gönderisini görüntüleyerek ve ardından sağ tıklayarak tarayıcınızdaki İncele aracını kullanarak yapabilirsiniz.

İşte nasıl görüneceğine dair 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. Sadece gönderi kimliğini kendi kimliğinizle ve istediğiniz arka plan rengi koduyla eşleşecek şekilde değiştirin.

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

Özel CSS eklemek için WordPress Tema Özelleştiricisini kullanabilirsiniz. Öncelikle, WordPress web sitenize giriş yaptığınızdan emin olun. Ardından, blog gönderinizi ziyaret edin ve üst kısımdaki ‘Özelleştir’ seçeneğine tıklayın.

Bundan sonra, sol taraftaki menüden Ek CSS sekmesine gidin.

Ardından, özel CSS’yi girin.

Bu işlem tamamlandıktan sonra ‘Yayınla’ düğmesine tıklayın.

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

Arka plan rengini yazara, yorumlara veya kategoriye göre değiştirmek istiyorsanız, her bir WordPress gönderisini nasıl farklı şekillendireceğinize ilişkin ayrıntılı eğitimimize göz atın.

Arka Planda Bir Video Kullanın

Web sitenizin arka planında video kullanmak, ziyaretçilerinizin dikkatini çekmek ve kullanıcı etkileşimini artırmak için harika bir yoldur.

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ızı sağlayan ü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.

Öncelikle, eklentiyi web sitenize yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için WordPress eklentisi nasıl kurulur eğitimimizi takip edebilirsiniz.

Etkinleştirmenin ardından WordPress yönetici alanınızdan mb.ideas ” YTPlayer adresine gidebilirsiniz.

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

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

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

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

WordPress’te özel açılış sayfaları oluşturmak, işletmeniz için potansiyel müşteriler 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 özel bir açılış sayfası oluşturmanın en kolay yolu SeedProd kullanmaktır. WordPress için en iyi açılış sayfası eklentisidir ve kod düzenlemeden sayfa 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 dair rehberimize 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. Bununla birlikte, 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’ butonuna tıklayın.

Ardından, SeedProd ” Sayfalar bölümüne gidebilirsiniz.

Buradan, ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklayın.

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

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

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

Bundan sonra, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklamanız yeterlidir.

Bir sonraki ekranda SeedProd sayfa oluşturucusunu göreceksiniz. Burada, sol taraftaki menüden bloklar 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 vardır. Örneğin, aciliyet yaratmak için bir geri sayım sayacı ekleyebilir, takipçileri artırmak için sosyal profilleri gösterebilir, potansiyel müşterileri toplamak için bir seçenek formu ekleyebilir ve daha fazlasını yapabilirsiniz.

Sürükle-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. Şimdi sol taraftaki menüde arka plan stilini, rengini düzenlemek ve bir resim eklemek için seçenekler göreceksiniz.

Açılış sayfanızı düzenlemeyi tamamladıktan sonra, en üstteki ‘Kaydet’ düğmesine tıklamayı unutmayın.

Ardından, ‘Bağlan’ sekmesine gidebilir ve sayfayı farklı e-posta pazarlama hizmetleriyle entegre edebilirsiniz. Örneğin, Constant Contact, Brevo (eski adıyla 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, Scriptler altında özel kod ekleyebilir ve özel bir alan adı girebilirsiniz.

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

Umarız bu makale WordPress’te arka plan rengini nasıl değiştireceğinizi öğrenmenize yardımcı olmuştur. Ayrıca Figma’yı WordPress’e dönüştürme kılavuzumuza ve en iyi web tasarım yazılımı karşılaştırmamıza da göz atmak isteyebilirsiniz.