Select Page

WordPress Blocks Order – 手機區塊排序設計

WordPress Blocks Order – 手機區塊排序設計

WordPress Blocks Order 透過簡單的式樣設計,讓手機上區塊排序的設計,更符合訪的的閱讀習慣,創造更好的閱讀體驗。

使用區塊編輯器來編輯 WordPress 文章內容,已經越來越受到大家的喜愛。也因為如此文章內容的版面設計,可以更多樣化、更吸引訪客的閱讀。以今天要分享的式樣小技巧來說,讓圖文區塊的排序,在手機上的展示效果,比較接近符合一般訪客的閱讀習慣,不受到區塊編輯器的排版影響,這也是我常常跟大家提到的,透過小小的改善,讓訪客的使用體驗更好,這是每位網站設計者必要的功課。

 

WordPress Blocks Order

  • 以今天示範的文章內容來說明,文章內容分成兩個部分,第一個區塊左邊圖片,右邊文字。第二的區塊右邊圖片,左邊文章,這類型圖片與文字混合的內容,在桌機的展示效果,有著非常好的設計感。

WORDPRESS BLOCKS ORDER – 手機區塊排序設計

 

  • 可是這樣子的編排方式,在手機上的展示效果並不好,會變成圖、文、文、圖。

文章內容在手機上的展示效果,圖、文、文、圖。

 

  • 今天就跟大家分享一個小小的式樣設計技巧,讓文章內容可以在手機上的展示順序,也是圖、文、圖、文。
  • 首先點選需要改變排序的區塊,找到編輯畫面的右方的進階設定/附加的 CSS 類別,這裡填入自己定義的 CSS 類別,例如:mobile-reverse。

進階設定/附加的 CSS 類別

 

  • 接下來到佈景主題的自訂/附加的 CSS,填入以下手機適用的式樣語法。

 

填入手機適用的式樣語法

 

  • 填寫完畢以後,存檔離開。再透過手機檢視網頁內容,可以看到網頁內容已經正常展示圖、文、圖、文了。

網頁內容展示圖、文、圖、文。

 

結論

雖然,使用 WordPress 來架設網站,可以說是最經濟的一種方式。不過對於每一位網站管理者來說,不斷的改進網站內容樣式設計,提供給訪客最好的閱讀體驗,是必要的功課,而式樣設計就是其中一環。透過學習讓網站更好,也讓自己管理網站的技能更好。

 

相關文章

flex-direction:https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

Leave a reply

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

WordPress 網站架設指南社團

WordPress 網站架設指南臉書互助學習社團

網站架設

WordPress 虛擬主機免費安裝設定