Fuldbreddemoduler

Du har måske bemærket, at mange moderne hjemmesider indeholder lange sider med en række informationer samlet på dén ene side, hvor du skal scrolle ned for at læse videre. Imens du scroller nedad, er der ofte forskellige farver, eller det man kan betragte som "lag", som hjælper med at bryde informationen på en visuel måde som gør det lettere at overskue for læseren.

For at understøtte denne moderne tilgang til webdesign har mono udviklet en række såkaldte "fuldbreddemoduler", hvor vi har taget nogle af de mest populære moduler fra monoværktøjet og givet dem en ny funktion: Nu strækkes deres baggrund hele vejen på tværs af browservinduet. I disse moduler kan du definere baggrundfarven i modulet, hvilket transformerer modulerne til "lag", som hjælper med at vise forskellige elementer af indholdet på lange sider, så det ser flot ud og samtidig er nemt at lave.

Indtil videre har vi udviklet seks fuldbreddemoduler. Se dem alle nedenfor.

Brug fuldbreddemodulerne

Alle fuldbreddemodulerne (undtaget Jumbotronmodulet) fungerer således:

1: De har alle to mellemrum - et i toppen og et i bunden af modulet - og alt efter, hvor meget luft du vil have i dit design, kan du vælge at beholde eller fjerne disse mellemrum. 

2: Hvis du vælger ikke at indsætte indhold i et af felterne i disse moduler, vil feltet ikke blive vist på hjemmesiden, når du har publiceret. Tag fx fuld-bredde gallerimodulet. Hvis du ikke skriver noget tekst i Overskriftfeltet eller i Tekstfeltet, så vil modulet kun vise selve galleriet, og ikke efterlade tom luft, hvor teksten ellers ville have stået. Dette lader dig bruge fuldbreddemodulerne på mange forskellige måder.

3: Du kan vælge en unik baggrundsfarve for hvert af de forskellige fuldbreddemoduler, og det giver "laget" en særlig effekt, der adskiller de forskellige indholdselementer fra hinanden på siden.

4: Ved at bruge "fjern mellemrum mellem moduler"-funktionen i Jumbotronmodulet, kan du placere dette modul direkte ovenpå et fuldbreddemodul (intet mellemrum mellem Jumbotron-billedet og baggrundfarven på fuldbreddemodulet). Dette giver dig endnu en unik måde at adskille dit indhold på en tiltalende og overskuelig måde.

Se eksempler på brugen af fuldbreddemoduler nedenfor.

Eksempler

Dette eksempel viser en side, hvor et Jumbotronmodul (hvor mellemrummet er fjernet) er placeret oven på et fuldbreddemodul. Det skaber en effekt, hvor de to moduler får en god sammenhæng. Fuldbreddemodulet i eksemplet er et fuldbreddemodul med tre kolonner, hvor en meget lys grå baggrundsfarve er valgt for at markere overgangen til den næste sektion på siden. I bunden kan du se et overskriftmodul og to tekstmoduler placeret (bemærk at dette eksempel bruger en sideskabelon med to kolonner).

Denne side begynder med en overskrift og en introduktion. Umiddelbart under kan du se et produktlistemodul med 5 grafikker der indeholder links. Hver af disse linker til en galleriside, som er opbygget på samme måde som denne side. Produktlistemodulet fungerer derfor som en slags navigation i dette eksempel.

Nedenunder Produktlistemodulet finder du et fuldbreddegallerimodul. Bemærk at kun overskriften og galleriet har indhold (indledningsteksten og brødteksten er ikke vist på teksten, da der ikke er tilføjet noget indhold i modulet). En lysegrå farve er valgt som baggrund, og mellemrumet er fjernet for at skabe en visuel sammenhæng til modulet nedenunder. Under fuldbreddegallerimodulet er der et fuldbreddetekstmodul. Kun overskriften er i brug, og med den mørkere baggrundsfarve fungerer dette modul som en visuel overgang til teksten og downloadmodulet i bunden af siden.