ile bir vurgulu animasyon oluşturmak ister misiniz? Elementor ?
Bu derste üzerinden uçup gideceğimiz ve bununla ilgili açıklamayı ortaya çıkaracak bir kutu pepsi kullanacağız.
Size göstermek istediklerimiz hakkında bir fikir edinmek için sizi aşağıdaki videoyu izlemeye davet ediyoruz.
Tek bir sütun bölümü ekleyin, ardından kenar çubuğunda Minimum yükseklik uzeri Yükseklik
Sur Minimum yükseklik tıklayın VH ardından kaydırıcıyı 100. Her zaman sekmede düzen tanımlamak 650 olarak genişlik.
Sütunu seçin ve alandaki kenar çubuğunda Dikey hizalama seçmek Çevre.
Sekmede stil, Renk seçiciye tıklayarak arka plan rengini değiştirin ve yazın # D37636 sonra bölümde sınır, hadi kapalım 20 tüm kaldırım yarıçapları için.
Sekmede gelişmiş, dolgu bağlamayı kapatın ve yazın 75 iç marjlar için Haut et Bas et 25 iç marjlar için Patavatsız et DROITE.
Ardından sütunda bir widget'ı sürükleyin iç bölüm. Dahili bölümden sütunlardan birini kaldıralım.
Kalan iç bölümün sütununda, Başlık widget'ı ve başlığı şu şekilde değiştirin Pepsi Aşk.
Ayrıca şu kılavuzumuzu okuyun: Elementor'da Portföyden Efekt Kartı Nasıl Oluşturulur
Ardından, sekmede stil, metne beyaz bir renk verin ve tipografi için boyut uzeri 32içinde satır yüksekliği uzeri 1.2, harf boşluğu uzeri 0.5.
altında Başlık widget'ı, bırak Metin Düzenleyici widget'ı ve metni düzenleyin. sekmesinde stil, metin rengini beyaz olarak değiştirin ve boyut tipografi açık 16içinde satır yüksekliği uzeri 1.5 ve harf boşluğu uzeri 0.5.
Sekmede gelişmiş marjı değiştir Bas uzeri -10.
bölümünde konumlandırma sekme gelişmiş, Değiştirmek Genişlik uzeri personnalisé ve Genişlik Özel ikincisini ayarla 310.
Paragrafın altına bir ekleyeceğiz düğme widget'ı Metin için ile Devamını Oku.
Sekmede stil düğmeye rengini ver Beyaz ve metin rengi olarak ayarlayın Noire.
Şimdi sütunu seçin iç bölümbölümünde gelişmiş sekme gelişmiş bağlantıyı kapatın ve yüzdeye tıklayın, ardından marjı ayarlayın Patavatsız uzeri 20 Ve içinde İç Marj tanımla Patavatsız uzeri 20.
Şimdi sürükleyin resim widget'ı yukarıda İç bölüm bir resim ekleyin. Örnek olarak internette kolayca bulunabilen bir içeceğin resmini seçtik.
Resmi ekledikten sonra, Görüntü boyutu uzeri Tüm ve hizalanma hadi tıklayalım Merkez.
Sekmede gelişmiş, bölüme git Pozisyon uzeri Genişlik seçmek Çevrimiçi (Otomatik)Üzerinde Pozisyon seçmek kesin ve Yatay Yönlendirme seçmek doğru sonra Ofset girmek -9.9 ve Ofset Dikey Yönlendirme girin -105.
Daha aşağı git Dönüştür bölümü Définissez boyutlandırmak uzeri 0.5.
Şimdi sütunu seçin İç bölüm ve sekmede gelişmiş adını girin css sınıfları pepsi metni.
Ardından ana bölümümüzü seçin, bölüme gidin özel CSS onun Sekmesi İleri, aşağıdaki kodu kopyalayıp yapıştırın:
/*Hover Animation CSS*/
selector{
--transition: 0.5s;
--circle-color: #313F69;
--content-background: #D27838;
--mobile-height: 670px;
--mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
content: "";
background: var(--circle-color);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
clip-path: circle(400px at center);
background: var(--content-background);
}
selector:hover .elementor-widget-image{
right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector .pepsi-text{
opacity: 0;
visibility: hiddin;
}
selector:hover .pepsi-text{
opacity: 1;
visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
height: var(--mobile-height);
}
selector .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector:hover .elementor-widget-image{
right: 68px !important;
top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-top: -265px !important;
}
}
NOT: Bu bölüme sahip değilseniz, o zaman gitmeniz gerekir Elementor'un profesyonel sürümü.
Şimdi metinden arka plan rengini kaldırmak istiyorsak, ana sütunumuzu seçeceğiz ve Stil sekmesinde arka plan rengini devre dışı bırakacağız.
Şu anda, animasyonunuz tarayıcıda normal şekilde çalışacaktır.
Tablette animasyon da mükemmel görünüyor
Ancak akıllı telefonda normal şekilde görüntülenmiyor. Bu sorunu çözelim.
Tarayıcıyı gösterelim
Tarayıcıda Bölüm'ü seçin (hala akıllı telefon modunda olduğunuzdan emin olun) ve Genişlik uzeri 320
Ardından ana sütunu seçin ve sekmesinde gelişmiş, tüm iç kenar boşluklarını 25
Tarayıcıda resmi seçin ve sekmede stiltıklayın PX de Genişlik ve ayarla 180.
Sekmede gelişmiş du Resim widget'ı, devam et Pozisyonve seçin kesinIçinde yatay ofset girmek 75 ve dikey kayma girmek 236. Kısacası, farklı ofsetleri kullanarak resminizi dairenin ortasına ortaladığınızdan emin olun.
Artık animasyonunuzu farklı cihazlarda önizleyebilirsiniz.
Şimdi Elementor Pro'yu Alın !!!
Sonuç
Yani ! Fareyle üzerine gelindiğinde nasıl animasyon oluşturulacağını gösteren bu makale bu kadar içinde Elementor. Oraya nasıl ulaşacağınızla ilgili herhangi bir endişeniz varsa, sizden haber almak isteriz. Yorumlar.
Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
