Divi Eklenti Spot Işığı – Tam Geniş Başlık Uzatma Modülü
DIVI, başlık, görüntü, düğme ve simge ile kendi başlığınızı tamamlamak için varsayılan olarak dolu geniş bir başlık başlık modülü vardır. Bu, efektler oluşturmak için kendi özel CSS’nizi stilize edebileceğiniz ve ekleyebileceğiniz iyi bir modüldür. CSS kullanmadan efekt ve özelleştirme eklemek istiyorsanız ne olur? Özel Fullwidth başlığı gibi eklentilere ihtiyacınız var. Özel Fullwidth başlığı, divi web tasarımından genişletildi Divi oluşturucuya bir modül ekleyerek 49 tür animasyon ve metin efektleri, arka plan efektleri, gelen animasyon ve çıkış gibi birçok efekt, animasyon hızı, başlık öğelerini ayarlama, başlık öğelerini ayarlama . Diğer divi modülleri gibi modül ayarlarını dışa aktarabilir ve içe aktarabilirsiniz.
Özellikleri standart bir Divi’nin standart geniş bir başlık modülü ile paylaştığından, önce karşılaştırma için standart modüle bakalım. Daha sonra genişletilmiş modülü göreceğiz ve bazı örnekleri göreceğiz ve onları çalışırken göreceğiz. Orijinal animasyon, azaltılan GIF’imden daha pürüzsüzdü. Kullanılan görüntü unssplash.com’dan geliyor. Standart geniş başlık modülü
Genişletilmiş Fullwidth başlık modülü bu özellikleri içerir ve bazı yeni özelliklerin yanı sıra birçok animasyon ve ayar ekler. Eklentinin neler yapabileceğine dair bir resim sunmak için standart özellikler ve yeni özellikler ekledim. Her genişletilmiş FullWidth başlık özelliğine bakalım. Tam geniş bölüm için FullWidthmodule üstbilgisinin genişletilmiş modülü modül listesine eklenir. Sıradan bir modül gibi tıklayın ve kullanmanız yeterlidir. Öne çıkıyor (parlak sarı), bu yüzden bulmak kolaydır. Burada tam genişlikli metin genişletici adı verilen parlak sarı renge sahip başka bir modül göreceksiniz. Bu ücretsiz olarak dahildir ve bu genel bakışın sonunda göreceğiz. Birçok efekt vardır ve her biri metin, görüntüler, simgeler vb. İçin giriş ve giden efektler ve animasyon efektleri için çeşitli animasyon türlerini kullanabilir. İşte her etkinin görünümü. Bu eklentinin spot ışığı boyunca bazı animasyonlar ekleyeceğim. GIF olarak ekledim, böylece neye benzediğinin bir resmini alabilirsiniz. Yazma etkisi
Yazma efekti imleci ekrana yerleştirir ve gerçekten istediğiniz metni yazar. Ayrıca bir dairede metni ve yeniden tipi silmesini isteyebilirsiniz. Statik ve yazma efektleri kullanıyorum. Ekranda kalan metni ve yazma efektini kullanan metin görüntüler. Sayfa başlığını statik bir metin olarak kullanır. Rengi, zamanı, animasyon türünü vb. Ayarlayabilirsiniz. Metnin silinmeye devam etmesini ve yeniden tiplenmesini istemiyorsanız yazma döngüsünü de kapatabilirsiniz. Rotator efekti
Rotator Effect, 49 animasyon türünden birini kullanarak metni canlandıran başka bir başlık efektidir. Rotator metniyle birlikte statik metin de kullanabilirsiniz. Açılır kutudan animasyon türünü seçin, bir kaydırma kullanarak animasyon hızını ayarlayın ve Renk seçmenini kullanarak rotator yazı tipinin rengini ayarlayın. Bu örnekte animasyon türünü seçtim. Tekstil etkisi Üçüncü başlık etkisine tekstil denir. Rotator efekti ile aynı animasyonu kullanır ve metni canlandırmak için başka yollar ekler. Animasyonun kendi açılır kutularına girip çıktığını seçin. Animasyon türleri dizi, ters, senkronizasyon ve shuffle içerir. Bu örnek karışıklıklar kullanır, döner ve tersine çevirir. Arka Plan metingif Dördüncü başlık efekti TextGif arka plandır. Bu etki, yazı tipini şeffaf hale getirir, böylece arka planın içinden görülür. Daha sonra görüntülemek istediğiniz bir arka plan görüntüsü ekleyebilirsiniz. Lüks çizgiler Fancy Line, başlığın etrafına kısa bir çizgi yerleştirir. Başlıktan önce veya sonra görünmeyi seçin ve sol, ortada veya sağa gidin. Ayrıca üst ve alt çizgilerin mesafesini ayarlayabilir, rengi değiştirebilir, çizginin yüksekliğini ayarlayabilirsiniz. Tüm Başlık Animasyonu Bu, altyazılar ve görsel editör içeriği dahil tüm başlığı canlandırmanızı sağlayan bir başlık animasyonudur. Sürekli animasyon hariç diğer efektlerle aynı animasyon seçeneğine sahipsiniz. Animasyon tamamlandıktan sonra, başlık animasyondan sonra bir durumda kalır. Anthyt iseniz, başlık içeriği ekranda kalır. Anthyt iseniz, başlık içeriği ekranın dışındadır. Bunu kullanırsanız, başlıklar, alt başlıklar, içerik veya düğmeler için animasyonu kullanamazsınız. Başlığınızın tüm ekranı doldurması için tam ekranı kullanın. Daha sonra göreceğimiz gibi, başlık bir gradyan kullanarak veya bir arka plan görüntüsü kullanarak düz renkli bir blok olabilir. Sıradan bir divi menüsü olmadan tam ekran başlığı oluşturmak için boş bir sayfa şablonu kullanın. Animasyonu görüntülemek için istisna dışında sıradan bir modülle yakın çalışır. Kaydırma düğmesi aşağı Normal modül kaydırma düğmesini içerir, ancak bu yeni özellikler ekler. Anahtarın Seçilmesi Beta Top Dökme düğmesi, simgeler ve animasyon dahil ayarları görüntüler. Mevcut 11 simgeden birini kullanmak istemiyorsanız, kendiniz yükleyebilirsiniz. Kaydırma açacak şekilde ayarlayabilirsiniz. Simgeler için her türlü animasyon mevcuttur.
Bu örnekte simge animasyonlu TADA türünü kullanır. Arama Formu Arama formunu başlığınıza ekleyin. WooCommerce ürünlerini girmek ve sayfaları ve yayınları hariç tutmak için bir arama formu ayarlayabilirsiniz. Metnin rengini ayarlayın, yönlendirme, arama simgesini görüntüleyin, arama metnini gizleyin, düğmeyi gizleyin, düğmeyi yayınlayın, yönlendirmeyi seçin ve kendi arama kutunuzun metnini ekleyin. Metni parlak olarak ayarladım ve arama simgesini ekledim, ancak diğerlerini varsayılan ayarlara bıraktım. Top Tıpkı standart bir modül gibi, her biri kendi metinleri, stilleri ve URL’leri olan başlıkta en fazla 2 düğme görüntüleyebilirsiniz. Bu eklentiyi ekleyen bir video açılır özelliğidir, düğmeleri videoya bağlamanızı sağlar, bu sekmede veya web sitenizdeki bir LightBox açılırken açılabilen. Bu örnek, YouTube gömülü bağlantının URL’sini kullanırken görünen videoyu gösterir (alıntılardaki bağlantının bir parçası). Bir streç ile arka plan Standart bir modül gibi sağlam bir görüntü veya arka plan arasında seçim yapabilir ve ardından kaplama ekleyebilirsiniz.
İşte%48 opaklığa ayarlanmış siyah bir kaplamalı tam ekran görüntüsü. Bu yazma etkisini kullanır. Animasyonlu gradyan arka planı Arka plan animasyon gradyanı, gradyanlar arasındaki geçişi ne kadar hızlı kontrol etmek için sağlam veya şeffaf bir animasyon stili ve hız ayarı sağlar. Bu ekranı birçok Divi sitesinde görmüş olabilirsiniz. Bence harika görünüyor ve sınırsız renk kombinasyonlarını ve animasyon hızı seçme yeteneği sizi diğerlerinden farklı hale getirebilir. Bu, animasyonlu bir gradyanın kısa bir örneğidir. Tüm animasyon renk spektrumunun bir tarafından diğerine geçer.
Bu, animasyon olmayan bir gradyandır. Sınırsız renk kombinasyonunu yapmak için bir tür gradyan ve iki farklı renk seçin. Gradyan tipleri soldan sağa, yukarıdan aşağıya, radyal, diyagonal alt (soldan sağa) ve diyagonal üst (soldan sağa).
Soldan sağa gradyanı seçtim. İlk rengimden ikinci rengime geçişin yavaş yavaş ne kadar geçişini görebilirsiniz. Parçacık etkisi Aşağıdakiler yukarıdaki ile aynı arka plan gradyanıdır, sadece bu sefer parçacık efekti kullanılarak. Parçacık etkisi çizgiye bağlı kayan noktalar ekler. Bu parçacıklar, farenizi aslında çalacak yüzgeçler olan çizgileri bağlamak için kullanacaktır. Parçacık etkisi, başlığınıza dikkat çeken ekstra parlama ekler. Paralaks efekti Paralaks efekti de normal modüle dahildir, parçalarda ve satırlarda olduğu gibi işbirliği yapar. Paralaks kullanımı sıradan satırlarda kullanma arasındaki fark, bu modüle görüntü yükleyebilmenizdir, bu nedenle modülü taşırsanız, paralaks efekti hattan ziyade modülde kalır. Görüntünüzü yükledikten ve CSS veya True Paralaks arasında seçtikten sonra, Paralaks Arka Plan görüntüsünün üstünde istediğiniz tüm başlık efektlerini olağan arka plan görüntüsünde yaptığınız gibi kullanabilirsiniz. LogoLogo tam olarak böyle: Logo başlığa yerleştirilir. Ayrıca neredeyse 50 animasyon kullanır, böylece logonuzu ekranın içine veya dışına istediğiniz şekilde getirebilir veya animasyonu unutabilir (bu da standart modülde bir logo gibi işlev görür) ve sadece ekrana yerleştirebilirsiniz. Ve başka bir şey bırakın. Scroll’da görüntüleyebilir veya gizleyebilir, alternatif bir metin verebilir ve HTML başlığı verebilirsiniz. Metnin dikey hizalaması, metni başlığın ortasında veya altta uygular. Burada altta paralel. Yukarıdaki resimdeki orta seviyeyi bu konuda görebilirsiniz. Bu standart bir modülle çalışıyor. Başlık görüntüsü Standart bir modül gibi, düğmenin altına başlık görüntüsü eklenir. Fark, bunun her türlü animasyonu kullanabilmesidir. Ayrıca başlığın ortasına veya altına dikey olarak hizalanabilir. Animasyon olmadan da görüntüleyebilirsiniz. Tam genişlik göstermese bile görüntünün her boyutu çalışır. Yaklaşık 900 piksel genişliğe sahip aldım. İçerik editörü Bu, metin, medya ve kısa kod ekleyebileceğiniz görsel bir editör/standart Tinymce metnidir. Bu editörle sıradan bir WordPress düzenleyicisiyle yapabileceğiniz her şeyi yapabilirsiniz. İçerik başlık altında görünecektir. Bu, standart geniş başlık modülü ile aynı işlev görür. Aşağıda, metin düzenleyicisine gömülü video kullanma örneği verilmiştir. Bu, sabitlenen video ile aynı işlev görür, böylece otomatik olarak döndürülebilir, döndürmek için bir kullanıcı tıklaması vardır, vb. Bu, kayıt formları, CTA, katılım, mesajlar, resimler, slayt gösterileri vb. İçin iyi bir yerdir. . Gelişmiş tasarım ayarları, divi modülünden beklediğiniz tüm gelişmiş ayarlar burada. Yazı tipi stilini, başlığı, çizgileri, düğmeleri, simgeleri, dolguları, kenar boşluğunu vb. Ayarlayabilirsiniz. Bu, ayrı ayrı düzenleyebilmeniz için birkaç parçaya ayrılır. Parçalar başlık, altyazılar, içerik, lüks çizgiler ve aramayı içerir. Her bölüm için animasyon efektini ayarlayabilirsiniz. Burada gelişmiş tasarım ayarlarını kullanarak yazı tipleri, boyutlar, düğmeler ve renklerde bazı ayarlamalar yaptım. Genişletilmiş tam metin tam metin Modülü seçtiğim pencerede fark etmiş olabilirsiniz, Fullwidth Metin Extender adlı başka bir modül daha var. Bu, ücretsiz bir eklenti ile birlikte bulunan bir metin modülüdür. Her iki modül de birlikte veya ayrı ayrı kullanılabilir. Bu, metin rengi, oryantasyon, içerik, belirli cihazlarda deaktivasyon, yönetici etiketleri, gelişmiş tasarım ayarları ve özel CSS sekmeleri gibi standart metin modüllerinin tüm özelliklerini ve işlevlerini içerir. Bu, tam geniş başlık ile birçok tasarım fırsatı açar. Yalnızca tam geniş başlığa metin ekleyemezsiniz, aynı zamanda kısa kodlar ve medya da ekleyebilirsiniz. İşte metni başlığa koyduğum bir örnek.Fullwidth başlık genişletilmiş modülünün bir metin düzenleyicisi vardır, ancak metni tam geniş bir parçaya başlığa yerleştirmek istiyorum.Bu, başlık içeriğine mesajlar, katılım formları, afişler vb. Yerleştirmek için iyidir.Divi boş sayfa şablonunu kullandım, böylece varsayılan başlığı veya navigasyonu görüntülemez.Kendi başlığımı gezinme ile tamamlamak için Divi Builder’a tam geniş bir menü modülü yerleştirerek bu sayfaya gezinme ekledim.Ekstra genişletilmiş bir tam genişlik başlığı kullanma
