Divi 5'in etkileşimleriyle bir pop-up nasıl oluşturulur (Ücretsiz İndir)

Pop-up'lar, dikkat çekmek ve web sitenize katılımı artırmak için harika bir araçtır. İster e-posta listenizi büyütmek, özel bir teklifi tanıtmak veya ziyaretçileri belirli bir eyleme yönlendirmek isteyin, iyi tasarlanmış bir açılır pencere tüm farkı yaratabilir. Divi 5 etkileşimlerinin piyasaya sürülmesiyle, özel, dinamik pop-up'lar oluşturmak hiç bu kadar kolay olmamıştı.

Bu yazıda, Divi 5'in etkileşimleri özelliğini kullanarak bir pop-up oluşturarak sizi gezeceğiz. Hadi dalalım!

Divi 5 etkileşimleri nedir?

Divi 5 etkileşimleri, web sitelerini daha dinamik ve ilgi çekici hale getirmek için tasarlanmış görsel oluşturucuya entegre edilmiş yeni bir özelliktir. Kullanıcı eylemlerine veya tıklamalar, sarkma veya kaydırma gibi sayfa etkinliklerine dayalı özel animasyonlar ve yanıtlar oluşturmanıza olanak tanır. Statik tasarımların aksine, etkileşimler, hepsi Divi'nin tanıdık arayüzüyle pop-up, geçişler, fare hareketleri ve kaydırma efektleri oluşturmanızı sağlar.

YouTube kanalımıza abone olun

Divi etkileşimlerinin temel bileşenleri

Divi 5'teki her etkileşim üç temel bileşenden oluşur:

• Tetikleyici: Bir tıklama, vuruş veya görünümüne giren veya çıkan bir öğe gibi etkileşimi başlatan olay.
• Etkisi: Tetikleyici etkinleştirildiğinde ortaya çıkan eylem, görünürlüğü değiştirme, önceden ayarlanmış bir stil uygulama veya bir özniteliği değiştirme gibi.
• Hedef: Aynı öğe, başka bir bölüm, satır, sütun veya yönetici etiketi tarafından tanımlanan modül olabilen etkileşimden etkilenen spesifik öğe.

Bu bileşenler birlikte çalışır ve basit, kodsuz bir arayüze sahip karmaşık etkileşimler oluşturmanıza olanak tanır.

Neden pop-up oluşturmak için etkileşimleri kullanmalısınız?

Divi 5 etkileşimleri, pop-up'lar oluşturmak için çeşitli avantajlar sunar:

• Herhangi bir eklentiye ihtiyacınız yok: Geleneksel pop-up inşaatçılarının aksine, Divi 5 etkileşimleri doğrudan görsel oluşturucuya inşa edilmiştir ve üçüncü taraf eklentilerine olan ihtiyacı ortadan kaldırır.
• Visual Builder içinde bulunan: Divi'nin tanıdık arayüzü, modülleri ve stil seçeneklerini kullanarak pop-up'lar oluşturabilirsiniz, bu da herhangi bir beceri seviyesindeki kullanıcılar için kolaylaştırır.
• Çok yönlü seçenekler ve efektler: Pop-up'ları, benzersiz, ilgi çekici deneyimler yaratmak için kaydırma tabanlı animasyonlar veya fare hareketi efektleri gibi diğer etkileşimlerle birleştirin.
• Tam Kontrol: Tetikleyicileri, efektleri ve hedefleri özelleştirin, hepsi kod yazmadan belirli hedefleriniz için açılır pencereler oluşturmak için.

Divi 5'te bir pop-up inşa etmek için adım adım kılavuz

Divi 5'te bir pop-up oluşturmak basittir ve sitenizin mevcut tasarımını kolaylaştırır. Bu bölümde, önceden hazırlanmış düzenlerimizden biriyle eşleşecek bir pop-up oluşturmanın ne kadar kolay olduğunu göstereceğiz, nasıl şekillendirileceğinizi göstereceğiz ve etkileşimleri pop-up'ı zamanlanmış bir gecikme ile görüntülemek için ayarlayacağız.

1. Bir Düzen Paketi Yükle

Bu öğretici için, düzen paketi tasarımlarımızdan biriyle başlayıp aynı stillere sahip bir açılır pencere oluşturarak işleri basitleştireceğiz. Bunu yapmak için, görsel oluşturucunun sol üst köşesindeki + simgesini tıklayın.

İletişim kutusu göründüğünde, kullanılabilir seçeneklerden önceden hazırlanmış düzen seçin.

Mevcut sayfaları vurgulamak için çevrimiçi öğrenme düzeni paketi küçük resmini tıklayın.

Açılış sayfası tasarımını seçin ve görsel oluşturucuya yüklemek için bu düzeni kullanın .

Düzen paketini içe aktarmanın son adımı, ön ayarları içe aktarmayacağını seçmektir. Bir seçim yaptıktan sonra İçe Aktar düğmesini tıklayın.

2. Pop-up için bir bölüm oluşturun

Düzen paketi içe aktarıldığına göre, sayfanın altındaki açılır penceremiz için yeni bir bölüm oluşturmalıyız. Sayfanın sonuna gidin ve yeni bir bölüm ekleyin.

Yeni bir satır eklemek için simgeye tıklayın. Ofset sütunları altında ikinci seçeneği seçin.

3. Pop-up'ı tasarlayın

Şimdi pop-up'ımıza içerik eklemeye başlayabiliriz. Modül veya satır iletişim kutusu göründüğünde, bir başlık modülü eklemek için tıklayın.

"% 15 indirim mi istiyorsunuz?" İçerik sekmesinin altındaki başlık alanında.

Tasarımları sayfa boyunca tutarlı tutmak için, Pop-up'ımız için başka bir başlık modülünün ayarlarını kopyalamak için Divi 5'in özellikler özelliğini kullanabilirsiniz. Doğrudan yukarıdaki bölümde, Başlık Modülünün üzerine gelin, sağ tıklayın ve Copy Nitelikleri'ni tıklayın.

Ardından, yeni oluşturduğumuz Başlık Modülünün üzerine gelin, sağ tıklayın, yapıştır özelliklerini seçin ve ardından Metin Tasarım Özellikleri Yapıştır'ı tıklayın. Bu, stilleri diğer başlık modülünden yapıştırarak tasarım tutarlılığına izin verecektir.

Başlık modülünün altına yeni bir metin modülü ekleyin.

Başlık modülünde olduğu gibi, yukarıdaki bölümdeki metin modülünü bulun, sağ tıklayın ve öznitelikleri kopyalayın. Oradan yeni metin modülüne tıklayın, özellikleri yapıştırın ve ardından metin tasarımı özniteliklerini yapıştırın .

Metninizi metin alanına ekleyebilir veya sizin için oluşturmak için Divi AI kullanabilirsiniz.

Ardından, metin modülünün altına bir e-posta giriş modülü ekleyeceğiz.

Yukarıdaki bölümde bir e-posta katılım modülü vardır, böylece özelliklerini kopyalayabilir ve açılırken eklediğimiz yeni e-posta katılımına yapıştırabilirsiniz.

Son adım, pop-up'ımızın sağ sütununa bir görüntü eklemektir. Görüntü modülünü bulun ve düzenimizin 2. sütununa ekleyin.

Bir resim yükleyin ve görüntü modülüne ekleyin. Bu noktada, bölümünüz buna benzemelidir:

4. Kapat düğmesi oluşturun

Artık açılır pencerenin tasarımı yerinde olduğuna göre, bir yakın düğme simgesi eklemek için üzerine yeni bir satır eklememiz gerekiyor. Bu, ziyaretçilerinizin pop-up'ı rahatça kapatmalarını sağlayacaktır. Yeni bir satır eklemek için Yeşil + simgesini tıklayın.

Satır Ekle iletişim kutusu göründüğünde, bölüme eklemek için eşit sütunların altındaki tek sütun düzenini tıklayın.

Satıra bir simge modülü eklemek için tıklayın.

Mevcut seçeneklerden kapanış simgesini seçin. Simge listesinin üzerindeki arama kutusuna “kapat” yazarak kolayca yerleştirilebilir.

Tasarım sekmesine geçin ve aşağıdaki tasarım ayarlarını girin:

• Simge rengi: #5344b9
• Simge Boyutu: 36px
• Hizalama: Doğru

Son adım, satırı pop-up'ımızın içeriğini içeren iki sütunlu satırın üzerine taşımaktır. Satırları doğru sıraya yeniden düzenlemek için katman görünümünü kullanın. Oradayken, bölümü açılır .

5. Bölümün ayarlarını ayarlayın

Etkileşimlerimizi oluşturmadan önce, pop-up'ın tarayıcının genişliği için uygun şekilde boyutlandırıldığından emin olmalıyız. Tam genişlikte bir pop-up olmasını istemiyoruz, bu yüzden bazı ayarlamalar yapmak için tasarıma gidin. Ayarları ortaya çıkarmak için boyutlandırma açılır menüsünü genişletin.

Genişlik alanına, genişlik için % 80 girin. Ardından, bölüm hizalama seçeneğini ortaya koyun.

Sınır altında 10 piksel sınır yarıçapı ayarlayın.

Ayrıca açılırken içeriğin geri kalanında öne çıkması için bir kutu gölgesi ekleyeceğiz. Kutu Gölgesi açılır menüsünü bulun ve genişletin. Kutu gölgesinin altında ön ayar 1'i seçin.

Son olarak, açılır bölümümüzün arka planı için bir renk eklemek için içerik sekmesine gidin.

6. Pop-up'ı görüntülemek için etkileşimi oluşturun

Tasarım mevcutken, etkileşimlerimizi belirleyebiliriz. Bir kullanıcı sayfaya geldikten sonra açılır bölümümüzü 5 saniye gösterecek şekilde ayarlayacağız. Bölümün Gelişmiş sekmesine gidin ve etkileşimler açılır menüsünü bulun. Başlamak için + Etkileşim Ekle'yi tıklayın.

Mevcut seçeneklerden yük seçin. Bu ayar, pop-up'ın sayfa yükünde görünmesini sağlar.

Etkileşim Düzenle iletişim kutusu göründüğünde, aşağıdaki ayarları girin ve Kaydet'i tıklayın:

• Yönetici etiketi: açılır etkileşim
• Tetikleyici Olay: Yük
• Etki Eylemi: Göster Elemanı
• Hedef Modül: Bölüm (Pop-up)
• Zaman gecikmesi: 5 saniye

Ardından, kapat düğmemiz için bir etkileşim eklememiz gerekir. Pop-up bölümümüzün ilk satırındaki simge modülünü seçin. Gelişmiş sekmesine gidin, + etkileşim ekleyin ve aşağıdaki ayarları girin ve kaydedin:

• Yönetici etiketi: Pop-up'ı kapatın
• Tetikleyici Etkinlik: Tıklayın
• Etki Eylemi: Görünürlüğü değiştirin
• Hedef Modül: Bölüm (Pop-up)
• Zaman gecikmesi: 0

7. Pop-up'ınızı Divi 5'in özelleştirilebilir duyarlı kesme noktalarıyla test edin ve hassaslaştırın

Son adıma geçmeden önce, Pop-up'ınızın tüm ekran boyutlarında iyi görünmesini sağlamak için Divi 5'in özelleştirilebilir duyarlı kesme noktalarını kullanmak iyi bir fikirdir. Divi 5'te şimdi aralarından seçim yapabileceğiniz 7 kırılma noktası var.

Varsayılan olarak, yalnızca üçü etkinleştirilir. 7'ye sahip olmak, herhangi bir ekran boyutunda sorunsuz bir kullanıcı deneyimi sağlayarak pop-up'ınızı daha fazla kesme noktasında test etmenizi sağlar. 7'ye izin vermek için yönetici çubuğunun üst ortasındaki Ellipsis menüsünü tıklayın. Oradan, tüm kesme noktalarını değiştirerek etkinleştirin.

Divi 5'in yeni FlexBox Düzen Sistemi, pop-up'ınızın herhangi bir cihazda harika görünmesini sağlamak için kolayca değişiklik yapmanızı sağlar. Örneğin, daha küçük cihazlarda görüntülenen sütun sayısını değiştirmek için Divi 5'in Değişiklik Sütun Yapısı alanını kullanabilirsiniz. Bu seçenek, içeriği mobil cihazda tek bir tıklamayla istifleyecektir.

8. Ekran seçeneklerini ayarlayın

Pop-up'ınızın doğru bir şekilde görüntülenmesi için, açılır bölümün görünürlüğünü, konumlandırmasını ve z-endeksini ayarlamamız gerekir. Bu, pop-up'ınızın istediğiniz yerde görüntülenmesine, görüntüleme zamanı gelene kadar gizli tutmasına ve sayfanın içeriğinin geri kalanının üzerinde görünmesini sağlayacaktır.

Pop-up bölümü için Gelişmiş sekmesine gidin. Görünürlük açılır menüsünü bulun. Tüm görünümlerdeki bölümü devre dışı bırakmak için tıklayın (telefon, tablet ve masaüstü).

Ardından, Konum açılır menüsünü tıklayın. Konumunu sabitleyecek ve bir ofset menşe seçecek. Son olarak, sayfanın geri kalanının üzerindeki açılır görüntüleri sağlamak için 99999'luk bir Z-endeks ekleyin.

Tüm ayarlar uygulandıktan sonra, sayfayı kaydedin ve başka bir sekmede önizleyin. Pop-up, sayfa yüklerinden sonra 5 saniye içinde görüntülenmelidir. Oluşturduğumuz yakın etkileşimi kullanarak pop-up'ı da kapatabilmelisiniz.

Gelişmiş pop-up özelleştirme seçenekleri

Divi 5 etkileşimleri, görüntüleyen koşullar, efektleri birleştirme veya hatta açılır pencereler oluşturmak için Divi AI kullanma gibi gelişmiş özelliklerle açılırken bir sonraki seviyeye taşımanızı sağlar. Özel CSS veya JavaScript snippet'lerine ihtiyaç duymadan pop-up'larınızı daha gelişmiş hale getirebileceğiniz bazı yollara bakalım.

Görüntüleme koşulları

Kullanıcı rolleri gibi kullanıcı davranışlarına dayalı olarak açılır pencereyi göstermek için Divi'nin durum seçeneklerini kullanabilirsiniz. Örneğin, POP-up'ı yalnızca kayıtları teşvik etmek için oturum açmış kullanıcılara gösterebilirsiniz.

Pop-up'ı sayfa ziyaretlerine göre görüntülemesini de etkinleştirebilirsiniz. Örneğin, belirli bir kullanıcı sayfayı zaten ziyaret ettiyse açılır pencereyi devre dışı bırakmalısınız. Ayrıca yalnızca bir kullanıcı sayfayı ziyaret etmediyse görüntüleyecek şekilde ayarlayabilirsiniz. Bu, sitenizi farklı bir sayfadan bulan ve sonraki ana sayfaya tıklayan ziyaretçiler için yararlı olabilir.

Efektleri birleştirin

Pop-up'ınızı kaydırma tabanlı animasyonlar veya fare hareketi efektleri ile geliştirebilirsiniz. Bunlar, ek tetikleyiciler ve efektler seçerek ek etkileşimler olarak eklenebilir. Etkileşimler birleştirilebilir ve oluşturabileceğiniz sayının bir sınırı yoktur. Örneğin, fare hareketi efektlerini kullanarak pop-up'ımızdaki görüntüye kolayca bir etkileşim uygulayabilirsiniz.

Divi AI entegrasyonu

Bir düzen oluşturmak için divi AI kullanarak tasarım sürecini hızlandırın. Divi AI'ye bir pop-up'a dönüştürebileceğiniz biri de dahil olmak üzere belirli bölümler oluşturmasını öğretebilirsiniz. Aşağıdaki örnekte, Divi Ai'den bir iş koçu için bir düzen oluşturmasını istedik, bir CTA bölümü ile tamamlanmış bir pop-up'a dönüşebiliriz.

Etkili pop-up'lar için en iyi uygulamalar

Pop-up'ınızın kullanıcı deneyimini geliştirmesini ve sonuçları yönlendirmesini sağlamak için şu en iyi uygulamaları göz önünde bulundurun:

1. Kullanıcı dostu tutun

Anında tetikleyiciler yerine 5 ila 10 saniye arasında zamanlanmış gecikmeler kullanarak müdahaleci pop-up'lardan kaçının. Bu, kullanıcılara istenmeden önce içeriğinizle etkileşime geçmeleri için zaman verir. Bir pop-up'ı çok erken başlatmak dikkat dağıtıcı olabilir, bu da kullanıcıların pop-up'ı kapatmasına ve bir promosyon, bülten kaydı veya yapmasını istediğiniz diğer önemli eylemleri kaçırmasına neden olur.

Kullanıcı katılımını kaybetmemek için açılır pencerenize zamanlı bir gecikme ayarlayın.

Ayrıca, kullanıcıların açılırlığı reddedebilmesi ve olumlu bir tarama deneyimini sürdürebilmesi için her zaman net, kolay tanımlanabilir bir kapan düğmesi ekler.

2. Performans için optimize edin

Performans optimizasyonu etkili pop-up'lar için kritiktir. Yükleme sürelerini hızlı tutmak için ağır animasyonları veya büyük, optimize edilmemiş görüntüleri en aza indirin. Özellikle daha yavaş bağlantılar veya mobil cihazlardaki kullanıcılar için hızlı, kesintisiz bir deneyim sağlamak için sıkıştırılmış görüntüleri ve karmaşık efektleri sınırlayın. Bu yaklaşım kullanıcı memnuniyetini artırır ve daha iyi katılım ve dönüşüm oranlarını destekler.

3. Erişilebilirlik standartları göz önünde bulundurularak pop-up'ları tasarlayın

Erişilebilirlik, pop-up'ınızı tüm kullanıcılar için kapsayıcı hale getirmede bir başka önemli hususdur. Ekran okuyucularına yardımcı olmak, okunabilirlik için metin ve arka plan arasında yüksek kontrast sağlamak için her zaman tanımlayıcı alt metin ekleyin ve kullanıcıları görme bozuklukları olan kullanıcıları barındırmak için 16px veya daha büyük yazı tipi boyutlarını kullanın.

Bu uygulamalar, pop-up'ınızın web erişilebilirlik standartlarıyla uyumlu olarak farklı bir kitle tarafından erişilebilir olmasını sağlamaya yardımcı olur.

4. Tüm ekran boyutlarında test edin

Son olarak, tüm cihazlarda tutarlı bir deneyim sağlamak için açılır pencerenizi tüm ekran boyutlarında iyice test edin. Pop-up'ınızın harika görünmesini ve masaüstü bilgisayarlarda, tabletlerde ve akıllı telefonlarda tasarlandığı gibi işlev görmesini sağlamak için Divi 5'in özelleştirilebilir duyarlı kesme noktalarından yararlanın.

Gerektiğinde çalıştığından ve bu metin daha küçük ekranlarda okunaklı olduğundan emin olmak için kapat düğmesine dikkat edin. Ek olarak, cilalı, profesyonel bir görünüm sağlamak için gerektiğinde boşluk, boyutlandırma ve düzeni kontrol edin.

Dosyaları İndirin

Ücretsiz indir

Divi bültenine katılın, size Ultimate Divi açılış sayfası düzen paketinin bir kopyasının yanı sıra tonlarca şaşırtıcı ve ücretsiz divi kaynakları, ipuçları ve püf noktalarının bir kopyasını e -postayla göndereceğiz. Takip et ve hiçbir zaman bir divi ustası olacaksınız. Zaten abone olduysanız, aşağıdaki e -posta adresinizi yazın ve Düzen Paketine erişmek için İndir'i tıklayın.

İNDİRMEK

Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketlerine erişin!

Divi 5 etkileşimleri ile pop-up'lar oluşturun

Divi 5'in etkileşimleri özelliği, doğrudan görsel oluşturucu içinde özel, ilgi çekici tasarımlar oluşturmanıza izin vererek bir açılır pencereyi kolaylaştırır. Tetikleyicileri, efektleri ve hedefleri birleştirmek, sitenizin tasarımını sorunsuz bir şekilde eşleştirirken dikkat çeken ve dönüşümleri yönlendiren pop-up'lar oluşturmanızı sağlar. Daha da dinamik pop-up düzenleri oluşturmak için modül grupları ve iç içe satırlar gibi diğer özellikleri keşfedin.

Divi 5'i denemeye hazır mısınız? En son Divi 5 genel alfa indirin, etkileşimleri deneyin ve düşüncelerinizi aşağıdaki yorum bölümünde paylaşın. Lütfen kreasyonlarınızı sosyal medya kanallarımızda bizimle paylaşın ve Divi 5'in yenilikçi özelliklerini kullanarak daha fazla eğitim için blogumuzu ziyaret edin. Ne yarattığınızı görmek için sabırsızlanıyoruz!