在之前的文章,我們大量的介紹如何使用 SEO 策略建立流量,以及將流量轉化成收入的一些方法,像是 Google Adsense 或是聯盟行銷。
接下來,如果你想要讓你的網站更具吸引力,看起來更專業的話,我們需要學一點「網站設計」。
網站設計就像是店面的實體裝潢,例如,進入咖啡廳,迎面而來的是白色牆面和綠色植物,乾淨透亮的落地窗,門口旁邊種著綠色植物,讓空間充滿了生氣和活力,還沒喝咖啡就吸了芬多精。
大叔覺得,每個人都可以用 WordPress 來學習網路創業、網站賺錢,而 Elementor 是用來打開 WordPress 的大門。
Elementor 網頁編輯器可以簡單快速打造專業網站,而且不需要有任何的程式設計能力,適合多數人來學習使用。
在這篇文章中,大叔會教你 Elementor 的一些基礎應用技巧,讓你能夠輕鬆打造出精美的網站,並且提高網站的形象,能夠更好地吸引訪問者。
什麼是 Elementor?
如果你正在打造自己的網站,但不想花費大量時間和金錢聘請開發人員,那麼你絕對需要了解 Elementor 這個 WordPress 插件。
Elementor 可以讓你快速而簡單地創建專業而美觀的網站,它的三大特點:
此外,在最新的統計中,Elementor 是最受歡迎的 WordPress 編輯,例如說:
以下是 Elementor 的一些特點:
Elementor 是基於 WordPress 開放系統下的網頁編輯工具軟體,可以從 Loading Page 到電子商務網站等幾乎所有網頁應用中使用,是大叔最喜歡且常使用的編輯器之一。
Elementor 的強大功能和簡單易用的編輯界面,讓它成為了最受歡迎的 WordPress 編輯工具之一,無論你是新手還是有經驗的網站開發者,都可以輕鬆使用它來打造出美觀而實用的網站。
Elementor vs Elementor Pro
Elementor 提供了免費和付費兩種版本。免費 Elementor 提供有限的基礎元素功能,如果你想要更多的功能和更高的自由度,那麼你可以考慮使用 Elementor Pro,它提供了更多的模板和元素功能,讓網站的擁有更多的可能性。
Elementor Pro 費用
目前 Elementor Pro 最便宜的方案是一年 59 美金,只能在一個網站使用;而 EXPERT 方案則可以在最多 25 個網站使用,需要支付 199 美金。
在 2021 年之前,大叔以 199 美金購買了 1000 個網站的許可證。可惜過去的美好時光已經一去不返,當時只需要支付 39 美金就可以擁有一個網站,而最高方案的 1000 個許可證一年的費用為 399 美金。
當然,這與一些經濟因素有關。但基本上,主機服務只會越來越貴。由於升級伺服器,成本也隨之提高,費用也相應上漲。不過,每個單位的效能和功耗也得到了提高。就像 iPhone 越賣越貴,但效能和電池續航力更好了。
因此,Elementor 調整了他們的收費策略,不再低價測試市場,更提高了工作室和公司方案的收費,漲價高達 100%。
個人用戶的影響較小,相對只有 50% 左右漲價。而且還因 Elementor 的功能更強大而受益。Elementor Pro 的「易操作」、「學習速度快」的特點,讓我們可以在最短時間內建立網站,為公司和個人網站提供最佳的線上服務和行銷宣傳功能。
▼ 2022 年 Elementor Pro 費用
▼ 2022 年 Black Friday 費用
如果不喜歡 Elementor Pro 可以退費嗎?
無論你是否喜歡 Elementor Pro 都建議你試用看看,因為 Elementor 提供 30 天免費退費的試用期,一言不合就退費,不囉唆才是好服務。
偷偷告訴你一個秘密,如果在試用後覺得不錯的話,升級的高級方案只需付「差價」。所以從最便宜的一個網站的方案開始嘗試,未來有更多網站需要的話,再升級就好。
Elementor Pro 值不值的買?
Elementor Pro 在大叔使用第 2 個月,對於 Elementor 我有一些改觀,過去用過 Elementor Free 雖然操作好上手,但是常常當機,所以購買前 Elementor Pro 是有一點擔心,但是大叔還是個直男,直男就是給他刷下去就對了,頭也不回的男人才帥氣。
在使用幾個月後,不但系統穩定,而且速度快,做為一個靜態的個人網站和企業的形象網站,其實都很夠用。
所以大叔推薦給打算使用 WordPress 網站做「部落格」、「企業形象網站」的朋友。
← 如果你對「便宜」 Elementor Pro 有興趣的話,可以 IG 連絡大叔。
再來,如果你想要設計一個 WordPress 網站,做為「電商」、「動態網站」使用的話,也就是要很多酷酷的動畫之類的,那也可以使用 Elementor Pro,但建議你選擇 4 核心 8 GB 以上的主機。
Elementor Pro 不但功能很多,還很實用,而介面簡單上手好學習,也提供 300 多種設計模版 ( 300+ Designer Made Templates )
大叔想找的是在短時間,完成我想要的功能而「外觀夠用」就好,所以我選 Elementor Pro。
最近 Elementor 也推出雲端主機的服務,主機 + Elementor 編輯器 + 主題 每個「年」只要 99 美金起,CP 值蠻高,但速度就…沒用過,不過一個月不到 10 美金,其實也沒什麼好挑惕。
▼ New 服務 – 雲端主機
Elementor 新手使用教學
如果你是第一次使用 Elementor 的朋友,大叔將說明如何安裝和啟用 Elementor ,並解釋什麼是元素,和實例教你怎麼使用。
如何安裝和啟用 Elementor
Step1. 進入後台頁面,找到「外掛」,點擊「安裝外掛」
Step2. 進入頁面後,在右側的搜尋框打「Elementor」,就可以找到「Elementor Website Builder」,點擊「立即安裝」。
Step3. 安裝完成後,點擊「啟動」。
什麼是元素?
進到 Elementor 的網頁編輯頁面的時候,在左側我們可以看到「元素」,而元素代表的是各種不同的功能,例如說:
簡單說 Elementor 將過去我們需要透過「寫程式」才能做的網頁功能,將它們打包成一個一個的元素,並代表各種的功能來讓我們方便使用。
然後,我們只要使用「Drag and Drop 拖曳」的方式,就可以設計精美的網頁。
Elementor 基本操作和元素設定
#1 拖曳設計 – 讓網頁設計變得簡單。
Step 1. 新增頁面 & 點擊「使用 Elementor 編輯」
Step2. 選擇你要的功能拖放到「編輯區」。
將左側的「元素」拖到右側的編輯區,編輯區就會出現「元素」。
Step.3 編輯元素
然後我們要針對元素進行「編輯」,主要分為內容、樣式、進階。
以一個簡單的影片做為教學,我們試著在頁面中新增:
#2 自訂 CSS
如果你需要特殊的外觀風格或是動態設計,可能需要自行修改 CSS,而元素中的「進階」可以幫助我們自訂 CSS 。
新手想學習 CSS 語言的話,推薦你可以先看這堂課: Hohaw – 動畫互動網頁程式入門 (HTML/CSS/JS)【吳哲宇,墨雨設計】
#3 響應模式 – 如何讓行動裝置呈現不同的效果
響應式設計(Responsive Design)是一種網站設計技術,可以使網站在不同的設備上呈現不同的佈局和設計。
平時,在不能使用電腦的地方,用手機或是平板來上網、查資料,是再正常不過的事情,所以響應式設計,就是讓網站在不同的行動裝置上,都可以呈成出我們希望的視覺效果。
使用 Elementor Pro 的響應模式,我們可以針對「平板」、「手機」來修改樣式,只要在左側下方找到「響應模式」的圖示,然後點擊。
右側上方就會出現「電腦」、「平板」、「手機」的圖示,就可以針對不同裝置來調整設計。
▼ 響應模式圖示
▼ 選擇電腦、平板或是手機模式
#4 框線設定
框線是指在元素的外圍上呈現出各種不同的線條,例如說:「實線」、「雙實線」或是「虛線」等,一共有 5 種選擇。
框線設定可以由「進階」→「框線」,然後選擇邊線的類型和圓角半徑。
#5 導覽器 – 段、欄、元素
在編輯畫面中,左下方有導覽器,點擊後畫面會出現導覽器的視窗。
在視窗中可以看到「段、欄、元素」。
在網頁設計中,可以簡單將畫面分為 段、欄、元素,我們可以將它們視為「外框」、「內層」和「功能」。
反之元素是功能,功能要放在「欄」裡,而欄要放在「段」的下面。而欄是唯一擁有複數欄位的特性。
如何打造一個精美的網站
寫到著,大叔突然回想到當年,當年剛接觸 WordPress 架站,為了打造一個網站來曝光自己的店面,當年我犯了一個重大的錯誤。
「花過多的時間,在設計網站上,而忘了我的目的。」
簡單來說,假設我要開一家店,結果裝潢上花了太多的時間,對於實體店面來說,改裝潢的成本很高。但是對於一個數位店面,換個顏色就是分分鐘鐘的事情而已。
但是我在上面花了數個月,最後還是不滿意。總結來說,其實我並不知道我要什麼,所以怎麼做怎麼怪。
所以在一開始,如果你是新手的話,如何打造一個精美的網站的最佳方式就是使用別人設計好的「模版」。
所以我們要學會 3 件事情就好:
那我們實際的應用 Elementor 來做一次給大家看。
Elementor 的實際應用 #1 BLOG
Step1. 在編輯頁面中,點擊「模板」圖示。
Step2. 搜尋「blog」,找一個我們喜歡的頁面,然後將滑鼠移到頁面上方,點擊「插入」。
Step3. 插入完成後,我們再修改一下內容就可以了。建議大家不要在 Elementor 上修改,先記下來,將文字完成再複製貼上。
想像一下,你家裡堆滿了東西,每天都要花很長的時間整理和清理,還要為這些東西支付昂貴的房租。現在,如果你能夠擁有一個更簡單的生活方式,只保留真正重要的東西,那麼你就可以釋放出更多時間和資源來追求你的夢想和興趣,讓你的生活更有意義和樂趣!
▼ 我們把內容更新一下
Elementor 的實際應用 #2 企業 – 美容、美髮
我一直覺得 美容、美髮業主很適合做網站來推廣自己的業務,至少比炸雞店好,所以我們用上述的方法,再做一個頁面。
這次直接由 Step2. 搜尋開始然後修改內容。
這次大叔就不用影片了,大家直接進去看網頁吧。
心得 & 結論 – 網站設計新手好幫手 Elementor
在文章中大叔提到,我曾經花太多的時間在做好「網站設計」,其中也有一個原因是一開始選錯軟體,如果一開始我就使用 Elementor 的話,也許我已經成為男人中的男人 🥸
大叔在 2021 年 1 月開始使用 Elementor Pro 的網頁編輯器和他們的 Hello 主題。因為網站的速度一直不太滿意,那時候的主題功能過於強大,但用不到的功能只會拖慢網站的速度而影響使用者的體驗。
就像是開著敞篷超跑在台北市區,耗油又跑不快之外,還成了移動式的空氣清淨器。為了解決速度的問題,在研究和閱讀及嘗試之下,我發現可以先從這幾件事情下手:
說穿了,原來都是錢的問題,口袋深度影響網站速度。簡單來說,如果你想要網站要有酷炫的特效、動態效果,那你需要規格較好的主機效能,去支持那些動來動去的內容,當然錢錢從口袋流走的速度也比較快。
對於個人網站或是作品網站而言,每個月要花在網路主機上幾千塊,不符合經濟效益。所以大叔使用輕度方式來設計網站,選擇一個月不到一千塊的主機和主題或是編輯器,讓網路創業先存活再求發展,這樣比較健康。
本來想改善速度,結果使用幾個月後,網站有了明顯的成長:
因為網站變快,瀏覽的體驗也提高了,更重要的是在「內容」上可以投入更多的時間。如果你還在為網站設計而煩惱,大叔推薦你可以試試使用 Elementor Pro 。
也可以參考大叔的 Elementor Pro 組合方案。