Skillert
Skillert · Indsæt en skillert · Type og funktioner · Rotér · Spejlvend · Position absolute · Lav din egen skillert som SVG
Skillert er en grafisk overgang mellem to komponenter, fx en bølge eller en skrå kant. Den gør overgangen mellem sektioner med forskellige farver blødere og mere levende.
Her kan du læse, hvordan du indsætter en skillert, vælger type og funktioner, og hvordan du laver din egen skillert som SVG.
Indsæt en skillert
Klik på Tilføj indhold på din forside eller sektionsside, og vælg Skillert. Placér den lige før eller efter den komponent, den skal skille.
Klik på Tilføj indhold inde i Skillert, og vælg:
- Divider: en af de færdige skillerter.
- Upload egen skillert: din egen SVG-fil.
Når du har valgt, står skillerten i listen, fx som Wave. Klik på den for at åbne indstillingerne.
Vælg type og funktioner
Under Sektionsfarve vælger du farven på skillerten. Den bør passe til den komponent, den ligger op ad.
Under Type vælger du formen: Wave, Subtle wave, Slope, Tilt, Triangle eller Line. Slå Margin bund til, hvis der skal være luft efter skillerten.
- Rotér: vender skillerten på hovedet, så den passer til en komponent over eller under.
- Spejlvend: vender skillerten fra venstre mod højre.
- Position absolute: lægger skillerten oven på komponenten, så der ikke kommer et mellemrum.
Til sidst vælger du Farve. Se eksemplerne nederst på siden, hvis du er i tvivl om, hvordan det ser ud.
Lav din egen skillert som SVG
Vi anbefaler, at du bruger de færdige skillerter. Vil du lave din egen, skal den være en SVG-fil. SVG kan skaleres uden at blive uskarp, uanset skærmstørrelse.
- Tegn den som vektorgrafik i fx Figma, Adobe Illustrator eller Inkscape.
- Vælg Export as SVG i programmet.
- Tjek, at der ikke kommer skygger, tekster eller logoer med, som du ikke vil bruge.
- Brug ikke farver i filen. Så får skillerten automatisk farven fra siden.
- Giv den en kort beskrivelse. Der er plads til en beskrivelse inde i SVG-filen, som hjælper brugere med synsnedsættelse. Spørg evt. en kollega, hvis du ikke selv arbejder med koden.
Vælg Upload egen skillert i Skillert, og upload din SVG-fil. Placeringen sætter du selv med et tal fra -100 til 100. 0 betyder, at skillerten rører komponenten, og et minustal lægger den ind over komponenten.
Tjek til sidst, at skillerten ser skarp ud, også på mobilen.