同學(xué)們在制作作品集的時(shí)候，為了有更豐富的展現(xiàn)個(gè)人設(shè)計(jì)的方式，搭建個(gè)人作品集網(wǎng)站絕對是一個(gè)不二的選擇，但是如何快速搭建個(gè)人網(wǎng)站成為了很多同學(xué)撓頭的事情。

建站工具有很多，比如WordPress，Wix……但是經(jīng)過UXD導(dǎo)師們的長期實(shí)測，可以很負(fù)責(zé)地告訴同學(xué)們：“Squarespace榮升為最好用的建站工具沒有之一”。

注：UXD為所有內(nèi)部學(xué)員提供免費(fèi)的建站一對一輔導(dǎo)，有需要的同學(xué)可以直接聯(lián)系教務(wù)老師獲取課程排期和技術(shù)支持。

本文，UXD將從如何注冊、如何編輯內(nèi)容、如何改變字體和顏色、如何加分欄顏色和如何制作輪播圖，這五個(gè)方面介紹Squarespace的使用方法。

01 注冊賬戶

在Squarespace主界面的左上角有LOG IN的登入口，可以用郵箱創(chuàng)建一個(gè)新用戶，注冊你的Squarespace賬號。

注冊完之后，你就可以根據(jù)自己的意愿選擇你想制作的網(wǎng)站類型了，例如下圖選擇Portfolios之后，就會有對應(yīng)的模板供你制作。

02 添加/編輯內(nèi)容

進(jìn)入模板后，左側(cè)為菜單欄。菜單欄中的選項(xiàng)主要用來調(diào)整網(wǎng)頁的組織架構(gòu)，設(shè)計(jì)網(wǎng)頁的配色、字體等參數(shù)。

點(diǎn)擊Pages進(jìn)入下圖所示的兩個(gè)板塊。Main Navigation可以調(diào)整頂部的導(dǎo)航欄；Home選項(xiàng)可以調(diào)整首頁。

接著，選中Home頁面，點(diǎn)擊Edit對頁面進(jìn)行編輯。

點(diǎn)擊頁面上有修改標(biāo)記的地方即可對相應(yīng)內(nèi)容進(jìn)行調(diào)整。

點(diǎn)擊頁面間的加號可以添加內(nèi)容。

添加內(nèi)容可以包含圖片、視頻、文字、鏈接等。

同時(shí)還可以在模板內(nèi)部繼續(xù)添加內(nèi)容。

可添加內(nèi)容如圖所示，包含文字、圖片、視頻、引用、鏈接等，形式非常豐富。下圖所示就是可以添加材料的所有形式。

當(dāng)我們需要對整個(gè)面板進(jìn)行調(diào)節(jié)的時(shí)候，可以選擇右側(cè)的浮標(biāo)對面板進(jìn)行編輯、復(fù)制、上下移動的操作。

03 改變字體和顏色

在Squarespace中更改字體風(fēng)格、大小、顏色都是通過代碼進(jìn)行操作的。雙擊模板中的文字可以修改內(nèi)容。右擊會出現(xiàn)Inspect字樣，如下圖所示，打開代碼面板。

進(jìn)入到代碼模板后，需要點(diǎn)擊下圖中圈出來的按鈕，才可以獲取網(wǎng)頁代碼，選擇元素并查看和復(fù)制代碼。

當(dāng)我們的鼠標(biāo)移動到想要查看的文字，就會有對應(yīng)的信息顯示在屏幕上。

比如，這里的字體是h3，顏色是黑色。同樣的，在右邊的代碼框中也會有相應(yīng)的信息顯示出來。

記住這里顯示的信息，然后回到Design面板，點(diǎn)擊CSS面板，對你需要修改的字體進(jìn)行代碼的編輯。

點(diǎn)擊CSS面板后，下方就會有一個(gè)代碼框，在這里，我們可以將相應(yīng)的代碼進(jìn)行粘貼或者編寫。

比如，我們想把自己已經(jīng)編輯好的文字代碼信息轉(zhuǎn)移到Squarespace中。以Figma為例，在Figma頁面的右側(cè)也有相應(yīng)的代碼。點(diǎn)選相應(yīng)的文字，點(diǎn)擊Inspect，就可以查看代碼。

然后，直接復(fù)制這一段代碼到Squarespace的代碼填寫框中。

font-family: PingFang SC;

font-style: normal;

font-weight: normal;

font-size: 72px;

line-height: 101px;

color: #000000;

但是需要注意的是，我們復(fù)制到Squarespace中的時(shí)候，一定要記得之前文字的標(biāo)號，比如：h3{這里插入剛才復(fù)制的內(nèi)容}。

下面有一個(gè)小動畫展示代碼改變字體的效果。將代碼輸入到左邊的代碼框中，右邊的文字就發(fā)生了相應(yīng)的改變。

04 添加分欄底色

下面介紹一下如何加分欄底色。我們在Design欄中點(diǎn)開Colors選項(xiàng)，然后再對顏色進(jìn)行修改。在修改分欄底色之前，我們需要對網(wǎng)站的配色方案進(jìn)行修改，在Custom Colors中加入或改變你想要的顏色。

在右側(cè)浮窗的Edit Section中有Colors的選項(xiàng)，然后就可以在你編輯好的色彩模板中選擇你想要的分欄設(shè)計(jì)版式。

05 如何加輪播圖

點(diǎn)擊下圖所示的標(biāo)志，可以添加更多新的內(nèi)容，輪播圖的插入也是通過這樣的方式。

點(diǎn)擊段落后，可以插入Carousel輪播圖模板。

在輪播圖模板中，需要先將資源上傳blog才可以加載自己的圖片。第一步在Home欄中的Not Linked創(chuàng)建新的Blog，然后就新增一個(gè)你自己的Blog可以添加內(nèi)容。

點(diǎn)擊Blog 1中的Settings更改其中的圖片。

在Options選項(xiàng)中，先移除預(yù)設(shè)的圖片，再上傳自己的圖片。

之后，就可以在相應(yīng)的Carousel輪播圖中添加相應(yīng)的Blog 1了。

更多知識干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計(jì)分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE ?對于設(shè)計(jì)初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學(xué)們完成最初的設(shè)計(jì)想法積累，基于這樣的基礎(chǔ)再進(jìn)行個(gè)性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費(fèi)拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計(jì)學(xué)院是尤克斯國際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計(jì)專業(yè)的頂級設(shè)計(jì)學(xué)院。除了一對一設(shè)計(jì)課、基礎(chǔ)技能課程、小組課題、設(shè)計(jì)評圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計(jì)劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計(jì)理論系統(tǒng)講座、申請必備知識解析等。

本文版權(quán)歸UXD尤克斯所有

部分圖片來自于網(wǎng)絡(luò)

如有侵權(quán)請與我們聯(lián)系