【Divi教學】響應式手機平板頁面設計教學,讓你的網站怎麼看都好看!

by

【Divi教學】響應式手機平板頁面設計教學,讓你的網站怎麼看都好看!

by

響應式頁面指的是,當你的顧客不論用電腦、手機、平板瀏覽網站時,網站內容可以自動適應裝置大小的不同,而改變整個網站版面,將圖片、文字、元件大小都調整成適合觀看的模式。

在過去,響應式網站是一種優勢,但在現代這個人人手機不離身的環境下,響應式網站變成了一種必備要素,若你的網站無法自動提供適當的版面大小給用戶,那將會流失掉非常多的潛在客戶。

Divi編輯器提供了電腦、平板、手機的即時預覽畫面,讓你可以在設計網站當下,馬上確認該頁面在不同裝置上的效果,並且提供個別設定選項,讓你能夠自行調整每個裝置的數值大小,確保每一個用戶都能在你的網站有良好的使用體驗。這篇文章,我會教你如何查看各個裝置的預覽畫面,以及如何調整其個別數值設定,以及透過顯示設定,將任何你不想要顯示的元件隱藏。

1.查看電腦、平板、手機畫面

在你進入Divi Builder時,點開下方三個點點的紫色圓圈,會看到如下圖,可以調整整個頁面的設定。而左下角的灰色選項條,從左至右個別是列表、整體預覽、電腦預覽、平板預覽以及手機預覽。你可以在編輯網站時,隨時進行切換,確認你的內容可以完美地顯示在這三種裝置上。


2.調整個別數值設定

那麼學會如何預覽不同裝置的畫面後,當發現有些內容在其中一種裝置上,出現過大或過小的問題,該怎麼處理呢?

在Divi編輯器中,大多數可調整的選項,都可以針對裝置,進行個別設定,以下以文字大小作為舉例,將你的滑鼠游標,移到Text Size右邊時,Divi編輯器會自動滾出幾個圖示按鈕(如果沒有自動出現,點點滑鼠左鍵兩下就可以囉),點擊中間有個像是手機的圖示,會叫出下方三個裝置的選項。

假設你只有設定電腦裝置的文字大小,後面的平板與手機裝置,將會跟著電腦版本的設定,如果你只設定了電腦與平板的文字大小,那手機裝置將會依照平板的數值顯示文字大小。

如果在經過一番設定後,都不滿意的話,可以點選第四個圓圈箭頭的圖示,就會將所有設定歸回初始狀態囉。


3.顯示設定

有時候我們如果希望某些Section、Row、Module,只出現在電腦或手機畫面,可以跳到Advanced欄位,把不想要出現的裝置勾選,就能針對裝置作個別隱藏Disable


舉例示範

我通常會在Theme Builder裡面建立頁首的選單列,並且針對電腦用戶以及平板手機用戶,設計出不同的選單內容。

電腦用戶因為螢幕大,可以看到比較全面的網站設計,我會設計一個專門給電腦用戶的Section,並且在Advanced→Visibility中,將手機Phoen跟平板Tablet隱藏,以避免造成手機用戶瀏覽上的不適。

手機用戶的Section,內容會盡量單純,不加入過多複雜花俏的圖示,並將選單的高度限制在50px以內,以免手機用戶在瀏覽文章時,有一大部分的畫面被選單遮擋,最後在Advanced→Visibility中,將電腦Desktop隱藏,就不會讓電腦用戶看到兩個選單啦。


如果你對於這篇文章有任何疑問或者建議,都歡迎你在底下留言給我喔:)

本文作者 – LiLing

90後的台灣女生,目前正於紐西蘭擔任多媒體設計師,擅於利用Wordpress建立網站,分享各種不必使用程式語法,也可以架設網站的101種方法。

👋

Hi, I’m LiLing 

在紐西蘭任職多媒體設計師,擅於利用Wordpress建立網站,搭配Divi主題,分享各種不必使用程式語法,也可以設計網站的101種方法。

🌟

折扣優惠

🙌

社團交流

歡迎你加入Divi使用者討論平台,有任何問題都可以在上面向我發問:)

👩🏻‍💻

線上教學

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *