【Elementor教學】了解預設、畫布、全寬,你必須學的「頁面布局」技巧

【Elementor教學】了解預設、畫布、全寬,你必須學的「頁面布局」技巧

你可以透過 Elementor 輕鬆地在你的網站進行佈局設計,不管是全版面、頁面寬、或是一個區塊,都可以輕鬆搞定!

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

什麼是頁面佈局?

頁面佈局,你可以想像一整個空白頁面,

想要分別把什麼放在哪裡,左上?右上?或是一整個版面?或只是小小區塊?

透過 Elementor 你可以自由地規劃版面。

在進入編輯頁面前,先選好「頁面佈局」

進到新增文章的頁面,於「右下角」有「文章屬性」,可以選擇想要什麼佈局。

Elementor頁面佈局
Elementor頁面佈局
  • 預設範本:佈景主題自帶的版型,保留原主題的元素,常用在「文章
  • Elementor 畫布:全空白版型,沒有頁首與頁尾,常用在「首頁
  • Elementor 全寬:保留頁首和頁尾,但100%全寬的內容寬度,也成用在「首頁

示範

❶ 預設範本

保留著右邊側邊欄的欄位,適合文章閱讀,不會太寬。

Elementor預設範本
可點擊放大,看得更清楚

❷ Elementor 畫布

頁首及頁尾消失,適合「首頁」的版面設計

可點擊放大,看得更清楚

❸ Elementor 全寬

保留頁首及頁尾,但右側邊欄消失,適合在文章中放置小橫幅⋯等等

Elementor全寬
可點擊放大,看得更清楚

進入編輯頁面後,如何從預設變更成「全寬」?

有時在編輯文章後,會需要一兩個小工具是100%全寬的功能,意思是 100% 展開,沒有側邊欄的佈局,不需要再回到文章設定更改了,透過「區塊的設定」就可以更改囉!

STEP 1:新增好全屏區塊

Elementor全寬
可點擊放大,看得更清楚

STEP 2:點選要全屏的區塊,將「拉伸段」打開

Elementor全寬
可點擊放大,看得更清楚

完成!

Elementor全寬
可點擊放大,看得更清楚

如何在編輯文章中「新增模板」?

進到 WordPress 後台 ➜ 新增文章 ➜ 使用 Elementor 編輯

在編輯頁面的最下方會出現

  1. 選擇你的架構
  2. 選擇範本區塊或頁面
Elementor版型

1. 選擇你的架構

可以選擇一個段落或很多個段落

Elementor版型

2. 選擇範本區塊或頁面

適合做首頁、首頁的 Menu,或是文章中想要套用特別的範本區塊

Elementor版型

利用拖移方式,加入左側欄工具

接著可以開始正式編輯你的文章了,利用「左側工具欄」,滑鼠點擊、拖移、放,把工具拖拉至你要的區塊,就可以進行編輯。

看15秒影片,學習拖移方式

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

網站使用工具

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

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

發佈留言