logo

Bebuilder使用Section、Wrap、Item对页面排版设计

2024 年 6 月 30 日   作者:倚栏听风

预计阅读时间:6 分钟

本文最后更新于2025 年 2 月 6 日,其中的信息可能已经有所发展或是发生改变,若失效请联系站长更新,谢谢!

了解Bebuilder的基本功能后,本篇文章将学习如何使用bebuilder页面编辑器对页面做一个布局排版,方便规划页面内容。

Bebuilder排版工具

Bebuilder有三个排版工具分别为:Section、Wrap、Item(Element)。类似Elementor的“容器”的概念,不过Bebuilder对此进行了细化且更加的灵活。

bebuilder排版工具

Section介绍

进入Bebuilder编辑器后,点击“Start creating”,会默认添加一个Section,并且会让你选择再次添加:Wrap、全局Section、预设模块。

bebuilder section介绍

“Select a wrap layout”下面有着7个新建Wrap的排版方式,从左至右依次为:

bebuilder section导航栏功能介绍

将鼠标悬停到某个Section上时,会显示该Section的功能导航栏,颜色为绿色(用颜色区可分Section、Wrap、Item之间的层级关系和界限),功能从左侧开始依次为:

Wrap介绍

Wrap类似于类似Elementor Pro中的“容器”,新建的Section默认会添加一个Wrap,也可以选择“Select a wrap layout”按照给出的排版添加Wrap。

一个Section中可以添加多个Wrap,Wrap和Wrap之间可以相互嵌套,一个Wrap中也可以添加多个二级Wrap,但是从层级上看最多只能添加到二级Wrap了,二级Wrap中只能添加Item元素。

bebuilder warp嵌套

在一级Wrap一行中只能添加6个二级Wrap,因为Wrap可调节的大小最小为1/6,再多只能添加至新的一行。Wrap之间的层级关系可以通过虚框颜色或者导航栏的颜色来判断,一级Wrap为灰色,二级Wrap为红色

bebuilder warp导航栏功能介绍

将鼠标悬停到某个Wrap上时,同样会显示该Wrap的功能导航栏,功能从左侧开始依次为:

Item(Element)介绍

Item元素是最小的模块了,Bebuilder有着大量可以直接使用的Item元素,每个元素可以实现不同的功能,详情可以查看Betheme官网关Element的介绍

元素可以从左侧直接拖入到Wrap中,所见即所得,并且每个Item都可以自定义设置,即使预设模块无法满足需求,也可以通过Item元素的不同组合实现想要的设计。

bebuilder item导航栏功能介绍

将鼠标悬停到某个Item元素上时,也会显示该元素的功能导航栏,以蓝色为标识区分,功能从左侧开始依次为:

Bebuilder简单模块排版实战

记得Bebuilder页面编辑器左侧可以直接导入预设模块(Pre-built section)吗?这次我们不使用这个功能,而是仿照给出的预设,使用排版工具设计一个模块,并保存为自定义样式。

要求:仿照 Pre-built section 中的 image + text 模块,含有图像、标题、富文本、按钮等,样式如下图所示:

bebuilder排版设计参考示例

PS:来不及搭建WordPress安装Betheme主题的话,建议先使用Bebuilder Demo完成该任务。

实战操作步骤如下

步骤1:新建Section -> 添加两个Wrap,各占1/2。

bebuilder添加warp且各占1/2

步骤2:左侧Wrap中添加图像(image),右侧Wrap中添加2个标题(Heading)、1个文本(Column Text)、1个按钮(Button),其中第一个标题设置为H2,第二个标题设置为H5。

bebuilder添加标题、图片、文本、按钮

步骤3:编辑Wrap,将两个Wrap外边距(Margin),上下左右都设置为50px。

bebuilder设置warp间距格式

步骤4:更改图片,并设置图片大小为“Full size”,图片URL为:

https://demo.muffingroup.com/bebuilder/wp-content/themes/betheme/functions/builder/pre-built/images/placeholders/780x780.png
bebuilder设置图片URL和大小

步骤5:更改标题H标签为H2,更改字体样式,大小为30px,行高为40px,字体任意。

bebuilder设置标题排版大小,间距、字体

步骤6:以同样的方式修改第二个标题、文本和按钮,知道与图片示例一致。

以上就是使用Bebuilder对页面、模块进行排版设计以及简单实战的全部内容,涉及的很少,更重要的是安装WordPress和Betheme主题后反复练习,不断熟悉Section、Wrap、Item三大排版工具。

当然,Betheme主题唯一的缺点就是没有中文版,不过我感觉既然是搭建外贸网站,英文能力一定不会差,况且,在不断练习中,Bebuilder编辑器有关的英文也都会认识的差不多,无伤大雅。

这些内容还算比较简单,会的差不多了的话,可以挑战模仿其他的网站,比如:使用Bebuilder设计一个苹果官网……

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。

转载请注明:
作者 – 倚栏听风
页面标题 – Bebuilder使用Section、Wrap、Item对页面排版设计
页面链接:https://oyouoo.com/bebuilder-how-to-use-section-warp-item/

加入掘金随想的社群

如果你有兴趣和其他的人一起了解更多AI建站、AI-SEO、开发者出海等更多高质量内容和我自己的心得体会,我建了一个付费社群,欢迎你的加入!扫描右边的二维码可直接加入哦!

同时如果你也认为Bricks是一个好的工具但是想找人帮你来建站,欢迎找我聊聊。

知识星球社群二维码

推荐阅读

  • Bricks主题如何购买、安装、激活教程

    本篇文章教大家如何购买、安装并激活Bricks主题以及一些其它基础的设置。 如果你暂时还不想购买Bricks主题,则官方提供了免费使用,可登录地址:https://try.bricksbuilder.io/,输入邮箱,密码会发送至该邮箱。试用版中该有的功能基本…

    2025 年 1 月 31 日

  • 如何取消订阅谷歌企业邮箱?(图文完整流程)

    免费的15天试用马上到期了,有的朋友只想体验谷歌企业邮箱的服务,却不想继续付费,但也不知道如何取消订阅,本篇文章就教大家。 备份谷歌企业邮箱数据 不管因为什么原因致使你取消订阅谷歌企业邮箱,在取消订阅前一定要备份好Workspace里面与客户往来的邮件和其他重…

    2025 年 2 月 5 日

  • SEO初学指南之关键词研究(3) – 关键词分析实战

    经过之前的学习,这次我们开始实战。手把手教大家如何为外贸网站筛选符合条件的关键词。 还不熟练的,建议再反复学习前两篇文章: SEO初学指南之关键词研究 (1) - 入门SEO初学指南之关键词研究 (2) - 搜索意图分析 废话不多说,开始吧。 关键词研究就是寻…

    2025 年 2 月 7 日

  • WordPress基础之操作界面初识

    这篇文章简单介绍一下内容:WordPress后台界面的各项功能和设置,让小白对此界面有一个初步的认识。 WP默认登录地址: WP后台界面功能分区 可以将整个界面划分为三个区域: 下面重点介绍几个常用的操作界面: 1. 顶部工具栏 2. 左侧导航栏 2.1 仪表…

    2025 年 2 月 6 日

  • 如何使用Bebuilder页面编辑器制作网站页头(Header)

    经过之前的Betheme主题和Bebuilder编辑器的介绍后,应该对此有了大概的了解,那本篇文章将学习如何制作一个外贸企业独立站的页头(Header)模板部分。 PS:以下统一称“页头”为 Header Bebuilder使用Pre-Built一键快速导入H…

    2025 年 2 月 6 日