Hur du förhandsgranskar din WordPress-webbplats innan du går live

En sak vi säger till våra läsare är: förhandsgranska alltid innan du publicerar. Under åren har vi skapat och uppdaterat tusentals WordPress-sidor och inlägg, och att förhandsgranska innehåll innan det blir live har blivit en viktig del av vår redaktionella process.

Att hoppa över det här steget kan leda till överraskningar för dina besökare – trasiga layouter, saknade bilder eller stavfel. Vi har varit där själva, men verkligen, dessa problem är lätta att undvika.

I den här artikeln går vi igenom effektiva sätt att förhandsgranska din WordPress-webbplats innan den går live. På så sätt kan du vara säker på att din webbplats ser ut och fungerar precis som du vill. 🧑‍💻

Här är en snabb översikt över de ämnen vi kommer att täcka i den här guiden. Använd gärna länkarna nedan för att hoppa till specifika avsnitt:

• Förhandsgranska WordPress-webbplatsen innan lansering med "kommande snart"-läge
• Låt kunder förhandsgranska WordPress-webbplatsen innan den går live
• Skapa en WordPress-stagingwebbplats för att förhandsgranska ändringar
• Förhandsgranska WordPress-inlägg och sidor innan publicering
• Förhandsgranska ett WordPress-tema innan du byter
• Förhandsgranska anpassningar av WordPress-tema
• Förhandsgranska ditt anpassade WordPress-tema
• Förhandsgranska WordPress-landningssidor före lansering
• Bonustips 🌟: Fånga designproblem med visuell regressionsstestning

Redo? Låt oss börja.

Förhandsgranska WordPress-webbplatsen innan lansering med "kommande snart"-läge

Om du skapar en ny WordPress-webbplats, rekommenderas det alltid att aktivera "kommer snart"-läget medan du arbetar på din webbplats.

Detta gör att du kan visa en korrekt "kommer snart"-sida för webbplatsbesö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 kommer att kunna förhandsgranska din webbplats och göra all nödvändig testning 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 "kommer snart"-sida.

Några av våra partnerföretag använder faktiskt SeedProd för att bygga sina webbplatser. Vi har sett på nära håll hur bra det fungerade för dem, och vi har använt verktyget många gånger när vi har skrivit handledningar för våra läsare.

Om du vill lära dig mer om pluginet, se vår detaljerade SeedProd-recension.

Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, besök sidan SeedProd » Inställningar för att ange din licensnyckel. Du hittar denna information i ditt konto på SeedProd-webbplatsen.

Gå sedan till skärmen SeedProd » Landningssidor från WordPress adminområde.

Härifrån klickar du helt enkelt på knappen 'Ställ in en "Kommer snart"-sida'.

Därefter kommer pluginet att be dig att välja en mall för din kommande sida.

SeedProd levereras med flera vackra "kommande snart"-mallar som är professionellt designade för att öka konverteringar.

När du har valt en mall öppnas SeedProds sidbyggargränssnitt på skärmen.

Sidbyggaren är ett intuitivt designverktyg. Du kan helt enkelt peka och klicka för att redigera ett objekt eller dra och släppa nya objekt till din layout från den vänstra kolumnen.

Du kan också lägga till ett formulär för e-postregistrering och knappar för sociala medier på din "kommer snart"-sida så att dina användare kan följa ditt varumärke redan innan lanseringen.

När du är klar med siddesignen, växla till fliken "connect" högst upp. Härifrån kan du integrera din e-postmarknadsföringstjänst för att växa din lista och meddela folk när din webbplats lanseras.

För mer detaljerade instruktioner kan du se vår handledning om hur man skapar kommande sidor i WordPress med SeedProd.

När du är klar, klicka på knappen "Spara" för att lagra dina ändringar.

Välj sedan 'Publicera' för att göra din 'kommer snart'-sida redo att användas. Oroa dig inte, den är inte aktiv på din webbplats ännu. Det gör vi i nästa steg.

Du kan nu stänga sidbyggargränssnittet, vilket tar dig tillbaka till skärmen SeedProd » Landningssidor.

Här klickar du på växlingsknappen under rutan för "kommer snart"-sidan till 'Aktiv'. Detta säkerställer att alla dina webbplatsbesökare ser din nya "kommer snart"-sida istället för din faktiska webbplats.

Du kan nu logga ut från WordPress-administrationsområdet eller besöka din webbplats i inkognitoläge.

Du kommer att se din kommande sida live på din webbplats.

Du kan fortfarande logga in på din WordPress-instrumentpanel och fortsätta arbeta med din webbplats.

Du kommer också att kunna förhandsgranska din live-webbplats när du är inloggad.

När du är klar med ditt arbete på din webbplats kan du helt enkelt gå till skärmen SeedProd » Landningssidor för att stänga av din "kommer snart"-sida.

Klicka här på 'Aktiv' reglaget för att ställa in det tillbaka till inaktivt.

Låt kunder förhandsgranska WordPress-webbplatsen innan den går live

Om du arbetar med kundwebbplatser finns det flera sätt att enkelt låta kunder förhandsgranska ändringar på en WordPress-webbplats innan de går live.

Det enklaste sättet är dock att använda en "kommer snart"-sida skapad med SeedProd, som vi just visade ovan.

När du har aktiverat 'Kommande snart'-läget måste du klicka på knappen 'Redigera sida'.

Detta startar sidbyggaren på din skärm, där du måste växla till fliken Sidinställningar.

Klicka sedan på avsnittet 'Åtkomstkontroll'.

Härifrån kan du skapa en Bypass URL och välja varaktighet för URL:ens utgång. Glöm inte att spara dina ändringar.

Dina kunder kan nu använda den hemliga URL:en för att kringgå sidan 'kommande snart' och förhandsgranska webbplatsen.

Om din webbplats redan är live och du vill dela ändringar med dina kunder innan du går live, så täcker vi det i nästa steg.

Skapa en WordPress-stagingwebbplats för att förhandsgranska ändringar

Det är standardpraxis bland webbproffs att skapa en staging-webbplats så att du kan testa och förhandsgranska alla ä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, vilket ger dig fördelen att testa och förhandsgranska dina ändringar på din live-server.

Många av de bästa WordPress-värdföretagen erbjuder en staging-webbplats med ett klick. 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.

För den här artikeln visar vi dig hur du skapar en staging-webbplats på Bluehost.

Bluehost är ett av de största hostingföretagen i världen och en officiellt rekommenderad WordPress-hostingleverantör. De erbjuder en 1-klicks-staging-webbplatsfunktion till alla sina WordPress-kunder.

Först måste du se till att Bluehost-pluginet är installerat och aktiverat på din webbplats. Om det redan är aktiverat ser du ett menyalternativ för Bluehost högst upp i WordPress adminmeny.

Om du inte kan se Bluehost-menyn kan du logga in på ditt Bluehost-värdkontos kontrollpanel och klicka på knappen 'Webbplatser'.

Klicka sedan på 'Inställningar' på din webbplats.

Under webbplatsens hanteringsområde, växla till fliken ‘Plugins’.

Aktivera sedan Bluehost-pluginet.

När du har säkerställt att Bluehost-pluginet är installerat är du redo att skapa din staging-webbplats.

Från WordPress adminområde, klicka på sidan för Bluehost-pluginet och byt till fliken 'Staging'.

Klicka sedan på 'Skapa staging-webbplats'.

Pluginet kommer sedan att generera din staging-webbplats.

När du är klar kan du klicka på 'Redigerar inte för närvarande' för att växla till staging-webbplatsen och börja arbeta med den.

Du kan nu arbeta på din staging-webbplats och se dina ändringar i en live-förhandsgranskning.

När du har bytt ser du ett rött meddelande om 'Staging Environment' i WordPress adminfält.

Detta är för att hjälpa dig att skilja den från din live-webbplats.

När du har förhandsgranskat dina ändringar på stagingwebbplatsen kan du gå till sidan för Bluehost-plugin igen och navigera till fliken 'Staging'.

Härifrån väljer du 'Publicera alla ändringar' och klickar på uppdateringsknappen för att göra ändringarna live.

För mer information och instruktioner för andra hostingmiljöer, se vår detaljerade guide om hur du skapar en staging-webbplats för WordPress.

Förhandsgranska WordPress-inlägg och sidor innan publicering

WordPress använder en intuitiv blockredigerare som automatiskt använder ditt temas stil för att visa en liveförhandsgranskning av dina inlägg och sidor.

Det kan dock inte ge dig 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.

Lyckligtvis låter blockredigeraren dig också förhandsgranska ett inlägg eller en sida utan att publicera det.

Klicka helt enkelt på knappen 'Förhandsgranska' i det övre högra hörnet.

Du kan välja mellan förhandsgranskningsalternativen för stationär dator, surfplatta och mobil, men dessa visar bara förhandsgranskningen inuti innehållsredigeraren.

Efter att ha valt en enhetstyp, klicka på alternativet 'Förhandsgranska i ny flik' för att se hela förhandsgranskningen på din webbplats.

WordPress kommer sedan att visa dig en förhandsgranskning av ditt inlägg eller din sida innan det publiceras.

Om du vill ge någon annan exklusiv åtkomst att förhandsgranska ett av dina opublicerade inlägg, se då vår guide om hur man tillåter offentlig förhandsgranskning av inlägg i WordPress.

Förhandsgranska ett WordPress-tema innan du byter

Normalt, om du aktiverar ett WordPress-tema, så blir 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.

Vore det inte trevligt om du kunde förhandsgranska ett WordPress-tema innan du aktiverar det på din webbplats?

Lyckligtvis låter WordPress dig förhandsgranska ett tema innan du aktiverar det.

Install helt enkelt det WordPress-tema du vill förhandsgranska. För mer information, se vår guide om hur man installerar ett WordPress-tema.

Efter att ha installerat temat, klicka på länken "Live Preview".

Alternativt kan du också besöka sidan Utseende » Teman och hovra med musen över ett installerat tema.

Du kommer att se en knapp för att starta "Live Preview".

WordPress kommer sedan att starta Theme Customizer.

Här ser du en liveförhandsgranskning av temat med ditt nuvarande innehåll.

Temats anpassningsverktyg kommer att använda ditt befintliga innehåll och navigeringsmeny. Du kan prova olika temainställningar från den vänstra panelen.

Du kan avsluta temaanpassaren utan att aktivera temat. Detta sparar dock inte dina anpassningar.

Om du är nöjd med hur temat ser ut kan du fortsätta och aktivera det genom att klicka på knappen 'Aktivera & Publicera' högst upp i menyn.

Behöver du hjälp med att byta tema? Se vår handledning om hur du byter ditt WordPress-tema på rätt sätt.

Förhandsgranska anpassningar av WordPress-tema

Vill du göra ändringar i ditt WordPress-tema men är osäker på hur de skulle se ut på din live-webbplats?

WordPress erbjuder 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 med hjälp av temaanpassaren. Gå helt enkelt till sidan Utseende » Anpassa för att starta den.

Härifrån kan du prova olika temainställningar, ändra menyer, anpassa widgets, lägga till anpassad CSS och mer.

Detta gör att du kan förhandsgranska temaförändringar utan att faktiskt tillämpa dem på din webbplats.

När du är nöjd med de ändringar du har gjort kan du klicka på knappen 'Publicera' för att tillämpa dessa ändringar. Alternativt 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.

Nu kanske den här metoden inte är tillgänglig för WordPress blockteman som använder Full Site Editor.

I så fall kan du starta redigeraren genom att gå till menyn Utseende » Redigerare.

Fullständig webbplatsredigerare låter dig redigera ditt WordPress-tema med hjälp av block. Du kan redigera enskilda mallfiler med en live förhandsgranskning av din webbplats.

För mer information kan du se vår kompletta guide till WordPress fullständig webbplatsredigering.

Till skillnad från Temaanpassaren kan du dock inte spara dina ändringar som ett utkast. Dessa ändringar blir live när du sparar dina ändringar eller går förlorade om du avslutar utan att spara.

Förhandsgranska ditt anpassade WordPress-tema

Vill du skapa ett helt anpassat WordPress-tema med live förhandsgranskning?

SeedProd är den bästa WordPress-temabyggaren som låter dig skapa ett anpassat WordPress-tema med ett dra-och-släpp-gränssnitt med liveförhandsgranskning.

Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, besök sidan SeedProd » Inställningar för att ange din licensnyckel. Du hittar denna information i ditt konto på SeedProd-webbplatsen.

Därefter behöver du besöka sidan SeedProd » Temabyggare.

Härifrån klickar du på knappen 'Teman'.

Detta öppnar ett popup-fönster där du kan välja ett tema att använda som utgångspunkt.

SeedProd levereras med en mängd vackra teman och mallar som du kan anpassa.

Klicka helt enkelt för att välja ett tema, så genererar SeedProd alla temamallar åt dig.

Du kan nu klicka på någon av dessa temafiler för att redigera dem i temabyggaren.

SeedProd levereras med en intuitiv dra-och-släpp-byggare som använder block och sektioner för att skapa vackra layouter.

Du kan lägga till block i din design från den vänstra kolumnen. Till höger ser du en live, redigerbar förhandsgranskning av din temamall.

SeedProd kommer också med fullt stöd för WooCommerce.

Det innebär att du kan designa och förhandsgranska din onlinebutik, inklusive produktsidor, kassasidor och mer.

Vill du förhandsgranska ditt tema för mobila enheter?

Klicka helt enkelt på mobilikonen i den nedre listen, så visar SeedProd mobilförhandsgranskningen av ditt tema.

När du är klar med att redigera ditt tema kan du klicka på knappen 'Spara' längst upp till höger och avsluta byggaren. Du kan sedan redigera andra mallar om det behövs.

När du är redo att driftsätta ditt anpassade tema, aktivera helt enkelt växlingsknappen 'Aktivera SeedProd-tema' på temabyggarsidan.

Ditt anpassade tema kommer nu att gå live. Det betyder att det kommer att ersätta ditt befintliga WordPress-tema.

För att lära dig mer om SeedProd anpassade temabyggare, se vår handledning om hur man 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 levereras med landningssidmallar som du kan anpassa med hjälp av blockredigeraren.

Men om du behöver fler designalternativ, då behöver du SeedProd. Det är den bästa landningssidbyggaren för WordPress och låter dig enkelt skapa vackra landningssidor för din webbplats.

SeedProd levereras med dussintals professionellt designade landningssidmallar för att 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-plugin. Efter aktivering måste du besöka sidan SeedProd » Inställningar för att ange din licensnyckel.

Du hittar denna information på ditt konto på SeedProd-webbplatsen.

Gå sedan till skärmen SeedProd » Landningssidor från sidomenyn i WordPress-administrationen.

För att börja designa din sida, klicka på knappen 'Lägg till ny landningssida'.

Välj sedan en mall.

Det finns flera högt optimerade mallar som du kan använda som utgångspunkt, eller så kan du börja med en tom mall.

Detta öppnar ett popup-fönster där du behöver 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 startar gränssnittet för sidbyggaren.

Det är ett dra-och-släpp-designverktyg där du kan designa din sida med en live-förhandsgranskning.

När du är klar med att redigera din landningssida kan du klicka på knappen 'Spara' och välja 'Publicera' för att göra den live på din webbplats.

För att lära dig mer, se vår handledning om hur man skapar landningssidor i WordPress.

Bonustips 🌟: Fånga designproblem med visuell regressionsstestning

Vill du ta din webbplatsadministration ett steg längre? Visuell regressionsstestning hjälper dig att automatiskt jämföra skärmdumpar av din webbplats före och efter ändringar.

Det är ett av de bästa sätten att upptäcka designproblem som ofta slinker förbi det mänskliga ögat. Dessa inkluderar layoutförskjutningar, fontproblem, färgmatchningsfel eller problem med avstånd som bara visas på vissa sidor eller skärmstorlekar.

Till exempel kan även något så litet som en pluginuppdatering oavsiktligt bryta stylingen av ett kontaktformulär eller flytta element ur linje.

Verktyg för visuell regression markerar dessa skillnader sida vid sida, så att du kan upptäcka och åtgärda dem *innan* dina besökare någonsin märker dem.

Det enklaste sättet att komma igång är att använda VRTs plugin för WordPress. Det låter dig köra visuella jämförelsetester på specifika sidor eller mallar direkt från din instrumentpanel – ingen kodning krävs.

Du kan till och med använda det på en staging-webbplats för att säkert testa uppdateringar innan du publicerar något. För detaljer, se vår kompletta guide om hur man gör visuella regressionstester.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du förhandsgranskar din WordPress-webbplats innan du går live. Du kanske också vill se våra experttips för att skapa en katastrofåterställningsplan för WordPress och vår ultimata guide till WordPress-underhåll.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.