Blocken på dina sidor består av rader och kolumner. Nedan hittar du instruktioner steg för steg för båda.
Ta del av en genomgång hur du redigerar med kolumner och rader i block.
Du hittar allt nedan beskrivet i text också. Se gärna videon som komplement för att visuellt se hur det fungerar i praktiken.
Vad är skillnaden på kolumner och kolumnrader?
I ett block hittar du flera avdelade sektioner på bredden. T.ex. om du har 3 "rutor" i ditt block på en rad så är detta 1 kolumnrad med 3 kolumner i.
Inom ett block kan du således skapa flera rader där det är lämpligt. Generellt rekommenderar vi att skapa nytt block om det är nytt innehåll. T.ex. om du i ett block pratar om dina tjänster och sedan ska ha information om vem du är. Så är detta två unika block. Däremot om du skriver om dina tjänster och inte får plats med det på en kolumnrad kan det ibland vara en lämplig väg att bygga på extra kolumnrader för att färdigställa just det unika blockets innehåll.
Nedan hittar du komplett steg för steg guider i hur du ställer in dina kolumner och kolumnrader med alla dess val och designmöjligheter.
Så hittar du till kolumninställningar
Hovra med musen över en kolumn så kommer du se ett kugghjul med ordet Kolumn visa sig. Trycker på kugghjulet så kommer du till Kolumninställningar (se mer om funktionerna där längre ned i denna guide).
Kolumninställningar
Varje kolumn kan redigeras separat genom att klicka på kugghjulet Kolumninställningar vid valfri kolumn.
Observera! ☝🏼
Att lite längre ned hittar du guide för att ställa in även kolumnraders inställningar. Detta kan vara värdefullt att ta del av i din redigeringsprocess då du t.ex. från denna vy på ett enkelt sätt kan justera avstånd mellan varje kolumn. Du hittar direktlänk till avsnittet här.
Härifrån kan du:
Ställa in bakgrundsfärg
Lägga till bakgrundsbild istället för färg
Som fyller hela kolumnen. När du väljer detta får du även upp nya val där du kan ändra bakgrundsbildens position och fokuspunkt.
Välj bild du önskar som bakgrundsbild genom att klicka på den översta rutan i kolumninställningarna.
Strax nedanför bilden ser du inställningen för Upprepa bakgrundsbild. Välj hur du vill din bild ska kunna upprepas eller inte i ditt block.
☝🏼 Viktigt! Om du önskar att kunna flytta bilden inom rutan så som du ser på nedan bildexempel så krävs valet i denna inställning att vara Täck hela området.
När Täck hela området är valt ser du nu även bilden i en andra ruta där du även ser som en cirkel i bilden. Den här cirkeln är flyttbar och för dig att flytta dit du vill att bakgrunden ska centrera till. På detta vis kan du enkelt anpassa hur din bild visas i bakgrunden.
👉🏼 Observera!
När en bild används som bakgrund i en kolumn så indexeras den inte som bild i plattformen vilket gör att t.ex. bildbeskrivning inte aktiveras för SEO-optimering.
Lägga till gradientfärg.
Öppna Gradientinställningar för att ställa in start- och slutfärg, typ av gradient (linjär/radiell) samt gradientens grader 0-360°.
Lägga till överdrag.
Välj vilken färg du vill ha på ditt överdrag. Kan användas för att t.ex. göra en bakgrundsbild ljusare/mörkare för att text ska synas bättre. På överdraget får du också chans att lägga till gradientfärg med samma inställningar som ovan.
Glasoskärpa i bakgrunden
Skapar en effekt av att se lite blurrigt ut i bakgrunden. Du kan även välja intensitet för denna funktion. Observera att denna effekt endast fungerar när det är ett bildmotiv bakom (t.ex. inte om det är en enfärgad bakgrund).
Reglera toppkolumnens marginal i antal pixlar.
Det här gör så att kolumnen (med dess innehåll) flyttas uppåt och läggs ovanpå det block som finns ovanför i en överlappande effekt. Se bildexempel nedan där toppmarginalen i kolumninställningarna justerats så att bilden överlappar in i det röda blocket ovan. Observera att denna effekt endast syns i desktopvy. I mobil vy läggs alltid kolumnerna inom respektive block över varandra.
Välja innehållsjustering
Reglerar så att innehållet i kolumnen hamnar i toppen, mitten eller botten av kolumnen.
Lägga till en kant runt kolumnen.
Här går att justera färg, storlek och radie.
Lägga till en inre eller yttre skugga för kolumnen.
Skuggeffekter kan vara användbara för att få kolumnen att poppa ut.
Lägga till bakgrundseffekt på lutning
Ställ in med önskad färg, position och riktning på lutning.
Välja om kolumnen ska vara en global kolumn
Detta gör så att exakt samma innehåll visas på varje sida.
Aktivera Bildspelsläge
När denna funktion aktiveras har du möjlighet att skapa flera unika kolumner som sedan bläddrar likt ett bildspel. När funktionen är aktiverad syns i botten av ditt kolumn följande inställningsvy:
Du skapar först din första ordinariekolumn i flik 1. För att skapa fler flikar > Tryck på +tecknet och börja bygg från noll.
Eller kopiera befintliga fliken genom att trycka på de två små kopiera-fyrkanterna så dupliceras den direkt automatiskt.
Du kan även flytta dina bildspelsflikar höger/vänster genom att klicka på en bildspelsflik och "ta tag i den" och sen dra den åt det hållet du önskar.
Använd papperskorgen när du befinner dig på en befintlig flik för att radera den. Vill du radera alla flikar kommer du behöva först att radera en och en.
Ändra/anpassa ditt bildspelsläge genom att trycka på kugghjulet så öppnas flikläget där du kan välja bland flera inställningar så som:
Hur navigeringspilarna ska visas
Om det ska rulla automatiskt
Visa punkter (som illustrerar för besökaren hur många vyer de är och hur många de sett).
Övergångstyp
Parallaxeffekt på innehållet eller ej
Tangentbordsnavigering eller ej
Lägg till anpassad klass.
I fältet som visas kan du lägga till anpassade CSS-klasser (egen källkod). Du hittar det allra längst ned i kolumnens inställningar Tryck på textraden så öppnas fältet för att lägga in klassen.
Ändra antalet kolumner
När du ser på ett block, i mitten av blocket och längst upp ser du knappen [X] Kolumner som visar hur många kolumner du just nu har, och det är även här du kan välja vilket antal kolumner du vill ha (maximalt 5 är möjligt).
Observera!
När du minskar antalet kolumner så försvinner innehållet som fanns i kolumnen innan. Om du t.ex. har 3 kolumner i bredd med innehåll i alla tre. Och väljer minska till 2 kolumner. Så kommer systemet att helt radera kolumnen längst ut till höger. För att ta bort enskilt innehåll eller flytta ordningen på kolumner > se nedan beskrivningar.
Ta bort en kolumn
Du kan enkelt ta bort en kolumn helt genom att trycka på de tre prickarna till höger om koluminställningarna och välja Ta bort kolumn.
Byta plats på 2 kolumner i ett block
Du kan flytta kolumner enkelt genom att klicka på de tre prickarna i en kolumn och sedan välja om den ska flyttas till höger eller vänster. Om kolumnen t.ex. ligger längst ut till vänster kommer endast valet "Flytta till höger" visas.
Skapa nya kolumnrader i ett block
För att skapa en ny rad klickar du på pluset Lägg till ny rad i det här blocket. Det här skapar en ny rad med en kolumn som du kan utöka till fler.
I exemplet nedan har en ny rad skapats ovanför den gamla, se gul markering. Denna rad kan nu fyllas med nytt innehåll/widgets.
Nya rader skapas med en kolumn till att börja med. Om du vill flytta eller radera raden använder du dig av pilarna respektive papperskorgen, se blå markering.
Redigera dina radinställningar
Gör anpassningar unikt i din kolumnrad genom att trycka på kugghjulet
Ändra bakgrundsfärg på kolumnraden
Anpassa färgen på kolumnradens nivå över bredden. Här ser du ett exempel där den beigea färgen bakom är blockets bakgrundsfärg och gröna är kolumnradens.
Ändra kolumnavstånd
Justera enkelt avståndet mellan dina kolumner unisont genom att dra i reglaget.
Lägg till/justera kantlinje, kantradie och skugga på kolumnraden
Skapa en ram runt raden i valfri färg och storlek samt ställ in hur runda hörnen ska vara. Du kan även ställa in skugga runt kolumnraden.
Glasoskärpa i bakgrunden
Skapar en effekt av att se lite blurrigt ut i bakgrunden. Du kan även välja intensitet för denna funktion.
Just nu fungerar tyvärr inte funktionen för glasoskärpa. Detta kommer att åtgärdas inom kort.
Bildspelsläge
Skapa unika rader som bläddrar likt ett bildspel. Läs mer om detta längre upp i guiden genom att klicka här.
Flikläge
Skapa unika flikar med information i din kolumnrad.
Se exempel nedan:
Mekanismen är densamma som inställningarna för bildspel som du kan läsa mer om ovan via den här direktlänken. Förutom de inställningar du hittar i bildspel hittar du även design för dina flikar, etikett (namnet) per flik, ikon (frivilligt) med mera.
Redigera fritt inom dina kolumner
När du placerar widgets i dina kolumner har du möjlighet att sedan aktivera funktion för fri flyttning som gör du kan designa helt fritt så som t.ex. lägga en widget mitt över två olika kolumner i blocket eller placera den exakt där du vill ha den.
OBSERVERA!
Att när du gör fri flyttning påverkar det även mobil vy. Detta medför att du kan behöva skapa unikt mobilanpassat block för att få det exakt som du önskar överallt. Du kan läsa mer om hur du anpassar i mobil vy här.
Såhär flyttar du widgeten fritt:
Tryck på widgeten så redigeringsmenyn visas.
Tryck på de 4 pilarna längst ut till höger.
Observera! Att detta är en "på/av" knapp så när du flyttat klart bör du således trycka på den igen för att stänga av flytta-läget. Inget händer av att den är på - är mer för din skull så du inte råkar av misstag störa den. Du ser enkelt om widgeten är i aktivt flyttläge genom att både ikonen i menyn och ramen runt widgeten är röd.
Här ser du att den är i aktivt läge.
I nedan exempel kan du se hur vi valt att lägga en rubrik mitt över 2 kolumner.
Skulle du vilja återställa din fria flyttning du precis gjort kan du med ett knapptryck återställa den till ursprungsplaceringen innan du började placera den fritt just nu.
Den återställs alltså till sitt läge den var i precis innan du aktiverade fri flyttning vid redigeringstillfället just nu - inte från första början om du t.ex. flyttat runt och sparat flera gånger på samma widget.
Du trycker då på den lilla pilen du ser på bilden nedan:
Har du flera element som överlappar kan du även via pilarna justera vilken som ska vara t.ex. 1:a (främst) och så vidare. Här kan du t.ex. se hur vi lagt rubriken som ranking 1 och brödtexten (bilden) i placering 0 = längst bak.
Har du t.ex. 3 element ska den som ska synas längst fram ha 2, den i mitten 1 och den längst bak 0.
Redigera omslaget runt din widget (wrapper)
Genom att klicka på en widget kommer du bland annat att se som små fyrkanter staplade på varandra som ett val i menyn.
Detta är omslagsinställningar som innebär att du kan skräddarsy viss design runt den enskilda widgeten så som bakgrundsfärg, padding, kantfärg, kantstorlek, kantradie, parallaxeffekt och ställa in så kallade verktygstips.
Padding är samma sak som marginal i internationellt webbspråk. Detta innebär att du reglerar hur mycket luft det ska vara mellan din widget och ytterkanten av den. Här har vi t.ex. ställt in 30px i padding på en rubrik där vi valt en bakgrundsfärg som omslag runt rubriken.
Här har vi lagt till kantlinje + kantradius utöver
Välj parallaxeffekt för en känsla av att elementet kommer glida upp/ned, vänster/höger eller zoomas in när man skrollar förbi det. Likt du kan göra med bakgrundsbilder.
Tipsruta: Ställ in en liten textruta som syns när man hovrar med muspekaren över elementet som kan t.ex. innehålla ett tips om något på din webbplats eller viktig kompletterande information.
Lägg till anpassad klass.I fältet som visas kan du lägga till anpassade CSS-klasser (egen källkod). Du hittar det allra längst ned i inställningarna.