Stora Squarespace-skolan, del 4 - Så designar du din blogg i Squarespace

Så här såg min exempelblogg ut när vi lämnade den. Jag har lagt mina sidor till rätta men har inte rört något i designväg förutom att lägga in en headerbild för bloggen.

Inte så pjåkigt faktiskt. Bra bilder gör mycket. Och det allra mesta blir snyggt per automatik i Squarespace tack vare väldesignade mallar. Men jag vill ha lite mer personlig prägel på min tänkta vegoblogg. 

Så låt oss kavla upp ärmarna och börja knåda denna deg till ett mästerverk… Ish.

Först, några snabba ord om templates:

Du är inte låst till ett template när du valt det. Från menyn “Design”, under “Template”, kan du närsomhelst byta till ett annat template. Och vet du vad? Alla de ändringar du gjort i den nuvarande mallen kommer ligga kvar om du senare byter tillbaka till det. Så experimentera så mycket du vill!

“Kommer snart”-sidan

First order of business: Slänga upp en tjusig “Kommer snart”-sida för bloggen, så att vi kan jobba med den i lugn och ro, utan nyfikna och dömande blickar. (Är det bara jag som blir sjukt stressad av att redigera en blogg som ligger live?)

En svinfin sak med Squarespace är det som heter Cover Pages. De är enkla sidor vars syfte är att agera landningsplats för besökare och antingen visa lite information eller få dem att göra någonting, som t.ex. att lämna sin emailadress eller förhandsboka något.
 
De fungerar också utmärkt som tillfälliga startsidor medan man bygger sajten eller experimenterar med en ny design. 

Så vi klickar in på “Pages”, skapar en ny sida och väljer “Cover Page” som sidtyp:

Här finns flera layoutmallar att välja mellan. Jag väljer en jag gillar, ändrar i defaulttexten under Branding & Text, laddar upp en snygg bild under Media, och fixar så att besökaren kan lämna sin emailadress under Action.

Sen väljer jag färger, typsnitt och typsnittstorlekar under Style. Stilen på min Kommer snart-sida bör såklart matcha stilen bloggen kommer ha när den väl släpps, så här passar det utmärkt att experimentera fram en look som känns rätt. 

Tadaaa:

Tänk på att markera din Cover Page som homepage på dess Settings, och lägga den under Not Linked, annars hamnar den i huvudmenyn och där vill vi inte ha den. 


Logga och favicon

Att göra en logga för sin blogg känns kanske lite overkill. Och egentligen är det väl inte särskilt nödvändigt. Men en logga behöver varken vara fancy eller kräva avancerade designkunskaper. 

Alla loggor jag gjort till mina bloggar har varit superbasic: bara en eller två bokstäver från bloggnamnet mot en snygg bakgrund. Som här t.ex, för Lugnochfin:

 
 

Och även om jag inte använder min logga på bloggen så är den bra att ha för diverse andra ändamål, och jag har använt den för att skapa en favicon, du vet den där symbolen som syns bredvid sidtiteln uppe i browserfönstret? En favicon är en detalj som får bloggen att kännas proffsigare och personligare.

Att göra en enkel logga och favicon behöver inte ta lång tid, men det blir lite överkurs att gå in på det här, så jag sparar det för ett kommande inlägg istället. =)


Style Editor

Nu tycker jag vi går igenom själva Style Editorn. Det är här du gör alla stilrelaterade inställningar för din blogg, så som typsnitt, textstorlek och färger. 

Skillnaden här från t.ex. Wordpress är att när du tidigare varit begränsad till endast de saker som theme-skaparna tyckt att du ska få ändra, eller behövt sitta och gräva i stilmallarna och fulhacka CSS för att få din vilja igenom, så låter Squarespace dig ändra på precis allt du ser. 

Detta kräver därför att du faktiskt har något att titta på. Du bör skapa dina sidor och åtminstone ett exempelblogginlägg med några vanliga block i så att du har dessa som referens när du stylar bloggen. Vissa stilinställningar blir inte ens synliga om du inte har det elementet någonstans på din sajt, så som ett formulär eller en knapp.

De inställningar du ser i listan under Style Editor varierar också lite beroende på vilket template du använder. I det här exemplet använder jag Bedford. Det är ett bra bloggtemplate som ger stor kreativ frihet. 

Även Five är jätteflexibelt. Där kan jag reglera bredd på sidebar och inlägg, höjd på header, höjd på navigationsmeny, mellanrum mellan header och inlägg m.m. bara genom att dra i de olika elementen på sidan. Oh, the joy. <3

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. Det är tack vare detta som det går såååå mycket snabbare att designa en blogg i Squarespace jämfört med Wordpress. Du behöver inte gissa dig fram, utan kommer snabbt åt rätt reglage och ser direkt hur designen blir. 

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.

Så låt oss säga att jag vill se allt som går att göra med min header. Jag hovrar över headern tills en blå ram syns runt den, klickar, och vips så ser jag bara de headerspecifika inställnignarna i menyn:

Jag vill ha en transparent overlay över min headerbild, så jag leker runt med färgpaletten tills jag får till en nyans som ser snygg ut. Jag gillar kallare temperatur i mina bilder så jag väljer en ljusblå overlay. 

Utöver headerbilder så är ju bloggrubriken det som, iallafall i min mening, sätter störst prägel på bloggen. Den måste kännas rätt. Så jag väljer ut ett typsnitt jag gillar...

Typsnitt och färger

Typsnitten i Squarespace kommer från Google Fonts och Adobe Typekit, så det finns många att välja bland. När jag designat min bloggrubrik går jag vidare och väljer typsnitt för resten av sidtexten. Här bör det inte vara något spexigt utan något enkelt som är lätt att läsa.

Jag brukar välja ut tre typsnitt för min blogg: ett häftigare och mer karakteristiskt för bloggrubriken, ett lite mer nedtonat för mindre rubriker och sidebar-rubriker, och ett väldigt simpelt och cleant för själva brödtexten. 

Typsnitten ska komplettera varandra bra och inte se för lika ut. Om jag t.ex. har ett bloggrubrikstypsnitt som är fett och i versaler, som i det här fallet, så vill jag att övrig text ska kontrastera det lite. Så jag väljer ett smalare typsnitt för inläggsrubriker och brödtext. 

Ett annat trick är att om de stora rubrikerna är i ett serif-typsnitt så blir det snyggt om brödtexten är sans-serif. (Text är överlag lättare att läsa på skärmar om den är i sans-serif. Gammalt webbdesignordspråk.) 

Med färger så gäller lite samma tänk. Kontraster och inte för mycket stök. Jag ska inte gå in på djupet i grafisk design nu, men en bra startpunkt är att välja ut tre grundfärger till din blogg. En mörkare, en mittemellan och en ljus. Tre färger som leker bra ihop, och som matchar ditt bildspråk och din personlighet.

Se även till att framhäva dina länkar med en klar färg, så att läsaren inte missar dem. 

Här ser du min exempelblogg och de färgerna jag valt. Notera att de matchar min valda headerbild. Det är ett bra sätt att hitta sina färger tycker jag. Välja en bild som får sätta tonen och plocka ut tre färger ur den att använda på sidan. Då får man ett enhetligt utseende. 

Överkurs: När du vill pilla lite extra

Vissa saker kommer man inte åt direkt med Squarespaces designeditor. Det hade blivit för plottrigt med tusentals reglage för varenda tänkbar detalj. 

Lyckligtvis går det smidigt att lägga in egen CSS-kod i Squarespace för att rätta till dessa saker. Så om du är lite haj på CSS så kommer du kunna ta kommandot över din blogg ännu mer. 

Låt oss för exemplets skull säga att jag är missnöjd med hur tätt raderna ligger i mina punktlistor. Det finns ingen inställning för detta i Style Editor, men jag låter inte det stoppa mig. 

Jag går in på min blogg, (detta kräver att bloggen ligger live), och klickar upp kodinspektören. “Developer Tools” heter det i Chrome. (Osäker på vad det heter på svenska.) Det finns liknande verktyg för de flesta webbläsare och de brukar fungera på samma sätt.  

Klickar på den lilla knappen högst upp till vänster i kodinspektören, så att jag kan hovra över de olika elementen på sidan. Letar upp en punktlista i min blogg och inspekterar CSS:en för det elementet. I det här fallet är det "line-height" jag vill ändra. Kopierar in hela kodsnutten i Custom CSS-rutan i Squarespace och gör min ändring. Sen är det klart!

(Vore en CSS-tutorial att önska förresten? Säg till i så fall!)

Och mycket mer än så här tror jag inte finns att säga om designprocessen i Squarespace! Den är så pass användarvänlig att man lär sig medan man håller på. Tänk om bloggdesign alltid varit så här enkel? Vad många fler blogginlägg man kunnat skriva... ;)

I nästa och sista delen av Squarespace-skolan ska jag prata om de bloggspecifika aspekterna av Squarespace. Hur det funkar med schemaläggning och publicering av inlägg, kategorier och taggar, arkiv, sociala medie-publicering, et.c.

Håll utkik efter det nästa vecka! 


Frågor om designeditorn? önskemål på frågor jag kan besvara i kommande inlägg? Kommentarsfältet är ditt! ☟