logo

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

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

本文最后更新于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是一个好的工具但是想找人帮你来建站,欢迎找我聊聊。

知识星球社群二维码

推荐阅读

  • 搜索引擎的原理是什么?谷歌搜索引擎是如何工作的?

    有无法解决的问题时,我们会第一时间求助搜索引擎。那本篇文章就讲一下搜索引擎的原理以及我们常用的谷歌搜索引擎是如何工作的,这也是做谷歌SEO优化必须要了解的内容,是提高的外贸独立站 Google  关键词排名,并获得更多流量最基础的知识。 什么是搜索引…

    2025 年 1 月 30 日

  • WrodPress基础之前期7个必要的基本设置

    不管使用宝塔面板搭建WordPress还是1Panel面板的方式,一个新WordPress网站需要做一些基本设置才能正式的去设计页面,填充网站内容。 1. 确保网站勾选“建议搜索引擎不收录” 网站搭建正式上线前,我们需要反复设计页面,打磨文案,填充内容,操作过…

    2025 年 2 月 6 日

  • 如何全面分析外贸独立站页面打开速度(含工具推荐)

    网站的打开速度是谷歌SEO排名的重要因素之一,打开速度过慢及其影响用户的使用体验,还会导致用户的流失。本篇文章就讲解下如何对外贸独立站做全面的速度分析,并帮助我们对症下药,提高网站的打开速度。 前置知识:Dwell Time Dwell Time 是指用户点击…

    2025 年 1 月 30 日

  • 外贸邮箱注册:谷歌企业邮箱注册详细教程

    做外贸行业,企业邮箱一定是与客户沟通的必要工具,我使用过的企业邮箱有很多,但使用下来体验最好用的还是谷歌企业邮箱。本篇教程就讲下如何注册一个谷歌企业邮箱。 在讲解前先普及一些关于企业邮箱的基础知识吧。 什么是企业邮箱 1.我们平常使用的 [email protected] 、…

    2025 年 2 月 5 日

  • WordPress配置SMTP服务收发邮件(使用WP Mail SMTP插件)

    WordPress网站若不经过任何配置是是无法发送邮件的,本篇文章来讲解如何为WordPress网站配置SMTP服务。 通常我们购买的服务器服务商会禁止直接从服务器发送邮件,有的服务器供应商是不提供邮件端口(25)的,并且需要自己提交工单申请才可以,即使申请了…

    2025 年 1 月 31 日

导航目录