WPBeginner https://www.wpbeginner.com/sv Beginner's Guide for WordPress Fri, 25 Oct 2024 10:02:28 +0000 sv-SE hourly 1 Hur man bäddar in formulär i WordPress (Ultimat przewodnik för nybörjare) https://www.wpbeginner.com/sv/beginners-guide/how-to-embed-forms-in-wordpress/ https://www.wpbeginner.com/sv/beginners-guide/how-to-embed-forms-in-wordpress/#comments Fri, 25 Oct 2024 10:00:00 +0000 https://www.wpbeginner.com/sv/opinion/how-to-embed-forms-in-wordpress/ WordPress-formulär är viktiga för att få kontakt med besökare och öka din publik. Oavsett om du lägger till ett kontaktformulär, en enkät eller ett feedbackformulär är det ett snabbt och enkelt sätt att samla in information från besökare genom att bädda in det på din… Läs mer om »

The post Hur man bäddar in formulär i WordPress (Ultimat przewodnik för nybörjare) first appeared on WPBeginner.

]]>
WordPress-formulär är viktiga för att få kontakt med besökare och öka din publik. Oavsett om du lägger till ett kontaktformulär, en enkät eller ett feedbackformulär är det ett snabbt och enkelt sätt att samla in information från besökare genom att bädda in det på din webbplats.

Vi använder formulär i alla våra projekt, från kontaktsidor till nyhetsbrevsprenumerationer och till och med kassaformulär. På vägen har vi lärt oss alla steg som behövs för att bädda in ett WordPress-formulär, och vi är här för att guida dig genom hela processen från början till slut.

I den här przewodniken visar vi dig hur du bäddar in formulär med hjälp av de mest populära WordPress-formulärbyggarna.

How to Embed Forms in WordPress

Vad är ett WordPress-formulär och varför är det importować?

Ett WordPress-formulär är ett verktyg för att samla in värdefull information och insikter på din webbplats. Det låter besökare mata in sina uppgifter, t.ex. namn, e-postadress och feedback.

Det finns många användningsområden för formulär. Du kan till exempel skapa ett kontaktformulär för att låta användare nå dig och bygga upp en lista mailingowa, en enkät för att samla in åsikter eller ett registreringsformulär för evenemang.

Du kan också använda formulär för att boka möten eller samla in donationer. En del företag använder också formulär för att hantera förfrågningar från obsługa kunder.

Utan formulär kan du missa chansen att interagera med besökare. Så att lägga till formulär på din WordPress-webbplats är ett smart drag för alla webbplatsägare.

Så här bäddar du in formulär i WordPress

I de följande avsnitten går vi igenom varje steg för att lägga till formulär på din WordPress-webbplats. Om du är intresserad av en viss formulärtyp kan du klicka på länken för att hoppa vidare i artikeln:

Är du redo? Låt oss komma igång.

1. Så här bäddar du in WPForms på din WordPress-webbplats

WPForms är den bästa mångsidiga formulärbyggaren på marknaden. Det är också en av de mest populära, med över 6 miljoner aktiva användare.

Med det här verktyget kan du använda någon av dess 2000+ färdiga, anpassningsbara mallar för att skapa vilket formulär du vill.

WPForms' homepage

Förutom kontaktformulär kan WPForms hjälpa dig att enkelt bygga enkla till mer avancerade formulär, t.ex:

När det gäller inbäddning av WPForms kan du antingen använda ett WPForms-block eller en krótki kod.

Så låt oss installera och aktivera WPForms och prova detta tillsammans. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

Följ sedan vår steg-för-steg-przewodnik för hur du skapar ett kontaktformulär i WordPress.

Bädda in WPForms-formulär med hjälp av WPForms-blocket

När formuläret är klart att publiceras klickar du bara på knappen ”Embed” i formulärbyggaren för att lägga till formuläret på din webbsida med hjälp av ett WPForms-block.

The Embed button in WPForms form builder

Då öppnas ett popup-fönster där du kan välja en befintlig sida eller skapa en ny sida för formuläret.

Om du klickar på knappen ”Välj befintlig sida” ser du en rullgardinsmeny med alla tillgängliga sidor på din webbplats. Och om du klickar på ”Skapa ny sida” ser du ett fält ”Namnge din sida” som du ska fylla i.

När du har valt en sida eller namngett din nya sida kan du klicka på knappen ”Let’s Go!”.

Embed contact form WPForms

Du kommer då att omdirigeras till sidans blockredigerare.

Härifrån kan du klicka på ”+”-knappen och söka efter WPForms-blocket.

Adding WPForms block

Nästa steg är att öppna rullgardinsmenyn i blocket WPForms och välja det formulär som du vill bädda in.

När du har valt ett formulär kommer WPForms att ladda det i blockredigeraren.

Efter det kanske du vill leka lite med ”Formulärinställningar” i den högra panelen.

Som standard laddar WPForms inte din formulärtitel. Så du kanske vill slå på alternativet ”Form Title” för att lägga till formulärets titel och ge besökarna mer sammanhang. Om du skriver en formulärbeskrivning kan du också slå på alternativet.

Ännu bättre är att du kan utforma formuläret med ett tema som matchar webbplatsens övergripande utseende och känsla.

WPForms form settings in block editor

När du är nöjd med hur formuläret ser ut kan du gå vidare och klicka på ”Spara”.

Och det är så du bäddar in WPForms med hjälp av ett WPForms-block.

WPForms embedded on a live website

Bädda in WPForms-formulär med hjälp av en krótki kod

Ett annat sätt att bädda in WPForms är genom att använda en krótki kod.

För att göra detta vill du gå över till WPForms ” Alla formulär för att hitta kolumnen ’Krótki kod’ för varje formulär.

The shortcode column in WPForms page

Härifrån kopierar du helt enkelt den krótki kod för formuläret som du vill bädda in. Vi kommer till exempel att kopiera krótki koden för vårt formulär ”Kundrecension”.

Nästa steg är att öppna den sida eller det inlägg där du vill bädda in formuläret. För att göra det, gå till ”Sidor” eller ”Inlägg”. Håll sedan muspekaren över en av dem och klicka på ”Redigera” när den visas.

Då kommer du till sidans eller inläggets redigerare.

För att bädda in formuläret klickar vi på ”+”-knappen och söker efter blocket ”Krótki kod”.

The shortcode block in block editor

När blocket har lagts till kan du klistra in ditt WPForms-formulärs krótki kod i textfältet.

Så här kan det se ut:

Adding WPForms shortcode

Blockredigeraren laddar inte formuläret i live-redigeringsområdet.

Så gå vidare och spara ändringarna först och klicka sedan på knappen ”Visa sida” när den visas i det nedre vänstra hörnet.

WPForms embedded using shortcode on a live website

2. Så här bäddar du in donationsformulär i WordPress

Genom att lägga till ett donationsformulär på din webbplats gör du det enkelt för människor att obsługa din sak. Besökare är mer benägna att donera när de ser ett tydligt och enkelt sätt att göra det på.

Det enklaste sättet att bädda in donationsformulär i WordPress är att använda Charitable-pluginet. Detta populära verktyg låter dig skapa och anpassa flera insamlingskampanjer med över 100 färdiga mallar.

Charitable's homepage

Låt oss nu installera och aktivera Charitable för att skapa ditt donationsformulär. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

Efter aktivering, låt oss gå över till Välgörenhet ” Inställningar för att aktivera Pro-licensen. Klistra bara in din klucz licencyjny och klicka på ”Verifiera nyckel” för att starta processen.

Adding the WP Charitable license key

När du har gjort det är du redo att skapa ditt donationsformulär. För detaljerade instruktioner kan du läsa vår przewodnik om hur du skapar ett återkommande donationsformulär i WordPress.

När du är nöjd med hur formuläret ser ut kan du bädda in det i ett WordPress-inlägg eller en WordPress-sida.

I kampanjbyggaren börjar du helt enkelt med att klicka på rullgardinsmenyn ”Utkast” för att öppna dess alternativ. Gå sedan vidare och klicka på ”Publicera”, så skapar Charitable automatiskt en ny sida för din kampanj.

Publishing a campaign in WP Charitable

Och det är allt – du har lyckats skapa och publicera din första Charitable-kampanj!

Om du nu besöker din webbplats kan du se ditt donationsformulär i działanie.

WP Charitable crowdfunding campaign on a live website

Som sagt, du kanske också lägger märke till länken ”Embed Wizard” i popup-fönstret eller knappen ”Embed” i Charitable-redigeraren.

Du kan också använda någon av dessa funktioner för att lägga till ditt donationsformulär i andra inlägg eller på andra sidor.

För att göra detta klickar du bara på länken ”Embed Wizard” eller på knappen ”Embed”, så aktiveras inbäddningsmeddelandet.

Charitable's embed wizard

I popup-fönstret som visas måste du välja mellan att välja en befintlig sida eller skapa en ny.

Eftersom vi redan har en särskild sida för donationsformulär är det en bra idé att välja ”Välj befintlig sida”. Gå vidare och klicka på knappen.

Select existing page for embedding Charitable campaign

Därefter visas en rullgardinsmeny med en lista över alla sidor på din WordPress-webbplats.

Du kan expandera rullgardinsmenyn, välja en sida och klicka på knappen ”Let’s Go”.

The Let's Go button

Du kommer då att omdirigeras till sidans blockredigerare.

Härifrån kan du klicka på ”+”-knappen och söka efter blocket ”Charitable Campaign”. Sedan klickar du bara på sökresultatet för att lägga till det i innehållsredigeraren.

Charitable Campaign block

Efter det kan du välja ett donationsformulär att bädda in från rullgardinsmenyn ”Charitable Campaign”.

Gå vidare och expandera rullgardinsmenyn. Sedan klickar du bara på den kampanj du vill lägga till.

Choosing a campaign

Oroa dig inte om du inte kan se förhandsgranskningen i innehållsredigeraren. Blocket fungerar alldeles utmärkt.

Nu klickar vi på knappen ”Spara”, ”Uppdatera” eller ”Publicera” för att göra det live.

Och nu är det klart! Du kan nu besöka sidan för att se donationsformuläret i działanie:

Charitable donation form on a live website

3. Hur man bäddar in HubSpot-formulär i WordPress

HubSpot är en bra plattform för att få ditt företag att växa, med verktyg som en CRM-plattform (Customer Relationship Management) där du kan hantera information om klienter, en webbplatsbyggare och mycket mer.

Den goda nyheten är att de också har en formulärbyggare som fungerar utmärkt med WordPress. När någon fyller i ett formulär går deras information direkt in i HubSpot CRM, så att du enkelt kan följa upp dem med e-post och meddelanden.

Du kan till och med ansluta HubSpot till andra formulärverktyg, inklusive WPForms. Detta gör plattformen riktigt praktisk eftersom den fungerar med många andra verktyg som du kanske redan använder.

I den här poradniken visar vi dig hur du bäddar in HubSpot-formulär med hjälp av pluginet HubSpot Form Builder och WPForms HubSpot Addon.

Bädda in HubSpot-formulär med hjälp av HubSpot-plugin

För att bädda in HubSpot Forms med hjälp av pluginet måste du först installera HubSpot-pluginet. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

När du har aktiverat HubSpot klickar du på menyn ”HubSpot” från din kokpit på WordPress. I den här panelen ser du flera sätt att ansluta din webbplats till HubSpot:

  • Om du har ett konto i HubSpot klickar du bara på ”Logga in”.
  • Om du inte gör det fortsätter du med ditt Google-, Microsoft- eller Apple-konto.
  • Om du vill kan du använda samma e-postadress som du använde för att registrera din webbplats.
Signing up for HubSpot in WordPress

När du har loggat in eller skapat ett HubSpot-konto kommer du att bli ombedd att ansluta det till din WordPress-webbplats.

Klicka bara på knappen ”Anslut webbplats” så startar HubSpot processen.

Connecting HubSpot with WordPress website

När du är ansluten är du redo att skapa ditt HubSpot-formulär med hjälp av HubSpot-pluginet.

Gå vidare och navigera till HubSpot ” Formulär. Sedan kan du klicka på knappen ”Skapa formulär”.

Creating HubSpot forms

Härifrån kan du välja en formulärstyp och mall. Sedan kommer du att omdirigeras till en ny karta där du kan använda formulärbyggaren för att anpassa ditt HubSpot-formulär.

För detaljerade instruktioner kan du se den första metoden i vår przewodnik om hur du skapar ett HubSpot-formulär i WordPress.

När du är nöjd med hur ditt formulär ser ut är nästa steg att bädda in det på din webbplats. Naturligtvis vill du använda knappen ”Bädda in” i formulärbyggaren.

Embed button in HubSpot's form builder

Den här metoden är dock lite förvirrande.

Det låter dig bara dela formulärlänken och använda ett HTML-fragment kodu på ditt WordPress-inlägg eller sida.

Embed methods in HubSpot form builder

Istället kan du klicka på knappen ”Tillbaka till WordPress” och bädda in dina formulär från HubSpots kokpit i ditt obszara administracyjny.

Gå vidare och klicka på knappen i det övre vänstra hörnet.

Back to WordPress button in HubSpot form builder

Härifrån behöver du bara hålla muspekaren över det formulär du vill bädda in.

Därefter klickar du bara på knappen ”Embed” när den visas.

HubSpot embed button in the WP admin area

Du kommer då att se ett popup-fönster där HubSpot delar med sig av flera sätt att bädda in ditt formulär.

Här kan du välja att bädda in ditt HubSpot-formulär i ett inlägg eller en sida med hjälp av HubSpot-blocket. Och om du byter till den andra kartan hittar du formulärets krótki kod.

I den här poradniken klickar vi på knappen ”WordPress Post”.

HubSpot's Your Form Is Ready popup window

Detta öppnar sidan ”Inlägg” på en ny karta. Gå vidare och öppna ett inlägg för att bädda in formuläret i genom att hålla muspekaren över ett inlägg och klicka på ”Redigera” när det visas.

Du kommer sedan att kunna lägga till HubSpot Form-blocket på sidan via innehållsredigeraren.

Härifrån kan du klicka på ”+” -knappen och använda sökfältet för att leta efter HubSpot Form-blocket. Klicka på det när du ser det.

Adding a HubSpot form block to a post

Detta kommer att lägga till HubSpot Form-blocket i innehållsområdet.

Nästa gång klickar vi på rullgardinsmenyn för att öppna de tillgängliga alternativen. Sedan kan du välja det HubSpot-formulär du vill bädda in.

HubSpot form embedded

Och så är det klart! Du kan nu klicka på knappen ”Spara” för att spara dina ändringar.

Så här ser det ut på vår demosajt:

HubSpot form on a live website

Bädda in HubSpot-formulär med hjälp av WPForms HubSpot Addon

Att använda WPForms för att skapa ett HubSpot-formulär är ett enklare och mer effektivt sätt att hantera formulär och kontakter utan att behöva jonglera med flera plugins.

WPForms hanterar både skapandet av formulär och integrationen med HubSpot på ett och samma ställe. Detta förenklar processen eftersom det ger dig tillgång till WPForms dra-och-släpp-byggare och mallar samtidigt som du synkroniserar dina formulärdata med HubSpot automatiskt.

Obs: För att använda HubSpot Addon i WPForms behöver du Elite-planen. Förutom HubSpot-tillägget och allt i Pro-planen kan du använda pluginet för obegränsat WordPress-webbplatser och låsa upp premiumsupport. Detta gör det perfekt om du driver en marknadsföringsbyrå.

Det första du behöver göra är att installera och aktivera WPForms plugin. Kolla in vår detaljerade przewodnik om hur du installerar ett WordPress-plugin.

Vid aktivering måste du verifiera din klucz licencyjny i WPForms ” Inställningar.

Du hittar din klucz licencyjny i ditt WPForms-konto. Klicka bara på ikonen för urklipp för att kopiera den. Sedan kan du gå tillbaka till din WordPress karta och fylla i fältet ”Klucz licencyjny”.

Gå vidare och klicka på knappen ”Verify Key” för att aktivera ditt abonnemang.

Activating license key to WPForms

Låt oss nu gå till WPForms ” Addons från admin kokpit för att installera HubSpot Addon.

Härifrån rullar du ner och letar efter HubSpot-tillägget. Gå sedan vidare och klicka på knappen ”Installera Addon”.

Installing the HubSpot Addon in WPForms

När du har aktiverat tillägget bör du gå till WPForms ”Inställningar” -panel från WordPress kokpit och sedan byta till kartan ”Integration”.

Här kan du ansluta ditt HubSpot CRM-konto till WPForms. Klicka bara på ”+ Lägg till nytt konto” och ange dina kontouppgifter.

Adding HubSpott account to WPForms

När du har gjort det är det dags att skapa och bädda in ett HubSpot-formulär från WPForms.

Först måste du skapa ditt formulär genom att navigera till WPForms ” Add New. På nästa skärm ska du namnge formuläret och välja en formulärmall.

Efter det kan du anpassa mallen med hjälp av formulärbyggaren.

Om allt redan ser bra ut kan du gärna byta till panelen ”Marknadsföring”. Härifrån, låt oss öppna alternativet ”HubSpot” för att ansluta formuläret till plattformen.

Adding new HubSpot connection in WPForms

Gå vidare och ange dina HubSpot-kontouppgifter och följ installationsanvisningarna.

När du är klar kan du publicera formuläret med hjälp av WPForms-blocket eller formulärets krótki kod. För mer information kan du kolla in vår przewodnik om hur du skapar ett HubSpot-formulär i Wordpress.

4. Så här bäddar du in Google Formulär i WordPress

WPForms och andra WordPress-formulärbyggare är verkligen enkla att använda. De fungerar direkt på din WordPress-webbplats och låter dig göra massor av saker som att bygga formulär som accepterar betalningar, skapa inloggningsformulär, skapa anpassade användarregistreringsformulär och mycket mer.

Men ibland kan du behöva dela ett formulär på olika webbplatser eller plattformar.

I sådana fall kan Google Formulär vara superhändiga. De är lätta att dela, fungerar utmärkt på mobiltelefoner och håller alla svar på ett ställe. Dessutom kan du lägga till medarbetare som kan hjälpa dig med svaren, som alla lagras i Google Drive.

För att bädda in ett Google-formulär i WordPress kan du börja med att skapa ett formulär på Google Forms webbplats. Klicka bara på knappen ”Gå till formulär”.

The Go to Forms button in Google Forms

På nästa skärm ser du olika formulärmallar. Gå vidare och klicka på en av dem för att börja bygga.

Du kan också börja om från början genom att klicka på ”Blankett”.

Google Forms' templates

När du har valt en mall kan du börja anpassa formuläret. Här är några saker som du kan behöva göra:

  • Skapa formulärets titel.
  • Ange en beskrivning av formuläret.
  • Anpassa fälten så att de matchar dina mål.
Adding fields to Google Forms

Du kan också använda AI-verktyg för att välja de lämpligaste fälten för dina frågor.

När du är nöjd med hur formuläret ser ut kan du klicka på knappen ”Skicka”. Då öppnas ett popup-fönster där du kan hämta formulärets inbäddningskod.

Copying Google Forms' embed code

När du har kopierat denna kod kan du öppna en sida eller ett inlägg i WordPress där du vill visa formuläret.

I sidans eller inläggets innehållsredigerare klickar vi på ”+”-knappen och söker efter blocket ”Anpassad HTML”. Gå vidare och klicka på det för att lägga till det på din sida.

Adding custom HTML block in WordPress

Sedan klistrar du bara in Google Forms inbäddningskod i det anpassade HTML-blocket.

När du är klar, glöm inte att klicka på knappen ”Uppdatera” eller ”Publicera”. Om du nu besöker din webbplats bör du se Google-formuläret i działanie.

Google Form preview on a live WordPress site

För mer detaljerade steg-för-steg-instruktioner kan du läsa vår przewodnik om hur du bäddar in ett Google-formulär i WordPress.

5. Så här bäddar du in Zoho Forms i WordPress

Zoho Forms är ett fantastiskt verktyg som låter dig enkelt skapa alla typer av formulär. Oavsett om du behöver ett kontaktformulär, en enkät, ett registreringsformulär eller ett beställningsformulär, har Zoho Forms allt du behöver.

Dessutom är det enkelt att bädda in ett Zoho-formulär på din WordPress-webbplats. Men innan vi kommer till den här delen, låt oss först skapa formuläret.

För att komma igång måste du skapa ett konto på Zoho Forms webbplats. Klicka bara på ”Registrera dig gratis”.

Zoho Forms' homepage

När du har skapat ett konto kan du börja skapa ditt formulär.

Först måste du klicka på knappen ”Nytt formulär” i formulärbyggaren.

The New Form button in Zoho Forms

Du kommer då att se att Zoho Forms erbjuder 3 sätt att skapa formulär:

  • Skapa formulär från grunden med hjälp av standard- eller kortformulärstyp.
  • Använd färdiga formulärmallar.
  • Skapa CRM-formulär, vilket är en funktion som bara är tillgänglig om du uppgraderar till Pro-planen.
Three ways to create Zoho Forms

I den här przewodniken väljer vi mallen ”Website Feedback”.

Så låt oss klicka på knappen ”Använd den här mallen”.

Zoho Forms' Use this template button

När du har gjort det kommer du till Zoho Forms formulärbyggare.

Den vänstra panelen har alla anpassningsalternativ och förhandsgranskningen av formuläret finns till höger. Du kan lägga till element i formuläret genom att helt enkelt dra och släppa dem.

Med Zoho Forms kan du också ändra formulärets tema så att det matchar din webbplats tema.

För att göra detta kan du gå till kartan ”Teman”. Sedan är det bara att hålla muspekaren över det tema du vill använda och klicka på ”Apply”.

Applying Zoho Forms theme

Om allt redan ser bra ut kan du byta till kartan ”Dela”.

På den här kartan kan du se att Zoho Forms har många alternativ för inbäddning av formulär.

Eftersom vi kommer att bädda in den på en WordPress-webbplats, låt oss gå över till Bädda in ” Website Builders. Gå sedan vidare och klicka på knappen ”Gå till WordPress”.

The Go to WordPress button in Zoho Forms

Du kommer då att omdirigeras till Zoho Forms-sidan i WordPress plugin-katalog.

Allt du behöver göra är att installera insticksprogrammet. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

Efter aktivering kan du öppna ett inlägg eller en sida där du vill bädda in Zoho Forms. Härifrån klickar du sedan på ”+”-knappen och väljer Zoho Forms-blocket.

Adding the Zoho Forms block to WP content editor

När blocket har lagts till kan du klicka på knappen ”Access Zoho Forms”.

Det finns också länken ”Bädda in med permalänk”, men vi rekommenderar inte den här metoden eftersom den inte är lika nybörjarvänlig.

The Access Zoho Forms button in Zoho Forms block

Därefter uppmanas du att välja den domän där du registrerade ditt Zoho-konto.

I det här fallet väljer vi"zoho.com” i rullgardinsmenyn och klickar på ”Connect”.

Connecting Zoho account

Därefter kan du välja det formulär som du vill bädda in.

Klicka bara på rullgardinsmenyn och välj ett av de tillgängliga alternativen. Sedan ska du rulla ner och klicka på knappen ”Bädda in”.

Embedding the Website Feedback form

Din innehållsredigerare kommer sedan att ladda ditt Zoho-formulär.

Om du gillar vad du ser kan du klicka på knappen ”Spara”.

Saving the post with Zoho Forms

Om du nu besöker sidan kommer du att se ditt Zoho-formulär i działanie.

Så här kan det se ut:

Zoho Forms on a live website

Från bilden ovan kan du också se att Zoho Forms tema gör det lättare att matcha formuläret med din webbplatsdesign.

6. Så här bäddar du in formulär för e-postregistrering i WordPress

OptinMonster, även om det inte är en typisk formulärbyggare, är ett utmärkt verktyg för att skapa användarregistreringsformulär och bygga en lista mailingowa.

På WPBeginner har vi sett utmärkta resultat med hjälp av detta leadgenereringsverktyg. Till exempel, med OptinMonster ökade vi våra e-postprenumeranter med 600%.

När du ställer in e-postregistreringsformulär kan du använda olika kampanjtyper, till exempel slide-ins och popup-fönster med okno) lightbox. Så innan vi pratar om att bädda in OptinMonster-e-postregistreringsformuläret, låt oss se till att formuläret är klart.

Först måste du skapa ett OptinMonster-konto på deras webbplats genom att klicka på knappen ”Få OptinMonster nu”.

OptinMonster's homepage

Du kommer då till prissättningssidan.

Vi rekommenderar Pro-planen eftersom den är populär och inkluderar funktionen ”Exit Intent”. Du kan också använda vår exklusiva WPBeginner OptinMonster kupongkod för att få 10% rabatt.

För att slutföra ditt köp anger du bara dina betalningsuppgifter och fortsätter med betalningen.

Med det gjort, låt oss installera och aktivera OptinMonster WordPress plugin. Om du behöver hjälp kan du läsa vår steg-för-steg przewodnik om hur du installerar ett WordPress-plugin.

Detta plugin kommer att ansluta din WordPress-webbplats till OptinMonster. Navigera bara till OptinMonster ” Inställningar från din WordPress-adminpanel. Gå sedan vidare och klicka på ”Anslut ditt befintliga konto”.

Connect your existing account

När du är ansluten är du redo att skapa ditt OptinMonster-registreringsformulär för e-post. För detaljerade instruktioner kan du läsa vår przewodnik om hur du bygger din lista mailingowa i WordPress med OptinMonster.

OptinMonsters detaljerade visningsregler gör att du kan visa rätt kampanj till rätt person vid rätt tidpunkt, vilket bidrar till att öka konverteringsgraden. Du hittar dessa inställningar genom att gå till Visningsregler i kampanjbyggaren.

The Display Rules tab in OptinMonster

Här kan du styra när och var dina kampanjer visas baserat på kundernas beteende.

Du kan också anpassa kampanjer för olika målgrupper, till exempel genom att visa olika layouter för mobila och stationära användare.

Adding display rules to a marketing or advertising campaign

OptinMonster låter dig ställa in regler baserat på specifika dagar eller platser, så att du kan köra riktade kampanjer som Black Friday-erbjudanden eller popup-fönster med semestertema för olika länder.

Dessutom hjälper OptinMonsters exit-intent-teknik att återhämta besökare som håller på att lämna din webbplats. Den här funktionen spårar användarnas beteende och utlöser ett riktat meddelande precis innan de lämnar, så att du kan fånga fler e-postprenumeranter och öka konverteringarna.

Exit intent display rules

När du är nöjd med allt är det dags att bädda in formuläret för leadgenerering på din webbplats.

Klicka bara på ”Spara”-knappen från byggaren för att starta processen.

OptinMonster's Save button

När du har kontrollerat att du har sparat dina ändringar kan du gå till kartan ”Publicera”.

Gå vidare och ändra status från ”Utkast” till ”Publicera”. Du kommer då att se att kartan ”Publicera” har ändrats till ”Publicerad” och att pausikonen har ändrats till en bock.

Publishing OptinMonster popup

Du kan nu stänga kampanjredigeraren och navigera till OptinMonster ” Kampanjer.

Nästa steg är att ändra statusen ”Pending” till ”Publish” för din pop-up för e-postregistrering. Klicka bara på länken ”Pending” för att öppna rullgardinsmenyn och välj alternativet ”Publish”.

Changing OptinMonster campaign's status

Där har du det!

Om du nu besöker din webbplats kommer du att se popup-fönstret för e-postregistrering i działanie.

OptinMonsters' email sign up on a live website

7. Så här bäddar du in betalningsformulär i WordPress

Om du bara vill sälja en enda produkt eller inte vill ställa in en fullständig kundvagn, kan det vara överdrivet att använda omfattande e-handelsplugins som Easy Digital Downloads eller WooCommerce. Att skapa ett enkelt betalningsformulär är ofta ett bättre alternativ för att acceptera anpassade belopp eller sälja ett fåtal artiklar.

Det är här WP Simple Pay kan hjälpa till.

WP Simple Pay

WP Simple Pay är det bästa valet för att acceptera Stripe-betalningar utan att kräva ett komplett plugin för e-handel.

Det gör det också möjligt för dig att acceptera andra betalningsmetoder, till exempel kreditkortsbetalningar, Apple Pay, Google Pay och mer. Det är perfekt för ideella organisationer, småföretag och volontärer som behöver en enkel lösning för att samla in betalningar.

För att bädda in ett betalningsformulär måste du först installera insticksprogrammet WP Simple Pay. Om du behöver hjälp kan du läsa vår steg-för-steg przewodnik om hur du installerar ett WordPress-plugin.

Vid aktivering följer du bara installationsguiden för att ansluta till Stripe.

Connecting your WordPress website to Stripe

När du är ansluten är du redo att skapa ditt betalningsformulär med WP Simple Pay.

För detaljerade instruktioner kan du följa den första metoden i vår przewodnik om hur du skapar ett WordPress-formulär med betalningsalternativ.

När du är nöjd med ditt betalningsformulär går du vidare och klickar på knappen ”Publicera”. Sedan kan du kopiera formulärets krótki kod för att bädda in det i ditt inlägg eller på din sida.

WP Simple Pay's shortcode

I WordPress innehållsredigerare behöver du bara klicka på ”+”-knappen och välja blocket ”Krótki kod”.

Därefter kan du klistra in formulärets krótki kod i textområdet.

Adding a shortcode block in Gutenberg

Observera att WP Simple Pay skapar ditt betalningsformulär i testläge som standard. Det innebär att du inte kan ta emot betalningar från besökare ännu.

För att poprawka detta, låt oss navigera till WP Simple Pay ” Betalningsformulär i WordPress kokpit. Sedan kan du hålla muspekaren över det formulär du just skapat och klicka på ”Redigera” när det visas.

Editing WP Simple Pay form

I den här panelen vill du gå till avsnittet ”Betalningar”.

Slutligen kan du klicka på alternativknappen ”Live Mode” och sedan på ”Update”.

Setting WP Simple Pay form to live mode

Och det är så du bäddar in ett WP Simple Pay-formulär och börjar ta emot betalningar från din publik.

Så här ser det ut på vår demosajt:

Buy Me a Coffee WP Simple Pay button on a live website

8. Så här bäddar du in Formidable-formulär i WordPress

Formidable Forms är ett utmärkt verktyg för att skapa avancerade formulär, t.ex. en kalkylator för bolån, bilbetalning eller livförsäkring. Det innehåller över 225 formulärmallar som du kan använda för din WordPress-webbplats.

För detaljer om hur man gör ett formulär med Formidable Forms kan du se vår fullständiga Formidable Forms-recension.

Formidable Forms gör det superenkelt att placera dina formulär på valfri sida eller inlägg. När du är klar med att skapa ditt formulär kan du klicka på knappen ”Bädda in” i formulärbyggaren.

Formidable Forms' Embed button

Då öppnas ett popup-fönster där du kan välja var formuläret ska läggas till. Det finns 3 alternativ: ”Välj befintlig sida”, ”Skapa ny sida” och ”Wstawić manuellt”.

Om du väljer alternativet ”Wstawić manuellt” kommer du att behöva hantera en del kod. Detta kan vara lite skrämmande för nybörjare, så vi rekommenderar inte det.

I den här poradniken väljer vi ”Välj befintlig sida”.

Formidable Forms' Embed form options

Därefter visas en annan popup-fråga.

Här vill du öppna rullgardinsmenyn och välja en sida. Vi har till exempel valt att bädda in formuläret på vår demosajts ”Hem”-sida.

Choosing a page to embed Formidable Forms

När du har valt sida går du vidare och klickar på knappen ”Wstawić form”.

Detta öppnar sidans blockredigerare och du bör se att formuläret redan är inbäddat på sidan.

Formidable Forms embedded in the block editor

Nu är du redo att uppdatera sidan.

Gå vidare och tryck på knappen ”Spara”.

Så här ser det ut på vår demosajt:

Formidable Forms on a live website

9. Så här bäddar du in Gravity-formulär i WordPress

Gravity Forms är ett kraftfullt plugin för formulärbyggare för WordPress, men här är haken – det är endast premium.

Denna formulärbyggare har ett brett utbud av funktioner och anpassningsalternativ. Det låter dig skapa många typer av formulär, till exempel enkäter, frågesporter, registreringar och beställningsformulär.

Om du vill skapa ett formulär med Gravity Forms måste du köpa insticksprogrammet från Gravity Forms webbplats.

Gravity Forms homepage

Sedan kan du installera och aktivera det på din webbplats. Om du behöver hjälp kan du läsa vår przewodnik om hur du installerar ett WordPress-plugin.

Efter aktivering ska du navigera till Gravity Forms ” Nytt formulär i din kokpit i WordPress och klicka på ”Lägg till nytt”.

Creating a new form with Gravity Forms

På nästa skärm väljer du en formulärmall.

Det är ingen brådska – du kan utforska det här popup-fönstret för att hitta den mall du vill använda. När du har hittat den håller du bara muspekaren över mallen och klickar på knappen ”Använd mall”.

The Use Template button in Gravity Forms

Därefter uppmanas du att namnge formuläret och skriva en kort beskrivning av formuläret.

Du kan använda följande bild som exempel:

Form name and description examples

Gå vidare och klicka på ”Använd mall” igen för att börja bygga formuläret.

Detta öppnar Gravity Forms dra-och-släpp-byggare, där du kan anpassa ditt formulär med hjälp av fälten till höger.

Gravity Forms' form builder

När formuläret är klart kan du klicka på knappen ”Spara formulär” för att kontrollera att du har sparat alla ändringar.

Gå sedan vidare och klicka på ”Bädda in”.

Detta öppnar 3 alternativ för att bädda in ditt Gravity Forms-formulär – på en befintlig sida, en ny sida eller en metod med krótki kod för personer som använder den klassiska redigeraren.

Embedding Gravity Forms

I den här poradniken visar vi dig hur du bäddar in Gravity Forms på en befintlig webbsida.

Härifrån väljer vi alternativknappen ”Post”. Sedan kan du öppna rullgardinsmenyn för att välja ett publicerat inlägg på din WordPress-webbplats.

Embedding Gravity Forms into an existing post

Gå vidare och klicka på knappen ”Wstawić Form”.

Du kommer då att omdirigeras till sidans innehållsredigerare, där du uppmanas att lägga till blocket ”Form”. Gå vidare och klicka på det.

The Gravity Forms block to add to content editor

Gravity Forms kommer sedan att lägga till det formulär du just skapade i inlägget.

Du kanske också märker att ”Formulärets titel” och ”Formulärets beskrivning” ingår som standard.

Gravity Forms includes title and descriptions by default

Om du tror att allt är klart är det dags att trycka på ”Spara”-knappen.

Och det är allt – du har skapat och bäddat in ett Gravity Forms-formulär på din webbplats.

Gravity Forms on a live website

10. Så här bäddar du in Microsoft-formulär i WordPress

Vissa människor kanske vill använda Microsoft Forms för att skapa formulär eftersom det är ett verktyg som de redan känner till tack vare sitt Office 365-konto. Det integreras också automatiskt med andra Microsoft-produkter som Excel, vilket gör datainsamling och hantering enklare.

Microsoft Forms erbjuder inbyggda alternativ för att skapa enkäter, frågesporter och omröstningar. Du kan sedan enkelt bädda in Microsoft 365-formulär i WordPress genom att kopiera formulärets inbäddningskod och lägga till den på din WordPress-webbplats.

Först skapar du ditt formulär med hjälp av Microsoft Forms i ditt Office 365-konto.

Från Office 365-hemsidan klickar vi på ”Logga in” för att komma igång.

Signing in to Ms 365

När du har loggat in kan du klicka på menyikonen längst upp till vänster på sidan.

Sedan ska du leta upp ”Forms” och klicka på det.

Ms Forms

Detta öppnar mallgalleriet i en ny karta. Du kan sedan välja de formulär som du vill bygga.

Microsoft Forms har 4 formulär att välja mellan – enkät, frågesport, inbjudan och registrering. För den här poradniken väljer vi alternativet ”Inbjudan”. Låt oss klicka på det.

Choosing form type

Microsoft Forms-redigeraren öppnas i en ny karta. Härifrån är det första du ska göra att välja en mall.

Du kan utforska mallalternativen i den vänstra panelen. Eftersom vi skapar ett inbjudningsformulär har vi 7 färdiga mallar för olika ändamål.

I den här poradniken använder vi mallen för bröllopsinbjudan. Så här ser standardmallen ut i redigeraren:

Wedding invitation form

Om du bläddrar ner i den högra panelen hittar du de standardfält som den här mallen erbjuder.

Den här mallen har 4 förinställda fält för användarnas namn, antal gäster, matallergier och e-postadresser.

Låt oss säga att du vill lägga till fler frågor. I så fall kan du klicka på knappen ”+ Wstawić ny fråga” och välja frågetyp, till exempel ”Datum”, ”Betyg”, ”Text” eller andra.

Om du vill redigera de befintliga klickar du bara på en, så visas anpassningsalternativen.

Editing a field

Om du vill ändra utseendet kan du klicka på palettikonen.

Härifrån kan du ändra formulärets layout och bakgrundsbild.

Styling wedding invitation form

Du kan sedan växla till kartan med inställningar genom att klicka på kugghjulsikonen.

Microsoft Forms har redan konfigurerat vissa grundläggande inställningar.

Men du kanske vill aktivera ”Slutdatum” för att hjälpa dig att strategiskt planera din bröllopsdag baserat på svar och ”Få e-postmeddelande om varje svar” så att du har säkerhetskopieringsdata för att förhindra att svaret går förlorat.

Om du vill kan du också redigera det förinställda bekräftelsemeddelandet.

Configuring wedding invitation form

När formuläret är klart är det dags att starta det.

I formulärbyggaren klickar vi på knappen ”Samla in svar”.

Collect responses button

I popup-fönstret som visas kan du klicka på ikonen ”</>” eller ”embed”.

Du bör nu se den krótki kod som du lägger till på din webbplats. Gå vidare och klicka på ”Kopiera”.

Copying MS Forms shortcode

Nu kan du klistra in den här koden i ett inlägg eller på en sida med hjälp av blocket ”Anpassad HTML”.

I WordPress innehållsredigerare klickar du helt enkelt på ”+”-knappen för att lägga till blocket. Sedan kan du använda sökfältet för att leta efter blocket ”Anpassad HTML”.

Gå vidare och klicka på det för att lägga till blocket i innehållsredigeraren.

Adding custom HTML block

Härifrån går du vidare och klistrar in Microsoft Forms ’krótki kod till textområdet.

Oroa dig inte om du inte ser någon förhandsgranskning i din editor; krótki koden fungerar alldeles utmärkt.

Embedding Ms Forms shortcode

Nu kan du trycka på knappen ”Publicera” eller ”Uppdatera” för att göra det live.

Så här ser det ut på vår demosajt:

Microsoft Forms on a live website

11. Så här bäddar du in HTML-formulär i WordPress

HTML-formulär är vanligtvis handkodade, så du har inte en dra-och-släpp-redigerare för att redigera ditt formulär.

Lyckligtvis finns det formulärplugins som gör det lättare att ställa in HTML-formulär. Ett av de bästa alternativen är HTML Forms-pluginet. Detta plugin är utmärkt för att ställa in enkla kontaktformulär som hjälper dig att samla in information från besökare.

The form code editor in HTML Forms

Det bästa är att du inte behöver veta hur man kodar för att använda HTML Forms.

Det är enkelt att lägga till ett nytt fält. Välj bara ett av de tillgängliga alternativen, så kommer HTML Forms att be dig att justera fältets data.

Adding a dropdown field in HTML Forms

När du har klickat på knappen ”Lägg till fält i formuläret” konverterar HTML Forms data till ett HTML-fragment kodu och placerar det i området ”Formulärkod”.

Och det är allt som behövs! Glöm inte att klicka på knappen ”Spara ändringar” för att spara dina framsteg.

Nu är det dags att publicera formuläret.

Med HTML-formulär kan du enkelt bädda in ditt formulär i ett inlägg, en sida eller ett widgetområde. För att göra detta behöver du formulärets krótki kod. Du hittar formulärets krótki kod längst upp i panelen ”Redigera formulär”.

HTML Forms' shortcode

Låt oss kopiera den här krótki koden till urklippet.

Du kan sedan öppna en sida eller ett inlägg där du vill visa HTML-formuläret. I den här poradniken lägger vi till formuläret på vår sida ”Kontakt”.

När du är i blockredigeraren klickar du bara på ”+” -knappen och söker sedan efter ”Anpassad HTML.” Gå vidare och klicka på den för att lägga till den på din sida.

The custom HTML block

Du kan sedan klistra in krótki koden i blocket ”Custom HTML”.

WordPress blockredigerare visar dig inte formuläret. Men oroa dig inte. Det kommer att dyka upp på sidan när du sparar den.

Adding HTML Forms shortcode

Så låt oss trycka på ”Spara”-knappen för att se den i działanie.

Så här kan det se ut på din webbplats:

HTML Forms on a live website

För detaljerade instruktioner kan du kolla in vår przewodnik om hur du lägger till HTML-formulär i WordPress.

Vanliga frågor om inbäddning av WordPress-formulär

Har du frågor om inbäddning av formulär i WordPress? Här är några snabba svar som hjälper dig att komma igång.

Kan du bädda in formulär i WordPress?

Ja, du kan enkelt bädda in formulär i WordPress med hjälp av olika plugins, inklusive WPForms, som är den bästa mångsidiga formulärbyggaren.

Hur installerar jag ett formulär i WordPress?

Först måste du gå till Plugins Lägg till nytt från din WordPress admin. Nästa steg är att hitta ett formulärplugin som du väljer och sedan helt enkelt installera och aktivera det. När du är klar kommer du att använda pluginet för att skapa ett formulär och bädda in det på din webbplats med hjälp av en krótki kod eller ett block.

Hur ställer man in WPForms i WordPress?

För att konfigurera WPForms måste du först installera och aktivera WPForms-pluginet. Därefter kan du skapa ett nytt formulär med hjälp av dra-och-släpp-byggaren och bädda in formuläret på din webbplats med hjälp av en krótki kod eller pluginets block.

Hur skapar man ett formulär i WordPress utan plugin?

Att skapa ett formulär i WordPress utan ett plugin kräver anpassad HTML och PHP. Du kan manuellt lägga till formulärets HTML på din sida och hantera inskickningar med anpassad PHP i ditt temas functions.php-fil. Eftersom detta inte är nybörjarvänligt rekommenderar vi att du använder en formulärbyggare istället.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du bäddar in formulär i WordPress. Därefter kanske du vill kolla in våra andra przewodniker om hur du ställer in WordPress-formulärspårning i Google Analytics och hur du spårar och minskar övergivna formulär.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post Hur man bäddar in formulär i WordPress (Ultimat przewodnik för nybörjare) first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/sv/beginners-guide/how-to-embed-forms-in-wordpress/feed/ 1
11 bästa lösningarna för e-handel som växer i popularitet 2024 https://www.wpbeginner.com/sv/showcase/best-ecommerce-solutions-growing-in-popularity/ https://www.wpbeginner.com/sv/showcase/best-ecommerce-solutions-growing-in-popularity/#comments Thu, 24 Oct 2024 10:00:00 +0000 https://www.wpbeginner.com/?p=280692 Over the last few years, we have tried out several different eCommerce solutions for our online projects. While we like using Easy Digital Downloads to sell plugins and other software, we also know that there are plenty of other options for online stores. That’s why… Läs mer om »

The post 11 bästa lösningarna för e-handel som växer i popularitet 2024 first appeared on WPBeginner.

]]>
Over the last few years, we have tried out several different eCommerce solutions for our online projects. While we like using Easy Digital Downloads to sell plugins and other software, we also know that there are plenty of other options for online stores.

That’s why we have done the research and investigated all the popular eCommerce solutions for everything from selling a single product online to full-blown online stores and membership websites.

In this article, we will share some of the best and most popular eCommerce solutions we have explored.

Best eCommerce Solutions

Top 3 eCommerce Platforms in 2024

🥇First place

WooCommerce

WooCommerce logo

Price: Free plugin with free/paid extensions

Best for: Selling physical and digital products

Highly scalable & customizable, free to set up

Read more »

🥈Second place

EDD

EDD logo

Price: Free and paid plans (start at $99.50/yr)

Best for: Selling digital downloads

Easy setup, sell unlimited products

Read more »

🥉Third place

MemberPress

MemberPress logo

Price: Paid plans (start at $179.50/yr)

Best for: Paid memberships & online courses

Powerful membership features, course creation

Read more »

How We Tested and Reviewed the Best eCommerce Solutions

While this article will talk about the best eCommerce solutions, we know there’s more to consider than just how many stores use a particular platform.

We want to introduce you to some popular eCommerce platforms that perfectly balance ease of use and affordability for your business needs.

Here’s how we approached testing and reviewing these platforms:

  • Value for money: Budget is a big concern for businesses, especially small startups. We looked at each platform’s pricing structure, including which features are in the starting plan, what upgrades unlock, and any additional fees that might add up.
  • Ease of use: Many online store owners are self-made entrepreneurs who might be new to the technical side of things. So, we prioritized platforms that make it easy to sign up, build your online store, publish it, and manage day-to-day operations.
  • Real-world experience: Some of the platforms we will discuss are the ones we use here at WPBeginner. This means we can confidently recommend them based on our own experience. For others, we invested our time and resources to test them.
  • Customer reviews: We don’t just take a platform’s word for it. We delve into user reviews to see what actual customers are experiencing. We then compare these reviews to our own testing results to ensure the platform delivers on its promises.
  • Market popularity: While we don’t solely rely on popularity, it does hold some weight. We used BuiltWith, a website technology tracker. It helped us get a sense of each platform’s current market share by analyzing the number of active websites built on it.

Why Trust WPBeginner?

At WPBeginner, we’re a team of passionate WordPress experts with over 16 years of experience under our belts. This experience extends far beyond WordPress itself. We’re well-versed in the world of eCommerce, digital marketing, and all things online business.

Want to learn more about our testing process and editorial practices? Read our editorial process to learn more.

1. WooCommerce (Best Overall eCommerce Solution)

WooCommerce

We’ve experimented with many self-hosted eCommerce solutions over the years, but WooCommerce remains our favorite for selling physical products through a WordPress website.

There are several reasons why WooCommerce is a great fit for small businesses. First and foremost, it’s completely free to set up and use. A handy setup wizard guides you through the process, making it easy to launch your WooCommerce store quickly.

Managing your store inventory using WooCommerce

But what truly sets WooCommerce apart is its incredible extensibility. Unlike hosted eCommerce platforms that bundle everything in, WooCommerce allows you to choose the features you need.

However, the extensive plugin selection can also be a double-edged sword. Finding the right plugins to achieve your desired functionality can be time-consuming.

Live website usage stats: 5,917,453+

Pros of WooCommerce:

  • Free to set up and use
  • Highly scalable with tons of WooCommerce extensions available
  • Sample products and pre-installed themes for easy exploration
  • Built-in analytics to track your store’s performance

Cons of WooCommerce:

  • The sheer number of extensions can feel overwhelming for complete beginners.

Pricing: WooCommerce itself is a free plugin. Depending on the features, paid themes and extensions range from $1 to hundreds of dollars. WooCommerce hosting services typically start around $4 per month.

We recommend SiteGround, starting at $3.99 per month, and Bluehost, starting at $9.95 per month.

Why we chose WooCommerce: WooCommerce is the best overall eCommerce solution due to its affordability, ease of use, and unmatched scalability.

Get to know more about this eCommerce plugin in our WooCommerce review.

2. Easy Digital Downloads (Best for Digital Downloads)

Easy Digital Downloads Website

Easy Digital Downloads (EDD) is our go-to solution for selling digital products like ebooks, PDFs, software, audio files, and more. In fact, it’s the very platform we use across our companies to sell our WordPress plugins and manage customer orders.

Like WooCommerce, EDD boasts an easy-to-use setup wizard that streamlines the launch process for your online store. You can quickly configure your business details, payment gateways, receipts, and product listings – all within a user-friendly interface.

EDD's built-in digital download logs

EDD comes in both free and paid versions. The free plan is great if you’re just starting out with a few products. It includes all the essentials, like a shopping cart, built-in integration with popular payment gateways like PayPal and Stripe, order history, and customer invoicing.

However, the free version lacks features like recurring payments, discount code generators, and software licensing. These features can be crucial for businesses offering subscription models or downloadable software.

Live website usage stats: 50,000+

Pros of Easy Digital Downloads:

  • Easy setup with a user-friendly interface
  • Sell unlimited products with no transaction fees
  • Free trial feature available for customers to try the products
  • Mobile app to manage your store on the go

Cons of Easy Digital Downloads:

  • It is limited to selling digital products only. If you plan to expand to physical products in the future, you’ll need to consider a different eCommerce platform or upgrade to EDD’s paid plans.

Pricing: Free version available. Paid plans start at $99.50 per year and go up to $499.50 per year. The starting paid plan allows use on 1 website, integrates with email marketing tools, and offers reporting features, custom discount codes, and support for additional payment gateways.

We recommend using SiteGround’s managed EDD Hosting, which starts at $3.99 per month.

Why we chose Easy Digital Downloads: EDD’s free version offers a fantastic starting point for beginners, while the paid plans provide powerful features for growing businesses.

Feel free to learn more about EDD in our Easy Digital Downloads review.

3. MemberPress (Best for Paid Memberships)

MemberPress website

MemberPress is the perfect eCommerce solution if you are running a membership-based business model. This includes online courses, coaching services, or educational websites where you offer premium content in exchange for a membership fee.

We use MemberPress ourselves to power the free WPBeginner video membership site, which helps us grow our email list.

While our membership site is free, MemberPress is highly capable of building monetized membership sites. It provides a range of features to support your business, including pay-per-view content, membership level upgrades, discount coupons, and more.

Restricting content based on membership level

One thing to consider is that MemberPress offers limited payment gateways, integrating only with Stripe, PayPal, and Authorize.net. This might be a drawback if your business requires a wider range of payment processing options.

Live website usage stats: 23,032+

Pros of MemberPress:

  • Unlimited memberships, members, access rules, and restricted content
  • Easy-to-use member dashboard for your customers
  • Extensive library of add-ons to tailor the membership site to your needs
  • No transaction fees on top of your chosen payment gateway’s fees

Cons of MemberPress:

  • Limited payment gateway options

Pricing: Starts at $179.50 per year and goes up to $499.50 per year. The basic plan allows use on 1 website with unlimited members and courses.

Also, feel free to use our MemberPress coupon code to save up to 50% off your first purchase.

Why we chose MemberPress: MemberPress’ ease of use, powerful course creation, and focus on membership site features make it a great option for businesses that want to offer exclusive content and subscriptions.

Read more about the membership plugin in our MemberPress review.

4. WP Simple Pay (Best for Selling Single Products/Services)

WP Simple Pay

If you’re looking to sell a single product or service through your website, then a full-blown eCommerce software with all its features might be overkill. In fact, a complex platform could slow down your website and ruin the customer experience.

For situations like these, a payment processing plugin like WP Simple Pay is a great alternative. WP Simple Pay integrates seamlessly with Stripe, allowing you to create secure payment forms directly on your WordPress website without needing a separate shopping cart.

Despite its focus on simplicity, WP Simple Pay offers some powerful features. We’ve written extensively about the plugin’s capabilities, like one-click checkout (perfect for impulse purchases) and even buy-now-pay-later payment plans to attract a wider audience.

However, it’s important to remember that WP Simple Pay isn’t ideal for businesses with plans to grow a large product catalog. Order management can soon be tiring if you only rely on this plugin.

Live website usage stats: 14,000+

Pros of WP Simple Pay:

  • Accepts various payment methods through Stripe, including credit cards, Apple Pay, Google Pay, QR codes, and Alipay
  • Option to pass on payment processing fees to customers, increasing your profitability
  • Drag-and-drop form builder with customization options for your payment forms
  • Secure payments with built-in PCI compliance (no additional setup needed)

Cons of WP Simple Pay:

  • Not suitable for managing large online stores with a vast product inventory

Pricing: Free plan available. Paid plans start at $49.50 per year and go up to $299.50 per year. All plans include unlimited payment forms, unlimited transactions, and no monthly fees on top of Stripe’s processing fees.

You can also use our WP Simple Pay coupon code to get 50% off.

Why we chose WP Simple Pay: It provides a user-friendly and secure way to accept payments without the complexity of a full eCommerce platform, making it great for small online stores.

Learn more about the plugin in our WP Simple Pay review.

5. Shopify (All-in-One Hosted eCommerce Platform)

Shopify's website

Shopify is the most popular cloud-based eCommerce website builder, and for good reason. It is a user-friendly, all-in-one solution that streamlines the process of launching and managing your eCommerce store.

Firstly, Shopify eliminates the hassle of finding separate web hosting and domain name providers. It provides everything you need to get your store up and running, including built-in hosting.

We were also impressed by the fact that it offers abandoned cart recovery in all plans, a valuable tool often missing in starter plans from other platforms.

One thing we’re not a fan of is that transaction fees apply across all plans for third-party payment providers besides Shopify Payments (which isn’t available in all countries). They range from 0.2% to 2% per transaction, with lower fees associated with higher-tier plans.

Live website usage stats: 4,457,121+

Pros of Shopify:

  • Simple setup with a drag-and-drop eCommerce website builder, a vast theme collection, and an easy-to-use backend
  • Large app store with over 8,000 third-party apps
  • 24/7 live chat customer support ensures you have help whenever you need it
  • Localized selling features allow you to customize product pricing by market and translate your storefront into different languages

Cons of Shopify:

  • Transaction fees can add up quickly, especially if you don’t use Shopify Payments or exceed the free listing limit for displaying products on third-party marketplaces

Pricing: Plans range from $19 per month for basic stores to $2,300 per month for enterprise-level solutions. A $5 starter plan is also available for simple online stores or for selling on social media platforms.

Shopify offers a free 3-day trial and $1 for the rest of your first month.

Why we chose Shopify: Shopify is a fantastic option for beginners and growing eCommerce businesses due to its ease of use, comprehensive features, and all-in-one approach.

6. WPForms (Best for Services/Quote-Based Businesses)

WPForms

WPForms is a powerful form builder plugin for WordPress that allows you to create custom forms for various purposes. These include collecting service inquiries and accepting payments for those services. Here at WPBeginner, we use WPForms to build all sorts of forms for our projects.

What makes WPForms so user-friendly is its extensive library of over 1800 pre-made form templates. These templates cater to a wide range of businesses, including real estate agents, t-shirt designers, and hotel bookings.

One of the highlights of WPForms’ is its built-in reporting tool. This tool provides valuable insights into your sales performance, allowing you to track total payments, sales, refunds, and even new subscriptions (if applicable).

Plus, WPForms integrates with popular payment gateways like PayPal Commerce, Stripe, Square, and Authorize.net for secure transactions. While these are some of the most common options, WPForms offers fewer payment integrations compared to other solutions.

Live website usage stats: 6,000,000+

Pros of WPForms:

  • Extensive library of pre-made form templates for various business types
  • User-friendly drag-and-drop form builder for easy customization
  • Built-in payment reporting tool to track sales performance

Cons of WPForms:

  • Limited payment options compared to some other solutions
  • Not ideal for managing large product inventories due to its limited eCommerce features

Pricing: Free plan available. Plans start at $49.50 per year and go up to $299.50 per year. The most affordable plan allows use on 1 website with unlimited forms, submissions, and users.

You can also use our WPForms coupon code to get up to 50% off.

Why we chose WPForms: Overall, this form plugin is great for service-based businesses and those that require quote requests or upfront payments.

To learn more, read our full WPForms review.

7. Squarespace (For Creative Businesses)

Squarespace

Squarespace isn’t just a website builder – it also offers built-in eCommerce functionality. It’s renowned for its stunning, minimalist website design templates, which cater to a wide range of industries.

This is why we believe Squarespace is a perfect fit for creative and design businesses looking to establish a beautiful online presence and sell their products.

As an eCommerce platform, Squarespace lets you sell digital and physical products. It also integrates with various tools to run an eCommerce website. For instance, you can connect with FedEx for reliable shipping and TaxJar to automate sales tax calculations.

However, its pricing structure is a bit confusing. Features like subscription products and product reviews are only available on higher-tier plans, while other platforms might offer these features as standard or through extensions.

Live website usage stats: 3,364,244+

Pros of Squarespace:

  • Eye-catching, pre-designed website templates and a user-friendly drag-and-drop website builder
  • Integrates with various tools for online selling, including payment processors, shipping solutions, and dropshipping options
  • Sell unlimited products through your online store

Cons of Squarespace:

  • Essential eCommerce features are limited on lower-tier plans, requiring upgrades to access them (unlike some competitors)
  • A 3% transaction fee applies to the most affordable plan for selling online

Pricing: Plans start at $16 per month and go up to $52 per month. The Business plan, which allows online selling, costs $23 per month and includes features like selling content memberships, products, services, and accepting payments.

Why we chose Squarespace: Creatives can go with Squarespace to easily build a beautiful eCommerce site with stunning templates, a smooth website builder, and integrations with popular sales tools.

8. Wix (For Niche Businesses With Specific Needs)

Wix website builder

Wix is a website builder that offers built-in eCommerce functionalities similar to other hosted eCommerce platforms. However, Wix goes a step further by providing industry-specific features that can cater to unique business needs.

For instance, if you manage a hotel, then Wix offers features specifically designed to showcase your property and manage online bookings. These features include tools to display rental listings with customizable rules and availability settings.

While Wix boasts a comprehensive set of features, there’s a potential drawback to be aware of. In our experience, the platform itself can be a bit slow, which could impact the user experience. Some Wix users have also reported poor website loading times.

Live website usage stats: 3,099,866+

Pros of Wix:

  • Industry-specific features catering to niche businesses (e.g., vacation rentals, event ticketing, digital art)
  • Ability to sell up to 50,000 products
  • Supports pre-orders and sales channels like social media and marketplaces
  • Flexible drag-and-drop website builder with a wide variety of industry-specific templates

Cons of Wix:

Pricing: Plans range from $17 per month to $159 per month. There’s also a free plan available, but it has limited functionality.

Why we chose Wix: Overall, we recommend Wix for niche businesses that require specific functionalities beyond what basic eCommerce platforms offer.

9. BigCommerce (Premium Solution for Enterprises)

BigCommerce website

BigCommerce caters to businesses of all sizes, but it truly shines for enterprises with high-volume sales and complex needs.

First, BigCommerce offers unlimited product listings, file storage, bandwidth, and staff accounts across all plans. This lets you create a massive online store with extensive product catalogs, add high-quality product images, and manage teams without worrying about limitations.

Additionally, BigCommerce supports multi-storefronts. This enables you to manage separate brands or regional stores under one platform.

That being said, BigCommerce has sales limits associated with each plan. If your online sales exceed the limit for your current plan, you’ll need to upgrade to a higher tier.

Live website usage stats: 40,662+

Pros of BigCommerce:

  • Unlimited products, file storage, bandwidth, and staff accounts in all plans
  • Multi-currency support for international selling
  • Real-time shipping quotes for customer convenience
  • Multi-channel selling capabilities (Amazon, eBay, Walmart, Facebook, Instagram, POS systems)

Cons of BigCommerce:

  • Online sales limits on each plan (upgrade required if exceeded)
  • The drag-and-drop eCommerce website builder is not the easiest to use

Pricing: Plans range from $29 per month to $299 per month, with no additional transaction fees. The lowest plan is capped at $50,000 in annual sales. A free 15-day trial is available.

Why we chose BigCommerce: Scalability, unlimited resources, and multi-channel selling features make BigCommerce an excellent choice for businesses looking to scale fast.

10. Weebly (Freemium eCommerce Platform)

Weebly

Weebly stands out as the best free eCommerce platform if you are just starting out and budget is a major concern. The free plan offers a surprising amount of functionality, including selling unlimited products, managing inventory, and even calculating sales tax automatically.

One interesting feature we found is the Quick Shop function. This allows you to create a streamlined checkout process in your online shopping experience. This is perfect for situations where you only have a single product or service to sell.

However, it’s important to understand the limitations of Weebly’s free plan. For instance, you cannot connect your online store to a custom domain name, meaning your website address won’t be as professional-looking.

Additionally, selling digital products is not allowed on the free plan.

Live website usage stats: 110,243+

Pros of Weebly:

  • Generous free plan with unlimited products, shopping cart, inventory management, and basic eCommerce marketing tools.
  • Free SSL certificate for secure online transactions.
  • Affordable paid plans compared to other hosted eCommerce platforms.

Cons of Weebly:

  • Free plan limitations (no custom domain name and restricted to selling digital products)
  • May feel less scalable for complex online stores

Pricing: Free plan available. Paid plans start at $10 per month and go up to $26 per month. All plans include a free SSL certificate, the ability to add custom code, Quick Shop functionality, and unlimited products.

Why we chose Weebly: If you want to start a simple online store on a budget, then Weebly is a great place to do it.

11. Magento (Open-Source Solution for Enterprises)

Magento Open Source

Magento is a powerful open-source eCommerce platform owned by Adobe Commerce. Unlike hosted solutions, Magento offers extensive customization capabilities for tailoring your online store to your exact needs.

Similar to WordPress plugins, Magento extensions offer a wide range of features, from customer support and security enhancements to advanced shipping options and marketing tools. These extensions can add significant value to your store but often come with additional costs.

With all this in mind, Magento requires significant technical expertise to set up and maintain. Additionally, it demands robust hosting resources, typically on a VPS (Virtual Private Server). For business owners looking for a managed solution, it’s better to look elsewhere.

Live website usage stats: 124,071+

Pros of Magento:

  • Open-source software, free to download and use
  • A large and active community forum for support
  • Extensive library of extensions to enhance store functionality

Cons of Magento:

  • Requires significant technical expertise for setup, maintenance, and security

Why we chose Magento: With all things considered, we recommend Magento for established businesses with the technical resources and development expertise to manage a complex platform.

Must-Use Tools to Optimize Your Online Store

Now that you are familiar with the most popular eCommerce platforms, here are some must-use tools to help you optimize your store and increase conversions.

1. FunnelKit

FunnelKit cart

FunnelKit is a sales funnel builder specifically designed to improve your eCommerce website’s conversion rate. By creating targeted sales funnels, you can guide your website visitors through a specific journey, leading them toward making a purchase.

Besides the sales funnel builder, you can also use FunnelKit Automations. This tool lets you set up automated marketing campaigns triggered by your visitors’ behavior. For instance, you can automatically send emails to follow up with customers after they make a purchase or promote new products.

While FunneKit offers a free version, it’s very limited. For example, it’s not possible to set up order bumps to offer users additional products to increase average order value. That’s why we recommend investing in a paid version.

Pros of FunnelKit:

  • Pre-made design templates for essential funnel elements
  • Dynamic offers can personalize upsell recommendations based on customer shopping carts
  • Split testing functionality to optimize your funnels for better conversions

Cons of FunnelKit:

  • Free plan has limitations

Pricing: Plans range from $99.5 per year to $399 per year. The most affordable plan allows use on 1 website and includes over 20 checkout templates, 9 checkout optimization features, and an abandoned cart recovery tool.

Why we chose FunnelKit: With its pre-made templates, automation features, and split testing capabilities, FunnelKit makes it easy to optimize your conversion rate and increase your sales.

Feel free to read our FunnelKit review to learn more about it.

2. OptinMonster

OptinMonster

OptinMonster is a powerful lead-generation plugin designed to help you capture visitor email addresses and grow your email list.

With this tool, you can create targeted popups, opt-in forms, and notification banners to encourage users to subscribe and stay engaged with your brand. This allows you to nurture leads, promote new products and special offers, and ultimately drive more sales.

One of OptinMonster’s standout features is its advanced targeting capabilities. For instance, you can target visitors based on their exit intent (showing a popup as they try to leave your website) or tailor product recommendations based on their past purchases.

The one downside to OptinMonster is there is no free plan, though you can use our coupon code to get 10% off.

Pros of OptinMonster:

  • Extensive library of pre-made templates for various campaigns and seasons
  • User-friendly drag-and-drop builder for easy customization
  • A/B testing functionality to identify your most effective marketing strategies

Cons of OptinMonster:

  • No free plan available

Pricing: Plans range from $5.97 per month to $39.97 per month. Even the most affordable plan offers unlimited campaigns and unlimited subscribers, making it a cost-effective solution for growing your email list.

Why we chose OptinMonster: The vast template library, drag-and-drop builder, and advanced targeting features make OptinMonster a valuable tool for boosting conversions.

For more information, check out our OptinMonster review.

3. Advanced Coupons

Is Advanced Coupons the right coupon plugin for your WooCommerce store or WordPress website?

If you use WooCommerce as your eCommerce platform, then it already offers a built-in discount feature. However, for businesses seeking more advanced coupon features, Advanced Coupons is a powerful plugin worth considering.

This plugin lets you create various coupon types, including ‘Buy One Get One’ (BOGO) offers, coupon codes that can be shared through unique URLs, scheduled coupons that activate or deactivate at specific times, and even automatically applied coupons at checkout.

That being said, Advanced Coupons is best if you plan on offering various types of discounts. Otherwise, the plugin can feel like overkill.

Pros of Advanced Coupons:

  • Wide variety of coupon options: one-time discounts, BOGO deals, percentage or fixed-amount discounts, free shipping coupons, and more
  • Set usage restrictions and cart conditions to control how coupons are applied
  • Schedule coupons in advance for strategic promotions and sales events

Cons of Advanced Coupons:

  • May be excessive if you only require basic discount functionalities

Pricing: Advanced Coupons offers tiered plans starting from $59.50 per year to $149.50 per year.

However, we recommend considering the all-access bundle priced at $249.50 per year. This bundle includes Advanced Coupons, the Loyalty Program plugin, and the Advanced Gift Cards plugin. This is a complete kit to incentivize repeat business and increase customer loyalty.

You can also use our coupon code to get up to 50% off of your first purchase.

Why we chose Advanced Coupons: The plugin offers various coupon types, the ability to set rules for coupons, and coupon scheduling features. All these features let you run your promotional campaigns much more effectively.

You can read our Advanced Coupons review for more details.

What Is the Best eCommerce Platform?

Overall, the best eCommerce solution growing in popularity is WooCommerce. It has a user-friendly interface for managing products, inventory, and orders, making it perfect for first-time business owners.

Plus, it integrates with the extensive WordPress plugin ecosystem. This gives you countless options for marketing, payments, shipping, and more for your online store.

Alternatively, if you specialize in selling digital products like ebooks, software, or courses, then Easy Digital Downloads is the perfect solution. This eCommerce tool streamlines the process of managing digital downloads, protecting your files, and delivering them securely to customers.

If you offer exclusive content, courses, or communities, then MemberPress allows you to create paid memberships with tiered access levels. This gives you the flexibility to create premium content subscriptions and generate recurring revenue.

eCommerce Solutions: FAQs

Now that we’ve explored some popular eCommerce platforms and tools, let’s answer some frequently asked questions.

What is an eCommerce solution?

An eCommerce solution is a platform or set of tools for creating and managing an online store. It includes features for adding and managing products, processing payments securely, fulfilling orders, and tracking inventory.

What tools can help you generate revenue in an online store?

Several tools can enhance your online store’s revenue generation. Here are a few examples:

  • FunnelKit: This tool helps you create targeted sales funnels that guide visitors toward making a purchase.
  • OptinMonster: This platform allows you to create popups and promotional banners to capture leads and convert website visitors into customers.
  • Advanced Coupons: This plugin for WooCommerce lets you design creative discount campaigns and set up promotions to drive sales.
Is eCommerce dead?

Absolutely not. eCommerce is a thriving industry that continues to experience significant growth. The convenience and variety offered by online shopping have established eCommerce as a major force in retail.

In fact, with the ongoing rise of mobile shopping and social commerce, eCommerce is expected to keep growing in the years to come.

Ultimate Guides to Boost Your Online Store Sales

We hope this article has helped you find the best eCommerce solution that’s growing in popularity. You may also want to check out our article on proven affiliate marketing tips and our expert picks of the best referral program software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclaimer: We evaluated other popular platforms, like PrestaShop and Big Cartel, during our research. However, we decided to focus on the eCommerce solutions covered in this guide because we believe they offer the best value and user experience for a wider range of online businesses.

The post 11 bästa lösningarna för e-handel som växer i popularitet 2024 first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/sv/showcase/best-ecommerce-solutions-growing-in-popularity/feed/ 1
Så här lägger du till Image Hotspots i WordPress (det enkla sättet) https://www.wpbeginner.com/sv/wp-tutorials/how-to-add-image-hotspots-in-wordpress/ https://www.wpbeginner.com/sv/wp-tutorials/how-to-add-image-hotspots-in-wordpress/#comments Wed, 23 Oct 2024 10:00:00 +0000 https://www.wpbeginner.com/sv/opinion/how-to-add-image-hotspots-in-wordpress/ Ibland räcker det inte att bara lägga till bilder och visuella element för att fånga besökarnas uppmärksamhet. Det är där bildhotspots kan komma till undsättning. Dessa klickbara områden kan förvandla en enkel bild till en engagerande och informativ upplevelse för dina besökare. Vi har själva… Läs mer om »

The post Så här lägger du till Image Hotspots i WordPress (det enkla sättet) first appeared on WPBeginner.

]]>
Ibland räcker det inte att bara lägga till bilder och visuella element för att fånga besökarnas uppmärksamhet.

Det är där bildhotspots kan komma till undsättning. Dessa klickbara områden kan förvandla en enkel bild till en engagerande och informativ upplevelse för dina besökare. Vi har själva experimenterat med dem för att visa upp punkter på en karta, tagga teammedlemmar på ett fotografi och lyfta fram produktegenskaper.

Om du undrar hur du gör samma sak har du kommit till rätt ställe. Denna przewodnik visar dig 2 enkla metoder för att skapa en bild-hotspot för din WordPress-webbplats utan någon kod.

How to Add Image Hotspots in WordPress

När ska du lägga till hotspots i dina bilder i WordPress

Imagely hotspots är klickbara punkter som kan förvandla enkla bilder till interaktivt innehåll som besökarna kan utforska. Men när bör du tänka på att lägga till hotspots i dina bilder?

Ett bra tillfälle att använda hotspots är när du vill visa upp olika delar av en produktbild.

Låt oss säga att du säljer en ny telefon. Du kan lägga till hotspots för att peka ut dess kamera, skärm och andra funktioner. Detta hjälper klienci att lära sig mer om produkten utan att läsa långa beskrivningar.

Många heminredningswebbplatser använder också bildhotspots för att lyfta fram produktdetaljerna för artiklar som visas i iscensatta foton.

IKEA's image hotspot example

Hotspots är också utmärkta för att göra infografik och datavisualisering mer engagerande. Istället för att klämma in all information i en bild kan du dölja extra detaljer bakom hotspots. När människor klickar på olika delar av infografiken kan de se mer fakta och siffror.

Om du driver en webbplats för eLearning kan hotspots förbättra användarupplevelsen och göra dina lektioner mer interaktiva. Du kan till exempel lägga till hotspots på en karta så att eleverna kan klicka för att lära sig mer om olika länder eller landmärken.

Med detta i åtanke, låt oss titta på hur du enkelt kan lägga till bildhotspots på din WordPress-webbplats. Vi har kommit fram till 2 metoder, och du kan använda snabblänkarna nedan för att navigera genom artikeln:

Experttips: Har du inte tid eller lust att designa din egen webbplats? Överväg att använda våra professionella tjänster för WordPress-design. Våra expertdesigners kan bygga en fantastisk webbplats till ett överkomligt pris och ge liv åt ditt nästa projekt!

Metod 1: Lägg till Image Hotspots med SeedProd (för landningssidor/anpassade teman)

Den här första metoden använder SeedProd, en drag-och-släpp-sidbyggare, för att lägga till bildhotspots på din WordPress-webbplats. Vi rekommenderar den här metoden om du skapar en anpassad landningssida eller ett anpassat WordPress-tema och vill använda en plattform med ett bildhotspot-block.

Det vi älskar med SeedProd är att de erbjuder över 350 mallar för målsidor och temakit för olika branschkategorier, från onlinebutiker och städtjänster till SaaS-företag. Så det finns ett alternativ för alla typer av webbplatser.

En sak du bör tänka på är att om du bara vill ha en gratis lösning för att skapa bildhotspots, kanske den här metoden inte är något för dig. Detta beror på att SeedProds hotspot-block endast är tillgängligt i de betalda SeedProd-versionerna. I så fall rekommenderar vi att du går med metod 2.

För mer information om pluginets funktioner och prissättning, kolla in vår SeedProd-recension.

När du har köpt en SeedProd-plan kan du ladda ner och installera WordPress-pluginet i ditt obszara administracyjny. Därefter går du till SeedProd ” Inställningar och anger din klucz licencyjny. Du hittar den här informationen på din SeedProd-kontosida.

När du är klar klickar du bara på ”Verifiera nyckel”.

Enter your license key

Efter det, navigera till SeedProd ” Landningssidor.

Klicka sedan på ”Lägg till ny landningssida”.

Adding a new landing page in SeedProd

Du kommer nu att se alla de mallar som SeedProd erbjuder. Det finns alternativ för en wiralowy landningssida för väntelista, en Google-annonslandningssida, en kommande snart-sida och mer.

Se till att bläddra igenom alternativen och förhandsgranska dem ett efter ett så att du kan välja det som bäst passar dina behov.

SeedProd's template library

När du har bestämt dig för en mall är det bara att hålla muspekaren över ditt val.

Klicka sedan på den orangefärgade bockknappen.

Choosing a SeedProd template

Nu visas en ny popup där du ombeds att namnge sidan och wstawić dess URL-slog.

När du har gjort det klickar du på ”Spara och börja redigera sidan”.

Inserting the landing page details in SeedProd

Detta öppnar SeedProd drag-and-drop-redigeraren.

Det fungerar på samma sätt som WordPress blockredigerare, där du kan dra och släppa block på sidan och klicka på dem för att anpassa dem som du vill.

The SeedProd drag-and-drop interface

För att skapa bildhotspots hittar du blocket ”Hotspot ” i den vänstra sidofältet.

Sedan är det bara att dra och släppa den direkt på din sida.

Choosing the SeedProd Hotspot block

Därefter måste du ladda upp den WordPress-bild som du vill lägga till hotspots på.

Du kan göra detta genom att klicka på blocket ”Hotspot” och välja antingen ”Use Your Own Image” eller ”Use a Stock Image” för att välja en bild.

Det första alternativet öppnar mediebiblioteket där du kan välja en befintlig bild eller ladda upp en ny. Om storleken är ganska stor kan du kolla in vår przewodnik om hur du laddar upp stora bilder i WordPress.

Uploading an image to the SeedProd Hotspot block

När du har laddat upp en bild kan du ange en alt-text för att beskriva bilden för sökmotorer och skärmläsningsverktyg.

Du kan också anpassa bildens storlek och justering.

Adding an alt text to the image hotspot in SeedProd

Därefter kan du bläddra nedåt för att börja lägga till dina hotspots.

Det gör du genom att klicka på knappen ”+ Add Hotspot”.

Adding a hotspot to the image in SeedProd

En orange punkt kommer nu att visas på din bild. Du kan justera dess position genom att dra i de horisontella och vertikala orienteringsfälten.

Dessutom kan du wstawić den text som ska visas när en användares markör håller muspekaren över hotspoten.

Customizing the image hotspot settings in SeedProd

När du rör dig nedåt kan du ändra färg på hotspoten.

Klicka bara på inställningarna för ”Färg” för att välja en färg som passar ditt varumärke och din webbplatsdesign.

Changing the hotspot color in SeedProd

Om du fortsätter att skrolla nedåt kan du aktivera reglaget ”Avancerade inställningar”.

Här kan du lägga till en länk i etykietka-texten för din hotspot så att användarna kan omdirigeras till önskad sida.

Enabling the hotspot block's advanced settings in SeedProd

Dessutom kan du välja en anpassad ikon för att ersätta standardcirkelformen.

För att göra detta klickar du bara på knappen ”Välj ikon”.

Replacing the hotspot icon in SeedProd

Ett popup-fönster kommer att visas där du kan välja olika ikoner från SeedProd’s bibliotek. Du kan också välja ikoner från Font Awesome om du behöver fler alternativ.

För att använda en ikon klickar du bara på den.

Choosing an icon for the hotspot in SeedProd

När du har valt en ikon kan du dra i fältet ”Icon Size” för att göra formen mindre eller större, beroende på vad du föredrar.

Du kan sedan upprepa stegen för att skapa fler interaktiva bildhotspots.

Nedan kan du lägga till en animerad effekt till dina bildhotspots. Det finns 2 alternativ: ”Soft Beat” och ”Expandera”.

Adding an animated effect to the hotspot block in SeedProd

Låt oss nu gå ner till avsnittet ”Etykietka”.

Här kan du ändra positionen för etykietka (höger, vänster, ovanför eller under hotspot) och ändra utlösaren.

Om du väljer ”Click” innebär det att etiketterna visas när användaren klickar på hotspoten. Å andra sidan innebär ”Hover” att etiketterna visas när markören håller muspekaren över dem.

Adding a tooltip trigger to the hotspot block in SeedProd

Därefter kan du ändra varaktigheten för etiketterna.

Detta avser bara hur lång tid det tar för etykietka att visas efter att användaren håller muspekaren över eller klickar på hotspot. Om du vill att texten ska visas direkt är det bara att sätta den till 0.

Du kan också inaktivera pilen i etiketterna, beroende på dina preferenser.

Setting the tooltip duration for the hotspot block in SeedProd

Om du nu byter till kartan ”Avancerat” kan du anpassa bildens utseende ännu mer.

Du kan t.ex. lägga till en boxskugga eller justera utfyllnad och marginal.

Configuring the SeedProd advanced block settings

När du är klar klickar du bara på knappen ”Spara” i det övre högra hörnet.

Klicka sedan på ”Publicera” för att göra sidan live.

Publishing a landing page with an image hotspot made with SeedProd

Och så är det klart! Se till att du visar sidan på mobil, dator och surfplatta för att se om den ser bra ut på alla enheter.

Så här ser vår interaktiva bildhotspot ut:

An image hotspot example made with SeedProd

Metod 2: Lägg till bildhotspots med Image Hotspot Plugin (gratis men begränsat)

Om det låter som lite för mycket att använda en sidbyggare och byta tema, kan du använda gratispluginet WordPress Image Hotspot istället. Detta plugin är ett bra alternativ till metod 1, men observera att gratisversionen endast tillåter att lägga till upp till 6 hotspots på en enda bild.

För att använda Imagely Hotspot kan du installera och aktivera WordPress-pluginet i din obszar administracyjny. Gå sedan till Image Map Hotspot ” All Image Map Hotspot och klicka på knappen ”Lägg till ny”.

Adding a new image in the Image Hotspot plugin

Ge nu din nya hotspot för bildkartan ett namn. Välj sedan en av visningstyperna för etiketterna. Du kan antingen få hotspotens etykietka att visas genom att hovra eller klicka.

När du är klar klickar du på ”Spara”.

Saving a new image hotspot file in the Image Hotspot plugin

När det är klart lägger vi till din bild.

För att göra detta klickar du bara på knappen ”Ladda upp bild”.

Uploading a new image to the Image Hotspot plugin

Detta öppnar mediebiblioteket, där du kan ladda upp en ny bild eller välja en befintlig.

Därefter kan du lägga till hotspots på din bildkarta. Klicka bara på knappen ”Add Point” för att göra detta.

Adding a hotspot to an image with the Image Hotspot plugin

Ett popup-fönster visas nu där du kan konfigurera din interaktiva bildhotspot.

Navigera först till kartan ”Markör”. Det är här du kan anpassa hur hotspot-bilden ser ut. Om du vill ändra ikonerna kan du klicka på ”+”-tecknet bredvid fälten ”Ikoner” och/eller ”Hover-ikoner”.

”Ikoner” avser standardsymbolen för hotspot när den inte klickas på eller hålls över. Under tiden är ”Hover Icons” den symbol som visas när användaren klickar eller håller muspekaren över hotspot.

Changing the default hotspot icon with the Image Hotspot plugin

Nu kan du gå vidare och välja en ikon för att ersätta det aktuella standardalternativet. Pluginet har mycket att välja mellan.

När du har gjort ditt val klickar du bara på det och trycker på knappen ”Stäng”.

Choosing a hotspot icon in the Image Hotspot plugin

När du har konfigurerat dina hotspot-bilder kan du ändra färgerna på ikonerna.

Pluginet låter dig göra standardfärgen på hotspot-ikonen annorlunda än färgen på ikonens hover. På så sätt kan användarna enkelt se om en hotspot är aktiv när de klickar eller håller muspekaren över den.

Customizing the Image Hotspot plugin's hotspot appearance settings

För att ändra färg klickar du bara på färgvalsknappen Square och väljer den färg du vill använda.

Du kan sedan klicka var som helst på sidan för att gå vidare till en annan inställning.

Choosing a color for the default hotspot with the Image Hotspot plugin

Du kan också anpassa storleken på hotspot-ikonen på skrivbordet. Ju högre siffra, desto större blir ikonen.

När du är nöjd med ikonens utseende klickar du bara på ”Spara”.

Changing the hotspot's icon size with the Image Hotspot plugin

Bläddra nu uppåt och växla till kartan ”Innehåll”. Det är här du kan anpassa etykietkets text och utseende.

Pluginet ger dig 4 mallar att välja mellan, så att du kan välja den som bäst passar din webbplatsdesign.

Configuring the hotspot's tooltip text with the Image Hotspot plugin

Utöver det ska du se till att ersätta standardinnehållet i titeln med din egen text.

Och beroende på hur din webbplats ser ut kanske du vill göra teckensnittet större och ändra textfärgen för att förbättra läsbarheten.

När du är nöjd med inställningarna klickar du bara på ”Spara”.

Saving the tooltip settings of the Image Hotspot plugin

Den sista kartan är ”länk”. Här har du möjlighet att göra texten i etiketterna hyperlänkad, så att användarna kan omdirigeras till en annan sida.

Om du vill göra detta väljer du ”Yes” i inställningen ”Do you Link Title?”.

Därefter ska du wstawić din URL för titellänken i lämpligt fält och välja om du vill att länken ska öppnas i en ny karta eller inte.

Klicka till sist på ”Spara”.

Adding a link to the hotspot's tooltip text with the Image Hotspot plugin

Nu ska en ny hotspot visas på din bild, som du kan dra till önskad position.

Du kan också upprepa samma steg som tidigare för att skapa fler bildhotspots.

Dragging the newly created hotspot on the image with the Image Hotspot plugin

När du har konfigurerat din bildkarta kan du klicka på knappen ”Spara” igen.

Om du vill lägga till bildhotspot på någon av dina sidor, inlägg och/eller widgetar kan du kopiera krótki koden ovanför bilden.

Copying the image hotspot's shortcode made with the Image Hotspot plugin

Därefter klistrar du bara in kortkoden i ett block med krótki kod på din widget, sida eller inlägg i blockredigeraren. Du kan lära dig mer om hur du gör detta i vår steg-för-steg przewodnik om hur du lägger till och använder krótki koder i WordPress.

Så här ser vår interaktiva bildhotspot ut:

Image hotspot example made with the Image Hotspot plugin

Upptäck fler spännande designfunktioner för din WordPress-webbplats

Förutom att skapa interaktiva bildhotspots finns det många fler sätt att göra din webbplatsdesign engagerande. Här är några przewodniker som kan hjälpa dig:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till bild-hotspots i WordPress. Du kanske också vill kolla in vår ultimata przewodnik för WordPress sidofältstricks för att få maximalt resultat och våra expertval av de bästa temabyggarna för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post Så här lägger du till Image Hotspots i WordPress (det enkla sättet) first appeared on WPBeginner.

]]>
https://www.wpbeginner.com/sv/wp-tutorials/how-to-add-image-hotspots-in-wordpress/feed/ 1