如何使用 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文件,一个自定义页脚需要一个页脚布局部分,它可以添加到Global或者自定义布局。 我们将在下一节中介绍如何构建自定义页脚布局部分,但首先让我们看看介绍 Avada 布局。

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

自定义布局

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

在 Layouts 页面上,添加一个名称并单击 Create New Layout,如下所示。

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

在布局部分生成器屏幕上,选择布局部分的类型,(在这前输入一个名称amp乐,页脚,可能导致全球页脚),然后单击创建新的布局部分,如下图所示。

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

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

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

将页脚布局部分添加到条件布局

自定义布局编辑

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

您的自定义页脚可以包含您可以在 Avada Builder 中构建的任何内容。 您可以拥有大量的专栏、照片等; 这提供了极大的灵活性。 布局部分是页脚材料出现的地方。 素材来自 Builder,您的创造力是唯一的约束。

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

出租车演示>基本页脚” SRC =” https://lh3.googleusercontent.com/_xzRCQdf_jBPoJv6eaW9Wx3rdXORc7Ni1945ud13b9kALKA4WdmZpeSSCTnLx-4hcwPKXGF1dl3E0qragaIr_eJ6AiBxO4AMKlY2tuxFbek-S0Z1PY3oQTE2UmjI4QzZydYbWqscpkwNbIpjTQ=s0“> 查看 Avada Layouts 自定义全局页脚。

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

有条件的版面设计

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

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

分配自定义布局部分

您必须为任何条件布局设置条件。 一旦指定条件,布局就处于活动状态; 因此,如果在建立 Layout Section 之前执行此操作,则符合条件的页面将为空。

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

从 Avada Layout builder 添加列

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

使用 Avada Layout builder 添加列相对容易。

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

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

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

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

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

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

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

结论

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

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

发表评论

您的电子邮件地址不会被公开。 必填字段已标记为*