WASP-ED Logo

 Förkunskaper

Denna manual innehåller instruktioner som är specifika för den sajt-mall som vi har tagit fram. För att kunna använda sig av sajten behöver man lära sig hantera wordpress och gärna också divi.

WordPress

WordPress är en av världens vanligaste programvaror för att bygga webbsidor. Det är viktigt att förstå hur wordpress fungerar för att kunna hantera sajten rätt. Läs mer här:

https://learn.wordpress.org

Divi

Divi är en sidbyggare. Den fungerar tillsammans med wordpress, och har funktioner som gör det lättare att bygga snygga och avancerade webbsajter, utan att kunna programmera. Divi är ganska lätt att använda, men det kan vara väl investerad tid att titta på någon eller några instruktionsfilmer. Det finns många här: https://www.elegantthemes.com/documentation/divi/basics/

Att använda den tomma mallen

När du öppnar din sajt för första gången så finns det redan färdiga sidor, med lite bilder och text. För att sajten ska bli bra, är det viktigt att ändra de grundläggande inställningarna först.

 

Inställningar

Övergripande utseende och layout

 

Ladda upp rätt logga

  • Gå till Dashboard>Divi theme options>general
    Ladda upp projektets logga. Denna logga kommer att synas bredvid huvudmenyn överst på alla sidor.
  • Gå till Divi>Theme Customizer>general settings>site identity
    Lägg upp loggan som en ”sajt-ikon”. Denna ska vara kvadratisk och minst 512×512 pixlar. Sajtloggan syns på bokmärkesflikar och browserflikar.

Välj inställningar för metadata

  • Gå till Dashboard>Divi theme options>general
  • Enable excerpts (om det inte redan är gjort)
  • Enable ”Grab the first post image” (om det inte redan är gjort)

Välj färgskala

Börja inte pilla i modulernas färginställningar! Ändra färgskalan på hela sajten först, sedan kan du modifiera i någon enstaka modul om det skulle behövas. 

  1. Gå till Divi theme options>general>color pickers default palette.
    Ställ in färgerna så att de passar till din nya sajt.
  2. Gå till Divi>Theme Customizer>general settings>layout settings.
    Välj en ”theme accent color” från en av dina sajt-färger. Denna färg kommer att användas på många olika ställen, till exempel i länkar som du har följt, ikoner, streck, aktiva länkar i menyer, och annat. Förändringen syn så snart du har sparat och publicerat dina ändringar.

Välj bakgrundsfärg

Divi>Theme Customizer>general settings>layout settings>Background. Här väljer du vilken bakgrund hela sajten ska ha, antingen en färg eller en bild. Detta är alltså färgen på ”målarduken”, som ligger längst bak på varje sida.

Välj typsnitt, radavstånd och storlek

Gå till Divi>Theme Customizer>general settings>layout settings>Typography.

  1. Välj vilket typsnitt du vill använda till brödtext respektive rubriker.
  2. Välj vilken stil (t.ex. fet, kursiv, endast stora bokstäver) du vill ha till H1-rubrikerna
  3. Välj färg för brödtext och rubriker.

 

Sektions/rad och modul-inställningar

Detta görs inne i Divi visual builder. Sektionerna, raderna och modulerna (text-rutor, bild-rutor, rubriker, menyer etc) kan alla ha sina egna inställningar. Det finns massor av sätt att ändra dessa. Man kan ställa in dem individuellt, eller så ändrar man inställningarna för alla på samma gång. Det är bäst att undvika individuella inställningar i början. Vi rekommenderar följande metod:

Ändra färgskala

Divi ger en möjlighet att ändra färgskala på hela sajten. Det innebär att man ändrar ”global colors”.

  1. Gå till en relativt enkel sida i mallen, t.ex. ”Contact”.
  2. Öppna Divi visual builder.
  3. Öppna inställningarna för en sektion. Gå till ”Background”
  4. Klicka på ”global”, och sedan på nuvarande bakgrundsfärg. Modifiera denna så att det blir den färg som du vill ha som bakgrundsfärg. Du bör nu se att stora delar av sajtens bakgrundsfärger ändras. När du vill stänga dialogrutan kommer du att få upp en varning. Om du är nöjd med din ändring, så klicka ja. Nu kommer de flesta saker som varit svarta istället vara din nya färg. Det gäller inte bara bakgrund, utan andra ställen också.
  5. Ändra övriga globala färgen, genom att gå till en textruta (ändra färg på texten), en ikon, en skiljelinje etc. Varje gång kommer varningen upp, men det är normalt. Att ändra i de globala färgerna gör att det blir en enhetlig färgskala på sajten.
  6. Försvann något? Det kan bero på att du råkade ställa in vit text på vit bakgrund, t.ex. Ingen panik, leta reda på ett ställe där du kommer åt globala färg-dialogen och ändra en av färgklickarna till en annan färg.
  7. Metoden är inte 100 % robust. Om det finns konstiga färger kvar någonstans så ändra dem manuellt, där du ser dem.

Presets och övriga ändringar

Varje modul kan anpassas så att den blir precis som du vill ha den. T.ex. kan man byta typsnitt (för just den modulen), färger på de olika rubrikerna, lägga till animeringar, filter etc. Om du ändrar t.ex. en textmodul så att den får ett nytt utseende, och vill att alla andra textmoduler på sajten ska se likadana ut, är det bra att ändra i presets:

  1. Gå till Settings>Preset (finns längst upp)
  2. Hovra på symbolen som är som en pil, texten ”Update Preset with current styles” kommer då upp.
  3. Klicka på den, och svara ja på varningen som kommer upp.
  4. Nu ska alla textmoduler på hela sajten vara ändrade.

 

Innehållet

När du är nöjd med sajtens utseende är det dags att modifiera innehållet (text, bild, länkar…). I detta steg är det viktigt att du skiljer på sidor (Pages) och inlägg (”Posts”).

Sidor

Ändra existerande sidor (Pages)

Viktigt! Alla existerande sidor är byggda med Divi. Använd Divi för att ändra dem, inte WordPress.

  1. Öppna Divi visual editor
  2. Klicka på modulen du vill ändra
  3. Klicka på kugghjulet.
  4. Ändra innehållet (t.ex. text, bild, länkar, animationer etc)
  5. Spara

Det går bra att kopiera eller flytta innehåll. Sajten är byggd på ett sätt som gör att det i så fall oftast är bäst att flytta hela sektionen, inte modulen. Menyn för kopiera/flytta hittar du bakom de tre punkterna.

Lägga till nya sidor (Pages)

  1. Gå till Dashboard>Pages>Add new
  2. Välj en title och kolla så att url (slug) blir bra.
  3. Välj nu “edit with divi” och sedan “Build from scratch”.
  4. Den nya sidan har sidans title som H1 rubrik, så använd inga andra H1 på sidan. Lägg till de moduler etc som du vill ha på sidan. Spara.
  5. Lägg till den nya sidan så att den syns I menyn (se stycket om menyer).

Ny ”news”

  1. Skapa en ny ”post”. Använd INTE Divi.
  2. Ge den en titel och ange kategori ”news”.
  3. Lägg till en ”featured image” i storlek 700*525.
  4. Skriv innehållet i klassiska editorn. Då går bra att lägga in både text och fler bilder (den bild du valde som featured image kommer med automatiskt)
  5. Publicera

 

Nytt event

  1. Skapa en ny ”post”. Använd INTE Divi.
  2. Ge den en titel och ange kategori ”event”.
  3. Lägg till en ”featured image” i storlek 700*525.
  4. Skriv ett manuellt ”Excerpt” (rutan för detta finns ganska långt ned på sidan)
  5. Skriv innehållet i klassiska editorn.
  6. Publicera

Menyn

Menyns länkar

För att lägga till en ny sida i menyn, eller kanske byta plats på sidorna:

  1. Gå till Dashboard>Appareance>Menus
  2. Detta öppnar den vanliga wordpress-dialogen för menyer.
  3. Klicka dig fram tills det blir rätt. Det går också att dra runt de olika objekten.
  4. Spara

Menyns utseende

Menyns utseende ändras i mallarna som bestämmer utseendet för alla sidor.

  1. Gå till Dashboard>Divi> Theme Builder.
  2. Klicka på pennan vid ”Global header”.
  3. Klicka på settings för meny-modulen.
  4. Spara