Joomla扩展:在SP页面构建器中创建带有嵌套行的定制布局

为了创建具有复杂结构的高级布局,嵌套内行是必备的特性。SP页面构建器3不能剥夺您这个令人敬畏的功能。通过SP Page Builder 3嵌套行选项,您可以轻松地在web页面上创建一个复杂的布局。

 

有时,由于项目的特定性质,默认的布局是不够的。你需要更灵活的东西。嵌套的内行和自定义列布局是SP Page Builder的优秀内置功能,让您轻松地获得这些功能。

今天,我们将了解如何使用SP页面构建器前端编辑器来添加带有自定义列结构的嵌套内部行。

添加新行

您可以在前端以两种方式添加行。如果您没有在页面中添加任何元素,您将获得一个选项,可以立即添加第一行。要添加父行,请单击“Add New Row”按钮。

添加新行

或者,在每一行之后都有一个加号(+)按钮来添加另一行。

添加新行步骤

在单击Add new row按钮或加号按钮添加new row之后,将打开一个新的弹出窗口,以添加该行的列结构。

所有关于柱结构

SP Page Builder 3的柱状结构遵循引导的网格系统。在引导程序中,整个列被划分为12个网格。

关于柱结构

这就是为什么,为了得到3列,你必须把整个网格分成3份,这是4 4 4。这意味着每一列都有四个网格。网格值4+4+4=12。所以,无论你选择什么列结构,总网格值的总和必须是12。

关于柱结构介绍

用同样的方法得到两列你必须把网格分成两部分,这是6 6。

网格

现在,为了添加一个复杂的行列结构,您需要生成您想要的布局。根据引导网格系统,您必须根据您的需求创建列结构,确保网格值的总和保持为12。

三个列:4 + 4 + 4

生成布局

更复杂的

现在我们将走向复杂的东西。如果你想要两行,第一行有一列,第二行有三列。输入将会是12+4+4+4。SP页构建器将生成两行。第一个输入12完成了12个网格,因此它将容纳4+4+4输入到第二行。

更复杂的布局

生成柱结构

要添加列结构,请将所需的网格组合插入指定的字段并单击generate。您的列结构将被生成。

生成柱结构

添加嵌套的行

在添加栏目结构之后,您将可以选择在添加的栏目中添加内部嵌套行。要添加嵌套内行,请单击addon编辑器中的“父列”图标。

添加嵌套的行

然后下拉菜单将打开。现在选择“添加内行”来添加嵌套内行

你的内行现在被添加了。

嵌套

从后端

您还可以从后端编辑器中添加嵌套行,程序如下。

添加一行

要添加嵌套的内层行,首先必须添加父行。在每一行的底部,您可以找到“Add New Row”按钮。若要添加父行,请单击“Add New Row”按钮。

或者在创建新页面之后,您将可以选择添加新行。

后端操作流程

生成柱结构

要生成一个复杂的列结构,请单击“添加/管理列”,在每一行的右上角都可以选择。插入所需的列结构并单击generate。

生成柱结构

添加嵌套的行

在每一列中,右上角都有一个名为“列选项”的图标。

单击列选项并从下拉列表中选择“添加New Row”。

添加嵌套的行

下面是您添加的嵌套内部行将会是什么样子。

嵌套内部行

因此,这就是如何使用SP页面构建器嵌套行特性来创建定制布局。您可以生成无限制的嵌套行,并创建您想要的布局。我们相信这篇文章将帮助您开发定制的布局。