Skip to main content
Mere performance og frihed med Umbraco block grid
Ultrakort guide til opsætning af blokke og grid i Umbraco, så redaktører kan bygge fleksible sider hurtigere og med bedre performance.
SEO Specialist & Digital Konsulent
Læsetid: 4 min.
Opsætning i backoffice
Start med at oprette en data type af typen Block Grid. Vælg et kolonnegrid, der passer til dit design system. Definér tilladte blokke ved at oprette elementtyper som hero, tekst, billede, video, call to action og kortliste.
Giv hver blok felter til indhold og separate felter til præsentation, fx baggrund, spacing og justering. På den måde kan redaktører variere udseendet uden at ændre koden. Tilføj derefter Block Grid som felt på den dokumenttype, der skal bruge layoutet. Brug grupper til at styre hvilke blokke, der må ligge i hvilke sektioner.
Et klart navneregime og gode beskrivelser i help-teksterne gør opsætningen lettere at forstå. Compositions kan samle fælles felter som SEO, deling og sporbarhed på tværs af sider.
Redaktørflow og best practice
Når redaktører bygger sider, kan blokke trækkes ind i gridet, strækkes over flere kolonner og flyttes efter behov. Brug dublering når mønstre gentages. Gem ofte brugte sektioner som forlæg, så indholdsproduktion bliver hurtigere og mere ensartet.
Hold tilgængelighed i fokus. Brug korrekte overskriftsniveauer, beskrivende alt-tekster og sikre kontraster. Undgå dybe nestinger af blokke. Sæt begrænsninger for hvor mange blokke en sektion må rumme. Tilføj hjælpetekster og thumbnails, der viser forventet design.
Variants understøtter flere sprog. Planlagt publicering, versionsstyring og rettigheder gør det trygt at samarbejde på større sider. Med mediernes focal point får du pæne crops på alle skærmstørrelser.
Frontend og performance
Kobl hver blok til en Razor partial med stærkt typede modeller. Så udmøntes felter fra backoffice i semantisk HTML. Lad CSS Grid styre layout med klare breakpoints. Map præsentationsfelter til utility-klasser for konsistent spacing og farver.
Brug responsive billeder med srcset og lazy loading. Cache output for anonyme brugere, og servér aktiver via CDN for hurtig levering. Hold CSS og JavaScript små og modulære. Lad blokke være uafhængige, så design systemet kan udvikles uden migrering af indhold.
Denne tilgang giver redaktørerne frihed til at sammensætte landingssider og kampagner. Samtidig bevarer udviklere kontrol over kvalitet, tilgængelighed og Core Web Vitals.
Har du brug for en skabelonbank og klare retningslinjer? Design’R’us hjælper gerne med at definere blokbibliotek, grid og workflows, så teamet kan arbejde hurtigt og sikkert.
