6 Divi sitenizi daha eğlenceli hale getirecek mikro etkileşim (& nasıl ulaşılır)
Mikro etkileşim, sitenizle etkileşime girdiklerinde kullanıcı deneyimini geliştirmenin iyi bir yoludur. Küçük bir animasyon simgesi, resim veya alan alanı, kullanıcıya eğlenceli ve yönlendirilmiş bir şekilde harekete geçmesi için sinyal verebilir. Sitenize ekleyebileceğiniz birçok mikro etkileşim vardır, ancak iyi pratik kurallar onu “mikro” tutmaktır. Geç kalmak istemiyorsun. Bugün Divi ile sorunsuz çalışan bazı basit mikro etkileşimler göstereceğim. Bazı daha sofistike mikro etkileşimler, uygulanması için daha sofistike bir jQuery gerektirir. Ancak, bu öğretici için size yalnızca CSS kullanarak nasıl bazı animasyonlar ekleyeceğinizi göstereceğim. Genellikle kullanıcılar, simgeler, görüntüler ve formlarla etkileşime giren öğelere odaklanacağım.
Başlayalım. 6 Divi sitenizi daha keyifli hale getirecek mikro etkileşimler (ve nasıl başarılır) YouTube kanalına abone olarak tasarımı divi #1’de uyguluyoruz, divi tarafından yönlendirilen bulanıklık simgesini, sitenize eklenebilen bir simge kütüphanesi ile birlikte gelir. Bir bulanıklık modülü ile kolayca. Bu, özellikler veya beceriler gibi önemli bilgilere illüstrasyon eklemek için kullanışlıdır. Bilgilerinize dikkat çekmek istiyorsanız, içeriğinizin üzerindeki simgeyi canlandırabilirsiniz. Simge animasyonunu tetiklemenin iki yolunu göstereceğim. Bu ilk örnekte, imleci gerçek simgeye yönlendirilirken simge animasyonu tetiklenir. Kullandığım animasyon türleri döner, sallama ve ölçeklendirir.
Önce açıklama modülünüzü ekleyin. Divi Builder’ı kullanarak, üç sütunlu standart bir parça ekleyin ve ilk sütunda açıklama modülünü girin. Blurb modül ayarlarında aşağıdaki ayarları güncelleyin: Başlığı girin URL (şimdilik # kullanıyorum) simgeyi kullanın: simgeyi kullanın: Evet Icon Icon Icon Icon’u seçin: #0C71C3 Resim/Animasyonlu Simge: Animasyon İçeriği Olmadan: [İçeriğinizi Ekleyin]
-Moz-Transition: Tüm 0.2s kolaylığı;
-MS-Transition: Tüm 0.2s kolaylığı;
-O-geçiş: tüm 0.2s kolaylığı;
Geçiş: Tüm 0.2s kolaylığı;
}
.et-pb-icon: hover {
-Moz-transform: rotate (360deg);
-Webkit-Transform: Rotate (360deg);
-O-transform: rotate (360deg);
Dönüşüm: döndür (360deg);
}
.Shake .et-pb-icon: hover {
Animasyon: 0.82s kübik-bozier sallayın (.36, .07, .19, .97);
Dönüşüm: Çeviri3D (0, 0, 0);
Backface-görünürlük: gizli;
Perspektif: 1000px;}
@Keyframes shake {
% 10,% 90 {
Dönüşüm: Çeviri3D (-1px, 0, 0);
}
% 20,% 80 {
Dönüşüm: Çeviri3D (2px, 0, 0);
}
%30,%50,%70 {
Dönüşüm: Çeviri3D (-4px, 0, 0);
}
% 40,% 60 {
Dönüşüm: Çeviri3D (4px, 0, 0);
}
}
.scale .et-pb-icon: hover {
-Moz-transform: ölçek (1.2);
-Webkit-Transform: Ölçek (1.2);
-O-transform: ölçek (1.2);
Dönüşüm: Ölçek (1.2);
}
Sayfanızı kontrol edin ve etkiyi çalıştırmak için imleci simgeye yönlendirin.
İkon animasyonunu tetiklemenin ikinci yolu, imleci açıklamanın modül alanına yönlendirmektir. Bunu yapmak için, yeni eklediğiniz CSS’yi aşağıdakilerle değiştirin: .scale .scale .et-pb-icon, .Shake .et-pb-icon {
-Webkit-Transition: Tüm .2S kolaylığı; -Moz-Transition: Tüm 0.2s kolaylığı;
-MS-Transition: Tüm 0.2s kolaylığı;
-O-geçiş: tüm 0.2s kolaylığı;
Geçiş: Tüm 0.5s kolaylığı;
}
.Rotate: Hover .et-pb-icon {
-Moz-transform: rotate (360deg);
-Webkit-Transform: Rotate (360deg);
-O-transform: rotate (360deg);
Dönüşüm: döndür (360deg);
}
.Scale: Hover .et-pb-icon {
-Moz-transform: ölçek (1.2);
-Webkit-Transform: Ölçek (1.2);
-O-transform: ölçek (1.2);
Dönüşüm: Ölçek (1.2);
}
.Shake: Hover .et-pb-icon {
Animasyon: 0.82s kübik-bozier sallayın (.36, .07, .19, .97);
Dönüşüm: Çeviri3D (0, 0, 0);
Backface-görünürlük: gizli;
Perspektif: 1000 piksel;
}
@Keyframes shake {
% 10,% 90 {
Dönüşüm: Çeviri3D (-1px, 0, 0);
}
% 20,% 80 {
Dönüşüm: Çeviri3D (2px, 0, 0);
}
%30,%50,%70 {
Dönüşüm: Çeviri3D (-4px, 0, 0);
}
% 40,% 60 {
Dönüşüm: Çeviri3D (4px, 0, 0);
}
}
Bu etki, düğmesiz içerik görüntülenirken çok kullanışlıdır. Yüzerken simgeleri taşımak, kullanıcıların simgeyi tıklamasını içeren kullanışlı bir mikro etkileşimdir.#2 CTA düğmesine Nabız Animasyonu ekleyin CTA düğmenize kredi animasyonu ekleme etkili bir cazibe olabilir. İşin püf noktası, kullanıcının dikkatini rahatsız etmeden çekmesi için oldukça pürüzsüz hale getirmektir. İlk olarak, tam geniş bir sütuna sahip standart bir parça ekleyin. Ardından, harekete geçmeye davet modülünü ekleyin. Ayarlarda davet modülü, genel ayarların altında aşağıdakileri değiştirin: Başlık girin Düğme URL’sini girin (şimdilik “#” kullanıyorum) Düğme metnini girin (“Beni tıklayın!”) Arka planı kullanın) Renk: Evet Renk Arka Plan: #DDDDDD
Diğer ayarların altında aşağıdakileri değiştirin: Düğme için özel bir stil kullanın: evet metin renk düğmesi: #ffffff renk arka plan düğmesi: #2ea3f2 Düğme simgesini ekle: Hayır
Özel CSS altında CSS sınıfı “Pulse” ekleyin. Şimdi Divi → Tema seçeneğini açın ve nabız efektiniz için aşağıdaki özel CSS’yi girin: .pulse .et_pb_button {names: nabız; Animasyon süresi: 5000ms; Dönüşüm-ASAL:% 70% 70; Animasyon-Meclis: Sınırsız; Animasyon-Time Fonksiyon: Doğrusal; } @eyframes darbesi {0% {dönüşüm: ölçek (1); }% 30 {dönüşüm: ölçek (1); }% 40 {dönüşüm: ölçek (1.08); }% 50 {dönüşüm: ölçek (1); }% 60 {dönüşüm: ölçek (1); }% 70 {dönüşüm: ölçek (1.05); }% 80 {dönüşüm: ölçek (1); }% 100 {dönüşüm: ölçek (1); }}
.pulse .et_pb_button: hover {animasyon: hayır; } Şimdi CTA düğmeniz her 5 saniyede iki kez yenilecek. #3 CTA düğmesine asansör efekti ekleyin Bir sonraki efekt CTA düğmesini zonklamak yerine kaldırır. Yüzerken, bir yükseklik algısı oluşturmak için düğme aşağıdaki gölge ile hafifçe yükseltilir. Şimdi, CTA darbeleri için yaptığınız tüm parçalardan kopya için oluşturulan CTA bölümümüz var. Yeni kopya modülünüzün bölümlerini düzenlemek ve arka plan rengini #FFFFFF olarak değiştirmek için tıklayın. Kaydet çık
Şimdi harekete geçecek davet modülü ayarlarını düzenleyin. Gelişmiş tasarım ayarlarının altında aşağıdakileri değiştirin: Düğme simgesini ekleyin: evet Düğme simgesini seçin (aşağı ok noktası bu örnek için düzgün çalışıyor) KUTT simgesinin rengi: #ffffff yalnızca düğmeyi işaret ederken simgeyi görüntüler: Numara CSS Custom altında, CSS Sınıfını Özel CSS sekmesinin altına ekleyin.
Divi’yi aç → Tema seçeneğini ve aşağıdaki özel CSS’yi ekleyin: .LIFT .T_PB_BUTTON: HOVER {
Box-Shadow: 0 25px 55px 0 RGBA (0, 0, 0, 0.21), 0 16px 28px 0 RGBA (0, 0, 0, 0.22);Marj -TOP: -5px; Marj-Alt: 5 piksel! Önemli; }
Sonuçlara bakın.
#4 Döndüren bir düğme simgesi yapmak için yüzerken düğme simgesini döndürün, CSS Custom altında “Döndürme-İkon” sınıfı CSS (“Kaldırma” sınıfından sonra bir alan) eklemek ve eklemek için davet modülünün ayarlarına dönün.
Ardından Divi → Tema seçeneğine gidin ve aşağıdaki özel CSS’yi ekleyin: Değişim: döndür (-90deg); } Düğmenizi kontrol edin. Saat yönünün karşısında 90 derece dönen düğmenin simgesine dikkat edin, tam anlamıyla yön veren kullanıcılar için mikro etkileşimler oluşturur.
#5 Mikro etkileşim ekleyin Şekille Mikro Etkileşim Ekleyin Keklerdeki şeker katmanları gibi görüntülerle mikro etkileşim ekleyin. Görüntü ilginç ve başka bir etkileşim boyutu eklemek onlara ihtiyacınız olabilecek ekstra kalite veriyor. Başlayalım. Üç sütunlu standart bir parça ekleyin ve ilk sütunda görüntü modülünü girin.
Görüntü modülü ayarlarını düzenlemek için tıklayın. Genel ayarların altında, görüntüyü yükleyin ve “Lightbox’ta Aç” seçeneğini evet olarak değiştirin. CSS Custom altında, “Tilted” CSS sınıfını ekleyin. Görüntü modülünüzü iki kez kaydedin ve özetleyin ve satırınızdaki diğer iki sütuna sürükleyin. Şimdi Divi’ye Özel CSS ekleyin → Tema seçeneği: .tilt.et_pb_image { -Webkit-Transition: Tüm .2S kolaylığı;
-Moz-Transition: Tüm 0.2s kolaylığı; -MS-Transition: Tüm 0.2s kolaylığı; -O-geçiş: tüm 0.2s kolaylığı; Geçiş: Tüm 0.2s kolaylığı;
Sınır: 1 piksel katı #fff;
}
.tilt.et_pb_image: hover {
-Moz-transform: döndür (5deg) ölçeği (1.1);
-Webkit-Transform: Döndür (5DEG) Ölçeği (1.1);
-O-transform: döndür (5deg) ölçeği (1.1);
Dönüşüm: döndür (5deg) ölçeği (1.1);
Box-Shadow: 0 3px 10px RGBA (0, 0, 0, 0.43), 0 3px 10px RGBA (0, 0, 0, 0.36);
Sınır: 1 piksel katı #fff;
}
Şimdi sayfanızdaki resimlerinizin satırını kontrol edin.
Yüzerken, görüntü boyutunu%10 artırır, 5 derece döner ve bir gölge kullanarak sayfadan çıkar. Şimdi tam tersi etkiyi ekleyelim. Bu kez, resim eğilmeye ve gölgede kalmaya başlayacak. Sonra zammı üzerinde, görüntü normal duruma dönecektir. Az önce yaptığınız resmin satırını çoğaltın.
Şimdi sıradaki üç yeni fotoğrafın her birini açın ve özel CSS sınıfını “Tilted” den yeni “düz” sınıfa değiştirin. Divi’ye özel CSS ekleyin → Tema seçeneğine: .straight.et_pb_image {
-Webkit-Transition: Tüm .2S kolaylığı;
-Moz-Transition: Tüm 0.2s kolaylığı;
-MS-Transition: Tüm 0.2s kolaylığı; -O-geçiş: tüm 0.2s kolaylığı; Geçiş: Tüm 0.2s kolaylığı; -moz-transform: döndür (-5deg) ölçeği (0.8);
-Webkit-Transform: Döndür (-5deg) Ölçeği (0.8);
-O-transform: döndür (-5deg) ölçeği (0.8);
Dönüşüm: döndür (-5deg) ölçeği (0.8);
Box-Shadow: 0 3px 10px RGBA (0, 0, 0, 0.43), 0 3px 10px RGBA (0, 0, 0, 0.36);
Sınır: 1 piksel katı #fff;
}
.straight.et_pb_image: hover {
-Moz-transform: döndür (0deg) ölçeği (1);
-Webkit-Transform: Döndür (0deg) Ölçeği (1);
-O-transform: döndür (0deg) ölçeği (1);
Dönüşüm: Döndür (0deg) Ölçeği (1);
Sınır: 1 piksel katı #fff;
Box-Shadow: Yok;
}
< #6 Son mikro etkileşim temas formu alanını ilişkilendirin Divi temas formundaki giriş alanına bir miktar animasyon ekleyin. Bu mikro etkileşimin amacı, önemli bilgileri doldurma sürecinde kullanıcılara yardımcı olmaktır. Giriş efekti ve giriş alanına odaklanmak, süreç boyunca tanımlanmasına ve garanti altına alınmasına yardımcı olur. Ve uygulanması kolay. İlk olarak, tam geniş sütun düzeni ile standart bölüme Kontak Formu modülünü ekleyin. Satır modülü ayarlarını düzenleyin. Genel ayarların altında, "Özel Genişliği Kullan" ı evet olarak ayarlayın ve özel genişliği 600 piksel olarak ayarlayın.
Kaydet ve Çıkış Ardından İletişim Formu ayarlarını düzenleyin. Genel ayarlar altında, "captcha ekranını" değiştirmeyin. (isteğe bağlı)
Özel CSS altında, "Border-sol" adlı bir CSS sınıfı ekleyin.
Açık Divi → Tema seçeneği ve aşağıdaki özel CSS'yi girin: .border-sol .et_pb_contact p girişi ,. Sınır-sol .et_pb_contact p textarea {yükseklik: 60px;
Sınır sol: 4px katı #ddd;
-Moz-Transition: Tüm 0.2s kolaylığı; -MS-Transition: Tüm 0.2s kolaylığı; -O-geçiş: tüm 0.2s kolaylığı; Geçiş: Tüm 0.2s kolaylığı; }
.Border-left .et_pb_contact p Giriş: Hover,. Sınır-sol .et_pb_contact p textarea: Hover ,. Sınır-sol .et_pb_contact p Giriş: Odak, sınır-sol.
Sınır sol: 8px katı #2EA3F2;
yazı tipi boyutu: 16px;
}
İşte burada. Artık hem imleci yönetirken hem de odaklandığında giriş alanı yazı tiplerinin boyutunda hafif bir artışla birlikte bir renk sekmesi efekti ekleyen basit ama etkileşimli bir iletişim formunuz var.
Son zihin Umarım bu mikro etkileşim sizin için yararlıdır. Sitenizde Divi (sadece CSS kullanarak) ile kullanımı kolaydır. Bu örnekler için CSS’yi ihtiyaçlarınıza uyacak şekilde ayarlamaktan çekinmeyin veya tamamen yeni bir şey üretin. Zevk almak! Her zamanki gibi, fikirlerinizi, yorumlarınızı ve/veya sorularınızı aşağıda yayınlamaktan çekinmeyin.
