Divi Eklentisi Vurgusu – Divi Yer Paylaşımları

Divi Overlays, topluluk üyesi Tim Strifler'ın üçüncü taraf Divi geliştirme şirketi olan DiviLife tarafından Divi için bir eklentidir. Divi Builder'ı kullanarak kolayca açılır pencereler oluşturmanıza olanak tanır. Bu sadece bir modal değil. Divi Builder'ı kullanarak tam ekran kaplamalar oluşturabilir ve kaplamaya istediğiniz türde içerik ekleyebilir ve ardından düğmeler, bağlantılar, resimler vb. dahil olmak üzere sayfadaki herhangi bir şeyle tetikleyebilirsiniz. Arka plan renklerini, yazı tipini ayarlayabilirsiniz. renkler ve açılış animasyonunu seçin.

Bindirmeler, formlar, fiyat tabloları, alışveriş sepetleri, videolar, resimler, indirme bağlantıları, haritalar ve çok daha fazlasını içerebilir. Sayfa yüklendiğinde bir bindirme açacak şekilde bile ayarlayabilirsiniz. Sayfanın yüklenmesini beklemek zorunda kalmadan ek içerik görüntülemenize izin verirler.

Divi Builder'ı kullanma yeteneği, elbette, kaplamanızı oluşturmak için her modüle ve ayara erişiminiz olduğu anlamına gelir. Bu, 40'a yakın modüle erişiminiz olduğu ve diğer eklentilerin kısa kodlarını kullanabileceğiniz anlamına gelir. Bu miktardaki modüllere erişim ile yalnızca hayal gücünüzle sınırlısınız.

İndir: Divi Yer Paylaşımları İndir

Bu genel bakışta, müşteriler tarafından talep edilen bazı yeni özellikleri içeren 1.1 sürümüne bir göz atıyorum. Sonunda, sürüm 2.0'da görmeyi bekleyebileceğiniz birkaç özelliği ele alacağım. Örnekler için çok amaçlı tel kafes kitini kullanıyorum vol. 1. Hadi bakalım…

Kurulum

Herhangi bir premium eklentide yaptığınız gibi eklentiyi yükleyin, kurun ve etkinleştirin. Etkinleştirildiğinde, lisans anahtarınızı girmeniz gerekir. Ayarlar'a gidin ve kontrol panelinde Divi Yer Paylaşımları Etkinleştirme'yi seçin.

API anahtarını ve e-postayı girin (DiviLife'daki hesabınızdan) ve Değişiklikleri Kaydet'i seçin. Artık bindirmeleri oluşturmaya başlamaya hazırsınız.

Yeni Divi Yerleşimi Ekle

Bindirmeler, içeriğinizden ayrı olarak oluşturulur ve ardından basit kodlar kullanılarak içeriğinizden açılır.

Bir katman oluşturmak için Divi Katmanları'na gidin ve gösterge tablosunda Yeni Ekle'yi seçin. Buradan Divi Builder'ı kullanmayı seçebilirsiniz. Bu, özel Divi eklentileri ve modülleri dahil olmak üzere Divi Builder'ı kullanan herhangi bir normal sayfa veya gönderiyle aynı şekilde çalışır ve Divi Lead'leri kullanarak A/B testi bile yapabilirsiniz. Küresel bir modülde bile çalışırlar. Ayrıca kaplamalarınızı içe ve dışa aktarabilirsiniz.

Sağ üst köşedeki açılır kutudan bindirme animasyonunu ve ayarlarını seçin. Divi Builder'ın altında arka plan ve yazı tipi renkleri için bir seçim var.

Sağ tarafa birkaç ayar eklendi. Divi Overlay Animation adlı bir kutu, 11 animasyon arasından seçim yapabileceğiniz bir açılır kutu içerir. Bu, kaplamanın ekranda nasıl görüneceğini belirler.

Ekranda bir bindirme varken ana sayfanın kaymasını önlemek için bir onay kutusu eklendi. Bu, kullanıcıyı ekranda aynı konumda tutar, böylece bindirmeyi kapattıklarında nerede olduklarını bilirler. Bu, özellikle bindirmeyi açmak için birçok düğmeden birine tıkladıklarında yararlıdır. Bu sayede hangi butona tıkladıklarını bilirler ve ekrandaki yerlerini kaybetmezler.

Bir video modülü ekledim ve bindirme animasyonu için Genie'yi seçtim ve ana sayfanın kaydırılmasını önlemek için seçtim.

Artık bindirmeyi oluşturduğuma göre, onu bir sayfada kullanabilirim. Bunu yapmak için, panodaki Divi Kaplamaları'na gidin ve mevcut kaplamaların listesini görmek için Divi Kaplamaları'nı seçin. Bindirmeyi kullanmak için kullanmak istediğiniz kodu kopyalayın ve uygun konuma yapıştırın. Bunun nasıl yapılacağına ayrıntılı olarak bir göz atalım.

Bağlantılar, CSS kimliği kullanılarak oluşturulur. CSS kimliğini kopyalayın ve örnekte gösterildiği gibi bir açılış <a id= ve kapanış </a> etiketleri ekleyin.

Bu örnekte bir açılış sayfası kullanıyorum. Metne, uygulama mağazası logosuna, telefon görüntüsüne bir tetikleyici eklemek, bir düğme oluşturmak ve menü içine bir bağlantı yerleştirmek istiyorum.

Metin Bağlantısı

İçerik Kısa Kodunu kopyalayın ve sayfanızdaki bir koda veya metin modülüne (kısa kodları kabul eden herhangi bir modül) yapıştırın. Bir kod modülüne yapıştırdım. Bu modül içerisine istediğiniz kadar Divi Yerleşimi kısa kodu yerleştirebilirsiniz. Modülü nereye yerleştirdiğiniz önemli değil. Modülün düzeninizi etkilemediğinden emin olmak için test etmenizi öneririm.

Videoyu açmak için DEMO İZLE metnini bağlantı olarak kullanmak istiyorum. Bunu yapmak için, pano ekranındaki bindirmeler listesinden CSS kimliğini kopyalayın.

Kodu metin modülünüze yapıştırın ve metninizi şu şekilde biçimlendirin:

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

Bu durumda, metin zaten bazı HTML'lere gömülüdür, ancak sorun değil. Sadece kodu HTML içinde doğru yere yerleştirmenizi sağlayın.

Metin artık bir bağlantı olduğunu göstermek için mavidir.

Metne tıkladığımda, bindirme içine bir bağlantı yerleştirdiğim video ile karşılaşıyorum. Bindirme seçtiğim animasyonla açılıyor.

Resim Bağlantısı

Bir resme CSS kimliğini eklemenin iki yolu vardır. Kullanmanız gereken yöntem, görüntünün içeriğinize nasıl yerleştirildiğine bağlı olacaktır. İşte iki örnek:

Metin Modülü

Uygulama mağazası görselini tıklanabilir yapmak istedim ama sizi uygulama mağazasına götürmek yerine bazı seçenekler ve bilgiler sunmasını istedim. Bu, kod modülü içinde yeni bir kısa kod da gerektiren yeni bir kaplama gerektirir.

Şimdi uygulama logosuna tıkladığımda iki farklı uygulama mağazasına bağlantılar içeren bir yer paylaşımı alıyorum. Daha iyi UX/UI için düğmenin grafiğini değiştirirdim, ancak bu, içeriği temiz tutarken birden fazla seçenek sunma potansiyelini gösterir. Bu örnek için, kaplama arka planını 90 opaklıkla beyaza ve yazı tipi rengini koyu griye ayarladım.

Görüntü Modülü

Yukarıdaki örnekte, resim metin modülünün içine yerleştirildiği için kodu HTML'ye ekledim. Başka bir seçenek de görüntüyü bir görüntü modülüne yerleştirmek ve Özel CSS sekmesinde CSS kimliğini kullanmaktır.

Bu düzende cep telefonu bir görüntü modülündedir. Video yer paylaşımını açması için CSS kimliğini ekleyeceğim.

Bağlantı URL'sinde #open-overlay (veya # sembollü benzer bir metin) kullanın. Şimdi resme tıklayıp bir bindirme açabilirim.

Düğme Bağlantısı

Bir düğmeye bindirme bağlantısı eklemek, onu bir görüntüye eklemekle aynıdır. Kısa kodu kod modülüne eklemeyi unutmayın.

# metnini düğmenin URL'sine ekleyin. Açıklayıcı olduğu için daha önce olduğu gibi #open-overlay kullandım (ve Tim Strifler'dan çaldım ama bunu ona söyleme).

CSS ID kodunu Özel CSS sekmesine ekleyin.

Ve bu kadar! Yeni düğme şimdi iletişim formunu açar.

Menü Bağlantısı

Bir menü bağlantısı oluşturmak için Menü Kimliğini kopyalayın ve Görünüm , Menüler'e gidin ve bağlantıyı eklemek istediğiniz menüyü seçin ve yükleyin. (Daha fazla bilgi için WordPress'te Özel Menü Yapıları Nasıl Oluşturulur makalesine bakın).

Sağ üst köşedeki Ekran Seçenekleri'ni seçin ve Bağlantı İlişkisi (XFN) etiketli kutuyu işaretleyin.

Özel Bağlantı'yı seçin. Bağlantı olarak # sembolünü ekleyin, görüntülenmesini istediğiniz metni ekleyin ve Menüye Ekle 'yi seçin. Menü Kimliğini Bağlantı İlişkisi alanına yapıştırın ve menüyü kaydedin. Henüz yapmadıysanız, Menü Ayarları altında menüyü bir görüntüleme konumuna atadığınızdan emin olun. Bu örnekte bunu Primary Menu olarak ayarladım.

Menü öğesi artık menü yapısı içinde görünür. Üzerine tıklamak kaplamayı açacaktır. Bu, navigasyon yapısı içinde ve site genelinde bir CTA (harekete geçirici mesaj) sağlama avantajına sahiptir.

Araç

Eklenti ayrıca yeni bir widget alanı içerir. Widget'ı ve diğer yöntemlerden herhangi birini kullanmanın farkı, kısa kodu yerleştirdiğiniz yerdir. Kısa kodu modüllerin içine defalarca yerleştirmek yerine, onu bir kez yerleştirebilir ve küresel hale getirebilirsiniz. Ardından, herhangi bir sayfadaki herhangi bir öğeden, kenar çubuğundan, ana menüden veya alt bilgi menüsünden tetikleyebilirsiniz.

Bu, çok amaçlı tel kafes kiti vol'den kullandığım sayfa. 1. Videoyu bir bindirmede açması için düğmeyi tıklanabilir yapmak istiyorum. Kısa kodlarımı widget alanına ekledim (bunları bir metin widget'ının içine yerleştirerek) ve sayfadaki resme CSS kimliğini ekledim.

Widget'taki kısa kodlar, widget görünür bile olmadan çalışır. Sayfaya bir kenar çubuğu veya altbilgiye herhangi bir widget yerleştirmem gerekmiyordu. Sadece bu yeni widget alanı perde arkasına yüklendiği için işe yarıyor. Bu widget alanına başka widget'lar bırakırsanız, bunlar sayfanın sol üst köşesinde görüntülenir. Kısa kodlar varsayılan olarak metin olarak görüntülenmez, bu nedenle widget görünmez kalabilir.

Kaplamayı Kapatma

Kaplamalar, kaplamanın arka planına tıklanarak veya kaçış tuşuna basılarak köşedeki X ile kapatılabilir.

Başka bir seçenek de bindirme içindeki bir bağlantıya yakın bir sınıf eklemektir. Bu yöntemi kullanarak bir kapat düğmesi veya metin oluşturabilirsiniz. Bu, CTA'nıza bir iptal düğmesi eklemenize veya kapat düğmesini daha görünür hale getirmenize olanak tanır.

Yakın sınıf şöyle görünür:

class = "close-divi-overlay">Hayır Teşekkürler

2.0'da geliyor

İşte dört gözle bekleyeceğiniz birkaç özellik:

Zaman geciktirme özelliği, sayfa yüklendikten sonra belirli bir süreye bağlı olarak kaplamanın açılmasına izin vererek okuyucunun kaplamayı otomatik olarak açmadan önce içeriğinizi belirli bir süre görmesine olanak tanır.

Bir piksel özelliği, kaydırdıkları piksel sayısına veya kaydırdıkları sayfanın yüzdesine göre kaplamayı açar.

Okuyucu geri düğmesini seçtiğinde veya imleci adres çubuğunun üzerine getirdiğinde başka bir seçenek kaplamayı açacaktır.

belgeler

Belgeler DiviLife web sitesinde sağlanır. Eklentiyi kullanabileceğiniz çeşitli yolların bir özetini ve örneklerini içerir. Belgeler metin, video ve örnek kod içerir.

fiyatlandırma

Divi Overlays premium bir eklentidir. Tek bir sitede kullanım için 15 dolar, üç site için 29 dolar, sınırsız siteler için 59 dolar ve ömür boyu sınırsız lisans için 129 dolar. Lisansların her biri, tüm temel özellikleri ve belgeleri içerir. İlk üçü bir yıllık güncelleme ve desteği içerirken, sonuncusu ömür boyu güncellemeleri ve desteği içerir.

Son düşünceler

Divi Kaplamaları, Divi Builder'ı kullanarak kaplamalar oluşturmanın harika bir yoludur. Divi Builder, Divi modüllerini veya diğer eklentilerin kısa kodlarını kullanarak kaplamaya hemen hemen her türde içerik eklemenize olanak tanır. Divi Yer Paylaşımlarının oluşturamayacağı bir yer paylaşımı hayal etmek zor. Gerektiğinde kod eklemek birkaç adım alır, ancak yapılması kolaydır ve belgeler sizi bunun üzerinden geçirir. Getirisi, onu kullanmayı öğrenmek için gereken birkaç dakikadan çok daha ağır basar.

Senden duymak istiyoruz! Divi Overlays'i denediniz mi? Yorumlarda deneyiminizi bize bildirin.

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