Stora Squarespace-skolan, del 3 - Så skapar du sidor och blogginlägg i Squarespace

I förra veckans avsnitt av Squarespace-skolan visade jag hur du kommer igång med Squarespace och importerar din befintliga blogg dit.

Nu är det dags att kika på hur du hanterar sidor och blogginlägg i Squarespace. Det skiljer sig nämligen en hel del från vad man är van vid från t.ex. Wordpress. På så sätt att det är sjuuukt mycket smidigare. 

Kommer du ihåg var vi slutade i förra inlägget? Jag hade precis importerat gamla lugnochfin så att de sidorna och inläggen låg opublicerade, parallellt med exempelinnehållet som följde med mallen. 

Nästa steg: Rensa upp i denna röra och strukturera upp sidorna och menyerna som vi vill ha dem!


sidor och menyer i Squarespace

Är man van vid Wordpress eller Blogger så kan Squarespace-sättet att hantera sidor och blogginlägg kännas ovant till en början.

Den största skillnaden är att du hela tiden ser hur din sajt ser ut till höger, samtidigt som du har menyer och inställningar till vänster. Och när du redigerar sidor eller blogginlägg så gör du det direkt i “preview”-läget kan man säga.

Som du ser på bilden ovan så har vi en överblick över allt innehåll på sajten. Sidstrukturen kan delas in i tre kategorier: 

Main navigation - Här ligger alla sidor som är live på sajten och synliga i navigationsmenyn.

Secondary navigation - Här ligger sidor som är live men som du inte vill ha i din huvudmeny. Beroende på mall så kan dessa sidor ligga i footern och innehålla t.ex. Kontakt, Reklampolicy och den sortens saker. Läs mer om secondary navigation här.

Not linked - Här kan du lägga sidor som är live men som du inte vill ska ligga i någon meny. Det kan t.ex. vara sidor du jobbar på som inte är färdiga, eller tillfälliga sidor du vill ha kvar men inte använda just nu. Du kan fortfarande länka till dessa sidor, men läsaren kommer bara åt dem genom den länken.  

Som du ser på bilden så ligger mina importerade sidor under Not Linked. De är gråmarkerade, vilket betyder att de inte är “live” utan ligger som utkast.

I Squarespace symboliseras en blogg av en “a”-symbol följt av namnet på bloggen. Så för att hantera en blogg klickar du in på den här sidan. Då hamnar du i bloggläget, där du ser alla dina inlägg, skriver nya inlägg, hanterar kategorier, m.m.

Eftersom att bloggen ligger som en fristående sida kan man dels dra och släppa bloggen var man vill ha den i navigationen, OCH man kan ha flera bloggar på samma hemsida! Superbra t.ex. om man bloggar både på svenska och på engelska och vill skilja flödena åt för att underlätta för läsare. Eller om man har en privat och en mer affärsmässig blogg och vill ha dem under samma domän men åtskilda. 

Vi ska gå in på mer om bloggande och sånt som är specifikt för det i ett senare avsnitt, men hur du skapar själva blogginläggen är nästan identiskt med hur du skapar sidor. 


Hantera sidor i Squarespace

På typisk matlagningsprogram-manér har jag förberett lite saker i smyg...

Jag har tagit bort alla importerade inlägg som inte är matrelaterade. (Jag ska bli matbloggare, remember? =D)

Och jag har lagt in “thumbnail images” på mina blogginlägg. Även kallade "featured images" eller "cover images".

Liten avstickare på tal om thumbnail images:

Som du kanske lade märke till i mitt förra inlägg så syntes inga miniatyrbilder i mitt bloggflöde som i exempelbloggen. Det är helt och hållet mitt eget fel. *tittar skamset ner i golvet*

När jag bloggade på Wordpress fick jag inte dessa thumbnail images att se snygga ut med mitt tema, så jag skippade dem och lade istället upp mina bilder högst upp i varje inlägg. 

Detta funkar bra om man visar sitt bloggflöde med hela inlägg. Men om man, som i mitt fall här, vill byta till ett miniatyrbaserat bloggflöde så får man problem. Varken Wordpress eller Squarespace vet vilka bilder de ska använda som miniatyrer om man inte angivit thumbnail images i sina inlägg. (Ouch.)

En annan nackdel är att man lämnar det lite åt slumpen vilken bild olika feed readers och sociala medier hämtar in som miniatyr. Ibland är det den första bilden i inlägget, ibland något helt annat. Har man angett thumbnail image så kan man oftast vara säker på att det är denna bild som visas. 

Alltså: vill du använda en miniatyrbaserad blogglayout, se till att dina inlägg har thumbnail images. Annars har du lite extrajobb att göra när du importerat bloggen. =)

Det jag vill göra nu är att:

  • Dra och släppa mina importerade sidor dit jag vill ha dem i menyn. 
  • Radera alla exempelsidor. 
  • Kontrollera settings på alla sidor så att de heter rätt sak, är publicerade, har rätt headers, m.m. 

Pssst, klicka på bilden för att se den i större format.

Sådärja! Här har jag gjort flera saker:

  • Dragit mina importerade sidor till sina platser i “Main Navigation”.
  • Klickat in på min blogg och i "Settings" markerat den som homepage. Alltså att det är där besökaren ska landa när hen skriver in “www.louisesvegoblogg.se”, (som vi låtsas att jag tänker döpa min hypotetiska sajt till.)
  • Raderat alla exempelsidor.
  • Klickat in på "Settings" för alla mina sidor och markerat dem som “Enabled”. Alltså, publicerat dem så att de är live. 

Jag har också gjort en del ändringar i "Settings" för mina sidor. Vi tittar närmare…

Här har jag:

  • Bytt namn på "Navigation title" till det som jag vill ska stå i menyn.
  • Bytt namn på "Page title" till det jag vill ska stå i headern/browserfönstret när man är inne på bloggen. 
  • Skrivit in en liten "Description" som jag sen kan välja att visa i headern. 
  • Ändrat i "URL Slug" från “blog” till “bloggen”. Detta blir det som står mellan mitt domän och t.ex inläggstitel i länken. I mitt fall blir det www.louisesvegoblogg.se/bloggen/vegansk-tofu-scramble.

Nu ska vi prata om det här med headers och headerbilder.


Headers i Squarespace

Många Squarespace-templates tillåter headerbilder, men inte alla. Tudor t.ex, som jag använt i exemplet hittills, använder inte headerbilder, så jag har bytt till ett annat template (Bedford) för att demonstrera hur detta funkar:

För att skapa headerbilder för dina sidor så går du in på "Settings" för sidan och klickar på "Media"-fliken. 

Här laddar du helt enkelt upp en bild att använda som banner. Du ser den lilla bollen i mitten av den uppladdade bilden? Den kan du dra dit du vill att mittpunkten för headern ska ligga. Så utomordentligt fiffigt. 

Du kan välja att ha samma header för alla dina sidor på sajten, eller om ditt template tillåter så kan du ha olika headers för varje sida. (Här ser du vilka headermöjligheter olika templates har.) 

Testa t.ex. att klicka på de olika kategorierna i lugnochfins meny så ser du att jag lagt in olika headerbilder för dem.

Du kan också ha skräddarsydda rubriker och beskrivningar ovanpå dina olika headerbilder. Så har jag på en del av mina sidor på ohsosensitive.com.)

Innan vi går vidare, låt mig kort berätta om…


Bildhantering i Squarespace

I Squarespace finns inget mediabibliotek som i Wordpress, utan alla bilder man vill använda laddar man upp på respektive plats.  

Detta har såklart för- och nackdelar. 

En nackdel: det går inte lika snabbt att återanvända redan uppladdade bilder.

Men om du har hyfsad ordning på ditt bildbibliotek på datorn så behöver det inte ta längre tid att lägga in bilder. Och du slipper gräva runt i mediabiblioteket efter bildlänkar när du vill placera ut bilder på andra ställen i layouten, t.ex. i din sidebar.

Nu tycker jag att det är dags att vi går in och pillar lite med en sida, så att du får se vilken avkopplande process det är...


Skapa sidor i Squarespace

Squarespace är en “WYSIWYG”-editor (“what you see is what you get”) med drag & drop-funktionalitet vilket innebär att, istället för som i Wordpress eller Blogger där man skriver sidan och previewar för att se hur den kommer se ut live, så redigerar man sidan direkt i preview-läget. 

Vi tar min “Kontakta mig”-sida som exempel.

Jag klickar in på sidan genom sidomenyn och när jag hovrar över sidan (som för närvarande är tom), så kan jag klicka på “Edit”. 

Då ser det ut så här:

Nu kan jag antingen börja skriva in text direkt, eller klicka på "bubblorna" som dyker upp i kanten för att lägga in ett “block”. 

Block i Squarespace kan vara allt från textavsnitt och bilder till kontaktformulär eller Instagram-flöden. Med alla de färdiga block som finns i Squarespace går det att göra det mesta. Men det går också utmärkt att lägga in kodblock och i dem klistra in html-kod eller javascript, precis som man blivit van vid att jobba i Wordpress. 

Här är en bra lista över alla block som finns i Squarespace, och hur du använder dem.

Ryktet går också att jag planerar att göra en karta över några av de vanligaste funktioner man vill använda sig av som bloggare, och vilka blocks man kan använda för dem. 
Som sagt, bara ett rykte. ;)

Jag vill lägga in ett kontaktformulär så jag väljer “Form”-blocket. 

Jag byter först namn på fälten så att de står på svenska. 

Sen klickar jag på “Storage” i menyn. Det är här jag väljer vad som ska hända med de formulär som skickas in. Jag vill bara få dem till min emailadress så jag låter det vara som det är.

Under "Advanced"-fliken kan jag ändra ytterligare text och bestämma vad som ska visas för användaren när formuläret är skickat. Ett "Tack" t.ex. känns väl lämpligt. 

Sen skriver jag in en rubrik ovanför formuläret med hjälp av ett Text-block.

Klickar på “Save” och tadaaa! Min superenkla Kontakta mig-sida är klar och det tog cirka femton sekunder. 

Men hmmm, jag kanske borde visa mitt fejs på sidan så att de som vill kontakta mig ser vem de pratar med…

Då använder jag "Image"-blocket.


Lägga in bilder i sidor och inlägg

Och nu ska jag visa vad det bästa med Squarespace är: nämligen hur smidigt det är att lägga in bilder på sidor och i blogginlägg. 

Jag har lagt in ett Image-block och laddat upp en bild på mig där jag ser alldeles särskilt kontaktbar ut.

Men äsch, den är så hög. Inte behöver det vara typ en meter vitt ovanför mitt huvud så att folk får scrolla för att se formuläret. Jag hade velat ha bilden mer kvadratisk. 

Måste jag beskära den då i Photoshop eller mecka i mediabiblioteket med nån kass bildeditor? Nähärå. Jag kan bara dra i reglagen runt bilden för att krympa den, och sen flytta bildens fokuspunkt. Like so:

Vips så är bilden beskuren precis som jag vill. Jag skojar inte: jag grät när jag upptäckte det här första gången. Jag är en sån som gråter av lycka när webbdesign är enkelt. 

Och vill jag lägga in flera bilder på sidan har jag nästintill oändliga möjligheter... 

På en annan sida vill jag visa upp några av mina matkreationer:

Antingen så laddar jag upp bilderna som block och kan sen dra och släppa dem bredvid varandra, och dra i deras kanter för att ändra storlek. Det kommer automatiskt se jämnt och snyggt ut. Även i mobila lägen, för Squarespace gör allting tjusigt responsivt. 

Eller så använder jag “Gallery”-blocket:

Även detta tar typ två minuter och blir väldigt snyggt för läsaren att navigera i. Jag kan dra och släppa galleriet var jag vill på sidan utan att behöva möblera om bland en massa bilder.

Phew, okej.

Då har vi gått igenom menyplacering, sidredigering, de vanligaste blocken, och hur man jobbar med bilder. 
Ska vi kika på det här med sidebars? För en sådan vill man ju ofta ha som bloggare. 


Sidebars i Squarespace

Alla templates har inte stöd för sidebar, men det är lätt att ta reda på vilka som har det. Läs här i wikin t.ex.

Tänk på att du kan behöva aktivera sidebaren för ditt template i designeditorn. Då går du bara in på “Design” från huvudmenyn, vidare in på “Style Editor” (Som jag kommer ha en grundlig genomgång av i nästa del av skolan.) Scrollar du ner en bit hittar du “Sidebar”, där du kan avmarkera “Hide Blog Sidebar”. 

Nu hittar du din sidebar när du är inne på Pages och hovrar över den tomma ytan till höger på dina sidor:

Om du skulle vilja dölja sidebaren på vissa sidor så kan du med vissa templates göra det på den sidans “Settings”:

En sidebar i Squarespace är egentligen bara som en vertikal sida där du placerar blocks precis som vi gjort på de andra sidorna. 
Du har alltså helt fria händer och kan fylla din sidebar med precis vad du vill.

Ett block jag använder flitigt i mina sidebars, (och i mina sidor och blogginlägg också för den delen), är “Line”-blocket:

Vill du bara ha lite extra space mellan blocken kan du istället använda “Spacer”-blocket och dra i den för att reglera höjd. Najs va?

Och du har såklart block för sök, arkiv, taggmoln, följknappar för sociala medier och det mesta annat du kan tänkas behöva. =)

Och där, kära du, tror jag vi får ge oss för den här gången.

Nästa punkt på agendan är att gå igenom designeditorn, där du stylar din blogg efter tycke och smak. Och jag kommer även lägga till ett extra avsnitt efter det som går igenom hur man bloggar med Squarespace.

Håll utkik i bloggen om en vecka efter nästa del i skolan. ;)


Och som vanligt: Fråga på i kommentarsfältet om det är nåt du undrar. ☟