感謝各位就是到705教室來參加就是下半場的一個就是演講那一樣就是大會提醒大家就是在演講開始之前把自己的手機頭前震動或者是靜音的模式那接下來的一個演講主題的話會是由溫蒂趙雲韻會大家帶來一個超神組的30秒測速適合你的附近那相信大家去知道Wolfers他提供很多就是不一樣的附近或者是外掛等等這些工具那其實不怕把他們的大家的選擇上其實也會考慮說到底他們的差異性在哪裡或者是用上去之後他的效能是不是有一些差異到底就是我現在要做網站的話什麼樣的一個附近或者是外掛才是適合現階段的我那其實的話待會的話溫蒂就會跟大家說就是到底有什麼樣的一個法則可以去困納出要用什麼樣的判斷技術來去選擇一個最適合自己的附近那我不需要邀請Wendy請大家一起掌聲哈囉 各位看的朋友大家好感謝主持人的介紹好 歡迎大家來到就是Wendy的免費彰舞現場欸 好像有點講錯齁其實真來到超審準30秒快速測出適合你的Synth跟工具們首先我先講一個我很切身之痛的一小故事了其實我在Wallpress的課字開發的模板的一個過程已經有四年之久然後早期我在幫這些品牌跟客戶幫他們在挑選模板或者是Synth的時候我發現你知道全世界有上千上萬的Synth不僅主題跟Temple I Can Un 做挑選其實選到後來真的是你發現你會生病因為你會有一種選擇障礙症所以接下來因為我有這樣子的切身之痛所以我用我的經驗談讓大家用輕鬆的方式快速找到最適合自己現階段開發的一些工具從此蓋網站就最多買一套工具就好那我這邊介紹一下我是誰我是CTKBroad的工程師Wendy謝謝謝謝然後我是專攻在Wallpress的課字模板設計上面然後以我UIUX設計以及前後端的開發雙清能力為客戶磨練出一件又一件兼具視覺跟邏輯的完美作品然後接下來大家就會很好奇我會用怎樣的方式幫大家介紹呢首先我會用一個很輕鬆的心理測驗讓大家做一個選擇然後最後透過這個測驗的結果幫大家挑選出四大的工具可以讓大家做參考好首先呢大家就用第一直覺的方式來選擇接下來的題目我這邊提供給大家四個品牌的LOGO第一個是Apple第二個AMDMB第三個Google第四個是90那這四個LOGO大家就會想說我要用怎樣的基準去選擇可以用兩種面向如果你是想要蓋網站的朋友你可以去想像說我的這個網站的個性跟風格跟這四個品牌哪一個是最接近的大家可以用這樣方式去選或者是說你沒有想要蓋網站的你如果就可以用自己的特色去選擇然後看哪一個品牌的特色最接近自己然後這時候我就會提供給大家15到20秒的時間去選然後這時候你可以跟你身邊的朋友互相交流一下你選擇哪一個品牌然後可以互動一下OK好 我們稍微倒數一下5秒好 4 3 2 1我們來公佈結果其實我會特別選出的是個品牌然後讓大家去做挑選跟選擇主要是因為其實我們一剛開始在設計一個網站在建置這個網站的時候我們一剛開始都會去想說我這個品牌的特色跟現在性有的一些品牌做一些連結性的一個相似的連想所以我透過這個品牌讓大家去有一些聯想性的發想然後接下來我們會一一的去介紹一些細節首先現場有選擇第一個Apple的朋友嗎你們舉手一下好不好還蠻多的耶1 2 3 4 5 6 7 7 88個朋友好 選擇Apple的朋友他其實給了就是追求一種精緻簡單的概念所以我推薦給大家這一套叫做DV Builder的一個工具OK嗎DV Builder這個工具他其實適合是所有的角色包含是設計師不會寫扣的朋友跟工程師都非常的適合那為什麼會這樣子講呢首先第一個他最大的特色是他的編輯性UI介面購買 然後你在學習的過程當中是比較快上手的然後再來是他購輕量所以你在編輯的過程中你不會說卡卡的不順暢然後前面有提到就是你不會寫扣的朋友你也可以拽拽的做出克制你的前端的開發然後再來是你在修改的過程當中你都會有返回的機會因為他有一個還原件可以讓你做調整然後再來就是如果你有價格上面預算上面的考量這邊是提供給大家參考那他的價格部分是比較高單價一點但是他有提供一個線上demo的一個網站可以讓大家做測試跟使用所以大家也不用擔心說會不會這個預算我買了反而不適合我用也不用擔心因為他有提供這樣子線上的demo網站原理然後接下來我會透過像這樣子的幾大特色透過影片的方式介紹給大家首先第一個他有一個很全域型的快門準設定他可以讓你快速的調整你的品牌色為什麼這個是很重要的一個特色就是每當你要在建置一個網站的時候你一定會想要例如說整個網站我的品牌色就是紅色紫色類似像這樣子的顏色設定他可以讓你快速的調整所以你不用會寫CSS或是你不用會寫H2O你也可以做到這件事情那我們可以看一下影片放大一下就是他第一筆旁邊有個Sync Option 裡面然後你會看到他有一個Color可以讓大家選擇然後他還有一些很全域性的一些設定包含了Social Media一些Link 設定還有Navigation 的設定然後你要在哪些頁面都使用這個DB Builder然後以及SEO的Head的一些設定上面他都提供給你一個很完整的Setting可以讓大家做慘烤然後再來第二個他可以讓你快速調整你中一人Head跟Footer的等等這些Module的樣式這邊看一下影片Sorry他影片有點low帥我直接跳下一個然後再來是他有一些長卷元素有一些後台的調整不好意思他有一些長卷的元素也提供給你在後台做調整我們可以透過剛剛看到有一個Module Option 的一個地方Module 的這個地方點擊就來他有很多元素可以讓你做調整包含圖片這邊範例提供給大家看這是圖片他有一些動畫效果的調整然後自己大小粗體斜體然後Tab、Slider等等的元素都可以提供給你做調整所以他是對於如果你是初學是設計師或是不會寫Code的人他是非常棒的一個選擇因為他提供給你非常多的元素可以做調整然後他還有提供給你各個產業類點的模板選擇那我們可以看到影片裡面他可以有一些很棒的設定當你剛開始在Load Layout的時候然後你可以看到他這邊有很多產業的類別包括有做時尚的或是做科技相關的選擇所以你也不用擔心說如果我今天是想要做服裝時尚的衣服類型的產業的你也不用擔心因為他裡面有提供還滿多套的類別模板可以讓你做Load Layout的效果進來然後可以讓你快速的調整再來是前面有提到就是他有一個視覺化的編輯性UI介面真的夠美然後他有一個很貼心的還原功能首先你看我要加一個元素我點了一顆加他每一個彈出視窗的效果都是彈跳都有一個小動畫那你覺得編輯起來是開心的然後再來看到右下角這邊都有一些還原鍵可以提供給你做還原的動作然後包含了你在還原或者是在編輯的過程中他的一個編輯的方式你會覺得是比較快速上手的因為他按鈕選項是少的因為我們接下來會介紹其他套的工具你會發現他的按鈕非常多你會覺得有點小小的複雜那他就不會D比他這一套視覺編輯器的UI介面設計得還不錯好,這是D比的一個幾大的特色然後接下來有人選擇是AMBNB的朋友嗎調查一下六位朋友然後選擇AMBNB的朋友呢因為我覺得他的形象就是他有提供給你非常多的一個防型可以讓大家去做一個諸任的動作所以我覺得他用他來形容一種獨一無二的裂粉可以專門克制出專屬你的一個模板然後我推薦給大家這一套叫做WP Bakery Patch Builder這一套呢他也是適用於給所有不會寫扣的朋友或是工程師設計師都非常的適合但是這邊有一個小小的前提就是因為他沒有所謂的黑的膚頭或是品牌色的設定沒有這種全域型的這種反型設定所以呢這時候你要自己想辦法的情況下設計師跟不會寫扣的朋友就會相對來講比較麻煩但是呢如果你是工程師或是網頁設計師你使用他你會覺得你會愛上因為他的克制程度是夠高然後再來是他從2008你就發行到現在所以他其實這一套的軟體他是發展相當的是成熟而且付費的這個布景主題都最愛使用他所以如果你現場有買過布景主題的積枯都是套用他們家的視覺畫邊機器那他價格呢是落在四十五塊美金相對來講那個地幣比較之下是比較親密的一點好我們介紹一下他有幾大特色喔第一個呢是他的克制程度彈性夠高然後他相容非常多的套件看一下影片在影片裡面我們看到就是他的視覺畫邊機器你會看到他提供給你非常多的按鈕一開始進來的人你會覺得有點confuse這些按鈕在幹嘛所以他的UX上面稍微比較需要花點時間學習然後再來是點擊的邊機之後你會看到他裡面有非常多的設定提供給你做調整像是Parallax或是圖片的選擇然後這些動畫的一些效果的選擇也非常的多然後Class 9的命名Margin Boulder就是肩跡上面的設定RWD的設定他其實五花八門這些設定都提供給你了所以我覺得他的克制程度彈性是真的非常的高然後再來他有提供給你很多的相同性的套件所以你也不用擔心就是說未來如果我選擇了WP BackerPage Builder會不會未來就是你想要再親身一些元件會很難親身不會因為太多人都有相容他就是很多這種套件的廠商他們都會為了他去再克制其他的元件出來提供給你然後再來是他提供給你非常多的元素跟模擬組可以提供你使用只是說你要自己想辦法組裝他們好我們看一下影片這邊加了一個元素畫面當中然後你會看到非常非常多的一個元件可以提供給你選擇包含UKONOS電子商務上關的元件或者是圖片Banner然後Google Home Max等等的這些元件可以提供給你選擇然後這些這些什麼Feature PradaEmily Prada這是我有在另外付費購買的國版他有在做一些這種克制的元件開發所以其實大概有用單元說未來我選擇他之後我在暗中寫他套件會不會有相容性的問題基本上是不對的他這一套是他做的滿成功的地方然後再來我這邊提到他是一種偽視覺化的編輯期他有一點不是所見其所的又稍微有一些落差可以看一下稍等一下影片的左半邊是我的那個後台的視覺化編輯期右半邊是前台顯示的畫面你看左半邊我其實實際上線的畫面應該要是三個並排但是實際上他是三個為一欄就是他其實還是編輯期跟前台的上線之後還是有纖維的落差所以呢如果你是非常經濟計到說我後台編輯期長怎麼樣我前台一定要長怎麼樣的人那他就會有一點小缺憾還滿可惜的那再來就是他沒有所謂的黑人膚色跟品牌色的這種全域型的設定所以這個你就必須要給自己想辦法然後這是我提供給大家翻譯是我有付費買了一個模板他就有提供給你黑人膚色的一些設定那如果說你沒有買预色者WPBakery Patch Builder他就沒有提供這樣子的服務給你所以如果你想要用他們家的支流畫面語氣等了但是你又想要克制黑人膚色跟品牌色的話你就要再另外找一些套件去輔助你達到這件事情好再來是選擇Google介紹一下Google有選擇Google的朋友嗎六位朋友選擇Google的朋友因為其實Google給人的產品的面上是非常廣的所以我用薩諾斯的這個概念來形容他就是擁有五大寶石就無限手套然後這個如果選擇Google的朋友推薦給大家這個Lomanto這個套件那這個套件他其實也是適合給所有的角色然後他最大的特色也是不用需要會選擇選擇扣念可以轉轉做出你的客製前端開發而且你可以隨時隨地客製你自己喜歡的版權包括黑德夫特甚至是連404的這種Aero Page都可以那他在價格的地方他是甚至免費的版本都可以提供給你所以如果一乾開始又遇上考量你想要測試看看各個工具的可能性的話可以從LomantoLomanto開始下手因為他提供給你一個免費的版本做使用那當然如果你使用了之後你覺得還不錯你給你花一點錢去購買他們家的服務他以戰術來做一個價格的挖費好 然後我們快速介紹一下他有幾大特色其實剛好有提到的黑德夫特的版型設定首先呢我稍微講一下Lomanto如果你先一乾開始買了朋友你裝了之後他立馬有個中文化的介面提供給你做調整這還滿親民的服務喔一定如果說你是對於英文沒辦法那麼快上手的人那Lomanto對你來講會比較親民因為他的中文化上面我來講提供的比較多好然後我們透過Lomanto的版型裡面你可以去新增黑德夫特然後到對應你想要的頁面上面建議版型然後這時候他就會提供給你幾個版型讓你做選擇我剛剛就是如果你是有付費的朋友才會有看到那些選項喔如果說你只是免費版就沒有這就比較可惜所以如果你確定要用Lomanto然後想快速改黑德夫特的人就是要稍微花一下錢就是這邊其實你會看到這邊所有的版型都是Pro版的那就是必須你要給花費的情況下才能使用那些版型的選擇然後再來是他有所謂的Channel is可以讓你選擇使用那他並不是每一套都是免費的他有部分付費的一些選擇性這是我從他的Channel揉出來之後你會看到右上角有些有Pro的一個標籤在上面就代表說因為這是Pro版本也必須要付費但是呢如果你是對於版型沒有那麼要求其實他免費版的就提供給你很多選項然後你做使用然後你選定了以後直接做下載然後接下來然後介紹他一個特色就是他很職員式的響應式設計編輯以及修改的記錄機制這個如果說你常常就是編輯的過程中常常容易打錯字或是常常編輯常常編輯到一個地方就是完了我想要回頭但是我不知道我要還原到什麼時候他有提供很棒的一個介面使用首先我沒看到他是RWD的一個編輯方式他一樣是用拖拉以及編輯而且很職員式的一些介面可以讓你做調整然後再來是剛剛提到的一個還原的功能還有一個修改記錄按鈕他會把你每一部前面做過的記錄都顯示在畫面當中讓你做點選跟還原的動作所以如果你編輯的過程中你發現完了我好像錯的太離譜我想要還原他還是有機會讓你還原而且是看得到每一部的然後再來是他有提供給你一些無conference相關的工具還有臉書的功能但是這個部分也是要付費的情況下才有的我們可以看一下我們可以看一下影片當中我們也是要low那個 elemental 的元素然後裡面有提供給你很多的東西讓你選擇包含無conference 相關的 element然後裡面可以選擇說我要加入公共車或者是我要選擇某一個產品等等的這邊都有一些想像讓你做快速的輕生元素然後甚至他有臉書的分享功能或是臉書的留言功能這時候你會想說欸這個這個有什麼好特別強調出來的呢因為如果一般我們的 warplace想要再興奮一個Facebook 的留言功能我們是要另外再裝套件的但是裝套件你會想說因為很簡單就找到想要的套件裝進去就好了但是你知道warplace 當你套件越裝越多的情況下那個網站的Loading是非常大然後對你整個使用者的體驗來講是不是那麼好所以建議大家如果說欸你裝的這個套件或是模範裡面就提供給你這樣子裡面處的服務給你你就不用另外的外在花時間然後多增加那個網站的Loading去裝這些套件好最後面呢提到他可以上傳客製化的自信檔案而且可以讓你貪心的選擇自信喔如果你是非常在意的自信然後 Google 的那個Google Fox 或者是Azobi Fox他沒辦法滿足你的人你覺得你首先就是有這些自信檔案就是想要用這些自信檔案的朋友那這個 Elemental 還蠻適合你的因為他就提供給你一個後台的介面讓你做行政跟上傳的動作所以大家可以透過影片看到他可以上傳很多網頁使用的自信檔案然後你可以應用在你想要的元素上面所以這個是對於剛剛我提到的你很要求就是你的自信檔案是你指定的情況下就非常的適合好這是以上我對於 Elemental 的介紹然後再來我們要介紹的是有選擇 Nike 的朋友嗎最後一個Nike三位朋友選擇 Nike 的朋友我們用 Nike 給人的形象是他同時可以很健康然後很時尚很收閒等等的面相所以我覺得他給人的形象是一種很欲望多然後我什麼都想要而且是追求高質感的概念然後這時候我推薦給您的工具叫做 Jupiter這一套這一套他其實是模板然後他使用這邊直接快速介紹他是一個模板然後他同時是仰賴了另外一個視覺化的編輯器叫做 WPBakery Pesh Pesh就有前面介紹第二套的工具那如果說他最大有一個很大很大的特色就是對於設計師來講有福利為什麼呢因為他提供給您的所有的模板都是有所謂的 PSD 檔案可以讓你直接載下來做設計模板做一些素材板型上面的調整然後甚至如果你如果現場有那種想要蓋電子商務的朋友然後你是對於電子商務的板型很精定計較你想要很刻刺的調整這些板型的人那 Jupiter 就相對來講非常的適合你因為他可以讓你快速調整電子商務的板型因為如果一般一般為什麼會特別強調呢一般我們想要調整烏康爾斯的 Chameleon我們是必須要自己可能扣比烏康爾斯的PhB 的 ChameleonSink 下面去做調整的但是 Jupiter 就不用他提供了一個視覺化的後台編輯7K 直接快速的調整他們然後價格的地方五金五十九塊相對其他套來講也是比較親密而已好 這邊快速介紹一下他的幾大特色喔首先第一個是他提供的模板都是非常有質感然後讓你安裝就是安裝了整個網站好 我們可以看到一下他的 Chameleon裡面有提供各式各樣的一個產業類別可以提供給你選擇然後你可以隨時的 Install然後大家可以看到這裡有一個 PSD 的按鈕他就是直接可以讓你快速下載 PSD 下來做調整所以這個就是對於如果你是很要求版型設計的人這個服務對你來講會還蠻不錯的然後再來第二大特色就是他有提供給你Footer 跟多格區塊的模板樣式調整然後我們可以從影片當中看到就是他這個是黑德的一個編輯器只是呢他比較小小的缺點是你看上面是他的浴欄黑德的編輯畫面然後你可以看到Logo,Menu然後加入購物車的按鈕門但是對於下面的編輯器來講你看全部都是浴欄的事你根本不知道你編輯的過程中跟實際怎麼落差這麼大就是你會覺得稍微沒那麼直覺一點這是我覺得他目前的一個小小的缺點然後他還有一個很大的特色可以讓你彈性選擇自行只是他舉現在提供給你的服務是 Google 房子跟 Adobe 的房子的服務然後再來他還有提供另外一個選項就是幾乎每台電腦都會有的自行選項然後當你選擇的過程當中你看到我選擇Google 房子的自行之後他是可以讓你去選擇哪些airmen去指定這個自行的所以你會覺得如果你是想要整個網站有好幾種自行變化的人這個服務對你來講會還蠻親民的可以讓你快速的去做調整然後神啊Google 的頁面有提供很客製化的是比如畫編輯調整這邊影片大家可以看到這是產品變表頁的編輯畫面可以很快速的調整這些按鈕然後自己大小按鈕的位置變化等等的產品的詳細頁也可以調你看自行的調整然後間距上面的調整都可以很快速的調出來只是他的界面很 PSD很 Photoshop 的界面所以如果你是對於 Photoshop比較熟悉的人可能對於這一套軟體會比較快速上手一點然後講了這麼多工具上面的分享最後面我來一個小小的總結以上四套軟體其實工具都非常適合給所有現場不管你是不會選扣的朋友設計師工程師都非常的適用只是剛剛有提到的 WPBakery Patch Builder它會比較適合給網頁設計師或是工程師來使用然後再來RWD Chamberlain 的使用上面是每一套都有所以大家都不用擔心那如果你是想要快速的全域性設定像是 Head of Footer 品牌色跟自行的設定上面WP Bakery Patch Builder它就弱了一點其他套都是 OK 的然後再來剛剛有提到的WuCommerce 的版型樣式調整上面最推薦的還是 Julliter然後再來次要可以給大家選擇調整的就只有 DB 跟 Elemental然後最後面呢如果你是對於想要快速的會上手這個視覺畫邊機器的人會推薦給大家是 DB 跟 Elemental然後價格部分可以提供給大家參考喔DB 的畫價位是稍微偏高了一點然後再來 Elemental也是稍微貴一些最後面呢大家就會想說啊那這幾套在相容這個套件的情況下面如何呢首先呢以最知名的第一套WuCommerce 電子商務它是有相容的所以大家不用擔心再來是 WPNL就是所謂的多餘性的一個套件所以你要做跨國網站這幾套也都是沒有問題的然後如果呢最後面你是想要客製開發你的欄位的朋友SES 這一套它的相容性也是沒問題的然後最後面跟後面只要介紹了這麼多的工具其實就是要督促大家快點去行動喔那這邊我還是有稍微簡單的快速分類一下如果你是想要快速挑針為品牌特色的網站的朋友DB Elemental 跟 Jubit這三套都非常適合你那如果你是想要快速的學習這個視覺畫邊體器的人DB Elemental 這兩套就是非你莫屬啦然後如果你是想要快速調整你的客製畫面只剩一個朋友那Jubiter它是你的滿好的選擇喔那如果你是想要超客製調整你的網站的推薦那WPBackery Patch Builder這會是你的正家節好喔然後以上介紹希望大家如果有什麼樣的問題都可以詢問我喔謝謝大家其實我會特別推薦這四套工具喔最主要的原因是因為其實我使用過他們這四套他們的這個開發是相當的成熟不管是在介面上面或者是在在資源上面他們的開發是相當成熟的喔因為呢首先第一個他們發現得相當喊錯所以如果如果沒有任何的問題你都可以直接透過線上來詢問他們的然後再來是呢這幾套呢其實很多很多套件他們都相容所以推薦特別特別推薦這四個工具給大家就是希望未來大家在選擇在蓋網站的時候都可以用這四套去做靈活的變化而且因為這四套就可以蓋出非常多的網站所以大家就不用在那邊想說我就是要快速的買一個模板回來然後還要重新的學習每一套模板操作的介面那這四個工具它就可以讓你快速的帶出你無限個網站的可能性在然後從此你就是只要學一套你就可以帶出很多網站的可能你好其實還是會根據你的需求那如果說你對這對於這四套的工具呢使用上面都已經非常的熟悉了那你其實就用這四套去做蓋網站就可以了來做你們的不僅主題做使用因為它提供Tamela去做下載跟修改那其實如果你覺得這幾套就夠你使用你就不需要再特別再花錢再買其他的模板但其他部分的模板還是有更多的可能性例如說你想要快速蓋出來然後這個品牌或是這個客戶他就是想要這個網站的風格你只是買回來蓋蓋文字蓋蓋圖片那可能你花一點錢然後花一點時間學習一下它的後台的操作方式這也是可以的但是如果你已經對這四套工具任何一套非常熟悉的其實不大需要再花錢買模板跟那些不僅主題這個問題這四套可不可以一起用呢他們是可以一起用的我還真的實驗過我通常裝了這四套而且我還特別花錢買四套回來同時使用它是同時真的可以使用只是你的後台介面會稍微比較混亂一點因為會非常多的按鍵可以讓你做切換跟編輯所以如果如果真的有人花了大筆錢買我這四套同時安用同時使用是沒有問題的你是說這四個工具這四個工具它其實有分讚跟如果以第一筆來講它是它有分一年的八十九塊本金那如果你是想要接案的人如果你未來想要接案你想要快速建置很多很多網站的話可以建議買多限制的這個價格那如果是Backery WVBackery Patch Builder跟Jubiter他們就是一次性的價格然後如果是Elemental Patch Builder的話它就是贊助為單位那這邊價格就是提供給你做參考謝謝就現在就是我們公司的QR Code如果對於我有興趣或是對我們公司有興趣的人可以透過QR Code稍微進來那如果有想要私訊我的話可以參考我的Facebook的連結WDWendy44919Wendy44919可以私訊我好謝謝大家謝謝