區塊

區塊 »圖片區塊

使用圖片區塊為頁面和文章增添視覺風采。

目錄

新增圖片區塊
區塊工具列
新增圖片
編輯圖片
調整圖片大小
對齊圖片
寬幅和全寬圖片
說明文字
連結設定
區塊設定
圖片設定
進階

新增圖片區塊

按一下「新增區塊」按鈕,即可將圖片區塊新增至頁面。或者,你可以輸入 /image 並按下 Enter 鍵。

你使用的是傳統編輯器嗎?請改為參考此處步驟

使用快速鍵命令新增圖片。
使用斜線命令新增圖片。

你可以在此處取得新增區塊的詳細指示。


↑ 目錄 ↑

區塊工具列

每個區塊都有其區塊專用控制項,可讓你在編輯器中直接變更區塊。下方是圖片區塊工具欄的範例。

圖片區塊工具列上的圖示,由左至右分別是:

  • 變更區塊類型
  • 變更對齊方式 (靠左、置中、靠右;佈景主題支援時另有寬幅和全寬選項)
  • 編輯圖片
  • 插入連結
  • 更多選項

新增圖片

你可以透過三個選項載入媒體選項面板,分別是「上傳」「媒體庫」以及「從 URL 插入」

你可以透過三種方法新增圖片,分別是「上傳」、「媒體庫」以及「從 URL 插入」。
你可以透過三種方法新增圖片,分別是「上傳」、「媒體庫」以及「從 URL 插入」。

「上傳」「媒體庫」可讓你新增媒體或從媒體庫選擇媒體,並將其嵌入頁面中。

從「上傳檔案」分頁中新增圖片,然後在「媒體庫」分頁中選取圖片即可。在「媒體庫」視窗中自訂圖片附件的詳細資料 (例如「標題」、「說明文字」、「替代文字」和「描述」),對於 SEO 和日後瀏覽你的媒體庫也有所幫助。

從「媒體庫」上傳或選取圖片、新增圖片資訊,然後按下「選取」。
從「媒體庫」上傳或選取圖片、新增圖片資訊,然後按下「選取」。

你也可以在由 Pexels 提供的免費圖片庫中搜尋圖片。按一下「媒體庫」,然後按一下彈出視窗左上角的圖片圖示。選擇「Pexels 免費照片」即可搜尋圖片。在顯示「搜尋免費照片」的空格中輸入文字或字詞以尋找圖片。找到圖片後,在圖片上按一下即可嵌入文件中。

在 Pexels 提供的免費圖片庫中搜尋圖片

你可以在此處深入瞭解免費圖片庫


編輯圖片

此選項可讓你為區塊選取新的圖片檔案。如果需要取代圖片區塊中的圖片檔案,或要變更「標題」或「替代文字」,請使用此選項。


調整圖片大小

將圖片新增至編輯器之後,你可以調整圖片大小並對齊圖片,使其更能符合周圍內容。

拖曳圖片控點以調整大小。
拖曳圖片控點以調整大小。

若要調整圖片大小,請按一下圖片以顯示調整大小控點。然後按一下調整大小控點,並將圖片拖曳為所需大小。

或者,在右側的區塊設定中調整寬度和高度尺寸,也可微調圖片大小。區塊設定中還提供一些方便的選項,讓你將圖片設定為原始大小的 100%、75%、50% 或 25%。


對齊圖片

對齊段落區塊內的圖片。
對齊段落區塊內的圖片。

如果你希望對齊段落中的圖片,首先需要在目標段落區塊正上方插入圖片。

「對齊」按鈕以及醒目提示的「靠左對齊」

按一下圖片,選取靠左或靠右對齊,這麼做會將圖片合併至段落區塊。

最後,將圖片大小調整至所需的寬度和高度。


寬幅和全寬圖片

由於我們的佈景主題已新增對新編輯器的支援,因此你會看到寬幅和全寬圖片的圖示。這兩種圖片大小可讓你將圖片延伸到超出佈景主題的一般內容寬度。

編輯器中的「寬幅」圖片。
編輯器中的「寬幅」圖片。

說明文字

你可以透過兩種方式為圖片新增說明文字。如果你希望將說明文字新增到圖片的單一執行個體,在編輯器中圖片下方的說明文字空間中輸入內容即可。

如果你希望圖片的所有執行個體都顯示相同的說明文字,則需要按一下圖片區塊上的編輯按鈕,並將說明文字新增至媒體庫中的圖片。


連結設定

連結設定可讓你設定圖片的超連結。你可以選擇按一下圖片是否要開啟附件頁面、原始媒體檔案,或你所選的自訂 URL。

如果選擇「自訂 URL」,請在「連結 URL」方塊中輸入要連結圖片的 URL。按一下方塊旁的向下箭頭,即可選擇是否在新分頁中開啟連結。

你的圖片可以連結到附件頁面、媒體檔案或自訂 URL。

↑ 目錄 ↑

區塊設定

除了區塊工具列中的選項以外,編輯器側邊欄也會顯示每個區塊的特定選項,其中可自訂的項目也比區塊工具列選項多。如果看不到側邊欄,請按一下「發佈」按鈕旁的「小齒輪」圖示。

區塊設定位於側邊欄中。
區塊設定位於側邊欄中。

圖片設定

你可以依百分比或像素尺寸變更圖片。

圖片設定提供一個文字欄位,可讓你新增「替代文字」描述,對無障礙輔助和 SEO 非常重要。

你也可以以 25% 遞增或精確像素尺寸來變更圖片的寬度和高度。

你可以透過多種方法從 WordPress 編輯器變更圖片大小。
你可以透過多種方法從 WordPress 編輯器變更圖片大小。

進階

進階分頁可讓你將 CSS 類別新增至區塊,以便編寫自訂 CSS,並視需要設定圖片區塊樣式。瞭解更多。

進階區段可讓你新增 CSS 類別到區塊。
進階區段可讓你新增 CSS 類別到區塊。

頁面: 1 2

Not quite what you're looking for?

取得說明