找我們做網站
↑
Wordpress · Elementor 教學

Elementor 動態內容教學:讓標題、圖片、連結自動抓取網站資料

Elementor 教學發布 2019.08.26更新 2026.10.02閱讀約 4 分鐘
Elementor 動態內容教學:讓標題、圖片、連結自動抓取網站資料

重點整理
Elementor 欄位旁的「動態」按鈕可以把內容接到網站資料,例如網站標題、網站網址、精選圖片、網站標誌、作者名稱;資料一改,頁面上所有串接處都會同步更新。動態內容屬於 Elementor Pro 功能,本文示範基本設定與加入前後文字、備用內容。

Elementor 動態欄位 是一項非常方便的功能,可以在文字、圖片、網址等架設網站時容易出現重複內容時,就可以將讓欄位內容與網站中具有的數值做串接,而不需要在每一個頁面逐一輸入內容。另外還有一項滿重要的功能,就是動態串接的內容是具有連動的效果,比如說當修改了網址時,頁面中有串接網址的欄位也會隨之變動,只要在網站架設過程中有系統地運用此功能,之後在變動網站內容時就會少了許多反覆修改同一欄位內容的動作,可以說是 Elementor 編輯器各項功能中的精華所在,也是使用 Elementor 必學的項目之一。

Elementor 標題、圖片、網址動態內容說明

第一步:首先以標題來說,點選輸入框的動態按鈕。

Elementor 動態欄位
Elementor 動態欄位

第二步:出現的下拉選單就是網站內容中可以選擇的值,在這一步筆者選擇 Site Title 。

Elementor 動態欄位
Elementor 動態欄位

第三步:完成後就會顯示在設定中輸入的網站標題,動態按鈕也會變為藍色。

Elementor 動態欄位
Elementor 動態欄位

第四步:接下來設定連結,在動態內容中每一個欄位可以抓取的數值都會有相對應的項目可選擇,比如說我們這一步驟設定的是標題連結,在子選單中出現的就是文章、彙整頁、內部連結、短代碼等可用的連結,筆者在此步驟選擇 Site URL 。

Elementor 動態欄位
Elementor 動態欄位

第五步:完成後該文字區域就會自動建立網站連結,點擊後會回到網站首頁。

Elementor 動態欄位
Elementor 動態欄位

第六步:不只是文字,圖片同樣能做到動態顯示,不過圖片可串接的項目比較少,只有精選圖片以及網站標誌兩個位置可以選擇。

Elementor 動態欄位
Elementor 動態欄位

第七步:串接網站標誌後,可以在對應欄位中顯示,通常動態圖片內容都是用於自訂頁首時。

Elementor 動態欄位
Elementor 動態欄位

Elementor 動態內容進階應用

第一步:動態內容可選擇的項目也可串接作者資料,同樣點選動態按鈕後選擇作者名稱。

Elementor 動態欄位
Elementor 動態欄位

第二步:完成後就會顯示建立當前頁面的作者姓名。

Elementor 動態欄位
Elementor 動態欄位

第三步:如果說想要在再標題中再加入其他文字,可以點選小工具圖示後在進階小選單中編輯,之前之後就是字面上的意思,倒退是指當此位置串接的內容變更或無法抓取,可以預設一組顯示文字。

Elementor 動態欄位
Elementor 動態欄位

第四步:下圖是設定前後文字的範例。

Elementor 動態欄位
Elementor 動態欄位

動態內容可以串接自訂欄位嗎?

可以。除了網站標題、網址、精選圖片、作者等內建資料,Elementor Pro 的動態標籤也能讀取 ACF 等自訂欄位外掛的資料,例如商品規格、活動日期、講師照片。

常見做法是:

  1. 用自訂欄位外掛建立欄位,並在文章或頁面填入資料。
  2. 在 Elementor 主題建構器建立單篇範本。
  3. 把文字、圖片小工具的動態按鈕指定到對應的自訂欄位。

這樣編輯人員只要填欄位,不用進 Elementor 排版,版面也能保持一致。要注意欄位的回傳格式需與小工具相容,例如圖片欄位要回傳圖片資料而不是純文字。

常見問題

Elementor 動態內容是免費的嗎?

不是。動態標籤(Dynamic Tags)屬於 Elementor Pro 的功能,免費版欄位旁不會出現可用的動態按鈕。如果只需要串接少數欄位,也可以評估其他第三方擴充外掛,但要確認其維護狀況。

動態內容最常用在什麼地方?

最常用在頁首、頁尾與文章範本。例如頁首的 Logo 串接網站標誌、文章範本的標題串接文章標題、精選圖片串接文章的精選圖片,做一次範本就能套用到所有文章,資料修改時也會自動同步。

動態內容抓不到資料時會顯示什麼?

抓不到資料時欄位會是空的。可以在動態標籤的進階設定填寫「倒退」文字,當串接的資料不存在時就改顯示這段預設內容,避免頁面出現空白區塊。

結語

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。