Globala stilar

Globala stilar är webbplatsens designsystem, samlat på ett ställe. I stället för att formge varje element för sig bestämmer du typsnitt, färger, knappar och layout en gång, och sedan används inställningarna på alla sidor. Ändrar du något här ändras det överallt på webbplatsen.

Du öppnar de globala stilarna med penseln i verktygsfältet till vänster:

Nu ser du en lista över de delar som du kan ställa in globalt:

Klicka på Bekräfta längst ner i panelen för att använda ändringarna, eller på Avbryt för att ångra dem. Med ← Globala stilar högst upp går du tillbaka till listan.

TextstilKopiera länk

Här bestämmer du hur texten ser ut på hela webbplatsen – hur varje rubriknivå och texttyp ser ut, med egna storlekar för dator och mobil.

Därför är det bra:

• Samma struktur på alla sidor: H1, H2 och brödtext ser alltid likadana ut, så att sidorna känns enhetliga.
• Anpassat för olika skärmar: ange olika storlekar för dator och mobil, så att texten är lättläst på alla skärmar utan att du behöver ändra varje sida.
• Ett ställe för läsbarheten: ändra storlekarna för hela webbplatsen på några sekunder i stället för att ändra text för text.

Det här kan du ställa inKopiera länk

• Brödtext: typsnitt och storlek för brödtext.
• Rubrik 1–6: typsnitt och storlek för varje rubriknivå.
• Citat: utseende för citat och omdömen.
• Textlänkar: färgen på länkar på hela webbplatsen, så att de är lätta att känna igen.
• Matcha typsnittsfamilj för dator och mobil automatiskt: samma typsnitt används på dator och mobil.

Klicka på mobilikonen högst upp i panelen för att ställa in alla textstorlekar för mobilen:

Lägg till typsnittKopiera länk

Klicka på Lägg till typsnitt för att öppna listan med Google Fonts, med över 1 000 typsnitt. Du kan söka efter ett typsnitt eller bläddra bland de mest populära eller i bokstavsordning. Du kan använda upp till 8 typsnitt samtidigt. Vi rekommenderar högst tre, för en enhetlig profil, god läsbarhet och en snabb webbplats.

Ladda upp ett eget typsnittKopiera länk

Har du ett eget typsnitt som du vill använda? Klicka på Lägg till anpassat teckensnitt, ge typsnittet ett namn och klistra in länken till typsnittsfilen i rätt ruta: WOFF-fil (rekommenderas) eller OTF/TTF-fil. Klicka sedan på Lägg till.

FärgpalettKopiera länk

Här bestämmer du webbplatsens huvudfärger – primär färg, sekundära färger och bakgrundsfärg – som alla element (knappar, rubriker, accenter med mera) kan använda. Ändrar du en färg här ändras den överallt, så att webbplatsen ser enhetlig ut utan att du behöver färglägga om varje element.

• Palettförinställningar: färdiga färgscheman som du använder med ett klick – eller behåll dina egna färger. Med Utforska fler förinställningar ser du fler scheman.
• Primär färg: huvudfärgen, som används på viktiga ställen (knappar, länkar, markeringar) och på vissa systemsidor.
• Sekundära färger: kompletterande färger för text, bakgrunder och kontraster.
• Bakgrundsfärg: standardbakgrunden på alla sidor.

WebbplatslayoutKopiera länk

Här bestämmer du webbplatsens grundstruktur: hur brett innehållet är och om det fyller hela webbläsarfönstret eller har marginaler. Inställningen gäller alla sidor.

• Rutnätsbredd: innehållets största bredd (till exempel 1 400 px), alltså hur mycket av en stor skärm innehållet använder.
• Layoutstil: välj mellan:
  • Full bredd: innehållet går ända ut till kanterna.
  • Inboxad: innehållet får marginaler till vänster och höger, som du kan fylla med ett mönster eller en egen bild för ett inramat utseende.

KnapparKopiera länk

Här skapar du stilmallar för knappar som du kan återanvända. Du bestämmer exakt hur knapparna ska se ut och använder stilen i alla knappwidgets på webbplatsen, med egna inställningar för dator och mobil.

• Välj en stilmall under Stilmall, eller klicka på Skapa ny stilmall. Du kan också byta namn på eller ta bort en stilmall.
• Ställ in till exempel knappfärg, kantfärg, gradientfärg, textstil, skugga, utfyllning och kantradie. Under Förhandsgranska knapp ser du direkt hur knappen ser ut.

Därför är det braKopiera länk

• Likadana knappar överallt: alla knappar som "Köp nu", "Kom igång" och "Läs mer" använder samma stil och ser genomarbetade ut på alla sidor.
• Olika stilar för olika syften: skapa en stil för de viktigaste knapparna och en annan för mindre viktiga, så att skillnaden syns utan att du formger varje knapp.
• Ändra en gång, uppdatera överallt: ändrar du en stil uppdateras alla knappar som använder den automatiskt.
• Anpassat för olika skärmar: ställ in luft, storlek och avstånd separat för dator och mobil.

RubriketikettKopiera länk

Det här är den globala motsvarigheten till widgeten Rubriketikett – den lilla etiketten ovanför en rubrik. I stället för att formge varje etikett för sig skapar du stilmallar här och använder dem överallt där widgeten finns på webbplatsen, med egna inställningar för dator och mobil.

Du kan ställa in till exempel utseende, färg på bakgrund/kantlinje och text, typsnitt, kantradie och textstorlek.

Därför är det braKopiera länk

• Samma utseende på alla sidor: alla etiketter (till exempel "Nyhet" eller "Utvald") ser likadana ut, så att även små detaljer följer ditt varumärke.
• Olika stilar för olika syften: skapa till exempel en tydlig etikett för "Utvald" och en diskret för kategorier, utan att börja om varje gång.
• Ändra en gång, uppdatera överallt: ändrar du en stil uppdateras alla etiketter som använder den.
• Anpassat för olika skärmar: ställ in storleken separat för dator och mobil.

Sidans utseendeKopiera länk

Till skillnad från resten av de globala stilarna gäller de här inställningarna bara den sida du arbetar med just nu, inte hela webbplatsen. Här ger du en enskild sida en egen bakgrundsbild eller bakgrundsfärg utan att andra sidor påverkas.

InställningarKopiera länk

• Bakgrundsbild: en bild som visas bakom allt innehåll på sidan.
• Upprepa bakgrundsbild: hur bilden visas på sidan:
  • Fixerad: bilden ligger still och upprepas inte när besökaren skrollar.
  • Upprepa: bilden upprepas både vågrätt och lodrätt.
  • Upprepa horisontellt / Upprepa vertikalt: bilden upprepas bara åt ett håll.
  • Ingen upprepning: bilden visas en gång, i sin egen storlek.
  • Täck hela området: bilden skalas så att den fyller hela bakgrunden.
• Bakgrundsfärg: en enfärgad bakgrund för sidan (i stället för eller tillsammans med en bild).