Malmö stad
$left
$middle

Dynamisk intromodul

Denna modul är framtagen för att vi ska kunna ha ett intro på en sida med text ovanpå bild. Var alltid noga med att använda rätt sorts lite diffus eller vag bild eller bakgrund om du använder denna modul.

Så här kan modulen se ut

Exempel på hur modulen Fokus - Box kan se ut

Förutsättningar för modulen

En dynamisk intromodul är sammansatt av tre lager. Det översta är texten (svart text i bilden ovan), mellanlagret är bakgrundsplattan för texten (vit, delvis genomskinlig vit platta i bilden ovan) och det understa är bilden som är vald som bakgrund (mönstrade bakgrundsbilden med gröna nyanser).

Du måste inte använda det mittersta lagret, utan kan välja att ha din text direkt på bilden - men du måste i så fall vara mycket noga med att kontrasterna funkar och att texten är tydlig och läsbar. Mellanlagret är till för att öka läsbarheten för texten om det behövs.

Modulens inställningar

Modulens totalbredd (pixlar)

Ange vilken maxbredd din modul ska ha. Ett bra utgångsvärde är 1920px, som många skärmar har som standardupplösning.

Innehållets bredd (pixlar)

Om du vill begränsa den "aktiva" ytan kan du göra det här. Lika med eller mindre än inställningen för modulens totalbredd.

Anpassa bredd efter innehåll

Om du klickar i denna box kommer den bakgrundsplatta (se nedan) som går att ha att anpassa sig efter textens bredd.

Bild

Peka ut den bild som ska vara bakgrund i din puff. Checkboxen "Bilden är dekorativ" är som standard ikryssad och betyder att bilden inte ska ha någon alt-text. Med tanke på att texten hamnar över bilden är det bara i ovanliga undantagsfall bilden inte är dekorativ.

Box-inställningar

Om du inte fyller i någonting i dessa inställningar kommer inte någon box att användas.

Använd hex

Klicka i denna box om du vill ange bakgrundsfärg i hex-format istället för att välja någon av våra vanliga färger i fältet "Bakgrundsfärg på boxen".

Bakgrundsfärg på boxen

Välj färg på boxen utifrån våra vanliga färger.

Opacitet

Här ställer du in hur mycket eller lite genomskinlig din färgplatta bakom texten ska vara. Det går inte att säga generellt vad som är det bästa eller det rätta - du måste anpassa detta efter vilken bild du valt som bakgrund och hur bra texten syns. Var noga med detta, eftersom att det är ett glasklart tillgänglighetsproblem om texterna syns för dåligt.

I exempelbilden ovan har jag valt inställningen 85% för opaciteten. 100% innebär att plattan inte är genomskinlig alls och 10% innebär att plattan är väldigt, väldigt genomskinlig.

Marginal runt innehåll

Här kan du ställa in hur mycket eller lite marginal du vill ha runt texten jämfört med kanten på din färgplatta. I exempelbilden ovan är den inställd på 10px marginal.

Form

Välj om bakgrundplattan ska vara kantig eller rundad i formen. "Rund" innebär i praktiken oval, även om det beror en hel del på vilket textinnehåll du har. Som utgångspunkt är det klokt att utgå från kantig platta; det är betydligt lättare att få snyggt.

Positionering av textbox

Modulen är, tekniskt sett, indelad i tre delar: vänster, mitten och höger. Här väljer du vilken av dessa ytor textboxen ska finnas inom.

Länkar-inställningar

Länkar

Här skapar du de länkar du vill ha i din intropuff. Du anger vad länktexten ska vara samt vart den ska länka. Du behöver inte ha några länkar alls.

Bakgrundsfärg på länkar

Välj om länkknapparna ska vara svarta eller vita.

Visa pilar

Icheckad om du ska visa pilar på länkknapparna. Vanligtvis gör vi det.

Begränsa antalet synliga länkar på små skärmar

Om du har många länkar kan du med detta fält styra hur många som får visas på små skärmar (mobiler). Om du har 6 länkar totalt och anger 3 här, kommer de tre som ligger överst i länklistan att visas medan övriga döljs på mobil.

Text-inställningar

Rubrik

Rubriken i din modul.

Rubriknivå

Ange vilken rubriknivå som ska gälla för rubriken. Var noga med detta - felaktig rubrikstruktur är en av de vanligaste tillgänglighetsbristerna.

Om din modul ligger först på din sida ska du använda H1. I övrigt ska du anpassa ditt val utifrån hur du lagt upp din sida; H2 är vanligast, men även H3 kan ibland vara rätt.

Text-färg

Färgen som ska användas för texten i din puff. Du kan välja bland våra vanliga färger. Svart eller vit rekommenderas starkt.

Använd hex

Klicka i om du vill ange textfärg med en hexkod. Rekommenderas generellt inte, men om du gör det så var väldigt noga med bakgrundsbild och färgplatta så att du uppnår goda kontraster i allt innehåll.

Ingress

Här skriver du den ingress eller brödtext som ska finnas i modulen.

Det finns möjlighet att använda så kallad "Markdown" för att göra mer "avancerad textredigering", som exempelvis punktlistor. Klicka på länken "Markdown" i anslutning till fältet för mer information om möjligheterna.

Om du bara ska ha ett vanligt textstycke skriver du det precis som vanligt och kan helt bortse från Markdown-grejen.

Formatmall på text

Ange om det ska vara formatmall "Ingress" eller "Brödtext". Använder du puffen som intro till din sida är det mycket sannolikt att du ska välja "Ingress".

Textjustering desktop

Här anger du vilken linjering texten ska ha. Vänsterställd text är det vanligaste, men Centrerad är rimligt om du inleder en sida med denna modul och inte har allt för lång text (det kan vara jobbigt att läsa för långa centrerade texter).

Textjustering mobil

Här anger du vilken linjering texten ska ha. På mobiler är det nästan alltid sjattigt och svårt att läsa centrerad text. Så även om det ser helrätt ut när du designat din sida på desktop är det klokt att låta texten vara vänsterställd på mobil.

Sidan senast uppdaterad:

sv