Designa din sajt i Site Styles

Nu ska vi ta itu med designen av vår sajt, med hjälp av Style Editorn. (Som du kommer åt genom att gå in på Design i huvudmenyn och sen in på Site Styles.) Det är här du gör alla utseenderelaterade inställningar för din blogg, så som att ladda upp en logga och favicon, välja typsnitt och färger och fixa till avstånd och utrymmen på din sajt.

Skillnaden mellan att designa en sajt i Squarespace jämfört med t.ex. Wordpress är att när du tidigare varit begränsad till endast de saker som mall-skaparna tyckt att du ska få ändra, eller behövt sitta och gräva bland koden i stilmallarna och kämpa fram en personlig design, så låter Squarespace dig ändra på nästan allt du ser.

Templatet du valt agerar utgångspunkt, och de inställningar du ser i listan under Style Editor varierar lite beroende på vilket template du använder och vilken del av din sajt du tittar på. Ibland tillkommer designreglage för mallspecifika element och funktioner, men du kan alltid ändra färger, typsnitt, avstånd, bredder, et.c.

Som du kommer se när du själv börjar fixa med inställningarna i Style Editor så syns det direkt hur dina ändringar påverkar bloggens utseende. Du kan till och med klicka direkt på de element du vill ändra och så kommer bara de relevanta inställningarna upp i vänstermenyn. Det är tack vare detta som det går så mycket snabbare att designa en blogg i Squarespace. Du behöver inte gissa dig fram, utan kommer snabbt åt rätt reglage och ser hur designen blir.

Var börjar vi då? Jag rekommenderar en lugn och metodisk genomgång av designen i följande ordning:

  1. Header

  2. Navigation

  3. Footer

  4. Övrigt (layout, avstånd och storlekar)

Tips: Se till så att du har dina viktigaste sidor, samt ett gäng blogginlägg, publicerade innan du sätter igång, så att du har något att designa. Vissa inställningar i Style Editor blir nämligen inte synliga om du inte är på en sida där ett sånt elementet finns, t.ex. en knapp, ett formulär eller en rubrik.

Header

Jag gillar att börja med den aspekt av en sajt som står för majoriteten av det första intrycket, nämligen headern.

Alla templates har inte bildheaders, och headerinställningar kan se olika ut för olika templates. Templatet för min exempelsajt (Hayden) har dock bildheaders, och kan jag även ha olika headerbilder på olika sidor. Så jag börjar med att testa olika headerbilder för att se vilka som blir snyggast. Just byta headerbilder kan jag inte göra i Style Editor så jag går in på Pages-menyn istället och laddar upp nya bilders tills jag hittar de jag vill ha:

Tips: Titta alltid på alla dina olika sidor när du gjort ett gäng inställningar. En designändring kanske ser bra ut på en sida, men helt annorlunda när du är inne på t.ex. ett blogginlägg eller en produkt. Du kan inte navigera runt på din sajt medan du är i Style Editor, utan behöver spara och gå ur ett snäpp för att göra det och sedan gå in på Style Editor igen.

Ser du att det ligger som en mörk hinna över över min headerbild här? Det kallas för en "overlay" och är ett färgat filter som du kan lägga på dina headers. Jag tycker att det ser för mörkt ut på min sajt så jag går in på Style Editor, klickar på min headerbild och ser ett gäng inställningar, varav en är "Banner overlay color". (Squarespace kallar headerbilder för banners.) Jag ändrar både färg och transparens på mina overlays, och passar samtidigt på att rätta till lite annat i headern: färgen och storleken på texten, samt hur knappen ser ut:

Sen klickar jag in på mina andra sidor för att kontrollera hur headern ser ut där. Kanske upptäcker jag att vissa bilder är för ljusa för att min vita text ska synas ordentligt. Då kan jag antingen byta ut bilderna där, eller fixa till "Banner overlay color" ytterligare för att fungera med alla mina bilder.

En annan sak jag upptäcker är att vissa av mina headerbilder blir lite väl små, alltså att man inte ser så mycket av bilden. I vissa templates kan du ställa in exakt hur höga dina headers ska vara: kanske vill du att hela skärmen ska täckas av bilden och att besökaren får scrolla neråt för att se resten av innehållet. Eller så vill du bara visa en liten strimma av headerbilden, så som jag gjorde med de olika sektionerna på min Index-sida t.ex.

I mitt template finns ingen inställning för headerhöjd, men ett annat sätt att reglera detta på är att lägga in radbrytningar i texten på headern. Om jag går till Pages-menyn och in på inställningarna för en av de sidor vars header jag tycker är för liten...

...och lägger in en radbrytning eller två i sidbeskrivningen. Så kommer mer av min headerbild att visas. Det ligger nämligen osynliga radbrytningar under rubriken som tvingar fram mer av bilden:

Jag får sen se till att lägga in samma antal radbrytningar på andra sidor om jag vill att deras headers ska vara lika höga.

Tips: Spara med jämna mellanrum så att du inte förlorar några ändringar. Bara utifall att.

En sak jag märkt, och som du kanske också gör i din designprocess, är att mitt ursprungliga färgschema inte riktigt fungerar längre. Eftersom jag bytt ut headerbilden på min startsida så är det nu färgerna i den som präglar det mesta av helhetsintrycket. Kanske borde jag utgå mer ifrån den bilden i mina övriga färger? Jag går tillbaka till min grafiska profil och gör några ändringar:

Screen Shot 2018-01-23 at 11.56.55.png

Jag byter ut en bild och två färger. Färgschemat är snarlikt det förra, men nu stämmer färgerna mer exakt överens med mina slutgiltiga headerbilder. Dessa färger kommer jag kanske vilja använda i resten av min sajtdesign, så som i footern eller på knappar.

Navigation

Okej, jag är nöjd med mina headers. Härnäst tar jag itu med navigationsmenyn. I mitt template är den belägen högst upp på sidan men i andra templates kan den ligga under headerbilden eller i form av en ikon som man får klicka på för att få fram menyn. I många templates går det också att ändra plats eller utseende på navigationsmenyn.

Det första jag vill åtgärda här är storleken på min logga, som jag tycker är på tok för liten. Jag klickar på loggan och får då upp endast de inställningar som rör den:

Jag ändrar "Logo container width" och ser då att min logga tar mer plats i menyn. Perfekt!

Nästa sak jag vill ändra är färgen på menyn, svart är en för hård kontrast mot mina headerbilder. En vit meny med svart logga och knappar hade kunnat fungera bra. Men när jag klickar på hela navigationsmenyn i Style Editor så ser jag att jag kan göra menyn helt transparent mot bakgrunden. Jag testar det:

Och gillar det! Efter en snabb check av de andra sidorna ser jag att det fungerar bra med alla mina headerbilder, men då måste mina menyknappar bli mycket tydligare, så jag experimenterar med deras typsnitt tills jag tycker att de syns tillräckligt bra:

Footer

Nästa fasta avdelning på alla våra sidor är footern, även kallad "sidfot". Innan vi kan designa footern behöver vi fylla den med innehåll. Vad har man i en footer, undrar du? Tja, det varierar. Några av de vanligaste komponenterna är:

  • En extra navigationsmeny (som länkar till de viktigaste sidorna)

  • En logga

  • En kort presentationstext

  • Sociala medie-länkar

  • Copyright-text

På en ny Squarespacesajt ligger troligtvis redan ett "Social Links"-block och en text som säger "Powered by Squarespace" i footern. Dessa tar jag bort och lägger istället in min fyrkantiga logga och en egen Copyright-text:

Jag skapar också en egen extrameny som egentligen bara är en centrerad text länkad till mina olika sidor:

Nu vill jag styla min footer. Jag går till Style Editor igen och ser att det enda jag kan göra med min footer i det här templatet är byta färg på bakgrund och text i min footer resp. "pre-footer" (den plats ovanför footern där jag valde att lägga mina länkar.)

Footern vill jag behålla vit, för att min logga ska synas så bra som möjligt. Men pre-footern skulle jag kunna testa att färga lite:

Jag gör den grå, som den ljusaste färgen i mitt färgschema. Jag gillar att bryta av med åtminstone en liten färgändring i footern för att markera tydligt att sidan är slut.

Övrigt

Vad mer kan man tänkas vilja ändra i sin design? Kom ihåg att du alltid kan klicka på "Show all" i Style Editor-menyn för att se precis alla inställningar och gå igenom dem i tur och ordning. Men du kan bara styla det du ser på den sidan du är, så för att komma åt allting behöver du navigera runt på din sajts alla sidor och vyer.

Exempel på element som är bra att se över är:

  • Text och rubriker i olika storlekar

  • Länkar

  • Knappar

  • Formulär eller nyhetsbrevsboxar

  • Citat

  • Bildgallerier

  • Bloggstartsidan (som visar ditt bloggflöde) och blogginläggssidan (som visar ett enskilt blogginlägg)

  • Shopsidan och produktsidan (om du har såna)

Tips: Framhäv dina länkar med en färg från din grafiska profil som sticker ut från den övriga texten, så att läsaren inte missar dem. De kan gärna vara understrukna också, så blir de extra tydliga.

Här byter jag färg på mina knappar till en av färgerna i min grafiska profil:

Och klickar jag in på min blogg dyker det upp en mängd nya inställningar. Bland annat kan jag visa eller dölja sidebaren och styla Summary-block och Newsletter-block.

Slutligen bör du alltid ta en titt på mobilversionen av din sajt. Detta är enkelt i Squarespace, du klickar bara ner den (förvisso knappt synliga) menyn i toppen av sidan och klickar på symbolerna för surfplatta respektive mobil...

Och vips så ser du din sajt precis så som den ser ut på en mobilskärm:

Här kan du i många templates hitta ytterligare inställningar specifika för mobilversionen, t.ex. hur menyn ska se ut.

Tanken från Squarespaces håll är att du inte tänka för mycket på hur din sajt ser ut i andra skärmstorlekar, allting skalas om automatiskt. Men det är alltid bra att kasta ett öga på det, så att inget ser knasigt ut eller fungerar dåligt.

Tips: Se upp för för mycket scrollande på din mobilsajt. Märker du att du får svepa och svepa och svepa för att ta dig runt så har du troligtvis för långa sidor och/eller texter. Fundera på att korta ner och dela upp för att göra navigationen snabbare för dina besökare.

Hur gör man om man upptäcker något på sina sajt som man hemskt gärna vill ändra men som den inte finns en inställning för? Det ska vi gå in på i nästa avsnitt.