I denna guide kommer vi gå genom FlexBox02 modulen - en användbar modul för att, till exempel, lyfta innehåll på en sajt på ett snyggt sätt.
Denna guide kräver att du är färdigt inloggad och om du är osäker på hur du loggar in på Digistoff se vår guide Hur loggar man in?
Om du vill skapa ett formulär på en helt ny sida men inte vet hur man skapar en ny sida se guiden Hur skapar man en ny sida?
1. Lägg till FlexBox02 modulen
För att lägga till FlexBox02 modulen på en sida, välj Moduler uppe till vänster.
Klicka därefter på Lägg till modul.
Välj därefter, i dropdown-menyn FlexBox02, klicka på spara och därefter OK.
Nu finns FlexBoxen insatt på sidan. Om det redan finns moduler insatta på sidan så kommer FlexBox-modulen att automatiskt sättas in längst ned. Det går att flytta modulen upp och ned på sidan genom att klicka på pilarna.
2. FlexBoxens egenskaper
FlexBoxens egenskaper, dess layout och innehåll i FlexBoxen går att styra från de tre valen Layout, Hantera data och Inställningar.
I det här fallet börjar vi med att klicka på inställningar. Vi vill ha två FlexBoxar bredvid varandra som har text under bild.
Kontrollera att det då är Kolumner: 2 och att textläge är: Under bild. Klicka därefter på Spara.
I nästa steg vill jag lägga till två FlexBoxar. Eller som det heter på "Digistoff språk" - lägga till två lådor. Börja med att klicka på knappen Hantera data varpå en ny vy öppnas.
I den här vyn, klicka på +Ny låda för att skapa den första FlexBoxen.
Här ges möjligheten att sätta en rubrik till denna första av våra två FlexBoxar. Det går också att skriva en kortare text. I det här fallet vill vi att denna FlexBox ska leda besökare till en annan sajt. Så här har nu FlexBoxen fyllts i som exempel.
Samtidigt som detta fyllts i har det också gjorts några justeringar/ändringar i själva Boxen.
Rubriken har fyllts i precis som ett kortare textfält. Ute i högerkanten har rubrikens storlek ändrats till H3, det vill säga, en aningen mindre textstorlek. I det här fallet har det i fältet för Länk satts in en URL (länk) till Webbhusets startsida. Vi har också valt att målet för den länken är Ny. Det betyder att länken öppnas i en ny flik i webbläsaren. Slutligen har det lagts till en knapptext som heter Läs mer.
De sista inställningarna som gjorts för lådan är att Knapp- och Textfärg ändrats.
Knappfärgen har valts till svart och Textfärgen som Ljus text. Detta gör att vi nu fått en FlexBox som ser ut på det här viset efter att vi klickat på Spara:
FlexBoxen kommer att komma till vänster och till höger har det gjorts plats för ytterligare en då vi sedan tidigare valde 2 kolumner. Det går bra att vid den lilla pennan, nere till höger i "lådan" ännu ändra Boxens utseende. I det här fallet vill jag sätta in en bild som bakgrund och även ändra lådans bakgrundsfärg - klicka på pennan.
3. Lägg till bakgrundsbild och justera bakgrundsfärg i FlexBoxen
Efter att ha klickat på pennan (som betyder ändra/redigera i Digistoff) öppnas lådan igen och det går att börja redigera.
När editeringsfönstret för lådan öppnats igen så börjar vi i det här fallet med att ändra bakgrundsfärgen och därefter ska det sättas in en bild.
Bakgrundsfärg kan ändras antingen genom att sätta in en rgba kod direkt eller välja från färgskalan. Bra att komma ihåg är kontraster, att undvika färger som gör att text blir svårt att läsa.
Nästa steg är att jag kommer välja en bild. Jag väljer en bild som redan finns uppladdad i Digistoff.
På den övre bilden, klicka på ikonen direkt om det grå Bild-fältet. Då tas du vidare till en vy där fil kan väljas (bilder som finns uppladdade i Digistoff). I det här fallet väljs bilden i mitten. Dubbelklicka på bilden och därefter Spara. Då har FlexBoxen fått en länk till en annan sajt (Webbhusets startsida), en ny bakgrundsfärg och en bakgrundsbild. Det betyder att FlexBoxen i det här fallet kommer att se ut så här:
Det går nu att skapa en FlexBox bredvid den första. I inställningarna valdes i detta fall att det skulle vara två kolumner (två bilder bredvid varandra med text under bild). Den andra FlexBoxen läggs till på samma sätt som den första - Hantera data och Lägg till ny låda. I det här fallet läggs det till en ny låda som vill "lyfta" fram delen Verksamhet på sajten. Skillnaden nu blir att länken i FlexBoxen är till en annan del av vår sajt.
Rubriken - Läs mer om Verksamhet. Textrutan har texten En länk till Verksamhet. I fältet under länk har jag valt att FlexBoxen ska ta besökare till vår sida om Verksamhet varför URL:en till den sidan kommer automatiskt in i fältet där det står länk. Samma bakgrundsfärg som till den första FlexBoxen valdes och det sattes in en annan bild som också fanns i Digistoff. Nu kommer de två FlexBoxarna bredvid varandra så här:
Detta är ett sätt att arbeta med FlexBoxar i Digistoff. Läs mer om FlexBox i artikeln FlexBoxmodulen - mer tips.