Vil du lære hvordan du legger til en sveveeffekt til elementer i innleggswidgetenElementor?
Hvis du er en WordPress-bruker bruker Elementor å lage din nettstedet Web, bør du være kjent med funksjonen for sveveeffekt. Du finner denne funksjonen hovedsakelig i hver widget-innstilling Elementor.
Hover-effekten kan gjøre elementene dine attraktive, så det er en effektiv måte å forbedre brukeropplevelsen på nettside.
Vel, når vi snakker om sveveeffekten, vil denne artikkelen vise deg hvordan du legger sistnevnte til individuelle innleggselementer i widgeten Elementor Innlegg som bruker Elementors egendefinerte CSS, nærmere bestemt zoom-in hover-effekten.
Det er to grunner til at vi lager denne opplæringen for deg:
- Som standard kan du legge til en sveveeffekt til et innlegg fra Elementor-innlegg-widgeten. Men sveveeffekten vil være veldig grunnleggende/standard.
- Som standard lar Elementor deg legge til en glidelåseffekt til Innlegg-widgeten (fane avansert -> Transformator –> Echelle). Men hover-effekten vil påvirke alle (ikke individuelle) post-widget-elementer.
Trinn for å legge til hover-effekt til individuelle innlegg fra Elementors innlegg-widget
Før du starter opplæringen, vil vi fortelle deg at denne opplæringen bruker Elementors Custom CSS-funksjon. Denne funksjonen er kun tilgjengelig på Elementor Pro; sørg for at du har oppgradert din versjon.
Trinn 1: Legg til innleggswidget
Gå til Elementor-editoren din, så starter vi alt fra bunnen av, så lag en seksjon med en enkelt kolonne.
Les også: Hvordan integrere MailChimp med Elementor
Deretter velger du Innlegg-widgeten fra widget-panelet, og drar og slipper den inn i redigeringsområdet. Når du har lagt til Innlegg-widgeten, kan du redigere og style widgeten i henhold til dine preferanser.
Note: Sørg for at du allerede har publisert artikler om din nettside.
Trinn 2: Legg til CSS-kodebiten
Når du har redigert og stylet Innlegg-widgeten, legger vi til en sveveeffekt i et enkelt innlegg ved å legge til den enkle CSS-kodebiten. Gå til fanen i Innlegg-widgetinnstillingene avansert -> Tilpasset CSS. Kopier CSS-kodebiten nedenfor og lim den inn i feltet Tilpasset CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Koden ovenfor vil velge det individuelle innleggselementet på Innlegg-widgeten ved å bruke velgeren .élémentor-post og bruk CSS-transformasjonen.
Hvis du er fornøyd med sveveeffekten som ble brukt, kan du beholde den slik og lagre prosjektet hvis du ønsker det. Men hvis du vil tilpasse overgangshastigheten og transformasjonsskalaverdien, kan du endre verdien i CSS-kodebiten.
Note: Transform/zoom inn er en vanlig og populær effekt som brukes på nettsider. Hvis du vil vite mer om andre metoder for å transformere sveveeffekter, kan du besøke denne side.
Oppdag også: alle Elementor-widgetvelgere i den følgende artikkelen
Skaff deg Elementor Pro nå!!!
konklusjonen
Denne artikkelen viser deg hvor enkelt det er å legge til en hover-effekt til individuelle innleggselementer i Elementors innleggswidget ved å bruke tilpasset CSS.
Teknikken vi brukte for denne effekten er ( zoom-in ) som involverer 2D og noen pseudotransformerte elementer. Tilpass og lek med alle stiler av sveveeffekter til du finner den beste sveveeffekten for nettstedet ditt.
Her er! Vi har nettopp introdusert deg for de beste verktøyene for markedsføring via e-post for Elementor. Hvis du har noen bekymringer om hvordan du bruker dem, gi oss beskjed innen 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.
...
