Så här bygger du en avancerad sidfot (footer)

Med en avancerad sidfot kan du bestämma var allt innehåll i sidfoten ska placeras. Tack vare dess flexibla designalternativ kan den användas för att skapa ett vackert och unikt utseende. Samtidigt innebär detta också att vi endast rekommenderar att du använder den om du redan har erfarenhet av att arbeta med vår lösning.

    For at opbygge den avancerede footer indsætter du blokke med indhold. Disse blokke har forskellige breder og kan indsættes i lige præcis det mønster du ønsker. Det er vigtigt, at du udfylder hele breden af din footer med disse blokke. Dette betyder dog ikke at der skal være indhold i hele footeren, da du også kan indsætte tomme elementer.

    På grund af den avancerede footers fleksible blokstruktur kan du opbygge mange forskellige grid.

    Her ser du eksempler på hvordan indholdet kan struktureres i forskellige grids. Hver boks i billederne nedenfor kan have indhold, som fx logo, links lister og tekst eller bestå af luft. (Tallene i boksene henviser til deres bredde)

    Du arbejder med den avancerede footer i tre niveauer.

    1. I det første niveau arbejder du med det grundlæggende udtryk din footer skal have. Her kan du blandt andet indsætte et vandmærke, bestemme afstand mellem og størrelse på logoer og tekst.
    2. Det næste niveau består af forskellige blokke du sætter sammen til at udfylde din footer.
    3. Det tredje niveau er indholdet i de indsatte blokke. 

    Guiden nedenfor forklarer hvordan du arbejder med disse 3 niveauer skridt for skridt. 

    Har du fulgt guiden og er stadig i tvivl om hvor du indsætter og indstiller hvad, kan du gå til punktet 'Justering og indstillinger'. Her findes en detaljere forklaring af hvor du finder hvilket niveau.

    Opsæt den avancerede footer

    Det er en god idé at have en klar idé om hvad du vil vise i footeren, og hvordan du ønsker at sætte indholdet op, før du begynder.

    Fordi den avancerede footer består af en fleksibel blokstruktur, kan man hurtigt miste overblikket, over hvad der skal være hvor. Prøv evt. at tegne din footer i hånden først, så har du en guide at følge når du skal træffe valg om struktur og indhold.

    Allerførst skal du klikke på "Tilføj Footer (avanceret)":

     

    Du bliver med det samme bedt om at foretage nogle valg ang. din footeropsætning. Her er det en god idé at have planlagt udseendet for footeren på forhånd (se trin 1).

    Disse indstillinger bestemmer footerens ydre design, altså ting som afstande og logo-størrelser og linktyper.

    1. Allerførst skal du bestemme om footeren skal have vandmærke eller ej (læs mere om footer med vandmærke her):



    2. Derefter skal du bestemme det overordnede design for footeren, som du finder under fanen "Indstillinger":

    Det kan være svært at vurdere om disse indstillinger passer til dit indhold på nuværende tidspunkt. Derfor er det en god ide at vende tilbage til dette punkt løbende i din process.

    Skal du finde de overordnede indstillinger igen, efter at du er kommet ud af det?

    Find dem igen ved at klikke på den øverste kasse på footer-komponenten:

    Nu skal du indsætte de blokke som du ønsker at bygge din footer op af. Det gør du ved at klikke på kassen "Footer":

    Hvorefter der kommer disse forskellige typer af blokke frem, som du kan vælge mellem:

    De forskellige blokke:

    Footer - kolonne:

    Denne blok består af en enkelt kolonne. Du kan derfor kun indsætte én type indhold i hver af denne slags blok. 

    Denne blok har ikke en fast bredde. Du kan trække i den, og gøre den smallere og bredere.




    Luft - 'Offset': 

    Dette er tomt indhold. Det kan bruges, hvis du ønsker luft før, efter, over eller under de andre blokke du indsætter. Luften blokerer for, at blokkene med indhold lægger sig helt op ad hinanden. 

    Selv om du skal udfylde alt pladsen i din footer, er det vigtigt at skabe luft i mellem de forskellige dele.

    Denne blok har ikke en fast bredde. Du kan trække i den, og gøre den smallere og bredere.

    Se eksempel her:


    Footer - to kolonner: 

    Denne blok består af to kolonner med indhold.  Det vil sige at du f.eks. kan lægge to smalle lister, tekststykker eller logoer ind ved siden af hinanden. Blokken har en fast brede.

    I eksemplet ser du to af disse blokke ved siden af hinanden:

    Indsæt den næste blok

    Vil du indsætte den næste blok skal du klikke på det lille kryds der kommer frem når du holder curseren over blokkens kant. 

    Du kan indsætte en ny blok ovenfor, nedenfor og til højre for de blokke du allerede har indsat. 

    Vil du flytte en blok du har indsat skal du blot holde den fast med curseren og trække den derhen hvor du vil have den. 

    Du kan også trække det indhold du har indsat fra den ene blok til den anden. 

    Indstil blokkene

    Når du indsætter den valgte blok, bliver du bedt om at tage stilling til dens indstillinger. Har kan du indstille margin bund, om indholdet skal højrestilles og give blokken en værdi der bestemmer hvilken placering den skal have i mobilvisning.

    Når du har bestemt udfyldt hele footeren med blokke, skal du indsætte dit indhold. Det kan være logo, tekststykke (f.eks. til en adresse), linklister eller andet.

    Du tilføjer indholdet ved at klikke på den blok, du ønsker at indsætte indhold i:

     

    Hvorefter du vil se de de indholdskomponenter, du kan indsætte i footeren:

     

    Nogle af komponenterne er enkle og genkendelige at indsætte (f.eks. logo), og andre kræver lidt flere indstillinger. Det gælder f.eks. "Liste af links".

    Her indsætter man overskrift og linkene under fanen "Indhold":



    I nogle af indholdskomponenterne kan man indstille dem yderligere under 'Indstillinger' i øverste højre hjørne:

     

    Du tilføjer en underfooter ved at klikke "Tilføj Subfooter":

    En underfooter består kun af én slags indhold, derfor vil du blive bedt om at vælge den slags indhold du vil indsætte med det samme.

    Ofte bliver underfooteren brugt til at linke til sociale medier, f.eks. på KL's footer:

    Har du problemer med at få de rigtige afstande i din footer? Eller noget andet justering?

    Så husk, at den avancerede footers design kan indstilles på de 3 niveauer, du har opsat:

    1. På det overordnede niveau, altså kassen for hele footeren. Her kan du under indstille margind bund, skriftstørrelse, logostørrelse osv der gælder for hele footeren. Klik på den øverste bjælke i footeren i backoffice, for at indstille dette. (Se punkt 1. i accordion ovenfor)



    2. I de enkelte blokke:



    3. Under indholdet i blokkene under fanen "Indstillinger":

    Designmuligheder for indhold i blokkene (Trin 3 ovenfor)

    Ligesom man kan tilføje margin bund på sektioner på forsiden og sektions sider for at skabe afstand mellem indhold, kan man også tilføje margin bund på indhold i kolonner i footeren.

    Margin bund på indholdet skal kun bruges i tilfælde hvor der er indsat mere end eé type indhold i blokken. Hvis dette er tilfældet kan man slå margin bund til for at skabe afstand mellem indholdet i blokkene.

    Hvis ens footer har meget indhold kan det være en god ide at omdanne indholdet til accordion i mobilvisning.

    OBS dette virker kun hvis indholdet har en title, da denne bruges til at åbne og lukke accordionen. Hvis ikke man ønsker en title til ens indhold, men samtidigt ønsker accordion på mobil, kan man skjule titler på desktop.

    Indhold som har accordion slået fra på mobil:

    Indhold som har accordion slået til på mobil:

     

    Det er muligt at ændre font størrelsen på ens indhold i footeren.

    Som default følger font størrelser i footeren følgende:

    • Indholds titler følger den globale H3 font størrelsen
    • Text, links mm følger den globale component text størrelse

    Med footerens font størrelses vælger kan man nu gange font størrelsen op med enten 1.5 gang eller 2 gange. 

    Vi anbefaler ikke at bruge forskellige fontstørrelser i footeren og at man er konsekvent i sin brug fontstørrelse, medmindre man det bruges til fx at fremhæve kontakt oplysninger eller ligende. Vi anbefaler at holde sig til en lille font størrelse i footeren, da det gør indholdet mere overskueligt.

    Her er nogle eksempler på indhold med forskellige font størrelser.

    Default:

    x 1.5: 

    x 2:

    Hvis man ikke ønsker at gøre den generelle fontstørrelse større, men i stedet ønsker at gøre titlen mere diskret, kan man vælge at alle titler har den samme størrelse som resten af teksten.


    OBS den generelle fontstørrelses vælger vil overskrive denne mulighed, hvis begge er slået til samtidigt. 

    Designmuligheder for footeren generelt (Trin 2 ovenfor)

    Ligesom man kan tilføje margin bund på sektioner på forsiden og sektions sider for at skabe afstand mellem indhold, kan man også tilføje margin bund på blokkene i footeren.

    Margin bund på blokkene skal kun bruges  i tilfælde hvor man har indsat mere end én række blokke. Hvis dette er tilfældet kan man slå margin bund til for at skabe afstand mellem indholdet i rækkerne.



    Positionere indhold til højre kan bruges i tilfælde hvor logo er placeret i højre side af footeren.

    Som default positioneres alt indhold altid til venstre, men man kan vælge at ændre dette. Formålet er at udnytte bredden af griddet.

     

    Der kan opstå situationer hvor rækkefølgen af ens indhold i footeren skal ændres mellem desktop- og mobilvisning og det er her, at indstillingen 'Sorteringsrækkefølge - mobil' kommer på banen.

    Denne indstillingsmulighed er dog mest relevant i situationer hvor logoet er placeret i højre side af griddet, såfremt man ønsker logoet som det første, der vises i mobilvisning.

    I eksemplet herunder ses en footer med fire blokke af links og tekst/logo. Her har første linkliste (som her har overskriften 'Link list') placering 1 i 'sorteringsrækkefølge - mobil'. Det betyder, at den vil vises først i footeren i mobilvisning. Rækkefølgen hedder:

    • Liste 1 har placering 1 
    • Liste 2 har placering 2
    • Tekstboks (blok 3) med rich-tekst har placering 3
    • Logoboks og adresse (blok 4) med logo og rich-text har placering 4

    Det vil se ud som følger på mobil:

    Hvad gør man så hvis man i en mobilvisning ønsker at logo og rich-text har placering 1?

    Man ændre rækkefølgen:

    • Blok 1 med link list har placering 2
    • Blok 2 med link list har placering 3
    • Blok 3 med rich-text har placering 4
    • Blok 4 med logo og rich-text har placering 1

    OBS alle placeringer på alle blokke skal udfyldes før funktionen virker.