網頁教學|WordPress如何做出符合RWD的區塊版面
Table of Contents
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/RWD-wordpress-1024x576.png)
RWD響應式網頁設計,是讓使用者在用手機瀏覽您的網站時,不用一直忙著縮小放大拖曳,給使用者最佳瀏覽畫面。
本影片適合對象:剛接觸WordPress不孰悉古騰堡功能的人
影片介紹
●RWD實作教學
Step one.建立【三欄式】欄位
◆首先,先進網頁【後台】,選擇要更改的文章
![先進網頁【後台】,選擇要更改的文章](https://shop.pinpin.tw/wp-content/uploads/2021/09/Backstage-1024x576.jpg)
◆ 在文章的頁面,滑鼠移至要新增的地方按【+】的符號
![新增的地方按【+】的符號](https://shop.pinpin.tw/wp-content/uploads/2021/09/2-1024x576.jpg)
◆ 在【設計】的類別
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/desing-1024x576.jpg)
◆ 點選【欄位】
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/field-1024x576.jpg)
◆ 再點選【三欄式】的欄位
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/3-fecld-1024x576.jpg)
◆ 註:如下圖,這時的欄位預設自動就是【RWD】
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/3ficld2-1024x576.jpg)
◆新增圖片: 在三個欄位點【圖片】
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/p1-1024x576.jpg)
◆ 點擊【媒體庫】或【上傳】新增圖片
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/p2-1024x576.jpg)
◆ 新增完圖片,我們可以到網頁的【前端】做小測試
當圖片縮小時(如下圖)
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/small-1024x576.jpg)
◆ 當圖片再放大時(如下圖)
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/big-1024x576.jpg)
◆ 可以發現圖文會依照網頁尺寸的大小改變
Step two.新增/移除欄位
◆ 新增欄位:可再圖與圖中間,點選【+】的符號新增欄位
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/F-1024x576.jpg)
◆ 移除欄位:點選【圖片的區塊】
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/F-1-1024x576.jpg)
◆ 再點【⁝】的符號,最後再點選【移除區塊】
![](https://shop.pinpin.tw/wp-content/uploads/2021/09/f2-1024x576.jpg)