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

RWD響應式網頁設計

又稱作RWD網站(Responsive web design),意思是網站本身會根據使用者使用的裝置決定顯現的樣貌,比方說電腦螢幕是寬廣介面,而手機一般是直立式畫面,想當然不可能通用同樣的介面形式,這也就是為何一些較早建構的網站用手機預覽會發現介面全部擠在上方,而下半部都是空白內容了。目前市面上的手機使用情況已大幅增加,適用桌機螢幕的頁面已經不再適用,因此我們需要更彈性的介面來因應如此狀況。

WordPress RWD網站編輯

WordPress系統本身就已經內建包含了RWD響應式功能,因此不論是佈景主題還是頁面模板,在套用的時候就已經適用於多種介面,不過如果懂得如何逐一細部編輯,會讓整題的呈現更加有質感。以Elementor為例,其實介面是可以切換到不同裝置檢視、並且直接編輯。如上圖,在編輯列的下方都會有一個響應模式功能可以選取,比較常見的狀況是我們費心調整好電腦版的呈現之後,轉換到手機介面發現介面雜亂不堪,因此在介面完成之前請務必多執行此步驟,等到電腦、平板、手機都可以正常呈現時,才算完成。

Elementor響應式網站編輯

許多人在切換裝置編輯時會遇到一種狀況,比方說用電腦呈現是左右兩張圖片結合起來變成一張完整的畫面,但是切換到手機的版型時一行只夠容納一張圖,如果在手機板編輯列把尺寸調整一張圖片站化面比例50%(兩張圖片剛好滿版),會變成電腦版的圖片版型也跟著縮小,變成各版型都會受彼此影響,這時候就會需要用到上方功能。在使用響應式模式的時候,許多欄位都會增加不同的裝置調整列,可以選擇電腦版完整呈現,然後切換到手機板設定為一張圖50%的占比,如此一來電腦版跟手機板都會是兩張圖合併滿版呈現囉!

最後一種情況較常出現在網頁介面複雜的用戶,像是在電腦板時左邊呈現內容、右邊CTA按鈕,但是到電腦版由於介面狹長,想用上面呈現內容、下面放CTA按鈕,而前面講到的功能只可以設計不同版面的呈現大小、比例,不能做到完全不一的位置。解決方法如上圖,可以點選Elementor裡面欲編輯的素材,找到編輯列右上方的進階,往下滑找到響應選項,在這邊可以自訂部分內容在某些裝置不顯示,用方才的例子來說,就會是電腦版建立一個左右呈現的內容,然後在這區塊平板、手機不顯示開啟,同時再建立一個上下呈現的區塊,然後電腦、平板不顯示開啟,以此類推,如此一來在編輯的時候會在畫面上看到很多內容,因為你做了一個專門給電腦呈現的、一個給手機呈現的,而這些只是編輯畫面所以全部會呈現,前端使用者瀏覽時,只會顯示那個裝置對應的內容,重複的就不會出現囉!

發表迴響