Divi Eklentisi Vurgusu – FullWidth Başlık Genişletilmiş Modülü

Divi, başlıklar, resimler, düğmeler ve simgelerle kendi başlığınızı oluşturmak için yerleşik bir tam genişlikte başlık modülüne sahiptir. Efektler oluşturmak için kendi özel CSS'nizi biçimlendirip ekleyebileceğiniz güzel bir modül. CSS kullanmadan efektler ve özelleştirmeler eklemek isterseniz ne olur? Custom FullWidth Header Extended gibi bir eklentiye ihtiyacınız var .

Divi Web Design'dan Genişletilmiş Özel FullWidth Header Divi Builder'a 49 animasyon türü ve metin efektleri, arka plan efektleri, giriş ve çıkış animasyonları, animasyon hızı ayarlamaları, başlık öğeleri ve çok sayıda efekt içeren yeni bir tam genişlikte başlık oluşturan bir modül ekler. çok daha fazlası. Modül ayarlarını herhangi bir Divi modülü gibi dışa ve içe aktarabilirsiniz.

Standart Divi tam genişlikli başlık modülüyle aynı özellikleri paylaştığından, karşılaştırma için önce standart modüle bir göz atalım. Daha sonra genişletilmiş modüle bakacağız ve bazı örnekleri inceleyeceğiz ve onu çalışırken göreceğiz. Orijinal animasyon, küçültülmüş GIF'lerimden daha pürüzsüz. Kullanılan görseller Unsplash.com'dan alınmıştır.

Standart Tam Genişlik Başlık Modülü

Standart modülün özellikleri size başlık oluşturma, alt başlık metni, renkleri değiştirme, tam ekran yapma, metin yönünü ayarlama, iki düğme ekleme, arka plan renkleri kullanma, paralaks kullanma, logo ekleme, kullanma bir arka plan resmi, dikey hizalamayı ayarlayın ve metin düzenleyiciyi kullanarak metin ekleyin. Gelişmiş Tasarım Ayarları başlığı, alt başlığı ve içeriği biçimlendirmenize olanak tanır.

FullWidth Header Extended modülü bu özellikleri içerir ve birçok yeni özelliğin yanı sıra çok sayıda animasyon ve özelleştirme ekler. Eklentinin neler yapabileceği hakkında size bir fikir vermek için hem standart özellikleri hem de yeni özellikleri ekledim. FullWidth Header Extended'ın her özelliğine bir göz atalım.

FullWidth Başlık Genişletilmiş Modülü

Modül, tam genişlik bölümü için modül listesine eklenir. Sadece üzerine tıklayın ve normal bir modül gibi kullanın. Göze çarpıyor (parlak sarı), bu yüzden bulunması kolay. Burada, Fullwidth Text Extender adlı parlak sarı renkte başka bir modül göreceksiniz. Ücretsiz olarak dahildir ve bu genel bakışın sonunda ona hızlıca göz atacağız.

Çok sayıda efekt vardır ve her biri giriş ve çıkış efektleri için çeşitli animasyon türleri ve metin, resimler, simgeler vb. için animasyon efektleri kullanabilir. Efektlerin her birine bir göz atalım. Bu eklenti vurgusu boyunca birkaç animasyon ekleyeceğim. Nasıl göründükleri hakkında bir fikir edinebilmeniz için onları gif olarak ekledim.

Yazma Etkisi

Yazma efekti, ekrana bir imleç yerleştirir ve aslında istediğiniz metni yazar. Metni silip bir döngü içinde yeniden yazmasını da sağlayabilirsiniz.

Hem statik hem de yazma efekti kullanıyorum. Bu, hem ekranda kalan metni hem de yazma efektini kullanan metni görüntüler. Statik metin olarak sayfa başlığını kullanır. Renkleri, zamanlamayı, animasyon türünü vb. ayarlayabilirsiniz. Metni sürekli olarak silip yeniden yazmasını istemiyorsanız, yazma döngüsünü de kapatabilirsiniz.

Döndürücü Etkisi

Döndürücü efekti, 49 animasyon türünden herhangi birini kullanarak metni canlandıran başka bir başlık efektidir. Döndürücü metinle birlikte statik metni de kullanabilirsiniz. Açılır kutudan animasyon türünü seçin, kaydırıcıyı kullanarak animasyon hızını ayarlayın ve renk seçiciyi kullanarak döndürücü yazı tipinin rengini ayarlayın.

Bu örnekte Tada animasyon türünü seçtim.

Tekstil Efektleri

Üçüncü başlık efektine Textillate denir. Döndürücü efektiyle aynı animasyonları kullanır ve metni canlandırmak için başka yollar ekler. Kendi açılır kutularından içeri ve dışarı animasyon türlerini ve efektlerini seçin. Animasyon türleri arasında sıra, geri, eşitleme ve karıştırma bulunur.

Bu örnek, Karıştır, İçeri Döndür ve Dışarı Döndür kullanır.

MetinGif Arka Planı

Dördüncü başlık efekti TextGif Background'dır. Bu efekt, yazı tiplerini saydam yapar, böylece arka plan bunların arasından görünür. Ardından, göstermek istediğiniz herhangi bir arka plan resmini ekleyebilirsiniz.

Fantezi Çizgi

Fancy Line, başlığın etrafına kısa bir çizgi yerleştirir. Başlıktan önce veya sonra görünecek şekilde seçin ve sola, ortaya veya sağa yönlendirin. Ayrıca üst ve alt satır aralığını ayarlayabilir, rengi değiştirebilir, satır yüksekliğini vb. ayarlayabilirsiniz.

Tüm Başlık Animasyonu

Bu, alt başlık ve görsel düzenleyici içeriği de dahil olmak üzere tüm başlığı canlandırmanıza izin veren bir Başlık animasyonudur. Animasyona devam etmek dışında diğer efektlerle aynı animasyon seçeneklerine sahipsiniz. Animasyon tamamlandıktan sonra başlık, animasyondan sonraki durumda kalır. Animasyon uygularsanız, başlığın içeriği ekranda kalır. Dışarıya animasyon uygularsanız, başlığın içeriği ekranın dışında kalır. Bunu kullanırsanız, başlık, alt başlık, içerik veya düğmeler için animasyon kullanamazsınız.

Tam Ekran Başlığı

Başlığınızın tüm ekranı kaplamasını sağlamak için Tam Ekran Yap'ı kullanın. Daha sonra göreceğimiz gibi, başlık düz bir renk bloğu olabilir, degradeleri kullanabilir veya arka plan resimleri kullanabilir. Normal Divi menüsü olmadan tam ekran bir başlık oluşturmak için Boş Sayfa şablonunu kullanın. Bu, animasyonları görüntüleme dışında normal modülle aynı şekilde çalışır.

Aşağı Kaydır Düğmesi

Normal modül, bir aşağı kaydırma düğmesi içerir, ancak bu, birkaç yeni özellik ekler. Aşağı Kaydır Düğmesini Göster anahtarının seçilmesi, simgeler ve animasyonlar dahil ayarları ortaya çıkaracaktır. Mevcut 11 simgeden birini kullanmak istemiyorsanız, kendinizinkini yükleyebilirsiniz. Kaydırmada canlandıracak şekilde ayarlayabilirsiniz. Tüm animasyon türleri simgede mevcuttur.

Bu örnekte simge, Tada animasyon türünü kullanmaktır.

Arama Formu

Başlığınıza bir arama formu ekleyin. Arama formunu WooCommerce ürünlerini içerecek ve sayfaları ve gönderileri hariç tutacak şekilde ayarlayabilirsiniz. Metin rengini, yönünü ayarlayın, arama simgesini gösterin, arama metnini gizleyin, düğmeyi gizleyin, düğmeyi hizalayın, arama düğmesi yönünü seçin ve kendi arama kutusu yer tutucu metninizi ekleyin.

İşte forma bir bakış. Metni ışığa ayarladım ve arama simgesini ekledim ancak diğer her şeyi varsayılan ayarlarında bıraktım.

Düğmeler

Tıpkı standart modülde olduğu gibi, başlıkta her biri kendi metni, stili ve URL'si olan 2 adede kadar düğme gösterebilirsiniz. Bu eklentinin eklediği şey, düğmeleri aynı sekmede veya web sitenizde açılır bir ışık kutusu olarak açılabilen videolara bağlamanıza izin veren bir video açılır özelliğidir.

Bu örnek, YouTube gömülü bağlantısından (bağlantının tırnak içindeki kısmı) URL'yi kullanırken görünen video açılır penceresini gösterir.

Yer Paylaşımlı Arka Plan

Standart modül gibi, bir görüntü veya düz arka plan arasında seçim yapabilir ve ardından bir kaplama ekleyebilirsiniz.

İşte siyah kaplama %48 opaklığa ayarlanmış tam ekran bir görüntü. Bu, yazma efektini kullanıyor.

Hareketli Gradyan Arka Planı

Animasyonlu Gradyan Arka Planı, size katı veya şeffaf animasyon stilleri ve degradeler arasındaki geçişleri ne kadar hızlı yapacağını kontrol etmek için bir hız ayarı sunar. Muhtemelen bu bakışı birçok Divi sitesinde görmüşsünüzdür. Bence harika görünüyor ve sınırsız renk kombinasyonu ve animasyon hızı seçme yeteneği, sizinkini diğerlerinden ayırabilir.

Bu, animasyonlu bir degradenin kısa bir örneğidir. Tüm animasyon, renk tayfının bir tarafından diğerine gider.

Arka Plan Gradyanı

Bu, animasyonsuz bir gradyandır. Sınırsız bir renk kombinasyonu oluşturmak için gradyan tipinizi ve iki farklı rengi seçin. Degrade türleri, soldan sağa, yukarıdan aşağıya, radyal, çapraz aşağı (soldan sağa) ve çapraz yukarı (soldan sağa) içerir.

Soldan sağa bir degrade seçtim. İlk rengimden ikinci rengime nasıl yavaş yavaş geçiş yaptığını görebilirsiniz.

Parçacık Etkisi

İşte yukarıdakiyle aynı arka plan gradyanı, sadece bu sefer parçacık efektini kullanıyor. Parçacık efekti, çizgilerle bağlantılı kayan noktalar ekler. Bu parçacıklar, aslında oynamak için yüzgeç olan bir çizgiye bağlanmak için farenizi de kullanır. Parçacık efekti, başlığınıza dikkat çeken ekstra bir parlama ekler.

Paralaks Etkisi

Normal modülde de bulunan paralaks etkisi, bölümler ve satırlarda olduğu gibi çalışır. Normal bir satırda paralaks kullanmaktan farkı, bu modüle bir resim yükleyebilmenizdir, böylece modülü hareket ettirirseniz paralaks efekti satır yerine modülde kalır. Resminizi yükledikten ve CSS veya True Parallax arasında seçim yaptıktan sonra, normal bir arka plan resminde yaptığınız gibi paralaks arka plan resmi üzerinde istediğiniz tüm başlık efektlerini kullanabilirsiniz.

Logo

Logo tam olarak budur: başlığın içine yerleştirilmiş bir logo. Ayrıca, neredeyse 50 animasyonu kullanır, böylece logonuzu ekranın içine veya dışına istediğiniz şekilde getirebilir veya animasyonlardan vazgeçebilir (bu, standart modüldeki logo gibi çalışmasını sağlar) ve sadece üzerine yerleştirebilirsiniz. ekrana getirin ve başka bir şeyin animasyonlu dikkati çekmesine izin verin. Kaydırmada gösterebilir veya gizleyebilir, alternatif bir metin verebilir ve ona bir HTML başlığı verebilirsiniz.

Metin Dikey Hizalama

Metni başlığın ortasına veya altına hizalayın. Burada altta hizalanmış. Bunun üstündeki resimde merkez hizalamasını görebilirsiniz. Bu, standart modül ile aynı şekilde çalışır.

Başlık görüntü

Standart modülde olduğu gibi, başlık görüntüsü düğmelerin altına eklenir. Aradaki fark, bunun tüm animasyon türlerini kullanabilmesidir. Ayrıca başlığın ortasına veya altına dikey olarak hizalanabilir. Animasyon olmadan da görüntüleyebilirsiniz. Tam genişlikte görüntülemese de, herhangi bir boyuttaki görüntü çalışacaktır. Yaklaşık 900 piksel genişliğinde görüntülenmesini sağladım.

İçerik editörü

Bu, metin, medya ve kısa kod ekleyebileceğiniz standart bir TinyMCE görsel/metin düzenleyicisidir. Bu düzenleyiciyle, normal WordPress düzenleyicisiyle yapabileceğiniz her şeyi yapabilirsiniz. İçerik başlığı altında görünecektir. Bu, standart tam genişlikte başlık modülüyle aynı şekilde çalışır.

İşte metin düzenleyicide gömülü videoyu kullanan bir örnek. Herhangi bir gömülü video ile aynı şekilde çalışır, böylece onu otomatik olarak oynatacak şekilde ayarlayabilirim, kullanıcının tıklatıp oynatmasını sağlayabilirim, vb. Bu, kayıt formları, CTA'lar, tercihler, mesajlar, resimler, slayt gösterileri vb. için harika bir yerdir. .

Gelişmiş Tasarım Ayarları

Bir Divi modülünden bekleyeceğiniz tüm gelişmiş ayarlar burada. Yazı tiplerinin, başlıkların, çizgilerin, düğmelerin, simgelerin, dolguların, kenar boşluklarının vb. stilini ayarlayabilirsiniz. Ayrı ayrı stil oluşturabilmeniz için ayrı bölümlere ayrılmıştır. Bölümler başlıkları, alt başlıkları, içeriği, süslü satırı ve aramayı içerir. Her bölüm için animasyon efektlerini ayarlayabilirsiniz.

Burada, gelişmiş tasarım ayarlarını kullanarak yazı tiplerinde, boyutlarda, düğmelerde ve renklerde birkaç ayarlama yaptım.

FullWidth Metin Genişletilmiş Modül

Modülü seçtiğim pencerede FullWidth Text Extender adında başka bir modül olduğunu fark etmişsinizdir. Bu, eklentiye ücretsiz olarak dahil edilen bir metin modülüdür. İki modül birlikte veya bağımsız olarak kullanılabilir.

Metin rengi, yönlendirme, içerik, belirli cihazlarda devre dışı bırakma, yönetici etiketi, gelişmiş tasarım ayarları ve özel CSS sekmesi dahil olmak üzere standart metin modülünün tüm özelliklerini ve işlevlerini içerir.

Bu, tam genişlikte başlık bölümü ile birçok tasarım fırsatı sunar. Tam genişlikte başlığa yalnızca metin eklemekle kalmaz, aynı zamanda kısa kodlar ve medya da ekleyebilirsiniz.

İşte başlığın üstüne metin yerleştirdiğim bir örnek. FullWidth Header Extended modülünün bir metin düzenleyicisi var, ancak metni başlığın üzerine tam genişlikte bir bölüme yerleştirmek istedim. Bu, başlık içeriğinin üzerine mesajlar, katılım formları, afişler vb. yerleştirmek için harikadır. Divi Boş Sayfa şablonunu kullandım, böylece yerleşik başlığı veya gezinmesini göstermiyor. Navigasyon ile tamamlanmış kendi başlığımı oluşturmak için Divi Builder'a tam genişlikte bir menü modülü yerleştirerek bu sayfaya navigasyonu ekledim.

Extra ile Genişletilmiş FullWidth Header'ı Kullanma

Hem FullWidth Header Extended hem de FullWidth Text Extended modülleri Extra ile çalışır. Ekstra boş sayfa şablonuna sahip değildir, bu nedenle menü başlığın üzerinde kalır. Tema özelleştiricide Gezinmeyi Kaydırana Kadar Gizle'yi seçerek veya sadece olduğu gibi kullanarak bunu görünmez yapabilirsiniz. Menüyü görünmez yapmak için, Ayarı bulmak için Başlık ve Gezinme Ayarları'na ve Başlık ve Biçim Ayarları'na gidin .

Lisans

Eklenti, siz ve müşterileriniz için sınırsız web sitesinde kullanılabilir. Bir yıllık güncelleme ve altı aylık destek içerir.

Son düşünceler

FullWidth Header Extended , zaten güçlü olan tam genişlikte başlık üzerine o kadar çok özelleştirme ekler ki, onsuz olduğunu hayal etmek zor. Dahil edilen FullWith Text Extended modülü, bazı ilginç tasarım olasılıkları yaratmak için bir yol arkadaşı olarak iyi çalışır.

Özellikle animasyonları, gradyanları ve parçacık efektlerini beğendim. Tüm özellikler, hile yapmadan web sitenize ayrıntılar ekler. Her tür animasyon gibi, bunu yapmanızı önermiyorum. Animasyon olanaklarıyla dolu özel bir başlık oluşturmak istiyorsanız, FullWidth Header Extended bunu sizin için halledebilir.

Custom FullWidth Header Extended'ı denediniz mi?

Öne Çıkan Görsel VectorsMarket / Shutterstock.com