Fuldbreddemoduler trin for trin hos mono.net

Dato: 05.08.2014

Fuldbreddemodulerne trin for trin

Fuldbreddemodulerne er nogle af de nyeste moduler i mono, som er tilpasset til D4 og responsive design. Modulerne er fantastiske til at strukturere hjemmesidens indhold (både tekst og billeder) og de giver gode muligheder for gøre hjemmesidens design unikt og moderne. Modulerne er dog lettere komplekse i forhold til mange andre moduler, fordi de indeholder flere forskellige funktioner på én gang. Det kan derfor være svært at få et overblik over, hvad man kan bruge de forskellige moduler til. Derfor fører vi dig i dette blogpost igennem alle fuldbreddemodulernes funktioner trin-for-trin. Bemærk, at flere af de funktioner du ser listet herunder er unikke for bestemte fuldbreddemoduler.

Før vi går i gang får du lige en kort oversigt over de forskellige fuldbreddemoduler, der nu er tilgængelige i mono.

Oversigt over fuldbreddemoduler

  • Fuldbreddetekst
  • Fuldbreddegalleri (slider)
  • Fuldbreddegalleri 
  • Fuldbredde med to kolonner
  • Fuldbredde med tre kolonner
  • Fuldbredde med fire kolonner
  • Fuldbreddebillede

Her kan du se et billedeksempel på alle fuldbreddemodulerne:

MODULINDSTILLINGER


Baggrundsfarve

I alle fuldbreddemoduler kan du vælge en baggrundfarve ved at klikke i feltet #DDDDDD og enten indsætte den HEX-farvekode du selv har valgt, eller klikke på farvepaletten og vælge en farve derfra. Bemærk, at hvis du holder musen inde på farvepaletten kan du trække den rundt og dermed lettere finde den nuance, du søger. Nedenfor ser du et eksempel på et fuldbreddetekstmodul med en turkis baggrund.

TIP!
Hvis du gerne vil gøre din hjemmeside mere sammenhængende og styrke din branding, kan det være en klar fordel at bruge de samme 2-3 farver på hele hjemmesiden. Find en eller to HEX koder, som du mener styrker din virksomheds identitet (fx farverne fra dit logo) og brug dem gennemgående i dine fuldbreddemodulers baggrund. Læs mere om hvorfor du bør have et simpelt farvetema i Designtrends 2014.

Gennemsigtighed af baggrundsfarven (Opacity)

Med denne funktion kan du opnå endnu flottere effekter. Når du har valgt en baggrundsfarve kan du nemlig vælge, hvor gennemsigtig den skal være på en skala fra 0-100 (hvor 0 er helt gennemsigtig, og 100 er helt uigennemsigtig).

Det kan være en fordel at bruge gennemsigtighed, hvis du fx har en baggrundsgrafik eller et baggrundsbillede på den side, hvor fuldbreddemodulet er placeret. På den måde kan modulet have en baggrundsfarve, der lader baggrundsbilledet skinne igennem. Se et eksempel på effekten her: Nord + Nord.

Du kan også bruge gennemsigtigheden til at gøre modulets baggrundsfarve lysere. Så hvis du fx har valgt en skrigende pink til baggrund, så kan du sætte gennemsigtigheden til 10% og få en blød lyserød farve i stedet. På den måde kan du finde mange flotte farver frem ud fra de traditionelle HEX-farver og gøre din hjemmesides farvetema helt unikt.

Modul padding

Kort fortalt definerer ”padding” den afstand, der er fra indholdet i modulet (fx Overskrift eller indledning) og til modulets top. Du kan altså bruge padding til at øge højden på dit moduls braggrund i forhold til dit indhold, hvilket fx kan være smart hvis du ønsker mere luft imellem dit indhold på din side. Der findes to indstillinger for modul padding: Normal og dobbelt padding, hvor normal padding er standard for alle fuldbreddemoduler og dobbelt padding tilføjer et ekstra lag spacing.

Placering

Her kan du vælge om overskrift/indledning/brødtekst i dit modul skal være venstrestillet, centreret, eller højrestillet. Det har stor betydning for layoutet på din hjemmeside, så prøv dig frem med forskellige indstillinger.

MODULINDHOLD


Overskrift, indledning og brødtekst

I de fleste af modulerne har du mulighed for enten at skrive en overskrift, indholdstekst eller brødtekst. Bemærk dog, at hvis du vælger ikke at udfylde tekstfelterne, så vil modulets form tilpasse sig det indhold du har valgt. Du behøver derfor ikke at udfylde tekstfelterne, hvis det ikke giver mening.

TIP!
Hvis du gerne vil have en side hvor du sætter stort fokus på billeder, så kan du bruge en af fuldbreddebilledmodulerne, og her undlade at udfylde overskrift og indledning. På den måde får du et galleri, hvor du kan justere baggrunden og bruge den til at sætte fokus på billederne. Hvis du fx har en række lyse billeder, kan du vælge en mørk modulbaggrund for at skabe kontrast.

 

Overskrift

Indledning

Brødtekst

Galleri

Her kan du uploade et eller flere billeder, alt efter hvilket fuldbreddemodul, du bruger. Når du har uploadet et billede har du mulighed for at beskære billedet og indsætte en ALT-tekst, som søgemaskiner som Google bruger til at ”aflæse” billedet og indeksere det. Du kan redigere alle billeder individuelt. I nogle gallerier har du mulighed for at uploade et ”miniaturebillede”, som bliver vist i galleriet som teaser til dit billede. Hvis du uploader billeder til galleriet uden at redigere miniaturebilledet, vil dette blot være en mindre kvadratisk udgave af dit billede, som forstørres når dine hjemmesidebesøgende klikker på det. 

TIP!

Du kan vælge at uploade et unikt miniaturebillede, som kan agere som "teaser" til det "rigtige" billede og på den måde skabe en unik effekt for dit galleri. Vær blot opmærksom på at de små billeder du uploader helst skal være kvadratiske, for ellers vil redigerinsværktøjet være tvunget til at presse dit billede ned i en kvadratisk form, som måske vil fordreje billedet.

Se et eksempel på hvordan du kreativt kan udnytte muligheden for at differentiere billedvisningen på mono’s inspirationsside, hvor miniaturebillederne er gjort mere abstrakte og fængende end de faktiske billeder i galleriet.

Antal fotos per side

Hvis du har valgt et galleri, der kan vise flere billeder på én gang, kan du med denne funktion begrænse visningen af billeder pr. side. Hvis du fx uploader 8 billeder i alt, men begrænser visningen til 4, vil de første 4 billeder kunne ses direkte på siden, og de resterende 4 billeder kan vises med et klik på en pil under galleriet. På den måde kan du kontrollere hjemmesidens design uden at skulle begrænse dit indhold.

Knap

På nogle af fuldbreddemodulerne har du mulighed for at indsætte en knap. Du kan tilføje et link til knappen, som enten henviser til en side på din hjemmeside, eller en ekstern hjemmeside. Du kan også vælge hvad der skal stå på knappen, og hvordan knappen skal se ud under ”Layout”.

TIP!

Brug fx knappen til at lede dine besøgende hen til sider på din hjemmeside, hvor du har mulighed for at øge din konverteringsrate. Det kan fx være din webshop, din kontaktside, din produktside, eller en anden side, hvorigennem du sælger dine services.

Fuldbreddemodul med knap

AVANCEREDE INDSTILLINGER


Fjern afstand mellem modul

Dette er en af de fedeste funktioner i mono, som gælder alle moduler. Hvis du krydser af ud fra denne indstilling, vil du kunne ”stable” moduler direkte oven på hinanden, således at du fjerner alt mellemrummet mellem modulerne. Det giver en rigtig god sammenhæng på din hjemmeside og gør dig i stand til at opnå fantastiske designeffekter. Se eksempler på at alle mellemrum mellem modulerne er fjernede på siden hos Menghoff studio (Kun Jumbotronmoduler) og GoodPeople (Fuldbreddemoduler). Vær opmærksom på, at hvis du vil fjerne afstanden mellem 2 moduler skal denne indstilling aktiveres i begge moduler.

Vælg hvor modulet skal vises

Introduktion til modulet Fuldbreddebillede


Det nyeste modul i mono er fuldbreddebilledemodulet, som er en kombination af et baggrundsbillede, et jumbotronmodul og et fuldbreddemodul. Det har nogle helt unikke funktioner, som gør modulet unikt og mere avanceret at arbejde med. Du kan læse mere om dette modul, og hvad du kan bruge det til på mono Academy

Se webinaret: Design med fuldbreddemoduler


2 kommentar(er)

Skriv gerne en kommentar eller et spørgsmål - Klik her!

2014.11.06 Skrevet af mono
Hej Jørgen!

Du kan læse hvordan du ændrer dit subdomæne i trin 1 i dette blogindlæg: http://www.mono.net/10-skjulte-mono-funktioner-2014-01-09

Fortsat god dag!

//mono
2014.08.18 Skrevet af Jørgen Therkildsen
Da jeg ikke vil opgradere før jeg har styr på opbygningen vil jeg gerne vide hvordan "u563094.mono.net " laves om til "Rudkøbing Modelbane.mono.net"
Venlig hilsen
Jørgen