Elementor Web Sitesi Oluşturucusu ile sınırsız özelleştirmenin nasıl olduğunu hepimiz biliyoruz. Bu özelleştirme ile kullanıcı deneyimini geliştirebilir ve yarattığımız şeyde yaratıcı olabiliriz.
Hover'daki Logo Değiştirme efekti, kullanıcı imlecini web sitenize yerleştirilen logoya yerleştirdiğinde, renk, şekil veya anahat gibi ayrıntılarını otomatik olarak değiştirir. Bu öğreticide, Elementor ile vurgulu efekt üzerinde bir logo takası nasıl oluşturulacağını anlayacağız.
Elementor kullanarak vurgu efektinde logo takası nasıl oluşturulur
Etkinin ne olduğunu zaten biliyorsunuz ve ne yaratmak istediğiniz hakkında aklınızda fikirler var, ilerleyelim ve nasıl olduğunu görelim.
Başlamak için widget'lar için bir iç bölüm ekleyin.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başla
Ardından, başlangıçta oluşturduğunuz bölüme bir sütun eklemeniz gerekir. Bu öğretici için, iki sütunlu yapı ile devam edeceğiz.
Ardından görüntü widget'ını oluşturduğunuz sütuna sürükleyip bırakın.
Efektin çalışması için iki resme ihtiyacınız olacak. Biri normal olarak gösterilirken, diğeri kullanıcı imlecini yerleştirdiğinde görüntülenecektir.
Aynı logonun iki varyasyonlarını kullanabilir veya tamamen farklı iki resim kullanabilirsiniz, olasılıklar sınırsızdır.
Görüntü seçiminden sonra, özel CSS alanına, vurgu efektindeki logo değişiminin çalışmasını sağlamak için aşağıdaki CSS kodunu yapıştırın.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}Ve bitti! Önizlemek ve efektin web sitenizde nasıl göründüğünü görmek için sayfanızı yayınlayın. İstersen değişiklik yapmak için geri gel.
Bu şekilde Elementor ile Logo Takası Hover'da efektini oluşturabilirsiniz. Gönderilerimiz hakkında bilgi almak için Facebook ve Heyecan'mızda bize katıldığımızdan emin olun.
