Elementor: Sådan opretter du en animation ved at svæve

Vil du lave en svæveanimation med Elementor ?

I denne tutorial vil vi bruge en dåse pepsi, som vi vil flyve over, og som vil afsløre en beskrivelse af den.

Vi inviterer dig til at se følgende video for at få en idé om, hvad vi vil vise dig.

Indsæt en enkelt kolonnesektion og vælg derefter i sidebjælken Højhed min ud af Højde

Om minimumshøjde klik VH træk derefter skyderen til 100. Altid i fanen layout definere 650 som largeur.

Vælg kolonnen og på sidebjælken i feltet Lodret justering vælg Milieu.

I fanen stil, ændre baggrundsfarven ved at klikke på farvevælgeren og skrive # D37636 derefter i afsnittet grænse, lad os tage fat 20 for alle kantstensradier.

I fanen avanceret, deaktiver polstringsbinding og type 75 for interne marginer top et Bas et 25 for interne marginer venstre et højre.

Træk derefter en widget i kolonnen indre sektion. Lad os fjerne en af ​​kolonnerne fra den interne sektion.

I kolonnen i den resterende indre sektion skal du slippe Titel-widget og ændre titlen til Pepsi Kærlighed.

Læs også vores vejledning om: Sådan opretter du et effektkort fra en portefølje i Elementor

Derefter i fanen stil, giv teksten en hvid farve og for typografien indstilles taille ud af 32, rækkehøjde ud af 1.2, bogstavmellemrum ud af 0.5.

Nedenfor Titel-widget, drop a Teksteditor-widget og redigere teksten. I fanen stil, ændre tekstfarven til hvid og den taille typografi på 16, rækkehøjde ud af 1.5 ogbogstavmellemrum ud af 0.5.

I fanen avanceret ændre margenen Bas ud af -10.

I afsnittet positionering fanen avanceret, ændre Bredde ud af Personnalisé og Bredde Custom sæt sidstnævnte til 310.

Under afsnittet tilføjer vi en knap-widget med for Tekst Læs Mere.

I fanen stil giv knappen farven hvid og tekstfarve indstille det til noire.

Vælg nu kolonnen for indre sektion, i sektionen avanceret fanen avanceret sluk linket og klik på procentdelen og indstil derefter margenen venstre ud af 20 og i Intern margin definere det af venstre ud af 20.

Træk nu billed-widget over Internt afsnit indsætte et billede. Vi har valgt til eksemplet et billede af en drink, der er let at finde på nettet.

Når du har indsat billedet, skal du konfigurere Billedestørrelse ud af Hel og tilpasning lad os klikke videre Centrum.

I fanen avanceret, gå til sektionen Position ud af Bredde vælg Online (Auto)på Position vælg absolutte og Horisontal orientering vælg Højre derefter skift indtaste -9.9 og på skift af den vertikale orientering ind -105.

Gå længere ned ad Transform sektion Definere resize ud af 0.5.

Vælg nu kolonnen for Internt afsnit og i fanen avanceret indtast navnet på css klasser pepsi tekst.

Vælg derefter vores hovedafsnit, gå til afsnittet Brugerdefineret CSS af hans Tab Fremskreden,  kopier og indsæt 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;
}
}

BEMÆRKNING: Hvis du ikke har denne sektion, skal du gå til Pro version af Elementor.

Hvis vi nu vil fjerne baggrundsfarven fra teksten, vælger vi vores hovedkolonne og deaktiverer baggrundsfarven på fanen Stil.

På dette tidspunkt vil din animation køre normalt i browseren.

Animation på tablet ser også ud til at være perfekt

Men på smartphone vises den ikke normalt. Lad os løse dette problem.

Lad os vise browseren

Vælg sektionen i browseren (sørg for, at du stadig er i smartphone-tilstand), og sænk Bredde ud af 320

Vælg derefter hovedkolonnen og i dens fane fremskreden, indstil alle indre marginer til 25

I browseren skal du vælge billedet og i fanen stilKlik på PX de Bredde og sæt den til 180.

I fanen avanceret du Billed-widget, fortsæt Positionog vælg absolutteI vandret offset indtaste 75 og lodret skift indtaste 236. Kort sagt, sørg for at centrere dit billede i midten af ​​cirklen ved hjælp af de forskellige forskydninger.

Du kan nu forhåndsvise din animation på forskellige enheder.

Få Elementor Pro nu!!!

Konklusion

Så! Det er det for denne artikel, der viser dig, hvordan du opretter en animation ved at svæve i Elementor. Hvis du er i tvivl om, hvordan du kommer dertil, hører vi meget gerne fra dig i kommentarer.

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...