免費參與·100+跨境活動 
免費下載·4000+跨境資料 
免費學習·2000+直播課程 
免費加入·15萬+賣家交流群 
2022-03-09 17:09
圖片來源：圖蟲創意
今天跟大家說說如何調整網頁的頁邊距，讓網頁的手機端自適應。
圖片來源：WordPress截圖
Elementor編輯器
我最喜歡的使用的網頁編輯器Elementor，它可以幫助我們輕代碼甚至無代碼的條件下，搭建出漂亮，美觀，大氣的網站。
網頁的Margin, Padding, Border
圖片來源：WordPress截圖
Margin, Padding, Border是網頁前端設計里的CSS屬性，我們用了Elementor編輯器，就不用去廢寢忘食的學習CSS網頁前端設計，也可以很快的搭建出來漂亮外貿網站。
Margin: 網頁元素邊框以外的留的空白，上下左右都可以留白
Padding: 是網頁元素內部的邊距，上下左右都可以留邊距
Border：邊框，可以設置邊框的厚度
我們可以把網頁的模塊想象成一個一個的盒子，盒子里面承載的是內容content，盒子這個容器本身帶有邊框border（有一定的厚度，當然也可以厚度為0，也就是沒有邊框）。盒子外邊的留白都叫margin，盒子內部的間距都叫padding。
那我們知道了Margin, Padding, Border，就可以很好的去設計你的網頁元素了。
如何調整Margin, Padding
我們只要用了Elementor編輯器就可以很輕松的去設置調整網頁元素的Margin和Padding
圖片來源：WordPress截圖
在用Elementor編輯器設計網頁的時候，選擇你要調整的元素section，然后點擊advanced高級設置，就可以找到margin和padding設置，然后進行設置就可以了。
手機端調整
圖片來源：WordPress截圖
Elementor可以分別對電腦端web，手機端mobile 和平板tablet進行調整。
我建議手機端左右流出15~20像素的瀏覽，網頁效果是剛剛好的，不會太擁擠，也不會太膨脹，大家根據自己的喜好進行調整就可以啦。
建站咨詢
最后，大家有什么問題或者想說，都可以在留言區留言哦。如果大家需要建站服務，還可以隨時咨詢我哦，Peace Out~
（來源：小王子的外貿筆記）
以上內容屬作者個人觀點，不代表雨果跨境立場！本文經原作者授權轉載，轉載需經原作者授權同意。?
收錄于以下專欄
