Elementor 入門教學 :如何新增第一個 Elementor 頁面

這篇文章介紹了如何使用Elementor來打造精美的網站,無需程式設計能力。文章提到了Elementor的基本應用技巧,並建議新手使用別人設計好的模板來打造網站。文章還提供了兩個實際應用案例,包括部落格和美容、美髮業務的網站。最後,作者分享了自己的心得和結論,強調使用Elementor可以幫助新手輕鬆設計網站。

目錄

在安裝主題和 Elementor 之後,我們就可以使用 Elementor 為我們設計第一個頁面。


在之前的文章,我們大量的討論過如何建立 WordPress 網站,以及使用 SEO 策略建立流量。接下來,如果你想要讓你的網站更具吸引力,看起來更專業的話,我們需要會一點「網頁設計」。


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


如果停留下來的人都是為了你內容的重點,而 Elementor 是用來吸引流量的亮點。


本文章我們會解釋 Elementor 的基本功能和使用方式,幫助你更快速上手並熟悉操作界面。




如何新增第一個 Elementor 頁面

Step1. 新增頁面

在後台找到頁面,點擊一下「新增頁面」。


進入頁面後,我們可以在上方找到「使用 Elementor 編輯」。




Step2. 介面操作



從上面的選擇功能為:

使用拖曳式的設計,將元素移動到頁面編輯器。


Step1.載入 Elementor 版型庫

點程編輯區中的「版型庫」。

點擊你想要修改的元素的右上角,有一個「編輯」的圖示。


點擊後,可以在左側看到它的對應的元素工具。元素主要分成三個部份:

  • 內容:用來修改文字內容、照片、功能等
  • 樣式:用來修改間距、顏色、背景等
  • 進階:css、id、padding、動畫等。
  • 圖片
  • 內容編輯器
  • 按鈕等等

  • 簡單說 Elementor 將過去我們需要透過「寫程式」才能做的網頁功能,將它們打包成一個一個的元素,並代表各種的功能來讓我們方便使用。




    然後,我們只要使用「Drag and Drop 拖曳式設計」,就可以開始設計精美的網頁。


    Elementor 基本元素與小工具介紹



    元素是什麼?

    進到 Elementor 的網頁編輯頁面的時候,在左側我們可以看到「元素」,而元素代表的是各種不同的功能,例如說:

  • 標題
  • 圖片
  • 內容編輯器
  • 按鈕等等

  • 簡單說 Elementor 將過去我們需要透過「寫程式」才能做的網頁功能,將它們打包成一個一個的元素,並代表各種的功能來讓我們方便使用。




    然後,我們只要使用「Drag and Drop 拖曳式設計」,就可以開始設計精美的網頁。




    導覽器:段、欄、元素是什麼?

    在 Elementor 中,「段」(Section)是最高層級的結構,用於劃分網頁的不同區塊。每個「段」可以包含一個或多個「欄」(Column)。「欄」用於將網頁區塊分成不同的列,讓你可以在每個欄中放置不同的「元素」(Element)。


  • 「段」(Section):最高層級的結構,用於劃分網頁的不同區塊。
  • 「欄」(Column):用於將網頁區塊分成不同的列。
  • 「元素」(Element):放置在欄中的具體內容,例如文字、圖片、按鈕等。
  • Heading:插入引人注目的標題
  • Image:加入圖片,並設定大小、不透明度和其他設置
  • Text Editor:標準 WordPress 編輯器
  • Video:將 YouTube \ Vimeo \ Dailymotion 添加到設計頁面
  • Button:加入一個按鈕
  • Divider:分隔線
  • Spacer:插入空白間隔
  • Google Maps:加入谷哥的地圖
  • Icon:插入 Icon 圖示 ( Icon 和圖片是不一樣,請使用上注意。)




  • Star Rating:用來顯示星級評價,適合在評論、產品評分等頁面中使用。
  • Google Maps:將Google地圖嵌入到網頁中,以便訪客找到你的地址。
  • Icon:用來加入各種圖標來強調特定內容或增加視覺吸引力。
  • Image Box:結合圖像和文字的元件,適合用來展示產品、服務或內容介紹。
  • Icon Box:包含圖標和文字的方框,適合用來展示特色服務或優勢。
  • Basic Gallery:簡單的圖片畫廊,方便展示多張照片或作品。
  • Image Carousel:圖片輪播工具,讓多張圖片自動播放,適合展示作品集或幻燈片。
  • Icon List:包含圖標和文字的列表,適合用於說明功能或步驟。
  • Counter:動態計數器,用來展示數據或統計數字,例如客戶數、項目完成數等。
  • Spacer :加入空白區域來調整頁面排版和元素之間的間距。
  • Testimonial: 用來展示客戶的推薦或評價,有助於增加信任感。
  • Tabs:創建可切換的標籤式內容,便於組織和展示多個內容段落。
  • Accordion:折疊式的內容區塊,適合展示常見問題(FAQ)或需要節省空間的資訊。
  • Toggle:類似 Accordion 的功能,但內容塊可以多個同時展開或關閉。
  • Social Icons:添加社交媒體的圖標,方便訪客連結到你的社交平台。
  • Progress Bar:顯示進度條,用來視覺化展示某項數據的完成程度。
  • Sound Cloud:嵌入 SoundCloud 的音樂或音頻到頁面上。
  • Shortcode:用來嵌入 WordPress 的短代碼,讓你加入更多自定義功能。
  • HTML:允許你加入自定義的 HTML 代碼來添加進一步的自定義功能。
  • Menu Anchor:添加頁面內的錨點,讓訪客可以輕鬆跳轉到指定位置。
  • Alert:顯示一個警告或通知信息,例如提示用戶某些重要信息。
  • Sidebar:添加側邊欄,適合展示小工具、文章分類等。
  • Text Path:讓文字沿著指定的路徑進行展示,增加創意的視覺效果。
  • Loop Carousel : 類似Loop Grid,但呈現為可滾動的輪播,適合展示多個元素時使用。
  • 文章 : 用來顯示網站的文章列表,並可根據需求設置顯示的方式和內容。
  • 作品集 : 方便設計作品集展示,特別適合設計師、攝影師等需要展示作品的人。
  • 藝廊 : 用來創建圖片展示的畫廊,讓多張圖片以有吸引力的方式展示。
  • 表單 : 創建自定義表單,用於收集訪客的信息,例如聯絡表單、訂閱表單等。
  • 登入 : 增加訪客登入網站的功能,適合會員網站。
  • 幻燈片 : 創建圖片或內容的幻燈片展示,增加網站的動態效果。
  • WordPress Menu : 添加WordPress原生選單到頁面中,方便導航。
  • 動畫標題 : 創建具有動畫效果的標題,增加視覺上的吸引力。
  • Hotspot : 在圖像中添加互動標記點,適合標示地圖或產品上的重要部分。
  • 價格列表 : 顯示產品或服務的價格列表,適合用於餐廳菜單、服務價格等。
  • 價目表 : 顯示多種產品或服務的詳細價格信息,有助於訪客快速了解費用。
  • 翻轉方框 : 添加互動式的翻轉效果卡片,展示額外的信息。
  • 呼叫動作 : 引導用戶進行特定行動的按鈕或元素,例如購買、註冊等。
  • 媒體輪播 : 可以將多種媒體內容以輪播方式展示,增加動態效果。
  • 見證輪播 : 顯示客戶的見證並以輪播形式展示,提高信任感。
  • 評論 : 顯示客戶或用戶的評論,增加社會證明。
  • 目錄 : 創建頁面的內容目錄,適合長篇內容,方便用戶快速瀏覽。
  • 倒數 : 添加倒數計時器,用於活動或促銷的倒計時。
  • 「分享」按鈕 : 添加社交分享按鈕,方便用戶分享內容到他們的社交平台。
  • 段落引用 : 顯示引文或重要文字,強調某些信息。
  • Facebook 按鈕 : 添加Facebook的按鈕,方便用戶互動,如“喜歡”按鈕。
  • Facebook 評論 : 嵌入Facebook的評論模塊,讓用戶可以直接在頁面上發表評論。
  • Facebook 嵌入 : 將Facebook的帖子或影片嵌入到網頁中。
  • Facebook 粉絲專頁 : 添加粉絲專頁的小工具,方便訪客訂閱或點讚你的粉絲專頁。
  • 版型 : 使用預設的版型,讓設計更加快速和一致。
  • Lottie 動畫元件 : 添加Lottie動畫,讓頁面更加生動和互動。
  • Code Highlight : 用來展示程式碼,適合技術文章或教學。
  • Video Playlist : 創建影片播放列表,適合展示多個影片內容。
  • PayPal Button : 添加PayPal付款按鈕,方便用戶直接進行購買。
  • Stripe Button : 添加Stripe付款按鈕,方便用戶進行購買。
  • Progress Tracker : 顯示用戶在頁面中的進度,特別適合長篇內容或教學。
  • Taxonomy Filter : 讓用戶可以根據分類過濾內容,例如文章分類或產品標籤。
  • 搜尋 : 添加搜尋功能,讓用戶可以快速找到他們感興趣的內容。
  • Share the Post: