Här får du som webbredaktör en presentation av hur sektioner på Business Region Skånes webb ser ut och fungerar. Sektioner är layoutblock med olika utseende och funktion som du kan välja mellan för att bygga dina webbsidor. Varje sektion är flyttbar och kan ges varierande bakgrundsfärger.
Guiden ger dig insikt i layout och möjligheter för varje sektion – och hur de kan kombineras – när du bygger en webbsida i vår plattform.
Våra sektioner och Hero-rubriker kan dekoreras med en bakgrundsfärg ur vår palett. Du som redaktör kan välja mellan dessa färger för att ge din layout ett unikt uttryck. Här ser du alla valbara färger samlade. I kommande kapitel har vi applicerat färgerna på olika typer av sektioner, så att du kan se hur de fungerar.
Hero heading & sektion
Sektion
Hero heading & sektion
Sektion
Hero heading
Sektion
Hero heading
Hero heading & sektion
Sektion
Sektion
Hero heading & sektion
Hero heading
De länkar och listor som du skapar i brödtextfältet på en sektion, kan du styla så att de framträder på olika sätt:
Du kan använda en horisontell avdelare för att separera sektionerna från varandra, som komplement till sektionernas färgade bakgrunder. Avdelaren finns i tre stilar som du kan se exempel på ovan och under: heldragen linje (se Bakgrundsfärger), streckad linje (se Länkstilar & listor) och prickad linje (se här under).
Bakgrundsfärg: White
Section Body Text används för att lägga in text och bild på en sida utan någon specifik layout eller funktion. Du kan anpassa bredden på en bild i sektionen genom att dra i ena hörnet på bilden i redigeringsläget. Du kan även välja att placera bilden till höger eller vänster sida, samt välja om du vill låta texten flöda kring bilden. En Section Body Text kan ha 1-3 kolumner.
Du kan välja att låta bilder i Section Body Text vara uppförstoringsbara genom zoom-funktionen (aktiverar en zoom-ikon på bilden).
Bakgrundsfärg: Light Green.
Beskrivning: Exempel på bild i brödtext med bildjusteringen "Vänster" inställd, med resultatet att bilden positioneras till vänster och texten flödar kring dess högermarginal.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Bakgrundsfärg: Light Green
Beskrivning: I en Section Body Text finns tre body text-fält tillgängliga. Om du lägger innehåll i två av fälten, kommer det att skapas två kolumner när du publicerar. Här är ett exempel på hur det kan se ut. Se nästa sektion hur det ser ut med tre kolumner.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Bakgrundsfärg: Light Green
Beskrivning: I en Section Body Text finns tre body text-fält tillgängliga. Om du lägger innehåll i alla tre fälten, kommer det att skapas tre kolumner när du publicerar. Här är ett exempel på hur det kan se ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Bakgrundsfärg: Dark Green
Bakgrundsfärg: White
Bakgrundsfärg: Light Rose
Bakgrundsfärg: Yellow
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Valfri länk
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Valfri länk
Bakgrundsfärg: Light Green
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Bakgrundsfärg: Dark Blue
| Filer | Beskrivning | Filtyp | Ladda ner direkt |
|---|---|---|---|
| Logotyp – Film i Skåne (2 MB) | zip | ||
| Typografi – Business Region Skåne (1 MB) |
Bakgrundsfärg: White
Bakgrundsfärg: Dark Green
Bakgrundsfärg: Yellow
Beskrivning: One/Two Large Push/es kan innehålla upp till två puffar på bredden där bilden, videon eller numret – s k Rich Content – ligger bredvid texten. Om du använder en puff så kan du höger- och vänsterställa hela sektionen (ej möjligt med två puffar). Som i övriga puffsektioner kan du välja att visa en mindre eller större version av bilden, videon och numret genom "Rich Content Expand"-funktionen; samt välja om bilden ska vara rund. Denna puff är vänsterställd med större bild. Undertill är en högerställd puff med mindre bild. Om du väljer att inte ha Rich Content kommer texten att ta upp hela bredden.
Bakgrundsfärg: Dark Green
Beskrivning: Detta är en högerställd version med en mindre bild.
Bakgrundsfärg: Light Green
Beskrivning: Detta är en högerställd version med inbäddad video i Rich Content-området.
50
Anställda
Bakgrundsfärg: Light Blue
Beskrivning: Detta är en högerställd med nummer och enhet i Rich Content-området.
Detta är en One/Two Large Push/es-sektion med två puffar, och i den här puffen har vi valt att visa en mindre version av bilden genom att avaktivera funktionen "Rich Content Expand". Vi har däremot aktiverat funktionen "Round image".
Detta är en One/Two Large Push/es-sektion med två puffar, och i den här puffen har vi valt att visa en större version av bilden genom att aktivera funktionen "Rich Content Expand".
Bakgrundsfärg: Light Blue
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Bakgrundsfärg: Light Green
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Bakgrundsfärg: Dark Blue
Section Articles listar befintliga artiklar i systemet på två sätt. Det ena i form av ett automatiskt flöde utifrån när artiklarna publicerades, som du ser exempel på här. I detta läge har du även möjlighet att filtrera ut artiklar baserat på den/de kategori/er du taggade artikeln med när den skapades. Det andra sättet är att du redaktionellt väljer ut vilka artiklar som ska listas, dessa anger du i sektionen – se 14.1 nedan. I båda fallen kan du välja att visa tre eller fyra artiklar per rad, samt hur många artiklar du vill visa totalt i sektionen (mellan 3 och 12).
Här är ett exempel på artikelflöde med manuellt utvalda artiklar, ett s k redaktionellt flöde.
Med Section Slide Show kan ni skapa ett bildspel som roteras horisontellt med pilar. Bildspelet visar upp bildtexter till varje bild (om de finns) och besökare kan förstora bilderna vid behov. Ni kan ladda upp bilderna till bildspelet antingen direkt från er dator, eller välja dem från redan uppladdade bilder sparade i Medie-bibliotek.
Här kan du lägga in en bildtext
Med sektionen Page Navigation skapar du en lokal menynavigation för innehållet på en viss sida. När du placerar Section Page Navigation på din sida, hämtar den H2-rubrikerna från de innehållssektioner som finns på sidan, och bygger automatiskt en numrerad länklista, se hur det ser ut nedan. Besökare som klickar på en rubriklänk skickas till respektive innehållssektion genom skroll. Med hjälp av knappen "Tillbaka till menyn" (som syns när Section Page Navigation är aktiv) hittar besökaren snabbt tillbaka till menyn.
Längst upp på denna sida finns en aktiv Page Navigation som du kan testa.
Med denna sektion kan du visa en bild i ett par olika utsnitt, bl a utfallande eller med padding. Du kan också välja att ha text och knappar.
Version med mindre bild samt text och knapp
Version med utfallande bild samt text och knapp
Används för att presentera logotyper för samarbetspartners.
Bakgrundsfärg: Light Blue
Denna sektion används för att lista och filtrera innehållssidor. Den fungerar som Section Articles och Section Events, men för Content- och Landing Pages. Sektionen kräver att ni taggat sidorna med kategorier.
Bakgrundsfärg: Dark Orange
Sidan uppdaterad 09 nov 2022, kl 14:33
