Divi Eklentisi Vurgusu: Divi Araç Kutusu

Divi Toolbox, Divi'ye normalde CSS, JavaScript, PHP veya çok sayıda bağımsız eklenti gerektiren birçok yeni efekt ekleyen üçüncü taraf bir eklentidir. Efektlerin kullanımı ve özelleştirilmesi kolaydır ve Divi web sitenize kalabalığın arasından sıyrılmak için ekstra bir ışıltı verir.

Efektler arasında site genelinde değişiklikler, yeni mobil menüler, parçacık arka planları, altbilgiler, widget'lar, stil, animasyonlar, başlıklar, gezinme, yeni blog düzenleri, yeni konumlardaki Divi düzenleri, giriş ekranı özelleştirmesi, açılır pencereler ve çok daha fazlası bulunur. Özelliklerin çoğu, tema özelleştiriciye yapılan yeni eklemelerle şekillendirilebilir. Divi Toolbox, Extra veya Divi Builder eklentisi ile çalışmaz.

Divi Araç Kutusu Genel Ayarları

Divi Araç Kutusu seçenek ekranı, Divi gösterge tablosu menüsüne eklenir. Ayarlar burada etkinleştirilir, ancak ayarlamalar özelleştiricide yapılır.

Genel ayarlar, genel başlık stilini, oturum açma sayfasını özelleştirmeyi, projeleri gizlemeyi, SVG dosya türü yüklemelerine izin vermeyi, özel tarayıcı kaydırma çubuğunu, 404 sayfa ayarlarını (bir düzen seçin ve üstbilgiyi ve altbilgiyi gizleyin) ve sosyal simge ayarlarını (stillendirmeyi etkinleştir, içinde aç) içerir. yeni bir sekme ve daha fazla simge ekleyin).

Daha fazla sosyal simge eklemek, 9 sosyal ağın daha URL'sini girebileceğiniz bir alan açar.

Özelleştiricide, etkinleştirdiğim ayarları düzenleyebileceğim Genel sekmesi burada. Ayarlar, başlıkları ve yazı tiplerini, tarayıcı kaydırma çubuğunu ve oturum açma ekranını içerir. Bu örnekte, h1 ve gövde metninde birkaç ayarlama yaptım ve kaydırma çubuğuna stil ekledim. Ayrıca daha fazla sosyal simge ekledim.

Giriş ekranı için değişikliklerinizi yapmanız ve ardından çıkış yapmanız veya ekranı başka bir tarayıcıda görüntülemeniz gerekir.

Arka plan resmi, logo ekledikten ve alanların ve metnin boyutunu ve renklerini değiştirdikten sonra giriş ekranım. Değişikliklerinizi yaparken ekranı göremediğiniz için biraz ince ayar yapılması gerekiyor.

Divi Araç Kutusu Başlık Ayarları

Başlık ayarları menüye stil ekler, özel bir açılır menüyü etkinleştirir, bir CTA menü düğmesi ekler, sabit menüde logoyu değiştirir, çakışan logoyu etkinleştirir ve ana sayfada gezinmeden önce bir Divi düzeni ve öncesi ve sonrası bir düzen ekler diğer sayfalarda gezinme.

CTA menü düğmesi, CTA'yı ilk veya son menü öğesine veya özel bir sınıf uygulamanıza olanak tanır. CSS'yi ve nereye ekleneceğine ilişkin talimatları sağlar.

İşte başlık için özelleştirici. Menünün üstüne bir düzen ekledim (bu örnekte bu yalnızca bir metin modülüdür, ancak isterseniz tam bir düzen ekleyebilirsiniz). Örtüşen logonun gölge efektli kare bir kutusu vardır. Logo boyutunu 200'den 140'a değiştirdim ve sosyal simgeleri ana menüye taşıdım. CSS etkisini görebilmeniz için Hizmetler menü öğesinin üzerine geliyorum.

Divi Araç Kutusu Altbilgi Ayarları

Altbilgi ayarları, yapışkan bir altbilgi, altbilgi ortaya çıkarma, menüleri ve widget'ları özelleştirme, başa dön düğmesini özelleştirme (özel bir düğme bağlantı seçeneği ekler) ve altbilgi düzenlerinden önce ve sonra ekleme içerir.

Bu örnekte, başlık ve menü yazı tiplerini tamamı büyük harf olarak değiştirdim ve aralığı artırdım. Ayrıca vurgulu renklerini ayarladım ve üzerine gelindiğinde metnin yanına bir simge ekledim. Altbilgi düzeninden sonra bir düzen ekledim. Bu, açıklanmış bir altbilgi kullanır (bu nedenle metin, üstündeki metin modülünün arkasındadır).

Başa dön düğmesinin stilini metni görüntüleyecek şekilde ayarladım. Gölge efekti var ve konumunu ayarladım. Renkleri varsayılan olarak bıraktım. Alt metni ve sosyal simgeleri ortaladım. Fareyle üzerine gelme efekti için Grow'u seçtim (büzülme, yukarı hareket etme, aşağı hareket etme, yalpalama, kalp atışı, jöle ve nabız da içerir). Etkisini görebilmen için Facebook simgesinin üzerine geliyorum.

Divi Toolbox Mobil Ayarları

Mobil ayarlar, mobil menü kesme noktası (menü masaüstünden mobile değiştiğinde tam ekran genişliği), özel stiller, logoyu değiştirmek, hamburger simgesi tıklama efektini seçmek, iç içe alt menüyü daraltmak ve etkinleştirmek için bir alan içerir. birkaç CSS sınıfı. CSS sınıfları, sütunları tersine çevirmenize ve metni, modülleri ve düğmeleri ortalamanıza olanak tanır.

İşte, Duyarlı seçili olarak Google Chrome'daki sayfaya bir bakış. Ekran boyutunu 980 pikselden küçük aldığımda, seçtiğim mobile ikona dönüştü ve seçtiğim animasyonlu hamburger menüsünü ekledim.

Bu ekranda mobil menünün arka plan rengini, vurgulu arka plan rengini ve hamburger menüsünü şekillendiriyorum. Ana menü öğelerinin metnini tamamı büyük harf olarak değiştirdim ve CTA metin standardını bıraktım. Ayrıca CTA menü öğesinin arka planını da değiştirdim. Ayrıca menüyü ve simge boyutunu da ayarlayabilirsiniz.

Divi Araç Kutusu Blog Ayarları

Blog ayarları, kenar çubuğunu ve widget'ları, gönderi metasını, arşiv ve kategori sayfalarını özelleştirmenize, bir düzen seçmenize (6 seçenek arasından), arşiv kenar çubuğunu gizlemenize ve daha fazla oku düğmesi metnini özelleştirmenize olanak tanır.

Tek gönderiler için kenar çubuğu düzenini seçebilir, gönderi başlığını gizleyebilir, bir yazar kutusu ekleyebilir, önceki ve sonraki bağlantıları ekleyebilir, ilgili gönderiler ekleyebilir ve yorum formunu özelleştirebilirsiniz. Tek gönderilere, arşivlere, kategorilere, yazar sayfalarına ve arama sonuçları sayfalarına navigasyondan sonra özel düzenler de ekleyebilirsiniz.

Blog sayfası için kenar çubuğuna bir gölge efekti ekledim, yazı tiplerini ve stillerini değiştirdim, arama kutusunun stilini değiştirdim ve kenarlığın boyutunu artırdım. Alternatif bir düzen kullanıyor ve daha fazla oku düğmesi metnini özelleştirdim.

Bu örnek düzen 6'dır. Meta yazı tipi renklerini yeniden özelleştirdim ve üzerine gelme rengi ekledim. Ayrıca daha fazla oku düğmesi arka planını da özelleştirdim.

Bireysel blog gönderileri, blog ayarlarına eklediğiniz öğelerin her birini özelleştirmenize olanak tanır. Bu ekranda ilgili gönderileri, sonraki ve önceki bağlantıları ve yazar kutusunu özelleştiriyorum. Tüm metin, renkler, gölgeler vb. üzerinde kontrol sizde.

Bu örnekte, yorum formunu özelleştiriyorum. Alanın renkleri (hem odak hem de odak dışı), kenarlık, metin, renkler, düğme vb. üzerinde kontrole sahipsiniz. Düğme arka plan rengini, alanın odak rengini değiştirdim, alana bir kenarlık ekledim ve alanı değiştirdim. yarıçap.

Divi Araç Kutusu Modülleri Ayarları

Modüller sekmesi, fareyi takip et üzerine gelme efekti eklemek, ince bir e-posta seçeneği eklemek (üç farklı seçenek için CSS sağlar), ikincil düğmeler (yeni bir özelleştirme katmanı ekler) ve birçok ince ayar eklemek için ayarlar sağlar.

İnce ayarlar arasında akordeon ve geçiş modülleri için animasyonlu bir üçgen simgesi, fiyatlandırma tabloları için yatay alt kenarlığı ve dolguyu kaldırma, referanslarda içeriğin altındaki portre resmini taşıma, yatay kaydırma çubuklarını gizleme ve sütunları dikey olarak hizalamak ve yüksekliği değiştirmek için CSS ekleme yer alıyor. herhangi bir öğenin görüntü alanı yüksekliğinin %100'üne kadar.

İnce e-posta tercihine bir göz atın. Tüm alanları tek bir satıra yerleştirir. Bu örnek ayrıca ikincil düğmeyi kullanır. Yalnızca CSS sınıfını eklediğim düğmeler bu değişiklikleri alacak. CSS sınıfını kullanmak, artık iki global düğme stilim olduğu anlamına geliyor.

Divi Araç Kutusu Ekstra Ayarları

Ekstralar sekmesi, modüller için ön yükleyiciler, açılır pencereler, parçacıklar arka planı, 3B eğme efekti ve paralaks kaydırma içerir.

Aralarından seçim yapabileceğiniz 12 ön yükleyici vardır. İsterseniz yalnızca ana sayfada görünmelerini sağlayabilir, geçiş türlerini ve hızlarını seçebilirsiniz. Seçici ekran, ön yükleyicilerin animasyonlarını gösterir. Bunları tema özelleştiricide daha da özelleştirebilirsiniz.

Açılır pencereleri bir menü öğesinden, düğmeden, metindeki bağlantıdan vb. herhangi bir bağlantıyla tetikleyin. İstediğiniz kadar oluşturun. Açılır pencere için önceden hazırlanmış herhangi bir düzeni seçin. Özelleştiricideki arka planı ve kapat düğmesini özelleştirin.

Bu hareketli parçacıklardır. Renk, şekil, parçacık sayısı, hız, boyut, çizgi boyutu, opaklık ve etkileşim üzerinde tam kontrole sahipsiniz. Parçacıklar için iki farklı tasarıma sahip olmanızı sağlayan iki CSS kimliği vardır.

İşte eğim özelliğine bir bakış. Eğimi, perspektifi, ölçeği, hızı ve parlamayı ayarlayabilirsiniz. Herhangi bir bölüme, satıra veya modüle ekleyin.

Divi Toolbox Lisansı

Aralarından seçim yapabileceğiniz iki lisans vardır:

• Normal Lisans (bir projede kullanım için) – 49,00 €
• Genişletilmiş Lisans (sınırsız projelerde kullanım için) – 169,00 €

Biten Düşünceler

Bu eklentinin sahip olduğu özellik ve ayar miktarından etkilendim. Divi oluşturucu ile oluşturulmamış blog gönderilerine ilgili gönderiler, önceki ve sonraki bağlantılar ve bir yazar kutusu eklemesini özellikle seviyorum. Kaydırma çubuğu da hoş bir dokunuş.

Divi modüllerinde başlık metni gibi ulaşabileceğiniz birkaç ayar vardır, ancak bu, bu ayarlar için daha fazla ayrıntı sağlar. Birkaç düzenlemenin daha eklendiğini görmek istiyorum (örneğin, yorum kutusu için gölge efektleri, daha fazla logo seçeneği, sosyal medya simgesi yerleşimleri vb.).

Divi'ye mümkün olan en kolay şekilde bir ton yeni efekt eklemekle ilgileniyorsanız, Divi Toolbox bir göz atmaya değer.

Senden duymak istiyoruz. Divi Toolbox'ı denediniz mi? Aşağıdaki yorumlarda deneyiminizi bize bildirin.

Vasabii / Shutterstock.com üzerinden Öne Çıkan Görsel