如何使用Squarespace建立您的第一個網站

更新時間:2021-11-17 / 文章作者:Disha Sharma

Squarespace是夢幻般的作品之一 網站建設者。 It's ideal if you're using for your website without wanting to worry about the setup and maintenance hassles of CMSes like如果您要在網站上使用而無需擔心CMS之類的設置和維護麻煩,那將是理想之選 WordPress.

您會以如此迅速而輕鬆的方式將一個華麗的網站放在一起,僅需域名和Squarespace預訂,便會感到驚訝。

在此Squarespace初學者指南中,我們將介紹創建和創建廣告所需的確切步驟 啟動您的第一個網站.

我們將介紹以下Squarespace組件:

  1. 設計(自定義網站的整體外觀)
  2. 頁面(向您的網站添加內容)
  3. 設置(微調 (搜索引擎優化) 和其他業務設置)

一旦了解了這些組件,便可以使用該平台構建任何類型的網站。


如何使用Squarespace…開始之前的準備工作

在開始使用Squarespace來構建網站之前,您將需要做一些事情:

1.域名

作為我們網站設置的步驟之一,我們將鏈接您的域名與您的Squarespace帳戶。

So, you will need a domain name.因此,您將需要一個域名。 If you haven't purchased a domain name yet, purchase one now.如果您尚未購買域名,請立即購買。

您也可以從Squarespace購買它,但我不建議您這樣做。
使用域名註冊域名託管服務商,網站建設者或CMS之間的域名轉讓總是比較容易的 第三方域名註冊商.

NameCheap is an excellent domain name registrar service that gives competitive prices and great service.是一項出色的域名註冊服務,可提供具有競爭力的價格和優質的服務。 Check it out to buy a domain name for your Squarespace website.檢查一下,為您的Squarespace網站購買域名。

注意:如果您需要幫助 註冊域名 對於您的網站,這些 域名生成器 可能的幫助。

2.大致了解網站的導航結構 

Knowing your site's navigation structure (or its main menu items) before starting to build it makes the process faster.在開始構建站點之前,先了解其站點的導航結構(或其主菜單項),可以使過程更快。 So take a paper and draw how your site menu will look like.因此,請撰寫論文並繪製您的站點菜單外觀。 This exercise will help in finalizing the different pages you'll be adding to your site.本練習將幫助您確定要添加到站點的不同頁面。

例如,您可以將以下某些頁面添加到您的站點:

  • 關於我們
  • 從這裡開始
  • 項目組合
  • 服務項目
  • 聘請

  • 商店
  • 特別服務
  • 方案收費
  • 核心团队
  • 聯繫我們

3.複製和圖形

The last thing you'll need before you begin creating your site is content.開始創建網站之前,您需要做的最後一件事就是內容。 So write rough drafts of all the pages that you're going to add.因此,為要添加的所有頁面編寫草稿。

此外,堆積構建 Squarespace 網站所需的所有圖像(或視頻)。 如果你需要 庫存圖片,也安排一下。 擁有正確的圖像可以 產生巨大影響 轉換。

擁有所有內容和媒體將在很多時間之後。

現在開始構建站點。

(如果您已經註冊了Squarespace試用版,請跳至指南的第一部分。)


如何建立您的第一個Squarespace網站

步驟1:註冊Squarespace網站

All Squarespace plans begin with a free trial.所有Squarespace計劃均以免費試用開始。 To sign up for a free trial, visit要註冊免費試用,請訪問 Squarespace 然後選擇“創建一個網站 :

開始使用Squarespace
1,選擇模板來創建站點或商店。

接下來,選擇一個模板。

為了簡化此步驟,Squarespace將其主題分為以下類別:

  • 企業
  • 投資組合
  • 博客
  • 音樂家

  • 餐館
  • 婚禮
  • 個人

Squarespace主題樣本

Here are a number of designs you can find at Squarespace themes.您可以在Squarespace主題中找到許多設計。 Click on the following thumbnails to have a clearer view.單擊以下縮略圖以查看更清晰的圖像。

主題名稱:五

主題名稱:Jasper

主題名稱:Tudor

主題名稱:Marquee

主題名稱:Pacific

主題名稱:高地

主題名稱:Shift

主題名稱:Forte

主題名稱:Rover

演練Squarespace註冊 過程

就本演練而言,我使用我的Squarespace帳戶進行設置。

我要選擇業務類別,然後選擇模板Montauk。

要將模板Montauk用於您的網站,請轉到業務> Montauk。
至 使用模板蒙托克 對於您的網站,請轉到業務> 蒙托克.

選擇模板後,Squarespace將顯示一個簡短的註冊表單:

註冊並使用Squarespace創建。

完成註冊後,您將進入4步的Squarespace網站內容個性化過程。

1.選擇誰的網站

步驟1的
#1-選擇網站的目的–我正在選擇“我的業務/組織”選項。

2.這個網站是關於什麼的?

步驟2的
#2-這個網站是關於什麼的? Multiple options here.這裡有多個選項。 I'm selecting the 'Professional services'.我正在選擇“專業服務”。

3.您對該網站的目標是什麼?

步驟3的
#3-您對該網站的目標是什麼? This question too supports multiple answers.這個問題也支持多個答案。 I'm choosing Showcase or create a portfolio of my work, Get hired, Blog or publish content, and Sell products or services online.我選擇Showcase或創建我的作品集,被錄用,博客或發佈內容以及在線​​銷售產品或服務。

4.命名站點

步驟4的
#4-命名站點。 I'm calling my site 'My First Squarespace Website' for now.我現在將自己的網站稱為“我的第一個Squarespace網站”。

完成網站內容個性化調查問卷後,我將看到以下屏幕。

As you can see in the screenshot, on the left, there's a panel with various design settings and preferences.如您在屏幕快照中所見,在左側,有一個包含各種設計設置和首選項的面板。 And on the right, there's a preview of my website.在右側,有我的網站的預覽。

我的第一個Squarespace網站預覽。
我的第一個Squarespace網站預覽。

步驟2:使用Squarespace(第1部分):設計選項

Squarespace在其設計設置下有10個項目:

  1. Logo 和標題
  2. 模板
  3. 樣式編輯器
  4. 結帳頁面樣式編輯器
  5. 鎖定屏幕
  6. 公告欄
  7. 移動信息欄
  8. 方形徽章
  9. 自定義CSS
  10. 高級

讓我們詳細看一下這些元素。

1.徽標和標題

We've already given our site a name, and so in this step, I'll add a tagline.我們已經為站點指定了名稱,因此在此步驟中,我將添加一個標語。 Let's set the tagline to '讓我們將標語設置為“Squarespace初學者的資源.

標誌 -  1
1.此設置下的下一個選項是添加徽標。 2.因為我沒有徽標,並且因為Squarespace為用戶提供了免費且極為精美的徽標製作工具,所以我選擇了“創建新徽標”選項。

單擊按鈕後,我將直接轉到Squarespace的徽標製作工具。

標誌 -  2
Squarespace標誌製作工具

這個徽標製作工具可讓您:

  • 從大量徽標圖標中選擇
  • 僅創建基於文本的徽標
  • 尋求圖像徽標
  • 更改徽標文本的字體和顏色
  • 預覽徽標在名片和其他品牌材料上的外觀

Overall, Squarespace's logo maker tool is pretty intuitive.總體而言,Squarespace的徽標製作工具非常直觀。 It has its various design elements or icons on the panel on the left-hand side.它的左側面板上有其各種設計元素或圖標。

標誌 -  3
您可以使用搜索選項來查找與您的網站相關的圖標。
標誌 -  4

當我搜尋關鍵字時 '網站',我有很多很棒的圖標。 I chose the one you can see on your right and made an image logo.我選擇了右邊可以看到的那個,並做了一個圖像徽標。

我嘗試下載徽標的高分辨率版本,但編輯器提示我註冊一個Squarespace帳戶才能執行此操作。

But still, a low-resolution version can be downloaded at this point too.但仍然可以在此時下載低分辨率版本。 That will do for now.現在就可以了。

Squarespace試用期結束併升級到高級計劃後,您應該可以下載高分辨率版本,而不會出現任何問題。 When you get the high-resolution file, you can upload it to your Squarespace site.獲得高分辨率文件後,可以將其上傳到Squarespace網站。

The next two options under this design item are setting the favicon and the social sharing logo.此設計項目下的下兩個選項是設置收藏夾圖標和社交共享徽標。 If you have these, great.如果有這些,那就太好了。 Otherwise, move on to the next setting.否則,請轉到下一個設置。

要保存您到目前為止所做的更改,請點擊“救' 面板頂部的按鈕。

注意:如果您想為您的網站創建一個很棒的網站圖標,下面是免費列表 圖標生成器 你可以看看。

2.模板

'模板部分顯示了在Squarespace網站內下載的所有模板。

如您所見,現在,我的模板列表僅包含模板 蒙托克 因為這是我在設置試用版時註冊的模板。

模板
Montauk,已安裝39分鐘。

If you're happy with the template you've chosen, go to the next step.如果您對選擇的模板滿意,請轉到下一步。 Or, you can download more templates.或者,您可以下載更多模板。

小技巧:

  • 此時,不要花時間在模板的下載和切換上,因為這將無濟於事。
  • 只有在設計了網站並將內容上傳到網站之後,您才能了解不同模板如何顯示您的內容。
  • 您將無法在演示內容和圖像中找到很多東西。

如何找出網站使用的Squarespace模板

如果您看到自己喜歡的Squarespace模板,並且想知道模板使用的是什麼主題,請按照以下方法進行查找,

  1. 右鍵單擊頁面>查看源/頁面源
  2. 你會注意到  在代碼頂部附近,表明它是Squarespace網站
  3. 按Ctrl + F在頁面上搜索: 模板編號 並複制代碼

我正在使用的模板Montauk具有模板ID: 50521cf884aeb45fa5cfdb80. 嘗試一下

找到模板ID後,您可以參考 Squarespace模板系列 帶您到Squarespace官方演示站點。

3.樣式編輯器

樣式編輯器 用於自定義模板的設置,例如其字體,標題顏色,徽標位置,頁腳內容等。

每個模板將在 樣式編輯器.

但是由於所有Squarespace模板的設計都是完美的,所以我建議您不要使用本節,除非您當然是設計師!

4.檢出頁面樣式編輯器

結帳頁面樣式編輯器 helps in customizing the settings of the checkout page.幫助自定義結帳頁面的設置。 This setting is mostly helpful to Squarespace sites that have stores or are store websites.此設置對有商店或商店網站的Squarespace網站最有幫助。

5。 鎖屏

Squarespace允許您使用密碼鎖定頁面。 All such pages don't display the contents but show a lock screen.所有此類頁面均不顯示內容,而是顯示鎖定屏幕。

如果您不自定義 鎖定屏幕 完全是這樣。

鎖屏
如果需要,您可以使用“鎖定屏幕”自定義選項自定義此頁面的外觀。

5。 公告欄

公告欄 lets you add a sticky notification on the top of your site.可讓您在網站頂部添加即時貼通知。 This is an excellent feature to draw your readers' attention to some of your important content.這是一個出色的功能,可以吸引讀者對您的一些重要內容的注意。

一旦啟用 公告欄,您可以添加您的消息和用戶應單擊的鏈接。

如您在上述屏幕截圖中所見,您可以在新窗口中打開鏈接。

公告欄
公告欄設置(左)和預覽(右)。

6.移動信息欄

顧名思義, 移動信息欄 在移動用戶之前顯示,可用於顯示您的電子郵件,電話號碼,位置和營業時間。

Squarespace會從其 '商業信息' 部分,我們將在後面看到。  

移動信息欄
移動信息欄。

7. Squarespace徽章

Squarespace將其品牌(徽章)添加到使用它構建的所有網站中。

方形徽章 設置可啟用或禁用Squarespace標誌,調整其位置並微調顯示設置。

8.自定義CSS

如果您要自定義字體,顏色和其他默認自定義選項之外的模板,則必須採取以下措施: 自定義CSS.

記住,添加 自定義CSS 可能會破壞模板的設計-不建議這樣做。

9。 高級

高級 選項可讓您添加更多字體 來自Typekit to your Squarespace website.到您的Squarespace網站。 The的 高級 設置還具有高級模板設置。

這樣就構成了Squarespace網站的設計部分。

接下來,我們將研究Squarespace頁面以及如何使用它們將內容上傳到新設計的網站。

步驟3:使用Squarespace(第2部分):網頁在Squarespace工作

選擇了模板,對其進行了自定義並添加了網站的標題和徽標之後,就該開始添加內容了。

Squarespace頁面使您能夠:

  • 將頁面(和內容)添加到您的網站(例如:關於,聯繫方式等)
  • 將博客添加到您的網站
  • 將商店添加到您的網站
  • 建立網站的主菜單

讓我們從主菜單開始。

首次訪問頁面設置時,您會注意到“頂級導航” 顯示演示中的菜單項。

現在,我希望您只是忽略演示中的頁面,然後開始添加自己的頁面。

對於網站通常需要的每個頁面,Squarespace提供了預製模板。

例如關於“關於”,“功能”,“商店”,“聯繫人”等等的頁面-您已經擁有可以立即加載到站點上的即用型頁面佈局。

1.如何將頁面添加到預製模板

讓我們看看如何將頁面添加到預製模板中。

如下面的屏幕截圖所示,您可以單擊兩個“ +”號來將頁面添加到您的站點。

當您單擊第一個選項時,您不僅會添加頁面,還將頁面添加到網站的主菜單中。

當您單擊第二個選項時,只需添加一個頁面即可。

1.您可以點擊兩個“ +”號將頁面添加到您的站點; 2.添加一個新頁面。
1.您可以點擊兩個“ +”號將頁面添加到您的站點; 2.添加一個新頁面。

I'd suggest you to start adding a page with the second option.我建議您開始添加帶有第二個選項的頁面。 After you're done with creating the pages, delete all the demo pages, and drag all your freshly generated pages and drop them under the創建頁面完成後,刪除所有演示頁面,然後將所有新生成的頁面拖放到 頂級導航.

讓我們添加一個“關於”頁面。 點擊項目“頁',您將在左側面板上看到以下選項:

Now, for this example, I'm naming my page 'About me' and for the starter layout, I'm choosing a pre-made 'About' page template.現在,對於這個示例,我將頁面命名為“關於我”,對於入門版,我選擇了一個預製的“關於”頁面模板。 Once I click on 'START EDITING', the selected about me page layout gets loaded in Squarespace's page editor:單擊“開始編輯”後,有關我的頁面佈局的選定內容將加載到Squarespace的頁面編輯器中:
1.現在,對於此示例,我將頁面命名為“關於我”。 2.對於入門版式,我選擇一個預製的“關於”頁面模板。

一旦我點擊“開始編輯”,選中的關於我的頁面佈局將被加載到Squarespace的頁面編輯器中。 要編輯頁面元素,請將鼠標懸停在頁面頂部(位於導航下方),您會看到以下選項面板打開:

關於第2頁
將鼠標懸停在頁面頂部(位於導航下方),您將看到突出顯示的選項面板。

點擊 '編輯'.

此時,您可以開始編輯頁面內容,也可以單擊“+在頁面頂部簽名以添加更多設計元素。

關於第3頁
單擊頁面頂部的“ +”號,以向頁面添加更多設計元素。
您可以在Squarespace的頁面上添加一些設計元素。
您可以在Squarespace的頁面上添加一些設計元素。

將元素添加到網站後,可以通過簡單的拖放功能輕鬆重新排列其位置。

備註:

如果您自定義默認佈局並添加不同的元素(包括spacer元素),則有時您的移動預覽可能看起來很有趣-更是如此,不同元素之間的間距可能看起來有些偏離。

(不過,默認佈局呈現得很漂亮。)

添加其他頁麵類似於添加關於頁面。

現在,如果要啟動站點並超快速運行,最好使用默認佈局。

在此步驟結束時,您應該已準備好將站點的所有頁面移至主菜單。

但是在採取行動之前,請刪除演示頁面。

接下來,將您新建的頁面拖放到“頂級導航”.

刪除演示頁面
要刪除頁面時單擊的刪除按鈕。

清理導航後,就可以在頁面上進行操作了。

2.如何向Squarespace頁面添加內容:

要添加內容(或自定義頁面的設計),只需單擊頁面名稱。

單擊後,頁面編輯器將加載,您可以將模板的內容替換為在準備步驟中編寫的內容。
單擊頁面名稱以加載Squarespace頁面編輯器。

單擊後,頁面編輯器將加載,您可以將模板的內容替換為在準備步驟中編寫的內容。

3.如何配置一些高級頁面設置

高級頁面設置可以幫助頁面:

  • 導航標題
  • 職稱
  • 說明(通常用於SEO)

  • URL段
  • 標題圖片
  • 跟踪代碼

高級頁面
要配置的頁面設置。

要對頁面進行更高級別的更改或將其刪除,請單擊頁面名稱旁邊的設置圖標。

另外,要將頁面設置為首頁,您需要打開所選頁面的這些設置,然後選擇“設為主頁' 選項。

一個重要的Squarespace頁面:博客

儘管您可以在Squarespace中將博客添加為簡單頁面,但是您可能需要對其進行一些其他設置。

要訪問這些設置,請在“頂部導航”下單擊博客菜單項上的設置齒輪:
1.單擊“頂部導航”下博客菜單項上的設置齒輪; 2.完成後,博客設置面板將打開; 3.博客設置面板–配置了這些博客級別的首選項後,就可以將博客文章添加到您的站點了。

要添加帖子,請單擊博客菜單項選項上的“ +”號。

帖子編輯器非常直觀。

在底部,您將看到將類別和標籤添加到帖子的設置。

發布博客
您還可以選擇將帖子另存為草稿或立即發布。
編輯後選項
撰寫文章後,請點擊頂部博客菜單中的“選項”。

選項 設置可讓您:

  • 將特色圖片添加到帖子中
  • 分配作者到帖子
  • 摘錄
  • 將帖子標記為特色帖子

希望通過上面的部分,您將擁有一個漂亮的網站,其中包含您的內容,甚至是博客。

現在讓我們看一下Squarespace設置。

步驟#4:使用Squarespace:瀏覽設置

Using Squarespace's settings are easy.使用Squarespace的設置很容易。 They are grouped into 3 categories:它們分為XNUMX類:

  1. 一般
  2. 網站
  3. 商業

其中,“一般' 類別可讓您添加公司信息,例如公司名稱,地址,稅號等。

而''商業' 設置與想要經營在線商店或將商店添加到其站點的人有關。

在這些類別中,“網站' 我想談一談類別。

在'網站' 設置包括:

  • 基本信息 –此設置可幫助您添加有關網站內容的摘錄。 一些模板顯示此信息,因此您應該填寫它。
  • 域–  購買域名後,您應該返回此設置並將Squarespace網站指向該域名。 第三方域名整合 輕而易舉。
  • 電子郵件– Gmail商業電子郵件集成可以在這裡完成。
  • 關聯帳戶– You can connect your social media accounts with your Squarespace website here.您可以在此處將社交媒體帳戶與Squarespace網站關聯。 The next time that you add social media profile icons anywhere on your Squarespace site, Squarespace will use information from this section and automagically link the icons to your profiles.下次您在Squarespace網站上的任何位置添加社交媒體配置文件圖標時,Squarespace將使用本節中的信息,並自動將圖標鏈接到您的配置文件。
  • 市場營銷– 在市場營銷設置選項中,您已經設置了SEO,社交媒體和Google Adwords。
    SEO設置 Google Adwords營銷設置適用於使用Squarespace商業或商務計劃的網站。
  • 寫博客 - 博客設置可幫助您設置博客文章URL格式。
    請勿更改默認格式-它已經易於閱讀。 但是,如果願意,可以從中刪除年,月和日。 這些設置還使您可以將博客與評論服務Disqus集成在一起。 這樣,您的用戶將能夠通過其Disqus帳戶對您的內容髮表評論。 (如果您不希望使用Disqus,也有默認的評論系統。)
    (經過AMP優化的頁面是向移動訪問者顯示低調版本的網頁,這有助於提供快速的移動瀏覽體驗。)
  • SSL – 您可以在下面的站點的安全版本和不安全版本之間進行選擇 SSL設定。 Choose the secured version because Google prefers secure websites over insecure ones.選擇安全版本,因為Google偏愛不安全的網站,而不是安全的網站。
  • 進階– 高級設置允許您從其他網站建設者或 CMS 導入網站內容。 它還允許您將網站導出到 WordPress.
    如果您為站點創建自定義404頁面,則可以使用高級設置顯示自定義404頁面,而不是默認404頁面。
    您還可以添加您的 Google Analytics(分析) 帳號通過這些設置。 這樣做會自動將 Google Analytics 腳本安裝到您的站點。

而已。

如果您一直按照本指南的說明進行操作,那麼現在應該已經可以使用第一個功能正常(如果不是很完美)的Squarespace網站。

啟動Squarespace網站後的第一件事

啟動新網站後,您的首要任務是讓Google將其編入索引。

為了加快索引編制過程,您必須將其站點地圖提交到Google Search Console。

Squarespace網站的站點地圖可在以下位置找到:

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

因此,複製您網站的站點地圖URL並通過 搜索控制台.

如何建立Squarespace網站-打包

Squarespace將為您管理您的網站。

我希望本指南使您能夠在不到10小時的時間內(第一個因素來考慮購買域名和其他東西)構建第一個Squarespace網站的粗略版本。

注意:如果您正在尋找其他平台,請參閱以下列表 建立自己的網站的平台.

關於Disha Sharma

Disha Sharma是一位數字營銷人員自由撰稿人。 她寫了關於SEO,電子郵件和內容營銷以及潛在客戶的文章。

連接: