Base Layout F

Base Layout F er en variant af Base Layout A. Her er der fokus på fuldbreede modulerne hvor man bruger baggrundsfarverne i modukerne til at adskille indholdet på siden visuelt. Forskellen er blot, at man her bruger transparens-effekten i baggrunden på modulerne.

Hvis man lægger et pattern ind som baggrund på sitet (eller forskellige patterns på hver side) kan man opnå en helt speciel effekt ved at gøre baggrundsfarven på fuldbredde modulerne transparent. Vælger man feks. et grønt baggrundsmønster, kan man justerer opasity på modulbaggrunden så man kan se mønstret igennem baggrundefarven. Bruger man en sort baggrundsfarve (eg 10% opasity) bliver modulbaggrunden en anelse mørkere og vælger man en hvid baggrund (evt 20% - den skal have lidt mere opasity) bliver denne en smule lysere en mønsterbaggrunden på siden.

Header og footer

I header og footer kan man vælge en markant farve der framer siden. Det kan være en fordel da designet ellers kan blive lidt "løst" med de transparente moduler. Omvendt kan det i nogle tilfælde være flot at gøre header baggrund og footer baggrund transparent (eg 80% sort) så man også her kan se baggrundsmønstret. Se eksempler herunder.

Boarders

Som en ekstra effekt, kan man ramme et Full Width modul ind med en boarder i top og bund. Det gør man ved at bruge Full Width Image modulet. Man vælger en grafik (det kan være alle mulige mønstre, skygge effekter eller linier) som man oploader i full width image modulet og repeater horisontalt. Man lægger så full width image modulet over og et under det modul man ønsker at ramme ind. I det øverstste full width image modul fjerne man spacing så det klapper sammen med modulet man ønsker at ramme ind. Derefter fjerner man spacing på modulet man ønsker at ramme ind, så det klapper sammen med boardern i bunden.

Illustration viser et full width modul (her med et billede) hvor der er placeret en boarder i toppen og en i bunden. Begge boarders er en gul stribe med en skygge effekt. Grafikken er transparent (png) så skyggen kan lægges på alle baggrundsfarver. Grafikker er spejlet i top og bund - og begge er repeated horisontally. HUSK at boarders lavet på denne måde ikke skallerer. Det betyder at de vises i samme størrelse (og dermed pixel-præcist) i både desktop-view, på tablets og i mobile view.

Eksempler

Se herunder eksempler på forskellige designs med transparente full width moduler og boarder designs