Att skapa snygga, flexibla och funktionella layouter i WordPress har aldrig varit enklare. Många användare installerar direkt olika design- eller layoutplugins, men sanningen är att WordPress core-block numera räcker väldigt långt. I många fall får du till och med renare kod, snabbare sidor och en mer framtidssäker lösning om du bygger dina layouter utan externa verktyg.
I den här guiden visar jag hur du skapar professionella, responsiva och visuellt tilltalande layouter med bara WordPress egna block. Perfekt för dig som vill minska antalet plugins, förbättra sidprestandan och samtidigt få full kontroll över designen.
Läs om hur du migrerar från Elementor till Gutenberg i min artikel.
Varför bygga layouter med WordPress core-block?
Det finns flera goda skäl att jobba med WordPress standardblock:
1. Färre plugins = snabbare och säkrare sidor
Varje plugin du installerar innebär kod som ska laddas, underhållas och uppdateras. Genom att använda WordPress core-block slipper du onödiga tillägg och minskar risken för konflikter eller säkerhetshål.
2. Full kompatibilitet i framtiden
WordPress Core-block utvecklas och underhålls av WordPress själva. Det gör att du kan lita på att funktionerna finns kvar och fortsätter förbättras.
3. Du får mer kontroll över designen
Moderna core-block – som Group, Stack, Row och Columns – är byggda för att kunna ersätta stora delar av vad populära page builders tidigare användes till.
4. Bättre stöd i blockteman och Site Editor
Med blockteman integreras core-blocken sömlöst i hela webbplatsen, från sidmallar till globala inställningar.
Läs mer om Gutenberg här.
Grundblocken du ska kunna för snygga layouter
Det finns fyra block som är extra viktiga när du bygger layout helt med core:
1. Group-block (Grupp)
Det mest flexibla blocket av alla. Group låter dig:
- skapa sektioner
- styra bakgrundsfärg eller bakgrundsbild
- lägga padding och margin
- begränsa bredden
- jobba med nested block
Group är grundstommen i en layout – tänk på det som en container.
2. Columns-block (Kolumner)
Perfekt för klassisk layout:
- två kolumner med text + bild
- tre kolumner för tjänster
- fyra kolumner för logotyper
- asymmetriska kolumner (t.ex. 30/70)
Fördel: WordPress skapar responsiva brytpunkter automatiskt.
3. Row och Stack (Rad och Stapel)
Dessa är relativt nya men extremt viktiga.
Row (Rad)
Används för horisontella layoutdelar, t.ex.:
- Menyliknande rader
- Ikon + text
- Bild bredvid kort text
- CTA-rader
Ger mycket kontroll över alignments och spacing.
Stack (Stapel)
Vertikal layout, perfekt för:
- Hero-sektioner
- Kort och boxar
- Testimonials
- Pristabeller
Stack fungerar också som en container som automatiskt sätter spacing mellan elementen.
4. Spacer (Avstånd)
Enkelt block – men otroligt användbart.
Ger dig luft och balans i layouten. Använd sparsamt men strategiskt.
Allt du behöver veta om spectra vs greenshift vs kadence: vilket blockplugin för wordpress passar din webbplats?
Så bygger du en snygg sida helt med WordPress core-block (steg för steg)
Här går vi igenom hur du bygger en modern, proffsig layout utan ett enda plugin.
Steg 1: Skapa en hero-sektion
- Lägg till ett Group-block
– Sätt bredden till full width
– Lägg till en bakgrundsbild eller färg
– Sätt 80–120px padding uppe och nere - Lägg in ett Stack-block
– Centrera innehållet
– Maxbredd 700–900px - Placera rubrik, ingress och eventuellt en knapp.
Tips:
Vill du ha en semi-transparent bakgrund? Lägg ett Group-block i Group-blocket och sätt färg + opacity.
Steg 2: Bygg en sektion med tre kolumner
För t.ex. tjänster eller fördelar.
- Lägg till ett Columns-block med 3 kolumner.
- I varje kolumn lägger du en ikon/bild, en rubrik och kort text.
- Sätt spacing via Columns-inställningarna.
- Lägg kolumnerna i ett Group-block för kontroll över padding och bakgrund.
Extra:
Vill du ha rundad kant runt kolumnerna? Lägg in ett Group-block i varje kolumn och ge border + padding.
Steg 3: Skapa en ”split layout” (text och bild)
Här använder du Row-blocket. (se bild nedan)
- Lägg till ett Row-block
- Placera en rubrik och text i vänstra delen och en bild i högra
- Sätt justify: space-between och align: center
Vill du byta sida på mobilen?
→ Använd inställningen för block order om den finns i ditt tema.
Steg 4: Bygg en snygg CTA-sektion
- Group-block
- Bakgrundsfärg (gärna accentfärg)
- Stack-block för rubrik + text + knapp
- Centrera
- Extra spacing
Avancerade tips för ännu snyggare layouter
1. Använd minsta möjliga antal block
Ju färre blockkombinationer du har, desto renare kod och snabbare sida.
2. Arbeta med inner blocks
Genom att lägga Group-block i andra Group-block får du full kontroll. Detta är samma metod som andra webbsidesbyggare arbetar med.
3. Skapa designkomponenter i Site Editor
Om du ofta använder samma typ av sektion kan du spara dem som:
- Synkroniserade block
- Malldelar
- Delade block
Det sparar enormt med tid.
4. Skapa visuellt djup utan bilder
Med bara core-block kan du skapa snygg design via:
- subtil bakgrundsfärg
- box-shadows (om ditt tema stödjer det)
- rundade hörn
- spacing
- variation i typografi
Det krävs inte alltid grafik för att skapa elegans.
Core-block som är ovärderliga men ofta glöms bort
Cover (Omslag)
Perfekt för bakgrundsbilder med text ovanpå. Ger också möjlighet till overlay.
Buttons
Moderna, flexibla och stilrena – du behöver sällan ett plugin för detta.
Separator
En enkel linje kan skapa mycket struktur.
SEO-optimering när du bygger layout med core-block
1. Använd semantiska block
Rubrik (H2/H3) ska alltid användas korrekt.
Group, Row och Columns är stylingcontainerblock, inte semantiska element.
2. Tänk på LCP – Largest Contentful Paint
Hero-bilden bör vara:
- komprimerad
- lazy load (om inte hero)
- rätt proportioner
3. Alt-texter på alla bilder
Det är inte bara bra för SEO utan även tillgänglighet.
4. Undvik tunga block
Vissa blockplugins skapar enormt mycket HTML. Core-block är däremot lätta och rena.
Exempel på komplett layout byggd utan plugins
Föreställ dig denna struktur:
- Hero (Group + Stack)
- Tjänster (Columns)
- Split layout (Row)
- Testimonials (Stack eller Columns)
- CTA (Group + Stack)
Allt detta kan du bygga med totalt 5 olika blocktyper. Det blir lättare att underhålla, snabbare att ladda och enklare att justera.
Sammanfattning
Du behöver inte en uppsjö av plugins eller avancerade verktyg för att skapa moderna, attraktiva och professionella WordPress-sidor. WordPress core-block räcker längre än de flesta tror. Genom att arbeta strategiskt med Group-, Columns-, Row- och Stack-blocken kan du skapa layout som är:
- responsiv
- snygg
- snabb
- lätt att underhålla
- framtidssäker
Det bästa av allt? Du slipper pluginberoenden och får en renare, stabilare och mer kontrollerad uppbyggnad.
Läs mer om hur du skräddarsyr gutenberg block för kunder.
Lämna en Kommentar