En webbplats på en enda sida är när allt innehåll finns på en sida, och menyn inte leder till andra webbadresser: vid klick scrollar sidan mjukt till rätt block. Inga omladdningar, inga tappade besökare. Låter som precis vad du behöver för en landningssida, en portfölj eller ett digitalt visitkort, eller hur?

Men när det kommer till kritan stöter en nybörjare på två väggar. Den första: "Jag kan inte koda." Den andra: "Jag behöver förmodligen dyra tillägg." Båda väggarna rasar inom en timme.

Du kommer att skapa en fullfjädrad webbplats på en enda sida i WordPress med mjuk scrollning, ankarsektioner och helt med gratisverktyg. Inte en enda rad kod.

Om du föredrar att titta istället för att läsa, här är en visuell genomgång från installation till publicering:

💡 Snabb översikt:

• Installera XAMPP, en lokal server för att testa WordPress på din dator
• Driftsätt WordPress på en lokal maskin via phpMyAdmin och redigering av wp-config.php
• Välj ett tema som är kompatibelt med en-sidig struktur (vi använder SiteOrigin North)
• Installera två gratis tillägg från SiteOrigin: Page Builder och Widgets Bundle
• Bygg ihop en sida från färdiga layouter, tilldela ankare-ID:n och länka dem till menyalternativ

Varför en en-sidig webbplats överhuvudtaget

En en-sidig sajt vinner över en klassisk flersidig webbplats i specifika scenarier. Du styr i vilken ordning en besökare tar till sig information: först värdet, sedan priset, inte tvärtom. Inget letande efter länkar i menyn.

När detta fungerar

En fotografs portfölj, en tjänstelandningssida, en produktsida, ett företagsvisitkort med fem sektioner, allt detta ryms på en skärm att scrolla. Sex block med två till tre stycken på en sida ser gediget ut. Samma sex block på sex olika sidor ser ut som en skensajt.

Mobil och snabbhet

En en-sidig sajt laddas en gång. Därefter bara scrollning. En besökare kan tappa internet mitt i läsningen och ändå scrolla till slutet: sidan finns redan i minnet. På en mobilskärm känns detta som en app, inte en webbplats. Google bekräftade för länge sedan: mobil-först-indexering har varit standard sedan 2018.

När det inte fungerar

Hundra bloggartiklar, en komplex webbutik, flernivåstruktur, det klarar inte en en-sidig sajt av. Scrollningen blir oändlig, och SEO:n blir lidande: sökmotorer älskar separata webbadresser för varje betydelsekluster.

Steg 1: Installera XAMPP på Windows

XAMPP är ett gratis plattformsoberoende paket: Apache (webbserver), MariaDB (databas), PHP och Perl. Enkelt uttryckt förvandlar det din dator till en lokal hosting där WordPress fungerar utan internet och utan kostnad. Perfekt för att testa och lära sig bygga.

Installationsprocedur på Windows:

• Gå till Apache Friends webbplats och ladda ner den senaste versionen av XAMPP för ditt system.
• Kör installationsprogrammet. På välkomstskärmen klickar du på Next.
• Vid valet av komponenter lämnar du kryssrutorna för MySQL och phpMyAdmin ikryssade, detta räcker för WordPress. Resten kan avmarkeras: du kan lägga till dem senare via kontrollpanelen om det behövs.

• Välj en installationsmapp (standard är C:\xampp, du kan behålla den).
• På Bitnami-skärmen avmarkerar du "Learn more about Bitnami for XAMPP", vi installerar WordPress manuellt. Klicka på Next.
• Vänta tills filerna packas upp. Låt kryssrutan "Launch control panel" vara ikryssad och klicka på Finish.

Om kontrollpanelen öppnades utan röda fel och Apache och MySQL är markerade i grönt, fungerar servern. Öppna en webbläsare och gå till http://localhost/. Om du ser XAMPP:s välkomstsida är allt korrekt konfigurerat.

Om Apache inte startar, kontrollera om port 80 används av ett annat program. Skype och IIS är vanliga bovar. I Apache-inställningarna (Config → Apache → httpd.conf) kan du ändra porten från 80 till 8080.

Steg 2: Skapa en databas och installera WordPress

WordPress lagrar allt, sidor, inställningar, användare, i en MySQL-databas. Låt oss skapa den via phpMyAdmin.

• I XAMPP:s kontrollpanel klickar du på Admin-knappen i raden för MySQL. phpMyAdmin öppnas.
• Gå till fliken Databases i den övre vänstra menyn.
• Ange ett databasnamn, till exempel wordpress, och klicka på Create.

Databasen är klar. Nu, själva WordPress:

• Ladda ner den senaste versionen av WordPress och packa upp arkivet i mappen C:\xampp\htdocs\wordpress (du kan döpa mappen till något annat, det blir en del av den lokala webbadressen).
• Leta upp wp-config-sample.php i mappen och döp om den till wp-config.php.
• Öppna filen i valfri textredigerare och hitta blocket med MySQL-inställningar:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Spara filen och stäng redigeraren.
• Öppna http://localhost/wordpress/ i webbläsaren. Välj språk, skapa ett användarnamn och lösenord, klicka på Installera WordPress.

Klart. Du är inloggad i WordPress admin på din lokala maskin. Första milstolpen avklarad.

Steg 3: Välja ett tema

Nästan vilket tema som helst fungerar för en ensideswebbplats, men vi använder SiteOrigin North, det är gratis, responsivt och anpassat för att fungera med sidbyggaren SiteOrigin, som kommer in i bilden i nästa steg. Temat har stöd för en fast meny, så att besökare slipper scrolla tillbaka upp för att navigera till ett annat avsnitt.

Installation: Utseende → Teman → Lägg till nytt → ange SiteOrigin North → Installera → Aktivera. Temat är utvecklat av SiteOrigin-teamet, samma personer som gör tillägget Page Builder. Det blir inga konflikter.

Steg 4: SiteOrigin-tillägg, Page Builder och Widgets Bundle

Kärnan i vårt bygge, två gratistillägg från WordPress-förrådet:

• SiteOrigin Page Builder (siteorigin-panels), en drag-och-släpp-byggare med rutnät, layouter och inbyggd funktionalitet för scrollning på en sida (sedan version 2.3). Live-förhandsvisning, ren HTML-kod, över 500 000 aktiva installationer.
• SiteOrigin Widgets Bundle (so-widgets-bundle), en uppsättning widgetar: knappar, bilder, bildspel, kartor, priser och ytterligare ett tjugotal element. Allt som fyller layouter.

Installation: Plugins → Add New → sök efter SiteOrigin Page Builder och SiteOrigin Widgets Bundle ett i taget → Install → Aktivera båda. Det är just kombinationen av dessa två plugins som ger dig både byggaren och innehållet till layouterna. Anchor scrolling-funktionen är inbyggd i Page Builder, inga ytterligare plugins för single-page-funktionalitet behövs.

Steg 5: Bygga en sida i SiteOrigin Page Builder

Skapa en ny sida (Sidor → Lägg till ny). Ovanför standardredigeraren visas flikar, växla till Page Builder.

SiteOrigin Page Builder levereras med ett bibliotek av färdiga layouter. Klicka på Layouts-knappen ovanför redigeraren.

En katalog med förinställningar öppnas, från Fitness Gym till Agency. Välj en som passar (vi valde Fitness Gym), klicka på Infoga. Om det redan fanns innehåll på sidan frågar pluginet: infoga före, efter eller ersätt. För en tom sida spelar det ingen roll.

Spara sidan och öppna den. Växla till **Live **Editor, länken till den visas i WordPress övre admin-bar.

I Live Editor för du muspekaren över ett element och ser direkt vilken widget som ansvarar för det. Du kan redigera text, byta bilder och dra block, allt i realtid.

Steg 6: Ankar-ID:n och navigeringsmeny

Det sista steget är att länka menyalternativ till sidsektioner. Utan detta fungerar inte scrollningen.

I Live Editor, för muspekaren över den första raden efter Hero-blocket, klicka på skiftnyckelikonen och välj Redigera rad. Gå till fliken Attribut och i fältet Rad-ID anger du en identifierare, till exempel activities. Klicka på Klar.

Upprepa för varje rad med ett unikt ID: services, sedan pricing, sedan contact och så vidare. Spara sidan.

Nu menyn: Utseende → Menyer. Skapa en ny meny. Lägg till objekt via Anpassade länkar: i URL-fältet anger du #activities, i namnfältet "Activities". Upprepa för varje ID.

Viktig nyans: brädgården # är obligatorisk i menyalternativets URL (detta är HTML-ankarformatet), men i Rad-ID:t inuti Page Builder behöver du inte ange brädgården, byggaren förstår själv att det är en identifierare.

Mer information om att skapa menyer i WordPress finns i vår guide om att sätta upp navigering.

Spara menyn, tilldela den till ett temavisningsområde och öppna webbplatsen. Klicka på ett menyalternativ så scrollar sidan mjukt till den önskade sektionen.

⁉️🤔 Vanliga frågor

Är XAMPP obligatoriskt eller kan jag gå direkt till webbhotell?

XAMPP behövs för lokal testning. Om du redan har webbhotell med WordPress, hoppa över steg 1 och 2, gå direkt till tema och tillägg. Ankarlogiken fungerar på samma sätt både lokalt och på en liveserver.

Kan jag använda ett annat tema istället för SiteOrigin North?

Ja, nästan alla moderna WordPress-teman stöder enkelsidestruktur. Huvudsaken är att temat inte krockar med SiteOrigin Page Builder. Page Builder-utvecklarna garanterar kompatibilitet med de flesta teman från WordPress-förrådet.

Fungerar den här installationen på Mac eller Linux?

XAMPP är plattformsoberoende, versioner finns för Windows, macOS och Linux. På Mac kan du också använda MAMP (gratisversionen). WordPress- och tilläggsinstallation efter att en lokal server har satts upp är identisk på alla operativsystem.

Vad gör jag om Apache inte startar?

De två vanligaste orsakerna: port 80 är upptagen av ett annat program (Skype, IIS, en annan webbserver) eller så blockerar antivirusprogrammet nätverksaktivitet. Lösning: ändra Apache-porten till 8080 i httpd.conf eller avsluta den störande processen via netstat -ano | findstr :80 i kommandotolken.

Kan jag lägga till fler sektioner senare?

Ja. När som helst kan du gå in i Page Builder, lägga till en ny rad, tilldela den ett Rad-ID och skapa ett menyalternativ med samma ankare. Byggaren begränsar inte antalet sektioner.

Vad du fick på en timme

En fungerande enkelsidig webbplats på WordPress. Med en ankarmeny, mjuk scrollning, live editor och helt med gratisverktyg. Samma XAMPP + SiteOrigin-uppsättning fungerar även för kommersiella projekt: bygg en landningssida lokalt, testa den och flytta den till live-webbhotell via ett migreringstillägg.

Gör det till en regel: först lokalt bygge, sedan produktion. Detta sparar pengar på webbhotell under experiment och sparar nerver när något går fel.

Om materialet var till hjälp, prova att bygga din första enkelsidiga webbplats idag. XAMPP och WordPress laddas ner på fem minuter, och SiteOrigin-byggaren tar hand om all layout.