WordPress網站架設教學-如何用Elementor建構響應式頁面

響應式網頁設計又稱作RWD網站(Responsive web design)，意思是網站本身會根據使用者使用的裝置決定顯現的樣貌，比方說電腦螢幕是寬廣介面， ... 跳至內容 搜尋 RWD響應式網頁設計 又稱作RWD網站(Responsivewebdesign)，意思是網站本身會根據使用者使用的裝置決定顯現的樣貌，比方說電腦螢幕是寬廣介面，而手機一般是直立式畫面，想當然不可能通用同樣的介面形式，這也就是為何一些較早建構的網站用手機預覽會發現介面全部擠在上方，而下半部都是空白內容了。

目前市面上的手機使用情況已大幅增加，適用桌機螢幕的頁面已經不再適用，因此我們需要更彈性的介面來因應如此狀況。

WordPressRWD網站編輯 WordPress系統本身就已經內建包含了RWD響應式功能，因此不論是佈景主題還是頁面模板，在套用的時候就已經適用於多種介面，不過如果懂得如何逐一細部編輯，會讓整題的呈現更加有質感。

以Elementor為例，其實介面是可以切換到不同裝置檢視、並且直接編輯。

如上圖，在編輯列的下方都會有一個響應模式功能可以選取，比較常見的狀況是我們費心調整好電腦版的呈現之後，轉換到手機介面發現介面雜亂不堪，因此在介面完成之前請務必多執行此步驟，等到電腦、平板、手機都可以正常呈現時，才算完成。

Elementor響應式網站編輯 許多人在切換裝置編輯時會遇到一種狀況，比方說用電腦呈現是左右兩張圖片結合起來變成一張完整的畫面，但是切換到手機的版型時一行只夠容納一張圖，如果在手機板編輯列把尺寸調整一張圖片站化面比例50%(兩張圖片剛好滿版)，會變成電腦版的圖片版型也跟著縮小，變成各版型都會受彼此影響，這時候就會需要用到上方功能。

在使用響應式模式的時候，許多欄位都會增加不同的裝置調整列，可以選擇電腦版完整呈現，然後切換到手機板設定為一張圖50%的占比，如此一來電腦版跟手機板都會是兩張圖合併滿版呈現囉！ 最後一種情況較常出現在網頁介面複雜的用戶，像是在電腦板時左邊呈現內容、右邊CTA按鈕，但是到電腦版由於介面狹長，想用上面呈現內容、下面放CTA按鈕，而前面講到的功能只可以設計不同版面的呈現大小、比例，不能做到完全不一的位置。

解決方法如上圖，可以點選Elementor裡面欲編輯的素材，找到編輯列右上方的進階，往下滑找到響應選項，在這邊可以自訂部分內容在某些裝置不顯示，用方才的例子來說，就會是電腦版建立一個左右呈現的內容，然後在這區塊平板、手機不顯示開啟，同時再建立一個上下呈現的區塊，然後電腦、平板不顯示開啟，以此類推，如此一來在編輯的時候會在畫面上看到很多內容，因為你做了一個專門給電腦呈現的、一個給手機呈現的，而這些只是編輯畫面所以全部會呈現，前端使用者瀏覽時，只會顯示那個裝置對應的內容，重複的就不會出現囉！ 發表迴響取消回覆評論名稱 電子郵件 個人網站 在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

搜尋關於： 近期文章 PicSee縮圖短網址分享教學-小編必備數位行銷工具推薦 如何開啟GA自訂快訊通知-GoogleAnalytics自動信件通知教學 DPA廣告是甚麼？電商必備的FB動態產品廣告介紹 查看國外地區SEO排名結果-SEOSearchSimulatorbyNightwatch模擬搜尋器 Google搜尋引擎演算法排名更新-2020年8月11日GoogleSearch結果演變 彙整 2020年9月 2020年8月 2020年7月 2020年6月 2020年5月 2020年4月 2020年3月 2020年1月 2019年12月 2019年9月 2019年7月 2019年6月 2019年5月 2019年4月 2019年3月 2019年2月 閱讀分類 FacebookAds GoogleAds GoogleAnalytics SEO WordPress 數位行銷 社群經營 網站外掛 網站工具 電子商務 滾動返回頁首 Posting....