Vill du förhandsgranska din WordPress-webbplats innan den tas i drift?
Genom att förhandsgranska din webbplats innan du publicerar den kan du upptäcka eventuella fel, designproblem, saknade objekt, stavnings- och grammatikfel.
I den här artikeln visar vi dig hur du förhandsgranskar din webbplats innan den går live och utan att skada användarupplevelsen.
Här är en snabb översikt över de ämnen som vi kommer att behandla i den här guiden. Använd gärna länkarna nedan för att hoppa till specifika avsnitt.
- Förhandsgranska WordPress-webbplats före lansering med Coming Soon-läget
- Låt kunderna förhandsgranska WordPress-webbplatsen innan den tas i drift
- Skapa en webbplats för förhandsgranskning av ändringar
- Förhandsgranska inlägg och sidor innan du publicerar
- Förhandsgranska ett WordPress-tema innan du byter
- Förhandsgranska anpassningar av WordPress-tema
- Förhandsgranska ditt anpassade WordPress-tema (SeedProd)
- Förhandsgranska WordPress landningssidor (SeedProd)
Är du redo? Då sätter vi igång.
Förhandsgranska WordPress-webbplats före lansering med Coming Soon-läget
Om du skapar en ny WordPress-webbplats är det alltid rekommenderat att aktivera ett coming soon-läge medan du arbetar med din webbplats.
Detta gör att du kan visa en ordentlig coming soon-sida för webbplatsens besökare. Du kommer fortfarande att kunna logga in i WordPress adminområde och arbeta på din webbplats, men dina besökare kommer inte att kunna se den.
Det bästa är att du kan förhandsgranska din webbplats och göra alla nödvändiga tester innan du gör den live.
För att göra detta behöver du SeedProd. Det är den bästa WordPress-webbplatsbyggaren på marknaden och låter dig enkelt visa en vacker kommande sida.
I den här handledningen kommer vi att använda pro-versionen av SeedProd, så att vi kan använda alla mallar och avancerade funktioner, men det finns också en gratisversion som du kan använda för att enkelt skapa enkla coming soon-sidor.
Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår steg för steg-guide om hur du installerar ett WordPress-plugin.
Efter aktivering måste du besöka sidan SeedProd ” Settings (inställningar ) för att ange din licensnyckel. Du hittar den här informationen under ditt konto på SeedProds webbplats.
Därefter måste du besöka SeedProd ” Landing Pages.
Härifrån klickar du helt enkelt på knappen ”Set up a Coming Soon page”.
Efter det kommer insticksprogrammet att be dig välja en mall för din kommande sida.
SeedProd levereras med flera vackra coming soon-mallar som är professionellt utformade för att öka konverteringarna.
Om du väljer en mall startar SeedProds sidbyggargränssnitt.
Sidbyggaren är ett intuitivt designverktyg där du helt enkelt kan peka och klicka för att redigera ett objekt eller dra och släppa nya objekt till din layout.
Du kan lägga till ett formulär för e-postregistrering och knappar för sociala medier på din kommande sida, så att dina användare kan följa ditt varumärke redan före lanseringen.
När du är klar med siddesignen måste du byta till fliken Anslut. Härifrån kan du integrera med din e-postmarknadsföringstjänst för att utöka din lista och meddela människor när din webbplats går live.
När du är klar kan du klicka på knappen Spara för att spara dina ändringar.
Välj sedan Publicera för att göra din kommande sida redo att användas. Oroa dig inte, den är inte aktiv på din webbplats ännu. Vi gör det i nästa steg.
Du kan nu stänga gränssnittet för sidbyggaren vilket tar dig tillbaka till sidan SeedProd ” Landing Pages.
Härifrån måste du klicka på rutan Toggle below coming soon page (växla under sidan coming soon) till Active (aktiv). Detta kommer att se till att alla dina webbplatsbesökare ser din nya kommande sida i stället för din egentliga webbplats.
Du kan nu logga ut från WordPress adminområde eller besöka din webbplats i inkognitoläge.
Du kommer att se din kommande sida live på din webbplats.
Du kan fortfarande logga in i ditt WordPress-administrationsområde och fortsätta arbeta på din webbplats.
Du kommer också att kunna förhandsgranska din levande webbplats när du är inloggad.
När du är klar med arbetet på din webbplats kan du helt enkelt gå till sidan SeedProd ” Landing Pages för att stänga av din coming soon-sida.
Klicka helt enkelt på reglaget ”Active” (aktiv) för att ställa in den igen till inaktiv.
Med SeedProd kan du också enkelt sätta din webbplats i underhållsläge medan du arbetar på din webbplats med live förhandsgranskning.
Låt kunderna förhandsgranska WordPress-webbplatsen innan den tas i drift
Om du arbetar med kundwebbplatser finns det flera sätt att enkelt låta kunderna förhandsgranska ändringar på en WordPress-webbplats innan den tas i drift.
Det enklaste sättet är dock att använda en Coming Soon-sida som skapats med SeedProd som vi just visade ovan.
När du har aktiverat Coming Soon-läget måste du klicka på knappen ”Redigera sidan”.
På skärmen för sidbyggaren måste du byta till fliken Sidinställningar.
Klicka sedan på avsnittet Åtkomstkontroll.
Härifrån kan du skapa en Bypass-URL och välja URL:ns utgångstid. Glöm inte att spara dina ändringar.
Dina kunder kan nu använda den hemliga URL:n för att kringgå den kommande sidan och förhandsgranska webbplatsen.
Om din webbplats redan är live och du vill dela med dig av ändringarna till dina kunder innan du går live, tar vi upp det i nästa steg.
Skapa en WordPress Staging-webbplats för att förhandsgranska ändringar
Det är standardmässig bästa praxis bland webbproffs att skapa en staging-webbplats, så att du kan testa och förhandsgranska eventuella ändringar innan du tillämpar dem på en live-webbplats.
En staging-webbplats är en privat klon av din webbplats. Den är dold för allmänheten, så den ger dig fördelen att kunna testa och förhandsgranska dina ändringar på din live-server.
Många av de bästa WordPress-hostingföretagen erbjuder en 1-klick-stadiewebbplats. Du kan helt enkelt klicka på en knapp för att skapa en staging-webbplats och enkelt synkronisera alla ändringar du gör med din live-webbplats.
I den här artikeln visar vi hur du skapar en staging-webbplats på Bluehost.
Bluehost är ett av världens största webbhotell och en officiellt rekommenderad webbhotellleverantör för WordPress. De erbjuder 1-klicks funktion för staging sites till alla sina WordPress-kunder.
Först måste du se till att du har Bluehost-pluginet installerat och aktiverat på din webbplats. Om det redan är aktiverat kommer du att se ett Bluehost-menyalternativ högst upp i WordPress administratörsmenyn.
Om du inte kan se Bluehost-menyn kan du logga in på kontrollpanelen för ditt värdkontokonto hos Bluehost och klicka på knappen Hantera webbplats.
Under området för webbplatshantering byter du helt enkelt till fliken Plugins och aktiverar The Bluehost Plugin.
När du har försäkrat dig om att du har Bluehost-pluginet installerat är du redo att skapa din staging site.
Från WordPress-administrationsområdet går du till sidan Bluehost ” Staging och klickar på knappen Create Staging Site.
Insticksprogrammet kommer sedan att skapa din staging-webbplats.
När du är klar kan du helt enkelt klicka på din staging site för att växla till den och börja arbeta på den.
Du kan nu arbeta på din staging-webbplats och se dina ändringar på en live förhandsgranskning av din webbplats.
För att hjälpa dig att se skillnaden från din livewebbplats ser du ett rött meddelande ”Staging Environment” i WordPress administrationsfält.
När du är klar med förhandsgranskningen av dina ändringar på staging-webbplatsen kan du gå till Bluehost ” Staging-sidan på staging-webbplatsen.
Härifrån måste du klicka på knappen Deploy All Changes (distribuera alla ändringar).
För mer information och instruktioner för andra värdmiljöer, se vår detaljerade guide om hur man skapar en staging site för WordPress.
Förhandsgranska WordPress-inlägg och sidor innan du publicerar
WordPress använder en intuitiv blockredigerare som automatiskt använder ditt temas styling för att visa en förhandsgranskning i realtid av dina inlägg och sidor.
Det ger dig dock kanske inte en tydlig bild av hur ett inlägg eller en sida kan se ut på din webbplats med dina rubriker, sidofält och allt annat på sidan.
Som tur är kan du med blockredigeraren också förhandsgranska ett inlägg eller en sida utan att publicera den.
Klicka helt enkelt på knappen Förhandsgranska i det övre högra hörnet.
Du kan välja mellan förhandsgranskningsalternativen för skrivbord, surfplatta och mobil, men dessa visar bara förhandsgranskningen inne i innehållsredigeraren.
När du har valt enhetstyp måste du klicka på alternativet ”Förhandsgranska i ny flik” för att visa den fullständiga förhandsgranskningen på din webbplats.
WordPress kommer då att visa dig en förhandsgranskning av ditt inlägg eller din sida innan du går live.
Om du vill ge någon annan en exklusiv tillgång till förhandsgranskning av ett av dina opublicerade inlägg, se vår guide om hur du tillåter offentlig förhandsgranskning av inlägg i WordPress.
Förhandsgranska ett WordPress-tema innan du byter
Normalt sett, om du aktiverar ett WordPress-tema, går det omedelbart live på din webbplats.
Om du inte använder en staging-webbplats kommer dina användare att se det nya temat utan några anpassningar.
Skulle det inte vara trevligt om du kunde förhandsgranska ett WordPress-tema innan du aktiverar det på din webbplats?
Som tur är kan du med WordPress förhandsgranska ett tema innan du aktiverar det.
Installera helt enkelt WordPress-temat som du vill förhandsgranska. För mer information, se vår guide om hur du installerar ett WordPress-tema.
När du har installerat temat behöver du bara klicka på länken Live Preview.
Alternativt kan du gå till sidan Utseende ” Teman och föra musen över ett installerat tema.
Du kommer att se en knapp för att starta Live Preview.
WordPress kommer sedan att starta Temaanpassningsverktyg.
Här ser du en live förhandsgranskning av temat med ditt nuvarande innehåll.
Temaanpassaren kommer att använda ditt befintliga innehåll och din befintliga navigeringsmeny. Du kan prova olika temainställningar från den vänstra panelen.
Du kan avsluta temaanpassaren utan att aktivera temat. Det kommer dock inte att spara några av dina anpassningar.
Om du är nöjd med hur temat ser ut kan du gå vidare och aktivera det genom att klicka på knappen ”Activate & Publish” högst upp i menyn.
Behöver du hjälp med att byta tema? Se vår handledning om hur du byter WordPress-tema på rätt sätt.
Förhandsgranska anpassningar av WordPress-tema
Vill du göra ändringar i ditt WordPress-tema men är inte säker på hur de skulle se ut på din webbplats?
WordPress har olika sätt att förhandsgranska ditt WordPress-tema innan du tillämpar ändringarna.
För de flesta WordPress-teman kan du förhandsgranska dina ändringar genom att använda temaanpassaren. Gå helt enkelt till sidan Utseende ” Anpassa för att starta temaanpassaren.
Härifrån kan du prova olika temaalternativ, ändra menyer, anpassa widgetar, lägga till anpassad CSS och mycket mer.
På så sätt kan du förhandsgranska temaändringar utan att faktiskt tillämpa dem på din webbplats.
När du är nöjd med de ändringar du gjort kan du klicka på knappen Publicera för att tillämpa ändringarna. Som tillval kan du också klicka på kugghjulsikonen för att spara dina ändringar som ett utkast, schemalägga dina ändringar och dela en förhandsgranskningslänk med kunder.
Den här metoden kanske inte är tillgänglig för vissa nyare WordPress-teman som använder Full Site Editor.
Om du använder ett tema med fullständig webbplatsredigerare kan du starta redigeraren genom att besöka menyn Utseende ” Redigerare.
Med den fullständiga webbplatsredigeraren kan du redigera ditt WordPress-tema med hjälp av block. Du kan redigera enskilda mallfiler med en levande förhandsgranskning av din webbplats.
Till skillnad från temaanpassaren kan du dock inte spara dina ändringar som ett utkast. Dessa ändringar kommer att bli live när du sparar dina ändringar, eller gå förlorade om du avslutar utan att spara.
Förhandsgranska ditt anpassade WordPress-tema
Vill du skapa ett helt anpassat WordPress-tema med en förhandsgranskning i realtid?
SeedProd är den bästa WordPress webbplatsbyggaren som låter dig skapa ett anpassat WordPress-tema med hjälp av ett drag och släpp-gränssnitt med live förhandsvisning.
Först måste du installera och aktivera SeedProd plugin. För mer information, se vår steg för steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering måste du besöka SeedProd ” Inställningar för att ange din licensnyckel. Du hittar den här informationen under ditt konto på SeedProds webbplats.
Därefter måste du besöka SeedProd ” Theme Builder-sidan.
Härifrån klickar du på knappen Themes (teman).
Då visas ett popup-fönster där du kan välja ett tema som du kan använda som utgångspunkt.
SeedProd levereras med ett gäng vackra teman som du kan anpassa.
Klicka bara på för att välja ett tema och SeedProd kommer att generera alla temamallfiler för dig.
Du kan nu klicka på någon av dessa temafiler för att redigera dem i temabyggaren.
SeedProd har en intuitiv drag and drop-byggare som använder block och sektioner för att skapa vackra layouter.
Du kan lägga till block till din design från den vänstra kolumnen. Till höger ser du en levande redigerbar förhandsvisning av din temamall.
SeedProd kommer också med fullt stöd för WooCommerce.
Det innebär att du kan designa och förhandsgranska din webbutik, inklusive produktsidor, kassasida och mycket mer.
Vill du förhandsgranska ditt tema för mobila enheter?
Klicka helt enkelt på mobilikonen i bottenraden, så visar SeedProd den mobila förhandsgranskningen av ditt tema.
När du är klar med att redigera ditt tema kan du klicka på knappen Spara uppe till höger och lämna byggaren. Du kan sedan redigera andra mallar vid behov.
När du är redo att distribuera ditt anpassade tema aktiverar du helt enkelt växelspaken ”Enable SeedProd Theme” på sidan för temabyggaren.
Ditt anpassade tema kommer nu att gå live. Det innebär att det kommer att ersätta ditt befintliga WordPress-tema.
Om du vill veta mer om SeedProd-byggaren för anpassade teman kan du läsa vår handledning om hur du skapar ett anpassat WordPress-tema utan att skriva någon kod.
Förhandsgranska WordPress-landningssidor före lansering
Landningssidor är specialiserade sidor som används i marknadsföringskampanjer. Dessa sidor är mycket optimerade för konverteringar och försäljning.
Vissa WordPress-teman kommer med landningssidemallar som du kan anpassa med hjälp av blockredigeraren.
Men om du behöver fler designalternativ behöver du SeedProd. Det är den bästa WordPress landningssidebyggaren och låter dig enkelt skapa vackra landningssidor för din webbplats.
SeedProd levereras med dussintals professionellt utformade landningssidemallar för att du ska komma igång. Dessutom kommer dina landningssidor att se lika bra ut på alla skärmstorlekar.
Först måste du installera och aktivera SeedProd-pluginet. Efter aktiveringen måste du besöka SeedProd ” Inställningssidan för att ange din licensnyckel. Du hittar den här informationen under ditt konto på SeedProds webbplats.
Därefter går du till sidan SeedProd ” Landing Pages.
För att börja utforma din sida klickar du på knappen Lägg till ny landningssida.
Därefter måste du välja en mall.
Det finns flera mycket optimerade mallar som du kan använda som utgångspunkt, eller så kan du börja med en tom mall.
Då visas en popupruta där du måste ange ett namn för din landningssida och välja en URL-slug.
Klicka sedan på knappen ”Spara och börja redigera sidan” för att fortsätta.
Detta kommer att starta gränssnittet för sidbyggaren.
Det är ett verktyg för att dra och släppa design där du kan utforma din sida med en förhandsgranskning i realtid.
När du är klar med redigeringen av din landningssida kan du klicka på knappen Spara och välja Publicera för att göra den live på din webbplats.