Divi Eklentisi Vurgusu: Divi Booster

Divi Booster, Divi'yi geliştirmek için çok sayıda öğretici ve kod oluşturduğu Dan of DiviBooster.com'dan bir eklentidir. Bu kod daha sonra kolay kullanım için Divi Booster eklentisine eklenir. Divi Booster, Divi'ye 50'den fazla yeni konfigürasyon ekler. Geliştirmeler üstbilgileri, sayfaları, gönderileri, modülleri, kenar çubuğunu, altbilgiyi, menüleri, eklentileri ve daha fazlasını etkiler.

Kodu öğreticilerden kopyalayıp yapıştırabilirsiniz, ancak o kadar çok şey var ki, eklenti tasarruf ettiğiniz zaman kendini amorti ediyor. Sadece eklentiyi yükleyin ve seçimlerinizi yapın. Tamamlandı. Kodlama gerekmez. Eklenti olduğu için alt tema kullanmanız gerekmeyecek ve alt temaları her değiştirdiğinizde kod eklemeniz gerekmeyecek.

Divi Booster hızlı bir eklentidir. Bir ziyaretçinin bir sayfa talep etmesini beklemek yerine, ayarlarınızı kaydettiğinizde kodunu önceden derler ve küçültür. Aslında temanın içine kod yerleştirmekten daha hızlı yüklenir.

Extra ile çalışır mı? Dosyaların bazıları Ekstra ile çalışır, ancak hepsi değil. Dan, ExtraBooster sitesinde kod ve öğreticiler sağlar (ancak henüz eklenti yok – bir eklenti istiyorsanız, ilgilendiğinizi bilmesini sağlayın).

Divi Booster'daki geliştirmelere bir göz atın.

Divi Booster Menüsü

Divi Booster, panodaki Divi Menüsüne eklenir. Divi Booster menüsü, ana kategoriler için 12 akordeon içerir. Birini açtığınızda, o kategorideki seçenekleri göreceksiniz. Bazıları daha fazla seçenek içeren kategoriler içinde akordeon içerir. Her seçeneğin açılması size seçim yapabileceğiniz alanları verir. Her seçimin, o seçeneğin orijinal blog gönderisine bağlantı veren, her birini daha ayrıntılı olarak açıklayan ve o seçenek için kod sağlayan bir bilgi simgesi vardır. Zaten eklentide olduğu için koda ihtiyacınız olmayacak.

Site Geneli Ayarlar

Simgeler

Tanıtım yazıları ve galeri modülleri için kendi simgelerinizi ekleyebilirsiniz. İstediğiniz kadar yükleyebilirsiniz. İlkini yükledikten sonra ayarlarınızı kaydedin, başka bir yükleme alanı görünecektir. Altbilginizde görünmesi için daha fazla sosyal ağ simgesi de ekleyebilirsiniz. Sosyal medya bağlantılarını yeni bir pencerede açma seçeneği de vardır.

İşte dokuz yeni sosyal simge.

Düzen

Düzen ayarları, başlığın üzerine bir resim yerleştirmenize, ekranın sol tarafında kalan yapışkan bir widget eklemenize, içeriğin kutu düzeninde üstbilgiyle örtüşmesine izin vermenize ve kutu düzenindeki gölgeyi kaldırmanıza olanak tanır.

Bu örnek, başlıktan, yapışkan pencere öğesi alanından ve ana içerik çakışmasından önce bir görüntü kullanır. Bu, bazı ilginç düzenler oluşturmaya yardımcı olacaktır. Afişler başlığın üzerine kolayca yerleştirilebilir ve yapışkan widget alanına bir bülten kaydı veya herhangi bir mesaj türü yerleştirebilirsiniz.

Bağlantılar

Bu, bağlantı bağlantısı kaydırmayla ilgili yaşayabileceğiniz sorunları giderir. Örneğin, bir bölüme bir CSS kimliği yerleştirirseniz ve ardından menüde o bölüme bir bağlantı yerleştirirseniz, bağlantı sizi o bölüme götürmelidir. Ancak, okuyucularınızı istediğiniz yerin biraz üstüne veya altına götürebileceği durumlar vardır. Bu sorunu giderir.

Site Hızı

Site hızı, sayfalarınızın indirme boyutunu ziyaretçinizin tarayıcılarına gönderilmeden önce küçültmek için sıkıştırma kullanır. Bu, PageSpeed ​​Insight'ın ekstra bir eklentiye ihtiyaç duymadan sıkıştırmayı etkinleştirmeniz gerektiği mesajını iletmenize yardımcı olacaktır.

başlık

Üst Başlık

Üst başlık (telefon numaranızı ve e-postanızı yerleştirebileceğiniz en üstteki küçük menü) seçenekleri, tüm simgeleri menünün sağ tarafına taşımanıza, mobil cihazlarda ikincil menü için sosyal simgeleri göstermenize, fareyle üzerine gelindiğinde bağlantıyı değiştirmenize olanak tanır. renk, iletişim simgelerini sola ve sosyal simgeleri sağa yerleştirin, sol tarafa metin ekleyin ve telefon numaralarını tıklanabilir hale getirin.

İşte bu seçeneklerin çoğunun ekranda nasıl göründüğüne bir göz atın. İletişim bilgileri soldadır. Ana başlık örneğinde, onu sağa yerleştirdim.

Ana Başlık

Ana başlık, widget'ları ve kısa kodları yerleştirmek için gezinme bağlantılarının altına yeni bir widget alanı eklemek ve başlık bağlantılarını dikey olarak ortalamak gibi birkaç yeni düzen özelliğine sahiptir. Başlık küçülmeden önce okuyucuların kaydırması gereken piksel sayısını ayarlayabilirsiniz. Ayrıca menü genişliği ve büyüteçle ilgili bir sorunu da çözecektir.

Mobil başlığı masaüstünde kullanabilir, alt kenarlığı gizleyebilir, başlığın kaydırma sırasında küçülmemesini seçebilir, başlığı gizleyebilir (bu, kendi özel başlığınızı oluşturmak için harika bir özelliktir) ve hem normal hem de küçültülmüş başlıklar

Ayrıca, alt menü öğesi vurgulu ve menü bağlantısı vurgulu için renk seçenekleri vardır, alt menü bağlantı renklerini düzeltin ve arama simgesi vurgulu rengini değiştirin. Menü öğeleri arasındaki boşluğu ayarlayın, logo bağlantı URL'sini değiştirin ve ortalanmış menü seçme sayfası metnini değiştirin.

Burada üst başlık metin, tıklanabilir bir telefon numarası, tüm sosyal simgeleri içerir ve her şey sağ tarafa taşınır. Ana başlık, metin, reklam, kod vb. yerleştirebileceğim yeni bir widget alanı içeriyor. Tüm menü bağlantıları ortalanmıştır.

Bu, mobil başlığı kullanır. Menünün önüne metin yerleştirdim ve bir seçim yapmak için menüyü açtım.

Mobil Başlık

Mobil başlık, uygulama stili bir düzen kullanabilir. Arama simgesini gizleyebilir, menü düğmesinden önce metin ekleyebilir, yazı tipi boyutunu ayarlayabilir ve ikincil menüleri gizleyebilirsiniz.

Gönderiler

Gönderiler için, öne çıkan görseli içerik alanı kadar geniş yapabilir, yorum butonunun yanıt verebilirliğini düzeltebilir, öne çıkan gönderi yüksekliğini kırpmaktan ve öne çıkan görsellerin esnemesini engelleyebilirsiniz.

Burada öne çıkan görsel, içerik alanıyla aynı genişliğe sahiptir. Görüntü kırpılmadı veya uzamadı. Ayrıca, bu, menüden önce eklenen metinle mobil menüyü kullanıyor.

Sayfalar

Bu, Divi oluşturucu sayfalarına bir sayfa düzeni seçeneği eklemenizi sağlar. Bu normalde yalnızca varsayılan düzenleyicide bulunur. Bunu çok beğendim çünkü varsayılan oluşturucuya geçmek ve değişikliği yapmak zorunda kaldım. Bu basit görünüyor, ancak büyük bir zaman kazandırabilir.

Kenar çubuğu

Kenar çubuğunun arka plan rengini değiştirebilir ve bölme çizgisini gizleyebilirsiniz. Burada kenar çubuğunu açık mor yaptım ve ayırıcıyı kaldırdım.

altbilgi

Bu, altbilgi bağlantılarını ortalamanıza ve bunları kendi metniniz veya HTML'nizle değiştirmenize olanak tanıyan bir altbilgi düzenleyicisidir. Telif hakkı sembolünü ve yılı göstermenin iki farklı yolunu göstermek için kısa kodlar dahildir.

Kendi metnimi ekledim ve telif hakkı ve tarih kısa kodlarını ekledim.

Divi Oluşturucu

Standart Oluşturucu

Standart Divi oluşturucu özellikleri, modül ayarlarını tam ekran yapmanıza, oluşturucuyu özel gönderi türlerinde etkinleştirmenize (bu, WooCommerce vb. için harikadır) ve minimum CTA düğme genişliğini ayarlamanıza olanak tanır.

Tam ekran modül ayarları, seçeneklerinizin çoğunu ekranda görmek için kaydırmanın bir kısmını ortadan kaldırır. Bu, düzenler ve modüller gibi alanı kullanan seçenekler için daha yararlıdır. Tek bir sütun tutanlar o kadar fayda sağlamaz.

İşte bir WooCommerce ürün gönderi türüne eklenen Divi Builder. Divi içeriği, ürün açıklama alanına yerleştirilir. Bu, Divi düzenine yerleştirebileceğiniz her şeyi içerebilir.

Görsel Oluşturucu

Görsel oluşturucu için, modüllerde vurgulu kenarlığı gösterebilir. Normalde sadece bölümler ve satırlar sınırları gösterir. Bu, yerleşim alanını görselleştirmek ve planlamak için yararlıdır.

Modüller

Modüllerde birçok özelleştirme var. İçerirler:

Akordeon – varsayılan olarak onları kapatın ve kapatılabilir yapın.

Blurb – soldaki simgeleri büyütün .

Geri sayım – günlerde baştaki sıfırı gizleyin.

Galeri – resim boyutları için çeşitli seçeneklere sahiptir. Satır başına görüntü sayısını ve genişliklerini ve yüksekliğini değiştirin, kenarlık rengini değiştirin, görüntüleri ortalayın, içeri kaydırma efektini devre dışı bırakın ve başlıkları gizleyin.

Başlık (tam genişlik) – aşağı kaydırma simgesinin sıçramasını sağlar. IE tam ekran görüntüleme sorunlarını düzeltme seçeneği de vardır.

Harita – pin simgesi olarak kendi resminizi kullanın. 46×43 görüntü kullanır.

Portföy – tıpkı galeri gibi, satır başına görüntü sayısını değiştirebilir ve görüntünün yüksekliğini ve genişliğini ayarlayabilirsiniz. Ayrıca görüntülerin kabı doldurmasını sağlayabilirsiniz.

Portföy (filtrelenebilir) – filtrelenebilir portföy, normal portföy ile aynı özelliklere sahiptir.

Portföy (tam genişlik) – ızgara görünümünde proje görüntüleri arasına boşluk ekleyin. Ayrıca görüntülerin kırpılmasını veya gerilmesini de önleyebilirsiniz.

Navigasyon Sonrası – sonraki ve önceki bağlantıları değiştirin.

Gönderi Kaydırıcısı – 'daha fazla oku' düğmesi etkinse , slayt görüntüsünü gönderiye bağlayın . Kontrolleri kare yapıp içi boş yapabilirsiniz.

Fiyatlandırma Tablosu – hariç tutulan özellikle ilgili bir alan sorununu giderir. Bu, stili geliştirmek, yuvarlatılmış köşeler kullanmak ve + ve x özellikli madde işareti grafiklerini kullanmak için Geno'nun bazı özelliklerini içerir. Ayrıca, kullanılamayan özellikler için üstü çizili kullanabilirsiniz.

Kayıt – Geno'dan yatay bir stil kullanan bir özellik.

Kaydırıcı – varsayılan kaydırıcı yüksekliğini ayarlayın, metne opaklıkla bir arka plan rengi ekleyin, resimleri sağa yerleştirin, bağlantıları yeni bir sekmede açın, içeri kaydırma efektini devre dışı bırakın, kontrolleri kare yapın, içi boş yapın ve içeriğe resim bağlantısı.

Metin – madde işareti listelerinin etrafındaki boşluğu artırın.

İşte kare ve içi boş nokta navigasyonlu bir kaydırıcı, gezinme, geliştirilmiş fiyat tablosu ve yatay e-posta kayıt formu dahil olmak üzere birkaç modül özelleştirmesini kullanan bir sayfa.

Eklentiler

WooCommerce – alışveriş sepeti simgesini başlıktan kaldırın ve mağazanın satır başına dört öğe göstermesini sağlayın.

Diğer – Simple Lightbox üst başlık çakışması sorununu düzeltin ve Chrome için PageLoader düzeni sorunlarını düzeltin.

İşte satır başına dört ürün gösteren bir dükkan. Başlıkta bir alışveriş sepeti olmadığına dikkat edin.

CSS Yöneticisi

Bu size Divi paneline yerleştirdiğiniz özel CSS'yi gösterecektir. Her yerde kullanmak için istediğiniz kadar özel CSS kutusu ekleyebilirsiniz.

Geliştirici Araçları

Aşağıdakiler dahil olmak üzere geliştiriciler için çeşitli araçlar vardır:

İçe / Dışa Aktar – eklenti ayarlarını içe veya dışa aktarın.

Oluşturulan CSS – satır içi CSS kullanın ve küçültmeyi devre dışı bırakın. Eklentinin CSS'sini görüntüleyebilirsiniz.

Oluşturulan JS – satır içi JavaScipt kullanın ve küçültmeyi devre dışı bırakın. Eklentinin JavaScript'ini de görüntüleyebilirsiniz.

Oluşturulan Altbilgi HTML'si – eklentinin oluşturulan altbilgi HTML metin dosyasını görüntüleyin.

Oluşturulan .htaccess Kuralları – eklentinin .htaccess dosyasını görüntüleyin.

amortismana tabi

Bunlar, Divi 2.4 veya daha düşük bir sürümünü kullanıyorsanız yine de kullanabileceğiniz özelliklerdir. Bu özellikler artık Divi'de mevcuttur. Daha eski bir sürüm kullanmanız durumunda özellikler hala dahil edilmiştir.

lisanslama

Eklenti, kendiniz ve müşterileriniz için istediğiniz kadar web sitesine kurulabilir. Lisans anahtarı gerekmez.

Son düşünceler

Divi Booster, Divi'ye birçok geliştirme ekler ve bunları temiz arayüzden kolayca seçebilirsiniz. Yalnızca birkaç geliştirme kullanıyor olsaydım, yalnızca bir alt temayla kod kullanırdım, ancak 50'den fazla iyileştirmeye sahip olmanın yanı sıra, eklentinin kodu tema dosyalarına yerleştirmekten daha hızlı olması, eklentiyi kullanmayı en iyi seçenek haline getiriyor.

Divi Booster'ı kullanımı kolay buldum ve hemen hemen tüm özelliklerini kullanırdım. Özellikler hakkında daha fazla bilgi edinmek istersem, blog yazısı sadece bir tık uzağınızda. Eklenmesini istediğiniz özellikler varsa talep edebilirsiniz.

Divi Booster'ı denediniz mi? Eğer öyleyse, aşağıdaki bölümdeki yorumlarınızı okumak isteriz!

Mix3r / Shutterstock.com tarafından Öne Çıkan Görsel.