【Elementor教學】如何使用「全域工具、複製樣式」快速編輯頁面和文章?

【Elementor教學】如何使用「全域工具、複製樣式」快速編輯頁面和文章?

這一篇會告訴你如何透過內建功能「更快速的使用 Elementor 編輯的技巧」,大幅降低編輯頁面的時間

如果你還沒下載安裝 WordPress 頁面編輯器 Elementor 的免費外掛,或是還不知道 Elementor 是什麼,可以參考上一篇:
【Elementor 教學】 WordPress 最好用的頁面編輯器,基本操作及設定介紹

使用「全域」工具,快速編輯網站內文章

什麼是全域工具?

在所有的頁面中你可以「儲存已經設計好的版型或工具樣式」,下次再編輯時,直接拖移出來放在頁面或文章內,就不用再另外編輯樣式了!

全域工具有兩種使用的方式:

  1. 當成「可以統一編輯全部內容」的全域工具
  2. 當成「模板」使用的全域工具

依序跟大家細細解釋:

編輯單一文章,編輯所有文章有「全域工具」的內容

如果你文章大都透過 Elementor 編輯,可以透過編輯單一文章的全域工具,就能編輯所有文章內有「全域工具」的內容。

但如果你是部落格形式的網站,建議不要每篇都使用 Elementor 編輯,累積多篇之後會降低網站速度

畢竟 Elmentor 是「頁面編輯器」,不是「內容編輯器」唷!

但如果你是單一品牌網站,只有十幾個頁面,不會再陸續新增文章,那麼你可以每篇都使用 Elementor 編輯,是沒問題的!

通常文章內總是有一些「每一篇都會出現的文字」,

例如於頁尾的「延伸閱讀」、「關於網站」或一些「廣告文」,

這時候你可以儲存成「全域工具」,

只要編輯其中一篇當中的全域工具,

就能快速編輯所有文章內有你正要編輯的全域工具裡的內容及樣式了!

如果你還是不懂,你可以想成是 Youtuber 總是在影片的最後說:「如果你喜歡這部影片,歡迎訂閱我和追蹤IG,還有開啟小鈴鐺唷!」這就是 Youtube 圈的全域工具。

如何新增全域工具

範例 1

強尼 CEO 是英文教學網站的創辦人,製作了一個「個人形象品牌」,想要放在每篇文章的頁尾,希望可以被大家記住,可是不想要每一篇又要重新設計個人形象品牌,而且這不是時常需要更改的內文,因此強尼選擇將個人形象品牌新增至全域工具,並放在頁尾。

強尼 CEO
教大家學習英文
範例 2

強尼 CEO 想要放延伸閱讀在每個「發音分類」的文章頁尾,他選擇透過「全域工具」的方式,以後新增發音分類的文章直接在單篇編輯,改一篇套用所有發音分類的文章。

STEP 1

設計好喜歡的樣式,右鍵 ➜ Save as a Global(儲存成全域小工具)

Elementor全域工具設定
可點擊放大,看得更清楚

STEP 2

為全域小工具「命名」,並按「儲存」。

Elementor全域工具設定
可點擊放大,看得更清楚

完成!

你儲存的全域工具會出現在左邊工具欄的「全域欄位」。

Elementor全域工具設定
可點擊放大,看得更清楚

當成「模板」使用的「全域工具」,要「取消關聯」!

模板是什麼?

例如一個範本、版型,只是想要它的樣式,而不想要裡面的內容,就可以稱為「模板」。

經驗

安布會把常用的「標題、按鈕、設定好的板塊⋯等等常用的小工具」,

新增至「全域工具」,當成「模板」使用,

並取消「全域關聯」,這樣以後編輯時,

就不會改到所有文章的標題⋯等等。

記得當成「模板」使用的全域工具,要「取消關聯」。

如何應用全域工具

從「全域工具欄」拖拉至你要放置的文章位置中

Elementor全域工具設定
可點擊放大,看得更清楚

接著左邊工具欄會出現「編輯全域小工具」或「取消全域關聯」的選項

  1. 若只是當成「模板」使用的話,就可以「取消關聯」,例如標題、普通方框⋯等等。
  2. 若未來想「統一編輯全部文章」,就不要取消關聯,按「編輯」即可。
Elementor全域工具設定
可點擊放大,看得更清楚

在 WordPress 內建的古騰堡編輯器中,插入 Elementor 內容方法

如果超過網站中有超過十幾篇以上都是用 Elementor 編輯的文章,

其實會降低網站速度,因為 Elementor 是頁面編輯器,不是內容編輯器唷!

所以最理想的方式是,大部分文章都使用 WordPress 內建的 Gutenberg 內容編輯器編輯文章,Elementor 就使用它編輯網站的首頁、分類頁面、選單(Menu)、頁尾。

如果在 Gutenberg 內容編輯器中,想單獨插入 Elementor 的內容,可以利用「自訂 html」

在古騰堡中插入「自訂 html」

如何在Gutenberg中插入Elementor

插入 Elementor「短碼」

再把 Elementor 的 Templates 模板中,你想插入的「短碼」,放到「自訂 HTML」中,就可以了!

使用「複製」功能,快速複製工具樣式

「複製」又可以分為兩種功能:

  1. 會「自動貼上」的複製
  2. 需「手動貼上」的複製

會「自動貼上」的複製

整個區塊複製,於複製區塊的下一個位置「自動貼上」

Elementor複製設定

需「手動貼上」的複製

可以實質的貼上區塊,或是樣式的套用。

  1. 複製+貼上:區塊的貼上,可以至你想要的區塊貼上,用於長文章中非常方便
  2. 複製+貼上樣式:樣式的貼上,適用於「相同工具」上進行「樣式」的複製與貼上,例如直接複製已經設定好有陰影的圖片,套用在已經新增的沒有任何樣式的圖片上,方便進行文章統一樣式的編輯
Elementor複製設定

於不同篇文章中「複製、貼上」

如果懶得新增模板或管理全域小工具,也可以在編輯文章的同時,「開啟已經寫好的文章」並進到「Elementor 編輯」畫面,在「想要複製的區塊」上按右鍵「複製」,再切換到「正在編輯的文章」中,在你想要貼上的欄位,按右鍵「貼上」,就可以複製完全一樣的區塊進來囉!非常方便!

但不適用於不同網站的文章。

延伸閱讀:6 個寫出優質文章,幫助文章排名技巧
你知道「內容專業度」是影響文章排名最重要的環節嗎?這篇要教你透過 6 個內容技巧、3 個文章排版方式,寫出能讓google搜尋引擎排名的文章!

這個網站是用 Elementor Pro 打造的,如果你跟安布一樣,是自己架設並經營網站,對於改善網站外觀、風格營造、排版優化有興趣,可以先試用 Wordpress 免費的 Elementor 頁面編輯器外掛,可以幫助你在文章排版和網站外觀上,有更多的突破!

網站使用工具

知識有價,我們都能透過一點努力,出售技能。

Anbu Course
我是 Anbu
分享實用課程、網站經營

發佈留言