Skapa resterande sidor

Min startsida är klar! (Om man bortser ifrån att den bara har placeholderbilder och "Lorem Ipsum"-text då...) Nu är det dags att skapa resterande sidor av sajten. De jag ska skapa är:

  • Om mig

  • Kontakt

  • Portfolio

  • Tjänster (där man även ska kunna boka en tjänst via ett formulär)

Som du kanske märker så är startsidan, med alla dess sektioner, som en slags snabbvariant av alla sidor på sajten. Så ser det ofta ut och det är en bra modell att använda. Du kan med fördel länka till de fristående sidorna från din startsida genom att lägga "Läs mer"-knappar i de olika sektionerna. När vi senare i kursen skapar en blogg och en shop så ska jag också visa hur du utökar startsidan med sektioner för dessa.

Men en sak i taget. Nu skapar jag resten av mina sidor och använder mig av Squarespaces mallar för att snabbt få upp lite innehåll. "Om mig" är inga konstigheter: en banner-bild, rubrik i Description-rutan och på själva sidan en text om fotografen och kanske en bild.

Detsamma med "Kontakt"-sidan, där jag väljer en av Squarespaces sidmallar och bara gör några små ändringar i kart-blocket och rubriken:

På Portfolio-sidan vill jag ha ett galleri med fotografier. Detta har Squarespace ett "block"/plugin för och det heter "Gallery".

När jag lägger in ett Gallery-block kan jag till att börja med ladda upp alla de bilder jag vill ska ligga i galleriet. I mitt exempel laddar jag inte upp något utan låter exempelbilderna ligga kvar.

Sen finns det en till flik på plugininställningarna som heter "Design", och det är här jag bestämmer hur mina bilder ska visas:

Det bästa att göra med såna här blockinställningar är att bara leka runt och experimentera tills du gillar vad du ser. Jag testar olika varianter av galleri men bestämmer mig till slut för att lägga det som en slideshow där besökaren kan klicka åt sidorna för se en bild i taget:

Screen Shot 2017-11-09 at 15.10.28.png

Jag lägger också in ett till galleri under det första som ser likadant ut, men där jag tänker att jag bara ska ladda upp porträttbilder senare.

Nu är det dags att skapa sidor för tjänsterna. Här har jag några olika valmöjligheter: Jag kan skapa en vanlig sida och presentera alla tjänsterna där. Det går att avgränsa med hjälp av "Line"-blocket, som lägger en horisontell linje på sidan, t.ex.

Eller så skulle jag kunna skapa en ny Index-sida och skapa sektioner för varje tjänst.

Ett tredje alternativ som jag tänkte visa är att skapa en Folder (mapp) i menyn och i den lägga sidor för de olika tjänsterna. Anledningen till detta är att jag då får en tjusig dropdown-meny i navigationen:

Screen Shot 2017-11-09 at 15.13.25.png

Jag börjar då med att klicka på +-symbolen i Main Navigation, men istället för att välja Page eller Index så väljer jag Folder:

En Folder liknar en Index-sida men till skillnad från ett Index så händer inget när jag klickar på Folderns namn i menyn. Istället vecklas menyn ner och jag kan klicka på någon av de sidor som Foldern innehåller. I det här templatet så skapas dessutom en liten sidomeny till vänster där besökaren ser namnet på Foldern och sidorna och kan växla mellan dem:

Här har jag då skapat två sidor i foldern som heter "Porträtt" och "Produkt". Dessa är de tjänster som vår låtsasfotograf erbjuder. Jag har använt en av Squarespaces färdiga sidmallar för att snabbt fylla sidorna med innehåll.

Det sista jag vill göra är att lägga in en bokningsfunktion på tjänstesidorna, där en besökare kan lämna intresseanmälan för tjänsten. Jag använder då blocket "Form:

Då skapas ett exempelformulär där jag kan översätta texterna i formuläret, lägga in egna formulärfält och bestämma vad som ska hända när en besökare skickar in formuläret. Jag börjar med att ge formuläret ett namn och översätta texterna för de olika fälten:

Sen vill jag lägga till ett fält där besökaren kan ange vilken tjänst de är intresserade av. Jag klickar på "Add form field":

Screen Shot 2017-11-09 at 15.20.08.png

Här har jag mycket att välja på! Jag skulle kunna välja "Radio"-knappar, där man bara kan bocka för ett val. Eller en "Checkbox", där man kan kryssa i flera val. Men jag väljer en "Select", som är som en rullande meny:

Sen skriver jag in vilka val som ska finnas. Notera att du kan ange vilka fält i formuläret som är "Required" - alltså att de måste fyllas i för att kunna skicka in formuläret.

Nästa flik i inställningarna heter "Storage", och det är här jag bestämmer vad som ska hända med formulären när de skickas in:

Här finns tre valmöjligheter. Det allra enklaste är att koppla formuläret till en e-postadress, vilket jag gjort här. Då kommer det komma ett mail till denna adress varje gång en besökare skickat in formuläret, och i det mailet kommer all information från formuläret stå med. Du kan sen svara på det mail du fått och då är det besökarens e-postadress du svarar till. Detta är smidigt om du är frilans eller företagare och kommer att svara personligen på alla formulär som kommer in.

Om formuläret är mer som en anmälningslista, t.ex. om du samlar intressenter inför ett event, så kan du välja att samla alla formulärinskick i ett spreadsheet på Google Drive. Du kan sen exportera den listan från Drive och göra vad du vill med.

Eller, om du samlar e-postadresser till ett nyhetsbrev eller annan e-postlista så finns en koppling till emailtjänsten MailChimp.

Slutligen under fliken "Advanced" så finns lite avancerade inställningar som vi vanligtvis inte behöver bry oss om, men vi kan iallafall översätta texten på knappen och skriva ett kort meddelande som ska visas på sidan efter att besökaren skickat formuläret:

Sådär! Då vad jag "klar" med mina sidor tillsvidare. Det ligger exempelinnehåll på dem för att jag ska kunna ha något att jobba med sen när jag designar sajten, och för att jag ska slippa skriva alla mina texter och ta fram bilder just nu.

Vi ska alldeles strax skapa en blogg på vår exempelsajt, och utforska Squarespaces bloggfunktioner. Men först ska vi kika lite på några av de inställningar som vi kan göra för vår Squarespace-sajt.