Anpassa snabbt färger, typsnitt och skapa globala stilar för knappar och rubriketiketter 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. Detta kommer underlätta din framtida redigering i webbplatsen varvid vi starkt rekommenderar att sätta upp detta.
Börja gärna med att se vår videogenomgång av globala stilar
Du hittar sedan även under videon textbeskrivningar på alla funktioner.
Färgpaletten
Det är här du ställer in dina färger. Om du inte har valt färger kan du här använda vår funktion för Palettförinställningar som ger dig förslag på färdiga paletter du sedan kan anpassa som du önskar.
Så länge du inte sparar kan du enkelt klicka runt på de olika anpassade färgmallarna och se hur webbplatsen anpassar sig. Men sparar du på Bekräfta-knappen längst ned i inställningsvyn för globala stilar - går det tyvärr inte att justera tillbaka som det var före.
Observera!
Att vi på Webbas rekommenderar du följer ovan struktur du ser i palettexemplen. Även när du väljer färger själv. Detta för att undvika extra redigering när du t.ex. använder Webbas mallar med mera som är anpassade efter följande struktur.
Om du väljer mall hos Webbas som ser märklig ut i färgerna
Så beror detta på att hur du placerat dina färger i globala stilar inte matchar systemets logik vilket t.ex. kan orsaka mörk text på mörk bakgrund. Det är enkelt åtgärdat genom att du i blocket manuellt justerar det till så du vill ha - men kan vara bra att känna till.
Välja din primära färg, sekundära färger och bakgrundsfärg
För enklast redigering framåt rekommenderar Webbas följande struktur.
Primära färgen = Blir din webbplats temafärg som kommer synas på vissa systemfunktioner (t.ex. Ange kampanjkod i din kassa (som inte går att justera) samt standard för dina knappar om du inte valt annat i globala stilar för knappar.
Denna rekommenderas generellt vara en mörkare/starkare färg.
Sedan i följande ordning från vänster till höger i de sekundära färgerna:
Sekundär 1️⃣: Ska helst vara lite mörkare än den primära
Sekundär 2️⃣: Avses vara t.ex. ljus text på hemsidan och ska att exempelvis kunna synas bra som textfärg på din primära knapp. Samt som ljus bakgrund.
Sekundär 3️⃣: Kommer vara där det är mörk text automatiskt av systemet (funka på ljus bakgrund). Och som mörk bakgrund.
Sekundär 4️⃣: Kan med fördel vara åt ljusare hållet och också användas som bakgrundsfärg.
Bakgrundsfärgen är den färg som blir standard som bakgrundsfärg på webbplatsen. Om du t.ex. lägger in ett block i byggaren kommer den ha denna färg som utgångsläge.
Generell textfärg: Den färg din text som standard kommer ha där inte dina globala stilar tillämpas eller annan anpassning.
Global stil för knappar
Ställ in färdiga stilmallar för knappar både för desktop och mobil och olika syften/design för att snabbt kunna välja knappar när du bygger utan att behöva ställa in varje enskilt.
Global stil för Rubriketiketter
Ställ in färdiga stilmallar för rubriketiketter (som en slags etikett/överrubrik att lägga över olika element) både för desktop och mobil och olika syften/design för att snabbt kunna välja rubriketiketter när du bygger utan att behöva ställa in varje enskilt.
Global stil för Typsnitt/Textstil
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.
Under fliken Textstil 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 h-taggen på H2 så anpassas den direkt till din globala textstil så att du konstant slipper och justera varje textwidtet manuellt.
H-tagg/textnivå = Detta är så man strukturerar text och rubriker för att göra webbplatser mer sökbara på t.ex.sökmotorer. Du kan läsa mer kring detta här.
När du klickar på en utav textnivåerna öppnas en ny ruta (se bild lite längre ned) där du väljer:
Typsnitt
Teckenstorlek
Teckenavstånd
Radavstånd
Textfärg
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.
Och brödtexten är just - brödtexten.
Väljer du Rubrik 1 i rubrikwidgeten 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 i desktop så länge du inte gjort skräddarsydda anpassningar på widgeten i desktop som brutit den globala stilen.
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, teckenfärg eller liknande 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.
Ett tips! 💡
Är att bocka i rutan: Matcha typsnittsfamiljen för dator och mobil automatiskt. Detta kommer göra så att när du ställt in din globala textstil på desktop - speglar mobila vyn alla inställningarna direkt. Så du bara kan justera ev. typsnittsstorlek där. Vilket gör konfigurationsprocessen extra smidig och snabb.
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. Du kan läsa mer och förstå den mobila vyn bättre genom denna kompletta guide.
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å.
Detta gör så du väljer vilken nivå det ska vara, samt genom att markera en text kan du se vilken nivå den har just nu.
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.
💡TIPS! Återställ en text till sin globala stil i en rubrik eller textwidget
Om du har justerat en widget med text eller rubrik i någon gång manuellt kommer denna inte justeras när du ändrar de globala stilarna. Ett tips för att snabbt återställa en sådan widget till ursprungsformat är att markera texten och sedan trycka på det lilla suddgummit i textinställningarnas vy till höger och sedan välja eventuell ny rubrikstil om det behövs så blir det din globala stil.
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.
