Kahramanların tasarım resimleri için ipuçları & amp;Divi boyunca nasıl kullanılır
Bugünün öğreticisinde, kahramanın iyi bir imajının/bir kısmının nasıl tasarlanacağına dair bazı ipuçlarını paylaşacağız. Paylaşılacak ipuçları, kendi web siteniz veya müşteri web siteniz için etkili bir kahraman oluşturmanıza yardımcı olabilir. Genel olarak, kahramanları organize etmenin birçok farklı yolu vardır ve bunu düzenleme şekliniz genellikle web sitesine bağlıdır. Bu nedenle, her tür web sitesi için geçerli olan ve tüm insanların bilmesi gereken bazı genel tasarım ipuçlarını ele alacağız. Farklı bir ipucu gördükten sonra, kahramanların bahşişe uygun kısımlarını da paylaşacağız ve bu örneği web sitesi üreticisi olarak DIVI ile nasıl yeniden yaratacağınızı göstereceğiz.
Nasıl yapılacağını göstereceğimiz örnek, adım adım böyle görünüyor:
Alaka düzeyi bulmak için kendinize iki soru sorun:
Ürün/hizmet/web sitem hangi ana katma değeri sunuyor?
Ne tür bir resim katma değeri yansıtır?
Her zaman ziyaretçilerinizin görmek istediklerine ve tüm görüntüyü ne kadar kolay anlayabileceklerine yol açar. İnsanlar her şeyi görselleştirme eğilimindedir; Şirket veya iş bile. Bu yüzden ikametlerinin başlangıcından beri onlara ilgili bir kahramanın resmini veren kişi olmalısınız. Kahramanların en yaygın kahramanlarından bazıları kendilerini bir (veya daha fazla) aşağıdaki şeylere dayandırıyor: ürünler (ürünler olarak sergiler)
Bağlam (verilen içerikle birlikte bir hikaye anlatan resimler görüntüler)
Duygular (gülümseyen insanlar gibi duygusal tetikleyicileri kullanarak)
Eylemler (web sitenizin içeriği ile ilgili belirli eylemleri ifade eden resimler kullanarak)
Bu odaktan birini seçin ve mesajı en iyi ve en yaratıcı şekilde aktarmaya çalışın. Oldukça alakalı ücretsiz görüntüler bulup bulmadığınızı görün ve değilse stok fotoğraf satın alın veya kendiniz yapmaya çalışın. Kahramanlarınızın şirketle ilişkili ne kadar çok görüntüsü, o kadar iyi. Bu yüzden kendi resminizi profesyonel olarak yapmak genellikle en çok önerilen şeydir. Ancak kaynakların eksik olduğu durumlarda, ücretsiz görüntü veya görüntüler de yeterli olabilir.
Yüksek kaliteli Kahramanlarınız için doğru seçimi yapmada çok önemli olan bir başka faktör kalite. Bu açıkça kendi başına, ancak kaç web sitesinin bunları yerine getirmediğini görünce şaşıracaksınız. Mümkün olduğunca profesyonel görünmek istiyorsunuz, çünkü bu kalitenin web sitenizde temsil ettiğiniz hizmetler veya ürünlerle ilişkilendirilmesini istiyorsunuz. Divi’deki görüntüleri kullanmak için ana kılavuzumuzda belirtildiği gibi, minimum 1920 piksel genişliğe sahip görüntüleri kullanmanızı öneririz. Tam ekran modunda kahramanlar kullanarak bir kahraman görüntüsü kullanarak tam ekran modunu düşünün. Kahramanlarınızı tam bir ekran haline getirerek, kitlenize daha derin bir seviyede dahil olma fırsatınız var. Kahraman bölümünde sağlananlara daha fazla odaklanıyorsunuz, bu yüzden gerçekten orantılı olmalısınız. Tam ekran bir kahraman yapmayı düşünürseniz, web sitenizin en iyi parçası olduğundan emin olun, çünkü web sitenizin bir parçası olacaktır. En çok etkileşim çok. Ziyaretlerinin ilk aşamalarında onlarla etkileşime girerek, diğer tüm web sitelerinde onlarla etkileşim kurma fırsatını artırırsınız. Aynı şekilde, tam ekran kahramanı bölümü orantılı değilse, insanları web sitenizde ziyaret etmeye devam etmek istemeyebilir. Merkeze ya da merkeze
Çoğu insan simetrinin gözler için çok ilginç olduğunu onaylayabilir. Ancak, genellikle web’de görüyoruz, bu yüzden artık özel olarak görmeyebiliriz. Ortada olmasanız bile çok güzel şeyler yapabilirsiniz.
Ancak, risk almak istemiyorsanız, kahramanlarınız için oluşturduğunuz tüm içeriği her zaman bir kahraman görüntüsü simetrik hale getirmek de dahil olmak üzere odaklayabilirsiniz. Bir kahramanın kontrast oluşturun genellikle üç şey içerir: resmin kendisi, içeriği ve CTA. Her bir ziyaretçinin deneyiminde kendi rollerini oynamasını istiyorsunuz, böylece aralarında bir uyum duygusu olmalı. Bu yüzden renk kullanımı ile belirli bir denge oluşturmak önemlidir. Görüntüye renk kaplama veya gradyan ekleyin genellikle başarılı olur. Divi üreticileri ile yeni arka plan tasarım seçenekleri mevcut olduğundan, kontrast çok kolaydır. Kahramanınız için en iyi renk kombinasyonunu ve kontrastı oluşturmak için arka plan görüntüsünüzde kullanılan renklerle oynayabilirsiniz, ancak aşağıdaki kahramanları yeniden yarattığımızda oraya döneceğiz. Bunun yerine videonun arka planını deneyin
Web sitenize ekstra hayat vermek istiyorsanız, görüntüler yerine video kullanmayı da düşünebilirsiniz. Kahraman bölümü için bir video seçerken, görüntü için aynı ipuçları geçerlidir. Oluşturduğunuz web sitesiyle eşleşebilecek çeşitli çevrimiçi videolar bulabilir veya kendiniz yapabilirsiniz. Coverr, özellikle kahraman için kullanılabilecek videolar sağlayan bir web sitesidir. İzleyicilerine, çok fazla kaynak olmadan web siteleri oluşturmak için çok iyi olan çeşitli kısa video türleri verirler. Her Pazartesi 7 yeni video yüklerler ve paylaştıkları videolar ticari amaçlar için bile kullanılabilir. Görüntülerdeki farkı yaratan CTA ve harika kahramanlar her zaman hedefle biter. En yaygın hedef, ziyaretçiler ile web sitesinin arkasındaki insanlar veya şirketler arasındaki etkileşimdir. Ziyaretçilerinizi tanımak istiyorsunuz ve umarım; Onları sadık ziyaretçilere dönüştürür veya liderlik eder.
Bu hedefe gerçekten ulaştığınızdan ve bu hedefi yerine getirdiğinizden emin olmak için iyi CTA yararlı olabilir. CTA tasarlarken dikkat edilmesi gereken şeyler de vardır. CTA etkinliğinizi artırmak ve kahraman görüntüsünün istenen sonuçları verdiğinden emin olmak istiyorsunuz. CTA tasarlarken aşağıdaki şeyleri düşünün: CTA’nın insanların dikkat ettiği ilk şeylerden biri olduğundan emin olun (renk ve kontrast yoluyla)
Kullandığınız CTA’nın kopyasını düşünün. İkna edici olmasını istiyorsun CTA’yı tıkladıktan sonra aşağıdakilerin ne olduğundan emin olun (sonuçları almak için ek değer verin)
Yapmaya başlayalım (masaüstü)
Şimdi kahramanlarla ilgili genel ipuçlarını tartıştıktan sonra, bunu uygulamanın zamanı geldi. Yaptığımız örnekler ürün odaklıdır, ancak diğer faktörleri (bağlam gibi) de ekleriz. Yeterli kontrast, iyi CTA, yüksek kaliteli görüntüler olduğundan emin oluyoruz ve tam parça yerine standart parçaları kullansak da, kahraman bölümünün masaüstünde tam ekran görünmesini sağlamak için aralık alt kategorisini manuel olarak ayarlıyoruz. tam parçanın veya sıradan parçanın tam kısımları. Standart kısım daha esnek olduğundan, standart kısmı seçip ihtiyaçlarımıza uygun kahramanın bir kısmına dönüştüreceğiz. Kahramanımızda görüntülenecek görüntü arka plan seçeneği bir üründür, ancak bağlam ve duyguları da kullanırız. Resmin çekildiği ortamın macera ile ilişkili olabileceğini görebilirsiniz. Kahramanlarda verilen içerik aracılığıyla duyguları da kullanıyoruz. İnsanlara maceracı yaşam tarzlarını yaşarken ‘zamanlarını geçirmelerini’ söylersiniz. Ayrıca onlara hayatta en çok istedikleri şeyleri takip etmenin uygun olduğunu ve bu özel saatin bu gezi için ideal bir son dokunuş olduğunu söylersiniz. Bu örnekte kullanılan görüntüler Unllash’tan. Arka plan görüntüsü olarak kullanmak istediğiniz resmi seçin ve üzerinde çalıştığınız parçanın ayarlarını açın. İçerik sekmesinde arka plan alt kategorileri bulacaksınız. Arka plan görüntüleri ekleyerek başlayın.
Ardından, kullandığımız görüntüye renk bindirmesini koymak istiyoruz. Bu, yukarıda tartıştığımız ‘kontrast’ ipucuna geri döner. Metin modülü ve kullanacağımız 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 kaplama renkleri kullanılır. Bu, görüntünün rengini değiştirmeyecek bir kaplama olarak kullanılacak en standart renktir. Kullandığımız renk kodu ‘#bfbfbf’ dir. Ardından, arka plan görüntüsüne dönün ve arka plan görüntüsü karışımını uygulayın. Bu durumda, ‘Multiply’ kullanacağız. Arka plan görüntüsünün konumunu ‘sol üst’ olarak değiştirin.
Bir sonraki satır ayarı, yaptığımız parçaya tam geniş bir çizgi ekleyeceğiz. Ayarları açın ve tasarım sekmesindeki uzay alt kategorisindeki üst dolguya ‘%10’ ekleyin.
Ardından, Gelişmiş sekmesini açın ve görünürlük alt kategorisindeki cep telefonları ve tabletler için satırları devre dışı bırakın. Bundan sonra ilk metin modülü, ilk metin modülünü ekleyeceğiz. Ayarları açın ve içerik sekmesindeki içerik kutusuna kullanmak istediğiniz başlığı yazın. Tasarım sekmesine geçin ve metin alt kategorisinde aşağıdaki değişiklikleri oluşturun:
Metin Oryantasyonu: Doğru
Metin yazı tipi: ıstakoz Metin yazı tipi boyutu: 80 Metin yazı tipi rengi: #ffffff Hat yüksekliği metni: 1.7em Aynı sekmeyi aşağı kaydırın, üst kenar boşluğuna ‘%25’ ekleyin ve uzay alt kategorisindeki sağ marja ‘-12’ ekleyin.İkinci metin modülü başka bir metin modülü ekler, metni içerik kutusuna yazın ve tasarım sekmesini açar. Metin alt kategorisine aşağıdaki değişiklikleri uygulayın:
Metin Oryantasyonu: Doğru
Metin yazı tipi: Montserrat
Metin yazı tipi boyutu: 15
Metin yazı tipi rengi: #ffffffftight geç metin: 1.7em Aynı sekmeyi aşağı kaydırın ve üst kenar boşluğuna ‘%4’ ve uzay alt kategorisinde sağ kenar boşluğuna ‘%-12’ ekleyin. Düğme modülü düğme modülünü ekleyerek ve düğme metnini yazarak devam eder. Ardından, Tasarım sekmesini açın ve düğme hizalamasını ‘sağa’ değiştirin.
Aynı sekmeyi aşağı kaydırın ve düğmenin alt kategorisinde aşağıdaki değişikliği yapın:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 20
Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #E02B20 Sınır sınır genişliği: 2 Düğme Sınır Rengi: #E02B20 Sınır sınır yarıçapı: 3
Yazı tipi düğmesi: Montserrat
Yazı tipi stili düğmesi: sermaye
Hücresel Versiyon ve Tablet
Masaüstü ekranı için bir kahraman resmi oluştururken daha fazla olasılık vardır. Cep telefonları ve tabletler için ise bir şekilde her şeyi basit bir şekilde iyi göstermenin yollarını bulmak zorundasınız. Birisi web sitenizi bir cep telefonu veya tablet ile ziyaret ettiğinde her şeyi ortalayacağız. Lütfen ve masaüstü için yaptığımız satır klonu ve aynı bölüme yerleştirin. Bölüm Ayarlama Bölüm ayarlarınızı açın ve Gelişmiş Seviye sekmesindeki görünürlük alt kategorisindeki masaüstü bölümünü devre dışı bırakın.
İlk metin modülü tasarım sekmesini açar ve metin alt kategorisinde aşağıdaki değişiklikleri yapar:
Metin Oryantasyonu: Orta
Mektup Boyutu: 50
Aynı sekmeyi aşağı kaydırın, doğru marjı silin ve üst kenar boşluğunu ‘%20’ olarak değiştirin.
İkinci Metin Modülü Tasarım sekmesindeki ikinci metin modülü, metin yönünü ‘orta’ olarak değiştirin. Aynı sekmeyi aşağı kaydırın, doğru marjı silin ve üst kenar boşluğunu koruyun. Son fakat en az değil düğme modülü, modül düğmesini açın ve düğme hizalamasını ‘merkeze’ de değiştirin. Bu yazıdaki son zihin, resim/kahraman oluştururken dikkate almanız gereken bazı tasarım ipuçlarını tartışıyoruz.Ayrıca ucu takip eden kahramanların örneklerini de paylaşıyoruz.Bu konu hakkında sorularınız varsa veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
