Elementor: Hur man skapar en animation när man svävar

Vill du skapa en svävningsanimation med Elementor ?

I den här handledningen kommer vi att använda en burk pepsi som vi kommer att sväva över och som kommer att avslöja en beskrivning om den.

Vi inbjuder dig att kolla in följande video för att få en uppfattning om vad vi vill visa dig.

Infoga ett enstaka kolumnavsnitt och välj sedan i sidofältet Minsta höjd sur HÖGMOD

på minsta höjd klick VH dra sedan reglaget till 100. Alltid i fliken Layout définir 650 comme largeur.

Välj kolumnen och på sidofältet på fältet Vertikal inriktning välj Miljö.

På fliken Stil, ändra bakgrundsfärgen genom att klicka på färgväljaren och skriv #D37636 sedan i avsnittet gräns, låt oss ta tag 20 för alla kantstensradier.

På fliken advanced, stäng av stoppningsbindning och typ 75 för interna marginaler haut et Bas et 25 för interna marginaler Gauche et Droite.

Dra sedan en widget i kolumnen inre sektion. Låt oss ta bort en av kolumnerna från den interna sektionen.

I kolumnen i den återstående inre delen släpper du Titelwidget och ändra titeln till Pepsi kärlek.

Läs också vår guide om: Hur man skapar ett effektkort från en portfölj i Elementor

Sedan, i fliken Stil, ge texten en vit färg och för typografin ställ in Taille sur 32i Radhöjd sur 1.2, teckenavstånd sur 0.5.

Under Titelwidget, släpp a Textredigeringswidget och redigera texten. I fliken Stil, ändra textfärgen till vit och Taille typografi på 16i Radhöjd sur 1.5 ochteckenavstånd sur 0.5.

På fliken advanced ändra marginalen Bas sur -10.

I avsnittet positionering flik advanced, ändra Bredd sur personnalisé och Bredd Anpassad ställ in det senare till 310.

Under stycket lägger vi till en knappwidget med för text Läs Mer.

På fliken Stil ge knappen färgen Vit och textfärg ställ in den på Noire.

Välj nu kolumnen för inre delen, i avsnittet advanced flik advanced stäng av länken och klicka på procentsatsen och ställ sedan in marginalen Gauche sur 20 och i Intern marginal definiera det av Gauche sur 20.

Dra nu bild-widget ovanför Intern sektion infoga en bild. Vi har valt för exemplet en bild på en drink som är lätt att hitta på webben.

När du har infogat bilden, konfigurera Bildstorlek sur Hela och uppriktning låt oss klicka vidare Centrum.

På fliken advanced, gå till avsnittet Placera sur Bredd välj Online (Auto)På Placera välj absolut och Horisontell orientering välj Höger sedan shift ange -9.9 och på shift av vertikal orientering ange -105.

Gå längre ner på Transformeringssektion definiera ändra storlek sur 0.5.

Välj nu kolumnen för Intern sektion och i fliken advanced ange namnet på css-klasser pepsi text.

Välj sedan vårt huvudavsnitt, gå till avsnittet Anpassad CSS av hans Tab Avancerad,  kopiera och klistra in följande 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;
}
}

OBS! Om du inte har det här avsnittet måste du gå till Pro-version av Elementor.

Om vi ​​nu vill ta bort bakgrundsfärgen från texten väljer vi vår huvudkolumn och inaktiverar bakgrundsfärgen på fliken Stil.

För närvarande kommer din animation att köras normalt i webbläsaren.

Animation på surfplatta verkar också vara perfekt

Men på smartphone visas det inte normalt. Låt oss lösa det här problemet.

Låt oss visa webbläsaren

I webbläsaren väljer du Sektion (se till att du fortfarande är i smartphone-läge) och sänker Bredd sur 320

Välj sedan huvudkolumnen och i dess flik Avancerad, ställ in alla innermarginaler till 25

I webbläsaren väljer du bilden och i fliken StilKlicka på PX de Bredd och ställ in den på 180.

På fliken advanced du Bildwidget, fortsätt Placeraoch välj absolutI horisontell förskjutning ange 75 och vertikal förskjutning ange 236. Kort sagt, se till att centrera din bild i mitten av cirkeln med hjälp av de olika offseten.

Du kan nu förhandsgranska din animation på olika enheter.

Skaffa Elementor Pro nu!!!

Slutsats

Så ! Det var allt för den här artikeln som visar hur du skapar en animation när du svävar i Elementor. Om du har några funderingar kring hur du tar dig dit vill vi gärna höra från dig i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.