我們的強迫症婚禮(官方網站)首頁

嗨，我是再度來搞威的新郎~~

上一篇介紹了WIX大致的架構跟功能以後，我們要開始來逐頁說明囉.

網址再來：http://tommyandlori.wixsite.com/tommyandloriswedding

最近發現其實頗多人使用這網站，看來跟我一樣吃飽太閒的人還真不少哈哈~~

看到別人分享的感覺有點奇妙，原來大家發現的功能都不太相同實在長知識.

大過年的就別太多廢話，就讓這篇的前言破紀錄地短，直接開始吧!!

頁首

這是固定出現在每個子頁上方的，如果決定要每頁不同背景，那顏色就很重要.

如果有人還記得的話，我的愛用色是黑/粉紅色，但整個網站只有這兩個很乾.

於是用白色來點綴，又我早就決定首頁背景要黑色了，所以就成了白+粉紅.

總共由5個元素組成，Logo用英文名包夾，最外層是像引號的內建圖形.

喜歡加什麼都可以，只要記得善用左列選單第二個插入功能即可 (Shape類).

為了初開網頁的驚喜感我用了動態Logo，選用Puff-in類似由外往內壓的效果.

滑鼠移到每個不同選項都會自動秀一遍動態，應該夠您慢慢選慢慢玩.

如果您的控制慾很強，強到需要掌握動態的快慢/節奏，那請再深入調整.

選擇Customize (訂製) 可調，就不一一解釋，嘗試按按看就懂了~~

至於我們兩人的英文名我倒是搞了頗久，因為字母數不同，但又想要平衡.

插入文字後可以開始調主題/字體/字級/效果/字距/行距…等，跟office很像.

總而言之，就是愛怎麼放就這麼放，但其中有發現客製化自由度也不是百分百.

比如說，內建圖形比例無法修改，只能等比縮放. 無法拉成特別細長或粗短.

呃..這樣形容好像怪怪的，反正上述兩種形狀應該都不是特別好用沒差啦~~

頁尾

這部分我從最容易/直觀的部份反著說好了 (沒有要跳著說).

正中間最下方的文字非常簡單，就插入文字方塊即可，再把字級調小小小.

這個部位通常最嫩，噢不.. 是最雞肋，可有可無，一般拿來放版權聲明.

但其實這也不是我的網站何來版權，所以就簡單放了年份跟作者意思一下.

兩側底部的FB like & FB分享基本上出自相同的插入選項”social類”.

FB分享就長這樣，沒得選樣式. 倒是可以自訂文字跟分享出去的頁面.

FB like 稍有不同，有幾種樣式可選，文字就二選一：喜歡 or 推薦.

但字體，很抱歉，沒有中文.. 不然您以為我沒事語言幹嘛不統一呢呵呵~~

以上兩個都可以另外調整動態呈現方式，但誠心誠意的建議不要太多動態.

重點呈現才是王道，同時一堆東西在動沒有重點，搞不好會以為有蟲在銀幕爬..

正中間年份作者上方的兩個”f”字樣分別是我們倆的FB.

一樣從”social類”插入後，點選”Set Social Link”就可以進階設定.

“+ Add Icons”可以插入各種社群相關圖示，應該沒有漏網之魚.

FB相關的就這幾種，有點單調，重點是不能另外調色，也許有使用限制.

另外還可以調整大小/空白間距/排列方向，這個就比較沒那麼多選擇.

最後，是整齊排列的5個音樂播放器. 配音樂就配音樂，沒事弄一堆幹嘛!?

就說我吃飽太閒咩~~ 我搞了5種語言：韓/中/日/英/台，預設韓文.

其實應該要6種才對還有粵語啊~~ 應該要加入鄧紫棋的《黑鳳梨》才對.

看您心情喜歡哪種就播哪種，看官網配不同主題曲各有不同的感受呀~~

除了語言的因素以外，還有顏色. 我用了黑色/白色/灰色/深粉/淡粉.

我可沒犯規，灰色也是黑白混合而來，還是恪守黑/白/粉的三色基底.

從”Music類”挑選插入，這幾種配色是我配好的您應該是比較清淡的.

點選”Change Track”即可叫出音樂庫畫面.

選擇”Upload Tracks”就可以上傳mp3囉~~ 沒錯，請先準備好想放的檔案.

接著調整曲名/演唱者/自動播放與否/重複播放與否/音量.

然後是呈現外觀，相信我範本的一定滿足不了您，請按”Customize Design”.

依序可調整樣式/填色/邊框/圓角/陰影/字色，慢慢玩很有趣的~~

所以上排三個我分別把「邊框/文字/底色」用「黑/白/粉」排列組合了一下.

下排兩個再用「灰/淺粉」交替使用，沒辦法，非得要平均分配才舒服啊~~

---------------以上是常駐的頁首/頁尾；以下是各主頁面介紹---------------

首頁

一個網站的靈魂絕對是首頁，首頁可以左右使用者的停留時間.

某些傳產網頁讓人看了退避三舍/不忍卒睹 (就放過我別問是哪家了吧..)

可以難受到讓人以為誤點馬上關掉，網頁停留時間大概不到一秒.

如果突然多幾秒那應該是愣住或突然電話響/開水滾/嬰兒哭之類的.

首頁應該是要傳達整個網站的精神與重點，除了要美觀以外千萬不能貪心.

過多的資訊沒有神秘感，而且顯得雜亂無章. 如果想看範本的話請看各大購物網.

好吧我知道您懶得查，請看其中的翹楚http://shopping.pchome.com.tw

首先我們來看看頁面的配色，為了帶點神秘感所以背景採用全黑色當底.

頁面想呈現甜蜜的氛圍，所以先拉了粉紅色塊當骨幹準備填肉.

粉紅色塊外的白框是意外的神來一筆，想不到效果還不錯.

接著是內容，婚紗照輪播 + 3大主要頁面連結.

婚紗照輪播選用”Gallery類”插入，我選的是”Slider (Hollywood)”.

點選”Change Images”可以上傳想輪播的照片，右側可改名稱/描述/連結.

點選”Setting”可調整左右鍵/播放鍵/自動播放與否/間隔秒數/裝置變換效果/

點選開啟效果/動態效果/持續秒數/動態方向.

示意一下我調整後的效果，箭頭調細了些、滑過時加了淡粉紅底色辨別.

為了與下方3個連結按鈕區隔，我在它們中間加了分隔線.

但只有分隔線有點無聊，我用了愛心Icons橫排，再增添一些甜蜜感.

(跟頁首的引號符號一樣從左列Shape類別挑選插入)

最後是3大連結按鈕，從左側”Button類”選用.

選”Change Text”可修改名稱，再點迴紋針圖示可修改連結頁面.

點選”Design”可調整樣式，一樣請按”Customize Design”

依序可調整樣式/填色/邊框/圓角/陰影/字色，跟剛剛塞音樂播放器一樣的~~

比較特別的是可以多調整滑鼠滑過時改變的底色與字色.

然後，首頁到這裡就大功告成了!!

最後讓我們先來比較一下修改前後，其實照片輪播區塊是原本範本就有的.

分隔線也有，只是我把莫名其妙的魚鱗拿掉、線條改成了愛心.

連結按鈕也有，我把3個調成等大，連結頁面改成了我認為較重要的.

說這個幹嘛!? 我想表達的是，其實我也是邊改邊想，用既有元素夾縫中求生存.

前面講得好像很有規劃，事實是且戰且走，而且概念大部分也是沿用範本.

但如果我不告訴您，您看得出來兩個頁面有關聯嗎?? 如果可以您真是火眼金睛.

所以別畫地自限，做就對了~~ 生命會自己找到出路的!! (別理我我在自慰..)

想不到光首頁又佔了整篇，細節都介紹的差不多了後面應該不用再囉唆.

好吧，下次見~~