Divi sitenizi daha eğlenceli hale getirecek 6 mikro etkileşim (öğretici + ücretsiz indir)
Mikro etkileşim, sitenizle etkileşime girdiklerinde kullanıcı deneyimini geliştirmenin iyi bir yoludur. Simgelerin, düğmelerin veya görüntülerin küçük bir animasyonu, kullanıcıların eğlenceli ve yönlendirilmiş bir şekilde harekete geçmeleri için sinyal verebilir. Sitenize ekleyebileceğiniz birçok mikro etkileşim vardır, ancak iyi pratik kurallar onu “mikro” tutmaktır. Aşırıya kaçmak istemezsin. Bugün size Divi Builder ve özel CSS (JQuery olmadan) kullanarak Divi web sitenize ekleyebileceğiniz bazı basit mikro etkileşimler göstereceğim. Genellikle kullanıcılar, simgeler, görüntülerle etkileşime giren öğelere odaklanacağım.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide inşa edeceğimiz mikro etkileşime bir bakış. #1 serpin görüntüyü yönlendirilir
Başlamak için ihtiyacınız olan şey, ihtiyacınız olan tek şey Divi. Ön uçtaki Divi Builder’ı kullanarak en başından beri örneğimiz olacağız. Kolay Erişim için Dosyaları İndirin Bu makalenin altına indirmeler ekledim, web sitenizde hızlı ve kolay çalışan bu mikro etkileşim çalışmasına bir örnek almak isteyenler için. Bu şekilde öğreticiyi takip ettiğinizde işlev gören bir örneğe sahip olabilirsiniz. İndir #1 Sprinkling Resim, öğenin boyutunu ayarlamaya atıfta bulunan arainsscaling tarafından yönlendirilir. Bu nedenle, imleci (örneğin) yönlendirirken daha büyük bir görüntü yapmak istiyorsak, tek yapmamız gereken görüntülerimizi belirli bir yüzde ile dağıtmak için küçük bir CSS parçası eklemektir. Bu, kullanıcı imleci görüntüye yönlendirdiğinde küçük ama etkili bir mikro etkileşim yapmamızı sağlar. Bunu görüntüler, modül açıklamaları ve insanların modülleri kullanan üç popüler Divi modülüne nasıl uygulayabileceğinizi göstereyim. Her bir örneği her sütuna ekleyebilmemiz için üç sütun satırı ile devam edin ve yeni bir parça oluşturun. Görüntüyü görüntüyü kullanarak görüntüye işaret ederken görüntünün görüntülenmesi Görüntüye görüntü modülünü kullanarak görüntü modülünü kullanarak görüntü modülünü kullanarak, önce görüntü modülünü ilk sütuna ekleyin.
Ardından seçtiğiniz modüle resim ekleyin. Ardından, resim ayarlarınızdaki Gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin: CSS Sınıfı: Bu ölçek görüntüsü, sayfa ayarlarına özel CSS eklerken bu özel modülü hedeflememizi sağlar. Görüntüyü sirdirmek için gereken CSS’yi eklemek için sayfa ayarlarını açın ve aşağıdaki özel CSS’yi ekleyin:/** Bu, görüntü modülündeki görüntüyü CSS sınıfı “Ölçek görüntüsü” ** /* /* ile ölçeklendirir .Scale-image {
Taşma: gizli;
}
.Scale-image img {
Geçiş: Tüm 0.2s;
}
.Scale-image: Hover img {
Dönüşüm: Ölçek (1.3)
}
Şimdi sonuçlara bakın.
Açıklama modülündeki görüntüye aynı efekti eklemek için yüzerken bulanık modülün görüntüsünü çizer, önce modülü ikinci sütuna ekleyin.
Ardından, seçtiğiniz resmi açıklama modülüne ekleyin. Ardından, açıklama modülüne aşağıdaki CSS sınıfını ekleyin. CSS Sınıfı: Ölçekli Blurb-image Bu CSS sınıfı ile şimdi bulanık görüntüleri hedefleyen özel CSS’imizi ekleyebiliriz. Sayfa ayarlarını açın ve aşağıdaki özel CSS’yi ekleyin: /** Bu, BL modülündeki görüntüyü CSS sınıfı “ölçek blub-image” ile ölçeklendirir **/ .Scale Blurb-image .et_pb_main_blurb_image {
Taşma: gizli;
}
.Scale Blurb-image .et_pb_main_blurb_image img {
Geçiş: Tüm 0.2s;
}
.Scale Blurb-image .et_pb_main_blurb_image: Hover img {
Dönüşüm: Ölçek (1.3);
}
Sonuç bu.
İnsan modüllerinin resimlerini serpme İmleçini yönlendirirken insan modüllerinin resimlerini taramak için yüzerken, modül kişileri üçüncü sütuna ekleyin ve seçtiğiniz modülün resimlerini ekleyin. Ardından kişi modülüne aşağıdaki CSS sınıfını ekleyin. CSS Sınıfı: Ölçekli insanlar çizim Şimdi sayfa ayarlarını açın ve aşağıdaki özel CSS’yi ekleyin. /** Bu, kişi modülündeki görüntüyü CSS sınıfı “ölçek-kişi-image” **/. Ölçek-kişi-image .et_pb_team_meber_image { Taşma: gizli; }
.
Geçiş: Tüm 0.2s;
}
.
Dönüşüm: Ölçek (1.3);
}
Ölçeklendirme görüntülerinin mikro etkileşimi ile üçüncü modülün sonuçlarına bakın.
#2 kaydırma simgesini sıçrayan
Bir sonraki mikro etkileşim, tam geniş başlık modülündeki kaydırma simgesine sıçrayan bir animasyon ekler. Bu, daha fazla ziyaretçiye sayfanın altında daha fazla bilgi olduğunu bildirmenin ince bir yoludur. Ve bu zıplayan efekti varsayılan olarak veya imleci yönlendirirken seçebilirsiniz.
İşte nasıl yapılacağı. Önce tam genişlikli bir başlık modülüne sahip yeni bir tam genişlik parçası ekleyin. Ardından aşağıdakileri güncelleyin: Metin Yönlendirme ve Logo: Orta Aşağıdaki GOLL düğmesini görüntüleyin: Evet Icon: [İsteğe bağlı simgeyi seçin] Sonra aşağıdaki CSS Sınıfını Ekleyin: CSS Sınıfı: Koleksiyon Icon Bu sınıf, CSS ile kaydırma simgesini hedeflememize izin verecektir Sayfa yüklemesinde varsayılan olarak simgeleri önlemek için. Ardından tam geniş başlık modülünü çoğaltın ve CSS sınıfını şu şekilde güncelleyin: CSS Sınıfı: Boungers
Bu sınıf, yüzerken simgeleri canlandırmak için CSS ile kaydırma simgelerini hedeflememize izin verecektir. Ardından, sayfa ayarlarını açın ve iki örneğimiz için Bounthist animasyonunu etkinleştirmek için aşağıdaki özel CSS’yi ekleyin. Pozisyon: Mutlak; Üst: -10px;
Sol: 0;
Sağ: 0;
}
.Bounce-scolll-icon-hover .et-pb-icon: hover {
Animasyon süresi: 2s; animasyon adı: sıçrama;
Animasyon-indüksiyon sayısı: sonsuz;
Animasyon-zamanlama fonksiyonu: doğrusal;
Geçiş: Tüm .2s;
}
.Bounce-scolll-icon .et-pb-icon {
Pozisyon: Mutlak;
Üst: -10px;
Sol: 0;
Sağ: 0;
Animasyon süresi: 2S;
Animasyon adı: sıçrama;
Animasyon-indüksiyon sayısı: sonsuz;
Animasyon-zamanlama fonksiyonu: doğrusal;
Geçiş: Tüm .2s;
}
.Bounce-scolll-icon .et-pb-icon: hover {
Animasyon adı: yok;
}
@Keyframes Bounce {
% 0 {Top: -10px; Opaklık: 1;}
% 50 {Top: 15px; Opaklık: 0;}
% 100 {üst: -10px; opaklık: 1;}
}
İki örneğin sonuçlarına bakın. Üst gölgelik kaydırma simgesi varsayılan olarak cansız olacak ve yönlendirildiğinde alt gölgelik kaydırma simgesi cansız olacaktır.
#3 Yüzerken simgeyi döndürün
Simgeye biraz dönme eklemek, kullanıcıları öğeleri tıklamaya dahil etmek için etkili bir mikro etkileşim olabilir. Varsayılan simgeye sahip en popüler iki Divi modülü düğme ve modül modülleri olduğundan, yüzerken simgelere nasıl dönüş ekleyeceğinizi göstereceğim. Yüzen divi, varsayılan düğme simgesi için kullanışlı bir mikro etkileşim mevcut olduğunda düğme simgesini oynatın. İmleci düğmeye işaret ederken, düğme simgesi görünür ve sağa doğru hareket eder, bu da düğmeyi tıklayarak başka bir sayfaya yönlendirileceğinizi gösterir. Ancak, onunla biraz daha yaratıcı istiyorsanız, tamamen yeni bir mikro etkileşim için simgeler oynayabilirsiniz.
İmleci yönlendirirken düğme simgesini döndürmek için önce bir satır bir sütunla yeni bir parça ekleyin. Ardından düğmeye düğmeye ekleyin. Ardından düğme ayarlarını aşağıdaki gibi güncelleyin: Düğme için özel stili kullanın: evet yalnızca düğmeye işaret ederken simgeyi görüntüleyin: İkon düğmesi yok: [İsteğe bağlı simgeyi seçin] Sonra aşağıdaki CSS sınıfını ekleyin: CSS sınıfı: Turn-to -Occes Place, tek yapmamız gereken sayfa ayarlarına aşağıdaki özel CSS eklemektir:/** Bu, “Döndürme-Button-icon” ile düğme modülü için HOVER içindeki düğme simgesini döndürür ** /* /* /* /* /* /* .Rotate-Button-icon: Sonra { Dönüşüm: döndür (-90deg); }
.Rotate-Button-icon: Hover: Sonra { Dönüşüm: döndür (0deg);
}
Bu, ilk başta 90 derecelik saat yönünde simgeyi döndürür ve daha sonra imleci yönlendirirken 0 dereceye döner.
Sonuç bu.
Modül simgesi açıklamasını döndürmek için bulanık modül simgesini döndürün, önce üç sütun satırına sahip yeni bir parça için. Ardından, açıklama modülünü sütun 1’e ekleyin ve aşağıdaki açıklama ayarlarını güncelleyin. Simgeler kullanın: evet simgesi: [Seçilen simgeyi ekle] Metin Oryantasyonu: Orta CSS: Döndür Bulburluk-Icon
Şimdi sayfa ayarlarına aşağıdaki özel CSS ekleyin: /** Bu, CSS sınıfı “Dönüş Blub-icon” ** /*
.Trotate Blurb-icon .et-pb-icon {
Geçiş: 0.2s kolaylık; Dönüşüm: Rotatez (-90deg); } .Rotate Blurb-Ico.
Dönüşüm: Rotatez (0deg);
}
Sonuç bu.
Bu aynı zamanda başlığın soluna yerleştirilmiş bir simge ile de çalışır. Tek yapmanız gereken açıklamanın ayarlarını aşağıdaki gibi güncellemektir: Görüntü/Ikon’un yerleştirilmesi: Sol Yükseklik Çizgisi Başlık: 1.7 Sonuçlara bakın.
#4 Düğme metnini görüntülemek ve gizlemek için slayt düğmesi simgesi
Mikro etkileşim imlecini gösterirken simgeye metin düğmesi, düğme metnini varsayılan olarak simgeyle görüntüler ve ardından imleci yönlendirirken metni örtmek için simgeyi hareket ettirir. İşte nasıl yapılacağı. Bir satır bir sütunla yeni bir parça ekleyin. Ardından düğme modülünü satıra ekleyin ve aşağıdaki düğmeyi güncelleyin Ayarlar: Düğme için özel stili kullanın: Evet Arka plan renk düğmesi: #0C71C3 Genişlik Sınır Düğmesi: Anahtarın 0px rengi Ikon: #ffffff sınıfı CSS: Metin-To -İkon-ine
Şimdi sayfa ayarlarına aşağıdaki özel CSS ekleyin: /** Düğme metnini kaplamak için bu stil düğmesi, düğmeye “düğme-txt-to-icon” gövde #sayfa-container .et_pb_button Genişlik: 1em; Geçiş: Tüm .3s! Önemli; Marj-sol: 0;
Sınır-sol: 1px katı #dddddd;
Sol: Calc (% 100 – 1EM);}
Gövde #Page-Container .et_pb_button.button-Text-to-icon: Hover: sonra {
Sınır sol: 1 piksel katı şeffaf;
Sol: Calc (% 50 – 0.5EM);
Dönüşüm: Ölçek (1.3);
}
Body #Page-Container .et_pb_button: Hover: sonra {
Renk: #ffffff;
Marj-sol: 0px;
Sol: 0;
Genişlik:%100;
Metin-align: merkez;
Dönüşüm: Ölçek (1.5);
}
Şimdi sonuçlara bakın.
İmlecinizi işaret ederken metne düğme simgesi, önce düğme simgesini görüntülemenin ve ardından düğme metnini görüntülemek için simgeyi yukarı kaydırmanın ters etkisini de oluşturabilir. Bunu yapmak için düğme modülünü çoğaltın ve aşağıdaki düğme ayarlarını güncelleyin: Metin düğmesinin rengi (varsayılan): #0c71c3 Metin Renk Anahtarları (İmleci Noktalı): #ffffffkanian sınıfı CSS sınıfı aşağıdakilerle: Button- Ikon-ke-tex
Ardından, sayfa ayarlarına aşağıdaki özel CSS ekleyin: /** Bu Styles düğmesi, “düğme-txt-ine-ineb /* /* /* /*
Body #Page-Container .et_pb_button.button-icon-to-to-to-to-to-to-{
Genişlik: 1em;
Geçiş: Tüm .3s! Önemli;
Marj-sol: 0; Sınır sol: 1 piksel katı şeffaf; Sol: Calc (% 50 – 0.5EM); Dönüşüm: Ölçek (1.3);
}
Gövde #Page-Container .et_pb_button.button-icon-to-to-to-to-to-to-to-tox: sonra {
Sınır-sol: 1px katı #dddddd;
Sol: Calc (% 100 – 1EM);
Dönüşüm: Ölçek (1);
}
Şimdi sonuçlara bakın.
#5 3D görüntü perspektif rotasyonu
Bu mikro etkileşim, 3D görüntü perspektifi ve varsayılan dönme ile düzenlenmiş bir görüntü modülü görüntüsü ile başlar. Daha sonra imleci işaret ederken, görüntü normal görüntü ekranına geçer. İşte nasıl yapılacağı. İlk olarak, üç sütun satırı ile yeni bir parça oluşturun. Ardından görüntü modülünü sütun 1’e ekleyin ve görüntüyü istediğiniz görüntü modülüne ekleyin.
Bu etki için özel CSS’imizi doğrudan modüle ekleyebiliriz. Devam sekmesini açın ve ana öğenin altına aşağıdaki özel CSS ekleyin: CSS Ana Elemanı (Varsayılan): Dönüşüm: Perspektif (700px) Rotatey (45deg);
Geçiş: Tüm .2s;
Bu CSS, CSS Transform özelliğini kullanarak resmimizde iki şey yapar. İlk olarak, sayfayı görüntülerken görüntü ile kullanıcının perspektifi arasındaki mesafe olan 700 piksel bir perspektif ekledi. CSS ayrıca resme dönüş ekler. Rotatey (45deg) görüntüyü y ekseninde 45 derece (saat yönünde) döndürür. Ve yerinde bir bakış açısıyla, görüntünün şimdi üç boyutlu bir ekranı var. CSS ana elemanı (nokta imleci): Dönüşüm: Perspektif (700 piksel) rotatey (0deg); Bu, görüntünün görüntüyü daha iyi görebilmesi için normal görünmesi için görüntünün dönmesini ortadan kaldırır.
Şimdi sonuçlara bakalım. Bu mikro etkileşimin birkaç örneğini daha yapalım. Görüntüyü ve Sütun 2 ve Sütun 3’teki modülleri devam ettirin ve kopyalayın. Sütun 2’deki yinelenen görüntü modülünde, özel CSS’yi aşağıdaki gibi güncelleyin: CSS Ana Element (Varsayılan): Dönüşüm: Perspektif (700px) Rotatex (45deg); Geçiş: Tüm .2s; CSS ana elemanı (nokta imleci): dönüşüm: perspektif (700 piksel) rotatex (0deg); Buradaki tek farkın “Döndürme” nden sonra “X” harfi olduğunu unutmayın. Bu, görüntünün x ekseni üzerinde 45 derecede dönmesini söyler. Ardından, imleci normale döndürmeye yönlendirirken 0 olarak ayarlanan derece değerini alırız.
Sonuç bu. Yinelenen modülde Sütun 3’teki görüntü, özel CSS’yi şu şekilde güncelleyin: CSS Ana Element (Varsayılan): Dönüşüm: Perspektif (700px) Rotatey (-45deg);
Geçiş: Tüm .2s; CSS ana elemanı (nokta imleç): dönüşüm: perspektif (700 piksel) rotatey (0deg); Not Sütun 1’deki resimde kullanılan CSS ve CSS arasındaki tek fark “-45deg” değeridir.Görüntüyü saat yönünün karşısındaki y ekseninde döndürür.Aşağıdakiler, perspektif ve döndürme kullanan üç görüntü mikrofestasyonunun nihai sonucudur. Görüntü modülünden varsayılan ayarları kullanarak varsayılan havada daha fazla efekt ve tasarım eklemeyi unutmayın.Örneğin, bu, kutunun gölgesinin de etkisini eklemek için iyi bir yer olacaktır.#6 Zorlu düğmesinin mikro etkileşimi
Bu son mikro etkileşim için, imleci yönlendirirken ek bilgiler (aslında tamamen yeni bir düğme) görüntüleyen bir düğme değiştirme yapacağız. Temel fikir, sütuna özel bir yükseklik vermek ve daha sonra sütundaki iki düğme modülünü biriktirmektir. Üst düğme kullanıcının varsayılan olarak gördüğü şey olacaktır, ancak ikinci düğme, kullanıcının imleci düğmeye yönlendirirken göreceği “Ek Bilgi” düğmesidir. İşte nasıl yapılacağı. Bu düğme, çok geniş olmayan bir sütunla satıra bir düğme eklerseniz, satır sütununun tam genişliğine ulaşır. Bu örnek için, bir satır bir sütunu kullanacağım ve daha sonra düğmenin büyük bir tarayıcıda çok geniş olmaması için maksimum genişliği satırıma ayarlayacağım. Bir satır bir sütunla yeni bir parça oluşturun. Ardından düğme modülünü satıra ekleyin ve aşağıdaki düğmeyi güncelleyin: Metin düğmesi: “İndir” Düğmenin hizalanması: Orta düğme için özel kuvvet kullanın: evet metin düğmesinin rengi: #ffffff renk arka plan anahtarları: # 0C71C3 Genişlik Düğmenin sınırı: 0px Radius Sınır Düğmesi: 0PX KURTLIK İCONU: Ekran Renk Anahtarı Anahtar Icon: #ffffff Anahtarının Yerleştirilmesi Icon Icon: Sol Düğmeyi işaret ederken Sol Ekran simgesi: 0px Aşağıda, yinelenen yığın yeni düğmenin hemen altında olacak şekilde yaptığınız düğmeyi çoğaltın. Sonra yinelenen düğme ayarlarını aşağıdaki gibi güncelleyin: Metin düğmesi: MP3 (3,5 MB) Renkli Metin Düğmesi: #0C71C3 Arka Plan Renk Anahtarı Düğmesi: #ffffff Kest Icon: Bkz.
Satır tarzımıza geçmeden önce, CSS sınıfını üst düğmeye eklememiz gerekir. Üst düğme ayarlarını açın ve aşağıdaki CSS sınıfını ekleyin: CSS Sınıfı: İki düğme için üst düğme yüklendi, satır ayarlarını düğmenin maksimum genişliği ve CSS sütun sınıfı olarak işlev görecek özel bir genişliğe sahip güncelleyelim. Sayfa ayarlarına eklenecek özel CSS için. Aşağıdaki satır ve güncelleme ayarlarını açın: Özel genişlik: 200px CSS Sınıf Sınıf: Hareket Düğmesi CSS sınıfını satır değil, sütuna eklediğinizden emin olun.
Şimdi özel CSS eklemeye hazırız. Sayfa ayarlarını açın ve aşağıdaki CSS’yi ekleyin: /** Bu, kaydırıcı düğmesini stilize eder ** / .Slider-Button { Yükseklik: 50px;
Taşma: gizli;
Sınır: 2px katı #0c71c3; } .sLider-Button .et_pb_button { Ekran bloğu; Marj: 0! Önemli; } .Slider-Button: Hover. ToP-Button { Marj -TOP: -48px! Önemli;
}
Bu CSS yalnızca varsayılan boyutta bir düğme ile çalışır. Bunun nedeni, yüzmek için ikinci düğmeyi gizlemek için sütuna sabit bir yükseklik vermemiz gerektiğidir. Şu anda sütun yüksekliğine (“kaydırıcı-düğme” sınıfı ile) 50 piksel yükseklik verilmektedir. Bu, sütuna da verilen 2px sınırına katkıda bulunur. Yüzerken, üst düğme (“Üst düğme” düğmesi üste taşındı -48px’lik üst kenar ile görünmez (düğmenin yüksekliği 2px sınırlardan biri tarafından azaltılır). Uygun üst düğme marjı. Sonuç aşağıdadır.
Kendi kullanımınız için farklı metin/bilgiler ve simgelerle düğmeler düzenleyebileceğinizi unutmayın. Bu, kullanıcıları benzersiz oyunculuk davetiyelerindeki ek bilgilerle eğitmenin iyi bir yoludur. Ücretsiz indirin: Bu eğitim için önceden hazırlanmış mizanpajlar ve css dosyaları alın bu mikro etkileşimin web sitenizde göründüğünü hızlı bir şekilde başlatmak istiyorsanız, aşağıdaki zip dosyasını indirebilirsiniz. ZIP dosyasını indirdikten sonra sabit sürücünüzdeki dosyaları arayın. Buna “MicroInteraction-Examples.zip” denir. ZIP dosyasını açtığınızda iki dosya görürsünüz. “MicroInteraction-Examples.json” adlı dosya Divi’nin düzenidir. Divi kütüphanenize yüklenmesi gerekir. Bunu, Divi> Divi kütüphanesine giderek ve ardından sayfanın üst kısmındaki içe aktarma düğmesini tıklayarak WordPress kontrol panelinizden yapabilirsiniz. “Microinters.css” adlı dosya, öğreticide kullanılan özel CSS içerir. Bu CSS’nin CSS özel sayfa ayarlarına veya CSS kutusuna ek ayar temasına kopyalanması gerekir. Düzeniniz yüklendikten sonra Microinterization File.css’i doğrudan Divi Oluşturucuya sürüklemek için DRAET ve DIVI özelliklerini de kullanabilirsiniz. Bu, sayfa ayarlarınıza otomatik olarak CSS ekleyecektir.
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız.Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Bu mikro etkileşimin sizin için yararlı olduğunu umuyorum.Sitenizde Divi (sadece CSS kullanarak) ile kullanımı kolaydır.Zaman ve basitlik için, modülün temel varsayılan stilini kullanıyorum, ancak tasarım seçeneklerini daha yaratıcı bir stil için gerektiği gibi ayarlamaktan çekinmeyin.Ayrıca, bu örnekler için CSS’yi ihtiyaçlarınıza uyacak şekilde ayarlamaktan çekinmeyin veya tamamen yeni bir şey üretin.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
