Billedmodul i fuld bredde

Billedmodulet i fuld bredde kan bruges til mange forskellige formål. Modulet har de samme tekst-i-en-boks funktioner som Jumbotronmodulerne, men når det kommer til billederne adskiller funktionaliteten  sig på følgende områder:

1: Billedet uploades altid 1:1, og det skallerer ikke på samme måde som Jumbotronmodulerne gør. Højden på et billede vil ikke ændre sig, når browserstørrelsen ændrer sig, og bredden af billedet skallerer heller ikke i forhold til skærmens størrelse. Du kan selv definere højden på modulets baggrund.

2: Når du uploader et billede (eller en grafik), så har du samme muligheder for at redigere billedet, som du har med et baggrundsbillede. Dette betyder, at et billede/mønster kan gentages, strækkes og placeres på forskellige måder i modulet. 

Dette modul åbner derfor op for mange kreative muligheder for at differentiere designet på en mono-hjemmeside. Modulet er dog målrettet mere avancerede brugere, da mange af designmulighederne kræver at du kan oprette og redigere grafisk indhold. Du kan se eksempler på brugen af modulet nedenfor.

På dette eksempel kan du se, at billedbredden bliver "skåret til", hvis browservinduet er mindre end billedet i stedet for at skallere med browseren, fordi billedet har en fast størrelse.

Sådan indrammer du en side

Du kan nemt indramme dine sider og skabe en unik designeffekt ved brug af fuldbreddebilledemodulet. I eksemplet herunder er modulet blevet brugt til at indramme udvalgt indhold på siden i en grå boks for at sætte fokus på indholdet.


Sådan gør du:

1) Design en grafikfil [B] som udgør midten og siden af den grå boks. Så uploader du filen som baggrund i dine sideindstillinger.

2) Design en grafik til top og bund [A] + [C] og placer dem i et fuldbreddebilledmodul i toppen og bunden af siden. Husk at vælge indstillingen "gentag mønster (vertikalt).

3) For at få modulet til at strække sig ned til bunden af siden, skal du indsætte en CSS-snippet [D]. Klik her for at se hvordan.

4) Tilføj indholdsmoduler imellem de to fuldbreddebilledmoduler i toppen og bunden af siden. Efter som at midtergrafikken er tilføjet som baggrundsbillede på siden, vil boksen automatisk skallere afhængigt af, hvor meget indhold du har på siden, hvilket betyder at din boks kan være uendeligt lang.


BEMÆRK:

Husk at bredden på boksene skal være tilpassede tablet-versionen af hjemmesiden, således at det ser godt ud når dine hjemmesidebesøgende ser dine sider fra en tablet (Dette er fordi at modulet er låst til en fast bredde og derfor ikke skallerer til skærmbredden som andre fuldbreddemoduler).

Tre grafikfiler er alt du behøver for at kunne indramme dit sideindhold.

Sådan opretter du en "indholdsboks"

1) Med de grafikker, som du bruger til at opnå boks-effekten som er beskrevet herover, kan du også oprette en boks som kan fremhæve meget specifikt sideindhold [A] + [C]

2) Placer midtergrafikken [B] i et fuldbreddemodul og vælg den indstilling der for modulet til at gentage mønsteret vertikalt. Du kan nu skrive den tekst du ønsker oven på modulet.

 

BEMÆRK:

Du kan definere højden på modulet i modulindstillingerne. Dette er især nyttigt hvis du vil bruge et mønster som baggrund. Du definerer også modulets baggrundsfarve i modulindstillingerne.

Få et topbillede med en overlappende boks

1) I dine sideindstillinger uploader du en baggrundsgrafik som består af et topbillede + midterdelen af boksen [A]. Billedet skal være så højt, at indholdet nemt kan tilføjes uden at skulle justere baggrundsbilledet.

2) Upload en grafik til bunden af boksen i et fuldbreddebilledemodul [B].

3) Tilføj en CSS snippet som sikrer at modulet går hele vejen ned til footeren [C].

4) Du kan nu tilføje de indholdsmoduler du skal have på siden

Design dine overgange

Du kan understrege din visuelle identitet på din side med en overgang (boarder).

Eksemplet herunder viser et romantisk overgangsdesign, som bruges til at indramme et gallerimodul. Det er designet med en sort transparent PNG-fil med 60% gennemsigtighed. Baggrundfarven på gallerimodulet er også sort med 60% gennemsigtighed. Du kan også bruge overgange i toppen og bunden af en side. Du opretter en overgang således:

1) Lav en overgangsgrafik til toppen af siden[A]

2) Upload filen i et fuldbreddebilledemodul og placer det i toppen af siden. Brug modulets indstillinger til at finde en farve og gennemsigtighed der er passende til sidens generelle design.

3) Gør det tilsvarende med en grafik til bunden af siden [B].