(Ej betygsatt)

Redan betygsatt av dig

5.6.1 Kolumner

Det finns en stor variation av kolumn-element, där vissa har fasta proportioner och andra är mer dynamiska och har fler funktioner.

I detta avsnitt kommer vi att fokusera på de dynamiska kolumn-elementen, samt hur du ändrar proportionerna. För kolumner med fast storlek, behöver du endast spara och stänga efter att ha skapat elementet. (Img. 5.6.1.1)

I detta exempel kommer vi att skapa två kolumner med fördelsningen 75%|25%. Börja med att välja elementet 'Advanced two columns grid', under fliken 'Grid Elements'. (Img 5.6.1.2) 

Under fliken 'General' hittar du den mesta informationen (Img 5.6.1.3). Skrolla ner till sektionen 'Plugin Options' för att konfigurera kolumnerna (Img 5.6.1.4).

'Container wrapper' (1) syftar på elementets ram/rutnät som, on det behövs, kan sättas till 'Container' eller 'Container-fluid'. Denna funktion används om ett innehåll skall placeras på startsidan, eller på en sidmall som inte har en begränsning för hur innehållet skall placeras, och då flyter ända ut till sidorna av webbplatsen. Genom att använda 'Container' kommer innehållet att begränsas till webbplatsens mitt. Detta behövs ej på undersidesmallar, då de redan har en inbyggd container.

Inställningarna 2-5 konfigurerar hur proportionerna skall sättas för olika typer av skärmstorlekar. Det finns för mobilvyer (2), surfplattor (3), medelstora skärmar/laptops (4) samt stora skärmar (5). För att ställa in förhållandet, tänker man att det totalt skall vara 12 span i innehållsfältet. Så, för att skapa fördelningen 75%-25%, skall den första kolumen sättas till '8 of 12', och kolumn 2 skall ha '4 of 12'. I detta exempel har denna inställning applicerats på medium och stora skärmar, men på mobil och surfplatta har vi lämnat fältet tomt. Detta gör att innehållet automatiskt placeras i en kolumn på dessa skärmtyper.

'Column Layout' (6), kan användas för att sätta bakgrundsfärg för kolumnen. Detta är beroende på om det i designen finns stöd för det och att det skall vara olika färger för kolumnerna. Färg som ligger bakom samtliga kolumner, brukar istället ställas in via fliken 'Appearance' och 'Indentation and frames'.

'Column Offset' (7) kan jämnställas med en indragsfunktion, som flyttar kolumnen ett antal span in och lämnar en blank ytan till vänster. Notera att om detta används, behöver förhållandet mellan kolumnerna justeras, så att det totalt fortfarande är 12 span. 

Om designen för webbplatsen kräver ett speciellt utseende för innehåll i kolumner, kan detta appliceras via funktionen 'Column Content Wrapper' (8). Till exempel om textstorlek och färg skall skilja sig från vanligt innehåll.

I sällsynta fall kan ett utseende appliceras via en särskild styling-klass och i dessa fall läggs det då en kod i fältet 'Column Class' (9) section.

 

Kommentarer (0)

Inga kommentarer ännu