Skapa Elementor-popups i WooCommerce

Vi är alla stora fans av WooCommerce. Det är enkelt att ställa in 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 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 visuellt tilltalande och användarvänlig 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 hjälp av den visuella byggaren i Elementor
• Publiceringsinställningar

Även om WooCommerce skapar kundvagnen och kassasidan åt 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 tacksida och uppdatera dina sidor för Mitt konto och användarvillkor kan du vinna över dina kunders hjärtan och sinnen.

Dra och släpp-funktionaliteten i Elementor, i kombination med denna handledning, kommer att se till 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 nytt intryck och en ny önskan att stanna kvar i din butik.

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

När du har klickat på LÄGG TILL NY POPUP (vilket är ganska självförklarande), kommer du att bli ombedd att ge den ett namn och sedan välja en mall från de förgjorda amp som visas. Olika mallar finns 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 till och med amp 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 finns 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 som visas 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örhandsgranskning av din popup - antingen ett tomt blad eller mallen 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.
• Slide-in, meddelandefält och så vidare.

Dessutom kan du anpassa flera andra viktiga inställningar.

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

• Ändra bildens höjd och bredd.
• Ändra den vertikala eller horisontella orienteringen av objektet (till amp kan du fixa det till toppen eller botten för att skapa ett meddelandefält)
• Ta ett beslut om huruvida du vill använda ett överlägg eller inte (detta låter dig till amp gråa 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 saker på Stil :

• Du kan ändra bakgrundsfärgen, göra den till en gradient 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 olika importinställningar som låter dig göra saker som följande:

• Visa stängningsknappen eller stäng popup-fönstret 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 ner på sidan.
• Undvik flera popup-fönster (om du har riktat flera popup-fönster till samma sida kommer detta att förhindra 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. Genom att använda en scroll-trigger i kombination med en entréanimation kan du uppnå en snygg, diskret slide-in-effekt.

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

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

Du kan använda vilken Elementor-widget du vill, vilket ger dig en hel del 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.

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

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

Som tidigare nämnt har du stor kontroll över utseendet på din webbplats, och du har även tillgång till några användbara widgets som kan hjälpa dig att öka din konverteringsfrekvens.

Publiceringsinstä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 hur många villkor du vill.

Vad är då händelsen som gör att popup-fönstret visas? Du kan välja om du vill visa popup-fönstret direkt vid sidladdning, rullning eller när användaren rullar till ett specifikt element, bland andra möjligheter. 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 popup-fönstret endast för återkommande besökare, bara visa popup-fönstret ett visst antal gånger, eller kanske bara visa popup-fönstret 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 verklig 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 tas till en amp av hur din popup kommer att se ut efter att du har klickat 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å, eller hur? Fram till denna punkt har vi valt en mall och justerat en eller två sessioner, och det är ungefär det. Tänk på scenariot där vi vill anpassa vår popup ytterligare.

Vi är tillbaka vid LÄGG TILL NY POPUP-stadiet i processen, där vi kan specificera en titel och välja en mall igen.

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

Okej, det är här saker och ting börjar bli intressanta. Vi kan använda Elementor för att hämta dynamisk 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 tillgänglig på den specifika produkten de för närvarande tittar på. För att börja, välj ett avsnitt av text från mallen och klicka sedan på Dynamisk i sidofältet:

Vi har ett brett utbud av alternativ att välja mellan, inklusive information från själva inlägget, information från webbplatsen som helhet, mediainformation, 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 text och en reservtext (om databasdetaljerna inte är korrekt hämtade).

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

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 på PUBLISH presenteras vi ännu en gång för publiceringsinställningarna, vilket gör att vi kan specificera att vi bara vill att popup-fönstret ska visas på WooCommerce-sidor. Vi ställer in timern på 15 sekunders inaktivitet för att vara utlösaren. Så här blev det till slut:

Även om designen skulle kunna förbättras kan du se att vi visar produktnamnet, dess pris och en bild av produkten som bakgrund i popup-fönstret. Lysande!