Hur man använder Squarespace för att bygga din första webbplats

Squarespace är en av de fantastiska webbplatsbyggarna. Det är perfekt om du använder för din webbplats utan att behöva oroa dig för installationen och underhållsproblemen för CMS som WordPress.


Du blir förvånad över hur snabbt och enkelt du kan sätta ihop en underbar webbplats med inget annat än ett domännamn och Squarespace-prenumeration.

I det här Squarespace för nybörjarguiden kommer vi att titta på exakta steg du måste vidta för att skapa och starta din första webbplats.

Vi täcker följande Squarespace-komponenter:

  1. Design (anpassa den totala utseendet och känslan på din webbplats)
  2. Sidor (lägga till innehåll till din webbplats)
  3. Inställningar (finjustera SEO och andra affärsinställningar)

När du har förstått dessa komponenter kommer du att kunna bygga någon form av en webbplats med plattformen.

Navigering

  • Steg # 1: Registrera dig för Squarespace
  • Steg # 2: Förstå Squarespace (del # 1): Designalternativ
  • Steg 3: Förstå Squarespace (del # 2): Hur “Sidor” fungerar
  • Steg 4: Utforska Squarespace
  • Sammanfatta

Verktyg listan 

  • Plattform – Squarespace
  • Domänregistrator – Namn billigt
  • (Det är allt du behöver, enkelt!)

FTC-avslöjande: BuildThis får remissavgifter från verktyg som listas på denna webbplats. Men yttrandena är baserade på vår erfarenhet och inte hur mycket de betalar. Vi fokuserar på att hjälpa småföretag och individer att bygga webbplatser som företag. Vänligen stödja vårt arbete och lära dig mer om vår intäkter.

Hur man använder Squarespace … Förberedelserna innan du börjar

Innan du börjar använda Squarespace för att bygga din webbplats kommer du att behöva några saker:

1. Domännamn

Som ett av våra steg för installation av webbplatsen kommer vi att länka ditt domännamn till ditt Squarespace-konto.

Så du behöver ett domännamn. Om du inte har köpt ett domännamn ännu, köp ett nu.

Du kan köpa det från Squarespace också, men det rekommenderar jag inte.

Domänöverföring mellan värdleverantörer eller webbplatsbyggare eller CMS är alltid enklare när domänen är registrerad hos en tredje parts domänregistrator.

NameCheap är en utmärkt domännamnsregistertjänst som ger konkurrenskraftiga priser och bra service. Kolla in det för att köpa ett domännamn för din Squarespace-webbplats.

Obs: Om du behöver hjälp med att registrera ett domännamn för din webbplats kan dessa domännamngeneratorer hjälpa till.

2. En grov uppfattning om din webbplats navigationsstruktur 

Att känna till din webbplats navigationsstruktur (eller dess huvudmenyobjekt) innan du börjar bygga den gör processen snabbare.

Så ta ett papper och rita hur din webbplatsmeny kommer att se ut. Den här övningen hjälper dig att slutföra de olika sidorna du lägger till på din webbplats.

Till exempel kan du lägga till några av följande sidor på din webbplats:

  • Handla om
  • Börja här
  • Portfölj
  • tjänster
  • Hyra
  • Lagra
  • Funktioner
  • Prissättning
  • Team
  • Kontakt

3. Kopia och grafik

Det sista du behöver innan du börjar skapa din webbplats är innehåll. Så skriv grova utkast till alla sidor som du kommer att lägga till.

Höja också upp alla bilder (eller videor) som du kommer att behöva för att bygga din Squarespace-webbplats. Om du behöver lagerbilder, ordna dem också. Att ha rätt bilder kan har en enorm inverkan om omvandlingar.

Att ha allt innehåll och media till hands kommer mycket senare.

Låt oss nu börja med att bygga webbplatsen.

(Om du redan har registrerat dig för en Squarespace-rättegång, hoppa till den första delen av guiden.)

Hur du bygger din första Squarespace-webbplats

Steg 1: Registrera dig för Squarespace-webbplatsen

Alla Squarespace-planer börjar med en kostnadsfri rättegång.

För att registrera dig för en kostnadsfri prövning besöker du Squarespace och väljer alternativet ‘SKAPA EN WEBBPLATS’:

Squarespace-komma-igångTvå enkla steg för att starta en Squarespace-webbplats: 1, Ställ in en (ny eller flytta in) domän; 2, Välj mallar för att skapa en webbplats eller butik.

Välj sedan en mall.

För att göra detta steg enkelt grupperar Squarespace sina teman i följande kategorier:

  • företag
  • portföljer
  • Bloggar
  • musiker
  • Restauranger
  • bröllop
  • Personlig

Exempel på kvadratspets-teman

Här är ett antal mönster du kan hitta på Squarespace-teman. Klicka på följande miniatyrer för att få en tydligare vy.

Teman namn: Fem

Teman namn: Jasper

Teman namn: Tudor

Teman namn: Marquee

Teman namn: Stilla havet

Teman namn: höjder

Temanamn: Skift

Teman namn: Forte

Teman namn: Rover

Walkthrough Squarespace registreringen bearbeta

I syftet med detta genomgång skapade jag det med mitt Squarespace-konto.

Jag tänker på företagskategorin och väljer mallen Montauk.

To use Montauk for your site, go to Business data-lazy-src=

När du väljer en mall kommer Squarespace att visa dig en kort anmälningsformulär:

Bli MedlemRegistrera dig och skapa med Squarespace.

När du har slutfört registreringen kommer du att ledas till en 4-stegs personalanpassningsprocess på webbplatsen för Squarespace.

1. Välj vem webbplatsen är avsedd för

steg 1# 1- Att välja vem webbplatsen är avsedd för – Jag väljer alternativet “Mitt företag / organisation”.

2. Vad handlar den här webbplatsen om?

steg 2# 2- Vad handlar den här webbplatsen om? Här finns flera alternativ. Jag väljer “Professionella tjänster”.

3. Vilka är dina mål för den här webbplatsen?

steg 3# 3- Vad är dina mål för den här webbplatsen? Denna fråga stöder också flera svar. Jag väljer Showcase eller skapar en portfölj av mitt arbete, blir anställd, bloggar eller publicerar innehåll och säljer produkter eller tjänster online.

4. Namnge webbplatsen

steg-4# 4- Namnge webbplatsen. Jag kallar min webbplats “My First Squarespace Website” för nu.

När jag har fyllt i frågeformuläret för anpassning av webbplatsinnehåll ser jag följande skärmbild.

Som du kan se på skärmdumpen till vänster finns det en panel med olika designinställningar och preferenser. Och till höger finns det en förhandsgranskning av min webbplats.

Förhandsvisning av min första Squarespace-webbplats.Förhandsvisning av min första Squarespace-webbplats.

Läs mer om Squarespace

Steg # 2: Använda Squarespace (del # 1): Designalternativ

Squarespace har 10 artiklar under sina designinställningar:

  1. Logotyp & Titel
  2. Mall
  3. Style Editor
  4. Kassasidan Style Editor
  5. Låsskärm
  6. Meddelande Bar
  7. Mobil informationsfält
  8. Squarespace Badge
  9. Anpassad CSS
  10. Avancerad

Låt oss ta en detaljerad titt på vart och ett av dessa element.

1. Logotyp & Titel

Vi har redan gett vår webbplats ett namn, och i det här steget lägger jag till en taglinje. Låt oss ställa taglinjen till “En resurs för Squarespace-nybörjare”.

logo-11. Nästa alternativ under denna inställning är att lägga till en logotyp. Om du har en logotyp, ladda upp den. 2. Eftersom jag inte har en logotyp, och eftersom Squarespace ger sina användare ett gratis och extremt elegant logotyptillverkarverktyg, väljer jag alternativet ‘SKAPA EN NY LOGO’.

När jag klickar på knappen riktas jag till Squarespaces logotypverktyg.

logo-2Squarespace Logo Maker

Det här logotillverkarverktyget låter dig:

  • Välj mellan massor av logotypikoner
  • Skapa bara en textbaserad logotyp
  • Sök efter en bildlogotyp
  • Ändra typsnitt och färg på logoteksten
  • Förhandsgranska hur logotypen ser ut på visitkort och annat märkesmaterial

Sammantaget är Squarespaces verktyg för logotyptillverkare ganska intuitivt. Det har sina olika designelement eller ikoner på panelen på vänster sida.

logo-3Du kan använda sökalternativet för att hitta ikoner som är relevanta för din webbplats.

När jag sökte efter nyckelordet “webbplats” fick jag många fantastiska ikoner. Jag valde den du kan se till höger och skapade en bildlogotyp.

logo-4

Jag försökte ladda ner en högupplöst version av logotypen, men redaktören fick mig att registrera mig för ett Squarespace-konto för att kunna göra det.

Men ändå kan en version med låg upplösning laddas ner vid denna punkt också. Det kommer att göra för nu.

När din Squarespace-rättegång är slut och du uppgraderar till en premiumplan, bör du kunna ladda ner den högupplösta versionen utan problem. När du får den högupplösta filen kan du ladda upp den till din Squarespace-webbplats.

De nästa två alternativen under denna design är att ställa in favicon och logotypen för social delning. Om du har dessa, bra. I annat fall går du vidare till nästa inställning.

För att spara de ändringar du har gjort hittills klickar du på knappen ‘SPARA’ överst på panelen.

Obs! Om du vill skapa en fantastisk favicon för din webbplats, här är en lista över gratis favicon-generator som du kan titta på.

2. Mall

Avsnittet ‘Mall’ visar alla mallar som laddas ner på en Squarespace-webbplats.

Just nu, som ni ser, innehåller min malllista bara mallen Montauk eftersom det är den mall jag registrerade mig för när jag ställde in min testversion.

mallMontauk, installerad för 39 minuter sedan.

Om du är nöjd med den mall du har valt går du till nästa steg. Eller så kan du ladda ner fler mallar.

Dricks

  • Spendera inte tid på att ladda ner och byta mallar just nu eftersom det inte kommer att vara till hjälp.
  • Det är först efter att du har designat din webbplats och laddat upp innehåll till den att du kan förstå hur de olika mallarna visar ditt innehåll.
  • Du kommer inte att kunna räkna ut mycket med demoinnehållet och bilderna.

Hur man tar reda på vilken Squarespace-mall en webbplats använder

Om du ser en Squarespace-mall som du gillar och undrar vilket tema den använder, så här tar du reda på det,

  1. Högerklicka på sidan > Visa källa / sidkälla
  2. Du kommer att märka  nära toppen av koden för att indikera att det är en Squarespace-webbplats
  3. Tryck på Ctrl + F för att söka på sidan för: templateid och kopiera koden

Mallen Montauk, jag använder har mall-id: 50521cf884aeb45fa5cfdb80. Pröva dig själv

När du hittat mall-id kan du hänvisa till Kvadratmallfamilj för att ta dig till den officiella Squarespace-demosidan.

3. Style Editor

Style Editor används för att anpassa en malls inställningar som teckensnitt, titelfärg, logoposition, sidfotens innehåll bland flera andra.

Varje mall erbjuder olika anpassningsalternativ i Style Editor.

Men eftersom alla Squarespace-mallar är utformade för att perfektion, rekommenderar jag att du håller dig borta från det här avsnittet, såvida du inte är en designer!

4. Kassa Sidstil Editor

Checkout Page Style Editor hjälper dig att anpassa inställningarna på kassasidan. Den här inställningen är mest användbar för Squarespace-webbplatser som har butiker eller är butikswebbplatser.

5. Lås skärm

Squarespace låter dig låsa sidor med lösenord. Alla sådana sidor visar inte innehållet utan visar en låsskärm.

Om du inte anpassar låsskärmen alls, så kommer den att se ut.

låsskärmOm du vill kan du anpassa utseendet på denna sida med anpassningsalternativen för låsskärm.

5. Meddelandefältet

Meddelandefältet låter dig lägga till ett klibbigt meddelande högst upp på din webbplats. Detta är en utmärkt funktion för att uppmärksamma dina läsare på något av ditt viktiga innehåll.

När du aktiverar meddelandefältet kan du lägga till ditt meddelande och länken som användarna ska klicka på.

Som du kan se i ovanstående skärmbild kan du göra länken öppen i ett nytt fönster.

tillkännagivande-barInställningarna för meddelandefältet (vänster) och förhandsgranskningen (höger).

6. Mobil informationsfält

Som namnet antyder visar mobilinformationsfältet före mobilanvändare och kan användas för att visa din e-postadress, telefonnummer, plats och öppettider.

Squarespace hämtar denna information från avsnittet “Företagsinformation”, som vi kommer att se senare.  

mobil-info-barMobil informationsfält.

7. Squarespace Badge

Squarespace lägger till sitt varumärke (märke) till alla webbplatser som är byggda med det.

Squarespace Badge-inställningarna låter dig aktivera eller inaktivera Squarespace-märket, justera dess position och finjustera skärminställningarna.

8. Anpassad CSS

Om du vill anpassa din mall utöver teckensnitt, färger och andra standardanpassningsalternativ, måste du ta hjälp av Custom CSS.

Kom ihåg att lägga till Anpassad CSS kan bryta utformningen av en mall – rekommenderas inte.

9. Avancerad

Alternativet Avancerat låter dig lägga till fler teckensnitt från Typekit till din Squarespace-webbplats. De avancerade inställningarna har också avancerade mallinställningar.

Så det slår in designdelen på din Squarespace-webbplats.

Därefter tittar vi på Squarespace-sidor och hur du kan använda dem för att ladda upp innehåll till din nyutformade webbplats.

Steg 3: Använda Squarespace (del # 2): Hur ‘Sidor’ fungerar i Squarespace

När du har valt en mall, anpassat den och lagt till webbplatsens titel och logotyp är det dags att börja lägga till innehåll.

Squarespace Pages låter dig:

  • Lägg till sidor (och innehåll) på din webbplats (till exempel: Om, Kontakt och mer)
  • Lägg till en blogg till din webbplats
  • Lägg till en butik på din webbplats
  • Bygg din webbplats huvudmeny

Låt oss börja med huvudmenyn.

När du öppnar sidinställningarna för första gången kommer du att märka att ‘TOP NAVIGATION’ visar menyalternativen från demot.

För tillfället skulle jag vilja att du bara skulle glömma sidorna från demon och börja lägga till dina egna sidor.

För varje sida som en webbplats vanligtvis behöver har Squarespace tillhandahållit förlagda mallar.

Till exempel för sidor som Om, Funktioner, Butik, Kontakt och mer – du har redan redo att använda sidlayouter som du bara kan ladda till din webbplats.

1. Hur man lägger till en sida i en förlagd mall

Låt oss se hur du kan lägga till en sida i en förlagd mall.

Som du ser i följande skärmdump finns det två “+” -tecken du kan klicka på för att lägga till en sida på din webbplats.

När du klickar på det första alternativet lägger du inte bara till en sida utan lägger du också till den på webbplatsens huvudmeny.

Och när du klickar på det andra alternativet lägger du bara till en sida.

1. Det finns två 1. Det finns två “+” -tecken du kan klicka på för att lägga till en sida på din webbplats; 2. Klicka på ‘Sida’ för att skapa en ny sida.

Jag föreslår att du börjar lägga till en sida med det andra alternativet. När du är klar med att skapa sidorna tar du bort alla demosidor och drar alla dina nyligen genererade sidor och släpper dem under TOP NAVIGATION.

Låt oss lägga till en “Om” -sida. När du klickar på objektet ‘Sidan’ ser du följande alternativ på panelen till vänster:

Nu, för det här exemplet, namnger jag min sida 'Om mig' och för startlayouten, väljer jag en förlagd sidmall 'Om'. När jag klickar på 'START EDITING' laddas den utvalda om mig sidlayout i Squarespace's sidredigerare:1. Nu, för det här exemplet, namnger jag min sida ‘Om mig’. 2. För startlayouten väljer jag en färdiggjord “About” -sidesmall.

När jag klickar på ‘START EDITING’ laddas den utvalda om mig sidlayout i Squarespace’s sidredigerare. Om du vill redigera sidelementen håller du muspekaren på sidans topp (som är rätt under navigeringen) så ser du följande alternativspanel öppnas:

about-sida-2Flytta musen och håll muspekaren längst upp på sidan (som är rätt under navigeringen) så ser du den markerade alternativspanelen öppnas.

Klicka på “EDIT”.

Vid denna punkt kan du antingen börja redigera sidinnehållet eller så kan du klicka på “+” -tecknet högst upp på sidan för att lägga till fler designelement till det.

about-sida-3Klicka på “+” -tecknet högst upp på sidan för att lägga till fler designelement på sidan.
Några av designelementen kan du lägga till på din sida på Squarespace.Några av designelementen kan du lägga till på din sida på Squarespace.

När du lägger till ett element på din webbplats är det enkelt att ordna om sin position med den enkla dra och släpp-funktionen.

Notera:

Om du anpassar standardlayouterna och lägger till olika element inklusive spacer-elementet, kan ibland din förhandsgranskning av mobilen se rolig ut – mer avståndet mellan de olika elementen kan se lite ut.

(Standardlayouterna är dock vackert.)

Lägga till andra sidor liknar att lägga till om-sidan.

För tillfället är det bäst att använda standardlayouterna om du vill få webbplatsen igång och fungera supersnabb.

I slutet av detta steg bör du ha alla sidor på din webbplats redo att flyttas till huvudmenyn.

Men innan du gör flytten, ta bort demosidorna.

Dra och släpp sedan dina nyligen gjorda sidor till ‘TOP NAVIGATION’.

Radera-the-demo-sidaRadera-knappen för att klicka när du vill ta bort en sida.

När du har rensat upp din navigering är det dags att arbeta på sidorna.

2. Hur man lägger till innehåll på Squarespace-sidor:

För att lägga till innehåll (eller för att anpassa designen på en sida) klickar du bara på sidans namn.

När du klickar laddas sidredigeraren och du kan ersätta mallens innehåll med innehållet du skrev i förberedelsestegen.Klicka på sidnamnet för att ladda Squarespace-sidredigeraren.

När du klickar laddas sidredigeraren och du kan ersätta mallens innehåll med innehållet du skrev i förberedelsestegen.

3. Hur man konfigurerar vissa sidinställningar på hög nivå

Sidinställningar på hög nivå kan hjälpa till med en sida:

  • Navigeringstitel
  • Titel
  • Beskrivning (används ofta för SEO)
  • URL-snigel
  • Huvudbild
  • Spårningskod

hög nivå-sidaSidinställningar som ska konfigureras.

För att göra ändringar på högre nivå på en sida eller ta bort den, klicka på inställningsikonen bredvid en sidans namn.

För att ställa in en sida som hemsida måste du öppna dessa inställningar för den valda sidan och välja alternativet ‘SET AS HOMEPAGE’.

En viktig Squarespace-sida: bloggen

Även om du kan lägga till en blogg som en enkel sida i Squarespace, kan du behöva göra några ytterligare inställningar för det.

För att komma åt dessa inställningar klickar du på inställningsutrustning på bloggmenyalternativet under 'TOP NAVIGATION':1. Klicka på inställningsutrustning på bloggmenyalternativet under ‘TOP NAVIGATION’; 2. När du gör det öppnas panelen för blogginställningar; 3. Blogginställningspanelen – När du har konfigurerat dessa inställningar på bloggnivå är du redo att lägga till blogginlägg på din webbplats.

För att lägga till ett inlägg, klicka på “+” -tecknet i alternativet för bloggmenyalternativ.

Inläggsredaktören är ganska intuitiv.

Längst ner ser du inställningar för att lägga till en kategori och taggar i ditt inlägg.

publicera-inläggDu kan också välja att spara ditt inlägg som ett utkast eller att publicera det direkt.
redigering-post-alternativNär du har skrivit ett inlägg klickar du på ‘Alternativ’ från bloggmenyn längst upp.

Alternativinställningarna låter dig:

  • Lägg till en bild i ett inlägg
  • Tilldela en författare till inlägget
  • Skriv ett utdrag
  • Markera ett inlägg som ett visst inlägg

Förhoppningsvis, med ovanstående avsnitt, har du en snygg webbplats redo med ditt innehåll och till och med en blogg.

Låt oss nu titta på Squarespace-inställningarna.

Steg 4: Använda Squarespace: Utforska inställningarna

Det är enkelt att använda Squarespace-inställningarna. De är grupperade i tre kategorier:

  1. Allmän
  2. Hemsida
  3. Handel

Av dessa ger kategorin ‘Allmänt’ dig möjlighet att lägga till företagsinformation som ditt företagsnamn, adress, skatte-id och mer.

Och inställningarna för “handel” är relevanta för någon som vill driva en onlinebutik eller lägga till en butik på sin webbplats.

Av dessa kategorier är kategorin “Webbplats” den jag skulle vilja prata om.

Inställningarna för “Webbplats” inkluderar:

  • Grundläggande information – Den här inställningen hjälper dig att lägga till ett utdrag om vad din webbplats handlar om. Vissa mallar visar denna information, så du bör fylla i den.
  • Domän –  När du har köpt en domän bör du komma tillbaka den här inställningen och peka din Squarespace-webbplats till den domänen. Tredjeparts domänintegration är en bris.
  • E-postmeddelanden – Nästa artikel är E-post. Gmail-e-postintegration kan göras här.
  • Anslutna konton – Du kan ansluta dina sociala mediekonton till din Squarespace-webbplats här. Nästa gång du lägger till sociala medieprofilikoner var som helst på din Squarespace-webbplats kommer Squarespace att använda information från detta avsnitt och automatiskt länka ikonerna till dina profiler.
  • Marknadsföring – Inne i alternativen för marknadsföringsinställningar har du inställningar för SEO, sociala medier och Google Adwords.
    SEO-inställningar härifrån hjälper dig att lägga till ett SEO-utdrag för din webbplats. Detta utdrag är synligt för en användare på resultatsidan för sökmotorer. Du kan också ställa in URL-format för olika objekt på din webbplats. Inställningarna för sociala medier hjälper dig att bestämma vilka delningsknappar du vill visa på din webbplats. Marknadsinställningen för Google Adwords är för webbplatser som använder Squarespaces affärs- eller handelsplaner.
  • Blogga – Blogginställningarna hjälper dig att ställa in URL-format för blogginlägget.
    Ändra inte standardformatet – det är redan läsarvänligt. Men om du vill kan du ta bort år, månad och datum från det. Dessa inställningar låter dig också integrera anslut din blogg till Disqus, en kommentartjänst. På så sätt kommer dina användare att kunna kommentera ditt innehåll via sina Disqus-konton. (Det finns ett standardkommentarsystem också om du inte vill ha Disqus.)
    Blogginställningarna hjälper dig också att aktivera AMP-leverantörer att visa AMP-versionen av dina blogginlägg. (AMP-optimerade sidor är sådana som visar nedtonade versioner av webbsidor för mobila besökare – detta hjälper till att erbjuda en snabbt snabb mobilupplevelse.)
  • SSL – Du kan välja mellan en säker och en osäker version av din webbplats under SSL-inställning. Välj den säkrade versionen eftersom Google föredrar säkra webbplatser framför osäkra.
  • Avancerad – De avancerade inställningarna låter dig importera webbplatsinnehåll från andra webbplatsbyggare eller CMS: er. Det låter dig också exportera din webbplats till WordPress.
    Om du skapar en anpassad 404-sida för din webbplats kan du använda de avancerade inställningarna för att visa din anpassade 404-sida istället för standard 404-sidan.
    Du kan också lägga till ditt Google Analytics-kontonummer via dessa inställningar. Om du gör det installeras Google Analytics-skriptet automatiskt på din webbplats.

Det är allt.

Om du har följt instruktionerna i denna guide bör din första funktionella (om inte en perfekt) Squarespace-webbplats nu vara klar.

Det första du ska göra efter att ha lanserat din Squarespace-webbplats

När du startar en ny webbplats är din första uppgift att få den indexerad av Google.

För att påskynda indexeringsprocessen måste du skicka in webbplatskartan till Google Search Console.

En webbplatskarta för en Squarespace-webbplats finns på:

http://www.yourdomain.com/sitemap.xml

Så kopiera webbplatsens webbplatskarta-URL och skicka den via Sökkonsol.

Besök Squarespace.com

Hur man bygger en webbplats för Squarespace – Packa in den

Att skapa en Squarespace-webbplats och justera och anpassa den till perfektion bör inte ta dig mer än en vecka. När du är klar behöver du inte oroa dig för uppdateringar eller hacking eller hosting eller något annat; Squarespace kommer att hantera din webbplats åt dig.

Jag hoppas att den här guiden ger dig möjlighet att bygga en grov version av din första Squarespace-webbplats på mindre än 10 timmar..

Obs! Om du letar efter alternativa plattformar är här en lista med 16 plattformar för att bygga din egen webbplats.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map