Arbeta med design för innehåll

Det finns många möjligheter att arbeta med innehåll och göra sidan mer levande. Du kan ange marginaler och indrag för att skapa mer luft mellan de olika objekten. Du kan även lägga bakgrundsbilder bakom text eller i en layout-tabell. Det här avsnittet handlar om hur du designar text, bild, layout-tabell & kod, med indrag, ramar, skugga, färg och bakgrundsbild.

Välj objekt att designa

Gå till sidan du vill arbeta med
(Sök upp sidan i sidarkivet eller navigera dig fram till sidan genom att klicka på Redigera sida)

För muspekaren över objektet du vill designa och klicka på Skiftnyckeln i vänstra hörnet över texten/bilden eller i den lodräta verktygsspaletten till vänster om det är en layout-tabell du ska designa

Klicka på Design

Måttangivelser

Ange alltid px eller % efter den siffra du anger: t.ex 200px eller 50%

Max bredd

Anges pixlar (px) eller procent (%)
Angivet värde sätter maximal bredd på objektet oavsett storlek på skärm

Min bredd

Anges i pixlar (px) eller procent (%) 
Angivet värde sätter minsta bredd på objektet oavsett storlek på skärm

Fast bredd

Anges i pixlar (px) eller procent (%)
Angivet värde sätter en fast bredd på objektet oavsett storlek på skärm
Objektet blir EJ responsivt

Max höjd

Anges i pixlar (px) eller procent (%)
Angivet värde sätter en maximal höjd på objektet oavsett storlek på skärm
Om du kombinerar denna inställning med bredd för en bild så kan bilden bli förvrängd beroende på bildens original storlek

Min höjd

Anges i pixlar (px) eller procent (%)
Angivet värde sätter en minsta höjd på objektet oavsett storlek på skärm
Om du kombinerar denna inställning med bredd för en bild så kan bilden bli förvrängd beroende på bildens original storlek

Fast höjd

Anges i pixlar (px) eller procent (%)
Angivet värde sätter en fast höjd på objektet oavsett storlek på skärm
Objektet blir EJ responsivt

Marginaler och indrag

Marginaler infogas utanpå objektet.  Indrag drar ihop objektet

Över / Under

Dra i reglaget eller ange siffror i rutan för att infoga marginaler/indrag över och/eller under ett objekt

Vänster / Höger

Dra i reglaget eller ange siffror för att infoga marginaler/indrag till vänster och/eller höger för ett objekt

Bakgrund

Infoga en bild eller en färg som blir en bakgrund för texten. För bilder går det ej att lägga in bakgrundsbilder, däremot går det bra att lägga in en bakgrundsfärg

Bild

Klicka på Välj bild och du kommer till filarkivet och kan välja en bild som bakgrundsbild

Repetera

Bilden har en viss höjd och du kan välja att bakgrundsbilden ska repetera. Dvs om texten du skrivit är 200px på höjden och bilden du lägger in som en bakgrund endast är 150px så kan bilden alltså upprepa sig. Detta kan du styra både horisontellt och vertikalt. Du kan givetvis välja att bilden inte ska repetera. Det beror ju helt på hur bilden ser ut. Är det t.ex en bild som föreställer en färg så kan du med fördel låta den repetera. Välj då Repetera så gäller detta både horisontellt och vertikalt

Fästa

Om du väljer Fixerad så ligger bilden fast i bakgrunden och när man skrollar på sidan så rör sig texten över bilden. Väljer du Standard så rör sig texten inte över bilden vid skroll

Position

Ange hur bilden ska positioneras. Detta kan vara lämpligt om du har en bild som är större än själva ytan där den placeras för att visa upp den del av bilden du önskar

Färg

Om du inte vill ha en bakgrundsbild kan du lägga in en bakgrundsfärg. Sätt muspekaren i fältet och dra i reglagen för att hitta en bra färg. Eller skriv in hex kod (#). Du kan kombinera bakgrundsfärg med bakgrundsbild och då visas färgen om du har valt att inte repetera bilden och om texten som är inlagd är längre än bilden

Opacitet

Här anger man opacitet för att ge färgen transparens (genomskinlighet)
Anges i procent (%)

Skugga

Låt en skugga omfamna objektet. Börja gärna med att ange färg för att direkt kunna se resultatet av övriga inställningar

Horisontellt

Dra i reglaget eller ange siffror i rutan för att flytta skuggan horisontellt

Vertikalt

Dra i reglaget eller ange siffror i rutan för att flytta skuggan vertikalt

Suddighet

Dra i reglaget eller ange siffror i rutan för att göra färgen suddig

Spridning

Dra i reglaget eller ange siffror i rutan för att ange hur stor spridning du vill att färgen ska ha

Färg

Sätt muspekaren i fältet och dra i reglagen för att hitta en bra färg. Eller skriv in hex kod (#)
Klicka på OK när du valt färg

Hörn

Gör mjuka rundningar

Övre vänstra / högre och Nedre vänstra / högra

Dra i reglaget eller ange siffror i rutan för att göra hörn. Detta fungerar endast på bilder och om du har lagt en bakgrundsbild, färg, skugga eller ram på texten eller i en layout-tabell/kolumn

Ram

Lägg in en ram runt objektet. Börja gärna med att ange en färg för att direkt kunna se resultatet av övriga inställningar

Ram bredd

Dra i reglaget eller skriv in en siffra i rutan för att ange hur bred ramen ska vara

Typ

Välj i dropplistan vilken typ av ram du önskar, du ser direkt på sidan vilket utseende respektive val har när du gör valet 

Ramfärg

Sätt muspekaren i fältet och dra i reglagen för att hitta en bra färg. Eller skriv in hex kod (#)

BRA ATT VETA

Design för en kolumn i en layout-tabell

Du kan jobba med design för hela layout-tabellen men det går även att designa en kolumn i en layout-tabell. 

Klicka först på Skiftnyckel för layout-tabellen och därefter på Design. Sedan klickar du på Skiftnyckeln för just den kolumnen. Gör inställningar för design och spara. För att sedan designa en annan kolumn gör du likadant. På bilden nedan ser du en layout-tabell med 3 kolumner och markeringen är för design för den tredje kolumnen

Måttangivelser

Du kan ange maximal eller minimal bredd och höjd. Du anger värdet i pixlar (px) eller procent (%)

Exempel: Fyller du i 50% så kommer texten alltid att uppta halva ytan av den position där texten placerats, oavsett storlek på skärm som besökaren har

Fast bredd och höjd innebär att om du anger 500px så kommer texten alltid att ha den storleken oavsett vilken storlek på skärm besökaren har. Dvs texten blir inte responsiv

Marginaler och indrag

Marginaler och indrag skapar utrymme mellan ett objekt och närmast annat objekt. Marginaler läggs utanför objektet medan indrag infogas på objektet

Bakgrund

Du kan lägga en bakgrundsbild bakom texten. Bilden bör passa in i ytan för texten men det finns inställningar att göra för att repetera och justera position för bakgrundsbilden. Vill du hellre ha en bakgrundsfärg kan du istället välja det

Skugga

Börja med att välja färg och gör sedan övriga inställningar för hur skuggan ska visas bakom texten. Dra i de olika reglagen eller ange pixelmått

Hörn

Om du har en bakgrundsbild, bakgrundsfärg, skugga eller ram för texten kan du skapa hörn. Dra i reglagen eller ange pixelmått

Ram

Skapa en ram runt texten. Välj först färg och sedan bredd och därefter vilken sorts stil ramen ska ha

Design för texten nedan:

Här nedan är en text som vi har designat

Text med bakgrundsbild som är fixerad. För muspekaren nedåt så rör sig texten över bilden

Texten har även skugga med 25px suddighet och 10px spridning och 10px vertikalt

Har även lagt in en ram på 2px

Vänstra övre och nedre hörn har en rundning på 15px

10px marginal höger och vänster och 20px indrag över och under

Design för bilden nedan:

Skugga:

15px suddighet
20px vertikalt

Hörn:

40px varje hörn

Ram:

5px
Typ: Ridge

SiteSmart support är bäst i hela världen

Design av layout-tabell nedan

Det här är en layout-tabell med 2 kolumner

Vi har ändrat kolumnbredderna till 38/63 och lagt en dotted ram på 1 px runt hela tabellen

Vi har lagt 10px indrag över/under och till vänster/höger för hela layout-tabellen

I denna kolumn har vi lagt en bakgrundsfärg och gjort indrag till höger och vänster med 10px på texten och även 10px indrag över texten för att skapa lite luft och utrymme

SiteSmart "Trygg Drift" är en obligatorisk månadskostnad som säkerställer våra kunders framåtdrift genom support samtidigt som e-handeln och hemsidan framtidssäkras genom löpande uppgradering av systemkod.

Om du inte hittar det du söker på denna supportsida kan du kontakta vår support via telefon eller e-post. För att tillgodose dig den support vi ger och samtidigt  få ut maximalt av ditt publiceringssystem, behöver du ha genomgått en introduktion i SiteSmart CMS och e-handel.  

Vi finns på plats och svarar på dina frågor måndag - fredag mellan kl 09.00 och 16.00.
Vi reserverar oss däremot för begränsningar under semestertider, större helger och klämdagar.

Stängt för lunch 12.00-13.00.

SITEMAP |  SKICKA E-POST |  0141-20 25 40