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

好讀網誌版
http://ppinkandbblack.blogspot.tw/2017/01/blog-post_95.html


嗨，我是再度來搞威的新郎~~
上一篇介紹了WIX大致的架構跟功能以後，我們要開始來逐頁說明囉.
網址再來：http://tommyandlori.wixsite.com/tommyandloriswedding

最近發現其實頗多人使用這網站，看來跟我一樣吃飽太閒的人還真不少哈哈~~
看到別人分享的感覺有點奇妙，原來大家發現的功能都不太相同實在長知識.
大過年的就別太多廢話，就讓這篇的前言破紀錄地短，直接開始吧!!



頁首

這是固定出現在每個子頁上方的，如果決定要每頁不同背景，那顏色就很重要.
如果有人還記得的話，我的愛用色是黑/粉紅色，但整個網站只有這兩個很乾.
於是用白色來點綴，又我早就決定首頁背景要黑色了，所以就成了白+粉紅.
總共由5個元素組成，Logo用英文名包夾，最外層是像引號的內建圖形.
http://imgur.com/MBZRmNn

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

為了初開網頁的驚喜感我用了動態Logo，選用Puff-in類似由外往內壓的效果.
滑鼠移到每個不同選項都會自動秀一遍動態，應該夠您慢慢選慢慢玩.
http://imgur.com/isJTBSG

如果您的控制慾很強，強到需要掌握動態的快慢/節奏，那請再深入調整.
選擇Customize (訂製) 可調，就不一一解釋，嘗試按按看就懂了~~
http://imgur.com/SwrutYe

至於我們兩人的英文名我倒是搞了頗久，因為字母數不同，但又想要平衡.
插入文字後可以開始調主題/字體/字級/效果/字距/行距…等，跟office很像.
http://imgur.com/M8pKGBW
http://imgur.com/vmAoUdZ

總而言之，就是愛怎麼放就這麼放，但其中有發現客製化自由度也不是百分百.
比如說，內建圖形比例無法修改，只能等比縮放. 無法拉成特別細長或粗短.
呃..這樣形容好像怪怪的，反正上述兩種形狀應該都不是特別好用沒差啦~~



頁尾
http://imgur.com/mKhZw4l

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

正中間最下方的文字非常簡單，就插入文字方塊即可，再把字級調小小小.
這個部位通常最嫩，噢不.. 是最雞肋，可有可無，一般拿來放版權聲明.
但其實這也不是我的網站何來版權，所以就簡單放了年份跟作者意思一下.
http://imgur.com/7FDp2fp

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

FB分享就長這樣，沒得選樣式. 倒是可以自訂文字跟分享出去的頁面.
http://imgur.com/8AZwnHH

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

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

以上兩個都可以另外調整動態呈現方式，但誠心誠意的建議不要太多動態.
重點呈現才是王道，同時一堆東西在動沒有重點，搞不好會以為有蟲在銀幕爬..


正中間年份作者上方的兩個”f”字樣分別是我們倆的FB.
http://imgur.com/3hCBBzf

一樣從”social類”插入後，點選”Set Social Link”就可以進階設定.
http://imgur.com/wDmyRSg
http://imgur.com/EE3EyJY

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

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

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


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

就說我吃飽太閒咩~~ 我搞了5種語言：韓/中/日/英/台，預設韓文.
其實應該要6種才對還有粵語啊~~ 應該要加入鄧紫棋的《黑鳳梨》才對.
https://www.youtube.com/watch?v=YWZFogngKA4

看您心情喜歡哪種就播哪種，看官網配不同主題曲各有不同的感受呀~~
除了語言的因素以外，還有顏色. 我用了黑色/白色/灰色/深粉/淡粉.
我可沒犯規，灰色也是黑白混合而來，還是恪守黑/白/粉的三色基底.

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

點選”Change Track”即可叫出音樂庫畫面.
http://imgur.com/2rw6ryl

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

接著調整曲名/演唱者/自動播放與否/重複播放與否/音量.
http://imgur.com/8ueaCrU

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

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

所以上排三個我分別把「邊框/文字/底色」用「黑/白/粉」排列組合了一下.
下排兩個再用「灰/淺粉」交替使用，沒辦法，非得要平均分配才舒服啊~~



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



首頁

一個網站的靈魂絕對是首頁，首頁可以左右使用者的停留時間.
某些傳產網頁讓人看了退避三舍/不忍卒睹 (就放過我別問是哪家了吧..)
可以難受到讓人以為誤點馬上關掉，網頁停留時間大概不到一秒.
如果突然多幾秒那應該是愣住或突然電話響/開水滾/嬰兒哭之類的.

首頁應該是要傳達整個網站的精神與重點，除了要美觀以外千萬不能貪心.
過多的資訊沒有神秘感，而且顯得雜亂無章. 如果想看範本的話請看各大購物網.
好吧我知道您懶得查，請看其中的翹楚http://shopping.pchome.com.tw


首先我們來看看頁面的配色，為了帶點神秘感所以背景採用全黑色當底.
頁面想呈現甜蜜的氛圍，所以先拉了粉紅色塊當骨幹準備填肉.
粉紅色塊外的白框是意外的神來一筆，想不到效果還不錯.

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

婚紗照輪播選用”Gallery類”插入，我選的是”Slider (Hollywood)”.
http://imgur.com/AcuzROh
http://imgur.com/SM41WBK

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

點選”Setting”可調整左右鍵/播放鍵/自動播放與否/間隔秒數/裝置變換效果/
點選開啟效果/動態效果/持續秒數/動態方向.
http://imgur.com/5YeFFBv
http://imgur.com/hV77meX

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


為了與下方3個連結按鈕區隔，我在它們中間加了分隔線.
但只有分隔線有點無聊，我用了愛心Icons橫排，再增添一些甜蜜感.
(跟頁首的引號符號一樣從左列Shape類別挑選插入)
http://imgur.com/QBNP4yY


最後是3大連結按鈕，從左側”Button類”選用.
http://imgur.com/Wi0XNax

選”Change Text”可修改名稱，再點迴紋針圖示可修改連結頁面.
http://imgur.com/s19jftE

點選”Design”可調整樣式，一樣請按”Customize Design”
依序可調整樣式/填色/邊框/圓角/陰影/字色，跟剛剛塞音樂播放器一樣的~~
http://imgur.com/XEOpYJQ

比較特別的是可以多調整滑鼠滑過時改變的底色與字色.
http://imgur.com/LEyXbY2

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


最後讓我們先來比較一下修改前後，其實照片輪播區塊是原本範本就有的.
分隔線也有，只是我把莫名其妙的魚鱗拿掉、線條改成了愛心.
連結按鈕也有，我把3個調成等大，連結頁面改成了我認為較重要的.
http://imgur.com/PdBOpwX
http://imgur.com/vb2ktd8

說這個幹嘛!? 我想表達的是，其實我也是邊改邊想，用既有元素夾縫中求生存.
前面講得好像很有規劃，事實是且戰且走，而且概念大部分也是沿用範本.
但如果我不告訴您，您看得出來兩個頁面有關聯嗎?? 如果可以您真是火眼金睛.
所以別畫地自限，做就對了~~ 生命會自己找到出路的!! (別理我我在自慰..)



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

--
粉紅黑 https://www.facebook.com/pinkanblack/

--