> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teachify.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 課程銷售頁的圖片內容，要如何依不同的裝置，分別做設定？

Teachify 有支援 RWD（Responsive Web Design， **響應式網頁設計），讓你在不同裝置上，都能獲得流暢的使用體驗，無論是電腦、平板還是手機，都能完美呈現！

一般來說，我們在課程銷售頁放置一組圖片就可以了。但有些創作者，會想要手機版跟電腦版，分別使用不同的圖片，以達到更好的觀看體驗。

以下面示範圖片來說，左圖就比較適合桌機版網頁來閱讀；而右圖，則適合在行動裝置，如手機、平板來閱讀。

![](https://storage.crisp.chat/users/helpdesk/website/-/3/1/e/4/31e42744710f7a0/image_15cj7cm.png)
---

想讓電腦和手機分別看到不同圖片嗎？這篇教學將教你怎麼設定！

# 課程銷售頁圖片

當你在「課程簡介」區塊上傳圖片後，點擊圖片會出現一組設定工具列。

**預設狀態下，沒有勾選任何裝置圖示，代表這張圖片會顯示在所有裝置上（電腦、手機和平板皆可見）。**

![](https://storage.crisp.chat/users/helpdesk/website/-/3/1/e/4/31e42744710f7a0/image_15k4weo.png)
---

# 💻桌機專用圖片

若你希望這張圖片只在桌機裝置上顯示，請點選「 **桌機圖示**」，畫面會出現「 **Display on Desktop**」提示。

![](https://storage.crisp.chat/users/helpdesk/website/-/3/1/e/4/31e42744710f7a0/image_1gqxymf.png)

# 📱手機專用圖片

同樣地，若你希望圖片只在手機等行動裝置上顯示，請點選「 **手機圖示**」，畫面會顯示「 **Display on Mobile**」提示。

![](https://storage.crisp.chat/users/helpdesk/website/-/3/1/e/4/31e42744710f7a0/image_hwqdch.png)

這樣設定後，學員不管用電腦還是手機看課程，都能看到最適合的圖片版本，閱讀起來更清楚也更舒服。


![](https://storage.crisp.chat/users/helpdesk/website/-/3/1/e/4/31e42744710f7a0/image_bg7gtv.png)

# 🔁 圖片上傳順序

你可以自由安排圖片上傳順序，例如：

* 依序上傳「電腦版圖 1 ⭢ 手機版圖 1 ⭢ 電腦版圖 2 ⭢ 手機版圖 2」；
* 或者先上傳所有電腦版圖片，再上傳手機版圖片。

實際顯示時，使用電腦的學員只會看到電腦版圖片，使用手機的學員則會看到手機版圖片，兩種版本不會同時出現。

# ✏️ 單元內容設定裝置限制

課程單元內容的圖文編輯器，也同樣支援設定圖片的裝置顯示限制。

你可以前往：「章節管理 ＞ 單元內容 ＞ 新增圖文」，就可看到與前述相同的圖片設定工具。

![](https://storage.crisp.chat/users/helpdesk/website/-/3/1/e/4/31e42744710f7a0/image_1p88m3s.png)
---

如果以上說明都無法解決你的問題，或有任何建議，請點選右下角藍色 icon 跟我們聯絡，我們將會盡快回覆。