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

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

Att hoppa över detta steg kan leda till obehagliga överraskningar för dina besökare, som trasiga layouter, saknade bilder eller stavfel. Vi har varit där själva, men dessa problem är verkligen 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, så att du kan känna dig trygg med 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
• Vanliga frågor: Förhandsgranska en WordPress-webbplats innan den går live
• Nästa steg för att förbättra hanteringen av WordPress-webbplatser

Redo? Låt oss börja.

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

Om du skapar en ny WordPress-webbplats är det alltid en bra idé att aktivera "snart på gång"-läget medan du arbetar på din webbplats.

Detta gör att du kan visa en professionell "snart på gång"-sida för dina besökare. Du kommer fortfarande att kunna logga in på WordPress-administratörsområdet 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 kö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 "kommer snart"-sida.

Några av våra partner varumärken använder 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 skrivit handledningar för våra läsare.

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

För att komma igång behöver du skapa ett SeedProd-konto. Gå till SeedProd-webbplatsen, klicka på knappen ‘Get SeedProd Now’, välj en plan och slutför köpet.

När det är klart har du ditt eget SeedProd-kontopanel, där du hittar din SeedProd Pro zip-fil och licensnyckel.

Därefter behöver du installera och aktivera SeedProd-pluginet.

Från din WordPress adminpanel, gå till Plugins » Lägg till nytt plugin.

Använd sedan sökfältet för att snabbt hitta pluginet.

I sökresultatet klickar du helt enkelt på knappen ‘Installera nu’ och sedan ‘Aktivera’ för att aktivera det på din webbplats.

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.

Efter att du har valt en mall öppnas SeedProd:s sidbyggargränssnitt.

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 att designa sidan, växla till fliken ‘Anslut’ högst upp. Här 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.

Klicka här på omkopplaren under rutan för Kommer snart-sidan för att ställa in den på ‘Aktiv’. Detta säkerställer att alla dina besökare ser din nya Kommer snart-sida istället för din faktiska webbplats.

Du kan nu logga ut från WordPress adminområde eller besöka din webbplats i ett inkognito-/privat webbläsarfönster.

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 klientwebbplatser finns det flera enkla sätt att låta klienter förhandsgranska ändringar innan de publiceras.

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 kringgå URL och välja hur länge URL:en ska vara aktiv. Glöm inte att spara dina ändringar.

Dina klienter kan nu använda den hemliga URL:en för att kringgå "kommer snart"-sidan och förhandsgranska webbplatsen. Detta gör att de kan se dina framsteg utan att du behöver skapa ett användarkonto åt dem.

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 gör att du kan testa och förhandsgranska ä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 av WordPress.org. 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å din Bluehost-hostingkontos kontrollpanel. Därifrån klickar du 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 bekräftat att Bluehost-pluginet är installerat och aktivt ä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 'Deploy All Changes' och klickar på uppdateringsknappen för att publicera ändringarna.

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 ger dig dock kanske inte en tydlig bild av hur ett inlägg eller en sida kommer att se ut på din webbplats med dina rubriker, sidofält och andra layout-element.

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 dator, surfplatta och mobil. Vi rekommenderar att du alltid kontrollerar mobil-förhandsgranskningen för att säkerställa att ditt innehåll ser bra ut på mindre skärmar.

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, publiceras det omedelbart på din webbplats. Om du inte använder en staging-webbplats kommer dina användare att se det nya temat utan några anpassningar.

Men 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 startar sedan Temaanpassaren.

Här ser du en live-fö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 kommer att se ut på din live-webbplats?

WordPress erbjuder flera sätt att förhandsgranska ändringar i ditt tema innan du tillämpar dem.

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 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 live-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.

Observera dock att Temaanpassaren inte är tillgänglig för WordPress blockteman.

Om du använder ett blocktema kan du starta redigeraren genom att besöka menyn Utseende » Redigerare.

Redigeraren för hela webbplatsen 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.

Tänk bara på att Webbplatsredigeraren tillämpar ändringar direkt på din design.

Till skillnad från Temaanpassaren finns det ingen knapp för 'Spara utkast', så dina ändringar kommer att vara live på din webbplats så snart du trycker på Spara-knappen (eller kommer att gå 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, utan att skriva kod?

SeedProd är den bästa WordPress-temabyggaren som låter dig skapa ett anpassat WordPress-tema med ett visuellt gränssnitt med live-fö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 samling 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 inkluderar 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 hur ditt tema ser ut på 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 och är högt 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ögkonverterande mallar 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 bygga din sida med en livefö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 manuella granskningar. Dessa inkluderar layoutförskjutningar, fontglitchar, färgmatchningsproblem eller avståndsproblem 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-pluginet för WordPress. Det låter dig köra visuella jämförelsetester på specifika sidor eller mallar direkt från din instrumentpanel.

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

Vanliga frågor: Förhandsgranska en WordPress-webbplats innan den går live

Låt oss titta på några snabba svar på vanliga frågor som läsare ofta ställer om att testa eller bygga en webbplats privat.

Hur testar man ett WordPress-tema utan att gå live?

Det enklaste sättet är att använda en staging-webbplats. De flesta WordPress-värdar erbjuder staging med ett klick, så du kan installera teman, anpassa layouter och förhandsgranska ändringar utan att påverka din live-webbplats.

Hur kan man arbeta med en WordPress-webbplats utan att gå live?

Du har några alternativ: använd en staging-webbplats för att bygga, redigera och testa privat, skapa en lokal webbplats på din dator, eller sätt din webbplats i underhållsläge med ett plugin så att besökare inte ser ofärdiga sidor medan du arbetar.

Hur lång tid tar det för en WordPress-webbplats att gå live?

Om din domän redan är ansluten till ditt värdkonto kan en webbplats gå live nästan omedelbart. Om du uppdaterar DNS eller flyttar värdar kan det ta några timmar (upp till 24–48 timmar) för ändringarna att helt spridas över hela världen.

Kan man lansera en WordPress-webbplats på 2 timmar?

Ja, det är möjligt, särskilt om du använder ett färdigt tema eller en startmall. Du kan ställa in värdskap, installera WordPress, välja ett tema och publicera en grundläggande webbplats inom ett par timmar. Det kan ta längre tid om du vill ha anpassade designer, avancerade funktioner eller flera sidor.

Nästa steg för att förbättra hanteringen av WordPress-webbplatser

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du förhandsgranskar din WordPress-webbplats innan den går live.

Du kanske också vill se våra experthandledningar om:

• Mest användbara anpassade inläggstyper i WordPress
• Hur man avpublicerar en WordPress-sida (enkla sätt)
• Hur man lägger till eller tar bort behörigheter för användarroller i WordPress
• Hur man skapar en WordPress-plan för katastrofåterställning
• Den ultimata guiden 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.