影片教學

網頁設計 網站教學:怎麼做 響應式網頁?

今天我們要來聊聊, 網頁設計 要怎麼用我們的網頁編輯器打造一個響應式網站!

不管是手機、桌機還是平板,我們都希望網站能完美適應每種裝置。

透過 網頁設計 編輯器的預覽模式, 輕鬆切換不同的螢幕尺寸,

快速調整 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設計之實務經驗

最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11樓之2(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
OMO電商 社群整合,輕鬆提升5倍轉換率,追蹤客戶行為,自動化行銷!想了解,快與我們聯絡! ×
點此加我們LINE 連結line帳號
Our website is protected by DMC Firewall!