En nettside på én side er når alt innholdet ligger på én side, og menyen ikke fører til andre URL-er: ved klikk ruller siden jevnt til ønsket blokk. Ingen omlastinger, ingen tapte besøkende. Høres det ut som det du trenger for en landingsside, portefølje eller visittkort, ikke sant?

Men når det kommer til stykket, møter en nybegynner to vegger. Den første: «Jeg kan ikke kode.» Den andre: «Jeg trenger sikkert dyre utvidelser.» Begge veggene smuldrer opp i løpet av en time.

Du skal lage en fullverdig nettside på én side i WordPress med jevn rulling, ankerseksjoner og utelukkende gratis verktøy. Ikke en eneste linje med kode.

Hvis du foretrekker å se fremfor å lese, her er en visuell gjennomgang fra installasjon til publisering:

💡 Rask oversikt:

• Installer XAMPP, en lokal server for testing av WordPress på datamaskinen din
• Sett opp WordPress på en lokal maskin via phpMyAdmin og redigering av wp-config.php
• Velg et tema som er kompatibelt med én-side-struktur (vi bruker SiteOrigin North)
• Installer to gratis utvidelser fra SiteOrigin: Page Builder og Widgets Bundle
• Sett sammen en side fra ferdige oppsett, tilordne anker-ID-er og koble dem til menyelementer

Hvorfor en nettside på én side i det hele tatt

En én-side-side vinner over en klassisk flerside-nettside i bestemte scenarioer. Du kontrollerer rekkefølgen en besøkende konsumerer informasjon i: først verdien, så prisen, ikke omvendt. Ingen leting etter lenker i menyen.

Når dette fungerer

En fotografs portefølje, landingsside for tjenester, produktkampanjeside, firmavisittkort med fem seksjoner, alt dette passer på én rulleskjerm. Seks blokker med to til tre avsnitt på én side ser solid ut. De samme seks blokkene på seks forskjellige sider ser ut som en innholdsfattig side.

Mobil og hastighet

En én-side-side lastes én gang. Etter det er det bare rulling. En besøkende kan miste internett midt i lesingen og likevel rulle til slutten: siden er allerede i minnet. På en mobilskjerm føles dette som en app, ikke en nettside. Google bekreftet for lenge siden: mobil-først-indeksering har vært standarden siden 2018.

Når det ikke fungerer

Hundre bloggartikler, en kompleks nettbutikk, struktur på flere nivåer, det håndterer ikke en én-side-side. Rullingen blir endeløs, og SEO-en lider: søkemotorer elsker separate URL-er for hver meningsklynge.

Steg 1: Installere XAMPP på Windows

XAMPP er en gratis kryssplattform-pakke: Apache (webserver), MariaDB (database), PHP og Perl. Enkelt sagt gjør den datamaskinen din om til en lokal hosting der WordPress fungerer uten internett og uten betaling. Ideelt for testing og læringsbygg.

Installasjonsprosedyre på Windows:

• Gå til Apache Friends-nettstedet og last ned den nyeste versjonen av XAMPP for ditt system.
• Kjør installasjonsprogrammet. På velkomstskjermen klikker du Neste.
• På stadiet for komponentvalg lar du avmerkingsboksene for MySQL og phpMyAdmin være merket, dette er nok for WordPress. Resten kan fjernes: du kan legge dem til senere via kontrollpanelet om nødvendig.

• Velg en installasjonsmappe (standard er C:\xampp, du kan la den stå).
• På Bitnami-skjermen fjerner du avmerkingen for «Learn more about Bitnami for XAMPP», vi installerer WordPress manuelt. Klikk Neste.
• Vent til filene pakkes ut. La avmerkingsboksen «Launch control panel» stå og klikk Fullfør.

Hvis kontrollpanelet åpnet seg uten røde feil og Apache og MySQL er uthevet i grønt, fungerer serveren. Åpne en nettleser og gå til http://localhost/. Hvis du ser XAMPP-velkomstsiden, er alt konfigurert riktig.

Hvis Apache ikke starter, sjekk om port 80 er opptatt av et annet program. Skype og IIS er vanlige syndere. I Apache-innstillingene (Config → Apache → httpd.conf) kan du endre porten fra 80 til 8080.

Steg 2: Opprette en database og installere WordPress

WordPress lagrer alt, sider, innstillinger, brukere, i en MySQL-database. La oss opprette den via phpMyAdmin.

• I XAMPP-kontrollpanelet klikker du på Admin-knappen i MySQL-raden. phpMyAdmin åpnes.
• Gå til Databases-fanen i menyen øverst til venstre.
• Skriv inn et databasenavn, for eksempel wordpress, og klikk Create.

Databasen er klar. Nå, selve WordPress:

• Last ned siste versjon av WordPress og pakk ut arkivet til mappen C:\xampp\htdocs\wordpress (du kan gi mappen et annet navn, dette blir en del av den lokale URL-en).
• Finn wp-config-sample.php i mappen og gi den nytt navn til wp-config.php.
• Åpne filen i et tekstredigeringsprogram og finn blokken med MySQL-innstillinger:

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

• Lagre filen og lukk redigeringsprogrammet.
• Åpne http://localhost/wordpress/ i nettleseren. Velg språk, opprett et brukernavn og passord, klikk Installer WordPress.

Ferdig. Du er logget inn i WordPress-administrasjonen på din lokale maskin. Første milepæl er nådd.

Steg 3: Velge et tema

Nesten ethvert tema vil fungere for et enkeltside-nettsted, men vi bruker SiteOrigin North. Det er gratis, responsivt og skreddersydd for å jobbe med sidebyggeren SiteOrigin, som kommer inn i bildet i neste steg. Temaet støtter en fastlåst meny, slik at besøkende slipper å scrolle tilbake for å navigere til en annen seksjon.

Installasjon: Utseende → Temaer → Legg til nytt → skriv inn SiteOrigin North → Installer → Aktiver. Temaet er utviklet av SiteOrigin-teamet, de samme som lager Page Builder-utvidelsen. Det vil ikke oppstå konflikter.

Steg 4: SiteOrigin-utvidelser, Page Builder og Widgets Bundle

Kjernen i oppsettet vårt, to gratis utvidelser fra WordPress-depotet:

• SiteOrigin Page Builder (siteorigin-panels), en dra-og-slipp-bygger med rutenett, oppsett og innebygd funksjonalitet for enkeltside-rulling (fra versjon 2.3). Direkte forhåndsvisning, ren HTML-kode, over 500 000 aktive installasjoner.
• SiteOrigin Widgets Bundle (so-widgets-bundle), et sett med widgeter: knapper, bilder, glidebannere, kart, priser og to dusin andre elementer. Alt som fyller oppsettene.

Installasjon: Utvidelser → Legg til ny → søk etter SiteOrigin Page Builder og SiteOrigin Widgets Bundle én etter én → Installer → Aktiver begge. Det er nettopp kombinasjonen av disse to utvidelsene som gir deg både byggeverktøyet og innhold til layoutene. Anker-rullefunksjonaliteten er innebygd i Page Builder, du trenger ingen ekstra utvidelser for én-sides funksjonalitet.

Trinn 5: Bygge en side i SiteOrigin Page Builder

Opprett en ny side (Sider → Legg til ny). Over standardredigeringsprogrammet vil det dukke opp faner, bytt til Page Builder.

SiteOrigin Page Builder leveres med et bibliotek av ferdige layouter. Klikk på Layouts-knappen over redigeringsprogrammet.

En katalog med forhåndsdefinerte oppsett åpnes, fra treningssenter til byrå. Velg et passende (vi valgte treningssenter), klikk Sett inn. Hvis det allerede fantes innhold på siden, vil utvidelsen spørre: sett inn før, etter eller erstatt. For en tom side spiller det ingen rolle.

Lagre siden og åpne den. Bytt til **Live **Editor, lenken til den vises i den øverste WordPress-adminlinjen.

I Live Editor holder du musepekeren over et element og ser umiddelbart hvilken widget som styrer det. Du kan redigere tekst, bytte bilder og dra blokker, alt i sanntid.

Steg 6: Anker-ID-er og navigasjonsmeny

Det siste steget er å koble menyelementer til sideseksjoner. Uten dette vil ikke skrolling fungere.

I Live Editor holder du musepekeren over den første raden etter Hero-blokken, klikker på skiftenøkkelikonet og velger Rediger rad. Gå til fanen Attributter og i feltet Rad-ID skriver du inn en identifikator, for eksempel activities. Klikk Ferdig.

Gjenta for hver rad med en unik ID: services, deretter pricing, så contact, og så videre. Lagre siden.

Nå menyen: Utseende → Menyer. Opprett en ny meny. Legg til elementer via Egendefinerte lenker: i URL-feltet skriver du #activities, i navnefeltet «Aktiviteter». Gjenta for hver ID.

Viktig nyanse: firkanttegnet # er obligatorisk i menyelementets URL (dette er HTML-ankerformatet), men i Rad-ID inne i Page Builder trenger du ikke å sette firkanttegnet, byggeren forstår selv at det er en identifikator.

Flere detaljer om å opprette menyer i WordPress dekkes i vår guide om å sette opp navigasjon.

Lagre menyen, tilordne den til et temavisningsområde, og åpne nettstedet. Klikk på et menyelement, så vil siden rulle jevnt til den ønskede seksjonen.

⁉️🤔 Ofte stilte spørsmål

Er XAMPP obligatorisk, eller kan jeg gå rett til hosting?

XAMPP er nødvendig for lokal testing. Hvis du allerede har hosting med WordPress, hopp over steg 1 og 2, gå rett til tema og utvidelser. Ankerlogikken fungerer på samme måte både lokalt og på en live-server.

Kan jeg bruke et annet tema i stedet for SiteOrigin North?

Ja, nesten ethvert moderne WordPress-tema støtter enkeltsidestruktur. Hovedsaken er at temaet ikke kommer i konflikt med SiteOrigin Page Builder. Page Builder-utviklerne garanterer kompatibilitet med de fleste temaer fra WordPress-depotet.

Fungerer dette oppsettet på Mac eller Linux?

XAMPP er plattformuavhengig, versjoner finnes for Windows, macOS og Linux. På Mac kan du også bruke MAMP (gratisversjon). WordPress- og utvidelsesinstallasjon etter å ha satt opp en lokal server er identisk på alle operativsystemer.

Hva gjør jeg hvis Apache ikke starter?

De to vanligste årsakene: port 80 er opptatt av et annet program (Skype, IIS, en annen webserver) eller antivirus blokkerer nettverksaktivitet. Løsning: endre Apache-porten til 8080 i httpd.conf eller avslutt den forstyrrende prosessen via netstat -ano | findstr :80 på kommandolinjen.

Kan jeg legge til flere seksjoner senere?

Ja. Gå når som helst inn i Page Builder, legg til en ny rad, tilordne den en Rad-ID, og opprett et menyelement med det samme ankeret. Byggeren begrenser ikke antall seksjoner.

Hva du oppnådde på en time

Et fungerende enkeltside-nettsted på WordPress. Med en ankermeny, jevn skrolling, live editor, og utelukkende med gratis verktøy. Det samme XAMPP + SiteOrigin-oppsettet fungerer også for kommersielle prosjekter: bygg en landingsside lokalt, test den, og overfør den til live-hosting via en hvilken som helst migreringsutvidelse.

Gjør det til en regel: først lokal bygging, så produksjon. Dette sparer penger på hosting under eksperimenter og sparer nerver når noe går galt.

Hvis materialet var nyttig, prøv å bygge ditt første enkeltside-nettsted i dag. XAMPP og WordPress laster ned på fem minutter, og SiteOrigin-byggeren tar seg av alt layoutarbeidet.