Neutrale containere
Hvad er neutrale containere?
Neutrale containere er multifunktionelle og kan bruges i mange forskellige sammenhænge. En neutral container er en form for usynlig beholder eller kasse, der hovedsagligt bruges til at opbevare og gruppere indhold, så dette nemt kan styles eller kopieres videre til andre sider. Opretter du en neutral container uden indhold, vil du derfor ikke kunne se den i frontend. En neutral container påvirker ikke det omkringliggende indhold.
Man bruger hovedsageligt neutrale containere på AU til 2 ting:
- Til at samle flere elementer, som skal flyttes eller kopieres på én gang eller bruges som globalt indhold. Den neutrale container fungerer som en sektion eller <div>, hvis du kender lidt til HTML. Når man samler elementer i en container, er det meget lettere at kopiere eller flytte flere elementer til nye eller eksisterende sider. Hvis en neutral container omfavner de elementer, du ønsker at flytte eller kopiere, kan du blot kopiere den neutrale container - så følger resten med af sig selv.
- Til at tilføje baggrundsfarver og styling. Når du opretter en neutral container på din side, er der mulighed for at vælge et hav af farver som baggrund. Hvis du skal fremhæve et element på din side eller gøre noget visuelt overskueligt, er det oplagt at bygge indholdselementerne i en neutral container. Farverne er konstante og du kan derfor ikke oprette din egen farve.
I denne vejledning vil vi gennemgå, hvordan du opretter en neutral container, hvordan du kopierer eller flytter den og hvordan den kan styles.
Opret en neutral container
Vælg + Opret nyt indhold på den side, hvor du ønsker at oprette et neutralt element.
1. Vælg fanebladet Container.
2. Scroll ned til og vælg Neutral container (2015).
Nu er det neutrale element oprettet. Du kan nu oprette elementer inden i den neutrale container, fx. et tekstelement.
Sådan kopierer eller flytter du en neutral container
1. Højreklik på elementet
2. Vælg kopier for at lave en kopi af elementet eller klip for at flytte elementet til et andet sted eller en anden side.
Sådan styler du neutrale containere
Du kan bruge funktionerne i den neutrale container til at forandre udseendet på det tomme element.
- Overskrift (Header): Vælg en overskrift til dit element. Det gør det lettere at finde senere hen. Overskriften er altid skjult i front-end.
- Bredde (Width): Du kan vælge at tilpasse bredden på dit element. Normal giver dig samme bredde som andre elementer i din margin. Udvidet (Expanded) giver elementet mere margin, så tekst/billeder bliver mere centrale. I den første række i eksemplerne nederst på siden, kan du se forskellen på de to muligheder.
- Baggrundsfarve (Background color): Her kan du vælge om elementet skal have en baggrundsfarve. Du har mulighed for at vælge mellem forskellige farver, men kan ikke tilføje din egen farve via kode. Du kan se eksempler på farverne i bunden af denne vejledning.
Du har også mulighed for at ændre udseendet på de elementer, du opretter i den neutrale container, under fanen Udseende (Appearance) for det pågældende element, se eksemplerne længere nede på siden. Bemærk, at indstillingerne ikke påvirker selve den neutrale container, de påvirker kun elementerne inde i containeren (fx tekstelementer).
4. Layout: Denne funktion har ingen funktion, når du arbejder med neutrale containere.
5. Ramme:
- Linje før: skillelinje før dit indhold
- Linje efter: skillelinje efter dit indhold
- Indryk: Indrykning på elementet. 33/66% rykker teksten til højre, så der kommer en margin i venstre side. 66/33% skubber teksten til venstre, så der er magin i højre side.
- Collapsible: Kan ikke benyttes på neutrale containere.
6. Luft før: Laver den øvre margin større, så teksten rykker længere ned i containeren.
7. Luft efter: Laver den nedre margin større, så der er mere luft efter teksten.
Eksempler på containere med baggrundsfarve
Eksempler på neutrale containere med udvidet bredde
Eksempler på neutrale containere med normal bredde
Dette er et eksempel på et tekst element i en mørkeblå, neutral container. Den har en normal bredde.
Dette er et eksempel på et tekst element i en grøn, neutral container. Den har normal bredde.
Dette er et eksempel på et tekst element i en grøn, neutral container. Den har normal bredde.
Eksempler på neutrale containere med indryk på 33/66% og 66/33%
Dette er et eksempel på et tekst element i en lilla, neutral container. Den har en normal bredde og indent (indrykning) på 33/66%.
Dette er et eksempel på et tekst element i en mørkelilla, neutral container. Den har en normal bredde og indent (indrykning) på 33/66%.
Dette er et eksempel på et tekst element i en turkis, neutral container. Den har en normal bredde og indent (indrykning) på 66/33%.
Dette er et eksempel på et tekst element i en mørk turkis, neutral container. Den har en normal bredde og indent (indrykning) på 66/33%.
Eksempler på neutrale containere med luft før og efter
Dette er et eksempel på et tekst element i en mørk orange, neutral container. Den har en normal bredde og small i space before og space after.
Dette er et eksempel på et tekst element i en orange, neutral container. Den har en normal bredde og medium i space before og space after.
Dette er et eksempel på et tekst element i en rød, neutral container. Den har en normal bredde og large i space before og space after.
Dette er et eksempel på et tekst element i en magenta, neutral container. Den har en normal bredde og extra large i space before og space after.
Eksempler på neutrale containere med linje før og efter
Dette er et eksempel på et tekst element i en gul, neutral container. Den har en normal bredde og ruler before.
Dette er et eksempel på et tekst element i en mørkegul, neutral container. Den har en normal bredde og ruler after.