Overlay på billeder - her er en oversigt

I begge temaer i Kommuneplatformen vil du opleve, at der automatisk vil blive tilføjet et fuldt overlay på nogle billede-komponenter med tekst.

Overlay-typen 'cover' dækker komponentens overflade helt. Filteret bruges som et illustrativt element for at skabe kontrast mellem baggrundsbillede og tekst/andre elementer på et billede.

Komponenter med overlay-cover:

• Fejlmeldingsside
• Hero med søgebar (når der er tilføjet en overskrift)

Her ses set eksempel på en komponent med 'overlay cover'. Her er det en fejlmeldingsside.

Med typen 'overlay - 45 grader' sker der en gradvis farvegraduering diagonalt fra det ene hjørne til det andet (i en vinkel på 45 grader). Farven skifter hen mod midten. Overlayet vil fremstå tydeligst i det hjørne, hvor teksten står skrevet, og dette er overlayets startpunkt.

Denne type overlay findes kun på komponenter i light-temaet. Det findes på:

• Hero m. tekst og titel (et billede med tekst/elementer. Som i eksemplerne nederst på siden her)
• Hero med videobaggrund.
• Temakomponent (type 'fullwidth' - se eksempel nr. 4 her)

Hvis du gerne vil skifte farven på denne type overlay, skal du gøre det ved at vælge et start- og slut-punkt.

Her ses et eksempel på en komponent med 'overlay - 45 grader'. Her er det en fuldredde-hero med tekst og linkpil.

Med typen 'overlay - 0 grader' sker der en gradvis farvegraduering, som starter i bunden af komponenten og skifter over i en anden farve mod toppen. Overlayets startpunkt er i bunden af billedet.

Find denne type overlay på:

- Linkkort med billeder (fx i komponenten 'Sidelinks med fuldt billede').

Her ses set eksempel på et linkkort, der har et 'overlay - 0 grader'. Det er taget fra komponenten 'Kortsamling - automatisk'.

I backoffice og i farvevælgeren kan du vælge den farve, dit overlay skal have. 

I backoffice ændrer du farven under fanen 'Temaer', når du står på din forside. Klik i feltet ved 'Overlay (hele billedet)' og vælg din farve.

Vil du ændre farven direkte fra din hjemmeside, så brug farvevælgeren (malerbøtte-ikonet). Vælg 'Overlay' i dropdown-menuen. Herefter vil alle mulighederne for at ændre farver på overlay-typer blive vist. Klik i feltet ved 'Overlay cover' og vælg din farve i farvehjulet eller ved at indtaste en HEX-kode.

Feltet under farvehjulet afgør hvor lys/mørke, der skal i din farve. Derfor vil farven også ændre sig, hvis du ændrer indstillingerne på skalaen.

Hvis du vil ændre farven på den type overlay, som kun delvist dækker et billede, skal du have fat i de to farvekategorier, der hedder 'overlay - start' og 'overlay - slut'. Du har derfor mulighed for at lave en graduering på et billede i to forskellige farver, hvis du ønsker det.

Du ændrer farverne fra backoffice ved at finde fanen 'Temaer'. Vil du ændre farven direkte fra din hjemmeside, så brug farvevælgeren (malerbøtte-ikonet). Vælg 'overlay' i dropdown-menuen. Herefter vil alle mulighederne for at ændre farver på overlay-typer blive vist. Klik i feltet ved 'overlay - start' og 'overlay - slut', og vælg din farver i farvehjulet eller ved at indtaste en HEX-kode.

Her ses et eksempel på, hvordan en hero med overlaytypen 45 grader (findes kun i light temaet), kan se ud med to forskellige farver. Her er startpunktet mørkeblå, imens slutpunktet er lyserødt:

Ønsker du en anden tekstfarve på billeder med overlay, så har du også mulighed for at vælge en farve. Det gør du i backoffice under fanen 'temaer', når du står på din forside. Klik i feltet ved 'overlay - tekst' og vælg din farve.

Du kan også ændre tekstfarven i farvevælgeren direkte fra din hjemmeside. Vælg 'overlay' i dropdown-menuen og alle mulighederne for at ændre farver på overlay vil blive vist. Klik i feltet ved 'overlay - tekst', og vælg din tekstfarve i farvehjulet eller ved at indtaste en HEX-kode.

I nogle komponenter har du mulighed for at sætte linkknapper på billeder. Disse knapper kan du ændre fyld- og tekstfarve på. Du kan ændre farverne i backoffice under fanen 'temaer', når du står på din forside. Klik i felterne ved 'overlay - knap' og 'overlay - knaptekst', og vælg dine farver.

Du kan også ændre tekstfarven i farvevælgeren direkte fra din hjemmeside. Vælg 'overlay' i dropdown-menuen og alle mulighederne for at ændre farver på overlay vil blive vist. Klik i felterne ved 'overlay - knap' og 'overlay - knaptekst', og vælg din tekstfarve i farvehjulet eller ved at indtaste en HEX-kode.

Når man lægger et overlay på et billede, vil farven skulle have en vis gennemsigtighed - 'opacity' - så billedet kan ses igennem farven. 

Du kan vælge graden af opacity på dine overlay-farver. Det skal du gøre i farvevælgeren, direkte fra din hjemmeside. Vælg 'overlay' i dropdown-menuen og klik i det farvefelt, hvor du ønsker at justere opacity-graden. Du justerer opacity i det nederste felt under farvehjulet i farvevælgeren.  

Vi anbefaler

Som udgangspunkt, behøver du ikke røre ved opacity-graden i farvevælgeren. Vi har valgt graden for dig. Men du kan godt ændre den, hvis det giver mening for teksten og billedet. Husk webtilfængelig

Hvis opacity er sat til 0% er der intet overlay på billedet. Er den på 100% vil du ikke kunne se billedet igennem farven. Graden af opacity på overlay skal derfor ligge et sted imellem 0 og 100%. Vi anbefaler, at opacity-graden er minimum 60%, når overlayet dækker hele billedet. 

• Opacity ved fuldt overlay: Minimum 60%
• Opacity ved todelt overlay (startpunkt): Mellem 70-100%
• Opacity ved todelt overlay (slutpunkt): 0%