Squarespace-skolan del 2: Skapa sidor & hantera bilder

Squarespace-skolan Skapa sidor och hantera bilder i Squarespace

I förra delen av Squarespace-skolan visade jag hur du kommer igång med Squarespace och importerar en befintlig sajt dit. Nu är det dags att kika på hur man organiserar sin Squarespacehemsida och bygger sidor. Jag visar också hur du hanterar bilder och skapar bildheaders på din hemsida.

Vi ska börja med att rensa upp bland sidorna på vår nya sajt och skapa vår navigationsmeny.

Ta bort exempelinnehåll

Först och främst så ska ju exempelinnehållet bort, så att det bara är våra egna sidor som syns på sajten. Du kan dock välja att behålla några av sidorna under "Not Linked" och avpublicera dem, så att du kan kika på dem för inspiration. 

Du tar bort sidor genom att klicka på soptunneikonen intill dem. (Ikonen dyker upp när du hovrar på sidan i menyn.) Då hamnar de under "Deleted pages", där du kan titta på eller återställa dem senare om du skulle vilja.

Ser du den lilla hussymbolen på en av exempelsidorna? Det betyder att den sidan är satt som startsida för sajten. Alltså är det på den sidan en besökare först hamnar efter att de skrivit in domännamnet i webbläsaren.

Innan du kan radera sajtens "Home"-sida behöver du skapa eller välja en av dina egna sidor som startsida...

Sätt en startsida för din sajt

Med Squarespace är du fri att ha vilken sida du vill som startsida. Om din hemsida primärt är en blogg så kanske du väljer att sätta din bloggsida som startsida, men många väljer istället en så kallad "Index"-sida - en lång, scrollbar sida med olika sektioner vars syfte är att snabbt ge en tydlig bild av vem du är och vad du gör.

Alla Squarespace-templates har inte stöd för Index-sidor och dessa sidor ser ut och fungerar även annorlunda i olika templates. Här kan du se vilka som har Index-sidestöd och även hur dessa fungerar.

Tillsvidare skapar jag bara en ny, enkel sida genom att klicka på +-symbolen intill Main Navigation och klicka på "Page":

Squarespace skapa ny sida

Du döper din sida och kan, om du vill, välja en mall att utgå ifrån när du designar din sida. Sen klickar du på "Start Editing". Här kan du skriva in text om du vill, men jag kommer klicka på "Save" direkt och redigera sidan senare. Vi gör detta bara för att kunna sätta en egen sida som startsida.

Du väljer din startsida genom att gå in på Settings (kugghjulssymbolen som dyker upp vid hover) för sidan och klicka på knappen "Set as homepage".

När det är gjort kan du radera alla exempelsidor! Du kan då också dra och släppa dina importerade sidor in under "Main Navigation". Det är de sidor som ligger här, deras namn och den ordning de ligger i, som utgör din navigationsmeny. 

Gör sidinställningar

Vi går tillbaka till Settings-sidan. En sidas Settings är där du gör inställningar som ska gälla för just den sidan. Vilka titlar sidan ska ha i menyn respektive i webbläsarfönstret, url för sidan, headerbilder, et.c. I vissa templates finns layoutinställningar för sidor, och i inställningarna för en bloggsida finns det ytterligare några val, så som kategorier och tags och hur många inlägg som ska visas per sida.

Jag ska leda dig igenom Settings för en sida och förklara vad allt är:

Squarespace sidinställningar

Navigation title

Detta är vad sidans knapp heter i navigationsmenyn.

Page title

Detta är namnet på sidan som kommer visas i webbläsarfönstret och i sökmotorer bland annat. Det är vanligt att man vill ha olika namn på en sida inom sajten och utåt. T.ex. så vill jag inte att min startsida ska heta "Start" utan namnet på sajten - "Frida Larsson Fotograf" - om man hittar den på Google. Men jag vill inte att menyknappen för startsidan ska heta så. Den är det vanligt att man döper till "Start" eller "Hem".

Enabled

Om den här är ikryssad så betyder det att sidan är publicerad och "live" på sajten. Är den inte ikryssad så är sidan ett dolt utkast och är gråmarkerad i menyn.

Description

Här kan du skriva en kort text som sammanfattar innehållet på sidan. Det är denna text som visas som utdrag i sökmotorer så det är alltid bra att skriva någonting här. I vissa templates är det även den här texten som används för att skapa rubriker, undertexter och knappar i headern för sidan.

URL slug

Det här är vad länken till sidan är. Det skapas automatiskt en URL när du döper din sida, men du kan alltid ändra i URL:en själv och det är bra att gå igenom alla dina sidor senare och se till så att de har korta och beskrivande URL:er.

Password

Du kan lösenordsskydda sidor i Squarespace. Då skriver du in ett lösenord i den här rutan och ger det till de besökare du vill ska kunna komma in på sidan. När en besökare landar på en lösenordsskyddad sida kommer det visas en "Locked Screen" där de får ange lösenordet.

Som du kanske sett så finns det andra flikar på Settings: "Media" och "Advanced". På "Media" kan du ladda upp en bild eller en video som ska användas som bakgrundsbild, headerbild eller miniatyrbild för sidan. Och "Advanced" behöver vi vanligtvis inte bry oss om. Där går det att lägga in egen kod för just den här sidan och få ännu mer kontroll över sin sajts utseende.

Skapa sidor

Nu sätter vi igång och skapar lite sidor så att du får se några av de många "blocks" (byggstenar) du kan bygga dina sidor och blogginlägg med.

Squarespace block

Ett "block" är helt enkelt en sidkomponent, och inbyggt i Squarespace finns alla möjliga tänkbara sådana som täcker de flesta behov. Det finns enkla block i form av t.ex. en text eller en bild, och det finns mer avancerade block som t.ex. sociala medie-flöden eller följ-knappar, inbäddade videos, formulär och bildgallerier.

Om vi klickar in på en tom sida och hovrar över sidan i skärmen till höger så dyker en knapp upp som heter "Edit". Klickar vi på den kommer till redigeringsläget för sidan:

Squarespace skriva bygga sidor

Som du ser så står det "Write here". Det är för att ett textblock är automatiskt tillagt på sidan. Hovrar du över fältet så ser du att det står "Text" och du ser konturerna av blocket. Du kan också klicka på soptunneikonen för att ta bort blocket.

Ser du de gråa "ballongerna" som dyker upp när du hovrar ovanför eller under textblocket? De är snabbknappar för att lägga in nya block. Då ser du alla byggstenar du har att röra dig med när du skapar sidor och blogginlägg. Det är allt ifrån vanliga text-block, bilder och videos, till olika slags bildgallerier, formulär, knappar och sociala medie-widgets.

Här är en bra lista över alla block som finns i Squarespace, och hur du använder dem: https://support.squarespace.com/hc/en-us/articles/...

Du kan även använda knappen uppe i högra hörnet som heter "Add block" för att lägga in block.

När du väljer ett block från listan så får du upp en liten ruta där du kan göra inställningar för blocket, t.ex. vad det ska visa och hur den ska visa det. Om jag väljer "Image" för att lägga in en bild så ser det ut såhär:

Squarespace lägga in bild

Det skapas en "placeholder" för blocket, (en exempelversion av det), som jag kan modifiera. För en bild kan jag t.ex. ladda upp bilden jag vill ha, skriva ett filnamn, bestämma hur bilden ska se ut på sidan, skriva en bildtext och om jag vill: lägga in en länk för bilden som man ska komma till om man klickar på bilden.

När du gjort dina inställningar och klickat på "Apply" i rutan så kommer blocket ligga på sidan och du dra och släppa det var du vill: under, ovanför eller bredvid andra block. Du styr blocket rätt genom att titta på de linjer som kommer upp på sidan.

På samma sätt fungerar det med andra block. Du kan arrangera texter, bilder, knappar och andra komponenter precis som du vill ha dem och Squarespace anpassar storlek och lägger dem automatiskt i räta linjer. =)

När du har redigerat klart din sida, glöm inte att klicka på "Save"knappen uppe till vänster. Du blir i regel påmind om detta om du försöker lämna en sida som är i redigeringsläge men det är alltid bäst att spara ofta om du jobbar länge med en sida, så att du inte tappar några ändringar.

Hantera bilder

Är det ett moment som blir särskilt enkelt i Squarespace så är det bildhantering! Du behöver nämligen inte göra något med dina bilder innan du laddar upp dem på sajten. Det mesta du kan tänkas vilja göra, så som att byta filnamn, beskära, ändra storlek eller öka kontrast, kan du göra direkt i Squarespace.

När du lägger ett bildblock på en sida får du upp en ruta med inställningar. Här kan du dels ändra filnamnet på bilden här utan att behöva göra det på själva bildfilen innan du laddar upp den. Så om din bildfil heter nåt i stil med "IMG0884.jpg" så är det en bra idé att ändra på det.

Behöver du beskära bilden eller ändra dess kontrast eller ljusstyrka? Då kan du klicka på knappen "Edit" under miniatyrbilden i inställningsrutan så kommer du till ett enkelt bildredigeringsverktyg:

Squarespace redigera bild

I många fall behöver du inte ens gå in i redigeringsläget. Du kan krympa ner bilden och "beskära"  den direkt på sidan...

Jag laddar upp en bild på en sida men den är för hög. Jag vill krympa hur mycket av bilden som visas, och då kan jag helt enkelt klicka bilden och dra i reglaget (den lilla bollen) som visas i bildens nederkant:

Squarespace beskära arrangera bild

Då krymper jag bildytan utan att skära i själva bilden.

Jag vill också att det bara är den övre halvan av bilden som ska visas. Då flyttar jag den lilla "bollen" ovanpå miniatyrbilden i inställningsrutan: "Image focal point". Och vips så ligger bildens övre halva i fokus!

Skapa bildheaders

Hur är det med bilder i headers då? Med headern syftar jag alltså på hela den övre delen av din sajt, den del som en besökare ser först utan att behöva scrolla.

Låt säga att jag vill ha en bild som headerbakgrund på en av mina sidor. Jag går då till den sidans "Settings", klickar in på "Media"-tabben och laddar upp min bild där:

Squarespace headerbilder

Notera att du behöver klicka på "Save" längst ner i rutan för att se hur headerbilden blir:

Squarespace headerbilder

Sådär!

I min Squarespace-kurs visar jag i detalj hur jag skapar en mängd olika sidor, däribland en scrollande Index-sida och en blogg. Jag går också in mer på bildhantering och hur du får till dina headers med bilder och text. Så om du vill ha mer djupgående hjälp att bygga din egen hemsida rekommenderar jag dig att kika på kursen. =)

Nästa del i Squarespace-skolan ska vi ägna åt att gå igenom "Style Editor", sidan där du gör alla designinställningar för din sajt.


Bygg din egen hemsida med min webbkurs!

Webbkurs Squarespace mockup.png

Behöver du en ny hemsida men vill undvika att anlita en webbdesigner? 

Gör det själv, med min nya webbkurs: "Bygg din egen hemsida". I den lär du dig allt du behöver veta för att designa, bygga och lansera en komplett hemsida med blogg och webbutik, på plattformen Squarespace. Inga teknik- eller designkunskaper krävs!