本指南會說明如何使用投影片區塊,在文章或頁面中新增互動式圖片投影片。
此類投影片在網站中會呈現如下效果:
若要新增投影片區塊,請按一下「+ 區塊插入工具」圖示,然後搜尋「投影片」。按一下即可將區塊加入文章或頁面。
![螢幕截圖顯示如何透過區塊編輯器左上角的「+ 區塊插入工具」新增投影片區塊。](https://en-support.files.wordpress.com/2022/06/add-a-slideshow-block.png?w=696)
💡
你也可以用鍵盤在新的一行輸入 /
slideshow
,然後按 Enter 快速新增投影片區塊。
![螢幕截圖顯示在主編輯器區域中,如何在新的一行輸入「/」和「slideshow」來新增投影片區塊。](https://en-support.files.wordpress.com/2022/06/add-slideshow-block-with-slash.png?w=682)
若要瞭解詳情,請參閱我們關於新增區塊的詳細說明。
首次新增投影片區塊時,系統會提供兩個選項:上傳和選取圖片。
![範例顯示如何在投影片區塊中,從媒體庫、Google 相簿、Pexels 免費照片或 Openverse 圖片上傳或新增圖片。](https://en-support.files.wordpress.com/2022/06/add-images-on-the-slideshow-block-1.png?w=1024)
「上傳」可讓你從電腦上傳新圖片或多張圖片到網站。
「選取圖片」可讓你從媒體庫選擇過去上傳的圖片,或從 Google 相簿、Pexels 免費照片或 Openverse 圖庫選擇圖片。
你可以使用「上傳圖片選項」在投影片中新增其他圖片,該選項位於你建立的投影片下方。
![螢幕截圖顯示透過「上傳圖片選項」在投影片中新增其他圖片。](https://en-support.files.wordpress.com/2022/06/upload-images-to-slideshow.png?w=1024)
你可以使用工具列中的「編輯投影片」按鈕來新增或移除圖片,或是重新排列圖片的顯示順序。
![螢幕截圖顯示投影片區塊工具列中的「編輯投影片」選項。](https://en-support.files.wordpress.com/2022/06/edit-slideshow-button.png?w=556)
圖片會按你在建立投影片時選取的順序新增至投影片。你可以使用「編輯投影片」選項重新排序圖片。編輯投影片時,會在選取的每張圖片旁看到編號。此編號表示圖片在投影片區塊中顯示的順序。
按一下區塊即會在其上方顯示選項工具列:
![螢幕截圖顯示投影片區塊工具列](https://en-support.files.wordpress.com/2022/06/slideshow-block-toolbar-1.png?w=536)
投影片區塊的工具列有以下幾個選項:
- 變更區塊類型。
- 拖曳區塊。
- 將區塊上下移動。
- 變更對齊方式。
- 編輯投影片。
- 更多選項。
按一下區塊,右側邊欄會出現其他區塊設定。如果沒有出現側邊欄,可能需要按一下右上角的 ⚙️ (齒輪) 圖示叫出設定。
![螢幕截圖顯示右側邊欄的投影片區塊設定。](https://en-support.files.wordpress.com/2022/06/slideshow-block-settings.png?w=558)
投影片區塊有多種設定,你可以在「區塊設定」側邊欄中加以調整。
![](https://en-support.files.wordpress.com/2022/06/slideshow-block-sidebar-settings.png?w=411)
啟用此選項即可讓投影片自動在圖片間移動。
啟用後,投影片上會顯示暫停按鈕,讓讀者可以暫停播放投影片。你也可以選擇自動轉換之間的延遲時間 (以秒為單位):
![螢幕截圖顯示投影片區塊的自動播放切換開關和暫停按鈕,用於設定轉換之間的延遲時間。](https://en-support.files.wordpress.com/2022/06/autoplay-on-slideshow-block.png?w=1024)
在「效果」分頁中,你可以選擇投影片轉換的滑動和淡出效果。
![螢幕截圖顯示投影片區塊的滑動和淡出轉換效果。](https://en-support.files.wordpress.com/2022/06/slideshow-effects.png?w=548)
在「圖片設定」分頁中,你可以選擇投影片區塊的圖片大小,選項包括:縮圖、中、大和原始尺寸。
![螢幕截圖顯示投影片區塊的圖片設定。](https://en-support.files.wordpress.com/2022/06/slideshow-image-settings.png?w=552)
進階
進階分頁可讓你將 CSS 類別新增至區塊,以便編寫自訂 CSS,並視需要設定區塊樣式。深入了解。
![進階區段可讓你新增 CSS 類別到區塊。](https://en-support.files.wordpress.com/2018/12/image3.png)