Særligt for mobil

I Umbraco er der mulighed for at tage specifikke valg, der kun gælder for visning på mobil.

Sitet er bygget responsivt, hvilket betyder at komponenterne tilpasses afhængig af hvilke størrelse skærm brugeren benytter. Oftest vil det betyde at elementer i en komponent vil lægge sig ovenpå hinanden.

Indhold i højre kolonne (Aside) vises under content i samme rækkefølge som på desktop.

Indhold i footer vises med én kolonne af gangen: kolonne 2 lægger sig under kolonne 1, kolonne 3 under kolonne 2 etc.

Elementer i cards vil også lægge sig under hinanden, så billeder der normalt ville vises til højre eller venstre vil i stedet vises i toppen og herunder kommer overskrift og tekst osv.

Ekstra menupunkter i Burgermenu

Burgermenuen består automatisk af de menupunkter, der er valgt til visning i header.

Derudover kan oprettes ekstra menupunkter nederst.

Se Burgermenu på mobil

Fravælg visning af billede

Ved alle billeder kan det vælges, at de ikke vises på mobil.

Tryk på indstillinger ved det enkelte billede og fravælg

Genveje på mobil

Genveje vil på mobil være beskåret og brugeren kan scrolle til siderne.

Nem måde at teste i egen browser

I din browser er der et indbygget værktøj, hvor du kan gengive din hjemmeside i mobil-størrelse.

Under din browsers indstillinger (3 prikker oppe i højre hjørne (Alt + F)).
Svæv over "Flere værktøjer", som er i bunden af menuen.
Vælg "Udviklerværktøjer" (CTRL + Shift+ I), som er i bunden af "Flere værktøjer"-menuen.
Vælg derpå "Toggle device emulation" (CTRL + Shift + M), som findes i toppen til venstre af den udslåede menu.
Nu ser du hvordan din hjemmeside ser ud på mobil, og kan derpå teste og eventuelt fejlrette.

Du kommer tilbage tilbage til standardvisning ved enten af lukke menuerne på "X"-erne, eller blot trykke CTRL + Shift + I.

(Denne forklaring er med udgangspunkt i Microsoft Edge, samme værktøj findes i både Chrome og Firefox og befinder sig på omtrent samme steder, som beskrevet)