Divi 5 etkileşimleri hakkında bilmeniz gereken her şey

Bir eklenti veya özel CSS olmadan dinamik pop-up, geçiş ve kaydırma efektleri olan ziyaretçileri çekmek istiyorsanız, en son Divi 5 genel alfa özellik sürümlerinden birini seveceksiniz. Divi 5'teki etkileşimler, Divi kullanıcılarının görsel oluşturucu içinde ilgi çekici, etkileşimli öğeler oluşturmalarına izin verir. Bu yazıda, Divi 5 etkileşimleri hakkında bilmeniz gereken her şeye dalacağız, özelliklerine aşina olmanıza yardımcı olacak özelliklerini, birkaç ipucunu ve gerçek dünya uygulamalarını keşfedeceğiz.

Önemli not: Divi 5 şu anda kamu alfa'dadır ve yeni web siteleri için optimize edilmiştir. Mevcut Divi 4 sitelerinin henüz devam eden gelişme ve eski modüllerle ilgili potansiyel uyumluluk sorunları nedeniyle göç etmenizi önermiyoruz. Divi 5 tam sürümüne yaklaşırken güncellemeler için bizi izlemeye devam edin!

Hadi ona ulaşalım.

Divi 5 etkileşimleri nedir?

Divi 5 etkileşimleri, web siteniz için doğrudan görsel oluşturucu içinde etkileşimli öğeler oluşturmanızı sağlayan bir inşaatçıdır. Sadece bir pop-up oluşturucudan çok daha fazlası olan bu özellik, pop-up'lardan kaydırma tetiklenen animasyonlara kadar bir dizi özel etkileşim oluşturmanıza olanak tanır.

YouTube kanalımıza abone olun

Herhangi bir modülün, sütun, satır veya bölümün gelişmiş sekmesine sorunsuz bir şekilde entegre edilen etkileşimler, ilgi çekici, kullanıcı odaklı deneyimler oluşturmak için sınırsız esneklik sunar.

Divi 5 etkileşimlerinin temel bileşenleri

Divi 5 etkileşimlerinin merkezinde, tasarımlarınızı hayata geçirmek için birlikte çalışan üç temel bileşen vardır:

Tetik etkinlikleri

Tetikleyiciler bir etkileşim başlatan olaylardır. Örnekler arasında bir düğmeyi tıklamak veya bir görüntünün üzerine gelme, bir sayfada belirli bir noktaya ulaşmak gibi kaydırma tabanlı olaylar veya bir sayfa yükünden sonra gecikme gibi zamana dayalı tetikleyiciler yer alır.

Mevcut tetikleyiciler şunları içerir:

• Tıklayın : Bir kullanıcı, bir etkileşimi başlatmak için bir düğmeyi, görüntüyü veya başka bir öğeyi tıklar.
• Fare ENTER/Çıkış: Bir kullanıcı bir öğeyi kapar veya bırakır.
• ViewPort Gir/Çıkış: Bir öğe, kullanıcı kaydırılırken ekranın görünür alanına girer veya çıkar.
• Yük: Bir etkileşim, sayfa yüklendiğinde, isteğe bağlı bir zaman gecikmesi ile başlar.

Örneğin, bir sayfa yüklendikten 5 saniye sonra bir pop-up'ı tetikleyebilir veya bir kullanıcı kaydırıldığında bir öğeyi canlandırabilirsiniz.

Etkiler Eylemleri

Bir tetikleyici etkinleştirildikten sonra, etkiler ne olacağını belirler. Seçenekler arasında öğeleri gösterme veya gizleme, solukluklarla canlandırma, ölçekler, rotasyon veya tutarlı stil için önceden ayarlanmış geçişlerin uygulanması bulunur.

• Görünürlük: Görünür ve Gizli arasında bir öğeyi değiştirir.
• Göster/Gizle Elemanı: Bir öğeyi görünür veya gizli hale getirir.
• Önceden ayarlayın: Bir tasarım öğesi için ön ayar açar veya kapalı, mevcut bir ön ayarın değiştirilmesi yeteneğine sahip.
• Ön ayar ekle: Bir öğeye önceden ayarlanmış bir stil sınıfı eklemek için kullanılır. Mevcut ön ayarları da değiştirebilirsiniz.
• Ön ayarları kaldırın: Önceden ayarlanmış bir stili bir öğeden kaldırmak için kullanın.
• Değerlendirme Özellik: Bir öğenin HTML özniteliğini CSS sınıfı veya CSS kimliği gibi ekler veya kaldırır.
• Özellik Ekle: Bu, şu anda mevcut olmadığı yerlerde belirli bir HTML öznitelik değeri ekler.
• Özellik Kaldır: Bir öğeye uygulanan nitelikleri kaldırır.
• Çerezi değiştirin: Bir çerez değeri ekler veya kaldırır. Örneğin, bir pop-up göründüğünde bir çerez ayarlayabilir ve yalnızca Divi 5'in koşul ayarlarını kullanarak görünecek şekilde ayarlayabilirsiniz.
• Çerez ekle: Kullanıcının tarayıcısına tanımlayabileceğiniz bir çerez değeri ekler.
• Çerezi Kaldır: Daha önce belirtilen bir çerezi kaldırır.
• Eleman olarak kaydırın: Sayfanın sorunsuz kaydırılmasını sağlar ve hedef öğeyi görünümüne getirir.
• Ayna Fare Hareketi: Kullanıcının fare hareketlerini izleyen hareketi ayarlamanızı sağlar. Seçenekler arasında çeviri, ölçek, opaklık, eğim veya dönme bulunur. Hareketin hassasiyetini de ayarlayabilirsiniz.

Bir Modülü Hedef

Hedef, etkileşimin bir modül, satır, sütun veya tüm bölüm gibi etkilediği unsurdur. Karmaşık etkileşimler oluşturma esnekliği sunarak elemanın kendisini veya sayfadaki başka bir öğeyi hedefleyebilirsiniz.

Divi 5 etkileşimlerinin temel özellikleri

Divi 5 etkileşimleri kullanıcı dostu ve çok yönlü özellik seti için öne çıkıyor:

• Kod Arabirimi Yok: Herhangi bir CSS veya JavaScript kullanmadan herhangi bir öğenin gelişmiş sekmesindeki sezgisel bir arayüz aracılığıyla tetikleyicileri, efektleri ve hedefleri yapılandırın.
• Çeşitli Etkileşim Türleri: Kurşun yakalama için açılır pencereler, SSS'ler için geçişler, kahraman bölümleri için kaydırma tetiklenen soluklar veya portföyler için paralaks benzeri fare efektleri oluşturun.
• Hafif Performans: Doğrudan Divi 5'e inşa edilen etkileşimler, üçüncü taraf eklentilere olan ihtiyacı ortadan kaldırır, site şişmesini azaltır ve yük sürelerini iyileştirir.
• Dinamik Tetik Kombinasyonları: Bir kaydırma olayı gibi birden fazla tetikleyiciyi, bir kullanıcı sayfayı aşağı kaydırdıktan sonra görünen bir açılır pencereden gibi sofistike etkileşimler için bir zaman gecikmesi ile birleştirin.
• Duyarlı Tasarım: Divi 5'in özelleştirilebilir duyarlı kesme noktalarını kullanarak masaüstü, tablet ve mobil etkileşimleri özelleştirin.

Divi 5 etkileşimleri nasıl erişilir ve kullanılır

Görsel oluşturucu içindeki entegrasyonu sayesinde Divi 5'te bir etkileşim oluşturmak basittir. Başlamak için bu basit adımları izleyin:

Divi 5'te bir sayfa açarak başlayın. Bir etkileşim eklemek istediğiniz bir modül, satır, sütun veya bölüm seçin. Örneğin, sayfanızdaki bir resim modülü seçin.

Gelişmiş sekmesine gidin ve etkileşimler açılır menüsünü tıklayın. Oradan + Etkileşim Ekle düğmesini tıklayın.

Resmimiz için bir eğim/dönüştürme fare over etkisi oluşturmak istiyoruz. Bunu yapmak için, biri görüntü için, diğeri görüntüyü içeren sütun için iki etkileşim oluşturmamız gerekecek. Etkileşiminize Yönetici etiketinde bir ad vererek başlayın, ardından aşağıdaki ayarları girin:

• Tetikleyici Olay: Fare Enter
• Etki Eylemi: Ayna Fare Hareketi
• Hedef Modül: Resim
• Zaman gecikmesi: 0
• Hareket Türü: Çevir
• Hassasiyet: 10

Tüm ayarlar uygulandıktan sonra, devam etmek için Etkileşim Kaydet düğmesini tıklayın.

Ardından, sütunda dönüşüm etkileşimini oluşturacağız. Bir kez daha etkileşim ekle'yi tıklayın. Etkileşimi oluşturmak için aşağıdaki ayarları girin:

• Yönetici etiketi: eğim sütunu
• Tetikleyici Olay: Fare Enter
• Etki Eylemi: Ayna Fare Hareketi
• Hedef Modül: Sütun
• Zaman gecikmesi: 0
• Hareket Türü: Tilt
• Duyarlılık: 30

Ayarlar girildikten sonra etkileşiminiz şöyle görünmelidir:

Etkileşiminizi görüntülemek için önizleme düğmesini kullanın.

Sayfanız, etkileşiminizi önizlemenize ve test etmenize olanak tanıyan yeni bir sekmede görünecektir.

Oluşturabileceğiniz etkileşim türleri

Tetikleyiciler, efektler ve gerçek dünya uygulamalarıyla birlikte Divi 5 etkileşimlerinin çok yönlülüğünü sergilemek için birkaç pratik örnek.

Yeni ziyaretçiler için hoşgeldin açılır penceresi

Pop-up'lar, ziyaretçileri bültenlere, promosyonlara veya etkinliklere kaydolmaya çağırmak için harika. Divi 5 etkileşimleri ile, bir sayfa yüklendikten sonra görünen hoş geldiniz açılır penceresi oluşturabilirsiniz.

Bu etkileşimi oluşturmak için, açılırken bir bölüm oluşturmanız ve aşağıdaki ayarları atamanız gerekir:

• Yönetici etiketi: açılır pencere
• Tetikleyici Olay: Yük
• Etki Eylemi: Göster Elemanı
• Hedef Modül: Bölüm (Pop-up)-Etkileşimi oluşturmadan önce bölümünüzü adlandırdığınızdan emin olun
• Zaman gecikmesi: 5 saniye

Ayrıca pop-up'ı kapatmak için bir etkileşim oluşturmamız gerekecek. En kolay yol, açılır bölümün sağ üst köşesine bir simge modülü eklemek ve aşağıdaki ayarları atamaktır:

• Yönetici Etiketi: Kapat düğmesi
• Tetikleyici Etkinlik: Tıklayın
• Etki Eylemi: Elemanı Gizle
• Hedef Modül: Bölüm (Popup)
• Zaman gecikmesi: 0

Pop -up'ınızın yerleşimini kontrol etmek için Divi 5'in konum ayarlarını kullanın. Gelişmiş sekmesinde , konum açılır menüsünü bulun ve konumu sabitleyecek . Oradan, Pop-Up'ın sayfada görünmesini istediğiniz konumu seçin. Bu örnekte, merkeze ayarladık. Ayrıca, Pop-up'ın 99999 gibi sayfadaki her şeyin üzerinde görünmesi için ayar yapmak da iyi bir fikirdir.

Son adım , pop-up'ın görünürlüğünü tüm cihazlarda gizli hale getirmektir. Bunu yapmak için Gelişmiş sekmesine gidin, görünürlük açılır menüsüne gidin ve tüm cihazlardaki açılır bölümünü gizlemek için tüm seçenekleri değiştirin .

Bir elemanın görünürlüğünü değiştirin

Geçişler, SSS, akordeon menüleri, fiyatlandırma tabloları veya hizmetler gibi katlanabilir içerik bölümleri oluşturmak için mükemmeldir. Kullanıcıların bir tıklamayla içeriği genişletmelerine veya daraltmasına izin vererek sayfanızı temiz ve etkileşimli tutarlar. Örneğin, yalnızca bir düğmeye tıklandıktan sonra görülebilen tam bir hizmet listesini ortaya çıkarabilirsiniz.

Bu efekt oluşturmak için, bölümünüz için tetikleyici olarak ayarlamak istediğiniz düğmeye bir etkileşim ayarlayacaksınız. Etkileşim için aşağıdaki ayarları girin:

• Yönetici Etiketi: Hizmetleri Göster
• Tetikleyici Etkinlik: Tıklayın
• Etki Eylemi: Göster Elemanı
• Hedef Modül: Bölüm (Hizmetleri Ortaya Çıkarın)
• Zaman gecikmesi: 0

Ardından, bölümü açmak için bağlantı bağlantısını ayarlayın. Düğmenin ayarlarını açın ve içerik sekmesinin Düğme Bağlantısı URL alanına #services girin.

Düğmenin altındaki özellikler bölümünü tıklayın ve Gelişmiş sekmesine gidin. CSS Kimlik ve Sınıfları menüsü altındaki CSS kimlik alanına hizmet ekleyerek çapayı ayarlayın.

Gelişmiş sekmede iken, bölümün görünürlüğünü açılırken yaptığımız gibi gizli olarak ayarlamanız gerekir.

Fare hareketi etkileri

Divi 5 etkileşimleri, bir kullanıcı bir tasarım öğesinin üzerinde dolaştığında dinamik fare hareketi efektleri oluşturmanıza olanak tanır. Örneğin, bir başlık ve ana sütun üzerinde bir eğim efekti oluşturmak için etkileşimleri birleştirebilirsiniz.

Bu etkileşimi gerçekleştirmek için önce başlık için bir etkileşim yaratmanız gerekir. Görüntünün Gelişmiş sekmesine aşağıdaki ayarları girin:

• Yönetici etiketi: animasyonlu başlık
• Tetikleyici Olay: Fare Enter
• Etki Eylemi: Ayna Fare Hareketi
• Hedef Modül: Metin
• Zaman gecikmesi: 0
• Hareket Türü: Tilt
• Duyarlılık: 30

Ayarlar girildiğinde, aşağıdaki ekran görüntüsü gibi görünmelidir.

Ardından, aşağıdaki ayarları kullanarak başlığı içeren sütuna bir etkileşim ayarlayın:

• Yönetici etiketi: sütun eğimi
• Tetikleyici Olay: Fare Enter
• Etki Eylemi: Ayna Fare Hareketi
• Hedef Modül: Sütun
• Zaman gecikmesi: 0
• Hareket Türü: Tilt
• Hassasiyet: 50

Tamamlandığında, ayarlarınız aşağıdaki ekran görüntüsüne benzemelidir.

Önceden ayarlanmış etkileşimler

Fareover veya ViewPort Enter/çıkış tetikleyicileri ile efektler oluşturmak için ön ayarların yanında Divi 5 etkileşimlerini kullanabilirsiniz. Örneğin, arka plan rengini değiştirerek veya bir sınır gölge stili ekleyerek sayfanızdaki bir bölümü sergilemek istiyorsanız, bunu yapmak için etkileşimleri kullanabilirsiniz. Aşağıdaki örnekte, bir kullanıcı bölümün üzerinden geçtiğinde arka plan rengi, genişliği ve sınır değişir.

Bu efekti oluşturmak için, önce fareover öncesi ve sonra bölümü göstermek için bir ön ayar oluşturmanız gerekir. Bu örnekte, biri sağlam sarı arka plana sahip, diğeri çeşitli efektlere ve yeşil arka plana sahip iki tane oluşturduk.

Ön ayarlarınız oluşturulduktan sonra, vurguyu değiştirmek için etkileşimleri kullanabilirsiniz. Aşağıdaki ayarlarla ilk etkileşimi oluşturarak başlayın:

• Yönetici etiketi: sarı arka plan
• Tetikleyici Olay: Fare Enter
• Etki Eylemi: Önceden ayarlamayı geçiş
• Hedef Modül: Bölüm (Fiyatlandırma)
• Zaman gecikmesi: 1 saniye
• Ön ayar: sarı arka plan

Ardından, aşağıdaki ayarları girerek fare üzerine ikinci bir etkileşim oluşturun:

• Yönetici etiketi: yeşil arka plan
• Tetikleyici Olay: Fare Çıkışı
• Etki Eylemi: Önceden ayarlamayı geçiş
• Hedef Modül: Bölüm (Fiyatlandırma)
• Zaman gecikmesi: 0
• Ön ayar: yeşil önceden ayarlanmış

Divi 5 etkileşimlerini kullanmanın faydaları

Divi 5 etkileşimleri, web siteleri oluşturmak için güçlü, aerodinamik bir yaklaşım sunar ve onu Divi kullanıcıları için göze çarpan bir özellik haline getiren bir dizi avantaj sağlar. İşte bu özelliğin neden Divi 5'e bu kadar yararlı bir ek olduğuna daha derin bir bakış:

1. eklenti gerekmez

Divi 5 etkileşimleri Divi'nin çekirdeğine entegre edildiğinden, pop-up ve diğer etkileşimler oluşturmak için üçüncü taraf eklentilerinin ihtiyacını ortadan kaldırır. Bu yerel yaklaşım, sitenizde çalışan komut dosyalarının sayısını azaltarak daha hızlı yükleme sürelerine ve performans metriklerine yol açar.

Örneğin, bir pop-up eklentisine güvenmek yerine, Divi 5 etkileşimleri görsel oluşturucu içindeki her şeyi işler ve daha yalın bir kod tabanı ve daha yumuşak bir kullanıcı deneyimi sağlar. Bu aynı zamanda eklenti çatışmalarının riskini yönetmek ve daha düşük riskleri daha az güncelleme anlamına gelir ve sitenizi daha güvenilir hale getirir.

2. Kullanıcı dostu

Divi 5 etkileşimleri sezgisel olarak tasarlanmıştır, etkileşimler oluşturmak için sadece birkaç tıklama gerektirir. Yeni başlayanlar temelleri hızlı bir şekilde kavrayabilir ve profesyonel geliştiriciler tek bir kod satırı yazmadan karmaşık kombinasyonlara dalabilirler.

Etkileşim ayarları, herhangi bir öğenin gelişmiş sekmesinde düzgün bir şekilde düzenlenir, net etiketler ve araç ipuçları tüm işlem boyunca yönlendirir. Örneğin, bir açılır pencere ayarlamak, bir tetikleyici ve efekt seçmek için birkaç tıklama gerektirir, bu da herkesin kullanmasını kolaylaştırır.

3. Özelleştirme özgürlüğü

Divi 5 etkileşimlerinin esnekliği ve geniş ayarları - tetikleyiciler, efektler ve hedefler - sitenizin ziyaretçileri için benzersiz deneyimler yaratmanıza olanak tanır. Bir kullanıcı sayfanın yarısında kaydırıldıktan sonra soluk bir tanıtım afişi gibi sofistike etkileşimler oluşturmak için kaydırma tabanlı bir ViewPort Enter'ı bir zaman gecikmesi ile birleştirmek gibi birden fazla tetikleyiciyi karıştırabilirsiniz.

Herhangi bir modül, satır, sütun veya bölümü hedefleme yeteneği, tek bir düğmeyi canlandırıyor veya tüm bir kahraman bölümünü dönüştürüyor olsun, ihtiyaçları tam olarak gerektiğinde uygulayabileceğiniz anlamına gelir.

4. Geliştirilmiş kullanıcı katılımı

Etkileşimli öğeler, web sitelerini daha sürükleyici ve duyarlı hale getirerek kullanıcı katılımını artırır. Divi 5 etkileşimleri, alternatif fiyatlandırmayı ortaya çıkarmak veya olası satış yakalaması için açılır pencereleri tetiklemek için geçişleri tıklamak gibi etkileşimi teşvik ederek ziyaretçilerin sitenizde tutulmasına yardımcı olur. Örneğin, bir restoran web sitesi bir menü bölümünü ortaya çıkarmak için kaydırma tetiklemeli bir animasyon kullanabilir.

Başlamak için pratik ipuçları

Divi 5 etkileşimlerinden en iyi şekilde yararlanmak için, optimum sonuçları sağlamak için stratejik olarak yaklaşın. İşte bu süreç boyunca size rehberlik edecek bazı ipuçları:

• Basit başlayın: Fare hareketi veya çoklu tetikleyici animasyonlar gibi ileri efektlerle mücadele etmeden önce özelliği tanımak için açılır veya geçişler gibi basit etkileşimlerle başlayın.
• Yönetici Etiket alanını kullanın: Etkileşimlerinizi ve öğelerinizi etiketlemek, özellikle birden fazla bölümlü karmaşık sayfalarda çok önemlidir. Her bir modülün İçerik sekmesinde Yönetici Etiket alanına bir ad ekleme, işleri düzenli tutmanıza ve doğru hedef öğeyi kolayca tanımanıza olanak tanır.
• Ön ayarları kullanın: Divi 5'in önceden ayarlanmış sistemi, etkileşimler arasında zamandan tasarruf etmek ve tutarlılığı korumak için mükemmeldir. Ön ayarlar, solma animasyon veya renk geçişi gibi yeniden kullanılabilir stilleri tanımlamanıza ve bunları birden çok öğeye uygulamanıza olanak tanır.
• İyice test edin: Yayınlamadan önce herhangi bir sorunu yakalamak için Divi 5'in önizleme özelliğini kullanarak etkileşimlerinizi her zaman önizleyin. Etkileşimlerin tüm cihazlarda nasıl davrandığını test etmek için Divi 5'in özelleştirilebilir duyarlı kesme noktalarını da kullanabilirsiniz.

Web sitenizi divi 5 etkileşimleriyle yükseltin

Divi 5 etkileşimleri, web sitenizin kullanıcı deneyimini artırmak için ilgi çekici, kodsuz etkileşimli öğeler oluşturmak için mükemmel bir özelliktir. Yakalanan pop-up'lardan, tasarımlarınızı hayata geçiren kaydırma tetiklemeli animasyonlara yol açan bu özellik, herkesin bir kod çizgisine dokunmadan dinamik, profesyonel web siteleri oluşturmasına izin verir. Hafif entegrasyonu ve çeşitli tetik seçenekleri onu modern web tasarımı için önemli bir araç haline getirir.

Başlamaya hazır mısınız? En son Divi 5 alfa indirin ve pop-up, değiştirilmiş içerik, kaydırma efektleri ve daha fazlası oluşturmak için etkileşimlere dalın. Hızlı bir not: Divi 5 yeni web siteleri için hazır, ancak henüz mevcut sitelerde kullanmanızı önermiyoruz.

Kreasyonlarınızı bizimle paylaşmak için aşağıya yorum yapın veya sosyal medya kanallarımıza ulaşın. Onları görmek isteriz!