Divi mobile banner|Divi mobile 順序

2 步驟變更 Divi mobile 版面排序?CSS 欄位是關鍵!

不少人在使用 Divi builder 排版時,想調整手機的排版順序,讓手機的訪客能有更好的視覺體驗,但在更動時,不想更改原有的電腦版面,可以怎麼做呢?

其實是有方法去個別調整 Divi mobile 版面,這篇文章會教大家怎麼去設定,修改 CSS 欄位。

讓我們一起看下去吧~:)


1. 只改變 Divi mobile 版面前後順序?

RWD 響應式設計 」是在設計網頁時,很重要的一大環節,因為會攸關於訪客的使用體驗,不同的設備(電腦、平板及手機)呈現出來的觀看畫面完全不一樣。

因此,網頁設計需要配合螢幕尺寸,進行進階調整,讓訪客在各種設備上都能方便閱覽。

至於說要如何做到 響應式網頁(RWD) , 關鍵在於「同一個 CSS 檔案」,桌機、平板及手機都是用同一個 HTML 代碼跟同一個 CSS 檔案,所以才可以符合各種螢幕寬度條件。

這也代表著,網頁排版會根據不同的設備而改變!

如果「只想改變 Divi mobile 版面」可以怎麼做?

更換手機模塊位置|Divi 順序
更換手機模塊位置

舉例來說,電腦版的文字在左邊、圖像在右邊,然後手機版的圖像是在上面、文字在下面。

我想要讓手機使用者在閱讀文章時,優先看到圖片,接著是文章內容,但電腦的圖文版面是不要更動,若要圖像跟文字位置互換,就要更改模塊位置。

不過一旦更動是三種設備的版面一起更改,而 Divi 的功能是「無法個別更改設備模塊順序」,這時候我們只需要「更改 CSS 編碼」就可以了!


2. Divi mobile 版面的更動步驟

我們要更動的位置是「手機的 CSS 編碼」,只需要增加代碼就可以更改手機版面的前後順序。

STEP 1. 開啟 Row(行)設定,編輯 CSS。

開啟 Row 編輯|Divi 順序
開啟 Row 編輯

首先,我們打開 Row(行)設定,進行內部所有模塊的編輯,如果只單獨選擇模塊編輯,無法做出版面順序更換,必須編輯 Row 以內的模塊。

編輯 CSS|Divi 順序
編輯 Row 的 CSS 欄位

進入 Row 的設定介面,我們點選 Advanced ,裡面有一個 Custom CSS,開啟 CSS 的欄位後,會有好幾個黑色小視窗,複製下面這組代碼,貼在 Main Element 的欄位裡(電腦版型)。

display: flex;
flex-wrap: wrap;

STEP 2. 設定模塊的順序編號

編輯 Row 的所有模塊|Divi 順序
編輯 Row 的所有模塊

我們設定好 Row 的 CSS 介面後,要來設定 Row 以內的模塊,先從模塊一(文字模塊)開始編輯!

模塊一(文字模塊)貼上代碼|Divi 順序
模塊一(文字模塊)貼上代碼

進入編輯介面後,我們在 Advanced 裡找到 Custom CSS,打開來後選擇 Main Element 的欄位,這時候我們要選擇「手機(mobile)的版型」,將下方這組代碼貼進去欄位裡。

order: 2;
模塊二(圖像模塊)貼上代碼|Divi 順序
模塊二(圖像模塊)貼上代碼

接下來編輯模塊二,步驟跟模塊一完全相同,但唯一差別在「輸入的代碼數字不同」,這邊我們要輸入「order: 1;」的代碼。

order: 1;

會各別在這兩個模塊裡編輯代碼編號,主要原因是「單一排序模塊展示的先後順序」,所以先出現的就列「order: 1;」,若是有 3 個以上的版型需要自訂排序,用這方式去編列1、2、3、4等任意數量,以此類推。

編輯完畢後,我們旁邊的手機預覽版面就會更動,原本在文字下方的柴犬,就會變成文字上方,而網頁版本的版面維持位置不變。


3. 更改後的效果比對

這一章節給大家看看,更改後的效果比對!

首先是原本的網頁版型跟手機版型,手機版型是文字在上方、柴犬圖像在下方;更改後變成文字在下方、柴犬圖在上方。

手機版型順序比對|Divi 順序
手機版型順序比對

而網頁的版型依舊維持原本樣子,文字內容在左邊、圖像在右邊的排版。

這邊特別說一下,Divi 編輯器左下角可以自由切換桌機、平板及手機三種裝置尺寸的畫面,我們可以用這種方式檢視畫面。

另一種方法也可以檢視,我們在 Chrome 中,開啟「開發者工具」來檢視。

快捷鍵按法:
Mac:Command + Option + I
Windows/Linux:F12 (Control + Shift + I )

開發者工具檢查|Divi 順序
使用開發者工具檢查設備畫面

在開發者工具中,左上角有兩個視窗的圖標,那個就是可以檢視各種裝置的畫面,其中查看手機畫面時,可以選擇手機型號,來預覽網頁畫面,這設定很仔細。

若是檢查完之後,確認無誤就完成了!

以上就是更改 Divi mobile 版面順序的教學,步驟很簡單,只要調整、添加代碼,我們就能單一改變手機(或其他裝置)的介面,提升訪客的觀看感受。


常見問題

平板也適用這個更改方式嗎?

我們前面有提到,桌機、平板及手機都是用同一個 HTML 代碼跟同一個 CSS 檔案,才能做出響應式網頁,內容排版會是「一致性」。

如果只有個別更改版面排序,直接採用上述方法去編輯,唯一差別是在調整模塊順序時,打開 Main Element 的欄位時,我們要選擇「平板的版型」。

什麼是響應式設計

「響應式設計」是指網頁配合螢幕尺寸而設計更改,只要遇上使用設備(如:手機)自動變換適當的版面尺寸。

會有響應式設計的出現,是因為「手機瀏覽」的習慣已經變成趨勢,如今使用電腦瀏覽的方式不再成為主流,因此許多網頁設計師會針多數人的瀏覽習慣,做出網頁上的調整。

所以才會有「響應式設計」的出現,詳細內容可以參考這 2 篇文章: 什麼是RWD 響應式設計?響應式網頁和自適應網站差異

Divi 的操作介面不熟悉,可以閱讀哪篇文章學習?

如果對 Divi操作介面還不熟練,或是不清楚選項跟功能,建議可以參考這篇「 Divi Themes 中文教學 」,裡面詳細介紹 Divi 的使用介面,一看就能清楚明瞭。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 90 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組電子書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站:WordPress 架站 x SEO 優化技巧,一站式學習!

希望這些對你有所幫助,祝一切順利啦!

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

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

返回頂端