Vil du lære, hvordan du tilføjer en svæveeffekt til elementer i indlægswidgettenElementor?
Hvis du er en WordPress-bruger bruger Elementor at skabe din Websted, bør du være bekendt med funktionen svæveeffekt. Du kan hovedsageligt finde denne funktion i hver widget-indstilling Elementor.
Svæveeffekten kan gøre dine elementer attraktive, så det er en effektiv måde at forbedre brugeroplevelsen på din websted.
Nå, når vi taler om svæveeffekten, vil denne artikel vise dig, hvordan du tilføjer sidstnævnte til individuelle indlægselementer i widgetten Elementor Indlæg ved hjælp af Elementors brugerdefinerede CSS, specifikt zoom-in hover-effekten.
Der er to grunde til, at vi laver denne tutorial til dig:
- Som standard kan du tilføje en svæveeffekt til et indlæg fra Elementor-indlægswidgetten. Men svæveeffekten vil være meget grundlæggende/standard.
- Som standard giver Elementor dig mulighed for at tilføje en lynlåseffekt til widgetten Indlæg (faneblad avanceret -> Transformer -> Echelle). Men svæveeffekten vil påvirke alle (ikke individuelle) indlægs widget-elementer.
Trin til at tilføje svæveeffekt til individuelle indlæg fra Elementors indlægswidget
Før du starter vejledningen, vil vi gerne fortælle dig, at denne vejledning bruger Elementors Custom CSS-funktion. Denne funktion er kun tilgængelig på Elementor Pro; sørg for at du har opgraderet din version.
Trin 1: Tilføj indlægswidget
Gå til din Elementor-editor, så starter vi alt fra bunden, så opret en sektion med en enkelt kolonne.
Læs også: Sådan integreres MailChimp med Elementor
Vælg derefter widgetten Indlæg fra widgetpanelet, og træk og slip den derefter i redigeringsområdet. Når du har tilføjet widgetten Indlæg, kan du redigere og style widgetten efter dine præferencer.
Remarque: Sørg for, at du allerede har udgivet artikler om din websted.
Trin 2: Tilføj CSS-kodestykket
Når du har redigeret og stylet Posts-widgetten, tilføjer vi derefter en svæveeffekt i et individuelt indlæg ved at tilføje det simple CSS-kodestykke. I Indlæg-widgetindstillingerne skal du gå til fanebladet avanceret -> Tilpasset CSS. Kopier venligst CSS-kodestykket nedenfor, og indsæt det derefter i feltet Tilpasset CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Ovenstående kode vil vælge det individuelle postelement på Posts-widgetten ved hjælp af vælgeren .élémentor-post og anvende CSS-transformationen.
Hvis du er tilfreds med den svæveeffekt, der blev brugt, kan du beholde den sådan og gemme dit projekt, hvis du ønsker det. Men hvis du vil tilpasse overgangshastigheden og transformationsskalaværdien, kan du ændre værdien i CSS-kodestykket.
Remarque: Transformer/zoom ind er en almindelig og populær effekt, der bruges på hjemmesider. Hvis du vil vide mere om andre metoder til at transformere svæveeffekter, kan du besøge denne side.
Opdag også: alle Elementor-widgetvælgere i den følgende artikel
Få Elementor Pro nu!!!
Konklusion
Denne artikel viser dig, hvor nemt det er at tilføje en svæveeffekt til individuelle indlægselementer i Elementors indlægswidget ved hjælp af tilpasset CSS.
Teknikken vi brugte til denne effekt er (zoom-ind), som involverer 2D og nogle pseudotransformerede elementer. Tilpas og leg med alle stilarter af hover-effekter, indtil du finder den bedste hover-effekt til dit websted.
Her er! Vi har netop introduceret dig til de bedste værktøjer til markedsføring via e-mail til Elementor. Hvis du har nogen bekymringer om, hvordan du bruger dem, så lad os det vide inden for 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.
...
