Vil du lage en sveveanimasjon med Elementor ?

I denne opplæringen vil vi bruke en boks med pepsi som vi vil fly over og som vil avsløre en beskrivelse av den.

Vi inviterer deg til å sjekke ut følgende video for å få en ide om hva vi vil vise deg.

lage sveveanimasjon i Elementor

Sett inn en enkelt kolonnedel og velg deretter i sidefeltet Minimum høydeHøyde

Sur minste høyde klikk på VH dra deretter glidebryteren til 100. Alltid i fanen layout definere 650 comme largeur.

lage sveveanimasjon i Elementor

Velg kolonnen og på sidefeltet i feltet Vertikal justering velg Milieu.

lage sveveanimasjon i Elementor

I fanen Stil, endre bakgrunnsfargen ved å klikke på Fargevelgeren og skrive inn # D37636 deretter i seksjonen grensen, la oss gå inn 20 for alle kantsteinsradier.

lage sveveanimasjon i Elementor

I fanen avansert, slå av polstringsbinding og type 75 for interne marginer Haut et Lav et 25 for interne marginer venstre et DROITE.

lage sveveanimasjon i Elementor

Deretter drar du en widget i kolonnen innvendig seksjon. La oss fjerne en av kolonnene fra den interne delen.

lage sveveanimasjon i Elementor

I kolonnen i den gjenværende indre delen slipper du Tittel-widget og endre tittelen til Pepsi kjærlighet.

Les også vår guide om: Hvordan lage et effektkort fra en portefølje i Elementor

Deretter i fanen Stil, gi teksten en hvit farge og for typografien angi taille 32den radhøyde1.2, avstand mellom bokstavene0.5.

Under Tittel-widget, slipp en Tekstredigerer-widget og redigere teksten. I fanen Stil, endre tekstfargen til hvit og den taille typografi på 16den radhøyde1.5 ogavstand mellom bokstavene0.5.

I fanen avansert endre margen Lav -10.

I avsnittet posisjonering fanen avansert, endre Breddepersonnalisé og Bredde Egendefinert sette sistnevnte til 310.

lage sveveanimasjon i Elementor

Under avsnittet legger vi til en knapp widget med for tekst Les mer.

lage sveveanimasjon i Elementor

I fanen Stil gi knappen fargen Hvit og tekstfarge sette den til Svart.

Velg nå kolonnen til indre seksjon, i seksjonen avansert fanen avansert slå av lenken og klikk på prosentandelen og angi deretter marginen venstre 20 og i Intern margin definere det av venstre20.

Dra nå bilde-widget over Innvendig seksjon sette inn et bilde. Vi har valgt for eksempelet et bilde av en drink som er lett å finne på nettet.

Når du har satt inn bildet, konfigurer BildestørrelseHel og justering la oss klikke videre Senter.

I fanen avansert, gå til seksjonen StillingBredde velg Online (Auto)Stilling velg absolutte og Horisontal orientering velg Høyre så videre Offset skriv -9.9 og på Offset av vertikal orientering angi -105.

Gå lenger ned Transformasjonsseksjon definere endre størrelse på 0.5.

Velg nå kolonnen til Innvendig seksjon og i fanen avansert skriv inn navnet på css-klasser pepsi tekst.

Velg deretter hoveddelen vår, gå til delen Custom CSS av hans Tab Avansert,  kopier og lim inn følgende kode:

/*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;
}
}

BEMERKNING: Hvis du ikke har denne delen, må du gå til Pro-versjon av Elementor.

Hvis vi nå ønsker å fjerne bakgrunnsfargen fra teksten, velger vi hovedkolonnen vår og deaktiverer bakgrunnsfargen i kategorien Stil.

På dette tidspunktet vil animasjonen din kjøre normalt på nettleseren.

Animasjon på nettbrett ser også ut til å være perfekt

Men på smarttelefonen vises den ikke normalt. La oss løse dette problemet.

La oss vise nettleseren

I nettleseren velger du delen (sørg for at du fortsatt er i smarttelefonmodus) og senk Bredde 320

Velg deretter hovedkolonnen og i dens fane avansert, sett alle indre marger til 25

lage sveveanimasjon i Elementor

I nettleseren velger du bildet og i fanen StilKlikk på PX de Bredde og sett den til 180.

I fanen avansert du Bilde-widget, fortsett Stilling, og velg absolutteI horisontal forskyvning skriv 75 og i vertikal offset skriv 236. Kort sagt, sørg for å sentrere bildet ditt i midten av sirkelen ved å bruke de forskjellige forskyvningene.

lage sveveanimasjon i Elementor

Du kan nå forhåndsvise animasjonen på forskjellige enheter.

Skaff deg Elementor Pro nå!!!

konklusjonen

Så! Det er det for denne artikkelen som viser deg hvordan du lager en animasjon ved å sveve i Elementor. Hvis du har noen bekymringer om hvordan du kommer deg dit, vil vi gjerne høre fra deg i commentaires.

Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...