WordPress'te Kahraman Görseli Nasıl Eklenir (Tüm Temalar İçin Çalışır)

WordPress sitenizin daha profesyonel görünmesini mi istiyorsunuz? Bir kahraman görseli en iyi seçeneğinizdir.

Bir kahraman görseli, insanlar sitenize ilk girdiklerinde gördükleri şeydir. Ve dikkatlerini çekmek için yaklaşık 3 saniyeniz var, bu yüzden doğru yapmak önemlidir.

On yılı aşkın süredir WordPress web siteleri inşa ediyoruz – ve kahraman görsellerinin ilk ne zaman büyük bir şey haline geldiğini hatırlıyoruz.

O zamanlar, herkes gibi biz de mücadele ediyorduk. Görüntüler tuhaf görünüyordu – masaüstünde çok büyük, mobilde sıkıştırılmış veya sadece bozuk. Ama şimdi bunu bilime döktük.

WordPress sitenize bir kahraman görseli eklemenin en kolay yollarını göstereceğiz. Sayfa oluşturucuları kullanmayı sevseniz de blok düzenleyiciyi tercih etseniz de, size yardımcı olacağız.

İlk Olarak: WordPress Kahraman Resminizi Hazırlayın

WordPress web sitenize bir kahraman görseli eklemeden önce, ziyaretçilerinizin dikkatini çekecek bir görsel oluşturmanız gerekir. Harika bir kahraman bölümü, sitenizin ne hakkında olduğunu gösteren çarpıcı bir görselle başlar.

Canva, web sitesi grafikleri tasarlamak için popüler bir araçtır. Kullanımı kolaydır ve kahraman görselinizi oluşturmak için tonlarca şablonla birlikte gelir. Canva'dan hoşlanmıyorsanız, size uygun bir tane bulmak için inceleyebileceğiniz Canva alternatifleri listemiz var.

Kahraman görselinizi oluştururken birkaç şeyi aklınızda bulundurmak isteyeceksiniz.

Öncelikle boyutunu düşünün. Kahraman görüntüleri genellikle çok uzun olmaz ve ön sayfanızın tam genişliğini kaplar.

Yaygın bir WordPress kahraman görüntü boyutu yaklaşık 1920 piksel genişliğinde ve 400-600 piksel yüksekliğindedir (veya bazen daha fazla). Ancak bu, WordPress temanıza bağlı olarak değişebilir.

Ardından, ne mesaj göndermek istediğinizi düşünün. Kahraman görseliniz web sitenizin ne hakkında olduğunu hızlıca göstermelidir. Bir ürün kahraman görseli, markanızı temsil eden bir fotoğraf veya etkileyici bir tam ekran video arka planı olabilir.

Örneğin, ana sayfamızın kahraman görselinde kurucumuz Syed Balkhi'ye yer vermeye karar verdik. Bu, markamızın arkasında WordPress kullanıcılarının başarılı olmasına yardımcı olmaya adanmış gerçek bir kişi olduğunu gösteriyor ki WPBeginner'ın özü de budur.

Ayrıca, metin için biraz boşluk bırakın. Birçok kahraman bölümünde bir başlık veya bir düğme bulunur. Bunlar için yer olduğundan ve kolay okunabildiğinden emin olun.

Kahraman bölümü örnekleri için diğer web sitelerine bakmak iyi bir fikirdir. Bu, kendi tasarımınız için size fikir verebilir. WordPress web sitesi örneklerimizdeki bazı girdiler harika bir ilham kaynağı olabilir.

Bu konu geride kaldığına göre, kahraman görüntüsünü nasıl ekleyeceğimize bakalım.

WordPress Kahraman Görseli Nasıl Eklenir

Bu eğitim için araştırma yaparken, klasik WordPress temalarına bir kahraman görseli eklemenin her zaman kolay olmadığını çabucak fark ettik. Süreç, temanıza bağlı olarak büyük ölçüde değişebilir, çünkü bazıları yerleşik kahraman bölümlerine sahipken bazıları sahip değildir.

Örneğin Sydney temasını ele alalım. Hazır bir kahraman bölümüyle birlikte gelir, bu da işleri çok daha kolaylaştırır.

Mevcut sitenize bir kahraman eklemeye çalışıyorsanız, ancak temanızda bunun için yerleşik bir özellik yoksa, bu sinir bozucu olabilir.

Yeni bir tema seçmekten çekinmeyen ve yeni başlayanlar için, uzun vadede size zaman kazandırabileceği için yerleşik bir kahraman bölümü olan birine geçmenizi öneririz.

Tema önerileri arıyorsanız, piyasadaki en iyi ve en popüler WordPress temaları hakkındaki uzman seçimlerimize göz atabilirsiniz. Daha da iyisi, kahraman bölümü olan bir tema ile bir sayfa oluşturucu kullanabilirsiniz, bunu yöntem 3'te göstereceğiz.

Herhangi bir büyük değişiklik yapmadan önce, yeni temaları iyice test etmek için her zaman bir hazırlık sitesi kullanmanızı öneririz. Bu şekilde, siteniz için doğru seçimi yaptığınızdan emin olabilirsiniz.

Bunu nasıl yapacağınızdan emin değilseniz, bir WordPress temasını doğru bir şekilde nasıl değiştireceğinize dair rehberimize göz atın.

Mevcut klasik temanızdan memnun musunuz? Sorun değil. Bir eklenti kullanarak bir öne çıkan bölüm eklemeyi göstereceğimiz 4. yönteme atlayın. Bu yaklaşım herhangi bir tema ile çalışır, böylece tüm site tasarımınızı altüst etmeden çarpıcı bir öne çıkan görsel oluşturabilirsiniz.

Tercih ettiğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

• Yöntem 1: Tema Özelleştiriciyi Kullanma (Yalnızca Klasik Temalar)
• Method 2: Using Full Site Editor (Block Themes Only)
  • Adım 1: Tam Site Düzenleyicisini Açın
  • Adım 2: Sayfanıza/Şablonunuza Kapak Bloğunu Ekleme
  • Adım 3: Kapak Bloğunuzdaki Resmi Yapılandırın
  • Adım 4: Kapak Bloğunuza Bloklar Ekleyin
• Method 3: Using a Page Builder (Custom Landing Pages/Themes)
  • Adım 1: SeedProd'u Kurun
  • Adım 2: Kahraman Bölümünüzü Özelleştirin
  • Adım 3: Kahraman Bölümünüze Daha Fazla Blok Ekleyin ve Özelleştirin
• Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
  • Adım 1: Öne Çıkan Banner Eklentisini Kurun
  • Adım 2: Temanızın Üstbilgi Bölümünün CSS Seçicisini Bulun
  • Adım 3: Kısa Kodunuzu WPCode'a Ekleyin
• Kahraman Resimleri Hakkında Sıkça Sorulan Sorular

Yöntem 1: Tema Özelleştiriciyi Kullanma (Yalnızca Klasik Temalar)

Sydney gibi bir kahraman bölümü olan klasik bir tema kullanıyorsanız, tema özelleştiricisi aracılığıyla kahraman görüntünüzü özelleştirebilirsiniz. Başlamak için WordPress kontrol panelinizde Görünüm » Özelleştir bölümüne gidin.

💡 Hızlı Not: Tema Özelleştirici kontrol panelinizde eksikse, muhtemelen bir blok teması kullanıyorsunuzdur ve yöntem 2'ye atlamalısınız.

Kenar çubuğunda klasik temanızı özelleştirmek için birkaç seçenek bulunmalıdır.

Sydney'de, kahraman bölümünüzü özelleştirme ayarı ‘Kahraman Alanı’ olarak adlandırılır, ancak bu belirli menü temaya göre değişiklik gösterecektir. Devam edin ve üzerine tıklayın.

Sydney teması, öne çıkan bölümünüzü oluşturmak için 3 menüye sahiptir: Öne Çıkan Türü, Öne Çıkan Kaydırıcı ve Öne Çıkan Medya.

Amacımız için bir kahraman bölümü eklemek yeterli olduğu için yalnızca ilk ikisini kullanacağız.

İlk olarak, ‘Kahraman Türü’nü seçin.

Öne Çıkan Türü'nde, öne çıkan bölümünüze ekleyeceğiniz medya türünü seçmeniz istenecektir.

Tam ekran bir kaydırıcı, bir video, bir resim veya başlık olmaması arasında seçim yapabilirsiniz.

Ana sayfamızda ve tüm web sitemizde kahraman bölümü için tam ekran bir kaydırıcı seçeceğiz. Bunun nedeni, kahraman için birden fazla görsel içeren bir kaydırıcı oluşturmamıza ve görsellerin üzerine metin ve bir düğme eklememize olanak tanımasıdır.

Şimdi, Kahraman Alanı menüsüne geri dönün ve 'Kahraman Kaydırıcısı'nı seçin.

Burada, ‘İlk Slayt’ sekmesini açın ve ‘Görüntü Seç’ düğmesine tıklayın.

Bu, WordPress medya kitaplığınızı açacaktır; buradan kahraman bölümünüz için yeni bir resim yükleyebilir veya mevcut bir resmi seçebilirsiniz.

Bir görüntü yükledikten sonra aşağı kaydırabilir ve başlık ve alt başlık alanlarındaki metni değiştirebilirsiniz.

Yaptığınız değişikliklerin sayfa önizlemesinde otomatik olarak yansıdığını görmelisiniz.

Kahraman bölümüne birden fazla resim eklemek istiyorsanız, geri kalan slaytlarla aynı adımları tekrarlayabilirsiniz.

Aksi takdirde, aşağı kaydırarak 'Kaydırıcı düğmesi' menüsüne gidebilirsiniz.

Burada, eylem çağrısı düğmesinin URL'sini ve metnini değiştirebilirsiniz.

Bundan sonra, tekrar aşağı kaydırarak 'Kaydırıcı ayarları' sekmesine gidin.

Kaydırıcının hızını ayarlayabileceğiniz, tüm slaytlarda aynı metni görüntülemeyi seçebileceğiniz ve kaydırıcının duyarlı davranmasını sağlayabileceğiniz yer burasıdır.

Düğmenin rengini değiştirmek istiyorsanız, Tema Özelleştirici'nin ana menüsüne geri dönün.

Ardından, 'Genel'e tıklayın.

Artık temanızın genel ayarlarını özelleştirmek için birkaç menü görmelisiniz.

Buradan, sadece 'Düğmeler'e tıklayın.

Şimdi, düğmenin durumuna bağlı olarak rengini değiştirebileceğiniz 'Varsayılan Durum' ve 'Üzerine Gelme Durumu' bölümlerine aşağı kaydırabilirsiniz.

Rengi değiştirmek için renk seçici aracına tıklamanız ve yeni bir renk seçmeniz yeterlidir.

Çoğu WordPress teması ayrıca tasarımınızın renklerini ve tipografisini özelleştirmenize olanak tanır. Ancak, yaptığınız değişiklikler genellikle yalnızca kahraman bölümünüz için değil, tüm web siteniz için geçerli olacaktır, bu yüzden bunu aklınızda bulundurun.

Her durumda, Sydney temasıyla yapılmış kahraman görselimiz şöyle görünüyor:

Yöntem 2: Tam Site Düzenleyiciyi Kullanma (Yalnızca Blok Temaları)

Eğer bir blok teması kullanıyorsanız, WordPress'te kolayca bir kahraman görseli oluşturmak için Tam Site Düzenleyicinin Kapak bloğunu kullanabilirsiniz. Eklentiye gerek yok.

Adım 1: Tam Site Düzenleyicisini Açın

İlk olarak, WordPress yönetici panelinizde Görünüm » Düzenleyici 'ye gidin.

Şimdi, düzenleyicinin ana menülerini göreceksiniz.

Diyelim ki kahraman resminizi yalnızca ana sayfanıza eklemek istiyorsunuz.

Bu durumda, sayfanın sağ tarafındaki tema önizlemesine tıklamanız yeterlidir.

Kahraman görüntüsünü başka bir sayfaya, özel bir sayfa şablonuna veya blok desenine eklemek istiyorsanız, daha fazla bilgi için WordPress Tam Site Düzenleme rehberimizi okuyabilirsiniz.

Adım 2: Sayfanıza/Şablonunuza Kapak Bloğunu Ekleme

Kahraman bölümü genellikle katlanma çizgisinin (ziyaretçiler siteye indiğinde görünen sayfanızın üst kısmı) üzerine yerleştirildiği için, doğru konumda olduğunuzdan emin olmanız gerekir. Kahraman bölümü tipik olarak başlığın hemen altındadır.

Bunu yaptıktan sonra, o konumdaki mevcut blokları silmeniz veya mevcut blokların hemen üzerine yeni bir Grup bloğu eklemeniz gerekir.

Durumumuzda, ana sayfamızda zaten bulunan blokları basitçe kaldıracağız. Aynı şeyi yapmak istiyorsanız, sayfanın sol tarafındaki 'Liste Görünümü' düğmesine tıklayabilirsiniz.

Ardından, kahraman bölümünüz için yer açmak üzere silmeniz gereken blokları bulun. Bulduktan sonra, üç noktalı düğmeye tıklayın ve 'Sil'i seçin.

Şimdi, az önce sildiğiniz blok(lar)ın hemen altındaki bloğu seçin.

Ardından, üç noktalı düğmeye tıklayın ve 'Önce ekle'yi seçin. Bu, o bloğun hemen üstüne ve başlık bölümünün altına bir blok ekleyecektir.

Bu aşamada, sözde kahraman bölümünde görünen ‘+’ düğmesine tıklayabilirsiniz.

Buraya Bir Grup bloğu eklemeniz gerekir, çünkü bu, gerektiğinde kahraman görselini, metni, düğmeyi ve diğer öğeleri tek bir blok olarak yönetmenize olanak tanır.

Artık bloklarınızı eklemek için bir kapsayıcı seçebilirsiniz.

Gösterim için temel Grup kapsayıcısını seçtik.

Ardından, Grup bloğunun içindeki ‘+’ düğmesine tıklayın.

Burada, 'Kapak' bloğunu seçin.

Ardından, kahraman arka plan resminizi eklemek için 3 seçeneği göreceksiniz: bilgisayarınızdan yükleme, medya kütüphanenizden ekleme veya öne çıkan görselinizi kullanma.

Örneğimizde, 'Medya Kütüphanesi'ne tıklayacak ve mevcut bir resmi seçeceğiz.

Görüntü yüklemesi başarılı olursa, kahraman görüntünüzü hemen göreceksiniz. Ancak, yapmanız gereken bazı ayarlamalar var.

Adım 3: Kapak Bloğunuzdaki Resmi Yapılandırın

İlk olarak, araç çubuğunun üstte görünmesi için 'Kapak' bloğunu kendisini seçin.

Ardından, 'Hizala' düğmesine tıklayın ve 'Tam Genişlik' seçeneğini seçin.

Ardından, görüntünüze uygulanan duotone filtresini değiştirmek için duotone simgesine tıklayabilirsiniz.

Eğer bunun bir hayranı değilseniz, daha sonra devre dışı bırakabilirsiniz, bunu nasıl yapacağınızı göstereceğiz.

Bundan sonra, metninizin ve düğmenizin resimde nerede görüneceğini değiştirmek için içerik konumu simgesine tıklayabilirsiniz.

Görüntünün odak noktası sağ tarafta olduğu için sol-orta tarafı seçmeye karar verdik.

Şimdi 'Ayarlar' simgesine tıklayın ve 'Blok' sekmesine geçin.

Burada, Ayarlar'a aşağı kaydırın. Burası, resminize isteğe bağlı olarak bir paralaks efekti ekleyebileceğiniz ('Sabit arka plan') veya tekrarlanan bir arka plan kullanabileceğiniz yerdir.

Yukarı kaydırıp stiller simgesine de geçebilirsiniz.

Burası, görselinizin herhangi bir filtre kullanmaması için katman opaklığını 0 olarak ayarlayabileceğiniz yerdir.

Resmin yüksekliğini değiştirmek isterseniz, 'Kapak Minimum Yüksekliği' alanına piksel cinsinden bir sayı girebilirsiniz.

Görüntümüzü 400 piksel olarak ayarlamaya karar verdik.

Kenarlık ve gölge, blok aralığı, dolgu ve kenar boşluğu, tipografi ve benzeri diğer ayarları da özgürce özelleştirebilirsiniz.

Adım 4: Kapak Bloğunuza Bloklar Ekleyin

Kahraman görüntünüze daha fazla öğe eklemeye hazırız. Görüntünün üzerinde ‘Başlık yaz’ metnini görmelisiniz.

İşte profesyonel bir ipucu: Doğrudan bir başlık eklemek yerine, ‘+’ düğmesine tıklayın ve önce başka bir Grup bloğu ekleyin. Bu Grup bloğunu metniniz ve düğmeniz için bir kapsayıcı olarak düşünün.

Bunları bir kapsayıcı içine yerleştirmek, hizalamalarını ve stillerini tek bir birim olarak kontrol etmeyi çok daha kolaylaştırır.

Ardından, önceki adımda olduğu gibi istediğiniz kapsayıcıyı seçin.

Bunu yaptıktan sonra, bir Başlık bloğu eklemek için tekrar '+' düğmesine tıklayabilirsiniz.

Şimdi sayfanızın başlığını ekleyebilirsiniz.

İsterseniz blok ayarları kenar çubuğunda metin rengini, boyutunu ve ölçülerini değiştirmekten çekinmeyin.

Bunu yaptıktan sonra 'Enter' tuşuna basabilirsiniz.

Bu aşamada, başlığın hemen altına bir alt başlık eklemekten çekinmeyin.

Son olarak, kahraman görüntünüze bir harekete geçirici mesaj düğmesi ekleyebilirsiniz.

Bunu yapmak için tekrar 'Enter' tuşuna basın, '+' düğmesine tıklayın ve 'Düğmeler' bloğunu seçin.

Sonra, sadece düğme metnini ekleyin.

Ve düğmeye bir bağlantı eklemek için, araç çubuğundaki bağlantı simgesine tıklayın ve uygun alana URL'nizi girin.

Ardından, ok düğmesine tıklayın.

Yüksek dönüşüm sağlayan düğmeler oluşturmak için ipuçları ve püf noktalarına ihtiyacınız varsa, eylem çağrısı en iyi uygulamaları hakkındaki rehberimize göz atabilirsiniz.

Ve hepsi bu kadar. Kahraman görselinize daha fazla öğe ekleyebilir veya tercihlerinize göre özelleştirebilirsiniz.

Kahraman bölümünün görünümünden memnun kaldığınızda, 'Kaydet'e tıklamanız yeterlidir.

Kapak bloğumuz şöyle görünüyor:

Yöntem 3: Sayfa Oluşturucu Kullanma (Özel Açılış Sayfaları/Temalar)

Web sitenizi kurmanın başlangıç aşamalarında olduğunuzu varsayalım. Veya temanızın sınırlamalarıyla kısıtlanmadan özel bir açılış sayfası oluşturmak istiyorsunuz. Bu durumda, SeedProd gibi kahraman bölümleri olan şablonlarla gelen bir sayfa oluşturucu kullanmanızı öneririz.

SeedProd, WPBeginner ve Duplicator ve OptinMonster dahil olmak üzere diğer marka sitelerimiz için özel sayfalar oluşturmak üzere sıkça kullandığımız sürükle ve bırak sayfa oluşturucudur.

Kullanımı kolay olmasının yanı sıra, Tema Özelleştirici, Tam Site Düzenleyici ve Gutenberg'in varsayılan olarak sahip olmadığı birçok yerleşik WordPress düzenleme özellikleri de sunar.

Bu nedenle, temalarımıza veya açılış sayfalarımıza özel özellikler eklemek için üçüncü taraf eklentiler kurmaktan tasarruf edebildik.

SeedProd ücretsiz ve ücretli sürümlerle gelir. Özel bir açılış sayfası oluşturmak için kesinlikle ücretsiz sürümü kullanabilirsiniz, ancak şablon ve blok seçenekleri oldukça sınırlıdır. Bu nedenle, yapay zeka içerik oluşturucu dahil olmak üzere daha fazla özellik için ücretli bir plana yükseltmenizi öneririz.

Daha fazla bilgi için, SeedProd incelememize ve popüler sayfa oluşturucular olan Elementor vs. Divi vs. SeedProd karşılaştırmamıza göz atın.

Adım 1: SeedProd'u Kurun

SeedProd'u kullanmak için, SeedProd hesabınızda bulunan WordPress eklentisini yönetici alanınıza kurmanız gerekir. Eklenti etkinleştirildikten sonra, SeedProd hesap sayfanızdan alabileceğiniz lisans anahtarınızı girmeniz istenecektir.

Girdikten sonra 'Anahtarı Doğrula' düğmesine tıklamanız yeterlidir.

SeedProd ile 2 seçeneğiniz var: bir açılış sayfasına veya özel bir temanın içindeki belirli sayfalara bir kahraman bölümü ekleyebilirsiniz.

Açılış sayfanızı veya temanızı kurmak için bu kılavuzları okuyabilirsiniz:

• Kod Kullanmadan Özel WordPress Teması Nasıl Oluşturulur
• WordPress'te Bir Açılış Sayfası Nasıl Oluşturulur
• Dönüşüm Sağlayan Bir WordPress Sıkıştırma Sayfası Nasıl Oluşturulur
• WordPress'te Güzel Yakında Sayfaları Oluşturma

Öğreticinin geri kalanı için Menü Satış şablonunu kullanacağız.

Adım 2: Kahraman Bölümünüzü Özelleştirin

Tema veya açılış sayfanız için bir şablon seçtikten sonra SeedProd düzenleyicisine yönlendirileceksiniz.

SeedProd düzenleme arayüzü, sağ tarafta bir sayfa önizlemesi ve daha fazla blok ekleyebileceğiniz, bir bloğu/bölümü özelleştirebileceğiniz, değişiklikleri geri alabileceğiniz/yineleyebileceğiniz, sayfanızın katmanlarını görüntüleyebileceğiniz ve sitenizi mobil veya tablet cihazlarda önizleyebileceğiniz sol bir kenar çubuğundan oluşur.

SeedProd teması zaten bir kahraman bölümü içerdiğinden, işimizin yarısı zaten tamamlanmış demektir. Yapmamız gereken tek şey resmi değiştirmek, özelleştirmek ve gerekirse kahraman bölümüne daha fazla blok eklemektir.

Alternatif olarak, sol taraftaki Bloklar kenar çubuğundan Bölümler kenar çubuğuna geçerek daha fazla kahraman bölüm tasarımı bulabilirsiniz. Ardından, ‘Kahraman’a gidin ve sayfanıza eklemek istediğiniz kahraman bölüm şablonundaki ‘+’ düğmesine tıklayın.

SeedProd daha sonra bunu sayfanıza ekleyecektir.

Önce kahraman görselini değiştirelim.

Bunu yapmak için, kahraman görselini içeren en üstteki bölüme tıklayın. Sol kenar çubuğunda mor bir 'Düzenleme: Bölüm' kutusu göründüğünde doğru şeyi seçtiğinizi anlayacaksınız.

Şimdi kenar çubuğundaki arka plan görüntüsünün üzerine gelin.

Ardından, 'Medya Simgesine' tıklayın. Sonrasında, bilgisayarınızdan veya medya kütüphanesinden kahraman görselinizi yükleyebilirsiniz.

Ardından, görüntünüz için en iyi çalışan arka plan konumunu seçmeniz gerekir.

Odak noktalarının konumlandırılması üzerinde en iyi kontrolü sağlayan 'Özel Konum' seçeneğini buluyoruz, bu yüzden bu seçeneği seçeceğiz.

Özel Konum seçeneği, arka planı yapılandırmak için size çeşitli yollar sunar.

X ve Y konumları için, görüntünün dikey ve yatay olarak nasıl konumlandırıldığını değiştirebilirsiniz.

Ek ayarının 2 seçeneği vardır: Kaydırma (paralaks olmayan) ve Sabit (paralaks).

Görüntünüz kahraman bölümünden küçükse ancak tüm bölümün görüntüyle doldurulmasını istiyorsanız, görüntüyü o bölüm boyunca tekrarlayabilirsiniz. Aksi takdirde, yalnızca ‘Tekrarlama’ seçeneğini belirleyin.

WordPress kahraman görsel boyutu söz konusu olduğunda, görselin kahraman bölümüne otomatik olarak ayarlanmasını istiyorsanız 'Otomatik' seçeneğini tercih edebilirsiniz.

Resminiz için en iyi sonucu neyin verdiğini görmek üzere bu ayarları dilediğiniz gibi değiştirebilirsiniz.

Yapabileceğiniz bir diğer şey de metninizin daha iyi öne çıkması için arka plan görüntüsünü karartmaktır.

Bunu yapmak için, ‘Arka Planı Soluklaştır’ kaydırıcısını istediğiniz opaklık seviyesine sürükleyebilirsiniz.

Üstteki arka plan rengini değiştirmek istiyorsanız, 'Kaplama Rengi' renk seçici düğmesine tıklamanız yeterlidir.

Ardından, tercih ettiğiniz rengi seçin.

Şimdi yukarı kaydırıp 'Gelişmiş' ayarlarına geçelim. Kahraman bölümünüze her türlü harika efekti ekleyebileceğiniz yer burasıdır.

Örneğin, 'Parçacık Arka Planı' sekmesini açabilir ve görüntünüze hareketli bir parçacık arka planı ekleyebilirsiniz. Bu, kahraman bölümünüzü çok daha etkileyici ve benzersiz hale getirebilir.

Son olarak, ‘Şekil Ayırıcı’ menüsüne giderek kahraman bölümünüzün üst ve/veya alt tarafına özel bir şekil ayırıcı ekleyebilirsiniz.

Bunu yapmak, ana bölümünüze daha fazla görsel ilgi katabilir. Ayrıca, alta eğlenceli bir şekil ayırıcı eklerseniz, kullanıcıları açılış sayfanızda aşağı kaydırmaya ve teklifiniz hakkında daha fazla bilgi edinmeye teşvik edebilirsiniz.

Adım 3: Kahraman Bölümünüze Daha Fazla Blok Ekleyin ve Özelleştirin

Kahraman görüntünüz hazır olduğunda, kahraman bölümüne daha fazla blok ekleyelim.

Bizim başlık bloğumuz zaten olduğu için, üzerine tıklayıp özelleştireceğiz. Seçildiğinde, sol kenar çubuğunda 'Düzenleniyor: Başlık' yazan turuncu bir başlık olduğunu görmelisiniz.

SeedProd'un harika yanı, yerleşik bir yapay zeka içerik oluşturucusuna sahip olmasıdır.

Bu nedenle, hangi başlığı kullanacağınızdan emin değilseniz, bazı fikirler bulmak için 'Yapay Zeka ile Düzenle' düğmesine tıklayabilirsiniz.

Şimdi, yapay zeka ile içeriğinizi yazabileceğiniz bir açılır pencere görmelisiniz.

Tamamen yeni bir başlık oluşturmak istiyoruz, bu yüzden bunu yapmak için ‘Yeni İstem’ düğmesine tıklayacağız.

Ardından, yapay zekaya ne tür bir içerik istediğini söyleyin.

Ardından, 'Metin Oluştur' düğmesine tıklayın.

Yapay zeka daha sonra içeriği sizin için oluşturacaktır.

Ancak tonunu değiştirerek, dili basitleştirerek, metni daha uzun veya daha kısa yaparak ve hatta 50'den fazla dile çevirerek hala değiştirebilirsiniz.

Başlığın nasıl göründüğünden memnun kaldığınızda, 'Ekle'ye tıklamanız yeterlidir.

Şimdi sol kenar çubuğunda aşağı kaydırabilirsiniz.

Metnin hizalamasını, yazı tipi boyutunu ve başlık etiketini tercihlerinize uyacak şekilde değiştirebileceğiniz yer burasıdır.

Metnin daha da öne çıkmasını istiyorsanız, yukarı kaydırıp ‘Gelişmiş’ sekmesine geçebilirsiniz.

Stiller menüsünde, Tipografi ayarlarında 'Düzenle'ye tıklayın. Burada, yazı tipi ailesini, satır yüksekliğini, harf aralığını ve metnin harf durumunu değiştirmekte özgürsünüz.

Başlığa metin gölgesi eklemek için biraz daha aşağı inebilirsiniz.

Burada, metnin daha da öne çıkmasını sağlamak için özel renkli bir gölge oluşturmaya karar verdik.

Başlığın altına bir alt başlık eklemek için sol kenar çubuğundaki 'Bloklar' düğmesine tıklayabilirsiniz.

Bu sizi bloklar kitaplığına getirecektir.

Şimdi, 'Metin' bloğunu başlığın hemen altına sürükleyip bırakın.

Metin bloğu için ayarlar Başlık bloğuna oldukça benzer, bu nedenle alt başlığı oluşturmak için önceki adımları tekrarlayabilirsiniz.

Bir eylem çağrısı düğmesi eklemek için, 'Düğme' bloğunu sayfaya sürükleyip bırakmanız gerekir.

Genellikle alt başlığın hemen altına yerleştirilir.

Bu yapıldıktan sonra, düğme metninizi uygun alana girin.

Daha fazla bağlam için ana düğme metninin hemen altına bir alt metin de ekleyebilirsiniz.

Ardından aşağı kaydırın ve düğmenize bir bağlantı ekleyin.

Düğmenin hizalamasını ve boyutunu da değiştirmekten çekinmeyin.

Şimdi kenar çubuğunda yukarı doğru geri dönün ve 'Şablonlar' sekmesine geçin.

Düğme stilinizi WordPress tasarımınızla daha iyi eşleşecek şekilde değiştirebileceğiniz yer burasıdır.

Varsayılan şablon tasarımlarını beğenmezseniz, 'Gelişmiş' sekmesine geçin.

Burada, düğmenin tipografisini, stilini, rengini, dolgusunu, gölge efektini vb. değiştirebilirsiniz.

Şablonunuz iyi görünene kadar özelleştirmeye devam etmekten çekinmeyin.

Memnun kaldığınızda, üstteki ‘Kaydet’ düğmesine tıklayın ve sayfayı yayına almak için ‘Yayınla’yı seçin.

Ve bir sayfa oluşturucu ile bir kahraman resmi eklemek için hepsi bu kadar.

Demo sitemizdeki kahraman bölümü şu şekilde görünüyor:

Yöntem 4: Kahraman Banner Eklentisi + Kısa Kod Kullanımı (Tüm Temalar)

Bu son yöntem teknik olarak tüm temalarla çalışır, ancak bunu en çok yerleşik bir kahraman bölümü olmayan klasik bir tema kullanan kişilere öneririz.

Bu yöntemi izlemek için Hero Banner Ultimate eklentisini yüklemeniz gerekecektir. Adım adım talimatlar için, yeni başlayanlar için WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza göz atabilirsiniz.

Adım 1: Öne Çıkan Banner Eklentisini Kurun

Eklenti etkinleştirildikten sonra, Hero Banner » Add Hero Banner bölümüne gidin.

Bundan sonra, kahraman banner'ınıza bir başlık verin. Bu, başlığınız olarak işlev görecektir.

İşiniz bittiğinde, alt başlığınız olarak işlev görecek metni görsel klasik düzenleyiciye ekleyin. Biçimlendirmeyi ve rengi buradan değiştirmekten çekinmeyin.

Şimdi, 'Kahraman Banner – Ayarlar' bölümüne aşağı kaydırın.

Burada bir başlık düzeni seçebilirsiniz. Eklenti ayarları içinde düzeni gerçek zamanlı olarak önizleyemeseniz de, en çok beğendiğinizi bulmak için daha sonra gerçek sayfanızda bunlar arasında geçiş yapmak kolaydır.

Eğitimimiz için Düzen 1'i seçeceğiz.

Banner Türü olarak, bir kahraman görseli için 'Arka Plan Görüntüsü' seçebilir, ancak kahraman olarak kullanabileceğiniz tam genişlikte bir videonuz varsa 'Arka Plan Videosu'nu da seçebilirsiniz.

Ardından, bilgisayarınızdan veya medya kütüphanesinden görselinizi eklemek için 'Görsel Yükle'ye tıklamayı unutmayın.

Bu aşamada, arka plan görüntüsü boyutunu 'Kapak' olarak ayarlayabilirsiniz, böylece görüntü tam genişlikte olur.

Ayrıca, herhangi bir paralaks efektini devre dışı bırakmak için arka plan görüntüsü eklemesi için ‘Kaydır’ seçeneğini de seçmek isteyeceksiniz.

Banner Renk Ayarı'na ulaşana kadar aşağı inin.

Burası, başlığın rengini (Başlık Rengi) ve alt başlığın rengini (İçerik Rengi) değiştirebileceğiniz yerdir. Bunu yapmak için renk seçici araca tıklamanız yeterlidir.

Ek olarak, metnin okunabilirliğini görüntüye karşı ayarlamaya yardımcı olabilecek bir görüntü üzerine bir kaplama rengi eklemek isteyebilirsiniz.

Siyah rengi seçtik, opaklığı 0.5.

Eylem çağrısı (call-to-action) ayarlarını yapılandıralım.

Buraya, düğmeniz için metni ve bağlantıyı ekleyebilirsiniz. 'Düğme – 1 Sınıfı' bölümünden rengi de değiştirebilirsiniz.

Sonra yapmanız gereken tek şey yukarı kaydırmak.

Bundan sonra, ‘Yayınla’ya tıklayın.

Şimdi Hero Banner » Hero Banner bölümüne gidelim. Kahraman resminizin oluşturulduğunu ve eklentinin onu görüntülemeniz için bir kısa kod oluşturduğunu görmelisiniz.

Bu kısa kodu daha sonra ihtiyacımız olacağı için not alın.

Adım 2: Temanızın Başlık Bölümünün CSS Seçicisini Bulun

Ana görseli görüntülemek için temanızın başlık bölümü için belirli bir 'adres' bulmamız gerekiyor.

Buna CSS seçici denir ve eklentimize kahraman resminin nereye yerleştirileceğini tam olarak söyler. Endişelenmeyin, kendi kodunuzu yazmanıza gerek kalmayacak.

Bunu yapmak için web sitenizi ön uçta ziyaret edin. Ardından, üstbilgi bölümünüze sağ tıklayın ve ‘İncele’yi seçin.

Sağ tarafta, başlık bölümünün hangi CSS seçicisini kullandığını bulmanız gerekir. İmlecinizi bu kod parçacıklarının üzerine getirdiğinizde, başlık bölümünün ön uçta vurgulandığını göreceksiniz.

İşte bir örnek:

Kodun üzerine geldiğinizde tüm başlık bölümü vurgulanıyorsa, doğru yoldasınız.

Şimdi, o kod parçacığına sağ tıklayın ve Kopyala » Seçiciyi kopyala'yı seçin.

Bunu yaptıktan sonra, seçiciyi metin düzenleyici gibi güvenli bir yere yapıştırabilir veya bu sekmeyi açık tutabilirsiniz.

Adım 3: Kısa Kodunuzu WPCode'a Ekleyin

Bir sonraki adım, kod parçacığı eklentisi olan WPCode'u yüklemektir.

Teknik olarak, özel kod parçacıklarını tema dosyalarınıza eklemek için bir eklenti kullanmanız gerekmez. Ancak, bunu güvenli tutmak istedik, çünkü bir tema dosyasına kod yapıştırmak bazı beklenmedik hatalara neden olabilir.

WPCode'un özel kod parçacıklarını sitenizi bozmadan yönetmek için süper yardımcı olduğunu gördük.

İlk olarak, WordPress eklentisini yönetici alanınıza kurun. Eklenti etkinleştirildikten sonra, Kod Parçacıkları » + Parçacık Ekle bölümüne gidin, 'Özel Kodunuzu Ekle (Yeni Parçacık)' seçeneğini belirleyin ve '+ Özel Parçacık Ekle' düğmesine tıklayın.

Şimdi, yeni kod parçacığınıza bir ad verelim. 'Kahraman Banner Kısa Kodu' gibi basit bir şey olabilir.

Bundan sonra, Kod Türünü 'PHP Snippet' olarak değiştirin.

Kod Önizleme kutusuna aşağıdaki kod parçasını yapıştırın:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

[hbupro_banner id="XXX"] kısmını daha önce gördüğünüz Hero Banner kısa kodunuzla değiştirdiğinizden emin olun.

Ardından, 'Ekleme' bölümüne aşağı kaydırın.

Burada, Ekleme Yöntemi ‘Otomatik Ekle’ ve Konum ‘HTML Öğesinden Sonra’ olmalıdır.

Ardından, daha önce kopyaladığınız seçiciyi 'CSS Seçici' alanına yapıştırın. Bizim durumumuzda, bu #masthead idi, ancak bu temaya göre değişiklik gösterecektir.

Bu işlem bittikten sonra, ‘Devre Dışı’ düğmesini ‘Etkin’ olacak şekilde değiştirebilir ve ‘Kod Parçasını Kaydet’ düğmesine tıklayabilirsiniz.

Ve hepsi bu!

Web sitenizi görüntülerseniz, şimdi Hero Banner görüntüsünü başlığınızın hemen altında görmelisiniz:

Kahraman Resimleri Hakkında Sıkça Sorulan Sorular

Okuyucularımızın kahraman görselleri hakkında sıkça sorduğu bazı yaygın soruların bir listesi:

WordPress ana görseli için en iyi boyut nedir?

Kahraman görseli boyutu için harika bir başlangıç noktası 1920 piksel genişlik ve 400 ila 600 piksel yüksekliktir. Bu, dikey alandan çok fazla yer kaplamadan çoğu masaüstü ekranında keskin görünmesini sağlar.

Ancak, mükemmel boyut genellikle belirli WordPress temanıza bağlıdır. Görselinizin hem masaüstü hem de mobil cihazlarda nasıl göründüğünü test etmenizi her zaman öneririz.

Kahraman bölümümde video kullanabilir miyim?

Kesinlikle. Video arka planı kullanmak web sitenizin daha dinamik hissetmesini sağlayabilir ve ziyaretçilerin dikkatini hemen çekebilir. SeedProd gibi çoğu sayfa oluşturucu ve varsayılan WordPress Kapak bloğu, statik bir resim yerine video arka planı eklemek için basit seçenekler içerir.

Kahraman görselimi mobil uyumlu hale nasıl getiririm?

Modern temalar ve sayfa oluşturucular duyarlı olacak şekilde tasarlanmıştır, bu nedenle kahraman görüntünüzü daha küçük ekranlar için otomatik olarak ölçeklendireceklerdir. Önemli olan, kırpıldığında hala iyi görünen bir görüntü seçmektir.

Yüklemeden önce resminizi sıkıştırmanız da çok önemlidir. Bu, daha yavaş mobil bağlantılara sahip ziyaretçiler için hızlı yüklenmesini sağlar.

Kahraman görseli kaydırıcı ile aynı mı?

Bunlar benzer ancak tam olarak aynı değiller. Bir kahraman görseli tipik olarak bir web sayfasının en üstündeki tek, büyük bir banner görselidir. Öte yandan, bir kaydırıcı birden çok görsel veya video arasında döner. Klasik temalar için gösterdiğimiz gibi, kahraman bölümünüzde bir kaydırıcı kullanabilirsiniz.

Umarım bu makale, WordPress'e nasıl bir kahraman resmi ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress'e nasıl bir ön yükleyici animasyonu ekleyeceğiniz ve dijital ürünler oluşturma ve satma konusunda uzman seçimlerimizin rehberimize de 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.