DESIGN SYSTEM
Trähus Style Guide
Ett designsystem byggt för att kommunicera yrkesstolthet, kunskap och passion för trä och historia.
Version
2.59.5
Uppdaterad
juni 2026
Typsnitt
Chronicle SSm + Inter
01
Designprinciper
Fyra principer som styr all design för Trähus.
Luftigt & Generöst
Ge innehållet utrymme att andas. White space skapar lugn och fokus. Aldrig trångt eller rörigt.
Autentiskt & Ärligt
Visa det riktiga hantverket. Använd bilder från faktiska projekt. Ingen fejkad perfektion.
Tidlöst & Klassiskt
Designen ska kännas relevant om 10 år. Undvik trender och modenycker. Bygg på beprövade principer.
Subtilt & Sofistikerat
Animationer ska vara mjuka och nästan omärkliga. Inga flashiga effekter eller distraktioner.
02
Tone of Voice
Hur vi skriver och kommunicerar. Tre principer styr all text.
”Att restaurera ett gammalt hus handlar inte om att göra det nytt — det handlar om att ge det möjlighet att åldras värdigt.”
— Trähus, tonalitet
01
Kunnig men inte överlägsen
Vi delar vår expertis generöst utan att vara nedlåtande. Använd facktermer när det är naturligt, men förklara alltid.
02
Passionerad men lugn
Vår entusiasm lyser igenom utan att bli överdriven. Undvik utropstecken och säljspråk.
03
Personlig men professionell
Vi tilltalar läsaren direkt (du/ni) men behåller en respektfull ton. Aldrig slang eller vardagligt språk.
03
Färgpalett
Nio pigmentfärger inspirerade av traditionella linoljefärger — kromoxidgrön, umbra och järnoxid. Varje färg visas i fem steg från rent pigment till uttunning med vitt inblandat.
Gröna
Bruna
Neutral
| Token | Användning | Kontrast |
|---|---|---|
| primary | Knappar, navbar, CTA-bakgrunder, hero-cover | AA |
| primary-dark | Hover-states, footer, djupare sektioner | AAA |
| secondary | Sekundära knappar, dekorativa linjer, bildtexter | AA |
| accent | Highlights, aktiva states, kicker-text | Ej text på ljus bg |
| hero-sand | Hero-bakgrund: Ardbeg green | — |
| hero-rust | Hero-bakgrund: Bränd umbra | — |
| hero-sage | Hero-bakgrund: Gysinge gröngrå | — |
| hero-jarnoxid | Hero-bakgrund: Järnoxidbrun | — |
| surface-alt | Sidbakgrund, kortbakgrunder, ljusa sektioner | — |
| surface | Ren vit yta, modaler, kort | — |
| black | Stark kontrast, mörka sektioner | AAA |
| text | Rubriker och brödtext | AA |
| text-muted | Bildtexter, metadata, sekundär info | AA |
04
Typografi
Chronicle ScreenSmart för rubriker och brödtext. Inter för navigation och UI-element.
Chronicle ScreenSmart
Huvudtypsnitt för rubriker och brödtext. Från Hoefler & Co. Optimerat för skärm med generös x-höjd och öppna former.
Chronicle ScreenSmart
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö 0123456789
CSS: font-family: ’Chronicle SSm A’, ’Chronicle SSm B’, Georgia, serif
Inter
Sans-serif för navigation, knappar, bildtexter och UI-element. Versaler med letter-spacing för navigation.
Om oss · Projekt · Team · Kontakt
CSS: font-family: ’Inter’, -apple-system, BlinkMacSystemFont, sans-serif
Rubrikhierarki
Display — Trähus
H1 — Vi bevarar historien
H2 — Hantverk i generationer
H3 — Våra projekt
H4 — Restaurering av kulturarv
H5 — Bevarandemetoder
H6 — Detaljarbete
Typografisk skala
| Token | Storlek (fluid) | Användning |
|---|---|---|
| display | clamp(3rem, 2rem + 5vw, 6rem) | Hero-rubriker, landing pages |
| 3xl | clamp(2.5rem, 1.8rem + 3.5vw, 4rem) | H1, sektionsrubriker |
| 2xl | clamp(2rem, 1.5rem + 2.5vw, 3rem) | H2, undersektioner |
| xl | clamp(1.5rem, 1.2rem + 1.5vw, 2rem) | H3, korttitlar |
| lg | clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem) | H4, ingress |
| md | clamp(1.125rem, 1rem + 0.6vw, 1.25rem) | H5, framhävd text |
| base | clamp(1rem, 0.9rem + 0.5vw, 1.125rem) | Brödtext, H6 |
| sm | clamp(0.875rem, 0.8rem + 0.35vw, 1rem) | Bildtexter, metadata |
| xs | clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem) | Kicker-text, labels |
Brödtext
Large: Trähus grundades med en vision att bevara och restaurera historiska träbyggnader med traditionella hantverksmetoder.
Base: Varje projekt börjar med en noggrann inventering av byggnaden. Vi dokumenterar konstruktion, material och skador för att skapa en restaureringsplan som respekterar husets historia och karaktär.
Small: Våra hantverkare har mångårig erfarenhet av traditionella byggtekniker, från timring och handhyvling till klassisk fönsterrenovering.
Extra small: Foto: Villa Ekbacken, Sibbo 2024. Restaurering av timmerstomme och fönster.
05
Spacing
Fluid spacing med clamp() för harmoni på alla skärmstorlekar.
clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem)
clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem)
clamp(0.75rem, 0.6rem + 0.75vw, 1rem)
clamp(1rem, 0.8rem + 1vw, 1.5rem)
clamp(1.5rem, 1.2rem + 1.5vw, 2rem)
clamp(2rem, 1.5rem + 2.5vw, 3rem)
clamp(3rem, 2rem + 5vw, 5rem)
clamp(5rem, 4rem + 8vw, 10rem)
| Token | Värde (fluid) | Användning |
|---|---|---|
| 2xs | clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem) | Minimalt mellanrum, ikon-gap |
| xs | clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem) | Tight padding, list-gap |
| sm | clamp(0.75rem, 0.6rem + 0.75vw, 1rem) | Knapp-padding, kort mellanrum |
| md | clamp(1rem, 0.8rem + 1vw, 1.5rem) | Standard block-gap |
| lg | clamp(1.5rem, 1.2rem + 1.5vw, 2rem) | Kort-padding, gruppmellanrum |
| xl | clamp(2rem, 1.5rem + 2.5vw, 3rem) | Sektions-inre padding |
| 2xl | clamp(3rem, 2rem + 5vw, 5rem) | Sektions-separator |
| section | clamp(5rem, 4rem + 8vw, 10rem) | Mellan huvudsektioner |
06
Knappar
Rundade knappar med tydlig hierarki. Inter typsnitt, font-weight 500, border-radius 8px.
Primära knappar
Primär för huvudåtgärder, sekundär för alternativ, accent för framhävning.
Outline-knappar
Sekundära call-to-actions och kompletterande handlingar.
På mörk bakgrund
Inverterade knappar för hero-sektioner och mörka bakgrunder.
07
Komponenter
Återanvändbara element som bygger upp sidorna.
Separator
Citat
”I varje fog, varje hyvlad yta, varje handsmitt spik finns århundraden av kunskap. Vi för den traditionen vidare.”
— Trähus hantverkare
Listor
Oordnad lista
- Restaurering av timmerstommar
- Fönsterrenovering och tillverkning
- Kök i massivt trä
- Ytbehandling med linoljefärg
Ordnad lista
- Inventering och dokumentation
- Restaureringsplan
- Materialval och provning
- Genomförande och uppföljning
Tabeller
| Tjänst | Beskrivning | Tidsram |
|---|---|---|
| Timmerrestaurering | Utbyte och reparation av skadat timmer | 4–12 veckor |
| Fönsterrenovering | Renovering av originalbågar och glas | 2–6 veckor |
| Kökssnickeri | Platsbyggda kök i massivt trä | 6–10 veckor |
08
Innehållsblock
Återanvändbara sektioner för att bygga innehållsrika sidor.
Statistik
37
År i branschen
150+
Projekt
12
Hantverkare
98%
Nöjda kunder
Call to Action
Har du ett projekt i tankarna?
Vi hjälper dig att bevara och förädla ditt hus med respekt för dess historia.
09
Masonry Grid
Dynamisk grid som hämtar projekt med filtrering och lightbox. Från parent-temat agoodsite-fse.
Restaurering av ursprungliga fönster och takarbeten på gårdsbyggnaden vid Korkeavuorenkatu 19.
Restaurering av barnhusets fasad, bottenbjälklag, fönster och ytterdörrar på Folkhälsans Breidablick.
Fasad-, tak-, fönster-, dörr- och interiörrestaurering av Grankullas första villa.
Helhetsrestaurering av ett trähus från 1938 med specialtillverkad inredning, dörrar och fönster.
Helhetsrestaurering av en timmervilla från 1940-talet med ytskikt, kök, grovkök och tekniska system.
Restaurering av Saarela gårds huvudbyggnad från 1876 efter mer än femtio år utan uppvärmning.
10
Animationer
Subtila animationer som förbättrar upplevelsen utan att distrahera. GSAP via parent-temat.
Timing
- Fast: 150ms — hover, fokus
- Normal: 250ms — de flesta övergångar
- Slow: 400ms — element som glider in
Easing
- Standard: ease (CSS transitions)
- Scroll: power2.out (GSAP)
- Stagger: 50ms mellan element
Scroll-animationer
- fade-up: Glider in underifrån (20px)
- fade-in: Tonas in utan rörelse
- scale-in: Från 0.95 till 1
Undvik alltid
- Bounce eller elastic easing
- Animationer längre än 600ms
- Parallax som distraherar från innehåll
11
Tillgänglighet
WCAG 2.1 AA-nivå är minimum. Alla ska kunna uppleva webbplatsen.
Färgkontrast
Minst 4.5:1 för normal text, 3:1 för stor text (18px+). Testa alltid med kontrastchecker.
Fokus-states
Synliga fokusmarkeringar på alla interaktiva element. Använd :focus-visible för ren upplevelse.
Alt-texter
Alla bilder ska ha beskrivande alt-texter. Dekorativa bilder: alt=””. Beskriv vad bilden visar, inte vad den ”är”.
Tangentbord
Alla funktioner ska kunna användas med enbart tangentbord. Tab-ordning ska vara logisk och förutsägbar.
Semantisk HTML
Använd rätt HTML-element: <nav>, <main>, <article>, <aside>. Rubrikhierarkin ska vara logisk (h1→h2→h3).
Rörelse & animation
Respektera prefers-reduced-motion. Alla animationer stängs av automatiskt för användare som föredrar det.
13. Bildjämförelse (Före / Efter)
Interaktiv slider för att jämföra två bilder — perfekt för restaureringsprojekt. Dra handtaget, använd piltangenter, eller klicka var som helst i bilden.
Block: goodblocks/image-compare
Tangentbord: ←→ (1%), Shift+←→ (10%)
ARIA: role=”slider”, aria-valuenow
Hero Advanced
Fullskärms-hero med video eller bild, text-overlay och animationer.
- Rekommenderad bildstorlek: 1920×1080 eller större
- Video-bakgrund: ladda upp MP4, den loopar automatiskt utan ljud
- Parallax-effekt: aktivera i block-inställningarna för djupkänsla vid scroll
- Animationer: välj mellan fade-up, typewriter och split-text för rubriktext
- Lämna rubriken kort — max 6-8 ord för bäst visuellt intryck
Bildstorlek: 1920×1080px minimum, 16:9-format
Hero-blocket kräver en bakgrundsbild eller video för att visas korrekt. Infoga via '+' → Hero Advanced, lägg till bakgrundsmedia och välj animationstyp i Inspectorn.
Vanliga frågor
Hur lägger jag till parallax?
Markera blocket → Inspector → aktivera 'Parallax'. Du kan justera hastigheten med data-parallax-speed.
Varför syns inte min video på mobil?
Mobilläget visar fallback-bilden istället för video för att spara bandbredd. Lägg alltid till en bakgrundsbild som fallback.
Hur gör jag texten läsbar på ljusa bilder?
Använd overlay-alternativet i block-inställningarna. Mörk gradient ger bäst kontrast.
Mega Navigation
Avancerad navigation med mega dropdown-paneler och mobilmeny.
- Lägg till InnerBlocks i dropdown-panelerna för rikt innehåll
- Sticky header: aktiveras automatiskt — header fäster vid scroll
- Mobilmeny: fullskärms-drawer med animering på mindre skärmar
- Transparent header: aktiveras automatiskt på sidor med hero-block
- Kontrast: temat mäter automatiskt ljushet i hero-bilden och justerar textfärg
Bildstorlek: Logo: SVG rekommenderas, max 200×60px
Navigation-blocket är ett template-element avsett för header-mallen. Byt i Site Editor → Malldelar → Header mellan Standard, Mega Menu, Centrerad och Minimal.
Vanliga frågor
Hur lägger jag till en mega-dropdown?
Lägg till menyobjekt → klicka på det → 'Lägg till undermeny' → välj InnerBlocks-innehåll i panelen.
Varför är headern transparent ibland?
Temat detekterar automatiskt hero-block nära headern och gör den transparent med overlay-effekt.
Mosaikgrid
Redaktionellt mosaikgrid som hämtar inlägg och visar dem i ett symmetriskt mönster med varierande storlekar.
- Välj innehållstyp (post, page, portfolio) i Inspector
- Utvald post: ange ett inläggs-ID för att alltid visa det som hero-tile
- CTA-tile: aktivera och ange titel, länktext och URL för en inbäddad handlingsuppmaning
- Bildformat: upprätthåll konsekvent bildformat (16:9 eller 3:2) för bäst visuellt resultat
- Limit: 6–18 inlägg rekommenderas — för fler aktiveras fler patterns
Bildstorlek: 1200×675px (16:9) eller 900×600px (3:2) rekommenderas
Standard — inlägg (6 st)
En videoartikel
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut…
Test av före & efter
Hemliga receptet slog hantverkaren med häpnad i restaureringen av Eira sjukhus
De renoverar Brunnsparkens äldsta trähus
En intressant nyhet
Vanliga frågor
Varför varierar tile-storlekarna?
Gridet använder ett mönstercykel-system (A→B→C→D→E) med 5 layoutmönster. Varje mönster kombinerar tile-sm, tile-md, tile-wide och tile-hero. Cykeln upprepas för alla inlägg.
Hur lyfter jag fram ett specifikt inlägg?
Ange inläggs-ID i 'Utvalt inlägg'-fältet i Inspectorn. Det inlägget placeras alltid först och tilldelas hero-storleken om mönstret tillåter det.
Hur lägger jag till en CTA-tile?
Aktivera 'CTA-tile' i Inspectorn och fyll i titel, länktext och URL. CTA-tilen infogas automatiskt vid den position du anger (standard: position 8).
Feature Card
Kort med bild, hover-effekter och animationer — perfekt för tjänster eller funktioner.
- Rekommenderad bildstorlek: 800×600px
- Hover-effekt väljs i Inspector: zoom, fade eller slide
- Använd i grupper om 2-4 kolumner för bästa layout
- Länka hela kortet genom att fylla i URL-fältet
- Animationer: lägg till data-animate='fade-up' för scroll-effekt
Bildstorlek: 800×600px, 4:3-format
Feature Card kräver GoodBlocks-pluginet. Infoga via + → Feature Card.
Vanliga frågor
Hur gör jag kortet klickbart?
Fyll i URL-fältet i block-inställningarna. Hela kortet blir en länk.
Masonry Query
Dynamiskt rutnät som hämtar inlägg, sidor eller portfolioprojekt med valfri lightbox och filtrering.
- Välj innehållstyp (inlägg, sidor, portfolio) i Inspector
- Filtrering: välj taxonomi för filterknappar ovanför rutnätet
- Lightbox: aktivera för att öppna bilder i fullskärm med swipe-navigation
- Ladda mer: välj mellan knapp eller oändlig scroll
- Kolumner: 3 desktop, 2 tablet, 1 mobil är standardvärden — justera i Designinställningar
Bildstorlek: Varierar — originalformat bevaras som standard
Masonry Query kräver bildurval och kategorier i Inspectorn.
Vanliga frågor
Hur filtrerar jag efter kategori?
Välj en taxonomi i 'Filtrerings-taxonomi' i Inspector. Filterknappar visas automatiskt.
Varför syns inga bilder?
Kontrollera att inläggen har utvald bild (featured image). Masonry använder utvald bild som standard.
Hur ändrar jag antal kolumner?
Antingen i blockets Inspector eller globalt via Utseende → Designinställningar → Mosaik.
Bildjämförelse
Jämför två bilder med ett dragbart reglage — perfekt för före/efter-visningar.
- Använd bilder med samma dimensioner för bäst resultat
- Rekommenderad storlek: 1200×800px
- Touch-stöd: fungerar med swipe på mobil
- Tangentbord: piltangenter, Home/End för 0%/100%
- Lägg till tydliga 'Före'- och 'Efter'-etiketter i Inspector
Bildstorlek: 1200×800px, samma storlek för båda bilderna
Bildjämförelse kräver två bilder valda i Inspectorn.
Vanliga frågor
Bilderna ser förskjutna ut?
Se till att båda bilderna har exakt samma dimensioner. Beskär i mediebiblioteket om de inte matchar.
Sök med autocomplete
Sökfält med live-förslag via REST API — visar resultat medan du skriver.
- Placera i header-templaten för global sök
- Resultat visas efter 3 tecken
- Stödjer tangentbordsnavigation (piltangenter + Enter)
- Tillgängligt: aria-live meddelar skärmläsare om nya resultat
Expanderbar (tryck ⌘K eller klicka på sökikonen)
Alltid synlig (inbäddad i sida)
Vanliga frågor
Kan jag ändra hur många förslag som visas?
Standardvärdet är 5. Filtrera med 'agoodsite_fse_search_max_results' i functions.php.
Testimonials
Citatskarusell med Swiper — fade eller slide, navigeringspunkter, pilar och WCAG-pausknapp.
- Lägg till ett citat per slide — håll dem korta (max 2–3 meningar)
- Rekommenderad bildstorlek för avatarbild: 120×120px, rund beskärning
- Välj fade för subtil övergång, slide för tydligare rörelse
- Aktivera auto-play med försiktighet — pausknapp är alltid synlig (WCAG 2.2.2)
- Kombinera med Mosaic Grid på tjänstesidor för social proof
Bildstorlek: 120×120px, 1:1-format
Fade-animation (default)
Vanliga frågor
Hur stänger jag av auto-play?
Avmarkera 'Auto-play' i block-inställningarna. Karusellen navigeras då bara manuellt.
Kan jag ha olika antal slides per vy?
Ja, välj antal synliga slides (1–3) i Inspector under 'Visning'.
Post Grid
Inläggsrutnät med filtrering, paginering och flexibel layout — ersätter manuella inläggslister.
- Välj antal kolumner per breakpoint: desktop 3, tablet 2, mobil 1
- Filtrera på kategori, tagg eller custom taxonomy
- Aktivera paginering för arkiv med fler än 12 inlägg
- Kort-hover: välj mellan lift, zoom eller ingen effekt
- Kombinera med tag-chip-filtret () för klientsidefiltrering
Bildstorlek: 800×500px, 16:9-format
Post Grid kräver inlägg med inläggsbilder. Konfigurera layout och posttyp i Inspectorn.
Vanliga frågor
Skillnaden mot Masonry Query?
Post Grid är ett regelbundet rutnät med lika stora kort. Masonry Query ger ett oregelbundet galleri-läge som passar bilder bättre.
Event List
Kommande och tidigare evenemang med datum, plats och kategorifiltrering.
- Datum visas i lokaliserat format — temat använder WordPress-localens inställningar
- Filtrera på kommande / alla / tidigare via Inspector-toggle
- Lägg till plats-metadata på event-CPT:n för att visa platsinfo
- Kombinera med countdown-blocket för att driva anmälningar
- Händelser utan tid visas som heldagshändelse
Bildstorlek: 800×450px, 16:9-format
Event List kräver registrerade händelser av typen goodblocks_event.
Vanliga frågor
Kräver blocket ett speciellt CPT?
Ja, Event CPT måste vara aktiverat via add_theme_support() eller GoodBlocks-inställningar.
Countdown
Nedräkningstimer till ett datum — dagar, timmar, minuter, sekunder med valfri styling.
- Sätt slutdatum i Inspector — nedräkningen startar automatiskt
- Välj vilka enheter som visas (bara dagar, eller dagar + timmar + minuter)
- Visa ett meddelande när nedräkningen nått noll ('Evenemanget pågår!')
- Tillgänglighet: aria-live='off' är default — ändra ej till 'assertive' (spammar skärmläsare)
- Kombinera med Hero Advanced eller en CTA-sektion för bäst effekt
Nedräkning
Please select a target date
Vanliga frågor
Vad händer när timern når noll?
Blocket visar det meddelande du angett i fältet 'Sluttext'. Lämnas det tomt döljs timern.
Mailchimp Signup
E-postformulär kopplat till Mailchimp-lista — inbäddningsbart var som helst på sajten.
- API-nyckel och list-ID konfigureras under Inställningar → GoodBlocks
- Välj single opt-in eller double opt-in (rekommenderas för GDPR)
- Anpassa bekräftelsemeddelandet i Inspector
- Formuläret validerar e-post klientsidan innan API-anrop
- Kombinera med cookie-consent — formuläret bör kräva marknadsförings-samtycke
Mailchimp Signup kräver API-nyckel och list-ID konfigurerade i plugin-inställningarna.
Vanliga frågor
Fungerar det med andra e-postverktyg?
Blocket är Mailchimp-specifikt i MVP. Klaviyo och ActiveCampaign är planerade.
Hur hanteras GDPR?
Använd double opt-in och visa en tydlig samtyckesbeskrivning. Lagra inte e-post lokalt — Mailchimp är personuppgiftsbiträde.
Hero
Hero kräver bakgrundsmedia (bild eller video) och fungerar bäst i full sidkontext.
Section Header
Light, vänsterställd med kicker
A sustainable strategy
Built into how we work.
Dark, centrerad utan kicker
Clear targets. Quarterly accountability.
Accent (för kapitelintron)
Materiality Assessment & Stakeholder Engagement
Kpi Grid
3 tiles med prefix/suffix-mix
6 tiles på accent-bakgrund
Masonry Query
Dynamiskt rutnät som hämtar inlägg, sidor eller portfolioprojekt med valfri lightbox och filtrering.
- Välj innehållstyp (inlägg, sidor, portfolio) i Inspector
- Filtrering: välj taxonomi för filterknappar ovanför rutnätet
- Lightbox: aktivera för att öppna bilder i fullskärm med swipe-navigation
- Ladda mer: välj mellan knapp eller oändlig scroll
- Kolumner: 3 desktop, 2 tablet, 1 mobil är standardvärden — justera i Designinställningar
Bildstorlek: Varierar — originalformat bevaras som standard
Projektportfolio: välj "Anpassad" som innehållstyp och "projekt" som inläggstyp i Inspectorn. Live-förhandsgranskning är inaktiverad p.g.a. minnesbegränsning — infoga via + → Masonry Query och konfigurera i editorn.
Vanliga frågor
Hur filtrerar jag efter kategori?
Välj en taxonomi i 'Filtrerings-taxonomi' i Inspector. Filterknappar visas automatiskt.
Varför syns inga bilder?
Kontrollera att inläggen har utvald bild (featured image). Masonry använder utvald bild som standard.
Hur ändrar jag antal kolumner?
Antingen i blockets Inspector eller globalt via Utseende → Designinställningar → Mosaik.
Bildjämförelse
Jämför två bilder med ett dragbart reglage — perfekt för före/efter-visningar.
- Använd bilder med samma dimensioner för bäst resultat
- Rekommenderad storlek: 1200×800px
- Touch-stöd: fungerar med swipe på mobil
- Tangentbord: piltangenter, Home/End för 0%/100%
- Lägg till tydliga 'Före'- och 'Efter'-etiketter i Inspector
Bildstorlek: 1200×800px, samma storlek för båda bilderna
Före/efter-jämförelse för restaureringsprojekt. Lägg till två bilder och välj startposition för delaren (0–100) i Inspectorn.
Vanliga frågor
Bilderna ser förskjutna ut?
Se till att båda bilderna har exakt samma dimensioner. Beskär i mediebiblioteket om de inte matchar.