Anpassa utseendet på er föreningssida

Vill ni sätta er egen prägel på föreningens hemsida? Som webmaster eller styrelsemedlem kan ni enkelt anpassa design, färger, typsnitt och textstorlek på er föreningssida - utan att behöva några tekniska kunskaper. Och det bästa av allt: ni kan alltid ångra era ändringar eller återställa till originalutseendet, så känn er fria att experimentera!

Så här hittar du inställningarna

  1. Logga in som webmaster, styrelsemedlem eller ordförande.
  2. Gå till Admin → Inställningar.
  3. Klicka på fliken Design.

Design-fliken under Inställningar

Flikarna under Inställningar - klicka på Design för att komma åt designinställningarna.

Designmall - kom igång snabbt

Det enklaste sättet att förändra utseendet är att välja en färdig designmall. Varje mall innehåller en genomtänkt kombination av färger och typsnitt som passar ihop. Välj bland:

  • Standard (Egrannar) - det ursprungliga utseendet
  • Klassisk - mörkblå toner med elegant serif-typsnitt
  • Modern - ren blå design med modernt typsnitt
  • Mörk - dämpad mörkgrå stil
  • Ljus - fräsch grön ton med mjukt typsnitt

Efter att ni valt en mall kan ni finjustera enskilda inställningar nedan. Mallen är bara en utgångspunkt!

Obs: Designmallen påverkar färger, typsnitt och sektionsfärg, men inte inställningar för headerbild eller sidfot. De ställer ni in separat.

Profilfärg - föreningens huvudfärg

Profilfärgen är er förenings signaturfärg och styr utseendet på toppmenyn, navigeringen, rubriker, knappar, länkar och andra designelement på sidan. Standardfärgen är Egrannars gröna, men ni kan välja vilken färg ni vill - kanske en färg som matchar er logotyp eller era husbyggnader?

Klicka på färgrutan för att öppna färgväljaren, eller skriv in en hexadecimal färgkod direkt (t.ex. #3366cc). Ändringen sparas automatiskt och syns direkt.

Systemet anpassar automatiskt textfärgen på knappar och i toppmenyn så att den alltid är läsbar — vit text på mörka bakgrunder och mörk text på ljusa bakgrunder. Ni behöver alltså inte oroa er för läsbarheten!

Designmall och profilfärg

Här ser ni designmall-väljaren och profilfärgen med färgväljare.

Typsnitt

Ni kan välja typsnitt separat för rubriker och brödtext. Varje typsnitt visas med en förhandsvisning så ni kan se hur det ser ut innan ni väljer.

  • Typsnitt (rubriker) - påverkar alla rubriker på er sida. Standard är Raleway.
  • Typsnitt (brödtext) - påverkar all löpande text. Standard är Lato.

Prova gärna olika kombinationer! Exempelvis ger ett elegant rubrik-typsnitt som Playfair Display tillsammans med ett lättläst brödtext-typsnitt som Open Sans en proffsig känsla.

Textstorlek

Ni kan välja hur stor brödtexten ska vara på er sida. Det kan vara bra om många av era medlemmar föredrar lite större text. Välj mellan Liten (14px), Standard (16px), Stor (18px) eller Extra stor (20px).

Länkfärg

Om ni vill att textlänkar i sidans innehåll ska ha en annan färg än profilfärgen kan ni ange en separat länkfärg. Det kan vara användbart om er profilfärg är svår att läsa som länkfärg i brödtext.

Lämna fältet tomt för att använda profilfärgen även för länkar.

Knappfärg

På samma sätt kan ni välja en separat färg för åtgärdsknappar (Spara, Skicka, Boka m.fl.). Det kan vara praktiskt om ni vill att knapparna ska sticka ut från resten av designen.

Lämna fältet tomt för att använda profilfärgen även för knappar. Varnings- och informationsknappar (t.ex. Avbryt, Ta bort) påverkas inte — de behåller alltid sina standardfärger.

Sektionsfärg (topp/botten)

Sektionsfärgen styr bakgrundsfärgen i namnraden överst på sidan (header-wrap) och i sidfoten nederst. Den är fristående från profilfärgen, så ni kan skapa intressanta kontraster.

Standardfärgen är ljusgrå (#f3f2f1). Textfärgen anpassas automatiskt — vit text på mörka bakgrunder och mörk text på ljusa bakgrunder — så att allt alltid är läsbart.

Länkfärg, knappfärg och sektionsfärg

Typsnitt, textstorlek, länkfärg, knappfärg, sektionsfärg och headerbild-layout.

Headerbild-layout

Välj hur er headerbild (den stora bilden överst på sidan) ska visas. Det finns tre lägen:

  • Standard - headerbilden visas som vanligt, med föreningsnamnet i namnraden ovanför.
  • Text på bild - föreningsnamnet visas direkt ovanpå headerbilden med en halvtransparent bakgrund. Det ger ett modernt och snyggt intryck. Ni kan välja textfärg, bakgrundsfärg och typsnitt för texten.
  • Dold - headerbilden döljs helt. Användbart om ni vill ha en mer avskalad sida.

Inställningar för "Text på bild"

När ni valt läget "Text på bild" kan ni finjustera utseendet:

  • Textfärg på headerbild - färgen på föreningsnamnet. Standard: vit.
  • Bakgrundsfärg för text på headerbild - färgen bakom texten (visas halvtransparent). Standard: svart.
  • Typsnitt på headerbild - välj ett eget typsnitt för texten på bilden, eller behåll samma som rubrik-typsnittet.

Sidfot

Ni kan anpassa vad som visas i sidfoten längst ner på sidan:

  • Egen text i sidfot - lägg till valfri text som visas under föreningsnamnet i sidfoten. Exempelvis kontaktuppgifter, öppettider, eller ett kort meddelande till boende. Radbrytningar bevaras.
  • Visa adress i sidfot - visa eller dölj besöks- och postadress i sidfoten. Adressen lagras fortfarande i systemet även om ni väljer att dölja den.

Headerbild-layout och sidfot

Headerbild-layout, textinställningar för headerbild, sidfotsinställningar och Spara-knappen.

Ni kan alltid ångra och återställa

Var inte oroliga för att testa! Bredvid varje inställning finns två knappar som gör det tryggt att experimentera:

  • Ångra — går tillbaka till det förra värdet. Ni kan ångra flera steg i rad, precis som i ett ordbehandlingsprogram.
  • Återställ — återställer inställningen till standardvärdet, det vill säga Egrannars originalutseende. Perfekt om ni vill börja om från början.

Bra att veta

  • Alla ändringar sparas automatiskt — ni behöver inte klicka på en sparknapp.
  • Ändringarna syns direkt för alla som besöker er sida.
  • Om ni återställer alla inställningar till standard återgår sidan till sitt ursprungliga utseende - som om inget hänt.
  • Ni behöver vara minst webmaster för att ändra dessa inställningar.

Behöver du mer hjälp? Kontakta oss Kontakta oss