Hoppa till huvudinnehåll
Verktyg

Så bygger du en BRS-webbsida

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.

Generellt: Länkstilar & listor

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:

Länkar

Länk med pilsymbol

Länk med extern sajt-symbol

Länk som knapp

Punktlista

  • Listobjekt 1
  • Listobjekt 2
  • Listobjekt 3

Nummerlista

  1. Listobjekt 1
  2. Listobjekt 2
  3. Listobjekt 3

Checklista

  • Listobjekt 1
  • Listobjekt 2
  • Listobjekt 3

Generellt: Linje mellan sektioner (NY)

Du kan använda en horisontell linje för att separera sektionerna från varandra, som komplement till sektionernas färgade bakgrunder. Linjen finns i tre stilar som du kan se exempel på ovan och under: heldragen (se Bakgrundsfärger), streckad (se Länkstilar & listor) och prickad (se här under).

Section Body Text, 1-3 kolumner (NY)

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.

Section Body Text - 1 kolumn (med flödande text)

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.


Platshållare som illustrerar hur en bild kan placeras
Du kan ändra bildens storlek genom att dra i det högre nedre hörnet när du befinner dig i redigeringsläget.

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.

Section Body Text - 2 kolumner

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.

Platshållare som illustrerar hur en bild kan placeras
Bildtext
Platshållare som illustrerar hur en bild kan placeras
Bildtext

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.

Section Body Text - 3 kolumner (NY)

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.

Platshållare som illustrerar hur en bild kan placeras
Bildtext

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.

Platshållare som illustrerar hur en bild kan placeras
Bildtext

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.

Platshållare som visar att den kan ligga en bild i detta område

Section One/Two Large Push/es

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.

Platshållare som visar att den kan ligga en bild i detta område

Högerställd

Bakgrundsfärg: Dark Green
Beskrivning: Detta är en högerställd version med en mindre bild.

Med video inbäddad

Bakgrundsfärg: Light Green
Beskrivning: Detta är en högerställd version med inbäddad video i Rich Content-området. 

50

Anställda

Med nummer

Bakgrundsfärg: Light Blue
Beskrivning: Detta är en högerställd med nummer och enhet i Rich Content-området.

Med två kolumner

Platshållare som visar att den kan ligga en bild i detta område

Push 1

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".

Platshållare som visar att den kan ligga en bild i detta område

Push 2

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".

Section Webform

Bakgrundsfärg: Dark Blue

There was some issue with your form submit

In order to successfully submit, you need to do the following

Section Page Navigation (NY)

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.

Skärmavbild som visar exempel på hur en funktionen Page Navigation ser ur
Exempel på Section Page Navigation

Längst upp på denna sida finns en aktiv Page Navigation som du kan testa.

Sidan uppdaterad 13 Jul 2021, kl 14:49