Hero Image Design İpuçları ve Divi Boyunca Nasıl Kullanılır

Bugünün eğitiminde, iyi bir kahraman görüntüsü/bölümü tasarlama konusunda bazı ipuçlarını paylaşacağız. Paylaşılacak ipuçları, kendi web siteniz veya bir müşterinin web sitesi için etkili kahraman bölümleri oluşturmanıza yardımcı olabilir.

Genel olarak, bir kahraman imajını şekillendirmenin birçok farklı yolu vardır ve onu şekillendirme şekliniz genellikle web sitesinin ne hakkında olduğuna bağlıdır. Bu nedenle, her tür web sitesi için geçerli olan ve herkesin bilmesi gereken bazı genel tasarım ipuçlarını ele alacağız.

Farklı ipuçlarına göz attıktan sonra, ipuçlarına uygun bir örnek kahraman bölümü de paylaşacağız ve bu örneği web sitesi oluşturucunuz olarak Divi ile nasıl yeniden oluşturacağınızı göstereceğiz.

Size adım adım nasıl yapılacağını göstereceğimiz örnek şuna benzer:

Doğru Resmi Seçmek

Bir web sitesi ve özellikle bir kahraman imajı tasarlarken, her şey temellere geri dönmekle ilgilidir. İnsanların web sitenizi ziyaret ederken ilk görecekleri ve deneyimleyecekleri yerin kahraman bölümünün olacağını göz önünde bulundurmalısınız. Davranışlarını etkileyecek ve web sitenize hangi duyguları bağladıklarını belirleyecektir.

alaka düzeyi

Başlamak için, web sitenizin konusuna uygun bir resim bulun. Web sitenizde görecekleri ve web sitenizi ilişkilendirecekleri ilk şey budur.

Alaka düzeyini bulmak için kendinize iki soru sorun:

• Ürünüm/hizmetim/web sitem hangi temel katma değeri sunuyor?
• Bu katma değeri nasıl bir imaj yansıtıyor?

Her zaman ziyaretçilerinizin görmek istediklerine ve resmin tamamını ne kadar kolay anlayabileceklerine bağlıdır. İnsanlar her şeyi görselleştirme eğilimindedir; hatta bir şirket veya işletme. Bu nedenle, kalışlarının başından itibaren onlara ilgili bir kahraman imajı veren kişi siz olmalısınız.

En yaygın kahraman görüntü stillerinden bazıları, kendilerini aşağıdaki şeylerden birine (veya daha fazlasına) dayandırır:

• Ürün (bir ürünü resim olarak sergilemek)
• Bağlam (sağlanan içerikle birlikte bir hikaye anlatan bir resim sergiliyor)
• Duygu (gülümseyen insanlar gibi duygusal tetikleyicileri kullanarak)
• Eylem (web sitenizin neyle ilgili olduğuyla bağlantılı belirli bir eylemi ifade eden bir resim kullanarak)

Bu odaklardan birini seçin ve mesajı mümkün olan en iyi ve en yaratıcı şekilde anlatmaya çalışın. Yeterince alakalı ücretsiz görseller bulup bulamadığınıza bakın ve değilse, stok fotoğraf satın alın veya kendinizinkini yapmayı deneyin.

Kahraman imajınız şirketle ne kadar ilgiliyse o kadar iyidir. Bu nedenle, kendi resimlerinizi profesyonel bir şekilde yapmak, genellikle yapılması en çok tavsiye edilen şeydir. Ancak kaynakların yetersiz olduğu durumlarda stok görseller veya ücretsiz görseller de yeterli olabilir.

Yüksek kalite

Kahraman imajınız için doğru seçimi yapmanızda gerçekten önemli olan bir diğer faktör de kalitedir. Kendinden açık, ancak kaç web sitesinin buna uymadığını görünce şaşıracaksınız.

Mümkün olduğunca profesyonel görünmesini istiyorsunuz çünkü bu kalitenin web sitenizde temsil ettiğiniz hizmetler veya ürünlerle ilişkilendirilmesini istiyorsunuz.

Divi'de görüntüleri kullanmayla ilgili nihai kılavuzumuzda belirtildiği gibi, minimum 1920 piksel genişliğinde bir görüntü kullanmanızı öneririz.

Tam Ekran Modunu Düşünün

Tam ekran modunda olan bir kahraman bölümünde kahraman görüntüsünün kullanılması da sıklıkla kullanılmaktadır. Kahraman bölümünüzü tam ekran yaparak, izleyicilerinizle daha derin bir düzeyde etkileşim kurma fırsatına sahip olursunuz. Kahraman bölümünde sağlananlara daha fazla odaklanıyorsunuz, bu yüzden buna gerçekten değmeli.

Tam ekran bir kahraman bölümü yapmayı düşünüyorsanız, web sitenizin en çok etkileşim aldığınız bölümü olacağından, bunun web sitenizin en iyi parçası olduğundan emin olun. Onlarla ziyaretlerinin erken bir aşamasında etkileşim kurarak, web sitesinin geri kalanında onlarla etkileşim kurma şansınızı artırırsınız. Aynı şekilde, tam ekran bir kahraman bölümü buna değmezse, insanları web sitenizde kalmaya devam etmekten vazgeçirebilir.

Merkezlemek veya Merkezlememek

Çoğu insan simetrinin göze çok çekici geldiği konusunda hemfikir olabilir. Yine de internette o kadar çok görüyoruz ki artık özel olduğunu düşünmeyebiliriz. Merkezlemediğiniz zamanlarda bile çok güzel şeyler yapabilirsiniz.

Ancak, risk almak istemiyorsanız, kahraman görüntüsünü simetrik yapmak da dahil olmak üzere kahraman bölümünüz için oluşturduğunuz tüm içeriğin merkezine her zaman geri dönebilirsiniz.

Kontrast Yarat

Kahraman görseli genellikle üç şey içerir: görselin kendisi, içerik ve CTA. Her ziyaretçinin deneyimde kendi rolünü oynamasını istersiniz, böylece aralarında bir uyum duygusuna sahip olmaları gerekir. Bu yüzden renklerin kullanımıyla belirli bir denge oluşturmak önemlidir. Görüntüye bir renk veya degrade kaplama eklemek genellikle işi yapar.

Divi oluşturucu ile yeni arka plan tasarım seçenekleri kullanıma sunulduğundan, kontrast oluşturmak gerçekten kolaylaştı. Kahraman bölümünüz için mümkün olan en iyi renk ve kontrast kombinasyonunu oluşturmak için arka plan resminizde kullanılan renklerle oynayabilirsiniz, ancak aşağıdaki kahraman bölümünü yeniden oluştururken buna geri döneceğiz.

Bunun yerine bir Video Arka Planı Deneyin

Web sitenize bu ekstra hayatı vermek istiyorsanız, resim yerine video kullanmayı da düşünebilirsiniz. Kahraman bölümü için bir video seçerken, resimlerle aynı ipuçları geçerlidir.

Oluşturduğunuz web sitesine uygun olabilecek farklı videoları çevrimiçi olarak bulabilir veya kendinizinkini oluşturabilirsiniz. Coverr, özellikle kahraman bölümleri için kullanılabilecek videolar sunan bir web sitesidir. İzleyicilerine çok fazla kaynak olmadan web siteleri oluşturmak için mükemmel olan farklı türlerde kısa videolar sağlarlar.

Her Pazartesi 7 yeni video yüklüyorlar ve paylaştıkları videoları ticari amaçlarla bile kullanmak ücretsiz.

Fark Yaratan CTA

Harika bir kahraman imajı ve bölümü her zaman bir amaca sahip olur. Bu amaç, çoğunlukla ziyaretçi ile web sitesinin arkasındaki kişi veya şirket arasındaki bir etkileşimdir. Ziyaretçilerinizi tanımak istiyorsunuz ve umarız; onları sadık bir ziyaretçiye veya lidere dönüştürün.

Bu hedefe gerçekten ulaştığınızdan ve amacı yerine getirdiğinizden emin olmak için iyi bir CTA kullanışlı olabilir. Bir CTA tasarlarken, dikkate alınması gereken şeyler de vardır. CTA'nızın etkinliğini artırmak ve kahraman görüntüsünün sunmayı amaçladığı sonuçları sağladığından emin olmak istiyorsunuz.

Bir CTA tasarlarken aşağıdakileri dikkate alın:

• CTA'nın insanların fark ettiği ilk şeylerden biri olduğundan emin olun (renk ve kontrast yoluyla)
• Kullanmakta olduğunuz CTA kopyasını düşünün. ikna edici olmasını istiyorsun
• CTA'ya tıkladıktan sonra aşağıdakilerin buna değdiğinden emin olun (sonuç almak için katma değer verin)

Oluşturmaya Başlayalım (Masaüstü)

Artık kahraman resimleriyle ilgili genel ipuçlarını gözden geçirdiğimize göre, bunu uygulamaya koymanın zamanı geldi. Yaptığımız örnek ürün odaklı, ancak başka faktörleri de (bağlam gibi) dahil ettik.

Yeterli kontrast, iyi bir CTA, yüksek kaliteli bir görüntü olduğundan emin olduk ve tam genişlik bölümü yerine standart bir bölüm kullanmamıza rağmen, kahraman bölümünün masaüstlerinde tam ekran görünmesini sağlamak için Boşluk alt kategorilerini manuel olarak ayarladık.

Bir Bölüm Seçin

Tam genişlikte bir bölüm veya normal bir bölüm arasında seçim yapın. Standart bölüm daha esnek olduğu için standart bir bölüm seçeceğiz ve onu ihtiyaçlarımıza uygun bir kahraman bölümüne dönüştüreceğiz.

Arka Plan Seçenekleri

Kahraman bölümümüzde temsil edilecek olan görüntü bir üründür, ancak bağlam ve duygudan da yararlandık. Fotoğrafın çekildiği ortamın macera ile ilgili olabileceğini görebilirsiniz. Kahraman görselinde sağlanan içerik aracılığıyla duyguyu da kullanıyoruz.

İnsanlara maceracı yaşam tarzlarını yaşarken 'zaman ayırmalarını' söylüyorsunuz. Ayrıca onlara hayatta en çok istedikleri şeylerin peşinden gitmelerinin sorun olmadığını ve bu saatin bu yolculuk için ideal son dokunuş olduğunu söylüyorsunuz.

Bu örnekte kullanılan görüntü Unsplash'tan alınmıştır. Arka plan resmi olarak kullanmak istediğiniz resmi seçin ve üzerinde çalıştığınız bölümün ayarlarını açın. İçerik sekmesinde Arka Plan Alt Kategorisini bulacaksınız. Arka plan resmini ekleyerek başlayın.

Ardından, kullandığımız görüntünün üzerine bir renk katmanı yerleştirmek istiyoruz. Bu, yukarıda tartıştığımız 'Kontrast Oluştur' ipucuna geri döner. Kullanacağımız Metin Modülleri ve Düğme Modülü ile daha iyi bir denge oluşturmak için görüntüye belirli bir karanlık ekleyeceğiz.

Çoğu durumda, gri bir kaplama rengi kullanılır. Görüntünün renklerini çok fazla değiştirmeyecek bir kaplama olarak kullanılacak en standart renktir. Kullandığımız renk kodu '#BFBFBF'.

Ardından, arka plan görüntüsüne geri dönün ve Arka Plan Görüntüsü Karışımı uygulayın. Bu durumda, 'Çarpma' kullanacağız. Arka Plan Görüntüsü Konumunu da 'Sol Üst' olarak değiştirin.

Satır Ayarları

Devam ederken, oluşturduğumuz bölüme tam genişlikte bir satır ekleyeceğiz. Ayarları açın ve Tasarım sekmesinin Aralık alt kategorisindeki üst dolguya '%10' ekleyin.

Ardından, Gelişmiş sekmesine gidin ve Görünürlük alt kategorisinde telefon ve tablet satırını devre dışı bırakın.

İlk Metin Modülü

Bundan sonra, ilk Metin Modülünü ekleyeceğiz. Ayarları açın ve İçerik sekmesindeki içerik kutusuna kullanmak istediğiniz başlığı yazın. Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Metin Yönü: Sağ
• Yazı Tipi: Istakoz
• Metin Yazı Tipi Boyutu: 80
• Metin Yazı Tipi Rengi: #FFFFFF
• Metin Satırı Yüksekliği: 1.7em

Aynı sekmeyi aşağı kaydırın, Boşluk alt kategorisinde Üst Kenar Boşluğuna '%25' ve Sağ Kenar Boşluğuna '%-12' ekleyin.

İkinci Metin Modülü

Başka bir Metin Modülü ekleyin, içerik kutusuna metni yazın ve Tasarım sekmesine gidin. Metin alt kategorisinde aşağıdaki değişiklikleri uygulayın:

• Metin Yönü: Sağ
• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Boyutu: 15
• Metin Yazı Tipi Rengi: #FFFFFF
• Metin Satırı Yüksekliği: 1.7em

Aynı sekmeyi aşağı kaydırın ve Boşluk alt kategorisinde Üst Kenar Boşluğuna '%4' ve Sağ Kenar Boşluğuna '-12%' ekleyin.

Düğme Modülü

Bir Düğme Modülü ekleyerek ve düğme metnini yazarak devam edin. Ardından, Tasarım sekmesine gidin ve Düğme Hizalamasını 'Sağ' olarak değiştirin.

Aynı sekmeyi aşağı kaydırın ve Düğme alt kategorisinde aşağıdaki değişiklikleri yapın:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20
• Düğme Metin Rengi: #FFFFFF
• Düğme Arka Plan Rengi: #E02B20
• Düğme Kenar Genişliği: 2
• Düğme Kenar Rengi: #E02B20
• Düğme Sınır Yarıçapı: 3
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Tipi Stili: Büyük

Mobil ve Tablet Sürümü

Bir masaüstü ekranı için bir kahraman görüntüsü oluştururken çok daha fazla olasılık vardır. Öte yandan, telefonlar ve tabletler için her şeyin basit bir şekilde güzel görünmesini sağlamanın bir yolunu bulmalısınız.

Birisi telefon veya tablet ile web sitenizi ziyaret ettiğinde her şeyi merkezi hale getireceğiz. Devam edin ve masaüstü için yaptığımız satırı klonlayın ve aynı bölüme yerleştirin.

Bölüm Ayarları

Bölümlerinizin ayarlarını açın ve Gelişmiş sekmesinin Görünürlük alt kategorisinde masaüstü bölümünü devre dışı bırakın.

İlk Metin Modülü

Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Metin Yönü: Merkez
• Yazı Tipi Boyutu: 50

Aynı sekmeyi aşağı kaydırın, sağ kenar boşluğunu silin ve Üst Kenar Boşluğunu '%20' olarak değiştirin.

İkinci Metin Modülü

İkinci Metin Modülünün Tasarım sekmesinde, Metin Yönlendirmesini 'Merkez' olarak değiştirin.

Aynı sekmeyi aşağı kaydırın, Sağ Kenar Boşluğunu silin ve Üst Kenar Boşluğunu koruyun.

Düğme Modülü

Son olarak, Düğme Modülünü açın ve Düğme Hizalamasını da 'Merkez' olarak değiştirin.

Son düşünceler

Bu gönderide, bir kahraman resmi/bölümü oluştururken göz önünde bulundurmanız gereken bazı tasarım ipuçlarını inceledik. Bu ipuçlarını takip eden bir kahraman bölümü örneği de paylaştık. Bu konuyla ilgili herhangi bir sorunuz varsa veya önerileriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!