如何編輯網頁圖、文
如何編輯網頁圖、文

如何編輯網頁圖、文 /part 1:大圖輪播、文字內容、圖集

教你如何編輯修改大圖輪播替換圖文、標題、文字內容編輯、更換 Gallery(圖集) 圖片。
目錄

Elementor教學:在這篇文章中將說明如何使用 Elementor 為網頁編輯圖、文內容,Elementor 是一套網站前端視覺編輯器,裡面具有許多已經完成程式碼建構的 widget (小工具) ,只需要在網頁模板上建立網頁區塊,再將小工具以拖曳的方式加入到網頁中,就能完成網頁編輯的動作,在網頁編輯上也較簡單易懂,可以輕鬆地完成編輯圖文的動作。

本篇教學以 demo-001 作示範,以下教學將會用圖片及文字的方式呈現。

大圖輪播替換圖文

一進到網頁我們會看到大圖輪播。

T demo008
大圖輪播

如何編輯輪播中的圖文呢?我們進到使用Elementor編輯的後台後,在圖上點按右鍵。

T demo001
在編輯網頁中的輪播圖上點右鍵,並按編輯Slides

左側編輯區就是主要更改圖文的地方,除了編輯原有的圖文,也可以看到新增項目

T demo002
左側會跑出編輯區域

目前有三張輪播圖,因此有三個項目,點按項目之後就可以編輯圖片及圖中的文字。

編輯完成後,記得按下更新儲存,以免編輯後的內容不見(養成按下儲存的好習慣!)

標題、文字內容編輯

往下滑,我們可以看到介紹的區塊。

T demo009
標題、文字內容編輯

同樣的,我們在欲編輯的文字旁邊點選右鍵,或是直接在文字上按左鍵。

滑鼠移到文字上方時會跑出藍色區塊,可以在藍色區塊右上方的鉛筆圖示點選右鍵

同樣在左側就可以看到編輯欄位出現,文字編輯器也有一些基本功能,例如粗體、斜體等等。

樣式的區塊可以修改文字的對齊方式、字型、大小、行高等等。

更換 Gallery(圖集) 圖片

接下來,我們可以看到四個正方形的圖片,屬於圖集。

T demo0017 1
Gallery

同樣地在圖上點選右鍵後,編輯Gallery。

T demo0018 1
左邊區塊為編輯區域

點按圖片區可以更改圖片,Order by 則是圖片排列的順序,現在是選擇 Random(隨機排列),每次重新整理後圖片的排列順序都不同。也可以選擇 Default(預設值),就會依照後台的圖片順序做排列。Link 的部分則是點選圖片後會呈現什麼,現在是 Media File(媒體檔案),點選圖片後會出現該圖的畫面,另外有 NoneCustom URL(連結) 可以選擇。

T demo0019 1
點按圖片區或跑出編輯圖庫的視窗

可以先把原來的圖片刪除(按叉叉按鈕),再點選新增至圖庫,可以上傳新的圖片或是選擇媒體庫原有的圖片,選擇四張圖片後在右下角點選新增至圖庫,會回到這個畫面,再按右下角的插入圖庫就大功告成!而這裡的圖片順序就是預設值會出現的圖片順序,若要變換順序,可以將圖片前後拖曳更換位置。

其他教學文章

各種ChatGPT及AI工具應用、指令手冊、解決方案,每週更新。
學習最新AI工具,就上Learn AI
AI如何讓工作更輕鬆、更有效率?立刻學習!
LA廣告-1
LA廣告-2
LA廣告-3
Related Post
最新文章
Canonical url 標準網址
URL 是什麼?完整解析與最佳 SEO URL 設計指南

深入介紹「URL(統一資源定位符)」的定義、結構與運作方式,說明 URL 與 URI/URN 的區別、絕對與相對 URL 的應用,並整理適合搜尋引擎優化的 URL 設計原則,幫助網站管理者打造既友善又易讀的連結。

WP預約網站-1
訂房網站架設:打造專屬線上訂房系統

在數位化浪潮中,擁有專屬訂房網站已成為旅宿業者提升品牌力、掌握客源並優化營運的關鍵策略。本文整合專業觀點與實戰經驗,從品牌塑造、功能需求、系統串接到視覺設計,全面解析訂房網站架設過程中的重要環節與最佳實踐,助您打造高效、可靠且具差異化競爭優勢的線上訂房管道。

Selected Post
精選文章
WordPress SMTP
SMTP是什麼?收不到 WordPress 網站的信?

如果您注意到無法收到您的WordPress網站發送的郵件,這可能表示您的網站尚未設定SMTP(簡單郵件傳輸協定)。本文將解釋SMTP是什麼,並解釋為什麼它對您的郵件傳遞如此重要。讓我們來探討解決這個問題的方法!

網頁設計推薦
網頁設計推薦2025更新!13 個激發靈感的網站

正在設計網站卻靈感枯竭嗎?我們為你精選了 13 個超實用的網頁設計推薦網站,從歐美大膽前衛到日本極簡清新,匯集全球頂尖設計師的精彩作品,幫助你打破設計瓶頸,激發視覺靈感。每一個網站都可能與你的創意撞出新火花,無論是品牌、排版、配色或互動體驗,通通找得到!

什麼是VPS主機
VPS主機是什麼?網站效能升級的最佳選擇!

現今,網站及應用程式的需求不斷增加。如果你不是一個專業的網站開發人員,你可能會對虛擬專屬伺服器(VPS)主機一知半解。本文將向你說明VPS主機及其優勢,以及什麼是主機代管,讓你更容易理解並做出明智的選擇。