ev borcu WordPress sitesi
Divi Sitenizi Daha Keyifli Hale Getirecek 6 Mikro Etkileşim (& Nasıl Elde Edilir)
Mikro etkileşimler, sitenizle etkileşime girerken kullanıcı deneyimini geliştirmenin harika bir yoludur. Simgelerin, resimlerin veya form alanlarının hafif animasyonları, kullanıcıyı eğlenceli ve amaca yönelik bir şekilde harekete geçmeye yönlendirebilir. Sitenize ekleyebileceğiniz sayısız mikro etkileşim vardır, ancak bunları "mikro" tutmak iyi bir kuraldır. Geç kalmak istemezsin.
Bugün size Divi ile sorunsuz çalışan bazı basit mikro etkileşimler göstereceğim. Daha gelişmiş mikro etkileşimlerden bazıları, uygulamak için daha gelişmiş jquery gerektirir. Ancak bu eğitim için size sadece CSS kullanarak bazı animasyonları nasıl ekleyeceğinizi göstereceğim. Kullanıcıların normalde etkileşimde bulunduğu öğelere odaklanacağım – düğmeler, simgeler, resimler ve formlar.
Başlayalım.
Divi Sitenizi Daha Keyifli Hale Getirecek 6 Mikro Etkileşim (& Nasıl Elde Edilir)
Youtube Kanalımıza Abone Olun
Tasarımın Divi'de Uygulanması
1. Hover'da Animasyonlu Blurb Simgeleri
Divi, Blurb Module ile sitenize kolayca eklenebilecek bir simge kitaplığı ile birlikte gelir. Bu, özellikler veya beceriler gibi önemli bilgi parçalarına bir örnek eklemek için kullanışlıdır. Bilgilerinize dikkat çekmek istiyorsanız, içeriğinizin üzerindeki simgeyi canlandırabilirsiniz.
Size simgenin animasyonunu tetiklemenin iki yolunu göstereceğim. Bu ilk örnekte, gerçek simgenin üzerine gelindiğinde simge animasyonu tetiklenir. Kullandığım animasyon türleri döndürme, sallama ve ölçeklemedir.
Önce bulanıklaştırma modüllerinizi ekleyin. Divi Builder'ı kullanarak, üç sütunlu bir düzen ile standart bir bölüm ekleyin ve ilk sütuna bir tanıtım yazısı modülü ekleyin.
Blurb Module Settings'de aşağıdaki ayarları güncelleyin:
Başlık Girin
URL'yi girin (şimdilik # kullanıyorum)
Simgeyi Kullan: EVET
Bir Simge Seçin
Simge Rengi: #0c71c3
Resim/Simge Animasyonu: Animasyon Yok
İçerik: [içeriğinizi ekleyin]
Özel CSS altında, "döndür" adlı bir CSS Sınıfı ekleyin. Bu, döndürme animasyonunu tetiklemek için kullanılacaktır.
Kaydet çık
Özel CSS'mizi eklemeden önce, daha önce yaptığınızı iki kez çoğaltarak ve iki boş sütuna sürükleyerek sonraki iki tanıtım metnini ayarlayın.
Ayarları düzenlemek için ikinci (orta) tanıtımdaki hamburger simgesine tıklayın. Bulanıklık Modülü Ayarları altında Özel CSS bölümüne gidin ve CSS Sınıfı "döndür"ünü yeni "sallama" sınıfıyla değiştirin.
Kaydet çık
Sağ sütundaki üçüncü tanıtım yazısı için aynı işlemi tekrarlayın ve "döndür" CSS sınıfını "ölçek" adlı yeni bir sınıfla değiştirin.
Artık bulanıklarınız yerinde. Divi → Tema Seçenekleri'ne gidin ve Özel CSS kutusuna aşağıdakini ekleyin:
.rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.rotate .et-pb-icon:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.shake .et-pb-icon:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
.scale .et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Etkiyi çalışırken görmek için sayfanıza bakın ve simgelerin üzerine gelin.
Simge animasyonunu tetiklemenin ikinci yolu, tanıtım yazısı modülü alanının üzerine gelmektir.
Bunu yapmak için, az önce eklediğiniz CSS'yi aşağıdakiyle değiştirin:
.rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.5s ease-out;
}
.rotate:hover .et-pb-icon {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.scale:hover .et-pb-icon {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.shake:hover .et-pb-icon {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
Bu efekt, içeriği düğmesiz olarak sunarken gerçekten kullanışlıdır. Simgenin üzerine gelindiğinde hareket etmesi, kullanıcının simgeyi tıklamasını sağlayan kullanışlı bir mikro etkileşimdir.
#2 CTA Düğmesine Darbeli Animasyon Ekleme
CTA düğmenize bir darbe animasyonu eklemek, etkili bir dikkat çekici olabilir. İşin püf noktası, dikkati dağıtmadan kullanıcının dikkatini çekecek kadar ince yapmaktır.
İlk olarak, tam genişlikte bir sütuna sahip standart bir bölüm ekleyin. Ardından bir Eylem Çağrısı Modülü ekleyin. Harekete Geçirici Mesaj Modülü Ayarlarında, Genel Ayarlar 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!” Kullanıyorum)
Arka Plan Rengini Kullan: EVET
Arka Plan Rengi: #dddddd
Gelişmiş Ayarlar altında aşağıdakileri değiştirin:
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #2ea3f2
Düğme Simgesi Ekle: HAYIR
Özel CSS altında, CSS Sınıfı "darbesini" ekleyin.
Şimdi Divi → Tema Seçenekleri'ne gidin ve darbe efektiniz için aşağıdaki Özel CSS'yi girin:
.pulse .et_pb_button {
animasyon adı: darbe;
animasyon süresi: 5000ms;
transform-orijin: %70 %70;
animasyon-yineleme-sayısı: sonsuz;
animasyon-zamanlama-fonksiyonu: doğrusal;
}
@keyframes darbe {
%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üştürme: ölçek(1); }
}
.pulse .et_pb_button:hover {
animasyon: yok;
}
Artık CTA düğmeniz her 5 saniyede bir iki kez titreyecektir.
#3 CTA Düğmesine Kaldırma Etkisi Ekleme
Bu sonraki efekt, darbe yapmak yerine CTA düğmesini kaldırır. Üzerine gelindiğinde, yükseklik algısı oluşturmak için altında bir gölge olacak şekilde düğmeyi hafifçe kaldırır.
Artık oluşturulmuş bir CTA bölümümüz olduğuna göre, darbe CTA'sı için az önce oluşturduğunuz bölümün tamamının bir kopyasını oluşturun.
Yeni kopyalanmış bölümünüzün Bölüm Modülü Ayarlarını düzenlemek ve arka plan rengini #ffffff olarak değiştirmek için tıklayın.
Kaydet çık
Şimdi Harekete Geçirme Modülü Ayarlarını düzenleyin. Gelişmiş Tasarım Ayarları altında aşağıdakileri değiştirin:
Düğme Simgesi Ekle: EVET
Düğme Simgesini Seçin (bu örnek için aşağı ok işareti iyi çalışır)
Düğme Simge Rengi: #ffffff
Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
Özel CSS altında, Özel CSS sekmesinin altına "kaldırma" adlı bir CSS Sınıfı ekleyin.
Divi → Tema Seçenekleri'ne gidin ve aşağıdaki Özel CSS'yi ekleyin:
.lift .et_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);
margin-top: -5px;
margin-bottom: 5px !important;
}
Sonuçları inceleyin.
#4 Fareyle Üzerine Geldiğinde Düğme Simgesini Döndürme
Fareyle üzerine gelindiğinde düğme simgesinin dönmesini sağlamak için, Harekete Geçirici Çağrı Modülü Ayarına geri dönün ve Özel CSS'nin altına CSS Sınıfı "döndürme simgesi" ("kaldırma" sınıfından bir boşluk sonra) ekleyin.
Ardından Divi → Tema Seçenekleri'ne gidin ve aşağıdaki Özel CSS'yi ekleyin:
.rotate-icon .et_pb_button:hover:sonra {
-webkit-dönüşüm: döndür(-90deg);
dönüştür: döndür(-90deg);
}
Git düğmeni kontrol et. Düğme simgesinin saat yönünün tersine 90 derece döndüğüne ve kullanıcı için kelimenin tam anlamıyla yön veren bir mikro etkileşim oluşturduğuna dikkat edin.
#5 Görüntülere Mikro Etkileşimler Ekleme
Görüntülerle Mikro etkileşimler eklemek, pastanın üzerine krema sürmek gibidir. Görüntüler zaten ilgi çekicidir ve başka bir etkileşim boyutu eklemek, onlara ihtiyaç duyabileceğiniz ekstra tıklanabilir kaliteyi sağlar.
Başlayalım. Üç sütunlu bir düzen ile standart bir bölüm ekleyin ve ilk sütuna bir görüntü modülü ekleyin.
Görüntü Modülü Ayarlarını düzenlemek için tıklayın. Genel Ayarlar altında bir resim yükleyin ve “Işık Kutusunda Aç” seçeneğini EVET olarak değiştirin.
Özel CSS altında, CSS Sınıfı "tilt" öğesini ekleyin.
Kaydet çık
Görüntü modülünüzü iki kez çoğaltın ve bunları satırınızdaki diğer iki sütuna sürükleyin.
Şimdi Özel CSS'yi Divi → Tema Seçenekleri'ne ekleyin:
.tilt.et_pb_image {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border: 1px solid #fff;
}
.tilt.et_pb_image:hover {
-moz-transform: rotate(5deg) scale(1.1);
-webkit-transform: rotate(5deg) scale(1.1);
-o-transform: rotate(5deg) scale(1.1);
transform: rotate(5deg) scale(1.1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);
border: 1px solid #fff;
}
Şimdi sayfanızdaki resim sıranıza bakın.
Fareyle üzerine gelindiğinde, görüntülerin boyutu %10 artar, 5 derece döndürülür ve gölge kullanılarak sayfadan çıkar.
Şimdi ters bir etki ekleyelim. Bu sefer, görüntüler eğik ve gölgeli başlayacak. Ardından üzerine gelindiğinde, görüntüler normal duruma dönecektir.
Az önce yaptığınız görüntü satırını çoğaltın.
Şimdi sıradaki üç yeni fotoğrafın her birini gözden geçirin ve Özel CSS sınıfını "eğim"den yeni "düz" sınıfa değiştirin.
Ardından Özel CSS'yi Divi → Tema Seçenekleri'ne ekleyin:
.straight.et_pb_image {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transform: rotate(-5deg) scale(0.8);
-webkit-transform: rotate(-5deg) scale(0.8);
-o-transform: rotate(-5deg) scale(0.8);
transform: rotate(-5deg) scale(0.8);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);
border: 1px solid #fff;
}
.straight.et_pb_image:hover {
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
border: 1px solid #fff;
box-shadow: none;
}
<
#6 İletişim Formu Alanlarını Canlandırma
Bu son mikro etkileşim, Divi'nin İletişim Formu'ndaki giriş alanlarına bazı animasyonlar ekler. Bu mikro etkileşimin amacı, kullanıcıya önemli bilgileri doldurma sürecinde yardımcı olmaktır. Girdi alanlarındaki fareyle üzerine gelme ve odaklanma etkisi, süreç boyunca tanımlama ve güvenceye yardımcı olur. Ve uygulaması kolaydır.
İlk olarak, tam genişlikte sütun düzenine sahip standart bir bölüme bir iletişim formu modülü ekleyin. Satır Modülü Ayarlarını düzenleyin. Genel Ayarlar altında, "Özel Genişliği Kullan" seçeneğini EVET olarak ayarlayın ve Özel Genişliği 600 piksel olarak ayarlayın.
Kaydet çık
Ardından İletişim Formu Ayarlarını düzenleyin.
Genel Ayarlar altında, “Görüntüleme Captcha”yı HAYIR olarak değiştirin. (isteğe bağlı)
Özel CSS altında, "border-left" adlı bir CSS Sınıfı ekleyin. 
Divi → Tema Seçenekleri'ne gidin ve aşağıdaki Özel CSS'yi girin:
.border-left .et_pb_contact p input, .border-left .et_pb_contact p textarea {
height: 60px;
border-left: 4px solid #ddd;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.border-left .et_pb_contact p input:hover,.border-left .et_pb_contact p textarea:hover, .border-left .et_pb_contact p input:focus, .border-left .et_pb_contact p textarea:focus {
border-left: 8px solid #2ea3f2;
font-size: 16px;
}
Bu kadar. Artık, hem fareyle üzerine gelindiğinde hem de odaklanıldığında giriş alanı yazı tipi boyutunda hafif bir artışla birlikte renkli bir sekme efekti ekleyen basit ama etkileşimli bir iletişim formunuz var.
Son düşünceler
Umarım bu mikro etkileşimleri faydalı bulursunuz. Sitenizde Divi ile (yalnızca CSS kullanarak) kullanımı kolaydır. Bu örnekler için CSS'yi ihtiyaçlarınıza uyacak şekilde ayarlamaktan veya tamamen yeni bir şey bulmaktan çekinmeyin.
Eğlence!
Her zaman olduğu gibi, fikirlerinizi, yorumlarınızı ve/veya sorularınızı aşağıya göndermekten çekinmeyin.