首頁 / 文章 / 電子商務 / 如何使用 Squarespace 建立您的第一個網站

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

Squarespace 是最棒的之一 網站建設器. 如果您正在使用您的網站而不想擔心設置和維護,這是理想的選擇 hasslCMS 的 es 像 WordPress.

您會驚奇地發現,只需一個域名和 Squarespace 訂閱。

在這 Squarespace 對於初學者指南,我們將查看您需要採取的確切步驟來創建和 啟動您的第一個網站.

我們將涵蓋以下內容 Squarespace 組件:

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

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

導航

工具清單 


使用方法 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 是一個優秀的域名註冊商服務,提供有競爭力的價格和優質的服務。 查看它為您的域名購買域名 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 網站

全部 Squarespace 計劃從免費試用開始。 要註冊免費試用,請訪問 Squarespace 然後選擇“創建一個網站:

squarespace-入門
兩個簡單的步驟開始 Squarespace 站點: 1、設置一個(新的或搬入的)域; 2、選擇模板創建站點或商店。

接下來,選擇一個模板。

為了簡化這一步, Squarespace 大ups 其主題分為以下幾類:

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

  • 餐館
  • 婚禮
  • 個人

Squarespace 主題樣本

您可以在以下位置找到許多設計 Squarespace 主題。 單擊以下縮略圖以獲得更清晰的視圖。

主題名稱:五

主題名稱: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- 命名網站。 我稱我的網站為“我的第一個” 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. 徽標和標題
  2. 模板
  3. 樣式編輯器
  4. 結帳頁面樣式編輯器
  5. 鎖定屏幕
  6. 公告欄
  7. 移動信息欄
  8. Squarespace 徽章
  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 徽標(LOGO)製作器

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

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

總體而言, Squarespace的徽標製作工具非常直觀。 它在左側面板上有各種設計元素或圖標。

標誌 -  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 試用結束並且您升級到高級計劃,您應該能夠毫無問題地下載高分辨率版本。 獲得高分辨率文件後,您可以將其上傳到您的 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. 你會注意到 <!– This is Squarespace. –> 靠近代碼頂部以指示它是 Squarespace 網站
  3. 按Ctrl + F在頁面上搜索: 模板編號 並複制代碼

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

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

3.樣式編輯器

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

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

但是因為所有的 Squarespace 模板設計得非常完美,我建議您遠離此部分,當然,除非您是設計師!

4.檢出頁面樣式編輯器

結帳頁面樣式編輯器 有助於自定義結帳頁面的設置。 此設置主要有助於 Squarespace 有商店或商店網站的網站。

5。 鎖屏

Squarespace 允許您使用密碼鎖定頁面。 所有這些頁面都不顯示內容,而是顯示鎖定屏幕。

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

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

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 徽章 設置讓您啟用或禁用 Squarespace 徽章,調整其位置,並微調顯示設置。

8.自定義CSS

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

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

9。 高級

高級 選項可讓您添加更多字體 來自Typekit 給你 Squarespace 網站。 這 高級 設置還具有高級模板設置。

這樣就結束了你的設計部分 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創建頁面完成後,刪除所有演示頁面,然後將所有新生成的頁面拖放到 頂級導航.

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

現在,對於這個例子,我將我的頁面命名為“關於我”,對於初始佈局,我選擇了一個預製的“關於”頁面模板。 一旦我點擊“開始編輯”,所選的關於我的頁面佈局就會被加載 Squarespace的頁面編輯器:
1.現在,對於此示例,我將頁面命名為“關於我”。 2.對於入門版式,我選擇一個預製的“關於”頁面模板。

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

關於第2頁
移動你的鼠標和 hover 在頁面頂部(位於導航下方),您會看到突出顯示的選項面板已打開。

點擊 '編輯'.

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

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

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

請注意:

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

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

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

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

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

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

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

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

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

2.如何添加內容 Squarespace 網頁:

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

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

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

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

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

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

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

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

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

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

一個重要的 Squarespace 頁面:博客

雖然您可以將博客作為簡單頁面添加到 Squarespace,您可能需要為它做一些額外的設置。

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

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

帖子編輯器非常直觀。

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

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

選項 設置可讓您:

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

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

現在讓我們看看 Squarespace 設置。

步驟#4:使用 Squarespace: 探索設置

運用 Squarespace的設置很簡單。 它們分為 3 類:

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

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

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

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

在'網站' 設置包括:

  • 基本信息 –此設置可幫助您添加有關網站內容的摘錄。 一些模板顯示此信息,因此您應該填寫它。
  • 域–  購買域後,您應該返回此設置並指向您的 Squarespace 該域的站點。 第三方域名整合 輕而易舉。
  • 電子郵件– Gmail商業電子郵件集成可以在這裡完成。
  • 關聯帳戶– 您可以將您的社交媒體帳戶與您的 Squarespace 網站在這裡。 下次您在您的任何位置添加社交媒體個人資料圖標時 Squarespace 站點 Squarespace 將使用本節中的信息並自動將圖標鏈接到您的個人資料。
  • 市場營銷– 在市場營銷設置選項中,您已經設置了SEO,社交媒體和Google Adwords。
    SEO設置 從這裡將幫助您為您的網站添加 SEO 摘錄。 搜索引擎結果頁面上的用戶可以看到此摘錄。 您還可以設置站點上不同項目的 URL 格式。 社交媒體設置將幫助您決定要在您的網站上顯示哪些共享按鈕。 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。

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

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

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

如何建立一個 Squarespace 網站——總結

創建 Squarespace 網站並對其進行調整和定制以使其完美不應該花費你超過一周的時間。 完成後,您不必擔心更新、黑客攻擊、託管或其他任何事情; Squarespace 將為您管理您的網站。

我希望本指南能讓您構建您的第一個應用程序的粗略版本 Squarespace 在不到 10 小時內訪問網站(考慮購買域名和其他東西的時間)。

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

作者照片

迪莎·夏爾馬的文章

繼續閱讀