Skapa Elementor -popup -fönster i WooCommerce

Vi är alla stora fans av WooCommerce. Det är enkelt att konfigurera och anpassa. Funktioner som gör det enkelt att skapa och hantera en dynamisk och kraftfull e-handelsbutik ingår i paketet.

Det finns dock mer för att skapa en framgångsrik e-handelssida än att bara lägga till populära produkter. Alla sidor måste också vara visuellt tilltalande. Ju mer attraktivt och användarvänligt din webbplats är, desto större är sannolikheten för att locka fler kunder.

• Konfiguration av popup -fönstret
• Du kan också skapa popup -fönster med den visuella byggaren i Elementor
• Publicera inställningar

Även om WooCommerce skapar kundvagnen och kassasidan för dig när du bygger din webbplats, gör Elementor dem mer tilltalande genom att anpassa dem.

Du har möjlighet att antingen göra om dem eller börja om från början. Du kan upprepa processen för alla andra sidor på din webbplats.

Genom att skapa en varm Tack -sida och uppdatera sidorna Mitt konto och användarvillkor kan du vinna över dina kunders hjärtan och sinnen.

Dra och släpp-funktionen för Elementor, i kombination med den här självstudien, kommer att säkerställa att du får en problemfri upplevelse när du skapar dina sidor.

När du har skapat din wooCommerce -butik kanske du vill göra den mer tilltalande för dina besökare och kunder. Att lägga till popup -fönster ger användaren ett annat intryck och en ny önskan att stanna kvar i din butik.

 För att skapa en popup, gå till Mallar> Popup -fönster i menyraden. Du kommer att presenteras med en lista över alla dina popup -fönster, och om du inte har skapat en ännu ser du något som liknar följande:

När du har klickat på ADD NEW POPUP (vilket är ganska självförklarande) kommer du att bli ombedd att ge det ett namn och sedan välja en mall från de färdiga ex amp les som visas. Olika mallar är tillgängliga för flera ändamål; vissa är lämpliga för tillkännagivanden, andra för att marknadsföra en rabatt, andra är idealiska för att uppmuntra användare att registrera sig för något. Det finns även ex amp les för att varna användare för användning av cookies eller andra GDPR -meddelanden. Så snart du har hittat något du gillar klickar du på det för att se en större förhandsvisning och trycker sedan på knappen Infoga.

Du kommer att tas till popup -byggaren i WordPress -backend efter att ha klickat på den här knappen.

Om du har arbetat med Elementor tidigare kommer du att känna dig som hemma med gränssnittet, alternativen och hur allt är upplagt för dig. Det är i princip samma process som att skapa Elementor -sidmallar i WordPress.

På höger sida av skärmen är huvudduken, som visar en förhandsvisning av vad du för närvarande arbetar med. Du kan redigera och anpassa varje element individuellt genom att markera det och välja Redigera> Redigera element. När du är klar ser du kontrollerna och inställningarna i sidofältet till vänster, tillsammans med alternativet att publicera ditt arbete.

Konfiguration av popup -fönstret

 Det är då du ska se en förhandsvisning av din popup - antingen en tom skiffer eller den mall du valde.

Popup -inställningarna, alltid öppna som standard, låter dig anpassa hur själva popup -duken fungerar. De är följande:

• Det är här du vill spendera mest tid eftersom det är där du kommer att kunna skapa olika typer av popup -fönster. Med andra ord, genom att justera dessa inställningar kommer du att kunna göra följande effekter:

• Modala popup -fönster är en typ av modalfönster.
• Inlägg, meddelandefält och så vidare.

Dessutom kan du anpassa flera andra viktiga inställningar.

Följande alternativ är tillgängliga på fliken Inställningar :

• Ändra bildens höjd och bredd.
• Ändra vertikal eller horisontell orientering av objektet (till ex amp le, kan du fixa det till toppen eller botten för att skapa en meddelandefältet)
• Ta ett beslut om du vill använda ett överlägg eller inte (detta låter dig exempelvis amp bakgrunden när popup -fönstret är aktivt)
• Inaktivera stängningsknappen i din webbläsare.
• Inkludera en animation för entrén.

Du kan göra följande på fliken Stil :

• Du kan ändra bakgrundsfärgen, göra den till en lutning eller använda en bild som bakgrund.
• Om överlägget är aktiverat, konfigurera det.
• Om du har stängningsknappen aktiverad måste du konfigurera den.

Slutligen innehåller fliken Avancerat några diverse importinställningar som gör att du kan göra följande saker:

• Visa stängningsknappen eller låt popup -fönstret stängas automatiskt efter en viss tid.
• Genom att klicka på överlägget eller trycka på Escape -tangenten kan du förhindra att fönstret stängs.

• Inaktivera möjligheten att rulla ned på sidan.
• Undvik flera popup -fönster (om du har riktat in flera popup -fönster på samma sida förhindrar detta att dina besökare blir irriterade).

För att ge dig en uppfattning om hur dessa inställningar kommer att påverka din popup, så här ser det ut när du ändrar positionen till det nedre högra hörnet av fönstret:

Ta en titt på hur popup-fönstret nu är permanent fixat i det nedre högra hörnet. Med en rullningstrigger tillsammans med en entréanimation kan du uppnå en trevlig, diskret inskjutningseffekt.

Du kan också skapa popup -fönster med den visuella byggaren i Elementor

Så snart du har slutfört de grundläggande popup-inställningarna kan du börja designa det faktiska innehållet i din popup genom att dra och släppa element till det visuella dra-och-släpp-gränssnittet.

Du kan använda vilken Elementor -widget du vill, vilket ger dig mycket kontroll över den slutliga designen. Formulärwidgeten är det enda du absolut måste inkludera eftersom det är den enda som låter dig skapa ditt e-postformulär för att välja.

Med formulärwidgeten har du fullständig kontroll över de fält du vill erbjuda, samt texten och utseendet på knappen Skicka. Ex ex amp :

Utöver det rekommenderar jag dig starkt att bekanta dig med alla Elementors widgets och designalternativ.

Som tidigare sagt har du stor kontroll över hur din webbplats ser ut, och du har också tillgång till några användbara widgets som kan hjälpa dig att öka din konverteringsfrekvens.

Publicera inställningar

När du är nöjd med det du har skapat vill du dela det med världen. Efter att ha tryckt på knappen PUBLISH kommer du att få en rad frågor. Som en illustration:

Är det möjligt att ange under vilka villkor du vill att popup -fönstret ska visas? Du kan välja vilka sidor som ska inkluderas eller uteslutas från dina sökresultat. Du kan ha så många villkor som du vill.

Vad är då händelsen som får popup -fönstret att visas? Du kan välja om popup -fönstret ska visas omedelbart vid sidläsning, rullning eller när användaren bland annat bläddrar till ett specifikt element. Alla dessa alternativ har sina inställningar, vilket möjliggör fullständig anpassning.

Sist men inte minst kommer du att se några avancerade regler, som att visa popupen bara för återkommande besökare, bara visa popupen ett visst antal gånger eller kanske bara visa popupen när en besökare hänvisas till din webbplats från en specifik URL. Det finns några fler också. Dessa alternativ kan avsevärt förbättra användarupplevelsen av din popup, så att du kan designa den med sann integritet och hänsyn till dina användare.

Slutför inställningarna på det sätt du önskar och klicka sedan på SPARA & STÄNG. Du kommer att bli en amp av hur din popup kommer att se ut när du klickar på den här knappen.

Popup -fönster kan anpassas och dynamiskt innehåll kan läggas till dem.

Ta upp saker till nästa nivå, ska vi? Hittills har vi valt en mall och justerat en eller två sammanträden, och det är ungefär det. Tänk på scenariot där vi vill anpassa vår popup ytterligare.

Vi är tillbaka på ADD NEW POPUP -scenen i processen, där vi kan ange en titel och välja en mall en gång till.

Efter det kan vi välja det, göra nödvändiga ändringar i grundinställningarna och trycka på PUBLISH igen.

Okej, det är här saker börjar bli intressanta. Vi kan använda Elementor för att hämta dynamiska data från vår WordPress -installation och infoga den i själva popup -fönstret i vår popup. Vi kan inkludera information som användarens namn, sidtitel och så vidare.

Tänk på följande scenario: vi kör WooCommerce och vi vill informera en användare om att det finns en rabatt på den specifika produkten de tittar på just nu. Börja med att markera en textdel från mallen och klicka sedan på Dynamisk i sidofältet:

Vi har en mängd olika alternativ att välja bland, inklusive information från själva inlägget, information från webbplatsen som helhet, medieinformation, författarinformation och till och med WooCommerce -information. Vi väljer en produkttitel, och den kommer att läggas till i vårt textinnehållsblock som ett resultat av vårt val.

Anta att databasinformationen inte hämtas korrekt. I så fall är det möjligt att ange en del före texten, en del efter texten och en reservtext (om databasinformationen inte hämtas korrekt).

Så låt oss kopiera denna process för knappen, som visar produktens pris. Vi kan formulera föregående text som KÖP NU FÖR att ge oss en övertygande uppmaning till handling:

Vi kan till och med ta det ett steg längre och använda produktbilden som bakgrund i själva popup -fönstret.

När vi trycker PUBLISH får vi publiceringsinställningarna en gång till, så att vi kan ange att vi bara vill att popup -fönstret ska visas på WooCommerce -sidor. Vi kommer att ställa in timern till 15 sekunder av inaktivitet som utlösare. Så här blev det till slut:

Även om designen kan förbättras kan du se att vi visar produktnamnet, priset och en bild av produkten som bakgrunden till popup -fönstret. Lysande!