iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

真,從零建置個人網站 30 天領域展開系列 第 19

【領域展開 19 式】初次使用 Elementor 編輯頁面

編輯器玩很大,Elementor 功能多多

今天本來預計要撰寫 WordPress 後台左手邊功能欄位的其他套件,還有 Elementor, Monsterinsights 跟 optionMonster 這三個要寫,但是一玩 Elementor 就發現時間過得飛快,也是一個拖拉的方便編輯器

今天主要是紀錄試用 Elementor 筆記/images/emoticon/emoticon08.gif

大家好,我是 Jade Chang
Statistic Information 畢業,入職場後於外商從事軟體技術行銷,長期規劃各種線上線下活動像是直播節目/帶狀線上教學,後期負責學生實習計畫與大專院校 Talent Cultivation 與技術社群行銷 Program 為主,過去一年轉任於台灣本土軟體開發商 PM,周旋於客戶、工程師與設計師之間並短期投身新創事業,近期轉換於新竹半導體產業,還在體驗適應中。


首先,簡單介紹 Elementor

Elementor 是 WordPress 熱門編輯器之一,可以從眾多建置 WordPress 網站的教學文當中不斷看到 Elementor 的出現,從官網的 demo 影片當中就可以知道他是一款用拖拉式加入各種功能的編輯方式,同時,Elementor 也有很多模板可以匯入

論版本來看有分成個人版與企業版,比較表如下圖,最大的差別應該是 support跟依照手上有的網站個數比較需要考量,如像我僅有一個網站的就個人版就可以使用了

然而這次會使用到 Elementor 主要是在購買 Soledad 的時候連同主題與編輯器都包成一包購買了,所以自帶 Elementor 頁面編輯器,不需另外購買,是於是不是專業版等後續嘗試後再與大家分享,不過對於初階使用來說應該都算夠用且非常方便了

再來,如何在 WordPress 網站中使用

先登入到 jadechang.blog 當中,Elementor 這個套件就落在左手邊功能其中一欄,前面提到 Elementor 自己也有提供很多模板可以插入頁面,所以在設定上可以去勾選要不要將 Elementor 主題匯入到 WordPress,因為可能會有主題與字型上的衝突,所以設定中可以調整

接著點選 Page,到想要編輯的畫面,會先進到 WordPress 編輯畫面,可以看到左上角有一個 edit with Elementor

點選後會看到很明顯的 Elementor logo 跟 loading,接下來的畫面就會是左手邊出現 Elementor 的編輯功能,是按照不同類型的效果過程一格一格的功能,選擇想要加入的類型用滑鼠拖曳到畫面上想要安插的地方即可,他也有像是使用 photoshop 的圖層概念,A 要在 B 之上或是複製 A 層等設定,可以先用眼睛把不需要的欄位遮起來比較 before and after

還有一個很酷的功能,就是在 Soledad 的佈景主題中再插入主題,在主畫面上按下+ 新增的符號,他會顯示詢問要加上

  • 新增哪類型的編輯樣式 (兩欄、三欄、欄位平均寬度嗎?)
  • 新增常用模組,假設有固定使用兩欄位+圖+輪播,可以設定為常用,這樣在不同頁面編輯時都能匯入此編輯模組
  • 新增 Pencidesign 提供的模組

點下 Pencidesign 的 icon,就會出現當初在選 Simple blog 這個樣式一樣的所有佈景,可以在主題中匯入主題,也可以按 block 選擇某一個喜歡的區域,按下 insert 就可以囉

我先會匯入一個主打包包的區塊,旁邊還有主題與說明文字,由於我有勾選 disable Elementor font and color,所以這款編輯區域的色系與字型都是跟著 simple blog (就是當初我選擇的樣式) 進行,避免視覺使顏色上的衝突

最後,常聽到的 Gutenberg 編輯器

簡單查詢,是 WordPress 在 2018 的版本提供的新版編輯器,主要的大概念是採用了「區塊」的概念,將所有網頁上的空間都區塊化,也是我們現在常看到可以被拖拉編輯的地方,讓使用者可以一個區域一個區域進行編輯與擺放像要安插的文字欄位、圖片欄位、表格或影片等各種資料型態

好像緣由是原本 Classic Editor 在使用選擇上大家會優先挑選 Elementor、Divi 這種所見即所得且拖拉式的編輯器,WordPress 才進階更新成新版編輯器,詳情可見Gutenberg 古騰堡編輯器終極懶人包 有清楚說明唷!

One more thing..

鐵人賽文章會 Delay 1-2 天同步放在 Medium
歡迎訂閱或是透過 Facebook 一起來交流 (求指導)/images/emoticon/emoticon32.gif

https://ithelp.ithome.com.tw/upload/images/20200915/20094570oG1ujl6HbX.png


上一篇
【領域展開 18 式】 我的 Bluehost 帳密不是我 WordPress 的帳密
下一篇
【領域展開 20 式】 Menu 修煉失敗紀錄手冊
系列文
真,從零建置個人網站 30 天領域展開30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言