Hvordan lage WordPress-sider uten temaer med Gutenberg-blokker

Å lage WordPress-sider uten temaer med Gutenberg-blokker er en metode for å lage raske, enkle og håndterbare sider uten å være avhengig av tunge ferdige temaer og tredjeparts sidebyggere. WordPress' innebygde blokkredigerer, blokkmaler, maldeler og globale stiler gir en effektiv måte å bygge sider på. Teknisk sett er det alltid et tema aktivert i WordPress; men her betyr tilnærmingen uten tema at den visuelle designen i stor grad skapes uavhengig av temaer og plugin-baserte sidebyggere ved hjelp av Gutenberg-blokker. Resultatet: mindre kode, bedre Core Web Vitals, enklere vedlikehold og at innholdsteamet trenger mindre hjelp fra utviklere.

I 2026 vil en av de viktigste målene for WordPress-nettstedeiere være å tilby sider som åpner raskt for besøkende og er lett forståelige av søkemotorer. Spesielt Googles AI-oversikter og moderne søkeopplevelser gjør arkitekturen av informasjon, semantiske overskrifter, rask lasting og pålitelige innholdssignaler mer synlige. Den Gutenberg-baserte tilnærmingen uten tema gir et praktisk grunnlag for å møte disse kravene, ettersom den reduserer unødvendige shortcode-lag, komplekse tema-paneler og overdimensjonerte CSS/JavaScript-filer.

I denne guiden vil vi gi en praktisk oversikt for Hostragons-bloggen om hvordan du kan designe sider på WordPress kun med Gutenberg-blokker, trinn for trinn. Vi vil forklare hele prosessen fra installasjonslogikk til malopprettelse, ytelsesinnstillinger og SEO-kontroller med konkrete eksempler. Hvis du ikke allerede har en WordPress-plattform, er det viktig å velge en webhosting med en rask og oppdatert PHP-versjon: WordPress hosting pakker. Hvis du ikke har et domene, kan du begynne med å sikre merkevaren din via Domenesjekk og registrering-siden.

Hva betyr det å lage WordPress-sider uten tema?

Tilnærmingen uten tema, eller theme-less, betyr ikke at WordPress kan fungere helt uten et tema. WordPress-kjernen krever, på grunn av sin malhierarkiske struktur og stilinnlastingslogikk, et tema. Målet her er å fristille den visuelle siden av produksjonen fra tunge temaer og i stedet styre mesteparten av designet med Gutenberg-blokker. For dette brukes vanligvis et lett blokk-tema, et tomt start-tema eller et minimalistisk tema som støtter Full Site Editing.

I den klassiske metoden installerer brukeren først et funksjonsrikt tema, legger deretter til en sidebygger-plugin, og designer hver side med pluginens eget layoutsystem. Denne strukturen kan virke enkel i starten, men kan med tiden føre til oppdateringsproblemer, ytelsestap, designlåsing og portabilitetsproblemer. I Gutenberg-tilnærmingen lagres innholdet i WordPress' native blokkformat. Dette betyr en mer portabel og enkel struktur på lang sikt.

Hvem passer denne tilnærmingen for?

• Bedrifter som ønsker å lage en bedriftsprofil, tjenesteside eller landing page.
• Innholdsteam som administrerer blogger, guider, dokumentasjon eller informasjons sentre.
• Nettsideeiere som ønsker å redusere kostnadene for page builder-lisenser.
• SEO-team som prøver å forbedre Core Web Vitals-poengene.
• Prosjekter som byråer kan overføre til kunder, og som er enkle å oppdatere.

Prosjekter som krever spesielle funksjoner som e-handel, medlemskap eller avansert reservasjon kan fortsatt kreve plugins. Men mange strukturer som sideoppsett, overskriftsfelt, ikonbokser, referanser, prissider, call-to-action-seksjoner og FAQ kan enkelt opprettes med Gutenberg-blokker.

Hvorfor bør du lage sider kun med Gutenberg-blokker?

Gutenberg er WordPress' standardredigerer og, fra 2026, er det ikke bare en tekstredigerer, men også et sentralt fundament for nettstedredigering. Blokk-temaer, maldeler, globale stiler, mønstre og gjenbrukbare blokker gjør byggingen av nettsteder mer lokal og ytelsesfokusert.

1. Mindre kode, raskere sider

Tungete temaer og visuelle byggere laster ofte CSS og JavaScript-filer som ikke brukes på hver side. For eksempel kan det å laste 800 KB ekstra stil og script for en enkel tjenesteside negativt påvirke LCP-verdien på mobile tilkoblinger. I en enkel side bygget på Gutenberg, vil den totale sidevekten tydelig reduseres når bare de nødvendige stilene for de brukte blokkene lastes inn. Praktisk kan en godt optimalisert Gutenberg-side ha en total størrelse på under 1 MB.

2. Enklere vedlikehold og oppdatering

Den blokkbaserte strukturen som er kompatibel med WordPress-kjernen reduserer vedlikeholdsrisikoen på lang sikt. Når du deaktiverer en page builder-plugin, kan innholdet bli til en haug av kortkoder. Med Gutenberg forblir innholdet i blokker, noe som gir en stor fordel når du flytter nettstedet til et annet tema eller oppdaterer designet.

3. Mindre teknisk avhengighet for innholdsteamet

Takket være blokkmaler kan et teammedlem bruke den samme tjenesteboksen, referansefeltet eller CTA-seksjonen konsekvent flere ganger. For eksempel kan salgsteamet ditt legge til forhåndsbygde hero-seksjoner, funksjonskort og FAQ-blokker uten å måtte kontakte utvikleren når de lager en ny kampanjeside.

4. Renere HTML-struktur for SEO

Når Gutenberg-blokker brukes riktig, produserer de semantiske overskrifter, lister, tabeller og avsnitt. Denne strukturen gjør det lettere for søkemotorer å forstå innholdet. Selvfølgelig garanterer det ikke SEO-suksess å bruke Gutenberg alene; men ren HTML, rask lasting og en ryddig innholdsarkitektur er et sterkt utgangspunkt.

Sammenligning av Gutenberg-temas-tilnærmingen og klassisk page builder

Nødvendig infrastruktur før du begynner

Den viktigste forberedelsen for å lage Gutenberg-sider uten tema er å sette opp en infrastruktur der WordPress fungerer stabilt og raskt. Uansett hvor enkel sideutformingen er, vil en treg serverrespons eller en utdaterte PHP-versjon begrense ytelsen.

Anbefalt teknisk plattform

• Bruk den nyeste versjonen av WordPress.
• Velg PHP 8.2 eller høyere versjoner; hvis mulig, la den oppdaterte versjonen være valgbart i hosting-panelet ditt.
• Bruk en oppdatert MySQL- eller MariaDB-versjon på databasesiden.
• Installer et gyldig SSL-sertifikat for HTTPS: produkter for SSL-sertifikat.
• Aktiver automatisk sikkerhetskopiering og enkel gjenoppretting.
• Vurder server-side caching og CDN-alternativer: web hosting løsninger.

I WordPress-fokuserte hostingplattformer som Hostragons kan denne forberedelsesprosessen fullføres raskere med ett klikk-installasjon, SSL-administrasjon, sikkerhetskopiering og ytelsesalternativer. Målet her er å redusere tekniske flaskehalser før designfasen.

Trinn for trinn: Lage sider kun med Gutenberg-blokker

Prosessen nedenfor kan brukes til å lage et eksempel på en bedrifts tjenesteside eller en konverteringsfokusert landing page. Vi har inkludert punkter å være oppmerksom på både med tanke på design, SEO, tilgjengelighet og ytelse i hvert trinn.

Trinn 1: Velg et lett blokk-tema eller start-tema

Den første avgjørelsen for den temasløse tilnærmingen er å velge et minimum intervensjonelt grunnlag. Twenty Twenty-Four eller lignende blokk-temaer som støtter Full Site Editing er passende for oppstart. Alternativt kan en tom blokk-tema struktur brukes i byråprosjekter. Det viktigste er at temaet ikke har unødvendige glidere, ikonpakker, animasjonsbiblioteker og komplekse paneler.

Når du velger, still deg selv følgende spørsmål: Støtter temaet Gutenberg-blokker naturlig? Kan farger og typografi styres via globale stiler? Kan maler endres? Legger det til unødvendige elementer i sidevekten? Hvis du ikke får positive svar på disse fire spørsmålene, velg et enklere alternativ.

Trinn 2: Definer din globale stilguide

Å lage en side med blokker betyr ikke at hver blokk skal designes tilfeldig. Først må stilguiden defineres. For eksempel kan 2 hovedfarger, 1 aksentfarge, 2 skrifttyper, 3 overskriftsstørrelser og standard avstandsmålinger være tilstrekkelig for et bedriftsnettsted. Hvis du definerer disse beslutningene i Stiler-delen i Site Editor, sikrer du konsistens på alle sider.

• H1-overskriften skal kun brukes én gang og tydelig beskrive hovedtemaet på siden.
• H2-overskrifter representerer hovedseksjoner, mens H3-overskrifter representerer underdetaljer.
• Farge på knapper bør gi tilstrekkelig kontrast mot bakgrunnen.
• I mobilvisning bør blokkavstandene balanseres mellom 24-48 piksler.

Trinn 3: Bygg side-strukturen med innholdet i fokus

Innholdshierarkiet bør planlegges før det visuelle. En eksempel på en tjenesteside kan bygges i følgende rekkefølge: hero-seksjon, problemdefinisjon, løsningens fordeler, funksjonskort, prosess-trinn, referanser, pris- eller pakkesammendrag, FAQ og siste CTA-seksjon. Denne rekkefølgen tar brukeren fra spørsmålet til løsningen og deretter til handling.

I Gutenberg kan denne strukturen opprettes med Grupper, Kolonner, Overskrift, Avsnitt, Liste, Knapp, Bilde, Tabell og Detaljer-blokker. For eksempel for å vise tre tjenestefordeler, kan du legge til en Overskrift, et kort Avsnitt og et lite ikonbilde i hver kolonne i Kolonner-blokken. Hvis du bruker ikoner, husk å optimalisere SVG-filer og vurdere å la alternativ tekst stå tom for dekorative ikoner.

Trinn 4: Design hero-seksjonen lett og klar

Hero-seksjonen er den første skjermen på siden. Den vanligste feilen her er å bruke store videobakgrunner eller bilder over 2 MB. For en enkel, men effektiv hero-seksjon med Gutenberg, er Cover-blokken eller Group-blokken tilstrekkelig. Hvis du bruker et bakgrunnsbilde, anbefales det å velge WebP eller AVIF-format, og 1200 piksler bredde er tilstrekkelig for de fleste scenarier.

Hero-seksjonen bør inneholde tre elementer: en tydelig H1, en 1-2 setning forklaring som beskriver fordelen, og én primær CTA-knapp. For eksempel, på en hosting-side kan H1 beskrive den raske WordPress-hostingløsningen; CTA kan oppfordre til å se på pakkene: WordPress hosting pakker.

Trinn 5: Bruk blokkmaler og synkroniserte maler

En av de kraftigste funksjonene i Gutenberg er maler. Hvis du skal bruke den samme CTA-seksjonen på fem forskjellige sider, kan du opprette en synkronisert mal. På denne måten kan du oppdatere telefonnummeret, kampanjeteksten eller knappelenken fra ett sted. Maler som ikke er synkroniserte er derimot egnet for å opprettholde designstrukturen mens du fritt endrer teksten på hver side.

I byråpraksis sparer følgende maler betydelig tid: tredoblede funksjonskort, kunde-logo-stripe, bilde- og tekstområde i to kolonner, prissammenligningstabell, FAQ-seksjon, kontaktside. Når du navngir disse malene, bruk lettfattelige etiketter for teamet; for eksempel Tjeneste - Tredoble Fordelskort.

Trinn 6: Rediger header og footer med maldeler

I blokk-temaer som støtter Full Site Editing kan du også redigere header og footer med blokker. For header er blokker for Logo, Navigasjon og Knapp vanligvis tilstrekkelige. I footeren bør det være en kort beskrivelse av merket, viktige sidekoblinger, kontaktinformasjon og lovpålagte sider.

Vær oppmerksom på at mobilnavigasjonen er enkel å bruke. Å begrense menyelementene til 5-7 hovedkoblinger er ideelt for de fleste bedriftsnettsteder. Altfor store menyer kan være overveldende for brukeren og øker dybden på navigeringen. Hvis du har kommersielle prioriteringer som domene, hosting, SSL og støtte-sider, bør du gruppere dem under logiske kategorier: Domene tjenester, produkter for SSL-sertifikat.

Trinn 7: Gjør mediaoptimalisering til en del av sideproduksjonen

Gutenberg-sider kan være lette, men uoptimaliserte bilder kan ødelegge den fordelen. Størrelse hvert bilde før du laster det opp. Å laste opp et teambilde i 3000 piksler bredde når det ikke skal brukes i full bredde, er unødvendig. Bruk WebP eller AVIF-format, skriv beskrivende filnavn og legg til alternativ tekst for meningsfulle bilder.

• Prøv å holde hero-bildet under 150 KB hvis mulig.
• Innholdsbildene bør vanligvis være mellom 80-180 KB.
• Vær forsiktig med det kritiske første bildet hvis lazy loading er aktivert som standard.
• Unngå unødvendig bruk av gallerier og karuseller.

Bruke Gutenberg-blokker for SEO på riktig måte

Å lage sider uten temaer med Gutenberg-blokker gir et sterkt grunnlag for SEO; men det krever riktig anvendelse. I 2026 SEO-standarder er ikke bare bruken av søkeord viktig, men også innholdsopplevelsen, teknisk kvalitet og tillitsignaler.

Planlegg overskrifthierarkiet

Bruk kun én H1 på hver side. Bruk H2 for hovedseksjoner og H3 for underforklaringer. Ikke bruk H2 bare for å se stort ut; i stedet bør du justere blokktypografi-innstillingene. Søkemotorer og skjermlesere leser overskriftsstrukturen som et innholdskart.

Gi klare svar for snippets og AI-oversikter

I første avsnitt, gi en klar definisjon av emnet og det grunnleggende svaret. Støtt deretter innholdet med lister, tabeller og trinn-for-trinn forklaringer. For eksempel i denne artikkelen definerer det første avsnittet direkte opprettelsen av sider uten temaer med Gutenberg. Denne tilnærmingen skaper et mer passende innholdsformat for fremhevede snippets og AI-drevne søkeoppsummeringer.

Plasser interne lenker naturlig

Interne lenker er nødvendige ikke bare for SEO, men også for brukerreisen. Når WordPress-installasjonen beskrives, bør det være en kobling til hosting, en kobling til SSL i sikkerhetsdelen, og en kobling til domenet i merkevarens introduksjon. For eksempel, for en bruker som oppretter et nytt nettsted, vil Hvordan installere WordPress og Domenesjekk og registrering være naturlige neste trinn.

Ikke se bort fra strukturerte data

Gutenberg løser ikke alle behov for schema på egen hånd. For FAQ, artikler, produkter eller lokale virksomhetsskjemaer kan SEO-plugins eller spesielle schema-løsninger brukes. FAQ-seksjonen på slutten av denne artikkelen er strukturert i et passende spørsmål-svar-format for FAQ-schema. Men når du legger til schema, bør du ikke merke opp spørsmål som ikke vises på siden, og du bør ikke bruke villedende informasjon.

Ytelse og Core Web Vitals sjekkliste

I 2026 vil LCP, INP og CLS-metrikker fortsatt spille en kritisk rolle for en god brukeropplevelse. Selv om du lager enkle sider med Gutenberg, bør du ikke ta avgjørelser uten å måle. PageSpeed Insights, Chrome DevTools og faktiske brukerdata er verdifulle i denne sammenhengen.

• LCP: Optimaliser hero-bildet for rask lasting av den første store innholdsobjektet, og reduser serverresponsen.
• INP: Fjern unødvendige JavaScript-plugins for å redusere forsinkelser i brukerinteraksjoner.
• CLS: Definer bredde og høydeverdier for bilder, og reserver plass for annonser eller elementer som lastes inn senere.
• TTFB: Bruk kvalitetshosting, caching og oppdatert PHP-versjon: Rask webhostingløsninger.
• Mobilopplevelse: Hold knappene i klikkbare størrelser og gjør teksten lesbar på små skjermer.

Som et reelt eksempel kan en enkel tjenesteside bestående av 12 blokker, med bare 4 optimaliserte bilder, 1 tabell og 2 CTA-områder, holde sidevekten mellom 700-950 KB. Den samme siden kan overstige 2,5 MB med en tung sidebygger og animasjonspakker. Denne forskjellen kan spesielt påvirke konverteringsratene for mobile besøkende.

Sikkerhet, sikkerhetskopiering og bærekraft

Den temasløse Gutenberg-tilnærmingen kan redusere antallet plugins og dermed angrepsflaten. Men dette betyr ikke at sikkerheten blir ivaretatt automatisk. Du bør holde WordPress-kjernen, temaet og pluginene oppdatert; bruke sterke passord, to-faktor autentisering og regelmessige sikkerhetskopier.

SSL-sertifikat er ikke bare standard for betalingsider, men for alle nettsteder. Nettsteder uten HTTPS kan fremstå som usikre i nettleserne og miste brukerens tillit. Derfor er det viktig å fullføre SSL-installasjonen før du går live: produkter for SSL-sertifikat. Sørg også for å ta en full sikkerhetskopi før designendringer. Feil endringer på blokkmaler og maldeler kan påvirke hele nettstedets utseende.

Siste sjekkliste før publisering

Før du publiserer siden din, bør du sjekke ikke bare det visuelle, men også innholdet, SEO, tekniske aspekter og tilgjengelighet. Listen nedenfor kan brukes som et praktisk kvalitetskontrollsteg.

• Sjekk at det kun finnes én H1 på siden.
• Sikre at meta-tittel og meta-beskrivelse er i samsvar med sidehensikten.
• Test alle knappelenker.
• Kontroller mobil-, nettbrett- og desktop-forhåndsvisninger.
• Gå gjennom bildenes filstørrelser og alternativtekst.
• Kontroller at interne lenker gir ekte verdi for brukeren.
• Mål sidehastigheten med PageSpeed Insights.
• Test SSL, omdirigeringer og canonical-innstillinger.
• Hvis det er et skjema, test innsending og e-postlevering.
• Ta en sikkerhetskopi før publisering.

Vanlige feil og praktiske løsninger

Å installere en ny plugin for hver seksjon

Gutenbergs grunnleggende blokker kan dekke mange behov. Å installere en plugin for en enkel knapp, tabell eller kolonnelayout kan unødvendig øke nettstedet. Prøv først å løse med kjernens blokker; hvis det er virkelig nødvendig, velg lette og regelmessig oppdaterte blokk-plugins.

Å tenke på design før innholdet

Visuelt design er viktig; men hvis formålet med siden ikke er klart, vil designet ikke føre til konvertering. Først bestem målgruppen, søkeintensjonen og den primære handlingen for siden. Deretter kan du bygge blokkstrukturen deretter.

Å bruke blokker inkonsekvent

Å bruke forskjellige avstander, farger og knappestiler på hver side svekker merkeopplevelsen. Globale stiler og maler er derfor kritisk viktige. Hvis du først etablerer et lite designsystem, vil det bli enklere å opprettholde oppsettet selv på en 30-siders nettside.

Å utsette ytelsesoptimalisering

Ytelsesoptimalisering er ikke det siste steget, men en del av produksjonsprosessen. Optimaliser bildene når du laster dem opp, unngå unødvendige animasjoner når du velger blokker, og velg riktig hostinginfrastruktur fra starten av. På denne måten unngår du store rengjøringsoperasjoner i etterkant.

Kort oppsummering og neste steg

Å lage sider uten temaer med Gutenberg-blokker i WordPress er en enkel, rask og bærekraftig metode for moderne nettsteder. Teknisk sett fortsetter du å bruke et tema; men i stedet for tunge tema-paneler og avhengighet til page builders, drar du nytte av WordPress' native blokk-infrastruktur. Riktig hosting, SSL, optimaliserte bilder, jevnlig overskrifts-hierarki og gjenbrukbare blokkmaler styrker både brukeropplevelsen og SEO-ytelsen.

Hvis du planlegger å opprette et nytt WordPress-nettsted, bør du først forberede den solide infrastrukturen; deretter kan du lage et enkelt designsystem med Gutenberg-blokker. Du kan begynne prosjektet ditt trygt ved å utforske Hostragons' WordPress-kompatible hosting, domene og SSL-løsninger: WordPress hosting pakker.

Ofte stilte spørsmål

Kan WordPress fungere helt uten tema?

Nei. WordPress trenger teknisk sett alltid et aktivt tema. Den temasløse tilnærmingen reduserer avhengigheten av tunge temaer og page builders og gjør det mulig å styre sideutformingen med Gutenberg-blokker.

Kan man lage profesjonelle bedriftsnettsteder med Gutenberg?

Ja. Profesjonelle bedriftsnettsteder kan lages ved å bruke blokk-temaer, globale stiler, maldeler og blokkmaler. Tjenestesider, blogger, landing page-strukturer og FAQ-seksjoner kan enkelt opprettes med Gutenberg.

Er Gutenberg-sider fordelaktige for SEO?

De kan være fordelaktige når de brukes riktig. Ren HTML, ryddig overskrifts-hierarki, rask lasting og enkel innholdshåndtering bidrar til SEO. Men for vellykket SEO kreves det også kvalitetsinnhold, teknisk optimalisering og interne lenkestrategier.

Bør jeg fjerne page builder-plugins helt?

Det er ikke nødvendig for hvert prosjekt. Hvis ditt eksisterende nettsted fungerer godt med en page builder, kan en gradvis overgang være tryggere. Du kan begynne å bruke Gutenberg på nye sider og teste kritiske sider for å forenkle over tid.

Hvilke hosting-funksjoner er viktige for den temasløse Gutenberg-tilnærmingen?

Oppdatert PHP-versjon, rask disk-infrastruktur, SSL-støtte, automatisk sikkerhetskopiering, caching og enkel WordPress-administrasjon er viktige. Disse funksjonene gjør ytelsesfordelene ved blokkbaserte enkle sider mer synlige.