影片教學
影片
今天我們要來聊聊， 網頁設計 要怎麼用我們的網頁編輯器打造一個響應式網站！
不管是手機、桌機還是平板，我們都希望網站能完美適應每種裝置。
透過 網頁設計 編輯器的預覽模式， 輕鬆切換不同的螢幕尺寸，
快速調整 Banner 高度、排列重要區塊，
讓網站在任何裝置上看起來都棒棒的！
也能靈活設定哪些內容在哪些設備上顯示或隱藏，
輕鬆達成 網頁設計 的呈現效果。
介紹 響應式網頁 設計
今天要跟各位介紹如何使用我們的網頁編輯器來製作響應式網頁。
現在，網頁瀏覽的設備有手機、桌機和平板，而每一個設備的寬度都不一樣。
我們要如何讓網頁適合在各個不同設備的寬度上進行瀏覽呢？
預覽模式介紹
在我們的網頁後台編輯器上，有五個圖案代表五種預覽模式。
這是桌機的預覽模式；
這是橫式平板的預覽模式，
這是直式平板的預覽模式，
然後這是橫式手機的預覽模式，
最後這是直式手機的預覽模式。每個模式的寬度都不一樣。
修改 Banner 的高度
接下來，我們來看看如何進行修改。
我們要修改這個 banner 的高度。
可能有些人會以為每一個高度都需要做不同的圖片，但其實不需要。
我們只要在編輯器上設定高度即可。
超過的高度部分會自動裁剪。
點擊這個 banner，你會看到有一個高度設定。
在桌機上，我們的高度設定為500px，橫式平板也是500px，
而直式平板我們設為450px，因為寬度比較窄。
橫式手機的高度設定為300px，而直式手機的高度設定為350px。
需要注意的是，這些預覽模式僅供編輯方便使用，
最終的顯示效果還是要以實際設備上的顯示為主，可能會有些微差異。
修改 網頁設計 重要區塊的顯示方式
接下來，我們要修改的是三個重要的區塊。
在桌機和橫式平板上，這三個區塊是並列顯示的；
而在直式平板上，也是三個並列顯示。
但在手機上，我們希望它們一行顯示一個。
要進行修改，點擊桌機預覽模式，
然後點擊藍色選項，再點選這個選項的區塊設定。
假設寬度設為100%，那每一個區塊設定為33%，
它們就會三個並列在一起。
而在手機部分，將區塊寬度設為100%，
它們就會變成一行顯示一個。
設定 網站 元件的顯示與隱藏
現在我們來看，
如果我希望這個 banner 只出現在手機上，
而不出現在桌機和平板上，應該如何設定？
點擊這個 banner，在出現的三個圈圈（三個小點）部分，
選擇選項，再選擇中間的「Responsive」分頁，
往下拉，你會看到有選項可以選擇是否隱藏在桌機、平板或手機上。
確認後按「Save」，這樣，這個 banner 就會在桌機和平板上隱藏，而只在手機上顯示了。
反過來說，也可以設定只在手機上隱藏，而在桌機和平板上顯示。
總結
目前這就是我們 響應式網頁 設計 的基本操作。
相關文章
響應式 網頁設計：如何在桌機與手機顯示不同圖片
https://des13.com/youtube/1589-youtube5.html
網站教學：無須程式碼，輕鬆做網頁
https://des13.com/youtube/1585-youtube3.html
網站後台系統：全功能、簡單易用的理想選擇
https://des13.com/faq/cms/joomla/1566-backend.html
網頁設計 頁面編輯器 Page Builder ：無需寫程式碼：輕鬆上手教學
https://des13.com/news/1563-page-builder.html
網頁設計 問與答：
網站建置 報價相關 https://des13.com/faq/quote.html
網站建置 技術相關 https://des13.com/faq/webtech.html
購物網站 網路開店 https://des13.com/faq/e-commerce.html
B2B形象官網建置 https://des13.com/faq/b2b.html
網站升級維護 https://des13.com/faq/upgrade.html
推薦閱讀：全後台模組化形象官網
簡易電子書下載：一頁式網頁設計電子書
如果您喜歡我們的文章，歡迎分享！也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡
全後台模組化形象官網，符合各式商業模式與需求，請參考：https://des13.com/service/rwd.html
Written by Ring
作者：益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗
