Afstande og margin
Afstande · Margin · Padding · Indstil afstande for hele hjemmesiden · Margin bund på komponenter
Afstande er den luft, der er mellem og inden i sektioner og komponenter. Margin er afstanden mellem komponenterne, og padding er afstanden mellem kanten af en sektion og indholdet i den.
Her kan du læse, hvordan du indstiller afstandene for hele hjemmesiden, og hvordan du bruger Margin bund på den enkelte komponent.
Indstil afstande for hele hjemmesiden
Stå på din forside, og klik på fanen Design. Scroll ned til sektionen Afstand. Med skyderne Afstand for margin bund: Desktop og Afstand for margin bund: Mobil bestemmer du, hvor meget luft der er efter komponenterne på forsider og sektionssider.
Afstanden er som standard 100 px. Den bliver kun brugt på komponenter, hvor Margin bund er slået til.
I samme sektion finder du Artikel komponent margin bund. Den bestemmer afstanden efter alle komponenter i indholdet på artikelsider. Afstanden er som standard 30 px.
Padding er luften i toppen og bunden af en sektion. Du indstiller den med de fire skydere Topafstand for sektions-padding: Mobil, Topafstand for sektions-padding: Desktop, Bundafstand for sektions-padding: Desktop og Bundafstand for sektions-padding: Mobil.
Obs. Padding bliver kun vist, når sektionen har en baggrundsfarve. Afstanden er som standard 100 px.
Husk at klikke på Gem og udgiv på forsiden, når du har ændret afstandene.
Margin bund på komponenter
Næsten alle komponenter på forsider og sektionssider har feltet Margin bund. Slå det til, hvis der skal være luft efter komponenten. Hvor meget luft, bestemmer du på forsiden under Design → Afstand.
Du kan kun sætte luft under en komponent, ikke over. Det sikrer, at afstandene bliver ens på hele hjemmesiden.
Brug kun Margin bund mellem en komponent i fuld bredde og en komponent, der ikke er i fuld bredde. Det får siden til at se sammenhængende ud.
Sætter du margin bund mellem to komponenter i fuld bredde, fx to temakomponenter med baggrundsfarve, kan mellemrummet bryde det visuelle flow. Du kan se eksempler på begge dele nederst på siden.
