Wordpress dokumentation

1. Basics
2. Sidor
3. Komponenter
4. Sektioner

4.1 Hero
4.2 Knappar
4.3 Animerad Hero
4.4 Wysiwyg
4.5 Startpage svg and text
4.6 Fixed scroll text
4.7 Betonad Fakta
4.8 Betonad länk
4.9 Image Text Grid
4.10 Partner Grid
4.11 Startpage text section
4.12 Subpages automatic menu
4.13 Quiz
4.14 Alla artiklar
4.15 Menyer
4.16 Nyhetsbrev

 

 

1. Basics

Sidomenyer som används mest: 

Media: Bilder, videor, pdf.

Sidor: Alla sidor som finns på webbsidan. Inga sidor är skapade med Inlägg.

Utseende → Menyer: Detta styr huvudmeny och footer

Sidomenyer som används sällan: 

Inställningar → Allmänt: Här kan man ändra på webbplatsens namn och slogan (dessa syns när man delar sidan via länk).

Alla andra sidor är inte kopplat med det Familjen har skapat.

 

2. Sidor

Alla sidor (startsida, undersida, artikel, press sida etc.) är bygg med samma bas.

  1. Titel – Sidans titel som visas uppe på browser fliken och url:en. Denna text syns inte på sidan. Ändra inte detta för startsidan.
  2. Komponenter finns för varje sida. Här byggs vad som syns på sidan.
  3. Här kontrollerar man om sidan ska synas på webben. Man kan ändra på sidan och förhandsgranska innan man publicerar sidan.
  4. Här kan man bestämma om en sida är en subsida (undersida för en huvudsida). Detta gäller för artikelsidor. I överordnat kan man välja huvudsidan till denna sida. Detta gör att alla undersidor kan synas under huvudsidan (som samlade artiklar).
  5. Utvald bild rekommenderas till alla sidor. Det är denna bild som syns när man delar länken. Samt om sidan är länkad med komponenterna på denna sida så kommer denna bild visas som kort bakgrund. Inga bilder från Komponenter kommer visas på länken.
  6. Denna text används för artikelsidor. Skriv en kort förklaring (2 rader) om vad artikeln handlar om. Detta syns på korten som artiklarna är länkade till.

 

3. Komponenter

Bilden ovan visar alla komponenters namn samt vart de rekommenderas att användas. Vissa komponenter är designat för att vara på specifika sidor. När en komponent används på en sida som vi inte har kryssat i ovan kan den sluta fungera korrekt.

 

4. Sektioner

 

Ibland kan komponenterna kallas för sektioner. Här ovan ser man vart komponenten bryter och en ny komponent kommer efter. Även om vissa komponenter har samma bakgrundsfärg så ska man veta att de är inte en och samma komponent i wordpress.

Sektioner kan bestå av flera komponenter. Ovan ser man 3 sektioner men det är bakgrundsfärgen i komponenterna som styr om två sektioner tillhör varandra. Totalt är det 6 komponenter på bilden.

 

4.1 Hero

Kan användas på alla sidor. Ändrar sitt beteende beroende på sida, därför är Sub headline och knapp enbart anpassat för startsidan.

  1. En liten text ovanför titel. Används enbart till startsidan. Passar inte på andra sidor då titeln är centrerad.
  2. Titel
  3. Bild bakgrund för hela sektionen
  4. Knappar som leder till andra sektioner på samma sida eller andra sidor. Denna används enbart för quiz sektionen på startsidan. Alla Hero sektioner är långa för startsidan, vilket gör plast för knapp där.
  5. Bakgrundsfärg när det inte finns en bild. Om man använder bakgrundsfärg istället för bild så kommer sektionen vara kortare.

OBS! Sektionens höjd beror på om man har om komponenten är på startsidan (längsta sektionen), om det finns bakgrundsbild (halv sektion), eller om det bara är en bakgrundsfärg (kortast).

 

4.2 Knappar

Knappar finns på flera komponenter, det är nästan samma upplägg för alla knappar.

  1. Vad som ska stå på knappen.
  2. Vilken sida som ska visas när knappen trycks. Det kan stå ”Länktext” när man trycker på ”Välj länk”. Denna text kommer inte visas och kan lämnas blank.
  3. Vilken färg knappen ska ha. Välj efter vilken bakgrundsfärg sektionen har.

 

4.3 Animerad Hero

Används enbart på startsidan.

  1. Titel
  2. Knappar. Första länken är den viktigaste. Denna syns på mobil och på desktop. Alla andra länkar göms i mobil och blir kort version som animeras på desktop.
  3. Video Liggande format
  4. Video Stående format

 

4.4 Wysiwyg

Kan användas på alla sidor förutom startsidan.

Denna sektion ser enkel ut men det är mycket som kan gå fel.

  1. Lägga till bilder, video och pdf. Se till att ha markören där du vill att filen ska infogas.
  2. Textruta där man kan fritt formatera texten.
  3. Bakgrundsfärg till texten

Några regler kring denna sektion:
Använd endast de rödmarkerade alternativen. De andra är ej testade för webbsidan.
Använd från rubrik 2 och ned åt. Rubrik 1 är till för första sektioner.
Klistra in som text – Se till att använda detta inställning så ingen still kommer ifrån word eller docs. Formatera helst texten direkt i wordpress (grön-markerad knapp på bilden ovan).
Använd dig av ”dubbel enter” för att få korrekt mellanrum mellan stycken.

5. Hur det ser ut i wordpress redigerings komponenten.
6. Hur det ser ut på sidan.

När man väljer att infoga bilder i komponenten är det viktigt att välja bildstorlek.

7. Tryck på bilden i Wysiwyg editor och klicka på den lilla pennan, ”Redigera”.
8. På Visningsinställningar kan man trycka på storlek.
9. Välj Stor eller Full storlek beroende på hur stor bilden är. Rekommenderad storlek är 1000px bredd, eller inte över 1500px bredd. Välj storleken Stor om Full storlek är över 1500px bredd.

10. & 11. Här ser man alla text formateringar som vi har skapat för Wysiwyg komponenten.

Ett redigeringstips är att man kan skriva ”—” (tre bindestreck på ny rad och sedan enter),  detta motsvarar en avdelare. Se exemplet nedan.


Ett annat tips är att vanliga stycken kan ha vanliga radbryt eller tightare radbryt. Detta gör man med att hålla shirt och skriver ett radbryt (enter).

Vanligt

radbryt


Tight
radbryt

 

4.5 Startpage svg and text

Används enbart på startsidan.

  1. Text som står under svg bilden
  2. Bilden i svg kod som gör att den kan animeras
  3. Bakgrundsfärg för sektionen

Vi rekommenderar att man enbart ändrar texterna i första rutan. Svg bilderna är för startsidan, därmed är de ej testade för andra sidor.

 

4.6 Fixed scroll text

Används enbart på startsidan.

  1. En rad är en sida. Kan enbart användas på startsidan.

 

4.7 Betonad Fakta

Kan användas på alla sidor förutom startsidan.

  1. Fakta text

Vill man använda detta tillsammans med wysiwyg komponenten så ska man se till att extra mellanrum/mellanslag ska tas bort från wysiwyg innan denna sektion.

 

4.8 Betonad länk

Kan användas på alla sidor förutom startsidan.

  1. Bild (helst en avlång bild)
  2. Titel
  3. Text
  4. Länk (Står alltid ”Läs mer” på knappen, så länknamn kommer inte visas)

 

4.9 Image Text Grid

Används enbart på startsidan.

  1. Titel
  2. Row
  3. Knapp under grid
  4. Bakgrundsfärg

Se till att variera mellan bild och text. För att det ska bli en fin grid så rekommenderar att man har minst 6 eller 9 rutor. Ordningen ska vara:

Bild Text Bild
Text Bild Text
Bild Text Bild

Om man startar med bild så kommer det bli denna ordning på tablet/mobil:

Bild Text
Bild Text
Bild Text
osv..

 

4.10 Partner Grid

Kan användas på alla sidor, behövs nog inte på artikelsidor/undersidor.

  1. Titel
  2. Row
  3. Knapp under grid
  4. Bakgrundsfärg

Hur en Row ser ut när man lägger till rader.

 

4.11 Startpage text section

Används enbart på startsidan.

  1. Nummer på sektion. Håll till ett format, skriv alla nummer med ”0” och ”.”, tex 01.
  2. Titel
  3. Titel kan funka som en knapp. Länka texten till en sida för att läsa mer.
  4. Brödtext
  5. Knapp som leder till samma sida som 3 för övertydlighet
  6. Bakgrundsfärg

 

4.12 Subpages automatic menu

Kan användas på alla sidor förutom startsidan. Se till att det finns undersidor för sidan, annars visas alla sidor på hela siten.

  1. Datum: Om det ska visas datum på varje kort. Bra för artiklar.
  2. Titel som står över sektionen.
  3. Parent page: Välj en sida som har undersidor. I detta fall så finns 2 artiklar under sidan Aktuellt.
  4. Limit: Max antal av kort som visas. Finns det inte 5 kort så visas alla som finns. Finns det fler än 5 kort så tar den dem senaste. Denna sektion blir scroll när korten är längre än sidans bredd. Vi rekommenderar max 8 kort, 5 brukar räcka om man inte har väldigt många nya artiklar per vecka.

Läs mer knappen sköter sig självt.

Obs! Viktigt för att få samma effekt på korten är att man fyller i Utvald bild och Utdrag i sidospalten på sidan. Se nästa bild.

Går man in på en sida så finns det en rad på högersida. Dessa boxar är inte viktiga för att sidan ska se bra ut, utan det är när sidan länkas på webbsidan eller på internet som det blir viktigt.

  1. Här kan man ändra publiceringsdatum.
  2. Om det är en sida som ska tillhöra en huvudsida så kan man välja det här. Ska det vara en huvudsida eller enskild sida ska det stå (utan överordnad).
  3. Bild för när man delar länken eller delar länken med kort på webbsidan.
  4. Kort text om vad artikeln/sidan handlar om. Högst en mening lång.

 

4.13 Quiz

Kan användas på alla sidor förutom startsidan. Denna komponent går inte ihop med någon annan komponent.

Obs! Om det är en quiz som skapas så får inga andra sektioner finnas på sidan.

  1. Liten titel ovanför den stora titel
  2. Titel
  3. Text under titel. Detta är första sidan som användaren kommer in på, berätta vad quizzet innehåller.
  4. Frågor – se nästa sida (4.1, 4.2, 4.3)
  5. Bildbakgrund till alla frågor
  6. Avslutningstext. Svaren kommer alltid finnas men avslutningstexten finns inte, utan måste fyllas i.

4.1 Fråga eller påstående
4.2 Text på svars sidan. Funkar som wysiwyg sektionen. Använd inte Rubrik 1. ”Falskt” texten är i rubrik 2.
4.3 Var svaret sant eller falskt. Används för att räkna hur många rätt/fel man hade.

 

4.14 Alla artiklar

Kan användas på alla sidor förutom startsidan.

  1. Inget behöver fyllas i. Så länge det finns sidor som är sorterade som undersidor till den sidan som har komponenten ”Alla artiklar” så kommer alla undersidor att ordnas under huvudsidan. T.ex om sidan Artiklar är överordnad för flera sidor, när denna komponent läggs under denna sida kommer alla undersidor visas. Mer om underordnad på Sidor (punkt 4) och Subpages automatic menu.

 

4.15 Menyer

  1. Välj först vilken meny du vill redigera.
  2. Se till att det är rätt meny som du redigerar. Main menyn är menyn högst upp på en sida. Footer menyn är den som är längst ned.
  3. Bocka i vilken sida du vill lägga till. Tryck på ”Lägg till i menyn”.
  4. Se till att ordningen är korrekt. Här kan man drag and drop (klicka, hålla in och släppa på rätt plast.) Det finns ingen support för menyrader som har undersidor.
  5. Spara när du är klar.

 

4.16 Nyhetsbrev

Finns på alla sidor.

Denna sektion är skapad och inlagd på varje sida innan footer med kod. Om något med denna sida ska ändras måste en programmerare göra det.