分類
WordPress 教學 網頁資訊分享

Elementor 免費版教學

Wordpress 的編輯器有好多種,其中, Elementor 編輯器算是最多人使用的,整個網站大概有70%左右可以靠它完成,包含編輯文章、頁面都靠它,重點還很簡單,這裡教學免費版功能,有需要的朋友可以自行斟酌購買付費版。

WordPress 的編輯器有好多種,其中, Elementor 編輯器算是最多人使用的,整個網站大概有70%左右可以靠它完成,包含編輯文章、頁面都靠它,重點還很簡單,這裡教學免費版功能,有需要的朋友可以自行斟酌購買付費版。

Elementor 官網:
https://elementor.com/

安裝外掛

外掛  > 安裝外掛

1. 搜尋 Elementor  > 2. Elementor Website Builder – More than Just a Page Builder

安裝完畢後,左邊選單會多出一個 Elementor 的選項
1. 設定  > 2. 一般 > 3. 將能使用 Elementor 的內容類型打勾 > 4. 儲存設定

元素使用教學

到”文章”選擇要使用 Elementor 的文章,點擊”使用 Elementor 編輯”按鈕

進入 Elementor 編輯器的介面大約分成三大部分,元件區、畫面區、導覽器,由”元件區”拖拉至”畫面區”組成網頁畫面,”導覽器”可以快速導覽該頁面有哪些區塊元素,有些元素編輯的較為複雜有時候在畫面上點擊不到不好編輯,這時候就可以到”導覽器”找到該原素,首先點擊畫面中的「+」建立一個區塊

選擇要將版面分割成幾個區塊,這裡就先不分割選擇第一個

首先先試著將一個”標題”元素拖曳至畫面中

左邊元素面板會出現”標題”元素相對應可以編輯的資訊,先選第一個”內容”標籤,底下可以輸入文字、連結、對齊…等

“樣式”標籤,這裡可以調整該”標題”元素的文字顏色、字體、大小、文字陰影…等

“進階”標籤,這裡可以調整該”標題”元素的版面配置、寬度、動畫…等,這裡介紹比較常用的,
1.版面配置:
可調整內距、外距,單位也可自訂、寬度、z軸、會寫css的人也可以自訂義css、id,自定義的css可以寫在style.css檔裡,或者寫在”外觀”裡(外觀>自訂>附加的 CSS)

2.動作特效:
此處可以設定動畫,延遲毫秒數

3.背景:
此處可以設定背景圖,背景顏色

4.框線:
此處可以設定線樣式、圓角、陰影…等

5.回應式:
此處可以設定該元素在某個裝置下要隱藏,以下圖範例:這個元素會在桌面裝置隱藏,畫面會顯示灰色斜線區塊,在前台桌面裝置看就隱藏,平板跟手機則會顯示

Elementor 免費版本共有這些元素可使用,每個元素都有相對應的不同設定,熟悉以後70%的網頁都可以使用 Elementor 製作完成

複製/再製元素

複製/再製:
若要再製”元素使用教學”這個標題元素,直接對著元素按滑鼠右鍵>再製

就會自動幫你在該元素底下新增一個一模一樣的元素

若要複製”元素使用教學”這個標題元素,直接對著元素按滑鼠右鍵>復製

若到想要貼上的地放的上一個元素按滑鼠右鍵>貼上即可

設定全站共用

此處可以設定網站整體共用的顏色、字型、字體大小…等
(圖1) 點擊左上角的漢堡圖示 > (2) 網站設定 > (3) 介紹幾樣比較常用到的

1. Global Color
全站共用顏色設定,也可以字型新增新的顏色,設定完畢記得點最底下 (圖1) 更新 > 點右上角 x 圖示回到編輯畫面,(圖2) 即可看到所設定的顏色,以後 Global Color一改變,有使用到 Global Color 的部分友會跟著改

2. 全域字型
此處可設定全域共用的預設字體

3. 排版樣式
(圖1)此處可設定全域共用排版樣式,包含主體跟 H1~H6 標籤的文字色彩、字體大小、字體間距、行距,設定完畢更新>右上角x離開,(圖2)當使用標題元素題時 H1~H6 在 > 內容 > HTML 標籤,直接選擇 H1~H6 即可套用樣式不用再重新調整,h1~h6 標籤為 SEO 重要依據,建議可以多下工夫。

響應式設定

網站編輯完成以後,也要針對其他裝置進行調整,Elementor 預設有三個段點,分別為桌面、平板、手機,首先點擊畫面左下角的響應式符號

至畫面上方選擇要編輯的斷點,例如畫面中的平板符號

選擇要編輯的 1. 段點(例:平板)、2.元素、3.有平板符號表示此處可以編輯平板呈現的樣式,如果沒有平板符號(藍框)表示所有段點都是共用的,無法個別編輯

Elementor 功能強大,精通以後70%的網站內容都可以完成,也是最多人使用的編輯器,網路上資源也很多。