Hoppa till huvudinnehåll

Globala stilar - färg, typsnitt och utseende

Anpassa snabbt färg och typsnitt utifrån ditt varumärke med hjälp av funktionen globala stilar. Nedan finner du förklaring på hur globala stilar fungerar och hur du kan använda funktionen på bästa sätt. Under texten finner du även en video.

Färgpaletten

När du väljer din färgpalett så kan det vara bra att tänka på följande:

  • Primär färg: Den som syns på t.ex. dina systemknappar. Här rekommenderar vi att välja en av dina mörkare färger i din färgpalett eftersom texten på knapparna automatiskt är satt till vit. Så att du får kontrast på knapparna.

  • Sekundära färger: Påverkar inget specifikt. Men det kan vara bra att tänka på vid byte av färger att byter du ut en mörk färg i paletten under sekundära färger - så är det bra att byta den mot en ny mörk och vice versa. På så vis minimerar du risken för massa manuell redigering där t.ex. en mörk färg ersätts med en ljus och så är texten ljus också vilket du kanske inte ser såvida du inte kollar igenom varje sida.

  • Bakgrundsfärg: Den färg som blir standard som bakgrundsfärg på webbplatsen.

  • Generell textfärg: Den färg din text i t.ex. bloggrubriker med mera kommer ha.

Typsnitt

Vill du lära dig hur du lägger till typsnitt i dina globala inställningar kan du läsa mer om det i den här guiden.

Textstil

Här ställer du in vilka typsnitt du önskar på respektive textnivå så att när du t.ex. drar in en rubrik och ställer in den på H2 så anpassas den direkt till din globala textstil så att du konstant slipper och justera varje textwidtet manuellt.

Textnivå = Hiearkin och typ av text på webbplatsen. T.ex. kallas rubriker på webbplatser ofta för "H1, H2, H3 osv" som hjälper sökmotorer förstå både innehåll på hemsidor och vad som t.ex. är en huvudrubrik på en sida (typiskt översta rubriken på sidan - H1), vad som är underrubrik till den och underrubrik för det i sin tur osv. Samt vad som är t.ex. Brödtext (paragraf).

När det kommer till rubriker så är det när du använder Rubrik-widgeten. Där finns då formateringsalternativ där du kan välja vad för typ av rubrik det är. Väljer du Rubrik 1 och du i inställningar ställt in att den ska vara svart och 34px i desktop så kommer den rubriken få just den storleken och färgen direkt. Gör du inga manuella ändringar i en enskild rubrik och sedan ändrar storleken i din globala textstil så påverkar det alla rubriker som använder den rubriktypen vilket gör det mycket snabbt och enkelt att göra ändringar om du i framtiden t.ex. ändrar typsnitt på din webbplats.

Observera att du behöver ställa in din globala textstil för både datorvy och mobil vy. Detta då mobil vy ofta behöver lite mindre teckenstorlekar osv.

Tänk även på att om det inte är en unik mobilversion utan en "delad vy" som automatiskt skapats så sker ändringen för alla vyer, dvs om du ändrar rubriktyp för en rubrik.

Däremot använder datorversionen de inställningar du ställt in för dator. Och mobila vyn dina inställningar för mobil.

Så ändrar du textnivå i byggaren i en befintlig widget:

Markera en text och tryck sedan på trollspöt längst till vänster i textredigeraren som öppnas och välj sedan din önskade textnivå.


Globala stilar för mobilversionen:

Du kan lära dig mer om hur du anpassar dina globala stilar för mobilversionen i denna guide.

Bra att veta vid ändring av globala stilar:

Om du någon gång har manuellt ändrat en text/rubriks t.ex. färg, storlek eller typsnitt efter du placerat widgeten använder den inte längre globala stilar och kommer då inte heller ändras om du ändrar i dina globala stilar. Detta är för att du kan ha utfört skräddarsydda anpassade lösningar på ställen och därmed vill man inte de påverkas när du justerar det generella i webbplatsen.

Globala stilar kommer inte slå igenom på på allt, t.ex. knappar och vissa punktlistor. Om du har t.ex. Poppins som typsnitt för din brödtext kommer inte dina knappar automatiskt ha detta, det måste ställas in manuellt på varje sådant ställe. Ett tips är att när du skapat en knapp (eller annan widget) du gillar kan du använda dig av kopiera/klistra in/spara funktionen för att använda samma utseende enkelt framåt utan att behöva börja på noll. Vi förklarar det närmre i denna guide.


Kan man ändra färg på textlänkar?

Ja det kan du. Du hittar detta i samma vy där du ställer in dina typsnittsval för respektive placering och texttyp.

Fick du svar på din fråga?