Czy chcesz utworzyć animację najechania za pomocą Elementor ?
W tym samouczku użyjemy puszki pepsi, nad którą najedziemy i która odsłoni jej opis.
Zapraszamy do obejrzenia poniższego filmu, aby zorientować się, co chcemy Wam pokazać.
Wstaw sekcję z pojedynczą kolumną, a następnie na pasku bocznym wybierz Minimalna wysokość sur HAUTEUR
Sur minimalna wysokość kliknij VH następnie przeciągnij suwak do 100. Zawsze w zakładce Układ określić 650 comme largeur.
Wybierz kolumnę i na pasku bocznym w polu Wyrównanie w pionie wybierać Środowisko.
W zakładce Styl, zmień kolor tła, klikając selektor kolorów i wpisz #D37636 następnie w dziale Granica, chwyćmy 20 dla wszystkich promieni krawężnika.
W zakładce zaawansowany, wyłącz wiązanie dopełnienia i wpisz! 75 dla marż wewnętrznych Haut et Bas et 25 dla marż wewnętrznych Niezręczny et DROITE.
Następnie w kolumnie przeciągnij widżet sekcja wewnętrzna. Usuńmy jedną z kolumn z sekcji Wewnętrzne.
W kolumnie pozostałej sekcji wewnętrznej upuść Widżet tytułu i zmień tytuł na Miłość Pepsi.
Przeczytaj także nasz przewodnik na temat: Jak stworzyć kartę efektów z portfolio w Elementor
Następnie w zakładce Styl, nadaj tekstowi biały kolor, a dla typografii ustaw taille sur 32The wysokość wiersza sur 1.2, odstępy między literami sur 0.5.
Poniżej Widżet tytułu, upuść Widżet edytora tekstu i edytuj tekst. W zakładce Styl, zmień kolor tekstu na biały, a taille typografia włączona 16The wysokość wiersza sur 1.5 iodstępy między literami sur 0.5.
W zakładce zaawansowany zmień margines Bas sur -10.
W sekcji pozycjonowanie patka zaawansowany, zmodyfikuj Szerokość sur Personnalisé i Szerokość niestandardowa ustaw to drugie na 310.
Pod akapitem dodamy widżet przycisku z dla tekstu Czytaj Więcej.
W zakładce Styl nadaj przyciskowi kolor! Biały i kolor tekstu ustaw go na Czarny.
Teraz wybierz kolumnę sekcja wewnętrzna, w sekcji zaawansowany patka zaawansowany wyłącz link i kliknij procent, a następnie ustaw marżę Niezręczny sur 20 i w Margines wewnętrzny zdefiniuj to z Niezręczny sur 20.
Teraz przeciągnij obraz-widżet wyżej Sekcja wewnętrzna wstaw obraz. Jako przykład wybraliśmy obraz napoju, który można łatwo znaleźć w sieci.
Po wstawieniu obrazu skonfiguruj Rozmiar obrazu sur Cały i wyrównanie kliknijmy Centrum.
W zakładce zaawansowany, przejdź do działu Pozycja sur Szerokość wybierać Online (automatycznie)Na Pozycja wybierać absolutny i Orientacja pozioma wybierać Prawo potem przesunięcie wchodzić -9.9 i na przesunięcie orientacji pionowej wprowadź -105.
Idź dalej w dół Przekształć sekcję definiować rozmiar sur 0.5.
Teraz wybierz kolumnę Sekcja wewnętrzna i w zakładce zaawansowany wprowadź nazwę zajęcia css tekst pepsi.
Następnie wybierz naszą główną sekcję, przejdź do sekcji Niestandardowe CSS jego Tabu Zaawansowane, skopiuj i wklej następujący kod:
/*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;
}
}
UWAGA: Jeśli nie masz tej sekcji, musisz przejść do Wersja Pro Elementora.
Teraz jeśli chcemy usunąć kolor tła z tekstu, wybierzemy naszą główną kolumnę i w zakładce Styl dezaktywujemy kolor tła.
W tej chwili animacja będzie działać normalnie w przeglądarce.
Animacja na tablecie też wydaje się idealna
Ale na smartfonie nie jest wyświetlany normalnie. Rozwiążmy ten problem.
Wyświetlmy przeglądarkę
W przeglądarce wybierz Sekcja (upewnij się, że nadal jesteś w trybie smartfona) i obniż Szerokość sur 320
Następnie wybierz główną kolumnę i w jej zakładce Avancé, ustaw wszystkie marginesy wewnętrzne na 25
W przeglądarce wybierz obraz i w zakładce StylKliknij PX de Szerokość i ustaw go na 180.
W zakładce zaawansowany du Widżet obrazu, kontynuuj Pozycjai wybierz absolutnyW przesunięcie w poziomie wchodzić 75 iw przesunięcie w pionie wchodzić 236. Krótko mówiąc, pamiętaj, aby wyśrodkować obraz na środku okręgu, korzystając z różnych przesunięć.
Możesz teraz wyświetlić podgląd animacji na różnych urządzeniach.
Pobierz Elementor Pro teraz !!!
Wnioski
Więc ! To tyle, jeśli chodzi o ten artykuł, który pokazuje, jak stworzyć animację po najechaniu myszą do Elementor. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, chcielibyśmy usłyszeć od ciebie w commentaires.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
