来自 科技 2020-11-27 15:47 的文章

UXD带你全面解锁Squarespace,经过实测这是最好用的

UXD带你全面解锁Squarespace,经过实测这是最好用的

同学们在制作作品集的时候,为了有更丰富的展现个人设计的方式,搭建个人作品集网站绝对是一个不二的选择,但是如何快速搭建个人网站成为了很多同学挠头的事情。

UXD带你全面解锁Squarespace,经过实测这是最好用的

建站工具有很多,比如WordPress,Wix……但是经过UXD导师们的长期实测,可以很负责地告诉同学们:“Squarespace荣升为最好用的建站工具没有之一”。

注:UXD为所有内部学员提供免费的建站一对一辅导,有需要的同学可以直接联系教务老师获取课程排期和技术支持。

UXD带你全面解锁Squarespace,经过实测这是最好用的

展开全文

本文,UXD将从如何注册、如何编辑内容、如何改变字体和颜色、如何加分栏颜色和如何制作轮播图,这五个方面介绍Squarespace的使用方法。

UXD带你全面解锁Squarespace,经过实测这是最好用的

01 注册账户

在Squarespace主界面的左上角有LOG IN的登入口,可以用邮箱创建一个新用户,注册你的Squarespace账号。

UXD带你全面解锁Squarespace,经过实测这是最好用的

注册完之后,你就可以根据自己的意愿选择你想制作的网站类型了,例如下图选择Portfolios之后,就会有对应的模板供你制作。

UXD带你全面解锁Squarespace,经过实测这是最好用的

02 添加/编辑内容

进入模板后,左侧为菜单栏。菜单栏中的选项主要用来调整网页的组织架构,设计网页的配色、字体等参数。

UXD带你全面解锁Squarespace,经过实测这是最好用的

点击Pages进入下图所示的两个板块。Main Navigation可以调整顶部的导航栏;Home选项可以调整首页。

UXD带你全面解锁Squarespace,经过实测这是最好用的

接着,选中Home页面,点击Edit对页面进行编辑。

UXD带你全面解锁Squarespace,经过实测这是最好用的

点击页面上有修改标记的地方即可对相应内容进行调整。

UXD带你全面解锁Squarespace,经过实测这是最好用的

点击页面间的加号可以添加内容。

UXD带你全面解锁Squarespace,经过实测这是最好用的

添加内容可以包含图片、视频、文字、链接等。

UXD带你全面解锁Squarespace,经过实测这是最好用的

同时还可以在模板内部继续添加内容。

UXD带你全面解锁Squarespace,经过实测这是最好用的

可添加内容如图所示,包含文字、图片、视频、引用、链接等,形式非常丰富。下图所示就是可以添加材料的所有形式。

UXD带你全面解锁Squarespace,经过实测这是最好用的

当我们需要对整个面板进行调节的时候,可以选择右侧的浮标对面板进行编辑、复制、上下移动的操作。

UXD带你全面解锁Squarespace,经过实测这是最好用的

03 改变字体和颜色

在Squarespace中更改字体风格、大小、颜色都是通过代码进行操作的。双击模板中的文字可以修改内容。右击会出现Inspect字样,如下图所示,打开代码面板。

UXD带你全面解锁Squarespace,经过实测这是最好用的

进入到代码模板后,需要点击下图中圈出来的按钮,才可以获取网页代码,选择元素并查看和复制代码。

UXD带你全面解锁Squarespace,经过实测这是最好用的

UXD带你全面解锁Squarespace,经过实测这是最好用的

当我们的鼠标移动到想要查看的文字,就会有对应的信息显示在屏幕上。

UXD带你全面解锁Squarespace,经过实测这是最好用的

比如,这里的字体是h3,颜色是黑色。同样的,在右边的代码框中也会有相应的信息显示出来。

UXD带你全面解锁Squarespace,经过实测这是最好用的

记住这里显示的信息,然后回到Design面板,点击CSS面板,对你需要修改的字体进行代码的编辑。

UXD带你全面解锁Squarespace,经过实测这是最好用的

点击CSS面板后,下方就会有一个代码框,在这里,我们可以将相应的代码进行粘贴或者编写。

UXD带你全面解锁Squarespace,经过实测这是最好用的

比如,我们想把自己已经编辑好的文字代码信息转移到Squarespace中。以Figma为例,在Figma页面的右侧也有相应的代码。点选相应的文字,点击Inspect,就可以查看代码。

UXD带你全面解锁Squarespace,经过实测这是最好用的

然后,直接复制这一段代码到Squarespace的代码填写框中。

UXD带你全面解锁Squarespace,经过实测这是最好用的

font-family: PingFang SC;

font-style: normal;

font-weight: normal;

font-size: 72px;

line-height: 101px;

color: #000000;

但是需要注意的是,我们复制到Squarespace中的时候,一定要记得之前文字的标号,比如:h3{这里插入刚才复制的内容}。

UXD带你全面解锁Squarespace,经过实测这是最好用的

UXD带你全面解锁Squarespace,经过实测这是最好用的

下面有一个小动画展示代码改变字体的效果。将代码输入到左边的代码框中,右边的文字就发生了相应的改变。

UXD带你全面解锁Squarespace,经过实测这是最好用的

04 添加分栏底色

下面介绍一下如何加分栏底色。我们在Design栏中点开Colors选项,然后再对颜色进行修改。在修改分栏底色之前,我们需要对网站的配色方案进行修改,在Custom Colors中加入或改变你想要的颜色。

UXD带你全面解锁Squarespace,经过实测这是最好用的

在右侧浮窗的Edit Section中有Colors的选项,然后就可以在你编辑好的色彩模板中选择你想要的分栏设计版式。

UXD带你全面解锁Squarespace,经过实测这是最好用的

05 如何加轮播图

点击下图所示的标志,可以添加更多新的内容,轮播图的插入也是通过这样的方式。

UXD带你全面解锁Squarespace,经过实测这是最好用的

点击段落后,可以插入Carousel轮播图模板。

UXD带你全面解锁Squarespace,经过实测这是最好用的

在轮播图模板中,需要先将资源上传blog才可以加载自己的图片。第一步在Home栏中的Not Linked创建新的Blog,然后就新增一个你自己的Blog可以添加内容。

UXD带你全面解锁Squarespace,经过实测这是最好用的

点击Blog 1中的Settings更改其中的图片。

UXD带你全面解锁Squarespace,经过实测这是最好用的

在Options选项中,先移除预设的图片,再上传自己的图片。

UXD带你全面解锁Squarespace,经过实测这是最好用的

之后,就可以在相应的Carousel轮播图中添加相应的Blog 1了。

UXD带你全面解锁Squarespace,经过实测这是最好用的

更多知识干货以及其他海外留学的资讯可以关注UXD交互工业产品设计分享或者添加小助手,还可获取讲座直播哦~

UXD带你全面解锁Squarespace,经过实测这是最好用的

|福利大放送 | WELFARE 对于设计初学者,完成从0开始创作几乎是不可能的,就像学习过程中书读百遍其义自见一样。有了大量的积累,才能在脑海里建立素材库,这些素材库能帮助同学们完成最初的设计想法积累,基于这样的基础再进行个性化的创作,最终才能做出高质量的作品集。全球院校最新作品集免费拿!添加小助手即可获取:

UXD带你全面解锁Squarespace,经过实测这是最好用的

UXD带你全面解锁Squarespace,经过实测这是最好用的

UXD带你全面解锁Squarespace,经过实测这是最好用的

UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外,我们提供不定主题的公开课和内部小组课,教学计划课程由三大部分组成,包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。

UXD带你全面解锁Squarespace,经过实测这是最好用的

UXD带你全面解锁Squarespace,经过实测这是最好用的

UXD带你全面解锁Squarespace,经过实测这是最好用的

本文版权归UXD尤克斯所有

部分图片来自于网络

如有侵权请与我们联系

责任编辑: