Så hanterar du bilder i Squarespace

Bilder är en jätteviktig del av din hemsidas innehåll och design. I det här inlägget visar jag hur du lägger in och anpassar bilder på din Squacespace- sajs. Vi ska även kika på det här med headerbilder och hur de funkar.

Ladda upp och anpassa bilder

Vilka slags bilder kan man lägga upp och hur kan man få dem att se ut? Måste man redigera dem i ett annat program först för att ändra storlek och så vidare?

Ä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. Vi kikar på hur det går till. Jag laddar upp en exempelbild på en sida:

Till att börja med så kan jag ändra filnamnet på bilden här utan att behöva göra det på själva bildfilen innan jag laddar upp den. I det här fallet låter jag det vara för filnamnet är redan beskrivande men om det hade stått nåt i stil med "IMG0884.jpg" där så hade det varit bra att ändra på det.

Om jag klickar på knappen "Edit" under miniatyrbilden i inställningsrutan så kommer jag till ett enkelt bildredigeringsverktyg:

Här kan jag bland annat beskära min bild, förminska den (vilket kan vara bra om bilden är jättestor, för att få sidan att ladda snabbare), ändra kontrast och ljusstyrka, et.c.

När jag sparat och tittar på min bild så kanske jag vill lägga in en bildtext:

Jag skriver då direkt under bilden, och det är även denna text som används som "alt-text". Alltså den text som berättar för sökmotorer vad bilden föreställer. Det är alltid bra att lägga in beskrivande bildtexter på alla bilder men du kan välja att dölja dem för besökaren genom att välja "Do not display caption":

Vidare så kan jag i inställningarna för bilden välja mellan olika sätt att visa den på sidan. Här har jag valt inställningen "Collage":

Jag laddar upp en till bild på sidan och den här känner jag ä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:

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

Men 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:

Och vips så ligger bildens övre halva i fokus! Jag klickar på "Apply" för att spara mina inställningar.

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 bakgrund till min header, på den här sidan. Jag går då till sidans "Settings", klickar in på "Media"-tabben och laddar upp min bild där:

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

Aha! Här kan vi se att texten som jag lagt in som "Description" i sidans Settings visas såhär ovanpå bilden. Senare kommer jag visa hur jag anpassar hur text ovanpå en header ser ut, men nu fokuserar vi på själva bilden. Jag vill kanske ändra vilken del av bilden som visas i headern. Då fungerar det på samma sätt som vi såg förut. Jag går tillbaka till inställningarna och flyttar den lilla bollen över miniatyrbilden:

Du kan såklart anpassa utseendet på dina headerbilder mycket mer än så här under designinställningarna. T.ex. så kan du reglera hur stor headerytan ska vara och kunna lägga en genomskinlig färghinna över alla dina headerbilder för att ge dem ett mer enhetligt utseende.