Design i Squarespace

Mallverktyg för hemsidor, som Squarespace är, rynkar människor ibland näsan åt. Vi förstår inte varför. Så länge du inte behöver avancerade funktioner på din hemsida är ett mallverktyg det bästa du kan använda, även designmässigt (enligt vår oerhört subjektiva åsikt). Låt oss förklara vilka fördelar det ger designmässigt och hur du kan designa din hemsida till att bli precis det du vill, trots att det är ett mallverktyg.

Observera att denna text tar upp hur Squarespace fungerar utan att du designar sidan med hjälp av css-kod. Använder du kod för att ändra designen kan du självklart göra allt möjligt, då finns inga begränsningar.

Designfördelar i Squarespace

Squarespace delar in sidor i sektioner och på varje sektion lägger du till de block du vill ha. Genom drag-and-drop placerar du blocken där du vill ha dem och kan i och med det till exempel lägga bilder bredvid, över, under eller i textblock. Du får en dynamisk sajt där varje sida kan utformas efter innehållet och målet med just den sidan. Läs om hur du bygger en sida med sektioner och block.

Squarespace innehåller dock vissa begränsningar kring vad man kan göra, inom ramen för mallarna i alla fall, lägger du till css-kod kan du som sagt göra vad du vill. Begränsningar gör att du får en enhetlig hemsida som visar en konsekvens genom hela sajten. Exempelvis har huvudrubriker alltid samma utseende, även om du kan ändra en individuell huvudrubrik.

Designmöjligheter för din hemsida i Squarespace

Vad finns det då för möjligheter i designen av din hemsida som du byggt i Squarespace? Hur långt är ett snöre? Det mesta går att göra, du kan bland annat:

  • ändra bakgrundsfärg

  • välja bland en mängd typsnitt för både rubriker och paragrafer/brödtext

  • justera storlek och färg för rubriker och paragrafer

  • placera bilder där du vill

  • utforma knappar efter dina egna preferenser

  • justera mellanrum både vertikalt och horisontellt

  • utforma sidhuvudet med hjälp av några förutbestämda val

  • formatera formulär

Så frågan är vad du har för krav och önskningar för din hemsida. Fundera också på vad som är ett krav ur ditt perspektiv, vad som är önskningar och vad som inte spelar någon roll alls? Att ha funderat ut vad du själv vill med designen av din hemsida är första steget mot att ha en fin hemsida som du tycker om. Tar du hjälp att bygga hemsidan är det också en förutsättning för att leverantören ska ha en chans att utforma hemsidan som du ser den framför dig. 

 

Globala inställningar – Site Styles Squarespace

I de globala inställningarna, som kallas site styles i Squarespace, är inställningar för design och utseende som påverkar hela sajten. Dessa inställningar når du genom att klicka på penseln upp i högra hörnet när du är i redigeringsläge i Squarespace.

I menyn för sajtinställningar hittar du:

  • typsnitt

  • färger

  • animationer

  • bredd på hemsidan (spacing)

  • knappar

  • formulär

  • bildblock

Typsnitt för rubriker och paragrafer

Det grundläggande utbudet av rubriker i Squarespace innehåller fyra nivåer och storlekar. De har alla samma typsnitt, tjocklek, radhöjd och kerning, men du kan ändra storleken för de olika nivåerna. Varje individuell rubrik kan du sedan välja färg för och om du vill göra den fet, kursiv eller understruken. 

På samma sätt fungerar paragrafer eller brödtexten på sidan. Du kan välja ett annat typsnitt för paragraferna på hemsidan än vad rubrikerna har. Alla paragrafer får dock samma typsnitt men du kan välja olika storlek och färg på de olika nivåerna av paragrafer. 

Färgval

Du kan välja vilka färger som helst för din sida, och du gör det genom att lägga in färgkoden i HSL eller HEX, vilket är två olika sätt att definiera färger. HSL står för nyans, mättnad och ljushet och HEX är webbsättet att definiera färger.

Färgpalett

För att du ska slippa lägga in samma färgkod hela tiden har Squarespace skapat en palett som innehåller fem färger, vanligtvis är vitt och svart två av dessa färger och tre av dem är dina grundfärger för sajten. Färgpaletten gör det enkelt att få samma färg överallt, oavsett om det handlar om en bakgrundsfärg eller om det är textfärgen på en rubrik. 

Färgtema

Genom färgpaletten skapas tio olika färgteman som appliceras på sektionerna på sidorna. Varje färgtema konfigureras med olika färger för respektive del, till exempel färg på bakgrund, rubriker, paragrafer och knappar.

Bildhantering i Squarespace

Bilder adderas till sidorna genom att du lägger till ett bildblock. Bilden som bildblocket ska innehålla kan du ladda upp från datorn, välja från bildbiblioteket där bilder du tidigare laddat upp sparas eller hitta i bildbanken Unsplash som Squarespace har ett samarbete med. Unsplash har många bra bilder som du gratis får använda på din hemsida. Det finns dock även bilder som du måste betala för att få använda, så se till att du väljer rätt. Har du installerat Squarespace app kan du även ladda upp bilder direkt från telefonen genom appen.

 

Genom att klicka på “Add an image” eller plustecknet kan man lägga till en bild.

 

Bildbiblioteket i Squarespace

Bilderna som du använder på din hemsida sparas i ett bildbibliotek. Det skiljer sig dock lite från andra bildbibliotek, till exempel det som finns i Wordpress. I Squarespace bildbibliotek finns bara bilder som är aktiva på sidan, inte sådana som har raderats från hemsidan. Det betyder att du behöver spara bilderna på något annat ställe. 

Design med drag and drop

Varje sida utformas på det sätt som du vill genom att du lägger till block för det innehåll du vill ha på sidan i fråga. Genom drag and drop kan du placera blocken där du vill ha dem. Squarespace version 7.1 har stor flexibilitet i utformningen och du kan även lägga block ovanpå varandra.

Vill du ha hjälp av någon som är van vid att bygga hemsidor i Squarespace? Då finns vi här, antingen för att bygga hela sajten eller bara hjälpa dig över ett hinder som stoppar dig på vägen.


Föregående
Föregående

Brath, Defiso och Brandson. Uppköp bland SEO-byråer

Nästa
Nästa

FAQ och Featured snippet i Googles sökresultat