Sidfot (footer) med vattenstämpel

Så här skapar du ett viktigt strukturellt element på din webbplats: sidfoten. I den här artikeln tittar vi närmare på hur du skapar en vattenstämplad sidfot.

    En footer er det nederste element på en hjemmeside. Du kan se footeren, hvis du scroller helt ned i bunden af siden. Ofte har en footer en informativ funktion, og der videreformidles her kontaktinformationer og links til de mest brugte sider på hjemmesiden.

    'Footer med vandmærke' er en footer bestående af fire kolonner, hvor du kan indsætte tekst og/eller links, og hvor der er mulighed for at indsætte et vandmærke som baggrundsbillede.

    Det er muligt at indsætte et hvilket som helst billede som baggrundsbillede i denne footer, men i denne guide vil du kunne læse nogle anbefalinger til udseende af billedet/illustrationen/vandmærket og læse en lille guide om, hvordan du selv kan lave et baggrundsbillede eller vandmærke til footeren.

    Anbefalinger:

    1. Lav billedet/illustrationen/vandmærket som en SVG fil. Ved brug af SVG vil i ikke støde på problemer med størrelse og opløsning af billedet.
    2. Giv billedet samme farve som footer-teksten og brug kun 1 farve.
    3. Giv billedet en opacity (gennemsigtighed) på max 10%.

    Guide: Lav et nyt billede/illustration/vandmærke

    1. Vælg et billede. I dette eksempel har jeg lavet en illustration, som jeg gerne vil bruge som vandmærke.
    2. Skift illustrationsfarven til footer-tekstens farve og giv illustration en opacity på max 10%.

      I den footer jeg vil indsætte mit billede i, er tekstfarven hvid, derfor ændre jeg den blå farve til hvid og giver illustrationen en opacity på 10%.

      For demonstrationens skyld har jeg givet baggrunden bag min illustationen en farve, så man se min illusrtation, men den skal fjernes før jeg ekspoterer min illustration.


    3. Ekspotér illustrationen og upload billedet i feltet 'Baggrundsbillede'. Billedet får en auto-bredde og passer 100% i højden af footeren, dvs. at hele højden af billedet bliver vist, og bredden tilpasser sig filens bredde.

      Her kan i se min illutration indsat i footeren:


      Du skal være opmærksomme på, at jo bredere billedet er i forhold til højden, jo mere vil den fylde bredden af footeren, så hvis du gerne vil have billedet til at ligge i den ene side, skal du vælge et billede som ikke er for bredt.

    4. Hvis du ønsker et bestemt udsnit af et billede, skal du lave filen ud fra hvordan du vil have udsnittet skal se ud. Du skal også allerede her tage stilling til om billedet skal placeres til højre eller venstre. 

      I dette eksemple ønsker jeg for eksempel et udsnit af min demo illusration og den skal placeres i højre side. Det er udsnittet vist nedenfor jeg ønsker:


      Jeg opdaterer derfor min originale SVG-fil til det udsnit jeg ønsker. Jeg ønsker venstre del af min illustration, som udsnit. Nu ser min billede fil, således ud:


    5. Jeg ekspoterer derefter igen illustrationen, uploader billedet under 'Baggrundsbillede' og vælger 'Positionere billedet til højre'.

      Her kan du se slut resultatet:

    6. Hvis jeg nu ønskede at placere billedet i venstre side af footeren, ville jeg i stedet tage højre del af min illustration, som udsnit.


      Hvis jeg indsætter billedet uden at fjerne indstillingen 'Positionere billedet til højre', vil mit nye udsnit stadig blive placeret i højre side og ser derfor ikke helt rigtigt ud:



      Jeg fjerner derfor indstillingen 'Positionere billedet til højre' og nu er mit nye udsnit placeret pænt til venstre:

    'Positionere billedet til højre' definerer om billedet/vandmærket skal positioneres til højre.

    Som udgangspunkt er billedet positioneret til venstre, men hvis du slår 'Positionere billedet til højre' til, placeres billedet i højre side og hvis du slå funktionaliteten fra igen, placeres billedet igen i venstre side.


    Positionering til venstre:

    Positionering til højre:

    Under 'Logo' kan du oploade et logo til dit websites identitet.


    Det ser kan se således ud:

    I disse felter kan du skrive tekster, der fungerer som logo. Du kan altså lave et 'tekst-logo' i stedet for at uploade et illustrativt logo. Du skal fjerne det illustrative logo, for at tekst-logoet slår igennem.

    Tekstlogoet kan laves i to niveauer. Primær logotekst (øverste niveau) og sekundær logotekst (nederste niveau).

    Det kan se således ud:

    I dette eksempel er 'Kommune' øverste niveau og 'Platform' nederste niveau. Du kan også vælge kun at udfylde det ene niveau, hvis ikke opdelingen ønskes.

    Brug funktionen 'Ekstra logo' til at tilføje et ekstra logo, som vil placere sig under hovedlogoet. Et ekstra logo kan eksempelvis bruges til at tilføje logoer til samarbejdspartnere.


    Det kan se således ud:

    'Skjul titler'-funktionen kan bruges til at skjule overskrifterne på listerne/kolonnerne i footeren på større skærme end mobil.


    Som udgangspunkt vises titlerne:


     Titlerne/overskrifterne skjules ved visning på større skærme end mobil, hvis funktionen er slået til.


    Titler vil altid blive vist på mobil, da de bruges til at toggle (åben/luk) dropdown-menuer:


    Under 'Lister' har du mulighed for at oprette tre kolonner med links eller tekst. Hver liste vil have sin egen kolonne. Første kolonne er forbeholdt logoer, adresse og CTA-link.

    Det kan se således ud: