www.wpcitation.com/

Tag: Avada主题教程

  • 使用Avada自带画布功能轻松实现弹窗效果：打造高效用户体验（06）

    使用Avada自带画布功能轻松实现弹窗效果：打造高效用户体验（06）

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

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

    图片[1]-361Sale WordPress Care

    Enter Off Canvas Name：起一个名字

    点击实时编辑（如下图）

    图片[2]-361Sale WordPress Care

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

    图片[3]-361Sale WordPress Care

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

    图片[4]-361Sale WordPress Care

    选择一个容器

    图片[5]-361Sale WordPress Care

    添加一个合适的容器

    图片[6]-361Sale WordPress Care

    添加

    图片[7]-361Sale WordPress Care

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

    图片[8]-361Sale WordPress Care
    图片[9]-361Sale WordPress Care

    看你的需求了

    图片[10]-361Sale WordPress Care

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

    图片[11]-361Sale WordPress Care
    图片[12]-361Sale WordPress Care

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

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

    设置弹窗的触发条件

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

    图片[13]-361Sale WordPress Care

    然后启用在设置

    图片[14]-361Sale WordPress Care

    点击按钮来弹出弹窗

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

    图片[15]-361Sale WordPress Care

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

    图片[16]-361Sale WordPress Care

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

    图片[17]-361Sale WordPress Care

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

    图片[18]-361Sale WordPress Care

    最终效果

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

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

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

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

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

    图片[19]-361Sale WordPress Care
    图片[20]-361Sale WordPress Care

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

    设置触发规则（如下图）

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

    图片[21]-361Sale WordPress Care

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

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

    总结

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

  • 全面解析Avada主题首页排版与容器设置技巧（04）

    全面解析Avada主题首页排版与容器设置技巧（04）

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

    图片[1]-361Sale WordPress Care

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

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

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

    图片[2]-361Sale WordPress Care

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

    图片[3]-361Sale WordPress Care

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

    图片[4]-361Sale WordPress Care
    图片[5]-361Sale WordPress Care

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

    图片[6]-361Sale WordPress Care

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

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

    图片[7]-361Sale WordPress Care

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

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

    图片[8]-361Sale WordPress Care

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

    图片[9]-361Sale WordPress Care

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

    图片[10]-361Sale WordPress Care

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

    图片[11]-361Sale WordPress Care

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

    图片[12]-361Sale WordPress Care

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

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

    图片[13]-361Sale WordPress Care

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

    图片[14]-361Sale WordPress Care

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

    图片[15]-361Sale WordPress Care

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

    图片[16]-361Sale WordPress Care

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

    按钮模块

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

    图片[17]-361Sale WordPress Care
    图片[18]-361Sale WordPress Care

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

    图片[19]-361Sale WordPress Care

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

    图片[20]-361Sale WordPress Care

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

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

    图片模块

    图片[21]-361Sale WordPress Care

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

    图片[22]-361Sale WordPress Care

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

    图片[23]-361Sale WordPress Care
    图片[24]-361Sale WordPress Care

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

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

    图片[25]-361Sale WordPress Care

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

    图片[26]-361Sale WordPress Care

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

    图片[27]-361Sale WordPress Care
    图片[28]-361Sale WordPress Care

    如上图，可以更改的

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

    图片[29]-361Sale WordPress Care

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

    总结

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

  • 如何设置Avada主题的首页图片和滑块：详细教程（03）

    如何设置Avada主题的首页图片和滑块：详细教程（03）

    在现代网站设计中，首页的图片和滑块是吸引访客眼球的关键元素之一。使用滑块不仅能提升网站的动态效果，还能更好地展示核心内容和视觉信息。作为一款功能强大的WordPress主题，Avada 主题自带编辑器及多个滑块工具，让你无需借助第三方插件即可实现丰富的图片与滑块效果。本期文章将为大家讲述如何使用Avada主题设置首页图片和滑块，帮你快速上手，打造更具吸引力的网站首页。这一期我们来讲述

    Avada主题是有自己的编辑器的，无需第三方的，在网站的前端我们能看到Edit Live，点击红色箭头的地方即可进入，黄色框 是网站的页眉和页脚，如果你需要的话点击相应也能进入相应的编辑页面

    步骤：网站的前端→Edit Live

    图片[1]-361Sale WordPress Care
    图片[2]-361Sale WordPress Care

    如下图，这是网站的首页，请注意不是两侧的编辑，两侧是容器和柱子的设置

    图片[3]-361Sale WordPress Care

    如下图，点击

    图片[4]-361Sale WordPress Care

    如果你的模版导入只是图片的首页，或者你只需要单张图片就能达到你的效果，那你点击首页图片中间的笔符号编辑，就可以得到下面这个画面

    图片[5]-361Sale WordPress Care

    你只需要替换掉或者删除（Remove），Edit（编辑），会进入媒体库或者本地文件，根据你的实际情况调整。

    当然如果图片的效果不能满足你，那我们可以选择自己添加滑块（Sliders）。或者选择有滑块的模版，当然还是自己添加比较方便，模版在查看的时候也不一样能发现

    我们来讲怎么添加滑块（Sliders）

    图片[6]-361Sale WordPress Care

    在添加模块这里找到了很多种Sliders（滑块），那我们怎么去选择呢，以及建议呢

    1. Avada Slider

    Avada 自带的滑块，专为 Avada 主题设计，集成度高。

    不同设备的匹配度很好，基本能满足你的要求，滑块的基本的文本，图片，按钮，链接，动画效果都是有的

    那怎么去设置呢，如下图，在网站后端的Avada找到Sliders（滑块）

    步骤：网站后端→Avada→Sliders

    图片[7]-361Sale WordPress Care

    然后会进入下面的图片，设置Sliders（滑块）的名称，还有一些其他的设置，在选项的下方有解释，大家按照解释和实际需求来设置

    我们先创建滑块（Sliders），然后在滑块中添加多个幻灯片（Slides）。如下图，我们先创建滑块（Sliders）

    图片[8]-361Sale WordPress Care

    然后保持即可（Add Slider）

    图片[9]-361Sale WordPress Care

    然后在Slider的列表，我们可以看到，这里名字设置的是1，如下图

    图片[10]-361Sale WordPress Care

    然后我们再去设置幻灯片（Slides）

    图片[11]-361Sale WordPress Care

    然后添加幻灯片，如下图

    图片[12]-361Sale WordPress Care

    然后进入幻灯片的编辑页面，我们需要设置幻灯片来源是image（图片），还是Video（视频），Youtube或Vimeo视频平台，然后幻灯片的名称

    图片[13]-361Sale WordPress Care

    然后需要勾选显示的幻灯片到滑块里，这里滑块和幻灯片的名称都是1，作为演示，大家根据需要后期修改，然后设置Featured image（特色图片），如果选择图片为背景的情况，如下图

    图片[14]-361Sale WordPress Care

    然后我们到网站前端是编辑页面添加Avada Slider

    图片[15]-361Sale WordPress Care

    然后选择之前设定好的幻灯片名称，以及设置幻灯片的高度（Full Height），还有展示（Element Visibility）是三个设备还是单个设备等等

    图片[16]-361Sale WordPress Care

    然后就得到一个初始的幻灯片内容了，这里只能展示，如下图

    图片[17]-361Sale WordPress Care

    步骤：网站后端→Avada→Sliders→Slides

    文本以及按钮或者链接都需要到幻灯片设置，如下图

    图片[18]-361Sale WordPress Care

    这就是Avada主题的Avada Slider的设置了，那么其他的几种有什么区别呢

    图片[19]-361Sale WordPress Care

    2，Layer Slider

    Layer Slider是非常强大的滑块插件，支持复杂的动画效果，你可以为每一层（Layer）添加不同的动画，如图片、文本、按钮等，适合制作更复杂的展示效果。动画效果也更丰富，如果你需要更高级的滑块效果，比如带有多层动画的内容，这个插件是理想的选择，插件提供大量预设模板，可以快速创建滑块并进行个性化定制。但是需要安装插件

    图片[20]-361Sale WordPress Care

    3，Media Slider

    Media Slider是展示多媒体内容设计，如图片库、视频等，可以设置滑块内每个媒体文件的布局和排列方式，确保在不同设备上有良好的显示效果。可以快速创建一个媒体内容的轮播展示，不需要复杂设置，如果你想通过滑块展示视频、音频或其他媒体文件，这个滑块会很适合

    4， Post Slider

    Post Slider用于展示 WordPress 文章的滑块，适合展示博客文章或自定义文章类型。它会根据你的内容自动生成滑块，是展示文章、产品或项目的好工具，具有自动更新，只要你的文章更新，它也会同步

    5，Slider Revolution

    Slider Revolution是高级滑块插件，几乎可以自定义任何滑动效果。你可以使用它来创建复杂的动画、过渡效果，甚至创建整个页面布局。如果你需要最强大的滑块功能和极高的定制化需求，Slider Revolution 是最佳选择，提供大量预设滑块模板，可以直接导入并根据需求修改。基本上集成了所有的功能

    观点：

    Avada Slider：简单轻量，适合快速创建基本滑动效果。

    Layer Slider：支持多层动画，适合需要复杂动画和多层次展示的场景。

    Media Slider：专为展示图片、视频等多媒体内容而设计。

    Post Slider：自动显示文章或产品内容，适合博客或动态内容展示。

    Slider Revolution：功能最强大，适合高度自定义和复杂的滑块效果。

    总结

    但我的建议就用Avada Slider，因为最兼容Avada主题，基本功能都能达到，通过这篇文章，你已经了解了如何在Avada主题中设置首页图片与滑块。无论是使用基础的Avada Slider，还是选择更复杂的Layer Slider 或 Slider Revolution，你都可以根据具体需求灵活应用，优化网站的展示效果。下期我们将继续深入探讨Avada主题的更多功能，带来更多实用的技巧和教程，帮助你打造更专业的WordPress网站。敬请期待！