如何使用Squarespace建立您的第一个网站

更新时间:17 年 2021 月 XNUMX 日 / 文章作者: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 和 Weebly ,.

您会以如此迅速而轻松的方式将一个华丽的网站放在一起,仅需域名和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 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.因此,为要添加的所有页面编写草稿。

Also, pile up all the images (or videos) you're going to need to build your Squarespace website.另外,堆放构建Squarespace网站所需的所有图像(或视频)。 If you need stock images, arrange those too.如果您需要库存图像,也请安排这些图像。 Having the right images can拥有正确的图像可以 产生巨大影响 转换。

拥有所有内容和媒体将在很多时间之后。

现在开始构建站点。

(如果您已经注册了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将其主题分为以下类别:

  • 生意
  • 投资组合
  • 博客
  • 音乐家

  • 优选餐厅
  • 婚礼
  • Personal

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. 徽标和标题
  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.否则,请转到下一个设置。

要保存您到目前为止所做的更改,请点击“救' 面板顶部的按钮。

注意:如果您想为您的网站创建一个很棒的网站图标,下面是免费列表 favicon发电机 你可以看看。

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偏爱不安全的网站,而不是安全的网站。
  • 进阶– The advanced settings allow you to import site content from other website builders or CMSes.使用高级设置,您可以从其他网站构建器或CMS导入网站内容。 It also lets you export your site to WordPress.它还可以让您将网站导出到WordPress。
    如果您为站点创建自定义404页面,则可以使用高级设置来显示自定义404页面,而不是默认404页面。
    You can also add your Google Analytics account number via these settings.您还可以通过这些设置添加您的Google Analytics(分析)帐号。 Doing so will automatically install the Google Analytics script to your site.这样做会自动将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,电子邮件和内容营销以及潜在客户的文章。