Divi Eklentisi Vurgusu: Kolay Kaydırmalı Girişler

Easy Slide-Ins, Divi oluşturucuyu kullanarak slaytlar (ve açılır pencereler) oluşturmanıza olanak tanıyan, Divi ve Extra için üçüncü taraf bir eklentidir. Slide-in'ler, Divi Builder ile oluşturulabilecek her şeyi görüntüleyebilir. Kaydırma yüzdesi, çıkış amacı, birden fazla konuma sahip bir düğme ve bir CSS Sınıfı ile slaytları tetikleyin. Ömür boyu güncellemeler ve demolar içerir.

Bu yazıda Easy Slide-Ins'e bakacağız ve neler yapabileceğini ve kullanımının kolay olduğunu göreceğiz. Ayrıca eklentiye dahil olan birkaç demoya da göz atacağız. Eklenti, geliştiricinin web sitesinden edinilebilir.

Kolay Slide-In'leri Yükleme

İlk olarak, dosyayı açın. Klasörün içinde demolar, belgelere bağlantı içeren bir dosya ve Easy Slide-Ins eklentisi bulacaksınız.

Eklentiyi normal şekilde yükleyin ve etkinleştirin.

Panoya Easy Slide-Ins adlı yeni bir menü eklendi. Bu menüyü tıklayın ve lisans anahtarınızı girin.

Lisansın etkinleştirilmesi, slaytlarınızı görebileceğiniz ve yeni slaytlar oluşturabileceğiniz iki menü öğesi (Tüm Öğeler ve Yeni Ekle) ekler.

Yeni Bir Slayt Oluşturma

Yeni bir slayt eklemek için tıklamak, içeri slaytı oluşturmak için Divi Builder'ı kullanabileceğiniz bir düzenleyici açar.

Ayrıca birçok ayar içerir. Divi Builder'ın altına yerleştirilirler. Sol, sağ, sol üst, sağ üst, sol alt, sağ alt, üst çubuk, alt çubuk, sol kenar çubuğu veya sağ kenar çubuğundan konumu seçin. Kaydırma sırasında otomatik tetiklenecek şekilde ayarlayın ve kaydırma miktarını seçin. Ayrıca çıkış amacında açılacak şekilde de ayarlayabilirsiniz. Arka plan rengini, kutu gölgesini ve içeri kaydırma genişliğini ayarlayın.

Başlığı gösterin ve gösterilecek metni girin. Başlığın arka plan ve metin renklerini ve yazı tipi ailesini, boyutunu ve ağırlığını seçin. Köşe yuvarlaklığını, etiket yüksekliğini ve etiket genişliğini ayarlayın. Kapanış simgesini gösterin ve arka plan ve simge renklerini ve simge boyutunu seçin.

Kontrollerin kullanımı ve anlaşılması sezgiseldir. Etiketi web sitenize uyacak şekilde biçimlendirmek ve slaytların nasıl çalıştığını kontrol etmek için yeterli ayarlama vardır.

Seçtiğiniz seçeneklere bağlı olarak diğer özellikler eklenir veya kaldırılır. Kutu Gölge'yi seçtim ve artık yatay ve dikey konum, bulanıklık ve yayılma gücü ve renk için seçenekler sunuyor.

Gelişmiş Sekmesi, slaydın görüntülenebileceği sayfaları seçmenizi sağlar. Tüm sayfaları, tek tek sayfaları ve tüm gönderileri seçebilirsiniz. Kaydırmayı belirli cihazlarda gizleyebilirsiniz.

Özel Alanlar sekmesi, herhangi bir sayfa veya gönderi gibi özel alanlar eklemenize olanak tanır.

Kolay Kaydırmalı Örnekler

Bu, Risk Yönetimi düzenindeki iletişim sayfasıdır. Bunu slaytı oluşturmak için kullanıyorum, böylece tasarım düzene uyacak. Kenar çubuğunu veya nokta gezinmeyi göstermemeye ayarladım. Tıpkı standart bir sayfa gibi önizleme yapabilirsiniz. Slaytı tasarladıktan sonra normal şekilde yayınlayın.

Ayarlarda etiketi etkinleştirdim ve arka planı siyah ve metni beyaz olarak ayarladım. Varsayılan metni tuttum (Bize Ulaşın). Sağ üst köşede görüntülenecek şekilde ayarladım. Bu, varsayılan yüksekliği kullanıyor, ancak kolayca değiştirilebilir.

Etikete tıklamak, Risk Yönetimi düzen paketindeki iletişim formunu gösteren ekran üzerinde görüntülenen slaytı açar. Bize Ulaşın düğmesine tekrar tıklamak, içeri kaydırmayı kapatır. Kaydırmalı genişliği 500 piksel, etiket yüksekliği 150 ve etiket genişliği 60 olarak ayarlandı.

Örnek kutu gölgesini gösterir. Konumu, kapat düğmesini gösteren sağ kenar çubuğuna değiştirdim. Etiket ve kapat düğmesinin renklerini değiştirdim ve etiketin köşelerini daha yuvarlak hale getirdim. Ayrıca kaydırma genişliğini 600 piksele ayarladım.

Bunun için etiketi üst çubuk konumuna taşıdım. Düzendeki renkleri kullandım ve genişliği 122 piksele ve yüksekliği 40 piksele değiştirdim. Bu resimde görebileceğiniz gibi etiket kaydırma üzerinde yerinde kalır.

Tam ekranda açılır ve kapat düğmesini içerir.

Bunun için sol kenar çubuğuna yeni bir slayt ekledim. Siteyle eşleşecek şekilde biçimlendirdim ve etiketin köşelerini kare şeklinde bıraktım. Etiketin üst kısmını ekran yüksekliğimin ortasına yerleştiren %50 etiket üst kenar boşluğu kullanıyorum.

Soldan açılır. 1000 piksel genişliği verdim, bu yüzden ekranımın çoğunu kaplıyor. Menü, haber bülteni kaydırmalı tarafından kapsanmasına rağmen, Kişi kaydırmalı girişi hala en üstte gösteriliyor.

Slide-in'ler size bir düğme tetikleyici sınıfı verir. Kaydırmayı açmak için bunu düğmelerle kullanabilirsiniz.

Sınıfı kopyalayın ve düğmenin CSS Sınıfı alanına yapıştırın.

Şimdi, düğmeye tıklamak slaytı açar. Herhangi bir yerde etiket olması gerekmez, ancak slaytı yerleştirdiğiniz yönden içeri kayar. Bu sola yerleştirildi, bu yüzden soldan geliyor. Genişliği 1000 piksel olarak ayarladım.

Kolay Kaydırmalı Demolar

İndirme dosyası 12 demo içerir. Bunlar, Divi Kitaplığına yükleyebileceğiniz önceden hazırlanmış düzenlerdir (JSON dosyaları). Bunları normal düzenler gibi Divi kitaplığına aktarın. Tarz modülleri içerirler ancak tasarım ayarlarını yapmanız gerekir. İşte bunlardan birkaçına bir göz atın.

Bu, Çıkış Amaçlı Koleksiyon E-postasıdır. Birkaç metin modülü, bir iletişim formu ve bir görüntü modülü içerir.

İşte ekranda nasıl göründüğü. Burada her şeyi varsayılan olarak bıraktım, bu nedenle düğme hala orijinal metni, konumu ve stili gösteriyor.

Bu, Kaydırma Amaçlı Koleksiyon E-postasıdır. Bir arka plan resmi, iki metin modülü ve bir e-posta modülü içerir.

Önceden yapılmış ayarları kullanarak sayfada nasıl göründüğü aşağıda açıklanmıştır. Bu, içeri kaydırmanın ne kadar duyarlı olduğunu gösterir (bir Divi düzeni gösterdiği için tam olarak beklediğimiz şey budur). Görüntünün daha fazlasını göstermek istiyorsanız, içeri kaydırmayı genişletmeniz yeterlidir.

Bu, Ziyaretçilerinize Rehberlik Edin. Bir kod modülü (Google Haritalar için), birkaç tanıtım yazısı, metin ve bir iletişim formu içerir.

Varsayılan ayarları kullanarak sayfada nasıl göründüğü aşağıda açıklanmıştır.

Bu, etiketli bir Promosyon. Bir metin modülü, birkaç fiyatlandırma tablosu ve bir düğme içerir.

İşte ekranda nasıl göründüğü. 800 piksele ayarladım, böylece slayt içeri girerse tam genişliği gösterecek. Etiketi kaldırdım ve sayfa kaydırma %60'a ulaştığında görüntülenecek şekilde ayarladım.

Ekstra ile görüntülendiğinde aynı düzen. Hem Divi hem de Extra ile harika çalıştığını görmekten memnunum.

Kolay Kaydırmalı Fiyat ve Belgeler

Easy Slide-Ins, geliştiricinin web sitesinde mevcuttur. İki satın alma seçeneği vardır:

• Tek site – 27 $
• Sınırsız site – 97 $

Her iki lisans da demoları ve ömür boyu güncellemeleri içerir.

Belgeler, geliştiricinin belgeleri ve destek sayfasında sağlanır. Sayfa, bunları göstermek için resimlerle birlikte noktaların her birinin bir incelemesini içerir. Sayfa ayrıca e-posta desteğine bir bağlantı içerir.

Biten Düşünceler

Easy Slide-Ins, Divi ve Extra için slaytlar ve açılır pencereler oluşturmayı kolaylaştırır. Kullanımı kolay buldum. Belgelere hiç ihtiyacım olmadı, ancak gerekirse orada. Gizli sayfa öğelerini getirmenin ilginç bir yolu. Slide-in'de herhangi bir şey kullanılabildiğinden, iletişim formlarını, bülten kayıtlarını, harekete geçirici mesajları, videoları, mağaza modüllerini vb. gösterebilirsiniz. Tek bir modül veya tam sayfa düzeni olabilir.

Birden fazla tetikleme seçeneğine sahip olmasını seviyorum. Çıkış amacı ve otomatik tetikleme, onu e-posta ve CTA açılır pencereleri oluşturmak için iyi bir seçim haline getirir. Etikete tıklayarak açmak, onları sayfalarınızda birden çok konuma eklemenin güzel bir yoludur. Tek bir sayfaya birden fazla slayt ekleyebilmenizi ve hangi sayfalarda görüntüleneceğini belirleyebilmenizi seviyorum. Düğmelere CSS Sınıfı eklemek, ziyaretçi görmeyi seçtiğinde bilgileri ortaya çıkarmanın harika bir yoludur.

Kaydırmayı ön uçtan oluşturabilirsiniz, ancak ayarlara nasıl erişeceğimi görmedim. Ayarlar olmadan etiketleri hareket ettiremez ve konumlarını gerçek zamanlı olarak göremezdim. Onları görmek için bir sayfa yüklemek zorunda kaldım. Yine de kullanımı zor değildi, ancak işin içinde biraz tahmin vardı. Bu o kadar küçük ki, onu kullanmama veya önermeme engel olmaz.

Divi Builder'ı kullanarak slaytlar oluşturmanın basit ve sezgisel bir yolunu arıyorsanız, Easy Slide-Ins bir göz atmaya değer.

Senden duymak istiyoruz. Divi için Easy Slide-Ins'i denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

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