Divi Eklentisi Vurgusu: Divi Şerit Modülü

Divi Ribbon Module, modülün içeriğine şekillendirilebilir bir şerit ekleyen Divi için üçüncü taraf bir eklentidir. Bir resim, düğme, başlık, içerik ekleyin ve her öğeye istediğiniz kadar ayrıntılı stil ekleyin. Bir ürün satışını vurgulamak, harekete geçirici mesaj oluşturmak veya herhangi bir öğeye dikkat çekmek için kullanın. Bu Divi eklentisi vurgusunda, Divi Ribbon Module'e bir göz atacağız ve neler yapabileceğini göreceğiz.

Divi Ribbon Modülünü Takma

1. Eklentiye gidin ve indirin
2. WordPress panosunda Eklentiler > Yeni Ekle'ye gidin
3. Eklenti Yükle'ye tıklayın
4. Bilgisayarınızdan sıkıştırılmış dosyayı seçin
5. Şimdi Yükle'yi tıklayın
6. “Eklenti başarıyla yüklendi” ifadesini gördüğünüzde, Eklentiyi Etkinleştir'i tıklayın.
7. Araçlar > Divi Ribbon Plugin License'a gidin ve lisans anahtarınızı girin

Divi Şerit Modülü

Divi Ribbon adlı Divi Builder'a yeni bir modül eklendi. Modül bir tanıtım yazısı oluşturur (bir başlık, içerik, simge, resim ve düğmelerle birlikte) ve bu tanıtım yazısına bir şerit yerleştirir. Modüldeki diğer öğelerin yanı sıra şeridin yerleşimi ve stili üzerinde kontrol sizde. Tanıtım yazısı, varsayılan olarak bir kutu gölgesi içerir.

Divi Şerit İçeriği Sekmesi

İçerik sekmesi, ana ayarları, tanıtım yazısı döndürmeyi, resim ve simgeyi, bağlantıyı, arka planı ve yönetici etiketini içerir. Ana ayarlar, şerit türü, konum, metin, başlık ve içerik için seçimler sağlar.

Ana ayarlar

Seçilebilecek 7 şerit türü vardır. Aynı şekilde çalışırlar ve aynı içeriği içerirler, ancak farklı şekiller gösterirler. Şekiller, uçları çatallı şeritleri, tanıtım yazılarını kapsayan şeritleri, yandaki veya üstteki şeritleri ve çatal veya daire gibi farklı uç tiplerine sahip olan şeritleri içerir. Bu size birçok görüntüleme seçeneği sunar.

Şerit türlerinin her biri, görüntüleme yeteneklerine bağlı olarak farklı konum seçeneklerine sahiptir. Bu örnek, köşe şeridini göstermektedir. Sol üstte veya sağda veya sol veya sağ altta yerleştirilebilir.

Çatallı, sol veya sağ üstte görüntülenebilir.

Tam genişlik yukarıda veya aşağıda görüntülenebilir.

Bazı şerit türleri, seçtiğinizde açılan başka seçeneklere sahiptir. Bu örnek, tam genişlikte şeridi gösterir. Konumunu ve yüksekliğini ayarlayabilirsiniz.

Yan şerit, konum, genişlik ve yükseklik için ayarlamalar içerir. Tüm kontroller standart Divi kaydırıcılarıdır, bu nedenle kullanımı kolaydır.

Başlık ve içerik kartın kendisine eklenir. İçerik alanında görsel ve metin sekmeleri vardır ve bunlar medya, bağlantılar, kod ve kısa kodlar içerebilir.

Bulanıklık Döndürme

Bulanıklık döndürme, kart yan çevrildikten sonra içeriği gösteren bir 3B çevirme seçeneği ve yazı tipinde gösterilecek bir resim ve simge ekler.

Medya kitaplığınızdan resimler ve listeden simgeler ekleyin. Önce görüntü/simge gösterilecek ve ardından kart, üzerine gelindiğinde içeriği göstermek için dönecektir. Resimleri arka plan olarak da ekleyebilirsiniz.

Buton

Düğme, metin, bağlantı, pencere seçenekleri, dolgu ve kenar boşluğu içerir. Düğmeyi şeridin altından çıkarmak için biraz sol kenar boşluğu ekledim.

Divi Şerit Tasarım Sekmesi

Divi Şerit Tasarımı sekmesi, görüntü ve simge, döndürme, metin, boyutlandırma, şerit, başlık metni, gövde metni, düğme, boşluk, kenarlık, filtreler, dönüştürme ve animasyon için ayarları içerir.

Resim ve Simge

Görüntü ve simge ayarları, görüntü genişliğini, kenarlığı, kutu gölgesini, renkleri, karışım modunu vb. ayarlamanıza olanak tanır.

döndürme

Döndürme ayarları, yüz rengini ayarlamanıza izin verir. Bu, görüntünün arkasındaki arka plandır. Orijinal kart kenarlığını devre dışı bırakın, böylece kendinizinkini oluşturabilirsiniz. Döndürme simgesini ayarlayın. Simge için birçok seçeneğe sahiptir. Bir simge rengi, arka plan, kenarlık ekleyin ve döndürme öncesi bir yazı tipi boyutu kullanın.

İlk başta görüntü ve ikon ayarları yerine ikon ayarının burada olması biraz kafa karıştırıcıydı ama bu kısımda olması mantıklı geliyor. Görüntü ayarlarını da buraya yerleştirmek mantıklı olur ama o kadar çok var ki ayrı bir sekmeye ihtiyacı var.

Metin Aralığı

Metin aralığı, başlık ve gövde metni için kenar boşluğu ve dolgu ayarları sağlar. Normalde, şerit içeriğin üzerinde görüntülenir. Bu, görünür olmasını istiyorsanız, şeridin konumuna göre metin konumlandırmasını ayarlamanıza olanak tanır. Bu örnekte hem başlık hem de gövde metni için dolgu ekledim.

Şerit Ayarları

Şerit ayarları, rengi değiştirmenize, şeridi dolduracak bir görüntü eklemenize, şerit ucunu kapatmanıza (stilin kartla çakışmasını durdurmak için), yazı tiplerini ayarlamanıza, bir metin gölgesi eklemenize, şerit köşelerini ve kenarlığı ayarlamanıza olanak tanır. Bu örnekte şerit rengini değiştirdim.

Görüntü şeridi dolduracak. Yalnızca JPG'leri çalıştırabildim, ancak iyi çalışıyor. Nasıl görüntüleneceğini kontrol edebilmeniz için zaten istediğiniz boyutta bir resim seçmenizi öneririm.

Şerit ucunu kapatmak, bu örnekte şeridin solunda görebileceğiniz gibi, kartın arkasına katlanan kısımdan kurtulur.

Metin

Başlık ve gövde metni, beklenen tüm seçenekleri içerir. Bu örnekte, her ikisinin de boyutunu büyüttüm, başlık metninin rengini değiştirdim ve her ikisini de ortaladım.

Buton

Düğme stili, beklenen tüm seçenekleri içerir ve arka plan görüntüsünün üzerinde gradyanı görüntülemek için bir özellik ekler. Bu örnekte, yazı tipi boyutunu büyüttüm, yazı tipi ve kenarlığın rengini değiştirdim, kenarlığı yuvarladım, arka plana degrade verdim ve bir gölge ekledim.

Divi Şerit Örnekleri

İşte Divi Şeridi'nin Divi düzenlerinde nasıl göründüğüne dair birkaç örnek.

Satılık Şerit

İlk örnek için sağdaki CTA'yı değiştireceğim.

Üç modülden oluşuyordu: resim, metin ve düğme. Aynı arka planı, metni ve düğmeyi kullanacağım ve onu tek bir Divi Ribbon modülü ile yeniden oluşturacağım.

İşte Divi Ribbon kullanarak sonuç. Resmi, başlık metnini ve gövde metnini orijinaliyle eşleşecek şekilde ekledim. Ayrıca şeridi köşeye ekledim ve düğmeyi ortaya taşıdım ve şeridin arka planından kenarlık rengini kullandım. Orijinal, sütundaki görüntüyü kullandı. Kaldırdım ve görüntüyü modüle ekledim, ancak her iki şekilde de çalışacaktı.

Dalgalı görüntüyü (üçgen dalga) dahil etmedim, ancak içerik alanına kolayca eklenebilir. Grafiğin başlığın üzerinde görünmesi için başlığın da içerik alanına taşınması gerekir. On Sale şeridi, onu biraz daha öne çıkarıyor.

Son Projeler Şerit

Bunun için bir görüntüyü Divi Ribbon modülüyle değiştirdim ve en son projeleri görmek için CTA olarak tam genişlikte bir şerit ekledim. Şerit, düzenden bir arka plan görüntüsüne ve yazı tiplerine sahiptir. Kutu gölgesi varsayılan ayardır. Metni ortaladım.

Ürün CTA Şeridi

Bu örnek için, Leather Company düzeninin mağaza sayfasının kahraman bölümüne bir Divi Ribbon modülü ekledim. Düzenden bir resim kullanarak standart satış CTA'sını değiştirdim. Şerit ve düğme, düzendeki renkleri kullanır. Şeridi sağ alt köşeye taşıdım ve şerit ucunu çıkardım.

Bu bir Özel bölümdür. Uzmanlık bölümlerinde iyi çalıştığını görmekten memnunum. Birçok üçüncü taraf modülü bu tür bölümlerle her zaman uyumlu değildir.

Test Et ve Satın Al

Divi Ribbon Module'ü geliştiricinin web sitesinden kişisel veya ticari kullanım için tek bir web sitesinde 11 $ karşılığında satın alabilirsiniz.

Ayrıca, ihtiyaçlarınız için çalışıp çalışmadığını görmek için satın almadan önce eklentiyi test edebilirsiniz. Eklentiyi test etmek için bağlantı, geliştiricinin satış sayfasında bulunur. Divi Builder'a ve eklentiye tam erişim sağlar, böylece onu kalbinizin içeriğine göre şekillendirebilirsiniz. Denemenizi tavsiye ederim.

Biten Düşünceler

Divi Ribbon Module, Divi Builder için ilginç bir modüldür. Görüntü eklemek için birkaç yer içerir ve bir başlık, içerik, simge ve düğme ekleyebilirsiniz. Tüm bu özelliklerle birlikte, tanıtım yazısı, harekete geçirici mesaj, ürün bağlantısı, blog bağlantısı vb. olarak harika çalışır. Buna, satışlara veya diğer CTA'lara dikkat çekmek için şekillendirilebilir bir şerit ekleyin ve bu eklenti, zor stil seçenekleri sunar. tek bir modül ile alın.

Divi Ribbon Module, Visual Builder ve Theme Builder ile harika çalışır. Tavsiye etmesi kolay mükemmel bir eklentidir.

Senden duymak istiyoruz. Divi Ribbon Modülünü denediniz mi? Yorumlarda deneyiminizi bize bildirin.

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