Divi Eklentisi Vurgusu: Divi Blurb Genişletilmiş

Divi'nin tanıtım modülü, kullanımda gördüğüm en popüler modüllerden biri. Başlık ve kısa metin içeren resimleri veya simgeleri tek bir modülde göstermek için harikadır. Kullanımlarını genişletmek için genellikle düğme modülleriyle birlikte kullanılırlar. Daha fazla özellik gerekirse, bazen tanıtım modüllerinin yerine kullanılan resim, metin ve düğme modüllerini görüyorum. Başka bir seçenek de Divi Blurb Extended adlı üçüncü taraf bir eklenti kullanmaktır.

Divi Blurb Extended, birden fazla modül yerine kullanılabilecek yeni özelliklere sahip bir tanıtım yazısı modülüdür. Eklenen özellikler arasında birden çok simge konumu, yeni simge şekilleri, bir daha fazla oku düğmesi ve üzerine gelindiğinde renk değişiklikleri bulunur.

Extra ve Divi Builder eklentisi ile çalışır. Divi Blurb Extended sürüm 1.1.0, Divi sürüm 3.3.1 ve WordPress sürüm 4.9.6 kullanıyorum.

Divi Blurb Extended'ı Yükleme

Eklentiyi yüklemeden önce indirme dosyasını açmanız gerekir. Dosyanın içinde iki klasör daha var:

1. Divi Blurb Extended (bu eklenti dosyasıdır)
2. Divi Blurb Genişletilmiş Düzenler JSON (bu, Divi Kitaplığına yüklenebilen isteğe bağlı bir düzen dosyasıdır)

Eklentiyi klasöre yükleyin ve etkinleştirin. Başka bir kuruluma gerek yoktur.

Divi Blurb Genişletilmiş Modül

Divi Builder'a Divi Blurb Extended adlı yeni bir modül eklendi. Yeşil, bu yüzden göze çarpıyor.

İçerik sekmesi, başlık ve içerik metni, URL, resim ve simge ve arka plan için tanıdık tanıtım ayarlarını içerir. Düğme için metin ve stil seçenekleriyle birlikte bir özellik ekler.

Tasarım sekmesi, düzen (klasik, flipbox, easbox, borderbox ve görüntü kartı arasından seçim yapın), görüntü ve simge yerleşimi (üstten, sağdan veya soldan seçin), fareyle üzerine gelme durumu, metin, başlık metni, gövde metni, boyutlandırma, kenarlık, kutu gölgesi ve animasyon.

Gelişmiş sekmesi, tüm tanıtım öğeleri için CSS alanlarını içerir. Tanımlama resmine, başlığa, içeriğe, daha fazla oku düğmesine ve vurgulu daha fazla oku düğmesine erişebilirsiniz.

Divi Blurb Genişletilmiş Örnekler

Doctor's Office düzen paketindeki tanıtım yazılarını Divi Blurb Extended modülleriyle değiştirdim. Simgenin renkleri ve boyutuyla yaptığım tek değişiklik. Varsayılan simge boyutu 96 pikseldir. 16'ya ayarladım. Küçüldüysem, içindeki simge küçülürken daire aynı boyutta kaldı. Tanıtım yazısının orijinaline yakın görünmesini sağlamak kolay olurdu. Bu modüle daha özel bazı özel değişiklikler yapacağım.

Not – İlk başta Ön Uç Oluşturucu ile harika çalıştı, ancak ilkini oluşturduktan sonra modül görünür olmadığı için arka uç oluşturucuya geri dönmek zorunda kaldım. Modülleri Ön Uç Oluşturucu'nun içine yerleştirebilirsiniz, ancak ayarlamalarınızı yapmak için arka uç oluşturucuyu kullanmanız gerekir.

Bir açılır kutudan seçiminizi yaparak simgenin şeklini değiştirin. Daire, kare veya altıgen arasından seçim yapın. İşte kare simgelerle aynı düzen.

İşte altıgen şekilli simgeler. Simgenin boyutunu 66 olarak değiştirdim ve üzerine gelindiğinde simgenin rengini ve arka planı değiştirmek için bir vurgulu efekti ekledim. Ayrıca metni kenarlıktan uzaklaştırmak için bir kutu gölgesi ve biraz dolgu ekledim.

Mimari mizanpaj paketindeki standart tanıtım yazılarına bir göz atın. Daha fazla bilgiye bağlanmak için bir düğme modülü kullanırlar. Divi Blurb Extended ile ekstra düğme modülünü kaldırabiliriz. Bu bulanıklıklardan biri diğerleri gibi değil.

Modüllerden birini yeniden yarattım ve orijinalleri karşılaştırmak için bıraktım. Hangisinin benim olduğunu söyleyebilirsin. Aynı yazı tiplerini ve stilleri, resmi vs. kullanıyorum. Benimki sadece bir modül kullanıyor, bu yüzden düğme modülünü eklemek zorunda kalmadım. Metin ve düğme arasında doğru miktarda boşluk oluşturmak için CSS'ye dolgu eklemek zorunda kaldım. Yine de yapmadığım tek şey, düğmenin kenar boşluğunu kaldırmaktı, bu yüzden benimki diğerleri gibi metnin sol tarafıyla aynı hizada değil.

Şimdi tüm tanıtım yazılarını Divi Blurb Extended modülleriyle yeniden oluşturdum. Bunlar için animasyon içeren düzen seçeneklerini seçtim. Soldaki Flipbox'ı ve sağdaki Easebox'ı kullanır.

Flipbox için dilerseniz kartın ön ve arka yüzüne farklı renk veya görseller yaptırabilirsiniz. Bunun için ön tarafa bir resim ekledim. Başlık metninin rengini değiştirdim ve okunması kolay olması için bir metin efekti ekledim.

Fareyle üzerine gelindiğinde, arka plan olarak belirlediğim rengi ortaya çıkarmak için kart döner.

Kartın iç kısmına, kart dönerken görülebilen bir kenarlık efekti ekledim.

Diğer iki düzen animasyonlu değildir. Soldaki Borderbox ve sağdaki Imagecard. Düğme metniyle eşleşmesi için soldaki kenarlığı şekillendirdim. Her ikisi için de simgeyi kaldırdım, ancak simgeye de stil verebilirsiniz. Dolgu için CSS eklemeden görüntüleri garip konumlara yerleştirdi.

Divi Blurb Genişletilmiş Düzenler

İndirme dosyası, sıkıştırılmış bir JSON dosyası içerir. Divi Blurb Extended Layouts JSON adlı dosyayı açın ve JSON dosyasını Divi Kitaplığına aktarın.

Divi Kitaplığında Genişletilmiş Divi Blurb araması üç düzen gösterir: Klasik, Görüntü Kartı ve Easebox. Bunlar, önceden şekillendirilmiş modüller içeren eksiksiz sayfalardır. Bazıları dolgu için biraz CSS içerir.

Bu, Klasik düzenin bir ekran görüntüsüdür. Yayıncının demo sayfasındaki tüm modülleri içerir ve modülün neler yapabileceğini gösterir. Bu örnekte, sağ üstteki tanıtım yazısının üzerine geliyorum. Simge arka planını maviye ve simgeyi beyaza değiştirmek için bir vurgulu efekti kullanır.

Bu, daha fazla oku düğmesi için güzel bir vurgulu efekti kullanır. Özellikle simgeler için altıgenleri seviyorum. Modülleri paralaks bir arka plan üzerinde görüntüler.

İşte Klasik düzenin başka bir bölümü. Üstteki modül seti, bir paralaks arka planı içerir. Alttaki modüller, renkli arka planların güzel bir örneğini göstermektedir.

Imagecard düzeni ilginç. Aralarında boşluk olmayan üç kart görüntüler. Simgeler görüntüyle örtüşür ve üç yerleştirme seçeneğinin tümünü gösterir. Kart bir blog kartına benziyor. Bu, makalelere, sayfalara, hizmetlere vb. bağlantılar için iyi çalışır.

Easebox düzeni birçok örnek içerir. Üstteki tanıtım yazıları simgeleri bağlantı olarak kullanırken, alt kısımdaki tanıtım yazıları daha fazla oku düğmesini göstermek ve arka planın ve metnin rengini değiştirmek için fareyle üzerine gelme animasyonunu kullanır.

Easebox düzeninin fareyle üzerine gelme animasyonunu da kullanan başka bir bölümü burada. Fareyle üzerine gelindiğinde daha fazla oku düğmesi görünür.

Ekstra ile Genişletilmiş Divi Blurb

Divi Blurb Extended, Extra ile aynı şekilde çalıştı. Bu, Easebox düzenidir.

Bu, Imagebox düzenidir. Extra ile çalışmasını sağlamak için herhangi bir stil değişikliği gerekli değildi.

Divi Blurb Genişletilmiş Lisans, Belgeler ve Destek

Divi Blurb Extended'ı yayıncının web sitesinden satın alabilirsiniz. Kullanılabilir iki lisans vardır:

• Tek Site – 19 $
• Uzatılmış – 49 $

Belgeler, yayıncının sitesinde bir SSS tarafından sağlanmaktadır. Destek e-posta yoluyla sağlanır.

Biten Düşünceler

Divi Blurb Extended, standart Divi tanıtıcı modülüyle hemen hemen aynı şekilde çalışır, ancak simge şekilleri, daha fazla oku düğmesi ve animasyonlu bazı düzenler dahil olmak üzere birkaç yeni özellik ekler. Eklenen düzenler iyi bir başlangıç ​​noktası sağlar ve modülün yapabileceği bazı şeyleri size gösterir.

Standart tanıtım modülünü nasıl kullanacağınızı biliyorsanız, bunu kullanmakta herhangi bir sorun yaşamayacaksınız. Ayarları sezgisel buldum ve CSS biliyorsanız, öğeleri daha da özelleştirebilirsiniz. Tanıtım yazılarınız için daha fazla özellik istiyorsanız, Divi Blurb Extended bir göz atmaya değer.

Senden duymak istiyoruz. Divi Blurb Extended'ı denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

SilviaC / Shutterstock.com aracılığıyla Öne Çıkan Görsel