WordPress Web Sitenizdeki Renkleri Özelleştirme

Renkler, web sitenizi görsel olarak çekici hale getirmede ve marka kimliğini oluşturmada önemli bir rol oynar. Neyse ki, WordPress tüm sitenizdeki renkleri özelleştirmeyi çok kolaylaştırır.

Bu, benzersiz bir görünüm oluşturmak ve tutarlılık ve netlik sağlamak için esastır.

Web sitelerimizde güçlü bir marka kimliği oluşturmak için rengi başarıyla kullandık. Örneğin, turuncu rengi WPBeginner markasının tanımlayıcı bir parçası haline geldi. Sitemizi okuyucular için akılda kalıcı hale getirirken aynı zamanda estetik açıdan hoş bir tasarım yaratır.

Bu düşünceli renk kullanımı, markamızın kolayca tanınmasını sağlamaya yardımcı olur, kullanıcı deneyimini ve marka sadakatini artırır.

Bu makalede, WordPress web sitenizde arka plan, başlık, metin ve bağlantı renkleri dahil olmak üzere renkleri nasıl kolayca özelleştirebileceğinizi göstereceğiz.

Renk Teorisi Nedir?

WordPress web sitenizde renkleri özelleştirmeye başlamadan önce renk teorisini anlamak önemlidir.

Renk teorisi, renklerin ve bunların birlikte nasıl çalıştığının incelenmesidir. Tasarımcıların birbirini tamamlayan renk kombinasyonları oluşturmasına yardımcı olur.

Bir web sitesi tasarlarken, birbiriyle uyumlu görünen renkler seçmeniz gerekir. Bu, web sitenizin ziyaretçileriniz için daha çekici görünmesini sağlayacak, bu da kullanıcı deneyimini iyileştirebilir ve etkileşimi artırabilir.

Farklı renkler insanlarda farklı duygular ve hisler uyandırabilir ve renk teorisi web siteniz için doğru kombinasyonu seçmenize yardımcı olabilir.

Örneğin, kırmızı genellikle yiyecekleri ve restoranları temsil etmek için kullanılır. Diğer yandan, mavi genellikle bankacılık ve finans web sitelerinde kullanılır.

Kırmızının sıcaklık, enerji ve tutku hisleri yaratabilmesi, mavinin ise güven, güvenlik ve sakinliği simgelemesi nedeniyledir.

Tamamlayıcı renklere ek olarak, WordPress blogunuzun önemli alanlarına dikkat çekmek için renk kontrastını da kullanabilirsiniz.

Bu, içeriğinizi daha okunabilir hale getirmenize, güçlü bir marka kimliği oluşturmanıza ve web sitesinde belirli bir ruh hali yaratmanıza olanak tanır.

WordPress Temaları Nedir ve Tema Renklerini Değiştirebilir misiniz?

WordPress temaları, web sitenizin kullanıcıya nasıl göründüğünü kontrol eder. Tipik bir WordPress teması, görünümünü ve düzenini değiştirmek için web sitenize yüklediğiniz önceden tasarlanmış şablonlar kümesidir.

Temalar web sitenizi daha çekici, kullanımı daha kolay hale getirir ve etkileşimi artırır.

Ayrıca, SeedProd ve Thrive Theme Builder gibi eklentileri kullanarak kendi temalarınızı sıfırdan oluşturabilirsiniz.

WordPress ile temaları kolayca özelleştirebilir ve arka planlarını, yazı tiplerini, düğmelerini ve bağlantı renklerini değiştirebilirsiniz.

Ancak, bazı temaların önceden tanımlanmış renk seçenekleriyle geldiğini, bazılarının ise kendi renginizi seçmek için daha fazla esneklik sunduğunu unutmayın.

Bununla birlikte, WordPress'te renkleri nasıl kolayca özelleştirebileceğinize bakalım. Eğitimimizin farklı bölümlerine atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

• WordPress'te Renkler Nasıl Özelleştirilir
• WordPress'te Arka Plan Rengi Nasıl Değiştirilir
• WordPress'te Üstbilgi Rengi Nasıl Değiştirilir
• WordPress'te Metin Rengini Değiştirme
• WordPress'te Metin Seçim Rengini Değiştirme
• WordPress'te Bağlantı Rengi Nasıl Değiştirilir
• WordPress'te Yönetici Renk Şemasını Değiştirme

WordPress'te Renkler Nasıl Özelleştirilir

Tema özelleştirici, tam site düzenleyicisi, özel CSS, sayfa oluşturucu eklentileri ve daha fazlası dahil olmak üzere birçok farklı yöntem kullanarak WordPress'te renkleri özelleştirebilirsiniz.

Tema Özelleştiriciyi Kullanarak Renkleri Değiştirme

Yerleşik WordPress tema özelleştiricisini kullanarak renkleri değiştirmek çok kolaydır.

Öncelikle, yönetici kenar çubuğundan Görünüm » Özelleştir sayfasına gidin.

Not: WordPress kontrol panelinizde ‘Özelleştir’ sekmesini bulamıyorsanız, bu, bir blok teması kullandığınız anlamına gelir. Bir blok temasında renkleri nasıl değiştireceğinizi öğrenmek için bu öğreticinin bir sonraki bölümüne gidin.

Bu eğitim için varsayılan Yirmi Yirmi Bir temasını kullanacağız.

Tema özelleştiricinin, şu anda kullandığınız temaya bağlı olarak farklı görünebileceğini unutmayın.

Örneğin, Twenty Twenty-One teması, kullanıcıların bir arka plan rengi seçmelerine ve karanlık modu özelleştirmelerine olanak tanıyan bir 'Renkler ve Karanlık Mod' paneli ile birlikte gelir.

Paneli açtıktan sonra, 'Renk Seç' seçeneğine tıklamanız yeterlidir. Bu, tercih ettiğiniz arka plan rengini seçebileceğiniz Renk Seçici'yi açacaktır.

İşiniz bittiğinde, değişikliklerinizi kaydetmek ve web sitenizde yayınlamak için üstteki ‘Yayınla’ düğmesine tıklamayı unutmayın.

Tam Site Düzenleyicisinde Renkleri Değiştirin

Eğer blok tabanlı bir tema kullanıyorsanız, tema özelleştiricisine erişiminiz olmayacaktır. Ancak, web sitenizdeki renkleri değiştirmek için tam site düzenleyiciyi (FSE) kullanabilirsiniz.

İlk olarak, tam site düzenleyicisini başlatmak için yönetici kenar çubuğundan Görünüm » Düzenleyici ekranına gidin. Şimdi, ekranın sağ üst köşesindeki ‘Stiller’ simgesine tıklamanız gerekiyor.

Bu, ‘Stiller’ sütununu açacaktır; burada ‘Renkler’ paneline tıklamanız gerekir.

Tema arka plan, metin, bağlantı, başlık ve düğme renklerini buradan değiştirebilirsiniz.

İşiniz bittiğinde, ayarlarınızı kaydetmek için ‘Kaydet’ düğmesine tıklayın.

Özel CSS Kullanarak Renkleri Değiştirin

CSS, web sitenizin görsel görünümünü, renkleri dahil olmak üzere değiştirmek için kullanabileceğiniz bir programlama dilidir. Özelleştirmelerinizi tüm sitenize uygulamak için tema ayarlarınızda özel CSS kaydedebilirsiniz.

Ancak, web sitenizde tema değiştirirseniz veya mevcut temanızı güncellerseniz özel CSS kodu artık geçerli olmayacaktır.

Bu nedenle, piyasadaki en iyi WordPress kod parçacığı eklentisi olan WPCode'u kullanmanızı öneririz. Özel CSS kodu eklemenin en kolay yoludur ve WordPress web sitenizdeki renkleri güvenli bir şekilde özelleştirmenize olanak tanır.

Öncelikle WPCode eklentisini yükleyip etkinleştirmeniz gerekecektir. Daha fazla talimat için lütfen WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress yönetici kenar çubuğundan Kod Parçacıkları » + Parçacık Ekle sayfasını ziyaret edin.

Burada, 'Özel Kodunuzu Ekle (Yeni Snippet)' seçeneğinin altındaki 'Snippet Kullan' düğmesine tıklamanız yeterlidir.

'Özel Parçacık Oluştur' sayfasına geldiğinizde, kodunuz için bir isim yazmaya başlayabilirsiniz.

Bundan sonra, açılır menüden ‘Kod Türü’ olarak ‘CSS Kod Parçası’nı seçmeniz yeterlidir.

Bu bölüm için, web sitesindeki metin rengini değiştiren özel CSS kodu ekliyoruz:

p   { color:#990000;  }

Özel CSS kodunu ‘Kod Önizleme’ kutusuna ekleyin.

Bunu yaptıktan sonra, ‘Ekleme’ bölümüne aşağı kaydırın.

Burada, kodun etkinleştirme üzerine otomatik olarak çalışmasını istiyorsanız ‘Otomatik Ekle’ seçeneğini seçebilirsiniz.

Belirli WordPress sayfalarına veya yazılarına kısa kod ekleyebilirsiniz.

İşiniz bittiğinde, sayfanın üstüne geri kaydırın ve ‘Etkin Değil’ anahtarını ‘Etkin’ konumuna getirin.

Son olarak, CSS kodunu web sitenize uygulamak için 'Kod Parçacığını Kaydet' düğmesine tıklamanız gerekir.

SeedProd Kullanarak Renkleri Değiştirin

Renkleri SeedProd eklentisini kullanarak da özelleştirebilirsiniz.

Pazardaki en iyi WordPress sayfa oluşturucusudur ve herhangi bir kod kullanmadan sıfırdan tema oluşturmanıza olanak tanır.

Öncelikle, SeedProd eklentisini yükleyip etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuzu okuyabilirsiniz.

Etkinleştirdikten sonra, WordPress yönetici kenar çubuğundan SeedProd » Tema Oluşturucu sayfasına gidin.

Buradan, üstteki ‘Tema Şablon Kitleri’ düğmesine tıklayın.

Not: Sıfırdan kendi temanızı oluşturmak istiyorsanız, bunun yerine ‘+ Yeni Tema Şablonu Ekle’ düğmesine tıklamanız gerekecektir.

Bu sizi ‘Tema Şablon Kiti Seçici’ sayfasına götürecektir. Burada, SeedProd tarafından sunulan önceden hazırlanmış tema şablonlarından herhangi birini seçebilirsiniz.

Daha fazla bilgi için, kodu kullanmadan kolayca özel bir WordPress teması oluşturma hakkındaki eğitimimize bakın.

Bir tema seçtikten sonra, ‘Tema Şablonları’ sayfasına yönlendirileceksiniz.

Burada, temayı etkinleştirmek için 'SeedProd Tema Etkinleştir' anahtarını 'Evet' olarak değiştirin.

Şimdi, sürükle ve bırak düzenleyicisini açmak için herhangi bir tema sayfasının altındaki 'Tasarıma Düzenle' bağlantısına tıklayın.

Oraya ulaştığınızda, sol sütunun altındaki dişli simgesine tıklayın.

Bu sizi 'Genel CSS' ayarlarına yönlendirecektir.

Buradan web sitenizin arka plan, metin, düğmeler, bağlantılar ve daha fazlasının renklerini özelleştirebilirsiniz.

Seçimlerinizden memnun kaldığınızda, ayarlarınızı kaydetmek için 'Kaydet' düğmesine tıklayın.

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

Tüm WordPress temaları varsayılan bir arka plan rengiyle birlikte gelir. Ancak, web sitenizi kişiselleştirmek ve okunabilirliğini artırmak için bunu kolayca değiştirebilirsiniz.

Bir blok teması kullanıyorsanız, arka plan rengini tam site düzenleyicisini kullanarak değiştirmeniz gerekecektir.

İlk olarak, WordPress kontrol panelinden Görünüm » Düzenleyici ekranını ziyaret etmelisiniz.

Bu, tam site düzenleyicisini başlatacaktır; burada ekranın sağ üst köşesindeki 'Stiller' simgesine tıklamanız gerekir.

Bundan sonra, ek ayarları açmak için ‘Renkler’ paneline tıklamanız yeterlidir.

Bu panelde, web sitenizdeki farklı öğelerin varsayılan rengini yönetebilirsiniz.

Burada, ‘Öğeler’ bölümünün altındaki ‘Arka Plan’ seçeneğine tıklamanız gerekir.

Bu panel genişledikten sonra, web sitenizin arka plan rengini buradan seçebilirsiniz.

Tüm WordPress temaları, seçebileceğiniz çeşitli varsayılan web sitesi renkleri sunar.

Ancak, özel bir renk kullanmak istiyorsanız, Özel Renk aracına tıklamanız gerekir. Bu, Renk Seçici'yi açacak ve oradan istediğiniz rengi seçebilirsiniz.

Web sitenizin arka planı için gradyan renkleri de kullanabilirsiniz.

Bunu yapmak için öncelikle üstteki ‘Gradyan’ sekmesine geçmeniz gerekecektir.

Ardından, temadan varsayılan bir gradyan seçebilir veya Renk Seçici aracının yardımıyla kendi gradyan renklerinizi seçebilirsiniz.

İşiniz bittiğinde, ayarlarınızı kaydetmek için ‘Kaydet’ düğmesine tıklamayı unutmayın.

Web sitenizin arka planını tema özelleştirici, SeedProd ve özel CSS kullanarak da değiştirebilirsiniz.

Daha ayrıntılı talimatlar için, WordPress'te arka plan rengini nasıl değiştireceğinize dair başlangıç kılavuzumuza bakmak isteyebilirsiniz.

WordPress'te Üstbilgi Rengi Nasıl Değiştirilir

Birçok WordPress teması, sayfanın üst kısmında yerleşik bir üst bilgi ile birlikte gelir. Genellikle önemli sayfa bağlantıları, sosyal simgeler, CTA'lar ve daha fazlasını içerir.

Bir blok teması kullanıyorsanız, tam site düzenleyicisini kullanarak WordPress başlığını kolayca özelleştirebilirsiniz.

İlk olarak, tam site düzenleyicisini başlatmak için yönetici kenar çubuğundan Görünüm » Düzenleyici ekranını ziyaret etmeniz gerekir. Oraya ulaştığınızda, seçmek için üstteki 'Başlık' şablonuna çift tıklayın.

Bu, sağdaki blok panelinde başlık ayarlarını açacaktır. Burada, 'Renk' bölümüne aşağı kaydırmanız ve 'Arka Plan' seçeneğine tıklamanız gerekir.

Bu, başlığınız için varsayılan bir renk seçebileceğiniz bir açılır pencere açacaktır.

Renk Seçici aracını açarak özel bir renk de seçebilirsiniz.

Üstbilginizi renk gradyanı kullanarak özelleştirmek için ‘Gradyan’ sekmesine geçmeniz gerekir.

Bundan sonra, varsayılan bir gradyan seçeneği seçebilir veya Renk Seçici'yi kullanarak kendi gradyanınızı özelleştirebilirsiniz.

Son olarak, ayarlarınızı kaydetmek için ‘Kaydet’ düğmesine tıklayın.

Üstbilgi rengini tema özelleştirici veya ek CSS kullanarak değiştirmek istiyorsanız, WordPress üstbilginizi nasıl özelleştireceğinize dair başlangıç kılavuzumuzu okumak isteyebilirsiniz.

WordPress'te Metin Rengini Değiştirme

Metin rengini değiştirmek, WordPress blogunuzun okunabilirliğini artırmaya yardımcı olabilir.

Bir blok teması kullanıyorsanız, metin rengini tam site düzenleyicisini kullanarak değiştirmeniz gerekecektir.

WordPress yönetici alanından Görünüm » Düzenleyici ekranını ziyaret ederek başlayabilirsiniz. Bu, tam site düzenleyicisini başlatacaktır; burada sağ üst köşedeki ‘Stiller’ simgesine tıklamanız gerekir.

Ardından, ek ayarlara erişmek için ‘Renkler’ paneline tıklayın.

Oraya ulaştığınızda, 'Öğeler' bölümünün altındaki 'Metin' seçeneğine tıklayın.

Metin rengi ayarları açıldığında, 'Varsayılan' bölümünün altında bir dizi metin rengi görebileceksiniz.

Alternatif olarak, Özel Renk aracına tıklayıp Renk Seçici'yi açarak özel bir metin rengi de kullanabilirsiniz.

Seçiminizi yaptıktan sonra, değişiklikleri kaydetmek için 'Kaydet' düğmesine tıklamanız yeterlidir.

Ek İpucu: Arka plan ve metin renginizin birbiriyle uyumlu olup olmadığını kontrol etmek için WebAIM Kontrast Denetleyici aracını kullanabilirsiniz. Araç, web sitenizde metin okunabilirliğini artırmanıza yardımcı olabilir.

CSS, tema özelleştirici veya SeedProd kullanarak metin rengini özelleştirmek için, WordPress'te metin renginin nasıl değiştirileceğine dair adım adım kılavuzumuza bakmak isteyebilirsiniz.

WordPress'te Metin Seçim Rengini Değiştirme

Bir ziyaretçi web sitenizde metin seçtiğinde, bir arka plan rengi görünecektir. Varsayılan renk mavidir.

Ancak bazen renk, WordPress temanızla iyi uyum sağlamayabilir ve değiştirmek isteyebilirsiniz.

Tema dosyalarınıza CSS kodu eklemek, metin seçim rengini kolayca değiştirebilir. Ancak, başka bir temaya geçmenin veya mevcut temanızı güncellemenin CSS kodunu kaybetmenize neden olacağını unutmayın.

Bu yüzden piyasadaki en iyi WordPress kod parçacığı eklentisi olan WPCode kullanmanızı öneriyoruz.

Öncelikle, WPCode eklentisini yükleyip etkinleştirmeniz gerekir. Daha fazla talimat için lütfen WordPress eklentisinin nasıl kurulacağına dair rehberimize bakın.

Etkinleştirdikten sonra, yönetici kenar çubuğundan Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.

Ardından, 'Özel Kodunuzu Ekleyin (Yeni Kod Parçası)' seçeneğinin altındaki 'Kod Parçasını Kullan' düğmesine tıklamanız yeterlidir.

'Özel Kod Parçacığı Oluştur' sayfasındayken, kod parçacığınız için bir ad yazarak başlayabilirsiniz.

Ardından, sağdaki açılır menüden ‘Kod Türü’ olarak ‘CSS Snippet’ seçeneğini belirleyin.

Şimdi, aşağıdaki CSS kodunu kopyalayıp 'Kod Önizleme' kutusuna yapıştırın:

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}

CSS parçacığındaki background-color'ın yanındaki onaltılık kodu değiştirerek metin seçimi rengini değiştirebilirsiniz.

Kodu ekledikten sonra, aşağı kaydırarak 'Ekleme' bölümüne gidin.

Burada, kodun etkinleştirme üzerine otomatik olarak çalıştırılması için 'Otomatik Ekle' yöntemini seçin.

Bundan sonra, yukarı kaydırın ve ‘Devre Dışı’ anahtarını ‘Etkin’ olarak değiştirin.

Son olarak, değişikliklerinizi kaydetmek için 'Snippet Kaydet' düğmesine tıklayın.

Şimdi, metin seçim rengini kontrol etmek için web sitenizi ziyaret edebilirsiniz.

Metin seçimi rengini tema özelleştiricisi veya bir eklenti kullanarak da değiştirebilirsiniz. Daha fazla ayrıntı için lütfen WordPress'te varsayılan metin seçimi renginin nasıl değiştirileceği konusundaki eğitimimize bakın: WordPress'te varsayılan metin seçimi rengini değiştirme.

WordPress'te Bağlantı Rengi Nasıl Değiştirilir

WordPress'te bağlantı rengini tam site düzenleyicisini veya özel CSS'yi kullanarak kolayca değiştirebilirsiniz.

Bir blok teması kullanıyorsanız, yönetici kenar çubuğundan Görünüm » Düzenleyici ekranına gidin.

Tam site düzenleyicisini açtıktan sonra, sağ üst köşedeki ‘Stiller’ simgesine tıklayın.

Ardından, ek ayarları görmek için sağ sütundaki 'Renkler' paneline tıklayın.

Oraya ulaştığınızda, ‘Bağlantılar’ sekmesine tıklayın.

Bu, bağlantı rengi ayarlarını başlatacak ve sağ sütunda görüntülenen birden çok varsayılan bağlantı rengi göreceksiniz.

Ancak, Renk Seçici'yi açmak için Özel Renk aracına tıklayarak özel bir bağlantı rengi de kullanabilirsiniz.

FSE'yi kullanarak bağlantıların üzerine gelindiğinde renklerini de değiştirebilirsiniz. Bu, birisi fare imlecini üzerine getirdiğinde bağlantı renginin değişeceği anlamına gelir.

İlk olarak, üst kısımdaki 'Hover' sekmesine geçmeniz gerekecek.

Oradayken, fareyle üzerine gelindiğinde bağlantı rengini değiştirmek için varsayılan veya özel bir renk seçebilirsiniz.

Son olarak, ayarlarınızı kaydetmek için ‘Kaydet’ düğmesine tıklayın.

Daha ayrıntılı talimatlar için, WordPress'te bağlantı renginin nasıl değiştirileceği konusundaki başlangıç rehberimize bakmak isteyebilirsiniz.

WordPress'te Yönetici Renk Şemasını Değiştirme Yöntemi

İsterseniz WordPress'te yönetici renk düzenini de değiştirebilirsiniz. Bu yöntem, yönetici panosunun web sitenizin markasıyla eşleşmesini veya en sevdiğiniz renkleri kullanmak istemeniz durumunda yardımcı olabilir.

Ancak, WordPress kontrol panelinin renk şemasını değiştirmenin web sitenizin görünür kısmını etkilemeyeceğini unutmayın.

Yönetici renk düzenini değiştirmek için WordPress kontrol panelinden Kullanıcılar » Profil sayfasına gidin.

Burada, 'Yönetici Renk Şeması' seçeneğinin yanında birden fazla renk şeması göreceksiniz.

Tercih ettiğinizi seçin ve ardından değişikliklerinizi kaydetmek için sayfanın altındaki ‘Profili Güncelle’ düğmesine tıklayın.

Daha ayrıntılı talimatlar için, WordPress'te yönetici renk şemasını nasıl değiştireceğinize dair başlangıç rehberimize bakın.

Umuyoruz ki bu makale, WordPress web sitenizde renkleri nasıl özelleştireceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, WordPress web siteniz için mükemmel bir renk şeması nasıl seçilir başlıklı makalemizi ve WordPress tasarım öğeleri hakkındaki nihai rehberimizi de incelemek 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.