Divi 5 için etkileşimler (pop-up, geçişler, fare efektleri ve daha fazlası)

Bugün, pop-up ve geçişler gibi etkileşimli öğeler ve yaratıcı kaydırma tabanlı ve fare harekete dayalı efektler oluşturmak için sağlam bir sistem olan Divi 5 için etkileşimleri yayınlamaktan heyecan duyuyoruz.

Bir pop-up oluşturucu değil; Bu bir şey inşaatçı . Bir tetik oluşturun, bir etki atayın, bir hedef seçin ve özel etkileşimlerinizi hayata geçirin. Bu sistemle çok şaşırtıcı şeyler yapabilirsiniz ve size nasıl çalıştığını göstermek için sabırsızlanıyorum, bu yüzden içeri girelim.

Yeni özelliği eylemde görmek için aşağıdaki videoya göz atın.

Kendi etkileşimli öğelerinizi oluşturun

Tüm öğelerin gelişmiş sekmesinde yeni bir etkileşim grubu fark edeceksiniz. Etkileşim Ekle düğmesine tıklamak, her etkileşimin tetikleyicisini, efektini ve hedefini yapılandırabileceğiniz etkileşim düzenleyicisini açacaktır.

Tetikleyici, tıklama veya havada uçma gibi etkileşimi başlatır. Etki, etkileşim tetiklendiğinde, geçiş görünürlüğü, ön ayar veya öznitelik gibi ve hedef sayfadaki etkilenen öğedir.

Etkileşim örnekleri

Bu ayarlara girmeden önce, size etkileşimlerin neler başarabileceğine dair birkaç örnek göstereyim.

Örnek 1: Bir pop-up oluşturmak

Aşağıdaki video örneğinde, bir pop-up oluşturmak için etkileşimleri kullandım.

Pop-up'ım için geçiş görünürlüğü efektini uygulayan bir bölüme bir enter viewport tetikleyicisi ekledim. Bölüm, açılır pencerenin görünürlüğünü tetikleyerek görüşüme girer ve Divi'nin animasyon ayarlarını kullanırken kayar.

Ek olarak, açılır penceredeki bir simge modülünün, açılır pencerede görünürlüğü değiştiren bir tıklama tabanlı etkileşime sahiptir. Her türlü pop-up veya yüzen afiş oluşturabilirsiniz!

Örnek 2: Bir geçiş oluşturmak

Aşağıdaki video örneğinde, aylık ve yıllık fiyatlandırma tablolarını değiştirmek için etkileşimleri kullandım.

Yıllık ve aylık fiyatlandırma bölümlerinin görünürlüğünü değiştirmek için bir satıra iki etkileşim ekledim. Ardından, iki simge modülünün görünürlüğünü değiştirmesi için iki etkileşim daha ekledim ve kullanıcıya tıklama hakkında ek geri bildirim verdim.

Örnek 3: Ön ayarlar arasında geçiş

En güçlü etkilerden biri, geçiş önceden ayarlanmış etkisidir. Ön ayarlar bir öğenin ayarlarını değiştirmenize izin verdiğinden, yapabileceğiniz şeylerin bir sınırı yoktur. Bir tetikleyici bir hedef öğede ön ayar değiştirdiğinde, birçok yönden dönüştürebilir.

Aşağıdaki video örneğinde, görünümden girip çıkarken bir arka arkaya bir ön ayar eklemek ve kaldırmak için iki etkileşim ayarladım. Vurgulama önceden ayarlanmış, satırın arka plan rengini ve ölçeğini değiştirir ve bir kutu gölgesi ekler ve kullanıcıların sayfayı aşağı kaydırırken dikkatini çeker!

Örnek F: Fare hareketi etkileri

Etkileşim sistemlerinin fare hareketine dayalı etkileri çok eğlenceli.

Aşağıdaki video örneğinde. Bir kahraman bölümüne çeşitli etkileşimler ekledim, farklı duyarlılıkların fare hareketine dayalı etkileri olan çeşitli unsurları hedefledim.

Fare üzerindeki etkileşimler tetikleyici, farem hareket ettikçe değişen elemanlar üzerinde opaklık, hareket ve eğim etkileri uygular. Ayrıca, kare anahat stilini değiştirmek için bir ön ayarı değiştiren düğme modülüne bir etkileşim ekledim.

Olasılıklar sonsuz!

Farklı örneklerle devam edebilirim ve ne bulduğunuzu görmek için heyecanlıyım.

Etkileşim düzenleyicisine daha yakından baktığımızda, henüz bahsetmediğim bazı ek efektler görebilirsiniz, örneğin geçiş nitelikleri, çerezler ve öğelere kaydırma gibi.

Örneğin, bir öğenin CSS sınıflarını, kimliğini veya başka bir şeyini değiştirmek için öznitelik efektlerini kullanabilirsiniz.

Etkileşimlerin birinci sürümü aşağıdaki etkileri desteklemektedir:

• Görünürlüğü değiştirin - Görünür ve gizli durumlar arasındaki bir öğeyi otomatik olarak değiştirir.
• Göster öğesi - gizli bir öğeyi görünür hale getirir.
• Gizle Elemanı - Görünür bir elemanı gizli hale getirir.
• Önceden Ayarlama - Mevcut ön ayarların isteğe bağlı olarak değiştirilmesiyle bir eleman için ön ayar açar/kapalı açar.
• Ön ayar ekle - Mevcut ön ayarların isteğe bağlı olarak değiştirilmesiyle bir öğeye önceden ayarlanmış bir stil sınıfı uygular.
• Ön ayarları kaldır - Bir öğeden önceden ayarlanmış bir stil sınıfını kaldırır.
• Eşleme Özellik - Bir öğenin CSS sınıfı ve ID gibi özel HTML öznitelik değerini ekler veya kaldırır.
• Özellik Ekle - Zaten yoksa bir öğeye belirli bir HTML öznitelik değeri ekler.
• Öznitelik Kaldır - Bir öğeden belirli bir HTML öznitelik değerini kaldırır.
• Çerezi değiştirin - Bir çerez değerini bir çerezden ekleyin veya kaldırın. Örneğin, bir kullanıcı bir açılır pencereyi gördüğünde izlediği göründüğünde bir çerez ayarlayın. Ardından, o kullanıcı için gelecekteki sayfa ziyaretlerinde açılır pencereyi gizlemek için Divi'nin durum seçeneklerini kullanın.
• Çerez ekle - Ziyaretçinin tarayıcısına tanımladığınız bir çerez ve çerez değeri ekler.
  Çerezi çıkarın - Belirli bir çerezi çıkarın.
• Eleman'a kaydırın - Hedef öğeyi görünümüne getirmek için sayfayı sorunsuzca kaydırır.
• Ayna Fare Hareketi - Hedef elemanın, ayarlanabilir hassasiyetle çeşitli hareket tiplerini (çeviri, ölçek, opaklık, eğim veya döndürme) kullanarak tetik elemanı içindeki fare hareketini takip ettirir.

Bugün Divi 5'i deneyin

Divi 5 için etkileşimler bugün mevcuttur ve bu yıl Divi'ye gelen birçok özellikten biridir.

İki haftada bir güncellemelerle Divi 5 ve ötesindeki son sürümünde ilerledikçe takip edebilirsiniz. Önceliklerinize bağlı olarak, yeni web siteleri oluşturmak için Divi 5'i kullanabilir veya sizin için en iyi olanı daha fazla özellik ekleyene kadar bekleyebilirsiniz.

Divi 5'in orijinal çok fazlı sürüm programında belirtildiği gibi, Divi 5 genel alfa “Divi 5 Lite” gibidir. Birkaç özellik eksik ve mevcut web siteleri için uygun olmayabilir, ancak deneyimi Divi 4'e tercih ederseniz yeni web sitelerinde kullanılmaya hazırdır.

Denemenizi istiyoruz ve eğer seviyorsanız, kullanın; Herkes onu sevdiğinde, resmi hale getireceğiz.

Göreceli renkleri denediniz mi?

Kaçırmanız durumunda, yakın zamanda Divi 5 için göreceli renkler yayınladık ve Divi'yi renk yönetimi ve gelişmiş renk sisteminde net lider haline getirdik. HSL kullanarak iç içe renk ilişkileri ile matematiksel olarak güzel değişken tabanlı renk sistemleri oluşturmanızı sağlar. Bu özellikte uyumak istemezsiniz.

Tüm ayrıntılar için bu videoyu izleyin.

Daha fazla Divi 5 güncellemesi yolda

2025 Divi 5 yılıdır . Sıkıcı çalışma arkamızda. Süper hızlı vakfı inşa ettik ve şimdi Divi'nin geri dönüşünü yapma zamanı.

Divi geri dönüşü için buradaysanız, bize büyük bir iyilik yapın ve bu videoyu beğenerek ve bir yorum bırakarak bize bildirin. Divi'ye tezahürat yaptığınızı görmek bizim için çok şey ifade ediyor ve algoritmayı beslemek ve kelimeyi yaymak önemlidir.

Bizi YouTube'da takip etmeyi ve Divi bültenine abone olmayı unutmayın, böylece bir güncellemeyi asla kaçırmazsınız. Yakında başka bir Divi 5 özellik duyurusu için görüşürüz, bu da köşede olacağına söz veriyorum.