Divi 5'teki tetikleyiciler, etkiler ve hedefler arasındaki farkı anlamak

Divi 5'in yeni etkileşimleri basit bir model kullanır - tetik, efekt, hedef. Ne başlattı, ne olur ve ne değişir ve düzeninizde net, koordineli bir hareket yaratabilirsiniz. Bu yazıda, her bir parçayı açıklayacağız, birbirine nasıl uyduklarını göstereceğiz ve yeniden kullanabileceğiniz hızlı bir örnekte dolaşacağız. Hadi alalım!

Tetikleyiciler, efektler ve hedefler nelerdir?

Divi 5'teki etkileşimler birlikte çalışan üç hareketli parçadan inşa edilmiştir. Bir tetikleyici şeyleri harekete geçirir, bir etki , yanıtın nasıl göründüğüne karar verir ve bir hedef hangi öğenin değiştiğini tanımlar.

YouTube kanalımıza abone olun

Bir etkileşim kurduğunuzda, Divi sizden her üç parçayı da doldurmanızı isteyecektir:

Her rolü ayrı ayrı anlamak, bir tam sisteme nasıl bağlandıklarını görmeyi kolaylaştıracaktır.

Tetikleyici başlayan şeydir

Her etkileşim, tetikleyici adı verilen bir başlangıç ​​eylemiyle başlar. Eylemi başlatan kullanıcının fare tıklaması, gelmesi veya sayfa yükü gibi ilk adımdır. Örneğin, farenizi bir fiyatlandırma kartı üzerinde hareket ettirmek zinciri harekete geçirir.

Kendi başına, bir tetikleyici hiçbir şey yapmaz. Bir yanıta ihtiyacı var.

Etki ne olur

Tetikleyici ateş ettikten sonra, etki takip eder. Burası, eğim, solma, ölçek, bulanıklık veya herhangi bir hareket karışımı gibi reaksiyona karar verdiğiniz yerdir. Aynı fiyatlandırma kartının hafifçe ölçeklendiğini ve imleciniz üzerinde dururken daha derin bir gölge eklediğini hayal edin - efekt budur.

Son olarak, etkiyi nerede uygulayacağınıza karar vermeniz gerekir.

Hedef ne değişiklikler

Hedef, tetikleyici ateş ettiğinde değişen unsurdur. Hovering yaygın olarak kullanılan bir etkileşimdir, ancak sadece öğenin kendisini etkiler. Başka bir deyişle, etkileşimi başlatan eleman (tetikleyici) aynı zamanda değişen unsurdur (hedef).

Örneğin, bir sütunun üzerinde gezinmek, aynı zamanda hedef olduğu için aynı sütun ölçeğini yapabilir.

Bu, her şeyi tek bir öğeyle sınırlı tuttu. Divi 5'te yine de işleri bu şekilde ayarlayabilirsiniz, ancak artık bununla sınırlı değilsiniz.

Şimdi tetik ve hedef farklı olabilir, bu da size çok daha fazla kontrol sağlar. Örneğin, imleç bir bölüme girdiğinde, düğme dokunulmamış olmasına rağmen ölçeklenir. Bu durumda, düğme hedeftir.

Birlikte Nasıl Çalışıyorlar

Artık her bir parçayı kendi başına gördüğümüze göre, gerçek güç onları bir zincire bağladığınızda gelir:

• Tetik yangınları: Ziyaretçi, tıklama, fareyi hareket ettirme, girme, ayrılma veya sayfayı yükleme gibi bir şey yapar.
• Etki tanımlar : Ne tür bir görsel veya hareket tepkisi göstereceğinize karar verirsiniz.
• Hedef geçerlidir: seçtiğiniz öğedeki arazileri değiştiren bu.

Bir devre kablolamak gibi düşünün. Anahtar döner, akım akar, ampul yanar.

Divi 5'te, bu devreyi istediğiniz şekilde kablo yapabilirsiniz. Bir sütun üzerinde bir vuruş düğmesini eğebilir. Bir sayfa yükü bir kahraman görüntüsünde kaybolabilir. Tek bir tıklama, birkaç modülü aynı anda canlandırabilir ve bu da bölümü koordine hissettirir.

Bu, etkileşimlerin daha güzel bir havada hissetmeyi bırakması ve bir tasarım dili gibi çalışmaya başladığı zamandır. Artık kendine tepki veren bir unsurla sıkışıp kalmıyorsunuz. Tüm düzeni bağlamak için yanıtları zincirleyebilir, sendeleyebilir ve yayabilirsiniz.

Divi 5'in etkileşimleri hakkında her şeyi öğrenin

Divi 5'teki formül

Divi 5'in etkileşimlerinin güzelliği, rastgele eklentiler olmamalarıdır. Açık bir formül izlerler: tetikleyici → efekt → hedef. Karmaşık etkileşimler bile tekrarlanabilir bir model olarak gördüğünüzde basit ve tutarlı hale gelir.

Birlikte nasıl çalıştıklarını göstermek için bu formülü uygulamaya koyalım. Bu örnek için, kullanıcı düğmeyi tıkladığında ekranda açılan bir iletişim formu oluşturalım.

Bu efekti oluşturmak için, tetikleyici olarak kullanmak istediğiniz düğmeye bir etkileşim ayarlayacaksınız. Bu ayarları seçin:

• Tetikleme Etkinliği: Tıklayın (Kullanıcı düğmeyi tıkladığında etkinliğin tetikleneceğine karar verdik)
• Etki Eylemi: Göster öğesi (Gizli Kontak Formu)
• Hedef Modül: Bölüm (Kontak), Kontak bölümüne atanan etikettir.

Ardından, Kontak bölümünü açmak için bağlantı bağlantısını ayarlayın. İlk olarak, kişi formunun bölüm ayarlarını açın ve Gelişmiş sekmesine gidin. CSS Kimliği ve Sınıfları altında, CSS kimliğini ayarlayın: İletişim kurun.

Ardından, düğmenin ayarlarına gidin ve Düğme Bağlantısı URL alanına #Contact girin.

Son olarak, formun başlangıç ​​durumunu sadece tetiklendiğinde görünecek şekilde gizli hale getirin. İletişim formunun bölüm ayarlarını açın, Gelişmiş sekmesine gidin ve Visib Eşyası altında saklamak istediğiniz kesme noktalarını seçin.

Şimdi test edin. Düğmeyi tıklayın, gizli iletişim bölümü görüntülenir.

Bu basit akış (tıklayın → Göster → İletişim Formu), açılır, geçişler, yükte nazik açığa çıkarır veya bir bölüm boyunca zincirlenmiş animasyonlar için yeniden kullanacağınız modeldir. Tetik, etki ve hedef açısından düşündüğünüzde, olasılıklar hızlı bir şekilde açılır.

Bugün Divi 5'teki etkileşimleri deneyin

Desen var. Şimdi gerçek bir sayfada çalışmaya koyun. Bir test düzeni açın ve on dakika içinde bitirebileceğiniz küçük bir etkileşim etkisi oluşturun. Bir istemci sitesinde gerçekten kullanacağınız bir şey seçin.

İşte yuvarlanmak için bazı mini istemler:

• Fare bir bölüme girer, düğme ölçeğini ustaca yapar
• "Kişisel" düğmesine tıklamak, sıkışmış bir formu ortaya çıkarır
• Fare bir kartta bırakma yatırıyor
• Sayfa yükü bir kahraman görüntüsünde kaybolur, sonra bir dakika sonra başlık

Henüz Divi 5'in etkileşimleri özelliğini ve ne düşündüğünüzü kullandıysanız yorumlarda bize bildirin!