如何使用 Avada 页眉、页脚和列布局生成器

我们自己的页面构建器 Avada Builder 现在有两个界面:Avada Builder(我们的后端线框页面构建器)和 Avada Live(我们的前端构建器,最近才随 Avada 6.0 一起推出) 。

使用我们简单的容器、列和元素系统,两个版本的 Avada Builder 都允许您轻松地为您的网站设计漂亮的页面布局。 Avada Builder 对于现代网页设计师和网站所有者来说是一个很棒的工具,因为它使他们能够完全控制页面内容和布局的各个方面。 Avada Builder 的两个版本也生成相同的代码。 它们完全可以互换,让您可以利用当前可用的 Avada Builder 获得两全其美的效果。

除了默认创建的全局布局之外,您还可以在“布局生成器”页面中找到所有布局以及您可能希望构建的任何条件布局。 此处还可以将布局部分分配给布局并指定条件布局生效的条件。

可以通过从 Avada 仪表板的下拉菜单中选择布局 > 布局生成器来访问布局生成器。 描述布局最直接的方法之一就是说它们是容纳页面的四个布局部分的容器——页眉部分、页面标题栏部分、内容部分和页脚部分。 您可以通过阅读本文档了解有关布局部分和布局之间差异的更多信息:了解布局和布局部分 (PDF)。 继续阅读以了解有关您可以在此页面上执行的操作的更多信息。

两个部分位于布局生成器页面的最顶部。 第一部分概述了填充全局布局中的布局部分或生成条件布局的技术(提示:您可以使用 X 关闭它),屏幕右侧是一个区域,您可以在其中直接创建新布局(见下文)。 输入新布局的名称,然后单击“创建新布局”以完成该过程。 使用该方法时会创建一个空白Layout; 未指定布局部分或条件。

当您构建布局时,它们会自动导入到“布局构建器”页面中。 您可以通过单击页面顶部的“重命名”按钮来重命名布局。 您还可以单击齿轮图标来为布局建立条件,并且可以通过单击页面顶部的 Bin 图标来删除布局。 您还可以通过单击除全局布局之外的所有布局的底部来查看和分配条件。

在每个布局中,您可以看到分配给特定布局的四个布局部分,四个布局中的每一个都有一个。 在每个布局部分中,您都会看到一个 + 图标,当您将鼠标移到布局部分上时,您可以将布局部分分配给该部分。 您可以选择将现有布局部分分配给此部分或从头开始创建一个全新的部分。

使用部分布局

作为 Avada Layouts 的一部分,您现在可以利用 Avada Builder 的全部创意能力为您的网站创建完全可定制的页脚。

页脚布局是添加到布局的布局部分。 amp,自定义页脚需要页脚布局部分,可以将其添加到全局布局或自定义布局中。 我们将在下一节中介绍如何构建自定义页脚布局部分,但首先让我们了解一下 Avada 布局简介。

在 WordPress 侧边栏或 Avada 仪表板中,选择 Avada > 布局。 Avada 的布局和布局部分在此处创建和管理。 如下所示,全局布局最初是空的,没有关联的布局部分。

自定义布局

此部分可以添加到全局布局或条件布局,仅显示在某些自定义帖子类型或单个页面上。 全局布局已经存在,但我们需要首先开发条件布局。

在“布局”页面上,添加名称并单击“创建新布局”,如下所示。

如果您希望将页脚布局部分添加到现有布局或全局布局,请创建页脚布局部分。

在布局部分生成器屏幕上,选择布局部分的类型,输入名称(在本amp中为页脚,可能是全局页脚),然后单击创建新布局部分,如下所示。

下图显示了如何直接从布局生成布局部分。 您网站的布局部分必须添加到布局中。 最初,只有一个全局布局。 因此,要创建全局自定义页脚,请将其添加到此布局中。 自定义页脚布局部分,然后向自定义页脚布局部分添加条件,使布局根据条件显示。

这并没有什么错,但考虑情况至关重要。 如果布局当前处于活动状态(即有条件或者是全局布局),则任何新的布局部分将立即处于活动状态并为空。 首先通过布局部分生成器页面将自定义页脚添加到全局布局,然后将其添加到全局布局更有意义。

或者,我们可以将页脚、标题或列布局部分添加到条件布局中,然后创建它。 在添加条件之前不会使用条件。 如下图所示,我们可以通过将鼠标悬停在页脚布局部分上并单击编辑图标来更改页脚布局部分。

自定义布局编辑

编辑新的布局部分时会出现默认的 WordPress 编辑器; 您可以从此处使用 Avada Builder 或 Avada Live。 自定义布局部分在此处创建。 有关其他信息,请参阅创建布局部分内容,但简而言之,您可以在此处构建任何内容。

您的自定义页脚可以包含您可以在 Avada Builder 中构建的任何内容。 你可以有无数的专栏、照片等; 这提供了巨大的灵活性。 布局部分是页脚材料将出现的位置。 材料来自Builder,你的创造力是唯一的限制。

请参阅下面为出租车演示构建的原始页脚; 这是通过更改主题选项和页脚小部件来实现的。

此处显示了此自定义标头的桌面版本,但要正确掌握此自定义标头的范围,您必须访问实时站点,您可以在此处访问该站点。

条件布局设计

全球布局没有任何条件。 向其中添加布局部分将在每个页面上使用,因为它是全局的。 如果您只需要在网站的某些页面上使用自定义页脚(例如单个博客文章),则需要使用条件布局。

条件布局只能包含现有的布局部分。 然后,在布局的选择页脚选项卡下,滚动到现有,您可以在其中添加布局部分,如下所示。

您必须为任何条件布局设置条件。 一旦指定条件,布局就会激活; 因此,如果在建立布局部分之前执行此操作,则符合条件的页面将为空。

要添加条件,请从布局底部菜单中选择添加条件。 出现一个对话框,如下所示。 有关条件布局的更多信息,请参阅了解条件布局,但对于本amp,我们将在“帖子条件”选项卡中选择“所有帖子”,如下所示。

从 Avada 布局构建器添加列

与容器元素一样,列元素是设计 Avada 站点时必不可少的结构组件。

使用 Avada 布局构建器添加列相对容易。

  • 单击“ + Container ”按钮将容器添加到页面。 插入容器时,系统会要求您选择列或列布局。 您可以创建一个空容器,但通常您在此步骤添加列。
  • 要将新列添加到现有容器,请将鼠标悬停在容器上并单击“ + 列”按钮。 要添加新列,请单击此处。
  • 在列的左上角,单击“调整列大小”图标。 现在它的大小将与您的列相同。 例如amp 1/4 列将在“调整列大小”选项下“1/4
  • 拖放列以重新排列它们。 您还可以将列拖放到容器中。

Column 只能放置在具有相同宽度的容器元素内; 这通常是您为站点设置的站点宽度。 因此,如果将网站宽度设置为 1200 像素,则 1/2 列的宽度将为 600 像素。 添加到页面时,预设列大小如下所示。

在 Avada 中,您可以在大、中、小布局上分别设置列宽(以及更多),如何在响应式布局中设置列的显示顺序和大小解释了如何在列中使用这一出色的新功能。

自定义宽度位于Columns > Design > Width。 如下所示,使用百分比数字可以让您指定自定义宽度。 因此,定位不受限制

自动是一个新的宽度选项。 Column 将占据其中最重要元素的空间,而不是固定宽度。 所以它只在某些情况下有效。 您可以将父列更改为“自动”,列的大小将调整为元素的宽度。

Avada 还添加了容器和列的响应式选项集。 在生成器的后端,您可以在任何列上看到响应式图标,如下图所示。 前端生成器在选项上显示响应式图标。

仅新的 Flex 容器显示响应式选项集。 旧容器中的列不可用。

结论

借助 Avada Layouts,创建自定义页脚、页眉和添加列的功能现已成为现实,并且是几乎无限的选择。 您不仅可以利用 Avada Builder 的强大功能构建几乎任何您能想象到的页脚或页眉,还可以利用条件布局的强大功能在任何页面、类别、自定义帖子类型或任意组合上显示或隐藏它们您可以考虑使用 Avada Builder 的标准。

当谈到 WordPress 布局时,Avada Layouts 从字面意义上来说是一个游戏规则改变者。 事实上,它允许这样的设计自由度和部署灵活性,这意味着创建页脚的过程将永远不会相同。

汉森·F.

最近的帖子

如何在 Elementor 中使用页眉和页脚

网站的页眉和页脚是必不可少的元素。 在大多数情况下,标题提供导航...

2022 年 1 月 6 日

WordPress 主题比较:Astra 与 OceanWP

市场上最受欢迎的两个 WordPress 主题是 Astra 和 OceanWP。 专业的…

2022 年 1 月 2 日

WordPress 新闻主题比较:报纸与报纸 阿斯特拉

创建一个优秀的新闻网站并不需要您成为一名网页设计师。 我们…

2021 年 10 月 25 日

创建一个以报纸为主题的新闻相关网站

报纸主题是由 tagDiv 设计的最重要的 WordPress 主题之一,...

2021 年 10 月 18 日

如何使用 Avada WooCommerce 构建器构建电子商务

在建立在线商店时,WooCommerce 是首选plugin。 它…

2021 年 10 月 4 日

如何通过 Elementor 使用粘性标题和滚动效果

标题通常是人们访问您的网站时首先看到的东西,...

2021 年 9 月 21 日