Karmaşık tasarım değişiklikleri için saatler harcamadan WordPress web sitenize yepyeni bir görünüm kazandırmak ister misiniz?
2008’den beri WordPress web siteleri oluşturuyoruz. Sitenizin arka plan rengini değiştirmenin web sitenizin görünümünü dönüştürmenin en hızlı yollarından biri olduğunu size kesin olarak söyleyebiliriz.
Bununla birlikte, mevcut tüm farklı WordPress temaları ve editörleri ile doğru yöntemi bulmak yeni başlayanlar için bunaltıcı olabilir.
Bu takip etmesi kolay kılavuzda, hangi temayı veya sayfa oluşturucuyu kullanıyor olursanız olun WordPress arka plan renginizi tam olarak nasıl değiştireceğinizi göstereceğiz.
WordPress Arka Plan Renginiz Neden Gerçekten Önemlidir 🎨
Web sitenizin arka plan rengini dijital evinizin duvarları olarak düşünün. WordPress temanız varsayılan bir renkle gelse de, doğru arka planı seçmek sitenizin ziyaretçilere ne kadar sıcak geldiği konusunda büyük bir fark yaratabilir.
İşte bu WordPress tasarım öğesinin neden bu kadar önemli olduğu:
- İçeriğinizin daha kolay okunmasını sağlarlar
- Önemli bilgilerin öne çıkmasına yardımcı olurlar
- Web sitenizin havasını belirlerler
- Sitenizin daha profesyonel görünmesini sağlayabilirler
Doğru arka plan rengi, önemli düğmelerinizi vurgulamanıza ve dönüşümlerinizi artırmanıza yardımcı olabilir. Farklı blog kategorileri veya özel duyurular için belirli renkler kullanmak gibi, içeriğinizi daha iyi organize etmek için farklı renkler de kullanabilirsiniz.
Sitenizi daha da ilgi çekici hale getirmek istiyorsanız, 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. Size arka plan rengini özelleştirmenin farklı yollarını göstereceğiz, böylece tercih ettiğiniz bölüme geçebilirsiniz:
- How to Change Background Color in WordPress Theme Customizer
- How to Change Background Color in Full Site Editor (2024 Method)
- How to Change Background Color in WordPress With CSS
- How to Randomly Change Background Colors in WordPress
- How to Change Background Color for Individual Posts
- Bonus Tip: Use a Page Builder for More Design Control
WordPress Tema Özelleştiricisinde 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 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 Editöründe Arka Plan Rengi Nasıl Değiştirilir (2024 Yöntem)
Tam site editörü (FSE), blok temaları düzenlemek için kullanılan bir WordPress düzenleme platformudur. Bu düzenleyici, sitenizin arka plan rengini değiştirmeyi çok kolaylaştırır. Gelin süreci birlikte gözden geçirelim.
WordPress panonuzdaki Görünüm ” Düzenleyici bölümüne giderek başlayın.
Şimdi, menü seçeneklerinden birinde bir ‘Stiller’ düğmesi 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 götürecektir.
Şimdi, ekranınızın sağ tarafında kullanışlı bir panel göreceksiniz. Burası renkleri, yazı tiplerini ve daha fazlasını değiştirebileceğiniz tasarım kontrol merkezinizdir.
Arka plan renginizi değiştirmek için Stiller panelinde ‘Renkler’e tıklamanız yeterlidir.
Ardından, ‘Arka Plan’a tıklayın.
Artık düz bir renk seçebilir veya bir degrade oluşturabilirsiniz. Tarzınıza uygun olanı seçmekten çekinmeyin. Seçiminizden memnun olduğunuzda ‘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:
1 2 3 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 | 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:
1 2 3 4 | 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 Rengi Nasıl Değiştirilir
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:
1 | <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.
1 2 3 4 | .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.
Bonus İpucu: Daha Fazla Tasarım Kontrolü için Sayfa Oluşturucu Kullanın
Arka plan renklerini değiştirmek sadece bir başlangıç. Web sitenizin tasarımı üzerinde tam kontrol sahibi olmak istiyorsanız, bir sayfa oluşturucu çok daha fazla olasılığın önünü açabilir.
WordPress için en popüler sayfa oluşturucu olan SeedProd‘u kullanmayı seviyoruz çünkü size izin veriyor:
- Kodlama yapmadan herhangi bir sayfa tasarlayın
- Renkleri, düzenleri ve boşlukları özelleştirin
- Dakikalar içinde profesyonel görünümlü sayfalar oluşturun
- Sayfalarınızın tüm cihazlarda harika görünmesini sağlayın
Başlamak çok kolay – basit WordPress eklenti kurulum kılavuzumuzu kullanarak SeedProd’u kurun ve etkinleştirin.
Not: Ücretsiz sürümle başlayabilirsiniz, ancak SeedProd Pro, ihtiyaç duymanız halinde daha fazla şablona ve tasarım seçeneğine erişmenizi sağlar.
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.
Video Eğitimi
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.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.