Trenger du å legge til sveveeffekt i Elementor via tilpasset CSS?

Elementor har en innebygd funksjon for å legge til en sveveeffekt til et element (Vi dekket dette i en av artiklene våre. Selv om funksjonen er nyttig nok, har den en ulempe. Du kan bare legge til en sveveeffekt til den. En seksjon, en kolonne, en bilded widget, en knapp widget og en innlegg widget.

Les også: Hvordan installere Elementor på WordPress

Elementors innebygde sveveeffektfunksjon tillater ikke at du kan legge sveveeffekt til andre småprogram, for eksempel Teksteditor-widget, Tittel-widget, etc. En annen ulempe er at du bare kan legge til en veldig grunnleggende svevereffekt.

Er det noe annet alternativ for å legge til sveveeffekt i Elementor?

Ja det er. Du kan legge til svevereffekt i Elementor via tilpasset CSS. Men for å legge til tilpasset CSS, må du bruke Elementor Pro da tilpasset CSS bare er tilgjengelig på Elementor Pro.

Legge til en sveveeffekt i Elementor via tilpasset CSS

Før vi begynner, la oss se på eksemplet på sveveeffekter opprettet via tilpasset CSS.

I motsetning til Elementors innebygde sveveeffekt, kan du bruke denne metoden til å legge til en sveveeffekt til ethvert element i Elementor. Enten det er en seksjon, kolonne eller widget (alle widgets).

I dette eksemplet viser vi deg hvordan du legger til en punkteffekt i en kolonne.

Klikk først på kolonnehåndtaket for å bytte til kolonneinnstillingspanelet. Når du er der, går du til fanen avansert og åpne blokken Custom CSS og lim inn følgende CSS-kode.

selector: hover {overgang: alle .2s letthet inn-ut; transform: skala (1.1); markør: punkt; z-indeks: 1; }

Voilà.

På koden ovenfor bruker vi CSS-egenskapen forvandle () for å legge til sveveeffekten. Transformasjonstypen vi bruker i dette eksemplet er skala, med en varighet på 1,1 sekunder.

Det er 4 andre typer transformasjoner du kan bruke med:transform

  • Matrix
  • Oversette
  • Roter
  • skew

Hvis du vil bruke en annen transformasjonsstil, kan du bare erstatte verdien på forvandle på CSS-koden ovenfor.

Du kan lese cette side for å lære mer om CSS-transformasjonen.

Du kan følge samme rute for å legge til en sveveeffekt til andre elementer.

For å legge til en punkteffekt i en seksjon, kan du klikke på seksjonshåndtaket og gå til fanen avansert og åpne blokken Tilpasset CSS.

legg til svevereffekt i Elementor via tilpasset CSS

Hvis du vil legge til en sveveeffekt i en widget, kan du klikke på widgetens håndtak og gå til fanen igjen. Avansert, åpne deretter blokken Tilpasset CSS.

Andre ekstra premium WordPress-plugins 

Oppdag også andre WordPress plugins premium som optimaliserer ytelsen til WordPress-bloggen eller nettstedet ditt.

1. Live Sales Popup

Live Sales Popup er en annen WordPress Plugin varsling med flere godbiter som du kan gjøre om til en fordel. For det første har han muligheten vise et popup-vindu når noen fullfører en ordre. Live salg popup plugin wordpress

For det andre kan popup-vinduet i sanntid også vise et varsel når en person bare legger til en vare i handlekurven. Og for det tredje kan du bruke verktøyet til å øke hypen for et produkt ved å vise hvor mange besøkende som så artikkelen.

Med de siste nettrendene kan du forvente at Live Sales Popup vises vakkert på alle enheter og nettlesere. Når det gjelder popup-oppsettet, kan du tilpasse det til minste detalj.

Å lese: Hvordan fikse en sikkerhetsadvarsel på din WordPress blog

De andre funksjonene i Live Sales Popup er mer enn tretti animasjoner, lyder, nedtelling og personlig posisjonering. Det fungerer også for falske varsler og lar deg bare stille det for bestemte sider der du vil at varselet skal utføre oppgaven.

Last ned | dEMO | Webhotell

2. Foodify

Foodify er den raskeste og enkleste måten for kunder å bestille mat fra en butikk. Det er helt responsive og inkluderer tilleggsfunksjoner som bilde, søkealternativ, produktinformasjon. Foodlify restaurantens matmeny for woocommerce

Den legger også knapper til kurven for å forbedre brukeropplevelsen. Denne WooCommerce-utvidelsen er en rask, omfattende bestillingsløsning som kan legges til ethvert WooCommerce-nettsted.

Her for deg 5 WordPress plugins for å optimalisere kategoribeskrivelser og etiketter

Det har fordelen av å være veldig fleksibel og kompatibel med mange eksisterende plugins i WordPress-katalogen.

Last ned | dEMO | Webhotell

3. Mega Zoom & Pan Image Viewer

Mega Zoom & Pan Image Viewer-plugin er en flott bildeviser og nettleser med en fullstendig responsiv layout for å vise store bilder på WordPress blog.

Mega zoom pan wordpress plugin for zoom

Det er et kraftig verktøy designet for å presentere produkter (produktbilder med høy oppløsning. Eks: Klær, biler, tekniske diagrammer osv.), Vise kart og alle andre bilder, takket være zoom, funksjon panorama, navigasjonskontrollene, rullefeltetog svært tilpassbare markører / tilgangspunkter.

her er 5 smarttelefonapper for å beskytte bildene og videoene dine

Dette pluginet fungerer bra på iOS (iPad, iPhone), Android og Windows mobile, etc. Det fungerer også på alle moderne nettlesere og eldre nettlesere som IE7 eller IE8.

Last ned | dEMO | Webhotell

Andre anbefalte ressurser

Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.

konklusjonen

Her er ! Det er det for denne guiden. Vi håper denne artikkelen hjalp deg med å legge sveveeffekt i Elementor via tilpasset CSS. Du kan også lese artikkelen vår på Hvordan fikse blokkering av JavaScript og CSS-rendering i WordPress.

Du vil imidlertid også kunne konsultere våre ressources, 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.

Hvis du har en venn eller en kommentar, kan du legge den i delen kommentar. For det meste del denne artikkelen på de forskjellige sosiale nettverkene dine.

...