【Wordpress免費編輯器-Elementor完整基礎教學】不需要懂程式碼，也能這樣免費架設Wordpress網站

Elementor是什麼？

WordPress編輯器Elementor是Wordpress眾多編輯器當中「非常經典的編輯器」。它是以拖拉式的方式進行操作的。

簡單的說法是「不需要擁有程序碼的知識」，就可以使用Elementor這款編輯器來建立網站。有了這個容易操作的wordpress 編輯器，從零開始為自己或客戶建立專業的網站就變得更加輕鬆了。

雖然說起來好像很簡單，當中「還是有很多細節」是我們需要注意的。比如說圖片的大小，可能你想要的呈現方式是全屏的，但是對於新手的你可能會找不到設定圖片的地方。

如果你想要更了解Elementor的使用方法，可以點擊這裡觀看我的影片教學【2024 WordPress Elementor 基礎教學】：零基礎快速上手，4小時創建專業級網站

單元1:如何「安裝」及「啟用」Elementor編輯器

 

 

WordPress編輯器Elementor是Wordpress內置的其中一個「外掛」，所以我們可以直接在Wordpress的工具欄選擇外掛。

 

步驟1：在Wordpress的工具欄，選擇「外掛」。（如上圖所示）

步驟2：選擇「安裝外掛」（如上圖所示）

 

 

接下來呢，就會來到上圖的這個頁面。

1.輸入關鍵字「Elementor」就會出現以上兩個我們需要安裝及啟用的外掛。（如上圖所示）

2.確定第一個需要安裝的外掛名稱是「Elementor Website Builder」，然後確認這個外掛是否相容於你網站目前的Wordpress版本。

3.點擊「立即安裝」，完成安裝之後點擊「啟動」。（如上圖所示）

4.第二個外掛 「Essential Addons for Elementor」，只需依照同樣的方式完成安裝及啟動就可以了。

如果你想要更了解Elementor的使用方法，可以點擊這裡觀看我的影片教學 【2024 WordPress Elementor 基礎教學】：零基礎快速上手，4小時創建專業級網站

單元1(a)：Elementor編輯器的重要設定

 

1.在安裝完成及啟用之後，工具欄會出現 Elementor 的圖標，點擊選擇設定。（如上圖所示）

2.在這裡必需先「設定好我們的內容類型」，可以依自己的個人喜好做設定。大致上我們會建議勾選文章，頁面及Landing page。某些高級主題會有更多的選項。（如上圖所示）

3.最重要的是在「預設顏色和預設字型型的欄位不要打勾」。這樣我們才能在不同的頁面選用不同的顏色和字型。（如上圖所示）

4.設定好之後記得「儲存設定」就可以了。（如上圖所示）

 

單元2：完整介紹Elementor介面的「基本」小工具功能

 

 

上圖顯示的是免費版Elementor編輯器的基礎工具表。分為「基本」和「一般」。

以下將以圖片的形式為大家展現它們是如何使用的。

 

 

1.一開始進入 Elementor 將會看到以上圖片。每一次增添任何內容，都必須「點擊+號」，才能繼續操作。如上圖所示。

2.「內部段」是最常使用的功能之一，用於展開左右兩邊的呈現方式。（如上圖所示）

之後在版面配置中選擇「方寬」，這樣的設定就能使我們的網頁不管在手機，電腦，或是平板都能看到完整的內容了。（如下圖所示）

 

 

3.「標題」簡而言之就是我們頁面的標題。

4.「圖片」用於嵌入我們的圖片內容

5.「內容編輯器」用於嵌入我們的文字內容

 

單元2.1：圖片的「重點設定」

 

 

點擊「內容」，然後點擊圖片。這時候就可以從我們的電腦/平板檔案中選擇我們想要置入的「圖片內容」。

圖片的pixel（像素）建議使用個比例：「1600 x 900」。（親測這個像素是最適用於網站上的圖片）

在內容的這個部分，我們可以設定的東西有：「圖片的尺寸，圖片的位置，以及為圖片設定連結」

 如果你想要更了解Elementor的使用方法，可以點擊這裡觀看我的影片教學【2024 WordPress Elementor 基礎教學】：零基礎快速上手，4小時創建專業級網站

 

在「樣式」的部分呢，我們能夠設定圖片的「寬度及高度」。（如上圖所示）

 

在「進階」的設定裏，我們能夠為我們的圖片增加「動作特效，背景顏色，框線等等」。

 

單元2.2：嵌入「影片」的方法

 

 

步驟1：在工具欄中，選擇「影音」。

步驟2：在內容的部分，選擇「來源」，可以是「Youtube，Vimeo」。建議使用嵌入「連結」的方式，這樣比較不會因為影片的大小而影響到網站的速度。

單元2.3：嵌入「按鈕」的方法

 

 

步驟1：在工具欄選擇「按鈕」。

步驟2：點擊「內容」，選擇「類型」（通常會選擇預設值）

步驟3：選定之後，可以「調整按鈕的大小」。

步驟4：這時候按鈕就會出現在右側了。

 

單元2.4：什麼是「分割線」

 

 

「分割線」，顧名思義就是用來間隔每一個段落的小設計，以更好的呈現不同內容的區分。

從上圖中，我們能夠任意選擇我們想要的分割線類型。

 

單元2.5：什麼是「空白間隔」

 

 

「空白間隔」是我們在 Elementor 最常使用的小工具之一。上圖所示是當我們在設定標題時，我們想要留有空間，這時候就需要使用空白間隔了。我們能夠自行「調整空白間隔的大小」。如步驟2所示。

 

單元2.6：如何置入「Google地圖」

 

 

當我們想要讓客戶透過我們的網站或頁面就能夠找到我們的地址時，我們就可以使用「Google 地圖」這個實用的小工具了。

步驟1：在工具欄選擇「Google地圖」，輸入你所在的位置地址

步驟2：可以「放大」或「縮小」地圖，已呈現更多部分的地圖內容。

步驟3：調整地圖的高度，如圖所示的「662」是比較建議的「高度數值」。

 

單元3：完整介紹Elementor介面的「一般」小工具功能

 

 

在正式進入這個主題之前，有幾個事項想要提醒大家的。

1. 盡可能先熟悉「基本」小工具的教學內容及操作方式，再深入學習接下來的「一般」小工具的教學內容。因為「一般」小工具的教學內容相對比較複雜，內容涵蓋範圍也比較需要一些「基本技巧」。

2.如果在操作「基本」小工具時，遇到沒辦法設定的地方，歡迎你在「文章底下」留言讓我知道。能力範圍之內，我都會盡可能的回答大家。

如果一切操作順利，那我們就開始下一部分的學習吧。

單元3.1：如何使用「圖片方框」

 

 

「圖片方框」這個小工具適合用於呈現我們想要展現的產品類型。比方說攝影影集或是不同的剷品種類。

步驟1：點擊「圖1」的部分，之後從電腦/平板的檔案中選取想要嵌入的圖片內容。

步驟2：調整想要的「圖片尺寸」。

步驟3：在「標題描述」的欄位，輸入這張圖片的標題內容，可以根據需求任意更改。

步驟4：如圖所示，為標題添加「描述的內容」。

關於「標題描述的顏色和字體類型」，都能點擊「樣式」進行編輯和修改。

 

單元3.2：如何使用「圖示方框」

 

 

「圖示方框」這款小工具適合用於展現你所提供的「服務類型」。像網站設計的話我們所提供的服務包括頁面設計，文檔編寫，檔案保存等。這時候都可以使用圖示方框的方式去呈現這部分的內容。

步驟1：點擊「圖示1」，選擇想要的圖示類型。（這個部分只能選擇內置的圖示，不能從其他檔案導入，如果使用的是高級主題，就另當別論。示範的文章使用的wordpress主題是「Astra Theme」

步驟2：為這個圖示輸入想要的標題內容。

步驟3：任意輸入標題的描述內容。

關於「圖示的顏色和字體類型」，都能點擊「樣式」進行編輯和更改。

 

單元3.3：「星等」適合在什麼情況下使用

 

 

我們會在什麼情況下使用「星等」這個小工具呢？答案很簡單，就是當我們想要展示「客戶評級」的時候。我們能夠自行把客戶所給予的評級「按不同的星等數量展現出來」。

步驟1：在工具欄中，選擇「星等」，可以是「0-5，0-10」或是其他的選項。

步驟2：點擊「評分」這個欄位，選擇你想要的評分等級，可以任意設定「相關數字」。（左圖顯示5顆星，右圖顯示4顆星）

「星等的顏色及款式」都能夠在「樣式」裏設定。

 

單元3.4：圖片轉盤

 

 

「圖片轉盤」這個小工具是比較進階的操作。通常用於多張圖片的呈現。我嘗試用簡單的文字描述，盡可能的讓大家可以理解。這部分必須多加練習，才能熟練的操作。

這個小工具非常適合使用在「合作商」的展示。所謂「轉盤」的意思是被選擇的圖片內容會「自動的播放與轉動」。

步驟1：點擊工具欄中的「圖片轉盤」，然後從電腦/平板的檔案中，挑選三張或以上的圖片內容，這樣才能更好的展示，少於三張的圖片比較不適合使用圖片轉盤這個工具。

步驟2：調整「圖片的尺寸」。如圖示2的指示。我所選擇的是適中的圖片大小。你可以根據自己的圖片內容來做不同的設定。

在「顯示幻燈片」的這個欄位，可以根據想要顯示的圖片數量來進行特別的設定，點擊「預設值」的按鈕就能夠看到可以設定的內容數量了。

「幻燈片捲動」這個欄位，我們可以設定當圖片轉盤自動播放的時候，我們想要多少張圖片在同一時間轉動。同樣點擊「預設值」的按鈕就能夠看到可以調整的內容數量了。

「導航例」這個欄位，根據以上圖片，我選擇的是「箭頭與點」。比方說你會看到第一張圖片的左側有個「小小的透明箭頭」，已經三張圖片的下方你會看到「三個小黑點」。

步驟3：我們可以點擊「樣式」，調整圖片之間的間隔位置。（如上圖所示）

 如果你想要更了解Elementor的使用方法，可以點擊這裡觀看我的影片教學【2024 WordPress Elementor 基礎教學】：零基礎快速上手，4小時創建專業級網站

 

單元3.5：基本圖庫

 

 

「基本圖庫」和「圖片轉盤」這兩款小工具咋看圖片會覺得非常相像。但是呢，它們是兩種截然不同的小工具。最大的差別在於「基本圖庫」的呈現方式是「不動」的圖片展示，而「圖片轉盤」具有自動播放圖片的功能。

置入圖片的方式和上面大致相同，這裡我就不重複解說了。

 

單元3.6：如何置入「圖示列表」

 

 

「圖示列表」這個小工具，一般比較不常用到。但基於有些朋友還是會使用，所以我在這裡簡單的讓大家理解這個功能的操作方式。

步驟1：在工具欄列表中，選擇「圖示列表」，之後在「列表項目」的欄位中，點擊一下。這時候可以更改「列表項目」這個標題，輸入你想要的文字。

步驟2：如圖2所示，「列表項目」的左側有一些小小的圖示，我們可以點擊「樣式」的版面，設定圖示的顏色及圖示。這些都可以根據各自的需求，作出更改。

 

單元3.7：「計數器」的完整設定

 

 

「計數器」這個小工具非常的好用，很適合放在「銷售頁」。每一個數字都會「自動的跳轉」，比方說從「數字0」開始到「數字100」。但是呢，這裏需要設定的步驟比較多，還請大家耐心的看下去。

一開始，我們需要「點擊+號」，在工具欄選擇「內部段」。建議開設三個「內部段」，以展示不同的數字內容。（如上圖所示）

步驟1：從圖片當中，大家看到「開始數字」和「結束數字」。可以根據個人需求在每一個部分做不同的設定。

步驟2：「動畫持續時間」在以上圖片顯示的是2000，代表的時間是「兩秒」的意思。這裡大家可以隨心設定。

步驟3：在數字的底部，有顯示「修飾數字」，這裏我們可以自行設定想要的標題。（如圖3所示）

關於「數字的顏色及字體的類型」，都可以在「樣式」的版面做調整的。

 

單元3.8：什麼是「進度條」

 

 

「進度條」這個小工具也非常適合用在「銷售頁」。這兩個小工具都是屬於非常高價值的學習內容。我盡我所能的用圖片與文字的相呼應來分享接下來的內容，希望能讓大家都有所收穫。

步驟1：在工具欄頁面，選擇「進度條」，接著只需點擊滑鼠中的「右鍵」，選擇「再製」，就能如圖所示，快速在「同一時間」製作出三個不同的「進度條」了。

在「類型」方面，也能隨意的點擊「預設值」的按鈕，做出不同的設定。基於示範，所以統一選擇預設值。

步驟2：在「百分比」這個欄位，隨意的設定「不同的數值」就可以了。

步驟3：「內文」的欄位，我們可以為每一個不同的「進度條」附上「不同的標題」

「進度條的顏色和字體顏色」都能在「樣式」的版面做不同的設定。想要五彩繽紛的設計都是可以的。

 如果你想要更了解Elementor的使用方法，可以點擊這裡觀看我的影片教學【2024 WordPress Elementor 基礎教學】：零基礎快速上手，4小時創建專業級網站

 

單元3.9：客戶見證

 

 

「見證」顧名思義就是讓我們展現顧客見證的小工具。我們可以設定客戶的頭像、姓名、職業以及客戶給予的評語。

步驟1：點擊「內容」的部分，輸入客戶給予的文字評語內容。

步驟2：置入「客戶的個人頭像」，這邊建議的圖像大小為「500 x 500」

步驟3：在「名稱」欄位中，可以「輸入顧客的暱稱」。

 

總結

看到這裡，相信大家對於「Elementor」這款Wordpress編輯器的操作及使用方面已經不再陌生了。

在此讓大家「重溫」這篇文章的學習內容。

 如果你想要更了解Elementor的使用方法，可以點擊這裡觀看我的影片教學【2024 WordPress Elementor 基礎教學】：零基礎快速上手，4小時創建專業級網站

• 如何「安裝」及「啟用」Elementor編輯器
• Elementor編輯器的「重要設定」
• Elementor介面的「基本功能」
• 圖片的「重點設定」
• 嵌入「影片」的方法
• 嵌入「按鈕」的的方法
• 什麼是「分割線」
• 什麼是「空白間隔」
• 如何置入「Google地圖」
• Elementor介面的「一般」小工具功能
• 如何使用「圖片方框」
• 如何使用「圖示方框」
• 「星等」適合在什麼情況使用
• 「圖片轉盤」與「基本圖庫」的區別
• 如何置入「圖示列表」
• 「計數器」的完整設定
• 什麼是「進度條」
• 客戶見證

我的分享就到這邊啦。大家如果覺得這篇文章寫的不錯，可以在文章下方留言鼓勵我。可以收到你們的反饋和鼓勵，我真的會很開心的😍我會繼續努力產出有價值的內容哦😉

一起互相交流學習吧！

 

如果你覺得本篇文章很有幫助，請不要吝嗇分享給你身邊有需要的朋友哦😉