Divi 2.4'ü Keşfetmek: Tamamen Yeni Tam Ekran Başlık Modülünü Kullanma

Bu ayın başlarında, Divi tarihindeki en büyük yükseltme ve en popüler WordPress temamız için dev bir adım olan Divi 2.4'ü tanıttık. Bu güncellemede keşfedilecek o kadar çok harika özellik var ki, hepsini sürüm gönderisinde açıklamak zordu, bu yüzden size nasıl alınacağını öğretmeyi amaçlayan 2 haftalık bir dizi bilgilendirici blog gönderisi yapmaya karar verdik. Divi 2.4'ün tam avantajı ve yeni seçenekleri. Bu dizinin on birinci bölümünde, yeni Tam Ekran işleviyle tamamlanmış, yükseltilmiş Tam Genişlik Başlık modülünü keşfedeceğim!

Divi 2.4 Hakkında Her Şeyi Buradan Öğrenin

Fullwidth Header Module, Büyük Bir Yükseltme Aldı

Divi'nin her zaman bir Tam Genişlik Başlık modülü vardır. Ancak Divi 2.4'te bu modül, onu Divi koleksiyonundaki en çok yönlü modüllerden biri yapan düzinelerce yeni seçenekle büyük ölçüde genişletildi. Artık bu tek modülle oluşturulabilen 20'den fazla farklı olası düzen ve her bir öğeye uygulanabilen sayısız yeni stil seçeneği (Divi'nin yeni Gelişmiş Tasarım Ayarları sayesinde) vardır. Daha önce başlığınızdaki (Başlık ve Alt Başlık) yalnızca iki bilgi parçasıyla sınırlıyken, başlık şimdi çeşitli resimler, düğmeler ve arka planlar (her biri farklı şekillerde düzenlenebilir) içerecek şekilde genişletildi. Her şeyden önce, başlığa, başlığı tarayıcının tam yüksekliğini genişletmeye zorlayacak yeni bir "Tam Ekran Modu" eklendi.

Yeni Seçenekleri Keşfetmek

Fullwidth Header modülü için bir sürü yeni seçenek var. İlk bakışta biraz bunaltıcı görünebilirler, bu yüzden ne yaptıklarını daha iyi açıklamak için mevcut seçeneklerin her birinin üzerinden geçelim.

Sayfanıza yeni bir Fullwidth Header modülü eklediğinizde aşağıdaki ayarlarla karşılaşacaksınız:

Başlık – Başlık başlığınızı buraya girin. Bu metin, logo resminizin altında ve tanımlanmışsa alt başlık metninizin üstünde görünecektir.

Alt Başlık Metni – Bir alt başlık kullanmak istiyorsanız buraya ekleyin. Alt başlığınız, başlığınızın altında daha küçük bir yazı tipinde görünecektir.

Metin Rengi – Burada metninizin renk değerini seçebilirsiniz. Koyu bir arka planla çalışıyorsanız, metniniz açık olarak ayarlanmalıdır. Açık renkli bir arka planla çalışıyorsanız, metniniz koyu olmalıdır.

Metin ve Logo Yönlendirmesi – Metninizin modül içinde nasıl hizalanacağını kontrol eder. Sol, sağ veya ortalanmış hizalama arasında seçim yapabilirsiniz.

Tam Ekran Yap – Burada başlığın tam ekran boyutuna genişletilip genişletilmeyeceğini seçebilirsiniz. Bu seçenek etkinleştirilirse, başlık her zaman tarayıcı pencerenizin yüksekliğine eşit bir minimum yüksekliğe sahip olacaktır. Bu, başlığınıza ekstra önem katmanın harika bir yoludur ve ana sayfanızda yeni ziyaretçileri selamlamak için bir fikir haline getirir.

Aşağı Kaydırma Düğmesini Göster – Burada aşağı kaydırma düğmesinin gösterilip gösterilmeyeceğini seçebilirsiniz. Aşağı kaydır düğmesi tıklandığında, kullanıcıları otomatik olarak sayfadaki bir sonraki bölüme kaydırır. Ayrıca, başlığın altında daha fazla içeriğin bulunduğuna dair bir gösterge verir ("tam ekran" efekti genellikle aldatıcı olabileceğinden).

Düğme Metni – Başlığınızda bir düğme görüntülemek istiyorsanız, ilk düğmenizin metnini buraya girebilirsiniz.

Düğme URL'si – Başlığınızda bir düğme görüntülemek istiyorsanız, ilk düğmenizin URL'sini buraya girebilirsiniz.

Arka Plan Resmi URL'si – Başlıklara, metninizin ve başlık resminizin arkasında görünecek isteğe bağlı bir arka plan resmi uygulanabilir.

Arka Plan Rengi – Başlığınıza bir arka plan rengi vermek isterseniz, rengi burada belirtebilirsiniz.

Arka Plan Kaplama Rengi – Arka plan görüntüsünün üstüne ve metninizin arkasına yerleştirilecek bir arka plan kaplama rengi seçin. Yarı saydam arka plan kaplamaları, arka plan resimlerinin üzerine yerleştirildiğinde bazı ilginç efektler oluşturabilir.

Paralaks efektini kullan – Etkinleştirilirse, arka plan resimleriniz kaydırma yaparken sabit bir konuma sahip olacak ve eğlenceli bir paralaks efekti yaratacaktır.

Logo Resmi URL'si – Logo resimleri, başlık metninizin (tanımlanmışsa) üzerinde görüntülenir. Başlıktaki tüm öğelerde olduğu gibi, logolar isteğe bağlıdır.

Metin Dikey Hizalama – Bu ayar, içeriğinizin dikey hizalamasını belirler. İçeriğiniz dikey olarak ortalanabilir veya alta hizalanabilir.

Başlık Resmi URL'si – Başlıklar ayrıca isteğe bağlı bir başlık resmine sahip olabilir. Bu, başlık metninizden ve logonuzdan ayrı olarak görüntülenen daha büyük bir resimdir.

Görüntü Dikey Hizalama – Bu, modül içindeki görüntünün yönünü kontrol eder. Logonuzdan ve metninizden bağımsız olarak hizalanabilir, bu da 20'den fazla farklı olası düzen ile sonuçlanır.

Kendi Başlık Modülünüzü Oluşturma

Artık mevcut yeni seçeneklere aşina olduğumuza göre, bazı çarpıcı başlıklar oluşturmak için bu seçeneklerin nasıl birleştirilebileceğine bir göz atalım. Bu eğitimde, size aşağıdaki tarzda nasıl başlık oluşturulacağını göstereceğim:

Canlı Demoyu Görüntüle

Bu yapılandırma, Divi 2.4'te eklenen yeni seçeneklerin çoğundan yararlanır ve tüm bu öğelerin nasıl başarılı bir şekilde birleştirilebileceğinin harika bir örneğidir.

Başlarken – Resimlerinizi Seçme

Bu örnekte, kurgusal bir fırın için bir ana sayfa oluşturacağım. Ana sayfanın üst kısmında, şirketimizin bazı güzel görüntüler ve biraz metin kullanarak neyle ilgili olduğunu hızlıca açıklamak istiyorum. Her şeyden önce, bazı harika fotoğraflara karar vermemiz gerekiyor. Güzel bir başlık tasarlamanın en önemli kısmı birbiriyle uyumlu görseller seçmektir. Fullwidth Header'ın kullanabileceği 3 farklı görüntü vardır:

• Logo Resmi – Bu resim, başlık metninizin üzerine yerleştirilir ve genellikle şirketinizi temsil eden küçük bir logodur.
• Arka Plan Resmi – Arka plan resmi, başlık içeriğinizin arkasına yerleştirilir. Arka plan görüntüsünü dokusal bir öğe olarak düşünmek en iyisidir. Çok baskın bir şey istemiyoruz. Başlığınızın geri kalanını tamamlamalıdır, ancak modülün ana konusu değildir.
• Başlık Resmi – Bu, başlık metninizin ve logonuzun yanına yerleştirilmiş daha büyük bir resimdir. Metin içeriğinizin soluna, sağına veya altına yerleştirilebilir.

Başlamak için pişirme temama uygun bir arka plan resmi seçtim. Bu görüntü çok karmaşık değil ve derinlik eksikliği de daha ince bir görünüm sağlıyor.

Ayrıca şirket logo resmimi de yükledim. Bu, başlık metnimin üstüne yerleştirilecek. Arka plan resminin logonun negatif alanında görünmesi için şeffaf bir PNG resmi olarak kaydedildi.

Ardından, metin içeriğimin altına yerleştirilecek bir resim seçtim. Bu benim ana “Başlık Resmim”.

Bu resim arka plan resmimin üstüne yerleştirileceği için bu fotoğrafı da şeffaf bir PNG'ye dönüştürmeye karar verdim (tıpkı logomuz gibi). Saydamlığın tam olarak etkili olabilmesi için kenarları soldurmak için Photoshop ve silgi aracını kullandım. Photoshop'ta soldurmayı bitirdikten sonra görüntünün nasıl göründüğü:

Artık temel öğelerimizi yerleştirdiğimize göre, başlığımızı oluşturmaya başlayabiliriz!

Parçaları Birleştirmek

Öncelikle sayfamıza yeni bir Fullwidth Header modülü eklememiz gerekiyor. Bunu yapmak için yeni bir Tam Genişlik Bölümü ekleyin ve “modül ekle” düğmesine tıklayın. Fullwidth Header modülünü bulun ve seçin.

Bu, daha önce üzerinden geçtiğimiz Tam Genişlik Modülü ayarlarını getirecektir. Başlamak için, bir başlık metni (“Daha İyi Tatma Ekmeği”) girdim ve “Tam Ekran Başlık” seçeneğini etkinleştirdim. Ayrıca daha önce seçtiğim arka plan resmi oldukça karanlık olduğu için metin rengimi “açık” olarak değiştirdim. Metnimizin okunabilir olduğundan emin olmalıyız.

Ardından, daha önce seçtiğim resmi yükleyerek arka plan resmimi ekledim.

Kaydettikten sonra başlığımızın şu ana kadar nasıl göründüğünü görebilirsiniz. Yalnızca bir başlığımız ve bir arka plan resmimiz var ve başlık, tarayıcının tüm yüksekliğini genişletecek şekilde ayarlandı.

Şu ana kadar işler oldukça iyi görünüyor! Ancak sayfayı aşağı kaydırdığımda unun beyaz rengi ile metnin beyaz renginin çakıştığını fark ediyorum. Bu, arka plan resimlerinde çok yaygın bir sorundur. Metniniz ile asla rekabet etmeyecek kadar düşük kontrasta sahip bir arka plan resmi bulmak genellikle zordur. Neyse ki, arka plan resminizin üzerine yarı saydam bir renk ekleyerek bu sorunu gideren ve sesi kısmaya yardımcı olan "Arka Plan Yerleşimi" adlı yeni bir özellik uyguladık. Fotoğraflarınızı renklendirmek için de kullanılabilir.

Sayfada daha çok kahverengi bir renk düzenine gittiğimden, arka plan resmimin üstüne yarı saydam kahverengi bir kaplama yerleştirmeyi seçtim.

Kaplama rengini kaydedip uyguladığımızda, arka plan görüntüsünün genel renginin artık kahverengi bir ton aldığını görebilirsiniz. Yeni kaplama rengiyle arka plan görüntüsünün yalnızca bir kısmı görülebildiğinden, görüntünün kontrastını da azalttı ve unun beyazını azalttı.

Artık işler karışmaya başlıyor! Kalan içeriğimizi başlığa eklemeye devam edelim. Sırada, daha önce seçtiğim logo resmini yükledim. Ayrıca “button text” ve “button URL” ayarlarını da doldurdum. Düğmeler başlık başlığınızın altına yerleştirilirken logo resmi bunun üstüne yerleştirilir.

Logo, başlık, alt başlık ve düğmeler her zaman birlikte (ve bu sırayla) yerleştirilir. Bu öğelerin tümü isteğe bağlıdır. Bu öğelerden herhangi birini başlığınızda kullanmak istemiyorsanız, ayar alanlarını boş bırakmanız yeterlidir. Yeni logomuzu yükledikten ve iki butonumuzu ekledikten sonra, sonucu aşağıda görebilirsiniz. Logo resmimiz şeffaf bir PNG olduğundan, arka plan resmi ve kaplama rengi negatif boşluktan gösterilir. Bu harika bir etki ve kendi tasarımlarınızda kullanmayı düşünmeniz gereken bir şey.

Yapbozun sadece bir parçası kaldı, daha önce seçtiğimiz ekmek parçasının başlık görüntüsü. Bu, başlığımızın önemli bir parçasıdır, çünkü ziyaretçilerimizin şirketimizin ne yaptığını tam olarak bilmesini sağlar. Başlık metnimiz ve logo resmimizle birlikte, web sitemizin ne hakkında olduğunu anlamak için gerekli tüm önemli bilgiler hemen görülebilir.

Daha önce de belirtildiği gibi, Photoshop'u görüntünün kenarlarını soldurmak için kullandım ve şeffaf bir PNG olarak kaydettim (tıpkı logomuz gibi). Bir arka plan görüntüsü ve paralaks etkisi ile birleştirildiğinde, bu iki öğenin aynı alanda var olduğu yanılsamasını yaratabiliriz. Bu son dokunuş tamamlandığında, Tam Genişlik (ve Tam Ekran) Başlığımız tamamlanmış oldu.

Bu Sayısız Olasılığa Sadece Bir Örnek!

Bu örnek, Fullwidth Header modülünün kullanılabileceği birçok farklı yoldan sadece biridir. Farklı görüntü ve metin yönelimleri seçerek, başlığın düzeni büyük ölçüde değiştirilebilir. İşte size bir fikir vermesi için tüm farklı düzen olasılıklarının bir elektronik tablosu:

Farklı fotoğraf stilleriyle birleştirilmiş farklı metin ve görüntü yönelimlerini denemeye başladığınızda, bu modülün ne kadar çok yönlü hale geldiğini görmeye başlayacaksınız.