Category: WP主题装修

在上一期，我们讲了基本的Avada主题的设置，但还是设置不了标头和页脚

我们单独说一期标头和页脚无法设置的问题，以及设置的一些方法

步骤：网站后端→Avada→Layouts→Layout Builder→Main Header

如上图我们找到Global Layout，然后Main Header（标头）和Global Footer（页脚）

直接点击就能设置了

然后就会进入Main Header编辑页面。（如下图）

根据每一个模版不一样，标头的内容也不一样，像这个的就是一个文本，再加一个地址和社交分享模块，还有一个菜单和whatsapp，三个容器。

如上图，你需要分清楚每一个的编辑的内容，红色是容器（Container）编辑，黄色部分是柱子或者列，蓝色部分就是内容模块（Element）的编辑，每个部分设置的功能不一样，大家注意区分。

如上图，你可以选择添加Element（元素，也是内容模块），Container（容器）或者Columns(柱子或者列）。

在Builder的旁边有一个Library，这里可以导入你的自定义模版,还有容器，柱子，元素（内容）都是可以的，但前提需要你自己去创建模版后，在这里选择模版的名称即可直接插入标头。

内容模版非常多，大家根据实际情况选择就行，如果内容模版不喜欢，你可以选择插入Studio的内容，这里有主题制作好的内容，根据图片演示点击＋号直接导入即可。

页脚的设置方法和标头差不多

步骤：网站后端→Avada→Layouts→Layout Builder→Global Footer

如上图，这里设置的非常的简单，只设定了菜单和一个社交链接。前端的效果如下图，非常简单就能实现。添加的方法按照对应的位置添加就行

你只需要记得如果标头和页脚不能在主题设置的位置修改，那就一定是布局这个位置。

如下图，Avada提供了每个页面的单独布局，有产品，商店，博客等等，按照你需要的效果去调整即可

本篇文章到这里就结束了，希望能对大家有所帮助，这篇文章能帮您解决标头和页脚的设置难题。有任何疑问，请随时留言或者联系我们，我们会尽快回答你，感谢你的阅读。

之前聊过了Avada主题的排版和一些功能，今天咱们继续来搞搞更重要的全局设置。其实这些设置就像网站的“幕后工程”，掌握了，你的网站效果瞬间提升不少！别担心，步骤不复杂，跟着来就好~

步骤：网站后端→Avada→options→Global options

如上图，这是Avada主题的全局设置，你可以理解为主题设置。

我们先关注基础的设置，比如布局，标头，logo，页脚，颜色，排版（字体），Woocommerce

1，布局

如果导入了模版后，你不是很喜欢模版的布局，可以去修改，但是不建议新手改动，可能其他也变动了，你的熟练度不够，有一定熟练度的可以去diy。（如下图）

Layout：整体网站

Default Page Template：单个页面

2，标头

Slider Position：是标题的位置，一般都是Below，标题下方，图片显示此功能在这里无法调整，因为需要到其他地方调整，后面我们说，不同的模版，设置都有区别，但都是这两个位置。（如下图）

3，logo

logo分为两个，一个是手机端，在logo这里设置。电脑端也就是PC端在标头设置了，所以这里不用管。

Favicon：指的是浏览器图标。你可以理解你打开网站最上面的一个logo。比如下面这个张图。

4，页脚

页脚也不能在这里设置，那就是和标头在另外一个位置。（如下图）

5，颜色

Primary Color：整个网站的主色

Color Palette：色板(你可以理解为固定的颜色，就比如像固定属性一样，可以直接选择，可以不用去选择颜色，对于网站的装修排版还是能提升一定效果的）Add New Color点击这个来添加。（如下图）

6，排版（字体）

你可以设置各个位置的字体，来实现不同的效果，当然你也可以Add New Typography Set，添加需要的位置来单独设置字体。（如下图）

7，WooCommerce

你可以调整产品的数量以及排序还有布局方式，新手直接选择我这个，或者调整后去商店页面看实际效果。（如下图）

这个是产品的细节图的位置（如下图）：

还有一键加入购物车的功能，这就是付费的主题功能的好处，他不需要插件来实现，主题直接能设置，能省不少事。

好了，今天的分享就到这儿！通过这些全局设置，你的网站基础部分就基本搞定了。如果标头和页脚有些地方还搞不清，别急，咱们下一篇继续说！敬请期待哦~

在现代网站中，弹窗（Popup）是一种有效提升用户转化率的重要工具，尤其是在外贸网站中，适时的弹窗可以有效引导用户发起询盘或参与促销活动。然而，许多人还不了解，Avada主题自带的“画布”（Canvas）功能已经提供了灵活的弹窗创建和配置功能，不需要依赖额外的插件或复杂的代码。通过这篇文章，我们将详细介绍如何使用 Avada 画布功能设置高效弹窗，为你的网站优化用户体验并提高询盘转化率。

步骤：网站后端→Avada主题→Off Canvas→Enter Off Canvas Name

Enter Off Canvas Name：起一个名字

点击实时编辑（如下图）

有两种编辑模式（如下图）

但是建议前端编辑，这样效果更直观一些

选择一个容器

添加一个合适的容器

添加

也不一定你只能放表单，也可以放入打折的信息，比如图片加文字

看你的需求了

整个画布也就是弹窗的设置也是可以设置的，比如背景颜色

为了效果更直观，我用了跟深色的颜色来突出区别，如果不想内容太靠边，拖动内框就可以了，如上图

步骤：网站后端→Avada主题→Off Canvas→Off canvas Options→Conditions

设置弹窗的触发条件

在设置好弹窗后，下一步是为其配置触发条件。对于外贸类网站，通常用户点击 “Quote Now” 或类似按钮时弹窗会弹出。当然，也有部分站长希望在用户访问页面时立即显示弹窗，但需要注意的是，这种方式可能会影响用户体验，建议谨慎使用。

然后启用在设置

点击按钮来弹出弹窗

如果选择通过点击按钮来触发弹窗，则无需对画布进行任何额外设置，也不需要配置触发条件或规则。在按钮模块中，找到网址栏右侧的堆叠图标，点击后选择“打开画布”即可。

选择一个条件，图片上的DYNAMIC CONTENT（如下图）

选择打开画布，如下图（Open Off Canvas）

选择我们之前编辑好的画布名称（如下图）

最终效果

回到前台可以点击尝试一下，最终弹出该弹窗

除了之前说的设置条件外，还有一个触发器的功能（如下图）

步骤：网站后端→Avada主题→Off Canvas→Off canvas Options→Triggers

在触发器中设置一下触发条件

比如在用户有退出网站意图时候让这个画布触发

步骤：网站后端→Avada主题→Off Canvas→Off canvas Options→Rules

设置触发规则（如下图）

比如我要让这个弹窗总是显示。

由于我设置的触发条件是在整个网站上显示，并且当用户有退出意图时弹窗会出现，因此每当我将鼠标移出网页时，弹窗就会自动显示。如果你希望弹窗在用户访问网站时立即加载，只需将退出意图的触发条件更改为页面加载时显示即可。

弹窗的触发条件有很多种组合方式，建议多加尝试。同时也要考虑用户体验，比如设置营销钩子或某些特定条件来触发弹窗，这样可以有效提升用户提交询盘的概率和用户知道网站打折的信息等等。

总结

通过使用 Avada 的画布功能，您可以轻松创建各种类型的弹窗，并根据网站需求灵活设置触发条件。无论是“Quote Now”按钮点击触发，还是页面加载时显示，都能通过简单的设置完成。重要的是，在使用弹窗时，要确保用户体验不受影响，合理的设置营销钩子和触发条件能够最大化提升用户转化率。希望通过本教程，您能更好地利用 Avada 的画布功能打造高效、用户友好的外贸网站弹窗。下一期，我们将继续探讨更多实用的 Avada 主题功能，敬请期待！

在上一期中，我们探讨了Avada主题中的基本模块设置，相信大家已经对其有了一定的了解。今天，我们将继续讲解一些更为特别的模块，如WooCommerce产品轮播、产品网格和图片热点模块。这些模块为展示产品、功能特点提供了更灵活的选择，让你的网站能够更加丰富多样地展示内容。接下来，让我们一起深入了解这些特别模块的设置和应用场景

如果我们需要展示产品，我们可以选择WooCommerce和主题一起联合的模块

我们加入一个Woo ProductCarousel（产品轮播）

轮播就是一行的产品在滑动的意思，如果你需要这种效果可以考虑这种模块

左侧可以设置他的布局，以及展示多少产品多少列，还有在这个模块展示的一些元素，比如分类，标签，价格，按钮等等，这就不一一讲了，直接翻译即可了解

如果你觉得这个效果你不喜欢

你还可以选择Woo ProductGrid(产品网格）

设置都是差不读的，这里就不一一解释了，但每个模块的设置功能也有一定的区别，比如上面轮播模块他只有一个设置区域，没有设置颜色和动态效果的，但下面的产品网格他是有这个设计（Design）和动态效果的设置的，所以你看实际情况，你需要功能丰富的拿肯定是下面这个

接下来我们讲述一个图片热点模块（Image Hotspots）

这个模块一般应用在哪里呢，如果你需要在图片上设置分布点，就是锚点，比如地图，你的销售点，以及你介绍这个产品的特性都可以用这个模块

这里我们使用苹果的标志作为演示，背景图片也是随机的

那么我们怎么去设置呢

Item：就是图中的锚点，你可以这样理解，我设置了三个，你可以根据你的需要设置更多

点击编辑后，可以设置他的位置，拖动查看右侧的效果，横向和竖向，但建议调整好item的图标和颜色后，再来拖动，因为如果不明显或者被背景遮盖会错过实时效果，如下图

然后我们还可以设置item的图标，以及触碰的文本

Triggering Text：是直接显示的文本

Popover Heading：是触碰到item才会显示，这个是标题
Popover Content: 这个是描述

第二个General: 在这里设置背景图片和宽度还有位置，如上图

以及设计（Design）这里设计item某一部分的颜色，还有他的动画效果

需要每一步都到位，才会有很好的效果，请记住这个步骤

总结

通过本期内容，你应该对Avada主题中的这些特别模块有了更加清晰的认识。无论是展示产品的WooCommerce模块，还是具备互动效果的图片热点模块，Avada提供的多样化工具可以帮助你更好地提升网站的用户体验。希望这期内容对你有所帮助，欢迎留言或者联系我们，下期我们将继续分享更多Avada主题的技巧与实用方法。

在使用Avada主题时，很多新手可能会对其首页排版感到困惑，尤其是在容器和模块的选择与设置上。相比其他页面构建器如Elementor和WPBakery Page Builder，Avada主题内置的编辑器提供了更加直观和高效的排版方式。在本篇文章中，我们将详细讲解如何在Avada中进行首页排版，帮助你快速上手并掌握容器和模块的设置技巧。

步骤：网站前端→Edit Live→ADD COLUMNS

在首页我们能看到中间和右侧都有这个放在添加的符号，那么我们该怎么选择呢

如果你是要添加你现在这一行，请点击中间的添加

如果你要添加是下面的，请点击右侧的添加符号

如果你要设置当前这列的容器的设置，请选择右侧笔符号

然后会有对应的一个容器设置，比如宽度啊，样式啊，间距啊还有什么设备显示啊等等

如上图，Avada主题自带的编辑器，对于外框和内框的调整他是可视化的，对于elmentor和WPBakery Page Builder编辑器来说，还需要点击后再高级里面设置，可方便太多了

途中蓝色是内框，紫色是外框，是直接可以拉动的，不管是上下还是两侧都是可以的，这点还是做的很好

然后添加后，会弹出一个选择容器样式（如下图）

我觉得这也是一个很好的设计，他不允许模块单独存在，必须一个容器控制着模块，但elmentor和WPBakery Page Builder编辑器是可以让模块单独存在的

样式基本上覆盖了，不需要手动再去设置排列了，好处就是无需担心自己的容器会有不好的排列效果，我说的是如果超过四列以上的，在这里基本上覆盖了，就不需要去手动设置容器了，但elmentor和WPBakery Page Builder编辑器是可以自己去添加更多的容器，当然也就有更多不可控制性，比如排列扭曲或者前端展示不整齐，当然这种自定义的空间更高

如上图，我们添加是1/1容器，也是就一个容器布局，然后我们再点击添加模块，（如下图）

是不是觉得模块太多了，那么如果你是有一定熟练度的，可以试下右上角的搜索，当然新手建议还是在这页面找，多操作

这是文本块，也就是文本模块，也是用的最多的

点击中间的笔符号（编辑）注意所有侧边的都是容器的设置，如果是模块点击中间的即可

步骤：网站前端→Edit Live→ADD COLUMNS→Text Block

然后有一些设置，文本内容，文本位置，以及设备展示

这个不建议弄，可能会破坏布局

点击问号也会有对应的解释，如果你要弄一列多个，直接用容器的多列布局就行了，这样更兼容，不会出现前端设置不兼容的情况

当然在Design(设计）也会有颜色背景和内距的设置，根据你是实际情况来

按钮模块

步骤：网站前端→Edit Live→ADD COLUMNS→Button

然后我们在左侧可以设置按钮的一些信息，比如链接，按钮文本，以及按钮跳转是格式等等（如下图）

如果不懂每一个设置什么意思，可以查看对应的问号都有解释，这就是好的主题的细节

Design（设计）这里能设置按钮的风格，以及图标，按钮大小等等

步骤：网站前端→Edit Live→ADD COLUMNS→image

图片模块

点击编辑，然后更换图片，在媒体库或者本地上传，在加入链接即可，完成基本的图片跳转

在Design(设计）处理可以调整最大宽度还有位置等等，还有一个可以设置图片的外面，你可以理解为一个容器控制图片，就是面具，还是挺有意思的

还可以设置这个面具的位置，尺寸，以及图片是否重复等等

Caption（标题），你还可以帮图片设计标题

有很多类型，标题位置不一样，你根据你实际情况选择

红色是因为背景色设置成红色

如上图，可以更改的

所有的模块的动画效果都在最后一个设置（Extras）

下面这个是可以不用管，有些模块是没有这个的

总结

通过这篇教程，相信你已经对Avada主题的首页排版有了更加深入的了解。从容器的选择到模块的设置，我们看到了Avada编辑器如何简化了布局操作。如果你觉得这期内容对你有帮助，欢迎继续关注我们，下一期我们将继续讲解更多关于Avada主题的技巧与方法，帮助你更加灵活地打造专业网站。