WordPress'te Arka Plan Rengi Nasıl Değiştirilir (Yeni Başlayanlar İçin Kılavuz)

Web sitenizin arka plan rengi, ziyaretçileriniz için tüm havayı belirler.

İster temiz ve profesyonel, ister sıcak ve davetkar, ister cesur ve yaratıcı bir şey isteyin – ne tür bir hava yakalamak istediğinizden bağımsız olarak, doğru arka plan rengi her şeyi değiştirebilir.

İyi haber şu ki, bunu değiştirmek herhangi bir teknik beceri veya pahalı araç gerektirmez. WordPress, yalnızca birkaç tıklamayla renkleri özelleştirmenize olanak tanıyan yerleşik özelliklere sahiptir.

Birçok site sahibinin web sitelerini kişiselleştirmelerine yardımcı olduktan sonra, çoğu insanın sürecin ne kadar basit ve anında olabileceğine şaşırdığını gördük.

WordPress'te arka plan renginizi değiştirmenin farklı kolay yollarını, en başlangıç dostu seçenekle başlayıp biraz daha gelişmiş tekniklere doğru ilerleyerek size anlatacağız.

WordPress Arka Plan Renginiz Neden Gerçekten Önemlidir 🎨

Web sitenizin arka plan rengini dijital evinizin duvarları gibi düşünün. WordPress temanız varsayılan bir renkle gelse de, doğru arka planı seçmek sitenizin ziyaretçilere ne kadar davetkar hissettirdiği konusunda büyük bir fark yaratabilir.

İşte bu WordPress tasarım öğesinin neden bu kadar önemli olduğunun nedeni:

• İçeriğinizi okunması daha kolay hale getirirler
• Önemli bilgilerin öne çıkmasına yardımcı olurlar
• Web siteniz için atmosferi belirlerler
• Sitenizin daha profesyonel görünmesini sağlayabilirler

Doğru arka plan rengi, önemli düğmelerinizi vurgulamaya ve dönüşümlerinizi artırmaya yardımcı olabilir. İçeriğinizi daha iyi organize etmek için farklı renkler de kullanabilirsiniz; örneğin, farklı blog kategorileri veya özel duyurular için belirli renkler kullanmak gibi.

Ve sitenizi daha da ilgi çekici hale getirmek isterseniz, ziyaretçilerinizin dikkatini çekmek için video arka planları bile ekleyebilirsiniz.

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

WordPress Tema Özelleştirici'de Arka Plan Rengi Nasıl Değiştirilir

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 kod düzenlemeye gerek kalmadan düzenlemenizi sağlar.

WordPress Tema Özelleştirici'ye erişmek için web sitenize giriş yapabilir ve ardından Görünüm » Özelleştir'e gidebilirsiniz.

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

Mevcut belirli seçenekler, sitenizin hangi WordPress teması 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 sol menüdeki ‘Renkler ve Karanlık 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 gerekecektir.

Arka planınız için renk seçici aracını kullanabilir veya bir Hex renk kodu girebilirsiniz.

Değişikliklerle işiniz bittiğinde, 'Yayınla' düğmesine tıklamayı unutmayın.

Yeni arka plan rengini görmek için artık WordPress web sitenizi ziyaret edebilirsiniz.

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

Tam Site Düzenleyici'de Arka Plan Rengi Nasıl Değiştirilir (Blok Temaları)

Tam site düzenleyici (FSE), blok temalarını düzenlemek için bir WordPress düzenleme platformudur. Bu düzenleyici, sitenizin arka plan rengini değiştirmeyi çok kolaylaştırır. Süreci birlikte inceleyelim.

WordPress kontrol panelinizde Görünüm » Düzenleyici yolunu izleyerek başlayın.

Şimdi menü seçeneklerinden birinde 'Stiller' düğmesini göreceksiniz.

Devam edin ve üzerine tıklayın.

Şimdi, kalem düzenleme düğmesine tıklayın.

Bu sizi düzenleme arayüzüne getirecektir.

Şimdi, ekranınızın sağ tarafında kullanışlı bir panel fark edeceksiniz. Burası renkleri, yazı tiplerini ve daha fazlasını değiştirebileceğiniz tasarım kontrol merkezinizdir.

Arka plan renginizi değiştirmek için Stil panelindeki 'Renkler'e tıklamanız yeterlidir.

Ardından, ‘Arka Plan’a tıklayın.

Artık düz bir renk veya gradyan oluşturma arasında seçim yapabilirsiniz. Tarzınıza uyanı seçmekten çekinmeyin. Seçiminizden memnun kaldığınızda, 'Kaydet'e basın ve işiniz bitti!

WordPress'te CSS ile Arka Plan Rengi Nasıl Değiştirilir

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 rengi kodunu web sitenizde kullanmak istediğiniz renk koduyla değiştirmektir. Ardından, kodu Ek CSS sekmesine girin.

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

Daha fazla ayrıntı için, WordPress sitenize özel CSS ekleme kılavuzumuza bakın: WordPress sitenize özel CSS'yi kolayca ekleme.

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

Sitenize yumuşak bir arka plan rengi değiştirme efekti eklemek ister misiniz? Bu efekt, farklı renkler arasında otomatik olarak geçiş yapar, bu da belirli bir bölümü vurgulamak veya dikkat çekmek için harika olabilir.

Efekti eklemek için WordPress web sitenize kod eklemeniz gerekecek. Süreci aşağıda adım adım anlatacağız.

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

Bunu, tarayıcınızdaki Denetleme aracını kullanarak yapabilirsiniz. Tek yapmanız gereken, rengini değiştirmek istediğiniz alana fareyi götürmek ve Denetleme aracını seçmek için sağ tıklamaktır.

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

Ardından, bilgisayarınızda not defteri gibi düz metin düzenleyicisini 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, 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, 'page-header' CSS sınıfını kullandığımızı fark edeceksiniz, çünkü hedeflemek istediğimiz alan budur.

Ayrıca onaltılık 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ı parçacığa girmek ve diğer renkler gibi bunları virgül ve tek tırnak kullanarak ayırmaktır.

JS dosyanız hazır olduğuna göre, bunu WordPress temanızın JS klasörüne yüklemeniz gerekecek. Bunu yapmanın en kolay yolu, web sunucunuzdaki dosyaları doğrudan yönetmenize olanak tanıyan bir dosya aktarım protokolü (FTP) istemcisi kullanmaktır.

Bu eğitimde FileZilla'yı kullanacağız. Windows, Mac ve Linux için ücretsiz ve basit bir FTP istemcisidir. Aslında, site dosyalarını yönetmek için kendimizin test ettiği yaygın bir araçtır.

Başlamak için web sitenizin FTP sunucusuna giriş yapmanız gerekecektir. Giriş kimlik bilgilerini hosting sağlayıcınızdan gelen e-postada veya hosting hesabınızın cPanel kontrol panelinde bulabilirsiniz.

Giriş yaptıktan sonra, 'Uzak site' sütunu altında web sitenizin klasör ve dosyalarının bir listesini göreceksiniz. 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 gerekecek.

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 dair eğitimimizi takip edebilirsiniz.

Ardından, aşağıdaki kodu temanızın funtions.php dosyasına girmeniz gerekecek. 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'den kod parçacıklarını WordPress'e nasıl yapıştıracağınıza ilişkin kılavuzumuza bakın.

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

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

Belirli bir blog gönderisine benzersiz bir görünüm vermek ister misiniz? Tek tek gönderilerin arka plan rengini özel CSS kullanarak değiştirebilirsiniz. Bu, özel duyuruları vurgulamanıza, içeriği renkle kategorize etmenize veya tasarımınızla yaratıcı olmanıza olanak tanır.

Öncelikle temanızın CSS'inde belirli Gönderi Kimliği sınıfını bulmanız gerekir. Özelleştirmek istediğiniz blog gönderisini görüntüleyin, sayfanın herhangi bir yerine sağ tıklayın ve 'İncele' aracını seçin.

Kaynak kodunda <article> etiketini veya <body> etiketini arayın. post-104 veya postid-104 gibi bir sınıf göreceksiniz.

Gönderi kimliğinizi aldıktan sonra, aşağıdaki özel CSS kod parçasını kullanabilirsiniz. Gönderi kimliğini ve renk kodunu kendi ayrıntılarınızla değiştirdiğinizden emin olun:

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

Bu kodu eklemek için Görünüm » Özelleştir'e gidin ve 'Ek CSS' sekmesine yapıştırın.

'Yayınla'ya tıkladığınızda, arka plan rengi yalnızca o belirli blog gönderisi için değişecektir.

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

Yazar, yorumlar veya kategoriye göre arka plan rengini değiştirmek istiyorsanız, her WordPress gönderisini farklı şekilde biçimlendirme hakkındaki ayrıntılı eğitimimize göz atın.

Ek İpucu: Daha Fazla Tasarım Kontrolü İçin Sayfa Oluşturucu Kullanın

Arka plan renklerini değiştirmek sadece başlangıçtır. Web sitenizin tasarımını tam olarak kontrol etmek istiyorsanız, bir sayfa oluşturucu çok daha fazla olasılık sunabilir.

WPBeginner olarak, SeedProd'u öneriyoruz çünkü WordPress için en popüler ve kullanıcı dostu sayfa oluşturucudur. İş ortağı markalarımız da web sitelerini tasarlamak için onu kullandılar; bunlar arasında WPForms, Duplicator ve Charitable bulunmaktadır.

Size tam tasarım kontrolü sağlar ve şunları yapmanıza olanak tanır:

• Kodlama yapmadan herhangi bir sayfayı tasarlayın
• Renkleri, düzenleri ve boşlukları özelleştirin
• Dakikalar içinde profesyonel görünümlü sayfalar oluşturun
• Tüm cihazlarda sayfalarınız harika görünsün

Aracı demo ortamımızda kapsamlı bir şekilde test ettik ve süper sezgisel ve kullanımı kolay bulduk. Deneyimimiz hakkında daha fazla bilgi edinmek için SeedProd incelememize bakabilirsiniz.

Başlamak kolaydır – sadece basit WordPress eklentisi kurulum kılavuzumuzu kullanarak SeedProd'u kurun ve etkinleştirin.

Not: ücretsiz sürüm ile başlayabilirsiniz, ancak ihtiyacınız olursa SeedProd Pro size daha fazla şablon ve tasarım seçeneğine erişim sağlar.

Eklenti etkinleştirildikten sonra, 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 bölümüne gidebilirsiniz.

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

Ardından, açılış sayfanız için bir tema seçmeniz gerekecek. SeedProd, başlamanız için birçok 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 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.

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

Bir sonraki ekranda SeedProd sayfa oluşturucuyu göreceksiniz. Burada sol menüdeki blokları eklemek için sürükle-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 bulunur. Örneğin, aciliyet yaratmak için geri sayım zamanlayıcısı ekleyebilir, takipçi sayısını artırmak için sosyal profilleri gösterebilir, potansiyel müşterileri toplamak için bir form seçeneği 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. Hatta 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 menüde arka plan stilini, rengini düzenlemek ve bir resim eklemek için seçenekler göreceksiniz.

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

Ardından, ‘Bağlan’ sekmesine gidip sayfayı farklı e-posta pazarlama hizmetleriyle entegre edebilirsiniz. Örneğin, Constant Contact, Brevo (eski adıyla Sendinblue) ve diğerlerine bağlanabilirsiniz.

Ardından, ‘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, Betikler altına ö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.

Video Eğitim

WordPress'te Arka Plan Renklerini Değiştirme Hakkında Sıkça Sorulan Sorular

WordPress'te arka plan renklerini değiştirmekle ilgili okuyucularımızın sıkça sorduğu bazı sorular şunlardır:

Renk yerine arka planım için bir resim kullanabilir miyim?

Evet, kesinlikle yapabilirsiniz. Arka plan rengini değiştirmenize izin veren çoğu WordPress teması, bir arka plan resmi yükleme seçeneğine de sahiptir.

Bu ayarı genellikle Tema Özelleştirici'de (Görünüm » Özelleştir) “Arka Plan Resmi” gibi bir sekme altında bulabilirsiniz. Oradan bilgisayarınızdan bir dosya yükleyebilirsiniz.

Arka plan rengimi değiştirmek site hızımı etkiler mi?

Düz bir arka plan renginin sitenizin hızı üzerinde neredeyse hiçbir etkisi yoktur, bu da onu güvenli ve kolay bir performans kazancı haline getirir.

Ancak, büyük, optimize edilmemiş bir arka plan resmi kullanmak sayfa yükleme sürelerinizi önemli ölçüde yavaşlatabilir. Bir resim kullanırsanız, önce sıkıştırmanızı her zaman öneririz.

Daha fazla ipucu için, kalite kaybı olmadan web için görselleri nasıl optimize edeceğiniz konusundaki rehberimize bakın.

Marka rengim için doğru hex kodunu nasıl bulabilirim?

Onaltılık kod, belirli bir rengi temsil eden altı haneli bir koddur (örneğin, saf beyaz için #FFFFFF). Markanızın onaltılık kodunu bulabileceğiniz en iyi yer, şirketinizin resmi stil kılavuzudur.

Eğer yoksa, HTML Renk Kodları gibi ücretsiz bir çevrimiçi araç kullanabilirsiniz. Renk seçicileri, istediğiniz herhangi bir ton için tam onaltılık kodu bulmanızı sağlar.

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 nasıl dönüştüreceğiniz hakkındaki rehberimize ve en iyi web tasarım yazılımları 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 ayrıca Twitter ve Facebook'ta da bulabilirsiniz.