Elementor 教學小工具應用(一) - 標題文字與圖片影音設定方式

Elementor 小工具教學

Elementor 小工具教學 :

1. 標題文字教學及說明

2. 圖片影音設定方式

Elementor 小工具教學 在這篇文章中將說明如何使用 Elementor 為網頁加入標題、圖片以及影片,Elementor 是一套網站前端視覺編輯器,裡面具有許多已經完成程式碼建構的 widget (小工具) ,只需要在網頁模板上建立網頁區塊,再將小工具以拖曳的方式加入到網頁中,就能完成網頁編輯的動作,與 WordPress 原本只能輸入程式碼的編輯器相比,Elementor 在架設網站的速度上是非常有效率的。

如果你懂一些網頁程式碼,就會知道要修改網頁元素樣式,必須要寫入 CSS 才能控制位置、顏色等外觀,但使用 Elementor 小工具只需要在視覺化編輯器上提供的選項中做簡易操作,就能達到修改網頁樣式的目的。另外建議可以在自己的網站上先安裝 Elementor ,照著本文教學操作會更快上手喔!

Elementor Page Builder 外掛下載點:https://wordpress.org/plugins/elementor/

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

Elementor 操作說明手冊:https://docs.elementor.com/article/226-getting-started

• 使用 Elementor 加入網頁標題

第一步:以 Elementor 開啟頁面後,在畫面中央按下圖標,新增區域

Elementor 小工具教學

第二步:選擇需要的架構,按照圖形比例點選後插入即可。

Elementor 小工具教學

第三步:在畫面右側網頁編輯區域就會出現藍框,代表已經加入單一欄位的區塊。

Elementor 小工具教學

第四步:從左邊工具欄拖拉標題圖樣到剛剛新增的藍色框區域裡。

Elementor 小工具教學

第五步:會如果希望此標題可以套用既定的主題格式,可以選擇 HTML 標籤讓此小工具有相同屬性,如果對 HTML 沒有概念,在一般網頁編輯時選擇預設值即可。

Elementor 小工具教學

第六步:在左邊工具欄輸入標題、尺寸 (小提醒:h1標籤每頁僅使用一次)。

Elementor 小工具教學

第七步:可在左側工具欄樣式裡調整所需要的樣式,諸如顏色、大小等,因為介面是中文,在此就不多做說明。

Elementor 小工具教學

Elementor 小工具教學

• Elementor 圖片、影音小工具操作說明

第一步:和標題一樣從左側工具欄拖拉出圖片小工具。

Elementor 小工具教學

第二步:像畫面這樣,突然出現大圖像也不要驚慌,可以在樣式裡調整大小。

Elementor 小工具教學

第三步:點選左側工具列上的選擇圖片欄位。

Elementor 小工具教學

第四步:就會跳出媒體庫上傳圖片的畫面。

Elementor 小工具教學

第五步:上傳後按右下角插入媒體的按鈕。

Elementor 小工具教學

第六步:在樣式裡拉可以使用拉桿調整圖片大小。

第七步:加入影音的做法與圖片相同。

Elementor 小工具教學

第八步:特別要注意的是影音必須要選擇正確的來源,以網址加入影片會是比較好的做法。

Elementor 小工具教學

第九步:若要關閉影音播放控制器,要記得開啟自動播放,當然都是可以按照個人想法做調整的,另外在內容設定的地方也可以自己選擇影片開始及結束的時間。

Elementor 小工具教學

結語:

Elementor 小工具有很多種類,在之後的教學中鵠學苑會由淺入深逐一介紹常用小工具的特色與做法,希望讓想要架設網站的朋友們可以熟練的運用這套網頁編輯外掛,加快網頁編輯效率!

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WordPress 外掛 相關教學文章:

Contact Form 7 加入顯示條件,Conditional Fields 外掛教學說明

WordPress 特色影片 – Featured Video 讓文章顯示影片縮圖與連結

Elementor 教學 - WordPress 視覺化網站編輯外掛,基本操作及設定介紹

Essential Grid 教學,建立特色風格 WordPress 文章網格列表

WordPress 網站翻譯 外掛 – Loco Translate 中文化網站主題與外掛

Post Types Order 更改文章及圖片排列順序,WordPress 外掛教學

網站架設知識推薦閱讀:

如何在 Google Analytics 顯示 Facebook Instant Articles 流量?

Google FAQ 結構化資料啟用,讓問與答在搜尋結果中直接呈現

Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top