Chcete vytvořit animaci při najetí pomocí Elementor ?
V tomto tutoriálu použijeme plechovku pepsi, na kterou najedeme a která o ní odhalí popis.
Zveme vás ke shlédnutí následujícího videa, abyste získali představu o tom, co vám chceme ukázat.
Vložte jednu sekci sloupce a poté na postranním panelu vyberte Minimální výška z výška
na minimální výška klikněte na VH potom přetáhněte posuvník na 100. Vždy v záložce Rozložení definovat 650 jako largeur.
Vyberte sloupec a na postranním panelu pole Vertikální zarovnání vybrat Milieu.
Na kartě Styl, změňte barvu pozadí kliknutím na výběr barvy a zadejte #D37636 pak v sekci Hranice, chytneme se 20 pro všechny poloměry obrubníku.
Na kartě pokročilý, vypněte vazbu vycpávky a zadejte 75 pro vnitřní marže top et Bas et 25 pro vnitřní marže levý et DROITE.
Poté ve sloupci přetáhněte widget vnitřní sekce. Odeberme jeden ze sloupců ze sekce Interní.
Ve sloupci zbývající vnitřní sekce vypusťte Titulkový widget a změňte název na Pepsi Láska.
Přečtěte si také našeho průvodce: Jak vytvořit kartu efektů z portfolia v Elementoru
Poté v záložce Styl, dejte textu bílou barvu a pro typografii nastavte taille z 32, la Výška řádku z 1.2, mezery mezi písmeny z 0.5.
Pod Titulkový widget, pokles a Widget textového editoru a upravit text. V záložce Styl, změňte barvu textu na bílou a taille na typografii 16, la Výška řádku z 1.5 amezery mezi písmeny z 0.5.
Na kartě pokročilý změnit okraj Bas z -10.
V sekci polohovací záložka pokročilý, upravit Šířka z Personnalisé a Šířka Vlastní nastavte poslední na 310.
Pod odstavec přidáme a tlačítko widget s pro Text Čtěte více.
Na kartě Styl dát tlačítku barvu bílá a nastavte barvu textu na Černá.
Nyní vyberte sloupec vnitřní sekce, v sekci pokročilý záložka pokročilý vypněte odkaz a klikněte na procento a poté nastavte okraj levý z 20 a v Vnitřní marže definovat to z levý z 20.
Nyní přetáhněte obrázkový widget nad Vnitřní část vložit obrázek. Jako příklad jsme vybrali obrázek nápoje, který lze snadno najít na webu.
Po vložení obrázku nakonfigurujte Velikost obrázku z Celý a zarovnání klikneme na Centrum.
Na kartě pokročilý, přejděte do sekce Pozice z Šířka vybrat Online (automaticky)Na Pozice vybrat absolutní a Horizontální orientace vybrat Právo pak dál směna vstoupit -9.9 a na směna vstupu Vertical Orientation -105.
Jděte dále dolů Transformační sekce definovat velikost z 0.5.
Nyní vyberte sloupec Vnitřní část a v záložce pokročilý zadejte název třídy css text pepsi.
Poté vyberte naši hlavní sekci, přejděte do sekce Vlastní CSS jeho Tab Pokročilý, zkopírujte a vložte následující kód:
/*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;
}
}
POZNÁMKA: Pokud tuto sekci nemáte, musíte jít do Pro verze Elementor.
Nyní, pokud chceme z textu odstranit barvu pozadí, vybereme náš hlavní sloupec a v záložce Styl deaktivujeme barvu pozadí.
V tuto chvíli poběží vaše animace v prohlížeči normálně.
Perfektní se jeví i animace na tabletu
Ale na smartphonu se nezobrazuje normálně. Pojďme tento problém vyřešit.
Zobrazme prohlížeč
V prohlížeči vyberte sekci (ujistěte se, že jste stále v režimu chytrého telefonu) a snižte Šířka z 320
Poté vyberte hlavní sloupec a na jeho kartě pokročilý, nastavte všechny vnitřní okraje na 25
V prohlížeči vyberte obrázek a na kartě StylKliknutím na PX de Šířka a nastavte jej na 180.
Na kartě pokročilý du Obrázek widget, pokračujte Pozicea vyberte absolutníV horizontální odsazení vstoupit 75 a vertikální posun vstoupit 236. Stručně řečeno, nezapomeňte vycentrovat obrázek uprostřed kruhu pomocí různých odsazení.
Nyní můžete zobrazit náhled animace na různých zařízeních.
Získejte Elementor Pro nyní!!!
Proč investovat do čističky vzduchu?
Tak ! To je vše pro tento článek, který vám ukáže, jak vytvořit animaci při umístění kurzoru myši v Elementor. Pokud máte nějaké obavy ohledně toho, jak se tam dostat, rádi bychom od vás slyšeli commentaires.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
