#9 網站設計新手必學! Elementor 輕鬆打造精美網站,讓你的網站更具吸引力!
讀者權益

在閱讀前,請容許大叔聲明幾件事情:這些事情對您可能蠻重要的:

  • 內容中連結可能有參加聯盟計畫,這並不影響您的購買權利。
  • 聯盟計畫和廣告收入都會做為網站經營基金。
  • 而部份收入將捐給流浪動物基金會。(公益捐款明細)
  • 喜歡我的文章的話,請幫我這樣做,點擊下面的拍手圖示。

#9 網站設計新手必學! Elementor 輕鬆打造精美網站,讓你的網站更具吸引力!

在之前的文章,我們大量的介紹如何使用 SEO 策略建立流量,以及將流量轉化成收入的一些方法,像是 Google Adsense 或是聯盟行銷。

接下來,如果你想要讓你的網站更具吸引力,看起來更專業的話,我們需要學一點「網站設計」。

網站設計就像是店面的實體裝潢,例如,進入咖啡廳,迎面而來的是白色牆面和綠色植物,乾淨透亮的落地窗,門口旁邊種著綠色植物,讓空間充滿了生氣和活力,還沒喝咖啡就吸了芬多精。

大叔覺得,每個人都可以用 WordPress 來學習網路創業、網站賺錢,而 Elementor 是用來打開 WordPress 的大門。

Elementor 網頁編輯器可以簡單快速打造專業網站,而且不需要有任何的程式設計能力,適合多數人來學習使用。

在這篇文章中,大叔會教你 Elementor 的一些基礎應用技巧,讓你能夠輕鬆打造出精美的網站,並且提高網站的形象,能夠更好地吸引訪問者。

什麼是 Elementor?

如果你正在打造自己的網站,但不想花費大量時間和金錢聘請開發人員,那麼你絕對需要了解 Elementor 這個 WordPress 插件。

Elementor 可以讓你快速而簡單地創建專業而美觀的網站,它的三大特點:

  • 「拖放式 (Drag and Drop)」編輯介面 – 簡單易操作,讓任何人都能夠輕鬆設計和編輯網頁。
  • 不需要具備程式設計能力 – Elementor 將想得到的功能都設計成元素,直接「拖放」就能使用。
  • 網上最多模板和教學資源 – 使用 Elementor 模板和範本讓我們站在巨人的肩膀上。加上你可以在網路上找到任何關於 Elementor 的問題和教學,省下大量解決問題的時間。
  • 此外,在最新的統計中,Elementor 是最受歡迎的 WordPress 編輯,例如說:

  • 平均每 10 秒創建一個網站
  • Elementor 是一個開源的平台
  • 自 2016 年推出,至今已擴展到 180 多個國家/地區
  • 超過 5,000,000 次活躍安裝
  • WordPress 網站 超過 5000 條五星級評論

  • 以下是 Elementor 的一些特點:

  • 優秀的性能:Elementor 能夠快速載入,不會讓你的網站變得緩慢。
  • 大量模板可用:Elementor 提供了豐富的模板庫,涵蓋各種類型的網站,你可以根據自己的需求進行選擇,而且每個模板都可以進行自定義。
  • 無需程式背景:Elementor 的編輯界面簡單易用,讓你可以輕鬆設計和修改網站的外觀和功能,而且不需要任何程式設計知識。
  • 免費和付費版本:Elementor 提供了免費和付費兩個版本,免費版本已經足夠使用,但付費版本可以提供更多功能和模板。
  • 網上大量免費學習資源:Elementor 是最受歡迎的 WordPress 編輯工具,超過 800 萬網站使用,可以在網路上找到大量的學習文章。
  • " controls="" src='https://elementor.com/marketing/wp-content/uploads/2021/06/02_MainVideo_1066_600_HR201-1.mp4'>


    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 拖曳」的方式,就可以設計精美的網頁。

    " controls="" src='https://elementor.com/marketing/wp-content/uploads/2022/01/14_Designer_1064_600_V3-1.mp4'>

    Elementor 基本操作和元素設定

    #1 拖曳設計 – 讓網頁設計變得簡單。

    Step 1. 新增頁面 & 點擊「使用 Elementor 編輯」

    網站設計

    網站設計


    Step2. 選擇你要的功能拖放到「編輯區」。

    將左側的「元素」拖到右側的編輯區,編輯區就會出現「元素」。

    網站設計


    Step.3 編輯元素

    然後我們要針對元素進行「編輯」,主要分為內容、樣式、進階。

  • 內容 – 修改標題文字、影片、圖片等內容。
  • 樣式 – 修改顏色、字體、樣式、陰影等。
  • 進階 – 邊界、邊框、寬度、CSS 等設定
  • 網站設計

    網站設計
    網站設計


    以一個簡單的影片做為教學,我們試著在頁面中新增:

  • 標題、內容、圖片
  • " controls="" src='https://lashiblog.com/wp-content/uploads/2023/03/elementor_基本操作.mp4'>

    #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 上修改,先記下來,將文字完成再複製貼上。

  • TheAdventurers → 減法生活提案
  • A couple on their quest to explorethe world’s greatest treasures → 減法是人生最好的選擇
  • Hi, we are Amandaand Shawn → Hello , 我是減法大叔
  • Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occaecat cupidatat non proident, sunt in culpa qui officia mollit natoque consequat massa quis enim. Donec pede justo, fringilla vitae, eleifend acer sem neque sed ipsum. Nam quam nunc, blandit vel, ridiculus mus.→
  • 想像一下,你家裡堆滿了東西,每天都要花很長的時間整理和清理,還要為這些東西支付昂貴的房租。現在,如果你能夠擁有一個更簡單的生活方式,只保留真正重要的東西,那麼你就可以釋放出更多時間和資源來追求你的夢想和興趣,讓你的生活更有意義和樂趣!

    ▼ 我們把內容更新一下

    " controls="" src='https://lashiblog.com/wp-content/uploads/2023/03/elementor_基本操作_模板.mp4'>

    Elementor 的實際應用 #2 企業 – 美容、美髮

    我一直覺得 美容、美髮業主很適合做網站來推廣自己的業務,至少比炸雞店好,所以我們用上述的方法,再做一個頁面。

    這次直接由 Step2. 搜尋開始然後修改內容。

    網站設計


    這次大叔就不用影片了,大家直接進去看網頁吧。

    心得 & 結論 – 網站設計新手好幫手 Elementor

    在文章中大叔提到,我曾經花太多的時間在做好「網站設計」,其中也有一個原因是一開始選錯軟體,如果一開始我就使用 Elementor 的話,也許我已經成為男人中的男人 🥸

    大叔在 2021 年 1 月開始使用 Elementor Pro 的網頁編輯器和他們的 Hello 主題。因為網站的速度一直不太滿意,那時候的主題功能過於強大,但用不到的功能只會拖慢網站的速度而影響使用者的體驗。

    就像是開著敞篷超跑在台北市區,耗油又跑不快之外,還成了移動式的空氣清淨器。為了解決速度的問題,在研究和閱讀及嘗試之下,我發現可以先從這幾件事情下手:

  • 主機速度
  • 優化圖片
  • 換一個 WordPress 網站編輯器

  • 說穿了,原來都是錢的問題,口袋深度影響網站速度。簡單來說,如果你想要網站要有酷炫的特效、動態效果,那你需要規格較好的主機效能,去支持那些動來動去的內容,當然錢錢從口袋流走的速度也比較快。

    對於個人網站或是作品網站而言,每個月要花在網路主機上幾千塊,不符合經濟效益。所以大叔使用輕度方式來設計網站,選擇一個月不到一千塊的主機和主題或是編輯器,讓網路創業先存活再求發展,這樣比較健康。

    本來想改善速度,結果使用幾個月後,網站有了明顯的成長:

  • 排名和點擊曝光也上升
  • 停留時間上升
  • 整體都提高了
  • 網站設計
    網站設計


    因為網站變快,瀏覽的體驗也提高了,更重要的是在「內容」上可以投入更多的時間。如果你還在為網站設計而煩惱,大叔推薦你可以試試使用 Elementor Pro 。

    也可以參考大叔的 Elementor Pro 組合方案。

    讀者優惠

  • Elementor Pro + Crocoblock 組合包
  • 主機 + Elementor Pro 優惠計畫
  • 「中年大叔的秘密武器,WordPress 網站獲利攻略大揭密!」 – 下一篇給他看下去
  • 全課程9折 (募資課程除外)
    複製優惠碼
    aohahow
    2024/01/01-12/31
    HAHOW 好學校
    不限金額 9 折
    複製優惠碼
    aohahow
    2023-12-31-2024-12-31
    Hahow 好學校

    目錄:
    #9 網站設計新手必學! Elementor 輕鬆打造精美網站,讓你的網站更具吸引力!

    菈喜大叔 - 減法生活提案

    關於大叔

    文章歡迎轉載,請說明出處。

    相關文章

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *