在安裝主題和 Elementor 之後，我們就可以使用 Elementor 為我們設計第一個頁面。
在之前的文章，我們大量的討論過如何建立 WordPress 網站，以及使用 SEO 策略建立流量。接下來，如果你想要讓你的網站更具吸引力，看起來更專業的話，我們需要會一點「網頁設計」。
網站設計就像是店面的實體裝潢，例如，進入咖啡廳，迎面而來的是白色牆面和綠色植物，乾淨透亮的落地窗，門口旁邊種著綠色植物，讓空間充滿了生氣和活力，還沒喝咖啡就吸了芬多精。
如果停留下來的人都是為了你內容的重點，而 Elementor 是用來吸引流量的亮點。
本文章我們會解釋 Elementor 的基本功能和使用方式，幫助你更快速上手並熟悉操作界面。
如何新增第一個 Elementor 頁面
Step1. 新增頁面
在後台找到頁面，點擊一下「新增頁面」。
進入頁面後，我們可以在上方找到「使用 Elementor 編輯」。
Step2. 介面操作
從上面的選擇功能為：
Step3. 新增元素到頁面
使用拖曳式的設計，將元素移動到頁面編輯器。
▼ Elementor 網頁編輯器影片 – 由 Elementor 提供
如何將 Elementor Template 插入頁面
許多人以為網頁設計是由空白頁開始，實際上應該是由已經完成的設計，再進行修改。就像是寫作一樣，我們並不會從頭開始寫，一定是將過去整理好的資料拿出來重新組織。
Step1.載入 Elementor 版型庫
點程編輯區中的「版型庫」。
打開版型庫後，可以從「分類」或是上方的區塊、頁面，找出你喜歡的設計。
選擇後，在下方點擊「插入」。
插入後，再各別修改元素的內容。
如何修改元素?
插入模板後，下一步就是修改元素。
點擊你想要修改的元素的右上角，有一個「編輯」的圖示。
點擊後，可以在左側看到它的對應的元素工具。元素主要分成三個部份：
內容：用來修改文字內容、照片、功能等樣式：用來修改間距、顏色、背景等進階：css、id、padding、動畫等。修改 Elementor 元素並不難，修改時編輯器的內容會有相對應的變化，但中間有許多的網頁設計的概念在，如果你不是基本知識的新手的話，可能需要一點時間來理解和摸索。
我們會提供更多的例子，幫助大家更快速學習 Elementor 。
Elementor 新手使用教學
如果你是第一次使用 Elementor 的朋友，大叔將說明如何安裝和啟用 Elementor ，並解釋什麼是元素，和實例教你怎麼使用。
如何安裝和啟用 Elementor
Step1. 搜尋 Elementor
進入 WordPress 後台頁面，鼠標移動到「外掛」，再點擊一下「安裝外掛」。
Step2. 安裝 Elementor
進入外掛頁面後，在右側的搜尋框打上關鍵字「Elementor」，就可以找到「Elementor Website Builder。
點擊「立即安裝」並啟動它，即可。
Step3. 在後台找到 Elementor
什麼是元素?
進到 Elementor 的網頁編輯頁面的時候，在左側我們可以看到「元素」，而元素代表的是各種不同的功能，例如說：
標題圖片內容編輯器按鈕等等簡單說 Elementor 將過去我們需要透過「寫程式」才能做的網頁功能，將它們打包成一個一個的元素，並代表各種的功能來讓我們方便使用。
然後，我們只要使用「Drag and Drop 拖曳式設計」，就可以開始設計精美的網頁。
Elementor 基本元素與小工具介紹
元素是什麼?
進到 Elementor 的網頁編輯頁面的時候，在左側我們可以看到「元素」，而元素代表的是各種不同的功能，例如說：
標題圖片內容編輯器按鈕等等簡單說 Elementor 將過去我們需要透過「寫程式」才能做的網頁功能，將它們打包成一個一個的元素，並代表各種的功能來讓我們方便使用。
然後，我們只要使用「Drag and Drop 拖曳式設計」，就可以開始設計精美的網頁。
導覽器：段、欄、元素是什麼?
在 Elementor 中，「段」（Section）是最高層級的結構，用於劃分網頁的不同區塊。每個「段」可以包含一個或多個「欄」（Column）。「欄」用於將網頁區塊分成不同的列，讓你可以在每個欄中放置不同的「元素」（Element）。
「段」（Section）：最高層級的結構，用於劃分網頁的不同區塊。「欄」（Column）：用於將網頁區塊分成不同的列。「元素」（Element）：放置在欄中的具體內容，例如文字、圖片、按鈕等。在網頁設計中，可以簡單將畫面分為 段、欄、元素，我們可以將它們視為「外框」、「內層」和「功能」。
總之，元素是功能，功能可以放置在「欄」裡，而欄要放在「段」的下面。而欄是唯一擁有複數欄位的特性。
基本元素介紹
Inner Section：插入多欄位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：讓文字沿著指定的路徑進行展示，增加創意的視覺效果。 專業版元素介紹
如果你使用的專業付業版本的話，Elementor 提供更多專業版的小工具，可以讓你在網頁設計中增加更多進階的元素和互動性。
Loop Grid ： 用來顯示重複內容的網格，如文章、產品或作品，方便有條理地展示信息。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 ： 讓用戶可以根據分類過濾內容，例如文章分類或產品標籤。搜尋 ： 添加搜尋功能，讓用戶可以快速找到他們感興趣的內容。Link In Bio 元素
