2018年7月 - 10個用Elementor 建置的WordPress網站 - 好站資訊分享

2018年7月 – 10個用Elementor 建置的WordPress網站 – 網站設計靈感

原文來自:Elementor官方網站 | 本文採用WordPress Gutenberg撰寫

本文除了原文翻譯,我們也會補充一些我們自己的看法,希望對於需要設計靈感以及還在入門階段的朋友們有幫助。範本網站的連結都在標題中,你可以直接點標題連到你想看的範本去。


10. 房地產公司網站:GOOD FAITH MANAGEMENT

房地產網站設計靈感

Good Faith Management是一家來自印第安納州Goshen的房地產代理商,為房主提供出售房產的機會,無需事先進行維修或在市場上上市數月。這是面向銷售的網站的一個很好的例子。全角度英雄部分具有引人入勝的營銷信息和明確的號召性用語按鈕。黑色和黃色配色方案有助於突出整個頁面中的營銷信息和號召性用語框。

Google翻譯真心不行~還是自己翻譯好了… XD 

Good Faith 是一間位於美國的房地產仲介公司,Elementor推薦他們的原因:

  1. 首頁採用鮮明的大標題,明確告知來訪的user你應該要做什麼事情,也就是我們前一篇文章講到的:如何製作 Call to Action (行動呼籲按鈕) 提高你的網站轉換率,Call to Action的另一個標準的應用,由於現代人大多忙碌,也沒有太多時間閱讀不相關的資訊,因此,現在這類的作法算是非常標準的一種應用方式。
  2. 強烈的雙色搭配,讓整個網站視覺統一,不會讓人感到混亂。如果你有顏色搭配障礙的話,這裏也能給你參考:顏色搭配網站推薦
  3. 每個頁面都有著相同的設計,網站也很明確的只提供了對來訪的訪客重要的資訊,並沒有太多複雜的流程,唯一美中不足的地方是當轉換到手機版頁面瀏覽時,頁面上方的表格就變太寬了。XD
  4. 網站下方有明顯的聯繫我們按鈕,讓來訪的訪客能夠快速的跟網站聯繫,這點加分,如果你也正在設計你的網站,請切記不要忽略這個小工具喔,他會替你帶來不少轉換。

9. 一頁式網站:IDO Laish

一頁式網站設計靈感參考

這網站被收錄的原因很簡單,作者透過幾個精心設計過的圖搭配明確的邏輯,讓來訪的人都能夠很專注的瀏覽。而裡面的特效會讓你彷彿有跟著他們去旅行的感覺。

其實相同的邏輯也能夠套用在許多不同的產業上,你可以在你的網站內另外製作一個獨立的頁面(Landing Page),透過流程導引設計,讓你的訪客能夠專注看完你想讓他看的資訊。例如這套邏輯能夠用在各種產業中,推廣你近期的活動,讓大家彷彿身處在當地,再來看看另一個範本:GoHero


8. 設計公司網站:KORYTKO DESIGN

設計公司網站參考 - WordPress

位於德國的Korytko Design,主要提供:網站視覺設計、藝術品設計以及品牌規劃。他們的網站風格很符合他們的客戶群,簡潔且專業,首頁的Portfolio設計的很漂亮,搭配滑鼠移動過去的字體,都會讓你想要每個都點一下。

** 有空的話,每一個專案都點一下,他們每個專案的分頁都精心設計過,很值得參考。延伸參考:Impreza Portfolio Theme


7. 建築建材行業網站:TARTAK IZBICA

建材、建築行業網站靈感參考

Tartak Izbica 是位於波蘭的一家建築建材公司。要透過網站來呈現他們公司的專業度其實有一定的困難度,但這家公司在電腦版頁面的頁首使用影片當作背景,呈現他們處理木材的流程,讓訪客在第一眼就能明確的看到他們的機具,工作流程,大大提高第一眼的信任度,這點很值得推薦給新手們學習,唯一要特別注意的是,若要在背景上傳影片的話,請務必注意影片的大小。


6. 平面設計個人工作室網站:JORGE BARRAGAN

個人工作室網站範例

位於美國LA的 Jorge Barragan是以為平面設計師,他們的網站有幾個特點很值得大家參考學習:

  1. 頁首開頭很明確的介紹本人的名稱,加深印象。
  2. 網站溝通流程明確:自我介紹 – 關於我 – 所提供的服務 – 作品集 – 客戶的推薦 – 聯繫我們表單。 整個流程明確清楚,讓有需要的客戶能夠很快速的掌握。
  3. 每個段落都加上了活潑的設計波浪邊緣設計,搭配漸層以及浮動的背景,在瀏覽時不會感覺到枯燥乏味,無形中也增加了信任度。

PS: 漸層這件事,如果你不是平面設計專業的話,建議還是交給專業的來吧。


5. 網站設計個人工作室:VH DESIGN

個人工作室網站範本

VH Design 這間工作室使用了Elementor外掛系列中的特效功能,例如 動態文字特效/Blend Mode,讓網站的圖片凸顯出來,整體製作難度不高,很適合新手學習。


4. 部落格教學網站 CODEINWP

部落格教學網站

 Code in WP 在WordPress業界有相當知名度的部落格網站,網站內提供了大量的知識型態文章,例如如何製作自己的部落格/網站設計/行銷知識/主機選擇等等…平均來說,這個網站每個月都有超過150,000的瀏覽人次,很驚人。

如果你也想替自己建立一個知識型的網站,英文也不錯的話,可以去他們那裏走走看看,相信能獲得一些不錯的收穫。如果還不懂如何架站的話,你可以在這裡先看看:使用WordPress架站的三個理由

如果不想自己來,也很歡迎直接委託給我們處理:WordPress學習筆記


3. 建築設計公司網站:ARKY

室內設計公司網站靈感參考

Arky是一間位於厄瓜多的建築設計公司,他們採用了雜誌很常使用的Duotone風格,網站採用一頁式設計邏輯,很明確的讓網站訪客能夠知道要去哪個位置看資訊,如果時間有限,又需要一個形象網站的話,這種設計邏輯也很適合參考。

Duotone,中文是雙色調的意思,一種歐美雜誌慣用的設計風格。同時Duotone也是指在印刷中用特定幾種(通常是2種)墨水疊印來實現整張圖片的效果。

延伸閱讀:如果不知道什麼是Duotone, 可以到這裡來玩:Duotone Factory


2. 顧問公司網站:WPELEVATION

顧問業網站範例

WPelevation 是一間做線上顧問以及學習的網站,由WordPress的導師Troy Dean所建立,他們致力於讓更多的freelancer個人接案工作者以及設計師能夠從接案變成建立自己的事業,內容多元,包含了文章、Podcast、影片等。如果你也想讓自己的事業升級,也可以到他們這裡多多參考閱讀。

PS: 這個就是他們替合作夥伴打廣告啦~XD 不過內容的確不錯,推薦大家去看看。


1. U/X設計、品牌視覺設計公司:SMART CHAMELEON

視覺設計網站靈感參考 - WordPress

位於西雅圖的Smart Chameleon 是一間U/X,網站以及品牌視覺設計公司,他們在網站內使用了大量的Elementor的特效,包含Animated Headline、Flipbox等特效,當然還包含了浮動式的滑塊模組,如果你本身就是創意產業的夥伴,這個網站也很值得你參考。


想要獲得更多的資訊?

遇到困難?那直接問我好了

Leave a Comment

Your email address will not be published. Required fields are marked *