如意宝响应式拖拽设计升级介绍-如意宝魔方建站平台

如意宝魔方建站 2025-08-08 15:22:20 次浏览

本周我们继续升级，针对如意宝响应式网站拖拽设计，除了升级Bootstrap框架，还优化了页面框架和布局。

7月25日，我们完成了如意宝&超级旺铺前端网站的Bootstrap框架升级，观察了2周，修复了已知问题。本周我们继续升级，针对如意宝响应式网站拖拽设计，除了升级Bootstrap框架，还优化了页面框架和布局。现对升级后的响应式拖拽设计进行如下介绍：

我们分析网站结构，结合多年的网站开发经验，在如意宝可视化拖拽里，页面框架结构大致分为以下五种，如图1，前面3种结构，基本上容易理解，常用于网站首页、自定义页面、内页，而第4、5种多数用于内页，属于左右结构，带有公共区域。

图1 5种页面框架

为了充分理解框架结构，我们以图片形式来介绍。无论是铺满屏幕，如图2，还是居中显示，如图3和图4，此次升级，完美解决了左右结构框架排版问题，且兼容移动端。锁定状态的为公共区域，公共区域的存在，大大降低重复版块内容搭建。

图2 铺满屏幕的左右结构框架

图3 第4种左右结构框架

图4 第5种左右结构框架

居中显示的效果，需要在布局里设置最大宽度和外间距，比如，设置居中宽度不超过1350px，代码为： max-width: 1350px; margin: 0 auto; ，前台页面效果，如图6所示

图5 页面居中设置（点击图片看放大效果）

我们在pc端上选择需要的框架，然后通过布局来填充内容，一个萝卜一个坑的。框架会自动兼容pc端、移动端、平板端。

有了框架，我们在页面上排版网站内容，就需要用到布局。有四种布局，如图6。

图6 4种布局

前2种布局是一行一列布局，如图7，上面是铺满浏览器，下面是页面居中布局，可以设置最大宽度（max-width）。

图7 一行一列布局

这2种布局是一行多列布局，如图8，上面是一行两列，下面是一行三列布局。

图8 一行多列布局

图9 布局效果

样式编辑器里，新增了最大宽度（max-width），如图10。单位上，只保留了px 和 %。魔方和组件，持续新增效果，本次暂无升级。

图10 样式编辑器

如意宝定位于个性化企业建站，多语言Saas云网站。我们迎合市场需求，产品持续迭代免费升级，赋能设计师，助力网络公司，惠及中小企业。

下一条：没有了

返回列表