Vill du lära dig hur du lägger till en svävningseffekt till objekt i inläggswidgetenElementor?

Om du är en WordPress-användare använder Elementor att skapa din webbplats, bör du vara bekant med funktionen för hovringseffekt. Du kan hitta den här funktionen huvudsakligen i varje widgetinställning Elementor.

Hover-effekten kan göra dina element attraktiva, så det är ett effektivt sätt att förbättra användarupplevelsen på din webbplats.

Tja, på tal om svävningseffekten kommer den här artikeln att visa dig hur du lägger till den senare till individuella postelement i widgeten Elementor Inlägg med hjälp av Elementors anpassade CSS, närmare bestämt zoom-in hovringseffekten.

lägg till svävningseffekt till Elementor-inläggswidgeten

Det finns två anledningar till att vi gör den här handledningen åt dig:

  • Som standard kan du lägga till en svävningseffekt till ett inlägg från Elementors inläggswidget. Men svävningseffekten kommer att vara väldigt grundläggande/standard.
lägg till svävningseffekt till Elementor-inläggswidgeten
  • Som standard låter Elementor dig lägga till en blixtlåseffekt till widgeten Inlägg (fliken advanced -> Transformator –> Echelle). Men hovringseffekten kommer att påverka alla (inte enskilda) inläggswidgetelement.
lägg till svävningseffekt till Elementor-inläggswidgeten

Steg för att lägga till hovringseffekt till enskilda inlägg från Elementors inläggswidget

Innan du startar handledningen vill vi låta dig veta att den här handledningen använder Elementors Custom CSS-funktion. Denna funktion är endast tillgänglig på Elementor Pro; se till att du har uppgraderat din version.

Steg 1: Lägg till inläggswidget

Gå till din Elementor-redigerare så börjar vi allt från början, så skapa ett avsnitt med en enda kolumn.

Läs också: Hur man integrerar MailChimp med Elementor

Välj sedan widgeten Inlägg från widgetpanelen och dra och släpp den i redigeringsområdet. När du har lagt till widgeten Inlägg kan du redigera och utforma widgeten enligt dina önskemål.

Remarque: Se till att du redan har publicerat artiklar om din webbplats.

Steg 2: Lägg till CSS-kodavsnittet

När du har redigerat och formaterat widgeten Inlägg lägger vi till en svävningseffekt i ett enskilt inlägg genom att lägga till det enkla CSS-kodavsnittet. I inställningarna för widgeten Inlägg, gå till Tab advanced -> Anpassad CSS. Kopiera CSS-kodavsnittet nedan och klistra sedan in det i fältet Anpassad CSS.

selector .elementor-post:hover{
     transition: all .50s ease-in-out;
    transform: scale(1.1);
    cursor: pointer;
    z-index: 1;
}
lägg till svävningseffekt till Elementor-inläggswidgeten

Ovanstående kod kommer att välja det individuella inläggselementet i Inlägg-widgeten med hjälp av väljaren .élémentor-post och tillämpa CSS-transformationen.

lägg till svävningseffekt till Elementor-inläggswidgeten

Om du är nöjd med svävningseffekten som användes kan du behålla den så och spara ditt projekt om du vill. Men om du vill anpassa övergångshastigheten och transformationsskalvärdet kan du ändra värdet i CSS-kodavsnittet.

lägg till svävningseffekt till Elementor-inläggswidgeten

Remarque: Transformera/zooma in är en vanlig och populär effekt som används på webbplatser. Om du vill veta mer om andra metoder för att transformera svävningseffekter kan du besöka detta sida.

Upptäck också: alla Elementor-widgetväljare i följande artikel

Skaffa Elementor Pro nu!!!

Slutsats

Den här artikeln visar hur enkelt det är att lägga till en svävningseffekt till enskilda inläggselement i Elementors inläggswidget med hjälp av anpassad CSS.

Tekniken vi använde för denna effekt är (zoom-in) som involverar 2D och några pseudotransformerade element. Anpassa och lek med alla stilar av svävningseffekter tills du hittar den bästa svävningseffekten för din webbplats.

Här är! Vi har precis introducerat dig för de bästa verktygen för marknadsföring via e-post för Elementor. Om du har några funderingar kring hur du använder dem, låt oss veta inomhus commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.