您可以透過下列方法新增圖片和影片︰
- 使用 [匯入素材資源] 指令
- 從電腦檔案系統瀏覽器拖曳素材資源
- 存取 Studio 素材資源庫
- 建立圖片或影片元素並指定來源檔案
- 替換現有圖片
只要您在 Google Web Designer 中使用的本機圖片和影片屬於支援的類型，這些內容都會自動新增至資源庫，方便您輕鬆在文件中重新使用。
可擴充向量圖形圖片
您可以將可擴充向量圖形檔匯入為圖片或內嵌程式碼。
圖片與 AMP HTML 廣告
AMP HTML 廣告使用 amp-img 標記來取代 img 標記。當您在設計檢視模式下新增圖片時，Google Web Designer 會自動採用相應的標記。
影片與事件 (互動式影片)
如要將事件與影片搭配使用，請勿透過元素工具新增影片元素，而是改用影片元件。
影片廣告
影片廣告中的圖片和影片可當做媒體片段。
新增圖片或影片
匯入圖片或影片
- 選取 [檔案] 選單中的 [匯入素材資源...]，或者使用下列鍵盤快速鍵：Ctrl + Shift + I 鍵 (Windows) 或 ⌘ + Shift + I 鍵 (Mac)。
- 在對話方塊中選取您要匯入的檔案。
您選取的素材資源會顯示在工作區和資源庫中。
拖曳電腦上的檔案來新增圖片或影片
- 在電腦的檔案系統瀏覽器中選取您要新增的圖片或影片。您可以選取多個檔案。
- 將圖片或影片拖曳至 Google Web Designer 的文件工作區。
從 Studio 素材資源庫新增圖片或影片
- 在資源庫頂端的下拉式選單中選取 [Studio]。
- 按一下 [啟動] 按鈕即可與 Studio 素材資源庫建立連結。
- 如果您尚未登入，系統會提示您登入已與 Studio 帳戶建立關聯的 Google 帳戶。
- 瀏覽資料夾架構，找出您要使用的素材資源。
- 將該素材資源從資源庫中拖曳至文件工作區的適當位置。
系統會在本機資源庫的「studio」資料夾中新增該素材資源的副本。
替換文件中的圖片
您可以使用「切換圖片」功能來替換既有的圖片，這項功能相當適合用來替換範本中的圖庫圖片。
- 在您要替換的圖片上按一下滑鼠右鍵。
- 從彈出式選單中選取 [替換圖片...]。
- 在對話方塊中選取資源庫內的圖片，或按一下「匯入素材資源」圖示
從電腦匯入圖片。
- 按一下 [確定]。
從電腦匯入圖片。如果找不到 [切換圖片...] 指令，請確認您已選取圖片，而非重疊在圖片上方的父項元素或其他元素。您可以透過大綱工具面板輕鬆查看自己選取了哪個元素。
使用元素工具新增圖片或影片
- 選取工具列中的「元素工具」圖示
。
- 選取工具選項列中的「圖片元素」圖示
或「影片元素」圖示
。
- 在工作區按住滑鼠左鍵並拖曳線框，即可依需求建立指定大小的元素。
- 在「屬性」面板中設定圖片或影片的來源。
系統會調整圖片大小，並依照您繪製的元素尺寸適當延展圖片。影片則會保留原本的長寬比，並顯示您繪製的元素所能容納的最大尺寸影片。
使用本機資源庫中的圖片和影片
「資源庫」面板會顯示您已新增到這份文件中的圖片和影片。
- 在「資源庫」面板中點選圖片或影片的名稱，選取您要使用的素材資源。
- 將素材資源拖曳至工作區的適當位置。
Google Web Designer 會將本機資源庫的素材資源檔案副本儲存至您的電腦檔案系統，您可以前往 Google Web Designer 專案資料夾內的 assets 子資料夾查看這些檔案副本。
調整圖片和影片大小
新增圖片或影片後，您可以依需求調整大小和縮放方式。
預覽影片
針對影片元件或影片廣告，您可以在 Google Web Designer 介面中預覽影片。
如果想查看影片在專案中的顯示情形，請按一下右上角的 [預覽] 按鈕，透過慣用的瀏覽器預覽文件。請注意，這種做法不適用於影片廣告。