Canva 首頁

使用Canva程式碼建立互動式設計


本文係由機器翻譯而成。如發現錯誤,請告知我們。

Canva 程式建立工具可讓你創作出回應式的互動式設計,省去撰寫程式碼的技術難度。你有兩種方式可以使用「Canva 程式建立工具」:

  • 建立互動式的「程式建立工具」設計
    • 建立完整的互動式設計,例如登陸頁面、儀表板或作品集,並在 Canva 編輯器中編輯並發佈為網站
  • 在設計中加入互動式「程式建立工具」元素
    • 在另一個設計中製作測驗、計算器或圖表等互動式元素,並在多個設計中重複使用

祕訣

建立互動式的「程式建立工具」設計

若你想建立完整的互動式體驗,請使用「程式碼」設計類型。

  • 建立登陸頁面、儀表板、作品集等
  • 在 Canva 編輯器中編輯和調整
  • 發佈為響應式網站
  1. 在 Canva 首頁中,選取「程式碼」 。這將開啟 Canva 編輯器。
  2. 在 Canva 編輯器的
    「Canva AI」索引標籤中,先描述你的設計。輸入類似「設計方便使用的互動式鍛煉追踪工具」的提示。
  3. 或者,
    你也可以在「範本」索引標籤中瀏覽或搜尋範本。
  4. 你可以使用
    Canva AI或直接編輯來調整細節。請參閱編輯你的互動式 Canva 程式建立工具設計和元素,了解如何操作。

在設計中加入互動式「程式建立工具」元素

當你想要產生單一互動式元件時,請前往Canva AI ,然後「程式編寫」

  • 將測驗、計算器、圖表等建立為元素。
  • 將它們新增至簡報、白板或其他文件類型中。發佈為網站,或在多個設計中重複使用元素。
  1. 在 Canva 首頁中,選取
    「Canva AI」
  2. 在「提示」方塊中,描述你想建立的互動式「準則」元素。請在這裡深入了解 AI 提示。
  3. 選擇</> 程式碼
  4. 按下鍵盤上的 Enter 鍵或按一下
    提交按鈕。 Canva AI 會根據你的提示準備設計。
  5. 產生規範設計後,選取「在設計中使用」
  6. 「新增為元素到」下,選擇一種文件類型,將其新增為互動式的「規範」元素。
  7. 若要改善 Canva 程式建立工具產生的設計,請在側邊面板的聊天方塊中提示你調整內容。

注意:你可以從使用 Canva AI 的聊天討論串存取設計版本。

編輯 Canva 程式建立工具產生的互動式設計和元素

使用編輯器中的工具,提升 Canva 程式建立工具產生的設計。請查看編輯 Canva 程式建立工具產生的互動式設計和元素,了解詳情。

預覽並發佈設計

選取

「預覽」即可與你的設計互動。待一切看起來都不錯,你就可以將其發佈為網站。了解如何發布和管理 Canva 程式建立工具網站

注意:須在 Canva 上檢視設計,或將設計發佈為網站時,互動功能才有效。

存取、複製和管理 Canva 程式建立工具版本

每次你透過提示更新「Canva 程式建立工具」設計時,Canva 會自動在相同的聊天討論串中儲存新版本。這可讓你重新檢視較早的迭代、從先前的版本繼續編輯,或複制產生的程式以供外部使用。

檢視版本記錄

  1. 在 Canva 首頁開啟
    Canva AI
  2. 在提示欄下,選取</> 程式碼,以在側列中檢視你的 Canva Code 聊天。
    • 請注意:Canva 程式建立工具聊天旁的</> 圖示可識別這些聊天。
  3. 開啟 Canva 程式建立工具聊天討論串。
  4. 在側邊欄瀏覽可用的版本 (例如:版本 1、版本 2 等)。

備註:在同一個聊天室中繼續輸入提示,系統會自動建立新版本。

使用先前的版本

  1. 開啟 Canva 程式建立工具聊天討論串。
  2. 選取要使用的版本。
  3. 選取「在設計中使用」以繼續在 Canva 中編輯該版本。

檢視並複制代碼

您可以檢視 Canva 程式建立工具產生的基礎代碼,也可以將其複製到 Canva 以外的地方重複使用。

  1. 在Canva程式對話中,開啟「顯示程式碼」切換按鈕。
  2. 選取「複製代碼」,將其儲存至剪貼簿。

Canva 程式建立工具限制

  • Canva 程式建立工具支援 Canva 提供的所有語言,使用 canva.cn 的使用者除外
  • Canva 程式建立工具只會採納你輸入或使用的描述說明。你提供的背景和說明越多,效果就越好。
  • 程式碼可複制並重複使用,但無法匯出為檔案,也無法在 Canva 中直接編輯。

如果我的 Canva 程式建立工具網站無法發布,該怎麼辦?

如果你的 Canva 程式建立工具網站大型或複雜,尺寸過大的小工具可能會導致網站無法發布。你可以嘗試簡化網站,或將內容分成較小的網站或頁面。在同一個 Canva Code 聊天室中,嘗試向 Canva AI 輸入以下提示:

  • 「請簡化此網站,並減少尺寸過大的小工具/元件,以便網站能在 Canva 中發布。」
  • 「請將此清單分成兩個較小的可發佈網站/頁面。」

待 Canva 程式建立工具產生更新版本後,請嘗試再次發布。

秘訣:將內容分成較小的網站或頁面可能會有所幫助,因為每個已發布的網站包含的內容較少。如果你將網站分成幾個不同的已發佈網站,你將需要分別管理和分享這些網站的 URL。

我可以在 Canva 外重複使用程式碼嗎?

是的。複製程式後,你就能在自己的專案中使用程式。雖然設計專為 Canva 打造,你也可以針對外部工具或工作流程進行調整。

我可以將在 Canva 程式建立工具中的創作用於商業用途嗎?

就你與 Canva 的關係而言,在法律允許的範圍內,我們 AI 功能的輸入和輸出內容 (包括 Canva 程式建立工具和所產生的 Canva 程式建立工具) 擁有你的輸入和輸出內容,Canva 不會針對你的輸入或輸出內容提出任何版權所有權請求。 (包括建立的 Canva 程式碼)。如需更多詳細資訊和完整條款,請參閱我們的AI 產品條款

誰可以看到我使用 Canva 程式建立工具建立的內容?

只有你可以查看使用 Canva 程式建立工具的對話。當你按一下在設計中使用時,系統會使用該版本建立一個新的設計,你可以使用

「分享」按鈕分享設計 (包括 Canva 程式建立工具)。

如果你將設計發佈到網站,則存取控制由你在網站發布流動中設定的設定控制。

我可以管理團隊對 Canva 程式建立工具的存取權嗎?

如果你是管理員、教師或品牌設計師,就可以選擇團隊或班級中能存取 Canva 程式建立工具的人員

在首頁上找不到Canva程式碼? 深入瞭解Canva程式碼存取限制

為什麼我看不到變更的程式行數?

Canva 程式 now uses diff-based editing, meaning only the necessary lines of 程式 are updated instead of regenerating the entire block. This results in faster 意見回饋 when you're making small changes to your design logic.

如果在傳送提示後沒有看到程式碼行數變更,表示 Canva 正在背景中作業,僅套用必要的變更。請等待 Canva 程式建立另一個版本。

這對你有幫助嗎?

有幫助

沒有幫助

其他人也看了