Divi Eklentisi Vurgusu: Divi Lightbox Anypage Modülü

Divi Lightbox Anypage Module, herhangi bir alandan herhangi bir içerik türüyle oluşturulmuş herhangi bir sayfadan açılır pencereler oluşturan üçüncü taraf bir eklentidir. Divi Builder ile sayfalar oluşturun, tek görüntüleri açın veya herhangi bir harici web sayfasını açın. Metin, düğmeler veya resimler gibi herhangi bir şey tetikleyici olarak kullanılabilir veya bunu, ziyaretçinin kaydırdığı web sayfasının zamanına veya yüzdesine göre açılacak şekilde ayarlayabilirsiniz.

Bu Divi eklenti vurgusunda, hem ön uç hem de arka uç oluşturuculardan Divi Lightbox Anypage Modülüne bir göz atacağım ve açılır pencerelerin mobil cihazlarda ve Ekstra içinde nasıl göründüğüne bakacağım. Divi Lightbox Anypage Modülü sürüm 1.9'u Divi 3.2 ve WordPress 4.9.5 ile test ediyorum.

Divi Lightbox Anypage Modülü

Divi Builder'a Anypage Lightbox adlı yeni bir modül eklendi.

İçerik sekmesi, Tasarım ve Gelişmiş sekmelerini yok saymak için bir mesaj içerir. Lightbox Ayarları, Lightbox ID (düğmeler oluşturmak için HTML etiketleri için bir sınıf olarak kullanılır), İçerik Türü (Herhangi bir sayfa, Resim, Aynı etki alanı sayfası – her birinin bir örneğini göreceğiz), Açılır Sayfa Bağlantısını (URL'sini) içerir. açılır pencerede görüntülemek istediğiniz sayfa) ve arka plan ayarları.

Otomatik Tetik, açılır pencerenin ne zaman gösterileceğini belirler. Yükleme sırasında açık sayfa, sayfa yükleme rastgele yüzdesi (yüzde olasılığına göre ışık kutusunu tetikler), çıkış amacı, sayfa kaydırma yüzdesi veya sayfa yüklendikten sonra belirli bir süreyi içerir. Bir Kez Gösterme Sınırı, çerezin süresinin dolacağı gün sayısını belirlemenizi sağlar.

Divi Lightbox Anypage Örneği – Aynı Etki Alanı

Same Domain aynı web sitesindeki herhangi bir sayfayı açar. Bunun avantajı, Divi Builder'ı kullanarak sayfaları oluşturabilmenizdir. Standart HTML sayfalarını da açabilirsiniz. Bu örnek için, Business Consultant düzen paketine bir açılır anket eklemek istiyorum. Birisi Başlarken düğmesine tıkladığında açılmasını istiyorum.

İlk olarak, açılır pencerenin görüntüleneceği sayfayı oluşturmam gerekiyor. Birkaç örnek soru içeren bir iletişim formu oluşturuyorum. Bu sayfayı oluşturmak için bir Boş Sayfa şablonu kullanıyorum. Standart bir şablon kullanırsam, açılır pencerede gezinme menülerini içerecektir. Boş Sayfa şablonunu kullanmak daha temiz bir açılır pencere oluşturacaktır.

Business Consultant düzen paketinden stil kullanıyorum. Bu sayfanın bağlantısını Lightbox Anypage ayarlarında kullanacağım.

Düzene bir Anypage Lightbox modülü ekledim (CTA modülünün yanında uygun bir açık nokta vardı, ancak düzen içinde nereye yerleştirildiği önemli değil). Ona anket açılır adında bir kimlik verdim, İçerik Türünü Aynı Etki Alanı olarak değiştirdim ve anket sayfasının URL'sini ekledim.

Resimler, düğmeler, metin vb. dahil olmak üzere sayfadaki herhangi bir şeyi tetikleyici yapabilirim. Biri Harekete Geçirici Mesaj modülünde Başlarken'i tıklattığında açılır pencerenin tetiklenmesini istiyorum. CTA modülünün Gelişmiş sekmesini açtım ve Işık Kutusu Kimliğini CSS Sınıfı alanına girdim. Düğmenin URL'si için bir hashtag kullandım. Bu şekilde düğme görüntülenecek ancak açılır pencereden farklı bir şeye bağlanmayacaktır.

Bu açılır pencereyi açar ve daha önce oluşturduğum formu görüntüler. Bu varsayılan stildir. Kapat düğmesi beyaz olduğundan şu anda görünmüyor. Modüle biraz stil eklemek istiyorum.

Modülün arka planını siyah yaptım. Varsayılan opaklığı %80 olarak bıraktım. Formun kutu gölge rengini beyaz olarak değiştirdim. Arka planı görüntülemek için formun bölümüne girmem ve arka planı şeffaf hale getirmem gerekiyordu. Ayrıca, çıkış düğmesinin konumunu değiştirebilirim ancak rengini veya boyutunu değiştiremiyorum. Ancak kendiminkini yaratabilirim.

Formun üstüne bir buton ekledim, onu sağa hizaladım, renkleri mizanpaja uyacak şekilde şekillendirdim ve CSS Sınıfı yakın ışık kutusunu ekledim.

Kapat düğmesi şimdi açılır pencereye eklenir ve orijinal çıkış simgesi kaldırılır. Düğme yerine resim, metin, simge vb. kullanabilirim.

Divi Lightbox Anypage Örneği – Resim

Görüntü seçeneği, medya kitaplığınızdan bir görüntüyü açılır pencere olarak görüntülemenizi sağlar. Bunun için Yazar düzen paketini kullandım. Bir Anypage Işık Kutusu modülü ekledim, bir Işık Kutusu Kimliği oluşturdum, İçerik Türü olarak Görüntü'yü seçtim ve açılır pencerede açılmasını istediğim görüntüyü ekledim.

Kitap görselinin CSS Class alanına Lightbox ID'yi ekledim.

İlk denemede görüntü açıldı. Bu bir sayfa açmadığı için kendi kapat butonumu oluşturamıyorum. Yine de aynı stil özellikleri mevcut, yani istersem arka planı ve boyutu değiştirebilirim.

Divi Lightbox Anypage Örneği – Anypage

Anypage, istediğiniz herhangi bir URL'yi girmenize izin verir ve açılır pencere o web sayfasını görüntüler. Bu örnek için Öğrenme Yönetimi düzen paketini kullanıyorum. CTA'yı kopyaladım ve Divi kullanımı hakkında bir mesaj oluşturdum ve bir açılır pencerede Divi sayfasını açacak düğmeyi ekledim. Düğmeye açılır pencerenin kimliği olarak kullanacağım CSS Sınıfını verdim.

Anypage Lightbox modülünü ekledim, Lightbox ID'sini verdim, Anypage'i seçtim, URL'yi girdim ve arka plan rengini ayarladım.

Düğmeye tıklandığında artık Elegant Themes web sitesindeki açılır pencerede Divi sayfasını açıyor. Tabii ki, istersek açılır pencereyi büyütebilir veya küçültebiliriz. Resim örneğinde olduğu gibi kendi çıkış butonunuzu oluşturamazsınız ancak bu buton diğer iki moddan daha büyüktür. Bunun herhangi bir sayfayı açmasını seviyorum. URL'ler için bağlı kuruluş bağlantılarını test etmedim. Bağlı kuruluş bağlantılarının gerçekleştirilip gerçekleştirilmediğini bilmek isterim.

Divi Lightbox Anypage'i Mobil Cihazda Kullanma

İşte iPhone X'in yatay moddaki açılır penceresi.

İşte sayfaya portre modunda bir bakış.

İşte portre modunda bir Nexus 10.

İşte yatay modda bir iPad Mini.

Divi Lightbox Anypage'i Ekstra ile Kullanma

İşte Extra ile Anypage örneği. Lightbox Anypage'i Divi veya Extra ile kullanırken hiçbir fark görmedim.

Lisans ve Belgeler

Divi Lightbox Anypage Modülü 35 ABD dolarıdır ve ömür boyu güncellemeler ve sınırsız kullanım içerir.

Belgeler, geliştiricinin web sitesinde sağlanır ve kısa bir video içerir.

Biten Düşünceler

Genel olarak Divi Lightbox Anypage Modülünün kullanımını kolay buldum. Same Domain'i kullanırken arka planların neden gösterilmediğini anlamak için birkaç denemem gerekti. Sonunda bölümün arka planını şeffaf hale getirdim. Diğer iki mod beklendiği gibi çalıştı, bu mantıklı çünkü aynı şekilde görüntülenmiyorlar. Düğmeler ilk başta açılır pencereyi açmak istemedi, ancak aynı pencerede açmayı seçtiğimde her seferinde çalıştılar.

Yükleme animasyonları ve arka plan ayarlamaları birçok tasarım seçeneği sunar. Tetikleyiciler, açılır pencerenin nasıl kullanıldığı konusunda size birçok seçenek sunar. Özellikle, birisinin web sitenizden çerez alması durumunda açılır pencereyi kapatabilmenizi seviyorum. Bu şekilde, daha önce kabul ettikleri veya istemediklerine karar verdikleri bir teklif hakkında tekrar eden ziyaretçileri rahatsız etmiyorsunuz.

Tutarlılık açısından renk ve boyut kontrollerinin Tasarım sekmesinde olması gerektiğini düşünüyorum. Ayrıca, çıkış düğmesi için özelleştirmeleri görmek istiyorum. Divi Builder ile herhangi bir öğeyi kullanarak kendi öğenizi oluşturma yeteneğini seviyorum, ancak bu yalnızca Same Domain'i kullandığınızda olur.

Web sitenizden dosya yükleyen açılır pencereler AJAX ile yüklenir. Hızlı ve sorunsuz yüklenirler. Divi Lightbox Anypage, e-posta kayıt formları, gömülü video, yol tarifi içeren haritalar, galeriler, portföyler vb. gibi burada gösterdiğimden çok daha fazlası için kullanılabilir. Divi ile açılır pencereler oluşturmakla ilgileniyorsanız, bu eklenti düşünmeye değer.

Senden duymak istiyoruz. Divi Lightbox Anypage Modülünü denediniz mi? Aşağıdaki yorumlarda deneyiminizi bize bildirin.

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