如何使用 Elementor 在 WordPress 中创建功能框

功能框是网页上的一个突出显示部分，您可以利用它吸引用户关注特别优惠、福利、服务或行动号召等内容。它旨在在视觉上脱颖而出，让访问者一眼就能清晰地看到您的重要信息。

如今，创建引人注目的功能框并不难。Elementor 是一款功能强大且广为人知的拖放式页面构建器插件，它让网站设计变得更加轻松。即使是以前不懂编程的人，现在也可以使用 Elementor 设计出时尚的网页。

它让您可以完全控制布局、颜色、图标、图像、动画等创意元素。因此，本文将逐步介绍如何使用 Elementor 插件在 WordPress 中创建功能框。希望您会喜欢。立即开始吧！

为什么要考虑创建功能框？

功能框能够有效吸引访客的注意力，从而塑造他们与网站内容的互动方式。快速了解一下为什么您应该考虑在网站上创建功能框。

突出主要特点

功能框非常适合用来突出您产品最重要的功能。这些功能可以是您的产品、服务或套餐。功能框无需在整个页面上详细介绍产品，而是能够在视觉上区分关键功能，并以一目了然的方式呈现。

传达价值观

借助引人入胜的功能框，您可以让受众了解您的品牌/产品的独特之处。它为您提供了一个清晰直接地向在线受众传达核心价值的空间。这有助于建立信任，并在更深层次上与您的访客建立联系。

创建一致的布局

您可能需要在整个网站上创建多个功能框。Elementor 允许您根据需要复制这些功能框。这样可以确保整个网站的一致性和节奏感。复制完成后，您只需修改其中的内容即可。

强化品牌形象

功能框是强化品牌形象的绝佳机会。您可以将其与品牌的颜色、字体和图标样式保持一致，以保持视觉和谐。这种微妙的重复设计有助于增强品牌的凝聚力和记忆力。

提高内容可读性

长段落可能会让读者不知所措。但使用功能框，您可以将内容分解成易于理解的小块。它们可以使您的内容更易于浏览。这使得访问者能够快速理解您的信息，而无需花费大量时间探索大块内容。

创建功能框的先决条件

在开始本教程之前，您必须提前确保几个先决条件。请确保您的网站上已安装并激活以下插件。

为什么选择 HappyAddons？

Elementor 如今如此受欢迎的一个关键原因是它拥有大量强大的插件。每个插件都附带许多附加功能和小部件，可以进一步扩展 Elementor 核心插件的功能。HappyAddons就是这样一款插件。

HappyAddons 拥有 130 多个功能丰富的小部件、28 多个精彩功能、100 多个预设模板以及一个主题构建器。希望您知道，免费的 Elementor 版本不提供许多高级功能和小部件。但如果您真的想要一个功能全面的免费选项，HappyAddons 或许是一个明智的选择。

HappyAddons 的免费版本提供 70 多个小部件和 20 多项功能，以及大量预先设计的模板。因此，您可以使用 HappyAddons 的免费版本创建精美的功能框。这就是我们在本教程中使用它的原因。

如何在 WordPress 中创建功能框：分步教程

希望以上插件已在你的网站上安装并激活。现在就可以开始教程了。关注我们。

步骤 01：使用 Elementor Canvas 打开帖子或页面

打开您想要创建功能框的帖子或页面。

步骤 02：选择列布局

根据需要选择列布局。在本教程中，我们将选择三列布局。

步骤 03：将合适的小部件拖放到画布上

如前所述，HappyAddons 提供了许多功能丰富的小部件，可用于创建功能框。其中，最好的三个小部件是图标框、信息框和卡片。您可以使用任何小部件。但在本教程中，我们将使用信息框小部件。

在 Elementor 面板上找到“信息框”小部件。将其拖放到画布上合适的列上。

您会看到信息框小部件已添加到 Elementor Canvas。

探索如何将 Google Sheets 嵌入到 WordPress 表中并使其可排序。

步骤 04：为信息框小部件选择一个预设

预设是一种预先设计的布局，其中包含已保存的设置和自定义项。选择预设后，其所有设置和样式都将应用于小部件，使其呈现预定义的外观。如果您时间紧迫，使用预设可以显著节省您的时间。

HappyAddons 的大部分小部件都包含多个预设。例如，信息框小部件就有12 个预设。只需选择您想要的预设即可。

注意：如果您想从头开始构建该功能，可以避免使用预设。但在本教程中，我们将使用预设。

步骤05：向功能框添加图标/图像

在功能框中添加图标可以帮助用户和访问者直观地看到您的产品提供的特定功能。

展开“图标/图像”部分。点击“媒体类型”下的图标。它将打开图标库。

您可以通过滚动图标库或在搜索框中输入关键字来找到所需的图标。找到图标后，选择它，然后点击底部的“插入”按钮。

您会看到图标已添加到功能框中，正如我们所做的那样。

了解如何在 WordPress 中添加翻转框。

步骤06：向功能框添加标题和描述

在功能框中添加简洁的标题和描述是必须的。这可以立即向用户提供有关该功能的简要介绍。

展开“标题和描述”部分。在该部分下方的相应框中输入您想要的标题和描述。您将在 Elementor 画布上的功能框中看到更改。最后，将标题和描述居中对齐。

步骤07：配置按钮设置

以同样的方式，展开“按钮”部分。您可以为按钮编写新的文案，并添加目标链接。根据需要进行更改。

步骤 08：风格化功能框

进入“样式”选项卡。您将获得自定义功能框中每个元素的选项。您可以

# 风格化图标/图像

展开图标/图像部分。您可以自定义图标的大小、间距、填充、边距、边框类型及其半径。

向下滚动一点，您将看到更改功能图标颜色的选项。您可以根据需要自行进行这些更改。

# 风格化标题和描述

现在，展开“标题和描述”部分。在这里，您可以更改字体、文本颜色和文本之间的间距。

# 风格化功能按钮

以同样的方式，展开“按钮”部分。然后，根据需要更改其字体、填充和其他必要设置。

步骤 09：为整个功能框添加背景颜色

为功能框添加合适的背景颜色可以使其看起来更加美观，并有助于突出其上的内容。

点击小部件上的铅笔图标，选择整个小部件。转到“高级”选项卡 >“背景”部分。

点击“背景类型”选项旁边的画笔图标。选择您喜欢的颜色。该颜色将立即应用于功能框。

步骤 10：复制功能框

现在，您可能想要创建多个功能框来涵盖产品的所有功能。最好的方法是使用 Elementor 自带的“复制”选项。

右键单击容器图标以选择整个功能框。

将会打开一个列表。点击列表上的“复制”选项。

用同样的方法，根据需要复制特征框。您可以看到，我们复制了它，创建了三个具有相同外观和样式的特征框。

现在，您必须从布局中删除空白框。

同样，右键单击空白框的容器图标。然后，在列表中选择“删除”选项。删除所有空白框的操作相同。

您可以看到我们已从布局中删除了所有空白框。

# 编辑功能框中的内容

一旦特征框完美复制，您就可以修改其中的内容以在每个框中呈现不同的特征信息。

步骤11：使功能框适应移动设备

除非你的功能框支持移动设备响应，否则当用户使用小屏幕设备访问网站时，它们会崩溃或变得混乱。Elementor 提供了一种让你的页面支持移动设备响应的方法。

点击Elementor 面板底部的“响应式模式”。这将在画布上添加一个顶部栏，您可以在其中切换，探索页面在不同屏幕尺寸下的显示效果。

如果它们的布局在特定屏幕尺寸上看起来不太好，您可以从“样式”选项卡更改它们的风格，直到它们适合相应的屏幕尺寸。

您所做的更改将仅针对该特定屏幕类型保存。因此，您可以使用 Elementor 插件使任何设计都支持移动设备响应。

步骤12：预览功能框

来到页面前端，检查功能框是否显示正常，按钮是否正常工作。希望它能顺利运行。

如何使用 Elementor 在 WordPress 中添加翻转框

网页设计的趋势几乎每天都在变化。为了在市场中保持竞争力，所有网站所有者都必须不断适应这些变化。即使在几年前，静态网页元素也足以吸引用户和访客的注意力。

但现在，大多数设计师都在构建网站时使用互动元素来提升参与度。互动网页元素的设计方式能够响应用户的操作，例如点击、悬停、移动和滚动，从而创造引人入胜的体验。翻页框就是这样一种互动元素。

在本教程中，我们将逐步讲解如何使用 Elementor 在 WordPress 中添加翻转框。希望这篇文章对您有所帮助，值得您花时间学习。立即开始吧！

什么是翻页框？它在网页设计中的用例

翻转框是一个 Elementor 交互式小部件，可让您在框的正面和背面显示内容，并在鼠标悬停或点击时翻转。它结合了视觉吸引力和动态效果，在呈现双层信息的同时吸引用户的注意力。

当您需要在有限的空间内涵盖大量信息时，此小部件非常有用。它提供丰富的自定义选项，让您可以将其设计与网站的品牌形象保持一致。让我们在下面附带的短视频中了解翻转框的工作原理。

网页设计中翻页框的使用案例

服务或功能亮点，正面有图标，背面有说明
团队成员展示，正面为照片，背面为个人简介/联系方式
紧凑且交互式的产品特性比较
翻转时显示按钮或链接的号召性用语
作品集展示，正面显示项目缩略图，背面显示摘要
定价计划正面显示计划名称，背面显示功能列表

如何使用 Elementor 在 WordPress 中添加翻转框

要开始此过程，您的网站必须安装以下插件。点击下方链接即可获取。

一旦它们在您的网站上安装并激活，请开始按照下面描述的教程了解如何使用翻转框小部件。

步骤 01：打开 Elementor 画布

使用 Elementor Canvas 打开您想要添加翻转框小部件的帖子或页面。

步骤 02：选择要添加翻转框小部件的部分

创建一个部分，定义列数，以便您可以在其上添加翻转框小部件。

在 Elementor 面板上找到翻转框小部件。将其拖放到 Elementor 画布上的相应部分。

您会看到翻转框小部件已添加到画布中，并带有一些虚拟内容。

步骤 03：选择翻转框的预设

预设是一种已保存的设计样式，您可以将其快速应用于小部件。翻转框小部件附带多个预设，您可以在右侧边栏中看到它们。

选择您想要的任何预设。您将看到该样式立即应用于您的小部件。

步骤 04：将内容添加到小部件的正面

如前所述，翻转框小部件允许您在两侧添加内容。现在，让我们在正面添加内容。展开“正面”部分。

您可以为小部件设置图片、图片分辨率、标题、标题的 HTML 标签、描述和对齐方式。自己动手吧。

您可以看到我们在翻转框的正面添加了一些内容（图像、标题和描述）。

步骤 05：将内容添加到小部件的背面

以同样的方式，展开小部件的“背面”部分。您可以添加媒体、标题、描述和按钮，并定义它们的对齐方式。根据需要进行必要的操作。

您可以看到我们在这里也添加了一些内容。

步骤 06：配置 Flip Box 小部件的设置

接下来，展开“设置”部分。您将获得配置动画类型、翻转方向和持续时间的选项。

步骤 07：对翻盖盒进行风格化

来到“样式”选项卡。这里分为四个部分。第一部分是“常用”部分。

您可以从公共部分设置翻转框小部件的高度和边框半径。

接下来，展开“正面”部分。您可以从此部分自定义填充、边框类型、框阴影、背景类型、间距和图像大小。

同样，通过展开“背面”部分，您可以设置其填充、边框类型、框阴影、背景类型、颜色和排版。

希望你能独自完成。为了更好地解释本教程，我们更改了小部件的字体和文本粗细。

步骤08：自定义按钮

该按钮显示在翻页框的背面。通过展开“背面– 按钮”部分，您可以配置按钮的边框宽度、边框颜色、边框半径、框阴影、字体、颜色和背景颜色。

自己动手。

步骤 09：使 Flip Box 小部件响应移动设备

除非您的 Elementor 小部件针对平板电脑和移动设备进行了优化，否则您的网站可能会在较小的屏幕上崩溃，从而导致糟糕的用户体验和更高的跳出率。

点击Elementor 面板底部的“响应模式”选项。它将显示不同屏幕尺寸（桌面、平板电脑和移动设备）之间的选项切换。

选择移动设备屏幕尺寸。然后，自定义翻页框的布局和元素，使其适合屏幕尺寸。同样适用于平板电脑屏幕。

因此，以同样的方式，为您的 Elementor 网站创建任意数量的翻转框。

奖励：您还可以使用 HappyAddons 做什么

除了创建翻转框之外，HappyAddons 插件还能做更多事情。让我们快速了解一下这款插件的更多功能，以及为什么它值得您考虑入选。

主题建筑

主题构建是 HappyAddons 的一项免费功能，它是 Elementor 的高级功能。使用 HappyAddons主题构建器，您可以创建页眉、页脚、博客文章模板、存档页面以及条件设置。

WooCommerce 集成

它有九个适用于 WooCommerce 的小部件。分别是产品网格、产品轮播、产品类别网格、产品类别轮播、单品、迷你购物车、购物车、结账和运费栏。有了它们，您可以进一步扩展电商网站的功能。

社交媒体整合

HappyAddons 为您提供以下社交媒体小部件：社交图标、社交分享、Twitter 动态、Facebook 动态、Twitter 动态轮播和 Instagram 动态。借助这些小部件，您可以将您的网站链接到热门社交平台，以便分发内容。

信息图表页面设计

HappyAddons 包含各种小工具，例如条形图、折线图、饼图和甜甜圈图、极坐标面积图以及雷达图。巧妙运用这些小工具，您可以在 WordPress 网站上创建精美的信息图表文章和页面。查看如何创建信息图表网页。

创意

HappyAddons 目前拥有 25 多个创意小工具，可帮助您创建引人注目的网站。其中一些最受欢迎的创意小工具包括卡片、图像悬停效果、趣味元素、图像堆叠组、对齐网格、创意按钮、流畅悬停图像、文本滚动和单页导航。

所以，一旦你拥有了 HappyAddons 插件，你不仅可以添加翻页框，还可以添加上面提到的各种其他元素。所以，HappyAddons 绝对物有所值。

如何使用 Elementor 在 WordPress 中添加顶部栏

顶部栏提供了一种有效的方式来突出显示 WordPress 上的重要消息、促销和号召性用语。它位于网页顶部，旨在吸引访问者的注意力，而不会妨碍用户的浏览体验。

精心设计的顶部栏可以显著提高转化率，因为它可以立即吸引访问者的注意力并引导他们采取行动，例如注册新闻通讯、获取限时优惠和探索新内容。它可以起到持续提醒的作用，而不会打扰用户。

使用 Elementor 向 WordPress 添加顶部栏非常简单。在本文中，我们将逐步介绍如何使用 Elementor 在 WordPress 中添加顶部栏。请继续关注我们，直到最后。

什么是顶部栏？

顶栏是显示在网站顶部主标题上方的窄水平部分。与弹出窗口或横幅不同，顶栏用于显示联系方式、链接说明、重要公告、促销优惠和消息。您可以通过大量自定义设置（例如颜色、字体和品牌专属按钮）来增强用户参与度。

顶部栏并非 24/7 全天候显示在网站顶部。相反，它通常在活动期间出于促销目的显示。根据其使用情况，它有不同的名称。我们将在下一节中讨论它。继续阅读。

网站顶部栏叫什么？

正如刚才所说，网站的顶部栏根据其用途和功能有不同的名称。请查看下面列出的一些用于顶部栏的常用术语。

公告栏 –用于分享公告、事件通知和重要更新。
通知栏 –显示限时优惠、系统维护新闻和紧急消息。
促销栏——突出显示特别促销、独家折扣和活动以促进销售。
信息栏——显示联系电话、购物详情、当地地址和营业时间。
粘性栏 –即使用户滚动帖子和页面，也固定在网站顶部。
浮动栏——当您滚动帖子和页面时随之移动，以确保明显的存在感。

如何使用 Elementor 在 WordPress 中添加顶部栏

理论部分已经结束。现在，我们将在本节中介绍教程部分，逐步解释如何使用 Elementor 在 WordPress 中添加顶部栏。

先决条件：安装 Elementor 或 HappyAddons

要在整个网站上创建顶部栏，您必须有权访问 Elementor 主题构建器，这是一项高级功能。如果您想使用该插件的高级版本并正在寻找免费选项，您必须尝试 HappyAddons 插件。

HappyAddons 实际上是 Elementor 插件的一个附加组件，具有许多 Elementor 中通常需要付费的免费功能。例如，HappyAddons 还有一个主题构建器，它与 Elementor 非常相似，但完全免费使用。

因此，在本节中，我们将使用 HappyAddons 插件来解释本教程。在您的网站上安装并激活以下插件。

安装并在您的网站上激活它们后，请开始按照下面说明的教程操作。我们将向您展示如何在 WordPress 上创建顶栏，就像下图中看到的一样。

步骤 01：进入 HappyAddons 主题生成器

导航到HappyAddons > 主题构建器。与 Elementor 插件一样，您可以使用 HappyAddons 插件的主题构建器创建页眉、页脚、博客文章模板和存档页面。

步骤 02：转到标题部分

由于顶部栏显示在网页标题的顶部，因此您必须从标题部分对其进行自定义。因此，使用“使用 Elementor 编辑”选项打开标题。

了解如何在 Elementor 中创建画布外内容。

步骤 03：在页眉上方添加新容器

将光标悬停在标题上将显示加号 (+) 图标。单击此图标将允许您向上述标题添加新容器。执行此操作。

步骤 04：自定义顶部栏并添加内容

您必须为顶部栏的背景添加对比色。为此，请单击容器上的六个点图标> 转到“样式”选项卡 > 找到“颜色”选项 > 选择一种颜色。

将文本编辑器小部件添加到顶部栏部分。这将允许您向该部分添加文本内容。

在右侧栏的文本编辑器下，您可以编写所需的文本内容，这些文本内容将实时显示在顶部栏上。

从“文本编辑器”部分下的以下标记选项中，您可以更改添加到顶部栏的文本的颜色和粗体。

您甚至可以在单词之间添加空格并为某些单词添加下划线。我们已在本教程的文本中执行此操作。您可以在下面看到它们。

HappyAddons 允许您将粒子效果添加到顶栏的背景中。Happy Particle 效果是一种视觉动画技术，其中发光的小粒子在网页上动态移动，营造出生动活泼的用户体验。

要添加此功能，请导航至样式 > 快乐粒子效果。之后，切换到启用粒子背景。

接下来，你可以选择粒子样式、粒子颜色、不透明度、粒子数量、粒子大小和移动速度。希望你能自己动手。

我们添加了一个短片，以便您可以查看 Happy Particle 功能的工作原理。这确实使顶部栏看起来很漂亮。

展开边框部分。您可以根据需要设置边框宽度和颜色。但是，我们认为添加边框对于顶部栏来说并不重要。所以，您可以避免这样做。

现在，展开“形状分隔线”部分。“形状分隔线”选项允许您在部分的顶部或底部添加可自定义和动态的形状。

但是，此选项对于顶部栏来说也不重要。所以，最好避免使用它。但如果您想将此功能添加到顶部栏，您可以这样做。

这是有关如何使用 Elementor 创建信息图表网页的指南。

步骤 05：配置顶部栏的高级设置

最后，进入“高级”选项卡。您将在这里获得许多选项来自定义边距、填充、对齐、顺序、位置、高度、运动效果、响应等。自行进行必要的自定义。

步骤 06：隐藏设备类型的顶部栏

您可以隐藏任何相应设备上的顶部栏。例如，我们想隐藏平板设备上的顶部栏。为此，展开响应式部分。然后，关闭您想要隐藏顶部栏的设备模式选项。

步骤 07：使顶部栏适应移动设备

单击Elementor 面板页脚上的“响应模式”选项。然后，选择“移动肖像”模式。

您可以看到顶部栏内容出现在三行中并且未完全对齐，与您在桌面模式下看到的不同。

为了使文本在屏幕尺寸下看起来更好，请保持移动纵向模式进行所需的自定义。

我们已将文本居中对齐。现在看起来是不是更好了？您可以按照自己想要的方式进一步自定义它。

步骤 08：发布/更新更改

完成所有自定义后，单击Elementor 面板底部的发布/更新按钮以保存所有更改。

探索如何使用 Elementor 在 WordPress 中创建灯箱。

步骤 09：预览网站顶部栏

现在，进入您的网站前端。您将看到顶部栏显示在网站顶部。

因此，您可以免费使用 Elementor 插件轻松在 WordPress 上创建顶部栏。

最后的想法

希望您喜欢本教程。但要充分利用顶部栏，您必须仔细遵循几个关键事项。专注于保持干净且具有视觉吸引力的设计，并与您的网站品牌保持一致。选择对比色以提高可读性，使用简洁明了的文字，并保持信息与您的受众相关。

此外，优化移动响应能力，使顶部栏在所有设备上都能正常使用，而不会影响用户体验。避免在顶部栏中显示过多信息，因为这会让访客不知所措。如果使用动画或效果，请保持其微妙性以保持专业性。

使用AI大模型进行OCR的方法，既好又省。

之前一直用腾讯云的OCR API功能，她的高精度OCR还是挺好用的，但续费的价格实在感人，1000次应用就要200元，见下图。

考虑到之前使用kimi的图像识别功能还不错，就试着用AI大模型功能来进行OCR，一般来说，识别精度在AI的加持下比一般API要高。但官网也只给了python及node的代码，为了适应自己的WP采集发贴程序，现修改为C#代码的形式：


namespace wordpress采集项目
{
    public class KimiOcr
    {
        // 从环境变量中获取 API 密钥，也可以直接硬编码（不推荐生产环境中使用硬编码）
        private static readonly string ApiKey = "sk-XXXXXX";//你的APIKEY
        private static readonly string BaseUrl = "https://api.moonshot.cn/v1";

        /// <summary>
        /// 使用 Kimi Vision 模型对图片进行 OCR 识别，直接通过提示词让大模型识别图片中的文字。
        /// </summary>
        /// <param name="imagePath">图片文件路径</param>
        /// <returns>识别出的文字</returns>
        public static async Task<string> RecognizeImageText(string imagePath)
        {
            try
            {
                // 读取图片文件并转换为 Base64 字符串
                byte[] imageBytes = File.ReadAllBytes(imagePath);
                string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower(); // 如 "png", "jpg"
                string imageBase64 = Convert.ToBase64String(imageBytes);
                string imageDataUrl = $"data:image/{extension};base64,{imageBase64}";

                // 构造请求 payload
                var requestPayload = new ChatRequest
                {
                    model = "moonshot-v1-8k-vision-preview",  // 根据实际情况调整模型名称
                    messages = new ChatMessage[]
                    {
                    new ChatMessage { role = "system", content = "你是 Kimi。" },
                    new ChatMessage
                    {
                        role = "user",
                        // 内容由多个部分组成：图片和文本指令
                        content = new List<ContentPart>
                        {
                            new ContentPart
                            {
                                type = "image_url",
                                image_url = new ImageUrlPart { url = imageDataUrl }
                            },
                            new ContentPart
                            {
                                type = "text",
                                text = "请识别图片中的文字。"
                            }
                        }
                    }
                    }
                };

                string jsonPayload = JsonConvert.SerializeObject(requestPayload);

                using (HttpClient client = new HttpClient())
                {
                    // 设置认证头部和请求头
                    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", ApiKey);
                    client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                    var contentData = new StringContent(jsonPayload, System.Text.Encoding.UTF8, "application/json");
                    HttpResponseMessage response = await client.PostAsync($"{BaseUrl}/chat/completions", contentData);
                    response.EnsureSuccessStatusCode();
                    string jsonResponse = await response.Content.ReadAsStringAsync();

                    var chatResponse = JsonConvert.DeserializeObject<ChatResponse>(jsonResponse);
                    return chatResponse.choices[0].message.content;
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine($"OCR 识别失败：{ex.Message}");
                return string.Empty;
            }
        }
    }

    public class ChatRequest
    {
        public string model { get; set; }
        public ChatMessage[] messages { get; set; }
    }

    public class ChatMessage
    {
        public string role { get; set; }
        public object content { get; set; } // 可以是字符串或 List<ContentPart>
    }

    public class ContentPart
    {
        public string type { get; set; }
        public ImageUrlPart image_url { get; set; }
        public string text { get; set; }
    }

    public class ImageUrlPart
    {
        public string url { get; set; }
    }

    public class ChatResponse
    {
        public Choice[] choices { get; set; }
    }

    public class Choice
    {
        public ChatMessageResponse message { get; set; }
    }

    public class ChatMessageResponse
    {
        public string content { get; set; }
    }
}
使用方法：
                        string ocrText = string.Empty;
                        //ocrText = await PerformOcr(outputImagePath, checkBox4.Checked?1:0);//1为高精度识别
                        ocrText = await KimiOcr.RecognizeImageText(outputImagePath);

根据Kimi官网的说法：每张图片消耗的 Tokens 为固定值 1024（不区分图片尺寸及图片质量）。Vision 模型在计费方式上与 moonshot-v1 系列模型保持一致，那么计算一下Money的消耗如下：

根据模型推理的总 Tokens 计费，1M Tokens为12元，则每张图片大约消耗1024/1M*12=0.012元/每张图片。比起腾讯云的0.2元/每张图片，价格降为腾讯的6%，且识别度更高，可以说是既好又便宜，可以放开来用。

如何在 Elementor 中创建画布外内容：指南

在小空间内呈现大量内容而不让用户感到困惑，这对网页设计师来说是一项挑战。Off Canvas Content 是一种时尚、新颖且智能的解决方案，可帮助您实现这一目标。

使用 Elementor 页面构建器插件，您可以轻松地在您的网站上创建画布外菜单、促销横幅、侧边栏等。这不仅可以帮助您呈现内容，还可以简化导航、提高可读性并转化用户。

如果您的网站是使用 Elementor 构建的，则只需几分钟即可为您的网站创建 Off Canvas 内容。在这篇博文中，我们将通过分步指南指导您如何在 Elementor 中添加 Off Canvas 内容。让我们开始吧！

什么是画布外内容？

画布外内容是一个 Elementor 小部件，可将内容隐藏在屏幕外，直到用户交互触发。通常，此小部件与屏幕上的按钮相连。每当用户单击按钮时，画布外内容就会立即滑入并展示附加信息。

如上所述，屏幕外内容小部件涵盖菜单、促销横幅、侧边栏、登录和注册面板、购物车、内容过滤器和快速查看选项等内容。它有助于保持干净、有序的布局，在需要时易于访问。

如何在 Elementor 中创建画布外内容

现在，在本节中，我们将通过分步指南讨论如何在 Elementor 中创建 Off Canvas 内容。但在开始本教程之前，请确保您已在网站上安装并激活以下插件。

当它们在您的网站上准备就绪后，请开始按照下面说明的教程进行操作。

步骤 01：将“画布外内容”小部件添加到 Elementor 画布

使用 Elementor 画布打开帖子或页面。在 Elementor 面板的搜索框中输入小部件的名称即可找到小部件。看到小部件后，将其拖放到画布中。

您将看到画布上添加了一个按钮或图标。单击它，您可以打开“画布外”部分。您可以在下面附带的视频片段中查看。

步骤 02：将 Off Canvas 小部件添加到您的网页

上面，我们将小部件放在空白画布上。但您可以将其添加到网页的任何特定部分。为了解释这一点，我们打开了一个装饰好的网页。然后，将小部件放在英雄部分上

您可以看到该小部件已添加到网页的标题部分。

检查如何使用 Elementor 改善 WordPress 中的本地 SEO。

步骤 03：为 Off Canvas 小部件选择自定义内容类型

导航至“内容”>“画布外内容”。单击“内容类型”选项旁边的下拉列表。

您必须根据想要显示的内容类型从小部件的下拉列表中选择合适的内容类型。

对于本教程，我们选择了自定义内容类型。

探索有关如何在 WordPress 中设计知识库的指南。

步骤 04：向小部件添加信息

使用这些框将您想要的内容添加到小部件中。单击框将展开它们并创建空间以供您添加信息。

您可以看到，我们通过展开框向其中添加了内容。您可以通过单击相应的选项来添加文本和媒体文件。

了解如何在 Elementor 中创建令人惊叹的信息图表网页。

步骤 05：选择切换源

在切换部分，您可以更改切换源类型、位置、动画和标签。

打开 Toggle Source 选项旁边的下拉列表。选择所需的切换类型。我们在本教程中选择了按钮作为切换类型。

接下来，从按钮文本选项更改按钮副本。您甚至可以添加按钮图标。检查画布上按钮的所有更改。

步骤 06：自定义关闭栏图标

关闭画布部分右上角带有一个十字图标 (X) 。要自定义它，请展开Elementor 面板上的关闭栏部分。

使用其中的相应选项，您可以禁用图标、更改对齐方式、更改图标类型、图标标题等。希望您可以自己完成这些操作。

这是有关如何在 WordPress 中创建事件日历的教程。

步骤 07：更改小部件的设置

展开“设置”部分。从“方向”选项中，您可以更改“画布外”小部件的位置。您可以将其放置在左侧、右侧、顶部或底部。

接下来，您可以选择内容过渡效果。它将为网页添加动画效果，并在单击按钮时显示该效果。

例如，我们选择“显示”作为内容过渡类型。现在，请观看下面附带的视频片段。单击按钮后，页面也会随“画布外”部分一起移动。

按照同样的方式配置其它选项。

步骤 08：对画布外的小部件进行风格化

来到“样式”选项卡并展开“Offcanvas 内容”。

从这里，您可以更改画布外尺寸、添加边框类型、增加边框宽度、更改边框颜色以及设置边框半径。希望您可以像我们一样自己完成这些操作。

展开内容部分。您将获得使用“画布外”小部件自定义内容对齐方式、背景颜色、边框类型、边框宽度、边框颜色和边框半径的选项。

以同样的方式，您可以更改字体、字体大小和文本颜色。

以下是有关如何在 WordPress 中显示 360 度旋转产品摄影的简单指南。

步骤 09：样式化切换按钮

以同样的方式，展开Toggle部分。这将允许您自定义按钮对齐方式、排版、文本颜色、边框半径、按钮背景等。

步骤 10：自定义关闭栏图标

通过展开关闭栏部分，您可以自定义关闭图标的颜色、大小等。

步骤 11：让 Off Canvas 小部件适应移动设备

您的每个网页元素都应针对移动设备进行优化，以便它们在各种设备上都能很好地显示。否则，您可能会错失巨大的流量潜力，因为大多数网站约 50% 的流量来自移动用户。

对于移动设备优化，请单击Elementor 面板底部的响应模式图标。将出现一个顶栏，其中包含可让您在不同的屏幕尺寸之间切换的选项。

现在，在不同的屏幕尺寸之间切换并检查设计是否适合各自的设备。如果有任何问题，您可以根据需要更改字体大小、按钮大小、画布宽度、高度和其他选项。

更改将仅针对特定屏幕尺寸保存，而不会影响其他屏幕尺寸。因此，您可以让 Off Canvas 小部件对移动设备做出响应。

步骤 12：预览画布外内容小部件

现在，转到网页的预览选项并检查小部件是否正常工作。您可以看到，它在我们这边运行良好。

使用画布外内容小部件时需要考虑的事项

为了充分利用该小部件，在使用“画布外内容”小部件时，您必须仔细考虑几点。请查看下文。

流畅的用户体验

画布外的内容应支持用户浏览网站，而不是干扰他们的体验。确保小部件运行顺畅，动画协调良好。但是，尽量减少可能降低性能的剧烈运动效果，尤其是在手机上。

针对手机进行优化

如上所述，如今相当一部分网络访问者通常来自移动设备用户，因此您必须针对所有设备类型对网站进行良好的优化。否则，以移动设备为中心的用户将获得非常负面的体验。

轻松关闭

屏幕外内容小部件必须包含一个简单的关闭选项。如果很难找到，用户肯定会感到沮丧。因此，不要忘记以易于导航的方式突出显示关闭图标。

内容相关性

屏幕外内容需要保持简短和集中，以实现特定功能，例如导航工具或促销横幅。包含过多信息或不相关元素会破坏其提供集中和无缝用户体验的目的。

最后的话！

一旦您知道如何充分利用“屏幕外内容”小部件，它就可能成为吸引用户并提高转化率的有效方式。我们试图介绍关于该小部件的基本教程。因为讨论该小部件的所有功能及其使用方法确实很困难。

因此，除了本教程之外，如果您想了解更多关于可以使用小部件执行哪些其他操作的想法，您可以访问我们的Elementor 画布外内容演示页面。您将获得一系列出色的画布外设计，可以直接将其复制并粘贴到您的网站上。

如何使用 Elementor 创建粘性标题

粘性标题是一种导航栏，即使您滚动浏览页面及其内容，它仍会停留在网站顶部。因此，您可以立即访问菜单以及搜索栏和重要链接，而不必浪费时间返回顶部。

它可以显著提升用户体验，因为您可以立即访问关键的 Web 链接和元素。如今，使用 Elementor 在 WordPress 上创建粘性标题非常容易。这是一个超级简单的页面构建器解决方案，您只需拖放即可创建各种 Web 元素。

在这篇博文中，我们将介绍如何使用 Elementor 在 WordPress 上创建粘性标题的详细分步教程。

为什么要选择 Elementor？

Elementor 是一款功能丰富、功能强大的页面构建器解决方案，让您只需拖放即可构建几乎任何类型的网站。如上所述，它甚至使初学者也可以自己创建网站，而无需编写任何代码。

它的实时编辑功能使您可以随时查看自定义内容以确保准确性。Elementor 附带了许多预先设计的模板的综合集合，因此您可以非常快速地开发网页布局的基本版本。

如果您觉得插件的小部件和工具不足以满足您的设计需求，请不要担心！您会发现十几个功能丰富的附加组件，其中包含许多高级功能和小部件，可以增强 Elementor 插件的功能。

通过将它们一起使用，您可以将您的网页设计能力提升到一个新的水平。

使用 Elementor 创建标题需要什么？

要为您的网站创建标题，您需要访问 Elementor 插件的主题构建器功能，这是一项高级功能。因此，要遵循本教程，您需要 Elementor 插件的免费版和高级版。您可以通过单击下面附加的按钮来下载它们。

Elementor 免费

Elementor 专业版

一旦这些插件在您的网站上安装并激活，请开始按照下面部分中说明的教程进行操作。

如何使用 Elementor 创建粘性标题

在本节中，我们将逐步介绍如何使用 Elementor 插件创建粘性标题。请继续关注我们。

步骤 01：进入主题生成器

转到模板 > 主题生成器 > 选择标题

会出现一个弹出窗口。您将获得一些选项来选择所需的模板类型。

您将进入新页面。单击页眉选项。

Elementor 画布将在您的屏幕上打开。单击Elementor模板库图标。

Elementor 将向您展示许多免费模板和块。您还可以保存自己喜欢的模板。

步骤02：设置总体布局

要创建自定义标题，您必须决定需要什么类型的布局。

首先，单击标题部分的主自定义按钮来编辑侧边栏中的布局部分：

然后选择你想要的结构

注意：我们使用上图中标记的布局来创建标题。

步骤 03：添加徽标

这是一个非常简单的步骤。您可以非常轻松地添加徽标。您可以通过两种方式进行操作。转到仪表板 > 外观 > 自定义 > 站点标识。

之后，您可以选择徽标并将其设置在标题上。

在侧边栏中选择 站点徽标 块。将其拖到您想要使用的位置。

最后，将“站点徽标”拖到虚线区域后，它将自动获取您的实际徽标。

在此设置中，您可以选择单击时徽标的外观，还可以在此处调整其大小和对齐方式。您可以使用样式和高级选项做很多事情。

步骤 04：添加菜单

从左侧边栏中选择“导航菜单”小部件。将其拖到标题区域，如步骤四所示。

它将调整您创建的菜单。

以下是您应该了解的重要事项。

菜单：选择您想要展示的菜单。您可以从外观 → 菜单中选择
布局：您将获得水平、垂直或下拉
对齐：左对齐、居中对齐、右对齐或拉伸以填充整个可用区域
指针 – 你喜欢如何标记活动链接
动画 – 你喜欢的指针外观

步骤 05：添加搜索字段

要在标题中添加搜索字段，您只需选择搜索小部件并拖动到您想要设置的位置。

在本节中，您将获得：

皮肤 – 您将获得经典、简约和全屏
占位符 – 您可以保留此部分或保留“搜索”等内容
对齐、大小 – 从这里对齐搜索框

步骤 06：添加其他额外元素

为了让您的标题更具吸引力，您可以从屏幕左侧添加一个小部件。您可以尝试使用这些小部件来获得您喜欢的惊人效果。

这是小部件的屏幕截图。你可以搜索任何你想要的内容。

使用小部件，您可以添加社交图标、页眉文本等。

步骤 07：发布标题

而且，这是最重要的部分。设计完标题后，你必须非常小心。

要应用此功能，请点击页脚左侧的发布按钮。您将看到一个弹出窗口，询问您希望在哪里显示新的页眉。

此部分的基本条件是选择“整个站点”，然后点击“保存并关闭”按钮。

最后，你的标题部分已经准备好了。好极了！！！

因此，通过遵循这些步骤，您可以轻松地为您的网站设计自己的标题。

观看下面的视频，了解如何在 WordPress 中创建网站标题：

https://www.youtube.com/embed/raFYH4asRfQ?feature=oembed

如何在 WordPress 中设计知识库

精心设计的知识库不仅仅是文章的集合。它是一种全面的在线资源，提供各种文档帖子、提示和指南，使用户和访问者无需依赖支持团队即可找到所需的信息。

无论您经营的是电子商务商店、销售 SaaS/插件，还是经营基于服务的业务，维护知识库都是必须的，用户可以轻松找到所有常见查询。WordPress 使创建和设计知识库变得非常容易。

在本文的以下部分中，我们将逐步介绍如何在 WordPress 中设计知识库。在此之前，我们将介绍一些理论部分。让我们开始吧！

什么是知识库？

知识库是传统博客档案之外的长文和短文的有组织集合。它解答了客户可能对您的业务、产品和服务产生的所有潜在疑问。知识库通常不包含促销或评论内容，这与传统博客不同。

它是一种自助式内容存储库，按标签、类别和部分进行组织。它使用户能够自己找到他们所面临的问题的答案和解决方案。因此，通过使信息易于访问，知识库可以增强用户体验、减少客户支持并确保响应一致性。

维护知识库的重要性

在进入本教程之前，我们想先分解几个要点，解释为您的企业维护知识库的重要性。

减少支持请求

由于知识库允许用户自己找到问题的解决方案，因此他们不必过多依赖支持团队。这提高了效率并减少了支持请求。因此，您的团队可以更加专注于其他工作。

增强内部沟通与协作

如果您是企业主并管理团队，您可以详细描述业务使命、愿景和工作政策，从而创建内部知识库。它可以消除所有混乱，并帮助所有员工与业务目标保持一致。

提高 SEO 分数和在线可见度

通过创建知识库，您可以添加更多关于您的业务、产品和服务的内容和信息。如果它们经过了良好的优化，您可以从 Google 获得到文档帖子的自然流量。查看您应该避免的常见 SEO 错误。

利用分析进行持续改进

最知名的知识库解决方案包括分析功能，与 Google Analytics 集成。使用它们，您可以跟踪网站上的流量、位置和用户行为。

防止错误信息并建立信任

知识库部分通常被认为是有关特定产品、企业和服务的官方信息来源。因此，通过在那里清楚地提供信息，您可以防止任何错误信息出现，最终建立信任。

探索最好的 WordPress 知识库插件。

如何在 WordPress 中设计知识库

如前所述，如今使用 WordPress 设计知识库非常容易。在本节中，我们将逐步介绍如何在 WordPress 中设计知识库。请继续关注我们。

步骤 01：安装 weDocs 插件

如果没有知识库插件，就不可能在 WordPress 上创建和设计知识库。您可以在网上找到各种有用且适合初学者的插件来做到这一点。weDocs是一款功能丰富的插件，您可以用它来实现这一点。单击下面的按钮获取该插件。

weDocs 免费

维文专业版

使用免费版本，您只能创建和设计基本形式的知识库。要使用高级特性和功能，您需要高级版本。因此，最好安装并激活 weDocs 插件的两个版本。

插件安装后，您将看到weDocs 菜单已添加到 WordPress 管理面板。

同时，在页面部分也会创建一个知识库页面。在接下来的步骤中，我们将向您展示如何配置 weDocs 设置来设计知识库页面。

步骤02：创建并添加几个文档帖子

在自定义知识库页面布局之前，请添加几个虚拟文档帖子。这将帮助您检查文档帖子在知识库页面上的显示效果。

因此，请单击+ 新建文档按钮。

将会打开一个弹出窗口。在框中输入名称，然后单击“发布”按钮。

您会看到已添加知识库卡片。现在，通过点击+ 添加按钮，您可以创建并向卡片添加新文章和部分。

您将看到知识库卡上创建的部分和文章的数量。

以同样的方式，使用插件添加任意数量的知识库。您可以看到我们创建了两个虚拟知识库。

# 预览默认布局

现在，来到页面的前端。您将看到文档页面的默认布局。在以下步骤中，我们将向您展示如何使用 weDocs 插件的可用选项设计此知识页面。

步骤03：选择知识库页面的布局

进入您的 WordPress 仪表板。导航至weDocs > 设置 > 布局和样式。

选择文档页面的布局。有两种布局 – 单列和双列布局。最好使用双列布局。

然后，从三个选项中为文档模板选择一个布局。在本教程中，我们将使用默认布局，因为它看起来也不错。

向下滚动页面。您将看到更多选项。点击下拉图标可自定义导航背景颜色、文本颜色和字体颜色。

您可以通过切换选项来启用更多选项，例如 目录、导航图标 和 折叠文档页面文章。

最后，点击保存设置按钮。以此方式根据需要进行必要的更改。

# 预览页面和文档模板布局

配置布局设置完成后，转到预览页面。您肯定会看到与默认页面不同的布局。然后，单击任意文章以检查文档模板布局。

我们对我们的布局很满意。如果您不满意，请转到后端并重新进行自定义。

步骤 04：启用助手小部件

weDocs插件允许你在页面中添加一个辅助小部件，它可以帮助你在小部件的搜索框中输入关键词后快速找到准确的文章。

转到后端并导航到“Widget Preference”。然后，切换到“Enable”选项。然后，通过编辑每个信号部分开始自定义小部件。

向下滚动，到达页面末尾。点击“保存设置”按钮。

步骤 05：自定义消息布局

weDocs 插件还允许您启用消息传递选项。它允许用户使用电子邮件地址提交查询，以便支持团队稍后可以与他们联系并提供可行的解决方案。

要启用它，请导航到助手小部件部分下的消息选项。然后，切换到右上角的启用选项。

之后，转到“消息”选项卡并在字段中填写必要的信息。

进入外观选项卡。您可以添加图标并输入字段名称。最后，点击保存设置按钮。

步骤 06：启用并配置 AI 聊天机器人

AI Chatbot 是一款使用人工智能创建类似人类的用户对话的软件程序。它可以根据知识库中存储的信息立即为用户的查询提供解决方案。因此，它可以节省用户的时间，因为他们不必花费大量时间探索知识库来查找准确的文章。

weDocs 也有一个 AI 聊天机器人。转到AI 聊天选项，切换到启用选项，然后进入AI 聊天选项卡。

由于这是高级功能，您必须购买套餐。单击“购买订阅”按钮。

您将被重定向到结帐页面。在相应字段中填写必要的信息并订阅套餐。

订阅完成后，再次来到后端的 AI Chatbot 部分，然后转到外观选项卡。

您可以设置 Chabot 标签图标并为字段命名。希望您能独自完成这些工作。最后，点击 “保存设置”按钮。

现在，来到前端并检查 AI 聊天机器人是否正常工作。只需编写一个查询。您会看到聊天机器人立即为您提供可行的解决方案。

因此，您可以使用 weDocs 插件在 WordPress 中创建和设计知识库。现在轮到您在 WordPress 中设计所需的知识库了。

如果您在任何阶段遇到任何困难，您可以立即联系我们的支持团队寻求帮助和指导。

设计知识库的最佳实践

在结束这篇文章之前，让我们花几分钟来探讨一下在设计知识库页面时必须考虑的最佳实践的几点。请看下面。

结构和组织

结构良好、组织有序的知识库可让用户快速找到所需信息。使用易于理解的类别并按层次排列内容。此外，添加强大的搜索栏可让内容探索更进一步。

内容清晰简洁

内容必须清晰易懂，同时又不失直接。使用简单的语言，避免使用可以用简单单词和短语翻译的不必要的技术术语。处理长篇文章时，请在开头添加摘要或关键要点。

可读性和可访问性

可读性是任何成功知识库的关键因素。将长篇文章分成章节和子章节。分别为章节添加标题和副标题。不要使用太多复杂的句子。尽可能保持简短。

多媒体集成

屏幕截图、GIF 和视频作为多媒体元素可以极大地提高知识库文章的可读性。因此，使用相关且可交互的视觉效果和信息图表可以提高参与度。

反馈和持续改进

您可以通过定期更新最新信息来保持知识库文章的有效性。因此，请确保人们有办法提交反馈，您可以分析这些反馈以了解如何优化知识库帖子。

结论

创建知识库不再是一项艰巨的任务，因为市场上有如此多的解决方案。甚至它们的价格也并不高。因此，无论您是小企业主，您都可以轻松负担得起这样的解决方案并为您的企业创建全面的知识库。

如果你正在寻找免费的解决方案，你可以尝试weDocs 插件。因为它有免费版和付费版。如果你刚刚开始创业，免费版可以提供巨大的支持。一旦你成长壮大，你可以根据需要升级到付费版。

如何使用 Elementor 创建信息图表网页

只需点击几下鼠标即可获得故事和信息，人们越来越依赖统计数据和数字数据而不是抽象的叙述来做出明智的决定。这就是信息图表网页的闪光点。它们不仅吸引访客，还能吸引并留住注意力，使复杂的信息既易于理解又引人入胜。

此外，信息图表网页可以以引人注目且易于阅读的方式呈现复杂的数据。当信息图表伴随着任何案例研究或假设的故事/想法时，它们可以为市场受众创造强大的价值。然而，创建信息图表网页并不难。

使用 Elementor 和 HappyAddons，您可以在 WordPress 上创建任何类型的信息图表网页设计。在本教程文章中，我们将逐步介绍如何使用 Elementor 创建信息图表网页。让我们开始吧！

什么是信息图表网页？

信息图表网页旨在使用图形表示来呈现信息，以说明概念。它结合了各种视觉元素，如图像、图表、统计数字、图标等，并尽量减少文字，以简化综合数据。

信息图表网页优先考虑视觉内容以提高可读性，以便人们一眼就能轻松理解整个概念。这种类型的页面通常用于讲故事、数据可视化和教育目的。毫无疑问，信息图表网页具有更高的留存率和参与率。

为什么以及何时需要信息图表网页

在深入教程部分之前，让我们先快速了解一下为什么以及何时需要在网站上设计信息图表页面。让我们探索一下。

简化复杂信息

视觉元素可帮助用户理解复杂的数据主题，而不会因分解关键见解而不知所措。

让访客在你的网站上停留更长时间

有效的信息图表页面可以降低跳出率并提高转化潜力，从而激励访问者在您的网站上停留更长时间。

增强品牌权威

通过直观地显示结构化数据和有价值的见解，您可以将您的网站建立为值得信赖的信息提供商。

用于营销和促销内容

信息图表页面是展示产品比较和活动亮点的有效方式。您还可以展示客户推荐以吸引客户的注意力。

在社交媒体上分享帖子

信息图表内容很容易在社交媒体平台上分享。此外，近年来，人们更喜欢查看信息图表和统计信息，而不是文字故事。

如何使用 Elementor 创建信息图表网页

如果您已经使用 WordPress 至少几周，那么您可能听说过Elementor。这是一个功能强大的拖放页面构建器插件，您可以使用它来设计网页而无需编码。您所要做的就是选择设计小部件，将它们拖放到页面上并进行自定义。

HappyAddons是 Elementor 插件的一个著名插件。它附带许多额外的设计小部件和功能。如果您觉得 Elementor 不够用，可以尝试使用 HappyAddons。将这两个插件一起使用，您可以在网页设计领域创造奇迹。

点击下面的链接获取插件。

您只能使用 Elementor 和 HappyAddons 的免费版本来创建信息图页面。但高级版本附带一些更令人兴奋的资源。因此，我们将在本教程中使用 HappyAddons 的高级版本。

一旦插件在您的网站上安装并激活，请开始按照下面的教程进行操作。

步骤 01：使用 Elementor 打开帖子或页面

使用 Elementor 打开帖子或页面。左侧是Elementor 面板，您可以在其中找到所有设计小部件和功能。右侧是Elementor 画布，您必须在其中拖放小部件来设计信息图表网页。

步骤 02：创建放置小部件的列

在放置任何小部件之前，您必须创建列。为此，请单击(+) 加号图标。然后，选择Flexbox 容器选项。之后，选择设计所需的列结构。

检查如何使用 Elementor 在 WordPress 中添加灯箱。

步骤 03：开始向列添加合适的小部件

根据您的设计偏好，将小部件放置在您创建的列中。让我们看看如何设计此部分。

# 添加图像小部件

在搜索框中输入“图像”。一旦图像小部件出现在下方，请将其拖放到列结构区域的合适部分。

从下图标记的部分上传图像或从媒体库中添加图像到小部件区域。

# 添加标题小部件

找到标题小部件并将其放在右列中。

为信息图表页面写一个标题。因为我将为糖尿病创建此页面，所以我已将其写为页面标题。

进入样式选项卡。您将获得更改对齐方式、字体、文本颜色等的选项。

# 添加文本编辑器小部件

之后，在标题下方添加文本编辑器小部件。它将允许您将纯文本和段落添加到画布。

现在，以同样的方式将所需的文本添加到文本编辑器小部件。然后，增加其字体，更改字体系列，并选择一种颜色，如我们上面所示。

如果您想减少两个小部件之间的间隙，您可以自定义边距设置。

以相同的方式，使用相应的小部件向画布添加其他文本和图像。

通过使用边距选项，您可以将任何小部件移动并放置到另一个位置，例如下图中的地图。希望您能理解。

了解如何在 WordPress 中创建事件日历。

步骤 04：创建新部分以添加统计图表

网站页面由多个部分组成。因此，要创建新部分，您必须向页面添加新的列结构区域。

使用文本编辑器小部件，将副本添加到新的信息图表部分，如下所示。

# 将图表小部件添加到画布

HappyAddons 附带六个图表小部件，它们对于设计信息图表网页非常有帮助。只需浏览图表小部件并选择您喜欢的信息图表网页设计即可。

我们将使用技能栏小部件来显示某些统计数据。

预设带有预先设计的模板。您可以为技能栏小部件选择任何预设，也可以保留默认预设。

在技能部分，您可以通过单击相应的选项卡逐一向所有栏目添加信息。您可以看到我们已重命名它们并为每个栏目设置百分比。

转到“样式”选项卡，保持“技能栏”窗口小部件处于选中状态。您可以更改窗口小部件的文本颜色、字体和其他各种设置。

使用文本编辑器块，您可以向左侧添加更多信息以利用空白。

步骤 05：创建新的列结构以提供更多信息

要添加另一个部分，请再次创建新的列结构。然后，添加图像和文本描述，就像我们在下图中所做的那样。

然后，在右侧的空白处填充适当的信息。我们使用文本编辑器小部件添加了两个文本。在它们之间，我们使用 Flexbox 容器保留了一个部分。

您可以使用此Flexbox 容器创建这些子部分。

现在，将图标小部件添加到容器部分。

图标小部件库中提供了全面的图标集合。您可以逐个更改所有部分的图标。按照我们的做法操作。

要更改图标颜色，请转到“样式”选项卡>“原色”。

要更改其位置，请转到“布局”选项卡 >“边距”。希望您可以自己完成其余操作。

步骤 06：创建信息图表网页设计的最后一部分

与上文类似，使用 Flexbox 容器创建新的部分和列结构。还为该部分添加标题。

# 添加饼图

如上所述，HappyAddons 附带许多有用的图表小部件。我们将在本节中使用饼图。将其拖放到相应的部分。

在小部件的饼图部分，逐个使用所有选项卡指定饼图的信息。

展开“设置”部分。在这里，您可以自定义许多内容。但最突出的是您可以做的是写标题和更改图例的位置。

转到样式选项卡。您可以自定义小部件的字体、字体大小和各种颜色效果。

# 添加条形图

以同样的方式，将条形图小部件添加到画布。

像技能栏和条形图小部件一样，根据需要自定义条形图小部件、设置信息和样式。希望你能自己做。动手做吧。

以下是有关如何在 WordPress 中显示 360 度旋转产品摄影的指南。

步骤 07：设置信息图表网页设计的背景颜色

在整个页面中设置背景颜色可以使信息图表网页设计更加赏心悦目。为此，请单击左上角的三行图标。

您将进入一个新面板。单击“站点设置”选项。

您将再次进入一个新面板。点击“背景”选项。

从颜色选项中选择一种颜色。您将看到该颜色已应用到页面的背景中。

因此，您可以创建和设计您的信息图表网页设计。

步骤 08：预览信息图表网页设计

转到预览页面并检查一切是否正常。您这边一切正常。

關閉！

确实，Elementor 与 HappyAddons 结合使用，可让您创建精美的信息图网页，简化复杂的信息。但是，为了获得最佳效果，必须仔细考虑某些关键点。

避免过多的文字和视觉效果，保持设计简洁。使用与您的品牌标识相符的调色板，并确保移动响应能力，以在所有设备上保持一致的外观。如果可能，添加动画和悬停效果，因为它们可以让您的内容具有交互性。

力求在文本内容和设计元素之间取得和谐的平衡。优先使用图形和图表，因为它们与信息图表页面的目的完美契合。最后，优化您的页面，确保其快速加载而不影响性能。

因此，通过遵循所有这些最佳实践，您可以创建精彩的信息图表网页，以增加价值并带来转化。

如何使用 Elementor 在 WordPress 中添加灯箱

通过将 Lightbox 功能集成到您的 WordPress 网站，您可以改变访问者与您的视觉内容互动的方式。这种优雅的解决方案非常适合展示高质量的图像、创建迷人的画廊和呈现详细的产品信息，而不会破坏用户体验。事实上，它可以将用户体验提升到新的高度。

无论您是想展示作品集的摄影师，还是想展示产品详情的电子商务网站所有者，灯箱功能都是不错的选择。如果您的网站是使用 Elementor 构建的，那么添加灯箱只需一步之遥。

在本文中，我们将提供全面的分步指南，介绍如何使用 Elementor 在 WordPress 中添加 Lightbox。请务必通读至最后，以充分利用这个强大的工具！

灯箱是一种弹出式叠加层。它以更大、更集中的视图显示网站上的图片、视频和其他媒体视觉效果。每当用户点击相关按钮、链接或缩略图时，灯箱功能就会在更大的视图中展示附加的视觉效果，同时使背景变暗。

它有助于突出内容。此功能非常适合画廊、作品集和产品展示，可以从近距离观看。通过整合灯箱功能，您不仅可以让您的视觉内容引人入胜，还可以让您的观众在网站上停留很长时间。

在进入本教程之前，请先从下面讨论的要点中快速了解向网站添加灯箱功能的一些主要好处。

增强用户体验

灯箱向用户展示内容，而不会打断他们的网站浏览会话。访问者可以专注于特色内容，因为它出现在其他网站元素之上。探索改善用户体验的秘诀。

提升视觉吸引力

灯箱使用流畅的动画和现代布局，使网站对用户更具吸引力。这使网站更加专业。

图像和视频导航更轻松

灯箱让用户可以在单个页面上查看多媒体项目，并实现流畅的导航和轻松的切换。如果您对媒体文件感到困扰，请使用 HappyMedia 来管理您的媒体库和文件。

增加参与度和互动

灯箱可以帮助用户更好地查看视觉内容，从而让他们更想探索您的网站。他们不断增加的会话可以向搜索引擎传递积极的信号。

实现更好的内容呈现

灯箱可帮助您更好地展示内容，而不会让您的网页看起来杂乱无章。这非常适合展示图表和活动合集等内容以及产品图片。

我们现在进入教程部分。在本节中，我们将向您展示如何使用 Elementor 在 WordPress 中添加灯箱。要开始本教程，您需要确保在您的网站上安装并激活以下插件。

HappyAddons 是 Elementor 插件的一个突出的插件。它附带 130 多个附加小部件和数十种功能，可帮助进一步美化您的网站。一旦它们在您的网站上准备就绪，请开始按照下面说明的教程进行操作。

使用 Elementor 画布打开帖子或页面。在 Elementor 面板上找到Lightbox 小部件。将其拖放到画布上。

默认情况下，灯箱小部件作为按钮添加到画布中。

该小部件带有两种灯箱类型 –按钮和图像。选择您想要的小部件的灯箱类型。在本教程中，我们将使用按钮类型。

步骤03：选择要显示的内容类型

灯箱小部件允许您显示图像或视频内容。从下面标记的选项中选择您想要显示的内容类型。

如果选择了视频选项，您可以从三个来源添加视频内容 – YouTube、Vimeo和Self-Hosted。

如果选择了 YouTube 或 Vimeo 源，您可以将所需的视频链接添加到下面附带的屏幕截图中显示的相应框中。

您甚至可以为灯箱启用图像类型并为其上传图像。

撰写合适的文案，让按钮真正有意义并引起用户点击它的兴趣。

除了上述方法外，还可以使用其他选项来优化小部件。例如，将其居中对齐或放置在任何看起来美观的位置。

现在，转到“样式”选项卡。在此选项卡中，您可以自定义小部件的填充、边框类型、边框半径、框阴影、字体、颜色和背景颜色。根据需要自行执行这些操作。

只需单击按钮。如果灯箱显示如下附加的视频片段，则没问题。您可以看到我们的灯箱工作正常。

单击Elementor 面板页脚上的响应模式图标。这将在画布上显示一个顶部栏，其中包含在不同屏幕尺寸之间切换的选项。

通过在不同屏幕尺寸之间切换画布来检查小部件是否在所有设备上都显示良好。如果它在特定屏幕尺寸上显示不佳，您可以仅为该屏幕尺寸进行自定义。

因此，您可以使用 Elementor 插件在 WordPress 中创建灯箱。

希望您喜欢本教程。现在，在本节中，我们将介绍在 WordPress 中创建灯箱时必须考虑的要点，以获得最佳效果。

灯箱的用途

确定灯箱中所需的灯箱功能，例如显示图像、视频、表格或图库。规划有助于您实现网站目标并满足访问者需求的内容。

压缩图像

添加大图像会降低您的网速。因此，请确保在将所有图像添加到灯箱之前对其进行压缩。使用 HappyMeida 压缩媒体文件。

添加更改文本

在图片中添加替代文本可以提高灯箱图片的 SEO 得分。此外，在灯箱按钮或链接中添加引人入胜的副本。

退出功能

退出功能对于用户体验至关重要。通过显示可见按钮并让用户关闭灯箱，让用户可以轻松退出灯箱。

测试和故障排除

检查灯箱在各种互联网浏览器、设备和显示尺寸上的表现，以确认其适用于所有平台。未经测试和试验，请勿发布。

结论

灯箱通过在主页顶部的叠加层中显示媒体来增强用户参与度。这样一来，访问者就可以专注于内容而无需离开。虽然 WordPress.org 上有许多可用于创建灯箱的插件，但 Elementor 是最简单、最用户友好的选项之一。如果您是页面构建器的粉丝，Elementor 绝对值得考虑。

如何使用 Elementor 在 WordPress 中创建活动日历

活动日历并不是任何微不足道或普通的网站功能。它是吸引用户并与他们建立牢固联系的强大门户。通过提供即将举行的活动和活动的清晰视图，它允许用户提前计划并利用折扣、优惠和赠品。因此，他们可以预测即将发生的事情并相应地参与。

如果您的网站是使用 WordPress 上的 Elementor 构建的，那么创建活动日历将非常容易。在本文中，我们将介绍如何在 WordPress 中创建活动日历的分步指南，任何人，即使技术知识有限，都可以遵循。

在此之前，我们将介绍一些理论方面的内容作为铺垫。让我们开始吧！

什么是活动日历？

活动日历是一项网络功能，可让您以有组织的方式在网站上显示您企业即将举办的活动、促销活动和活动。您甚至可以在一个地方显示日期、时间和地点等重要详细信息，以便人们轻松查看接下来的活动。

如今，许多企业不仅使用网站来服务客户，还简化部门内部沟通。因此，通过使用活动日历，您可以与团队成员分享有关会议、研讨会、音乐会或任何特殊日子的信息，以便他们提前准备工作计划。

创建事件日历的用例

在深入学习本教程之前，让我们快速了解一下创建活动日历如何真正帮助您的业务。

业务推广：分享网络研讨会、研讨会和产品发布等重要活动，让客户了解最新情况并鼓励他们加入该计划。

社区活动：分享有关筹款、节日和公众集会等活动的最新动态，以激发社会参与并增强社区精神。

教育管理：展示即将到来的考试日期、课外活动和文化活动，以帮助学生并取悦家长。

非营利活动：提高人们对志愿者活动、捐赠活动和社会项目的认识，以便人们热情地支持这些案件。

在线社区：安排现场讨论、游戏锦标赛和虚拟聚会，以激励观众参与其中。

如何使用 Elementor 在 WordPress 中创建活动日历

理论部分已经结束。现在，在本节中，我们将介绍如何使用 Elementor 在 WordPress 中创建事件日历，并介绍分步指南。为此，您需要在您的网站上安装以下插件。

HappyAddons 是 Elementor 插件的一个突出插件。它附带事件日历小部件，可让您轻松创建事件日历并将其添加到您的网站。此小部件可免费使用。您可以使用免费版插件完成本教程。

在您的网站上安装并激活插件后，使用 Elementor 打开帖子/页面。然后，开始按照下面说明的步骤操作。

步骤 01：将事件日历小部件拖放到画布上

在 Elementor 面板上找到事件日历小部件。将其拖放到右侧的画布上。

默认事件日历将立即添加到Elementor Canvas。

步骤 02：选择活动日历的预设

预设是应用于小部件的预定义设计或样式。它允许您快速将特定外观应用于元素。因此，它可以通过提供现成的样式和布局来节省您的时间。

HappyAddons 插件的大多数小部件都提供了很好的预设集合，包括事件日历。您可以在事件日历小部件中看到四个预设。

选择您喜欢的预设，或者您也可以使用默认预设。

步骤 03：选择活动日历的来源

您可以通过三种方式创建此日历：手动、从Google 日历导入以及使用事件日历插件。

手动 –您将在小部件上完成所有操作（指定事件数据和时间表）。

Google 日历 –如果您的日历已在 Google 中内置，您可以在小部件上显示 API 密钥或日历 ID。

活动日历 –这是用于创建活动日历的流行 WordPress 插件。如果您的网站已经使用此插件并且已准备好任何日历，则可以使用小部件显示它。

** 对于本教程，我们将使用手动方法来更好地解释一切。

步骤 04：将新事件添加到日历

单击事件部分下的+ 添加项目按钮。

添加新项目后，添加标题、嘉宾/演讲者和地点。它将显示在Elementor 画布上的日历上。

# 向事件添加图片

您甚至可以将图片添加到日历上的事件中。为此，请单击事件部分下的图片选项。这将允许您从本地驱动器或媒体库上传图片。

您可以看到我们已经向事件添加了图像。接下来，您可以使用下拉菜单更改图像分辨率。可用的分辨率如下：

缩略图
中等的
中大
大的
满的

您可能会担心为什么画布上的日历事件上没有显示图像和其他信息。

不要惊慌。只需单击相应的事件。将打开一个弹出窗口，其中包含您添加到事件的信息和图像。请参阅下面附带的视频片段中的流程。

# 设置活动日期

在项目选项卡的末尾，您将获得添加活动日期的选项。选择开始日期和结束日期。如果这是为期一天的活动，请选择相同的开始和结束日期。

另外，不要忘记指定此事件的开始时间或持续时间。

对于多日活动，请选择活动开始的日期。此外，如果这是全天活动，请启用全天。如果活动是一天中的某个时间，则只有这样您才能定义该时间。

# 风格化活动

对于风格化，请切换到个人风格。

启用该选项后，您将可以自定义事件文本、背景和点的颜色。自行进行必要的更改。

步骤 05：配置事件日历小部件的设置

展开“设置”部分。您可以自定义语言、日历默认视图、一周的第一天以及更多选项。逐一检查。

＃语言

一旦语言改变，您将看到月份名称、类别名称、星期名称等的变化。

# 日历默认视图

该小部件提供四种类型的视图。它们是日视图、周视图、月视图和列表视图。在下面附带的剪辑中查看它们的布局。

# 设置一周的第一天

你可以将任意一天设置为一周的第一天。例如，我们将星期一设置为一周的第一天。

# 时间标题

您可以为时间部分写一个标题。

以同样的方式，探索其他选项并为事件日历小部件配置它们。

步骤 06：启用或探索快乐鼠标光标（可选）

使用该功能，您可以分别为 Web 元素添加不同类型的光标。启用该功能不是强制性的。如果您觉得它可以为您的网站增加价值，您可以启用它。

我们已经在一篇详细的博客文章中介绍了如何在 WordPress 上添加 Happy Mouse Cursor。查看本指南进行探索。

步骤 07：探索全球徽章（可选）

启用“全局徽章”选项将向小部件添加一个功能区。此选项对于活动日历不是必需的。它更适合电子商务和商业产品（包括服务）。您可以探索有关“全局徽章”的此文档。

步骤 08：对事件日历小部件进行样式化

进入样式选项卡。然后，展开日历部分。

您将获得设置日历字体、背景、边框颜色、框阴影、今天的背景、字体大小、填充等的选项。

您可以在下面附图中看到我们已对活动日历进行了风格化。

# 风格化顶部栏

向下滚动一点，您将看到顶部栏部分。使用它，您可以自定义小部件的边距底部、背景颜色、字体、颜色、按钮、边框类型、边框宽度等。

您可以看到我们添加了黄色作为顶部栏的背景颜色。

# 风格化活动

展开事件部分。您可以设置日历上事件的字体大小、颜色、背景和点颜色。

# 风格化事件弹出窗口

正如我们之前所说，当点击日历上的事件日期时，将会出现一个弹出窗口，其中包含有关该事件的详细信息。

通过展开“样式”选项卡下的“事件弹出窗口”部分，您可以自定义弹出窗口的外观，如下图所示。

步骤 09：配置事件日历小部件的高级设置

完成“内容和样式”选项卡后，您可以进入“高级”选项卡。

在此选项卡中，您可以进一步自定义活动日历的布局。此外，您还可以根据需要添加浮动效果、CSS 变换、Happy Tooltip、Happy Features 等。

在本文中逐一讨论这些功能确实很困难。不过，我们已经介绍了有关这些功能的详细博客文章和文档。

我们在下面的列表中添加了这些功能的链接。您可以自己探索它们。之后，如果您遇到任何问题，您可以发表评论或与我们聊天。

步骤 10：使活动日历具有移动响应能力

由于大多数网站的流量有相当大一部分来自移动设备，因此您必须使小部件针对移动和平板设备进行完美优化。

为此，请单击Elementor 面板页脚上的响应模式。您将在顶部栏上看到选项，以检查设计在不同屏幕尺寸上的外观。

通过切换到不同的图标，检查设计在不同屏幕尺寸下的外观。在大多数情况下，您必须根据移动设备屏幕尺寸稍微定制设计。

我们缩小了移动设备的字体大小，因为移动设备的屏幕尺寸通常比其他类型的设备小。现在，我们可以看到当前的设计在移动设备上看起来不错。

步骤 11：预览活动日历

转到预览页面并检查活动日历是否正常工作。单击活动并查看是否出现弹出窗口。在我们这边它运行正常。

因此，您可以使用 Elementor 在 WordPress 中创建和添加事件日历。要了解有关此小部件的更多信息，请访问有关事件日历的此文档。

在 WordPress 中创建活动日历的最佳实践

在 WordPress 网站上创建高效的活动日历可让访客更关注您，并简化活动管理。以下是一些可帮助您充分利用活动日历的最佳实践。

优化活动页面

设计您将添加活动日历的页面，并添加内容，使得所有内容都与活动和日历相关。

提供详细的活动信息

确保每个活动都包含日期、时间、地点和说明。这对于用户参与度至关重要，并让参与者知道会发生什么。如果需要，请包含购票选项。

定期更新你的日历

确保定期更新活动日历，添加新活动和取消活动信息。这不仅可以确保您的读者随时了解最新信息，还可以通过发布新内容净化您的网站并为其带来更多 SEO 价值。

宣传您的活动

通过博客文章和视频教程宣传活动。如果您正在举办活动并且日程安排合理，那么分享一些操作方法帖子或突出活动会很有用。优质内容还可以让您成为该领域的专家。

如何在 Elementor 网站上添加光标悬停效果

印象和用户体验是任何网站设计的两个关键因素。即使是一个小细节也能产生巨大的影响。然而，当今的网页设计忽视了一个强大的功能——光标悬停效果。这个互动元素可以显著提高您网站的美观度。

光标悬停效果不仅增加了一层视觉吸引力，还可以作为引导访问者探索内容的辅助工具。这可以提高用户参与度和满意度。您可以使用 Elementor 和 HappyAddons 在 WordPress 网站上轻松实现这一点。

HappyAddons 是 Elementor 插件的一个强大插件。它允许您在 Elementor 网站上个性化并启用此功能。在本文中，我们将逐步介绍如何在 WordPress 网站上添加光标悬停效果。开始吧！

网站上的光标悬停效果是什么？

光标悬停效果是指用户将鼠标悬停在网页上的光标上时发生的视觉变化。光标会附带一个附加元素，例如圆圈、图标、文本或图像，当光标悬停在网站上时，这些元素会显示在光标指针的正下方。

任何商业网站分析和了解其用户的最重要方法之一就是跟踪他们在网络界面上的活动。但大多数用户除非必须滚动页面，否则不会经常使用光标，这使得网站所有者很难评估潜在客户关注哪些特定产品或信息。

启用光标悬停效果后，用户在浏览您的网站时更有可能将光标悬停在光标上。在本文的以下部分中，我们将解释如何在 Elementor 网站上添加光标悬停效果。

如何在 Elementor 网站上添加光标悬停效果

要添加此功能，您必须使用以下插件。一旦在您的网站上安装并激活它们，您就可以按照以下教程中说明的步骤进行操作。

您可以在整个页面中启用光标悬停效果，也可以为每个页面元素分别配置不同的效果。在接下来的教程中，我们将探索所有这些效果。

教程一：在整个页面启用光标悬停效果

在这种情况下，您配置的光标悬停效果将在整个页面的所有元素上统一显示。探索如何做到这一点。

步骤 01：转到“快乐鼠标光标”选项（无需选择任何 Web 元素）

不要选择任何网络元素，因为您将在整个页面中启用光标悬停效果。

只需导航到Elementor 面板上的“设置”选项卡。展开Happy Mouse Cursor 部分。切换到启用 Happy Mouse Cursor。

启用此功能后，您在网页上移动光标时会看到默认悬停效果，如以下视频所示。光标将显示为普通的圆形图标。

步骤 02：启用延迟移动

启用“延迟移动”功能将允许所选效果跟随您的光标，保持轻微的距离和曲线运动。

只需切换至启用延迟移动选项即可。

步骤 03：启用混合选项

默认情况下，当您将鼠标悬停在默认光标上时，其后面的内容会因被覆盖而变得不可见。启用混合选项将允许您查看光标后面的内容。

因此，请打开“启用混合”选项。然后，从“混合颜色”选项中选择一种颜色。它将动态混合光标颜色，根据您悬停的相应页面进行调整。

这将产生类似放大镜的效果。

步骤 04：更改默认光标悬停效果

您甚至可以更改默认光标悬停效果，而无需依赖混合选项。为此，请先关闭“启用混合”选项。

然后，为背景颜色选项选择一种颜色。这将立即改变默认光标悬停效果的颜色。

步骤 04：自定义光标的大小、边框和半径

您可以自定义光标悬停效果的边框类型、边框宽度、边框颜色和边框半径。

HappyAddons 有一个悬停框小部件，可让您创建交互式网页部分。了解如何使用 HappyAddons 的悬停框小部件。

教程二：为特定 Web 元素启用光标悬停效果

任何网页都是由各种网页元素组成的。您可以为每个元素单独启用光标悬停效果。这意味着将光标悬停在特定网页元素上时只会显示特定效果。让我们来看看如何做到这一点。

步骤 01：选择一个元素并启用快乐鼠标光标

通过单击其容器选择任何元素。然后，导航至Layout > Happy MouseCursor。启用Enable Happy Mouse Cursor选项。

步骤 02：选择光标类型

此功能允许您在五种光标效果之间进行选择。它们是：

文本
颜色
图标
图片，以及
视频。

每种类型都有自己的样式选项。默认情况下，启用此选项时会自动选择文本光标类型。

现在，仅当您将光标悬停在特定 Web 元素上时才会显示光标效果。我们已在下面的视频片段中举例说明了这一点。

现在让我们在以下部分中探索所有游标类型，发现使用可用选项可以做的事情。

# 文本类型

我们希望您已选择“ 文本光标类型”，因为当启用“快乐鼠标光标”选项时，它会默认出现。

更改光标文本：

转到“光标文本”选项并写下您想要在光标上显示的单词。之后，您可以根据需要更改文本颜色和字体。

模糊光标背景：

默认情况下，光标背景会显示深平色。但若要获得更多风格，您可以通过启用“启用模糊”选项来模糊光标背景。

然后，您可以改变模糊的强度和背景颜色的不透明度。

风格化悬停光标：

完成以上部分后，您可以自定义光标的宽度、高度、框阴影、填充、边框类型和边框半径。希望您可以自己完成这些自定义。

# 颜色类型

这是一个非常简单的光标类型。它允许您显示简单的平面颜色而不是光标图标。从光标类型中选择颜色。

现在，转到背景颜色选项。选择要显示为颜色光标类型的颜色。

# 图标类型

以同样的方式，选择图标光标类型。默认图标将显示在圆圈上，如下图所示。

更改图标：

要更改图标，请单击下图中标记的部分。

图标库将打开。选择您喜欢的光标图标。点击“插入”按钮

之后，您可以更改光标悬停效果的图标颜色和图标大小。

其余选项（宽度、高度、模糊、填充、半径、边框类型等）对于所有光标类型都是相同的。因此，我们在此不再重复解释。

# 图片类型

现在，切换到图像光标类型。

单击下面标记的部分。这将允许您从本地驱动器或媒体库上传图像。

您可以看到我们为悬停光标效果添加的图像。此功能附带的附加选项是“对象适合”和“360 度旋转”。

对象适合选项选择填充。如果要使图像稍微倾斜显示，请在360 旋转选项中设置一个值。

之后，根据需要自定义悬停光标类型的宽度、高度、边框类型、边框半径、不透明度和其他选项。

# 视频类型

现在，从下拉列表中切换到光标视频类型。

与图标和图像类型类似，从选择视频选项中添加您想要使用光标悬停效果的视频。

然后，使用如上所示的相应选项调整大小并使其符合目标。您将实时看到画布上的变化。

完成后，转到预览页面，查看光标是否正常工作。希望一切正常。因此，您可以为与内容类型完美匹配的 Web 元素分别启用不同的悬停效果。

但是，如果您遇到任何问题，您可以通过实时聊天框联系我们的支持团队。我们随时准备提供有关 HappyAddons 插件的任何帮助。了解如何使用 Elementor 构建专业网站。

光标悬停效果的用例

光标悬停效果是一个灵活的组件。它可以根据任何 Elementor 网站的要求和品牌进行修改。应用后，它可以确保最佳的用户体验、参与度和网站改进数据。快速了解光标悬停效果如何为您的网站实现这些效果。

引人入胜的页面滚动体验

添加悬停效果有助于保持滚动体验的互动性。通过视觉触发器或动画，您可以为用户提供更愉快的滚动体验。

显示附加信息/导航

您可以通过文本、图片和视频悬停效果显示附加信息。您还可以使用它们提供导航指南，而不会使主视频变得混乱，就像工具提示一样。

增强美感

精心设计的悬停效果可使网站外观和功能更佳。小动画或光标样式可真正使界面变得有趣且令人难忘。

使网页内容更具互动性

悬停效果可以将静态网页元素转变为可交互元素，从而吸引用户更深入地访问页面。这可以带来更多互动和页面浏览量。

提供视觉提示

悬停效果可以直观地通知用户是否单击了某个内容或突出显示信息。这可以改善整体用户体验。因此，您可以更改光标颜色或在按钮周围添加微弱的光芒来指示它正在移动。

追踪用户参与度

通过跟踪用户将鼠标悬停在哪些功能上，您可以了解用户的习惯和偏好。它可以提供可用于制定未来设计和内容决策的信息。

Elementor 网站上的光标悬停效果常见问题解答

希望您喜欢这次讨论。在本节中，我们将回答您在阅读本文时可能会想到的一些问题。Elementor 中有哪些不同类型的光标悬停效果？

是否可以在 Elementor 中为图像添加悬停效果？

我是否应该针对移动设备优化光标悬停效果？如果启用光标悬停效果，它会减慢您的网站速度吗？

结论

希望讨论到这个阶段，没有什么新东西需要说或解释。所有需要说的都已经在上面讲过了。但是，如果您认为我们遗漏了任何要点，请在评论框中指出。

我们将在下次更新帖子时介绍它。但是，如果您对 HappyAddons 感兴趣，您会在我们的存档页面找到大量教程帖子。您还可以找到有关我们每个产品功能和小部件的所有必要文档。

继续探索它们并享受快乐的网页设计。

如何使用 Elementor 在 WordPress 中创建价格表

价格表是一种文件或表格，详细说明了企业提供的产品、服务或套餐的成本。它让客户清楚地了解价格，可能包括不同级别的价格和相应的成本。通过帮助潜在买家决定是否购买，它减少了支持团队对价格的查询，并提升了整体用户体验。

如今，对于任何销售产品或服务的网站来说，一份全面的价目表都是必不可少的。例如，电子商务、餐馆、软件公司、服务型机构等。在本文中，我们将介绍如何使用 Elementor 在 WordPress 中创建价目表的清晰指南。

我们还将描述智能价格表必须具备的关键功能，以便大幅提高转化率。所以，让我们立即开始阅读本文吧。

高转换率价格表的关键特征

价格有几个关键特征可以确保其具有高转化率。否则，无论设计多么美观，都可能无法实现最大转化率。因此，在深入学习本教程之前，让我们快速了解一下高转化率价格表的关键特征。

清晰简洁

一份好的价格表应该易于阅读和理解。使用清晰的标题、合理的布局和简洁的描述来整理价格表。这样客户就能快速找到他们想要的东西。

突出价值

不要只列出价格，而要突出产品或服务的价值。描述客户应该购买您产品的好处。

一致的品牌

确保价目表的设计、字体和颜色与网站的整体品牌完美契合。这可以增强信任和专业性。

透明度

明确说明是否有任何额外费用，如税费或运费。隐藏费用可能会导致放弃购物车并损害信任。

引人注目的视觉元素

添加分隔线、边框和形状等元素，使价格表具有视觉吸引力。但也要确保价格表上没有过多不必要的图形，以免分散用户的注意力。

移动友好设计

如今，许多用户都通过手机浏览网站，因此您的价格表必须具有响应性。确保价格表在移动设备上同样美观且功能无缝。

如何使用 Elementor 在 WordPress 中创建价格表

在 Elementor 中从头创建价格表可能非常耗时。HappyAddons是 Elementor 的一款功能强大的插件。它提供了功能丰富的价格菜单小部件，您可以使用它在 WordPress 网站上轻松创建令人惊叹的价格表。

在本文的这一部分中，我们将解释如何使用此 Elementor 小部件在 WordPress 上创建引人入胜的价格表。但为此，请确保在您的网站上安装了以下插件。

一旦它们在您的网站上安装并激活，请开始按照下面说明的教程进行操作。我们将创建类似下面附加的图像的内容。

开始吧！

步骤 01：创建带有列的布局

使用合适的列结构，为定价表创建布局。单击画布上的加号 (+) 图标。选择您喜欢的列结构。然后，自定义其宽度。

步骤 02：将价格菜单小部件拖放到 Elementor 画布上

找到“价格菜单”小部件。将其拖放到刚刚创建的列结构中。

将出现一个包含两项商品的默认价格表。

步骤 03：选择价格表样式

展开“内容”选项卡下的“预设”部分。您将在那里看到十种现成的价格表样式。单击您喜欢的样式。您将看到画布上的默认价格表的设计已更改。

因此，探索所有的风格并坚持你最终认为完美的风格。

在本教程中，我们将选择设计 4。

步骤 04：将更多项目添加到价目表

要将更多项目添加到价格表，请展开“价格菜单”部分。然后点击“+ 添加项目”按钮。

# 添加产品信息

这将在价格菜单部分下添加一个新选项卡。在其中填写产品名称、描述、价格和必要信息。您将实时看到添加到画布中的新信息。

Elementor 现在由 AI 驱动。因此，您可以使用其 AI 功能来策划精彩的产品标题、描述等，以吸引用户。以下是有关如何使用 Elementor AI 的指南。

# 添加产品价格

向下滚动标签，您将看到添加产品价格的选项。填写两个字段（旧价格和当前价格），或者您可以保留旧价格字段不变。但填写旧价格字段可以增加营销价值。

# 添加产品图片（可选）

价格菜单小部件允许您为每个项目添加图片。通过点击此图片选项，您可以上传并添加合适的图片，以图形方式在列表中展示您的产品/项目。

您可以看到我们使用该选项在价格菜单小部件的项目旁边添加了一个图像。

现在，展开其他选项卡并为其产品添加合适的图片。您可以看到我们已将图片添加到其他选项卡。

以同样的方式，您可以将任意数量的商品添加到价格表中。

步骤 05：配置价格菜单小部件的设置

展开“设置”部分。您将获得自定义标题 HTML 标签、图像分辨率、图像位置、内容对齐、标题价格分隔符和商品计数器的选项。

查看价格表上您可以使用这些选项做的事情。

标题 HTML 标签 –为产品标题设置标题类型（h1、h2、h3、h4、h5 或 h6）。
图像分辨率——以缩略图、中图、大图或其他形式显示产品图像。
图像位置 –在右侧、左侧或顶部显示图像。
价格位置——您可以将产品价格放在标题旁边或底部。
内容对齐——将文本内容排列在左侧、右侧或中央。
标题价格分隔符——在产品标题和价格之间添加分隔符形状。
物品计数器——显示列表中每件物品的数字列表值。

由于为每个选项添加屏幕截图会使教程太长，因此下面的一个简短的视频片段解释了所有内容。

步骤 06：探索内容选项卡下的其他部分

内容选项卡中还有更多选项。但我们认为没有必要进一步探索它们，因为它们大多数都非常简单，您可以自行理解。

其中，Happy Mouse Cursor 比较特别。它允许您在将鼠标悬停在特定 Web 元素上时显示自定义光标。我们已经在一篇关于此功能的详细博客文章中介绍了它。

这是有关如何在 Elementor 中添加光标悬停效果的详细指南。

步骤 07：对价格菜单小部件进行样式化

进入样式选项卡。选项卡下有多个选项，可自定义项目、标题、定价、图片和说明之间的间距。查看如何操作。

# 自定义项目间距

展开菜单框部分。前两个选项是项目间距。它指的是列表中项目之间的距离。

默认情况下，其值为 20。为了更好地设计列表，我们将其减少到 10。

下一个选项是Padding。它允许您调整小部件内所有侧面（顶部、右侧、底部和左侧）元素之间的间距。如果没有必要，您可以保留 padding 选项。

# 添加背景颜色

您可以通过两种方式为价格表部分添加背景颜色 –部分背景和小部件背景。您必须了解这两种方式，这样才能巧妙地美化该部分。

要为部分背景添加颜色，请点击六个点图标选择整个部分。然后，展开“样式”选项卡下的背景部分。

点击“背景类型”以启用颜色选项。最后，为该部分选择您喜欢的颜色。

要添加小部件背景颜色，请单击小部件上的铅笔图标来选择该小部件。

接下来，转到“样式”选项卡。点击菜单框下背景类型旁边的画笔图标。最后，为价格表选择您喜欢的颜色。

# 风格化价格表的标题

展开标题部分。您将获得自定义标题字体、颜色、悬停颜色、边距、边框类型、间距、框阴影和分隔符的选项。

如果我们解释每一个自定义选项，这篇博文会很长。因此，在这个简短的视频片段中，我们解释了如何对价格表的标题进行样式化。

# 定价风格化

展开价格部分将允许您自定义小部件定价（旧价格和当前价格）的颜色和字体。

# 风格化图像

以同样的方式展开图像部分。您可以自定义宽度、高度、空间、框阴影、边框类型、边框、边框颜色和边框半径。

# 风格化描述

最后，您需要对价目表上的商品描述进行样式化。为此，请展开“描述”部分。自定义字体和颜色。

默认情况下，描述为灰白色。但现在您可以在下图中看到我们已将其设为黑色。

因此，您可以敏锐地设计整个价格菜单小部件，即您的价格表。

步骤 08：使价格表适应移动设备

由于任何网站的访问者中都有相当大比例来自移动设备，因此您应该完美优化手机和平板电脑屏幕尺寸的价格表，这样您就不会错过任何潜在的流量和潜在客户。

单击Elementor 面板底部的响应模式选项。您会在 Elementor 画布顶部看到不同的尺寸选项。

通过点击这些选项，您可以切换到不同的屏幕尺寸来检查价格表在其上的显示方式。

如果您想针对特定设备屏幕自定义价格表，请先选择所需的屏幕尺寸。然后进行必要的自定义。您的修改将专门针对该屏幕保存。

注意：不要删除任何元素。因为如果您删除一个元素，它将从所有屏幕中删除，而不仅仅是从特定设备中删除。

步骤 09：缩小价格表布局的宽度（可选）

默认情况下，任何 Elementor 小部件都会在整个画布上显示，包括价格菜单小部件。但为了获得更好的呈现效果，您可能需要缩小其宽度。

为此，请转到“高级”选项卡。在“布局”部分下，转到“边距”选项。在右侧和左侧框中设置值。您将立即看到更改。

因此，对其他屏幕尺寸也执行相同的操作，如上一步所示。

步骤 10：在前端预览价目表

转到预览页面。通过更改浏览器的宽度来检查价格表是否适合所有屏幕尺寸。您可以在下面附带的视频片段中看到它看起来不错。

所有设置和自定义完成后，您就可以发布价格表。

结论

因此，使用 Elementor 在 WordPress 中创建价格表是一种非常简单且用户友好的方式，可以以干净、有条理的格式显示您的产品和优惠。然而，在结束之前，我们想澄清许多用户仍然感到困惑的一件事——价格表和定价表之间的区别。

虽然定价表旨在展示或比较不同的定价套餐，但价格表侧重于展示各个项目及其各自的定价。您可以浏览以下教程，以了解有关使用 Elementor 创建表格的更多信息。

图片型PDF转html的步骤

1、使用WPS或百度会员将PDF文件OCR成docx文件。

2、使用google doc打开保存在drive中的docx文件，另存为html压缩文件。

3、打开该html文件，为方便处理，可以改为txt后缀，使用程序去除head部分及body部分的空格，再保存为html文件。注意有时文字乱码就需要将txt另存为utf8格式。

4、在浏览器中打开该html文件，同时wordpress打开编辑新文件，复制粘贴，再做少量修改即成。

5、在本网xycost.com每个页面打开后点阅读模式可以得到纯净版的html。去除了无必要的很多标签，体积可以降为原PDF的10%以下且为文字版。

去除空格的代码：

   private void button31_Click(object sender, EventArgs e)
    {
        OpenFileDialog openFileDialog = new OpenFileDialog
        {
            Filter = "Text and HTML Files|*.txt;*.html",
            Title = "请选择一个文本或HTML文件"
        };

        if (openFileDialog.ShowDialog() == DialogResult.OK)
        {
            string filePath = openFileDialog.FileName;
            string fileContent;

            try
            {
                // 读取文件内容
                fileContent = File.ReadAllText(filePath);
                string contentWithoutHead = RemoveHeadSection(fileContent); // 去除 <head> 部分
                string contentWithoutSpan = RemoveSpanTags(RemoveOtags(contentWithoutHead)); // 去除所有 <span> 标签
                string contentCleaned = RemoveEmptyHtmlTags(contentWithoutSpan); // 移除空白 <span> 标签及多余空白字符

                // 处理文件内容：去除汉字之间的空格
                string processedContent = RemoveSpacesBetweenChineseCharacters(contentWithoutSpan);

                SaveFileDialog saveFileDialog = new SaveFileDialog
                {
                    Filter = "Text Files|*.txt|HTML Files|*.html",
                    Title = "保存处理后的文件",
                    FileName = Path.GetFileNameWithoutExtension(filePath) + "_processed" + Path.GetExtension(filePath)
                };

                if (saveFileDialog.ShowDialog() == DialogResult.OK)
                {
                    // 保存处理后的内容
                    File.WriteAllText(saveFileDialog.FileName, processedContent);
                    MessageBox.Show("文件已成功保存！", "保存成功", MessageBoxButtons.OK, MessageBoxIcon.Information);
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show($"发生错误：{ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }
    }
    static string RemoveSpacesBetweenChineseCharacters(string input)
    {
        // 匹配汉字之间的空格
        string pattern = @"(?<=[\u4e00-\u9fa5])\s+(?=[\u4e00-\u9fa5])";
        return Regex.Replace(input, pattern, "");
    }
    // 去除 <span> 标签，但保留内容，包括带属性的复杂 <span> 标签
    static string RemoveSpanTags(string input)
    {
        string pattern = @"<span[^>]*>(.*?)<\/span>";
        return Regex.Replace(input, pattern, "$1", RegexOptions.Singleline | RegexOptions.IgnoreCase);
    }
    // 去除其他类似空白字符的情况
    static string RemoveEmptyHtmlTags(string input)
    {
        // 匹配 <span> 标签
        // 保留包含 &nbsp; 的 <span> 标签
        // 移除其他 <span> 标签，仅保留内容
        string spanPattern = @"<span[^>]*>(.*?)<\/span>";

        return Regex.Replace(input, spanPattern, match =>
        {
            string content = match.Groups[1].Value; // 获取标签内容
            return content.Contains("&nbsp;") ? match.Value : content; // 如果包含 &nbsp;，保留标签；否则仅保留内容
        }, RegexOptions.Singleline | RegexOptions.IgnoreCase);
    }
    static string RemoveOtags(string input)
    {
        // 匹配 <o:p> 标签并移除
        string oTagPattern = @"<o:p[^>]*>.*?<\/o:p>";
        return Regex.Replace(input, oTagPattern, "", RegexOptions.Singleline | RegexOptions.IgnoreCase);
    }
    // 去除 <head> 标签及其内容
    static string RemoveHeadSection(string input)
    {
        string pattern = @"<head[\s\S]*?>[\s\S]*?</head>";
        return Regex.Replace(input, pattern, "", RegexOptions.Singleline | RegexOptions.IgnoreCase);
    }

如何使用 HappyAddons 在 Elementor 免费创建博客文章模板

在您的网站上开设博客部分不仅是为了分享内容，也是为了建立信任并与受众分享您的指南和信息。优质的博客文章不仅会为您带来流量，还会让您的网站在特定领域中拥有巨大的权威性。

但请记住一件事——好的内容需要好的设计。否则，你将无法吸引用户的眼球，并让他们继续阅读你的内容，直到他们需要它为止。这就是为什么你必须创建一个视觉上有吸引力的博客文章模板，以确保一致性和可读性。

Elementor 是一款无需代码的网站设计工具。在本文中，我们将介绍一个分步指南，其中包含必要的屏幕截图，向您展示如何在 Elementor 中免费创建博客文章模板。所以，让我们立即开始这篇文章。

博客页面和博客文章之间的区别

博客页面是一个静态页面，包含已发布的所有博客文章。文章按时间顺序发布在博客页面上，无论是按字母顺序还是按日期。博客页面通常会在顶部显示最新文章，并附有摘录。它不包括作者框、社交分享按钮和评论区。

博客文章是一篇涵盖特定主题详细分析的独立文章。它还包括其他几个元素，如目录、作者详细信息、社交分享按钮、号召性用语、评论区、标签、相关文章、常见问题解答、订阅表格等。

如何在 Elementor Free 中创建博客文章模板

要使用 Elementor 创建自定义博客文章模板，您必须有权访问其主题构建器。但该功能不是免费的。您必须升级到高级版本才能访问该功能。但是，您仍然可以通过安装另一个名为HappyAddons的插件免费使用此功能。

HappyAddons 实际上是 Elementor 插件。它附带数十个附加功能和小部件来增强您的 Elementor 网站。HappyAddons 还提供免费版和高级版。免费版包含一个主题构建器，您可以通过它创建自定义博客文章模板。

使用下面的链接在您的网站上下载并安装插件。

一旦在您的网站上激活，请执行以下步骤。

步骤 01：从 HappyAddons 主题生成器打开单个模板

导航至HappyAddons > 主题生成器。选择单个选项卡。单击添加新按钮。

将会打开一个弹出窗口。为模板命名。按“创建模板”按钮。

步骤 02：通过拖放添加元素

网站上的元素通常根据网页设计和内容风格而有所不同。但任何博客文章都有一些必备元素，无论其类型如何。它们是标题、特色图片、内容正文、作者姓名、发布日期、作者框、社交分享按钮、评论框等。

我们建议您创建一个线框。它将帮助您了解在博客文章模板中包含哪些元素。现在我们将逐一将它们添加到文章中。

#添加帖子特色图片

点击加号 (+)图标创建内容区域。选择与线框匹配的列数。

我们为本教程选择了三列。

您可以自定义列的大小和宽度。我们已将中间列变大，将其他两列变窄。

在搜索框中输入帖子特色图片。将其拖放到内容区域。

您可以从 Elementor 面板的内容和样式选项卡自定义特色图像。您可以修改其大小、对齐方式、边距、填充、边框类型等。

注意：您只会看到一个没有任何内容的图像部分。不用担心！您只是在创建一个布局。发布模板后，布局将应用于所有博客文章。您将在已发布的博客文章的前端看到更改。

# 添加帖子标题

将帖子标题小部件拖放到特色图片下方。但如果您愿意，也可以将标题放在特色图片部分上方。

接下来，从 Elementor 面板自定义和设置帖子标题。确保将博客文章标题设置为H1 。

#添加帖子信息

帖子信息小部件将允许您显示作者姓名、帖子发布时间、日期、评论和更多选项。

在 Elementor 搜索框中输入小部件名称。一旦它出现在下方，将其拖放到标题部分下方。

您可以通过点击“添加项目”按钮向该部分添加更多选项。然后转到“样式”选项卡来设置内容的样式。

注意：仅当您的博客文章收到任何评论时，评论元素才会出现。

#添加帖子内容

帖子内容小部件涵盖了主要内容主体。它允许您在帖子中包含文本、图片、GIF 和视频。

将小部件拖放到合适的位置并以相同方式进行自定义。

# 添加联系表单

HappyAddons 集成了最流行的联系表单。只需在搜索框中输入“表单”一词，所有流行的表单小部件就会出现在下方。

希望您能在列表中找到联系表单插件的小部件。将其拖放到画布上。

注意：例如，如果您在后端使用 weForms，请将相同的小部件拖放到画布上。

MailChimp 被认为是增加订阅者列表的绝佳平台。这也是一个受欢迎的电子邮件营销服务提供商。好消息是HappyAddons 有一个 MailChimp 小部件。如果您想增加订阅者列表，也可以使用此小部件代替联系表单插件。

查看本指南，了解如何使用 HappyAddons 将 MailChimp 表单嵌入您的网站。

# 添加社交分享图标

社交分享小工具将使用户能够将博客文章分享到他们的社交个人资料中。这是提高读者和访客参与度的好方法。

在 Elementor 搜索框中输入 Social Share。将其拖放到订阅表单下方。

按下任意社交标签。您将获得粘贴社交链接和自定义社交链接的选项。

对其他标签逐一执行相同操作。单击“添加项目”以在页面上添加更多社交分享图标。

# 添加作者框

如今，人们喜欢在阅读帖子时了解作者。Author Meta 小部件可让您在帖子模板上创建作者部分。

您可以展示作者的姓名、头像、个人简介和文章。在社交分享图标下方添加小部件。

展开内容选项卡上的作者元部分。您可以决定显示作者的姓名、标签、头像等。

您还可以更改图像位置、头像大小以及设置其他风格。

# 添加帖子评论框

评论部分允许访问者提交他们对博客文章的意见。将“帖子评论”小部件拖放到帖子模板的末尾。

您可以在全部帖子或部分帖子上显示评论部分。转到来源选项并单击旁边的下拉图标。

下拉列表包含两个选项：当前帖子和自定义。选择自定义选项将允许您在选定的帖子上显示此评论框。

HappyAddons 的帖子评论是一个独特的小部件。因为它允许您设置帖子评论的布局。

但是 Elementor 中没有此样式化选项。因此，使用 HappyAddons，您可以享受更大的自定义灵活性。

# 显示相关文章

相关帖子部分建议与当前博客文章相关的其他内容和文章。它们通常根据标签、关键字和类别进行选择。您可以使用 Post Carousal 小部件来创建此部分。但为此，您需要访问 HappyAddons的 Premium。

安装高级插件后，Post Carousel 小部件将被解锁。将其拖放到 Elementor 画布上。然后，从内容和样式选项卡中对其进行自定义。

转到内容 > 查询。指定作者、术语或标签。因此，相关帖子将显示在每个博客文章上。

步骤 03：使模板适应移动设备

当今超过 50% 的网络流量来自移动设备。因此，在将必要元素添加到画布后，您必须检查它们是否在其他设备上完美对齐。

单击Elementor 面板底部的响应模式图标。您将看到不同的设备模式出现在顶部。在它们之间切换，您可以检查小部件是否完美对齐。

步骤 04：发布帖子模板

按下“发布/更新”按钮或箭头符号。单击“保存草稿”将此设计保存为草稿。

如果您想稍后将此设计用作现成的模板，请单击“另存为模板” 。单击“模板条件”以发布设计。

下图中显示的是使用 HappyAddons 免费版可以设置的默认条件。您需要高级访问权限才能设置自定义条件。

单击保存并关闭按钮。

步骤 04：预览单个博客文章模板

现在，转到任何已发布博客文章的预览模式。您将看到模板已应用于它们。如果您不喜欢布局，请再次使用 Elementor 打开模板并根据您的喜好进行自定义。

有关如何在 Elementor 中创建博客文章模板的常见问题解答

希望您喜欢本教程部分。除此之外，您还必须了解更多主题，以增加您对博客文章设计的了解。我们将在常见问题解答部分介绍这些主题。自定义帖子类型和博客帖子有什么区别？

博客文章是一种传统的帖子或文章，涵盖有关任何特定产品、功能、主题或信息的详细描述。它不会动态展示主体内容。

自定义帖子类型允许您修改内容结构，包括自定义字段、分类法和功能。它使用户可以灵活地动态筛选出他们想要的内容。博客文章和博客页面之间的主要区别是什么？博客文章的主要部分是什么？如何提高博客文章的可读性？是否可以在 Elementor 中管理多个单个帖子模板？我可以使用 Elementor 来风格化/自定义帖子评论部分吗？

最后的要点！

如果您在任何流行的 WordPress 中使用默认博客文章布局，您就会发现成百上千的其他网站所有者也使用相同的布局。这种复制布局可能会给您的网站读者和访问者带来无聊的用户体验。

在这种情况下，创建自定义博客文章模板可能是一个突破性的解决方案。这可以使您的博客部分比其他部分更专业、更独特。使用 HappyAddons 主题生成器，您可以为您的网站创建几乎专业的单个帖子模板。

希望您喜欢这篇文章。现在轮到您尝试该插件了。如需更多指导，请浏览有关本教程中介绍的所有小部件的文档。

如何在 WordPress 上通过 HappyAddons 使用 Elementor 循环网格小部件

设计具有视觉吸引力且功能完善的网站对于任何人来说都是必须的，这样才能吸引观众、吸引注意力并推动销售。为了简化此过程，Elementor 及其插件等网页设计工具不断推出创新功能和模块。

Loop Grid 是 Elementor 及其插件最近为我们开发并发布的一款全新小部件。这款创新的小部件可让您以精美的网格布局创建和显示内容。

如果您不太了解这个小部件的详细信息，请不要担心。在本教程文章中，我们将逐步介绍如何使用 HappyAddons 在 WordPress 上使用 Elementor Loop Grid 小部件。希望您觉得本教程既有用又有趣。

Elementor 中的循环网格是什么？

Loop Grid 是一个多功能 Elementor 小部件，可让您创建动态布局以在您的网站上显示不同类型的内容并随时对其进行自定义。此小部件在以网格格式显示博客文章、产品和产品组合内容时特别有用。

此小部件对于显示动态内容非常有用。一旦发布新帖子、产品或所需内容，它们就会自动通过小部件显示，无需手动输入。您可以创建独特的模板来按您的意愿显示内容。

在下一节中，我们将解释如何在 WordPress 上使用该小部件。继续阅读！

如何使用 Elementor 循环网格小部件

您必须安装以下插件才能在您的网站上使用此小部件。点击下面附加的链接获取它们。

准备好后，开始按照教程中描述的步骤进行操作。

步骤 01：将循环网格小部件拖放到您的页面

打开您想要添加小部件的页面。然后，决定要添加小部件的部分。

在 Elementor 面板搜索框中输入Happy Loop Grid 。小部件出现后，将其拖放到画布上的所需区域。

步骤 02：创建循环网格模板

添加小部件后，系统会要求您选择一个循环模板。如果您已经有现成的模板，则可以选择它。否则，您必须从头创建一个。

因此，要从头开始创建，请单击“创建模板”按钮。

您将进入一个新页面。选择“循环模板”选项卡后，单击“添加新”按钮。

为模板命名。例如，我们将其命名为“循环模板一”。然后点击“创建模板”按钮。

将会打开一个新的画布。在这里，您可以再次拖放想要设计 Loop Grid 模板布局的小部件。

查看本指南，了解如何在 Elementor 网站上创建弹出窗口。

步骤 03：设计循环网格模板的布局

假设我们将创建这个循环网格来动态展示我们的博客文章。因此，我们将使用帖子小部件来创建模板。

# 发布特色图片

在帖子网格部分中显示帖子功能图像是必须的。为此，找到小部件并将其放在画布上。

# 帖子信息

通过添加帖子信息小部件，您可以显示帖子的作者、发布日期和发布时间。最好在特色图片下添加小部件。

如果要删除小部件的任何元素，只需单击旁边的叉号 (x) 图标。同样，要添加新元素，请单击+ 添加项目按钮。

进入样式选项卡。您将在此选项卡中获得选项来更改小部件的文本和图标的颜色、粗细和对齐方式。

# 帖子标题

将帖子标题小部件拖放到帖子信息小部件下方。

在“内容”选项卡下，您将获得自定义 HTML 标签、大小和对齐方式的选项。根据需要进行必要的更改。

进入样式选项卡。您可以根据需要设置标题颜色和字体样式。

# 文章摘录

通过在模板中添加“帖子摘录”小部件，您可以在循环网格部分中显示各个帖子的摘要或摘录。在标题下找到并添加“帖子摘录”小部件。

以同样的方式，如上所示，您可以从“样式”选项卡自定义文本颜色和字体。

步骤 04：优化移动设备的模板布局

您必须针对所有设备类型（平板电脑和手机）以及台式机优化模板布局。否则，其他设备的用户在通过移动设备和平板电脑浏览此小部件时将无法获得良好的体验。

因此，为了优化模板布局，请单击Elementor 面板页脚上的“响应模式”选项。模板上会出现一个顶部栏，其中包括在不同设备模式（台式机、平板电脑和手机）之间切换的选项。

现在，切换到不同的设备模式，看看模板布局是否适合不同的特定设备。如果不完美，请根据需要调整大小并自定义模板元素。

希望通过这样做，您可以使模板适应所有屏幕尺寸。

这是有关在创建适合移动设备的网站时需要考虑的事项的指南。

# 发布模板

完成后，单击 Elementor 面板上的发布按钮发布模板。

步骤 04：进入主画布并选择循环模板

进入 Elementor 主画布。选择循环网格部分。在布局部分下，您将找到选择循环模板的选项。

输入保存模板的名称。输入后，模板将实时显示。单击模板即可将其显示在画布上。

一旦选择了循环网格模板，它将以网格格式显示您已发布的帖子，如下图所示。

由于网格采用默认设置，因此看上去可能有些别扭。现在您可以进一步自定义其布局。

步骤 05：自定义并设置循环网格部分

在布局部分，您可以选择列数、每页帖子数和等高。根据需要进行必要的配置。

在本教程中，我们每页保留三列和三篇文章。

# 配置查询

之后，进入查询部分。

您可以在 Loop Grid 小部件中显示来自各种来源的内容。默认情况下，帖子以网格格式显示。但您可以根据需要显示页面或登录页面。

点击帖子类型选项旁边的下拉图标。选择您想要的内容类型。

您必须使用标签或类别保存每篇文章。如果您只想显示特定作者、标签或类别的内容，请点击包含者下方的+ 加号图标。

选择“作者”或“条款”。您也可以同时选择两者。

选择“包含方式”选项后，在相应字段中输入作者姓名和术语。内容将立即被过滤，并且只有此特定作者和术语的内容才会显示在循环网格中。

根据需要配置其他查询选项。希望您能自己完成。

步骤 06：配置循环网格部分的分页选项

展开分页和加载更多部分。

点击“分页”旁边的下拉图标。选择所需的选项。

我们选择了数字 + 上一个/下一个。您可以在图片中看到此分页选项已显示在小部件下方。

步骤 07：设置循环网格小部件的布局

转到“样式”选项卡。您将找到自定义和样式化小部件的布局、项目框和分页的选项。

首先，我们来展开布局部分。它将允许您配置列间距和行间距。根据需要执行此操作。

同样，展开Item Box 部分。您可以添加Padding、Background Type（颜色或图像）、Box Shadow、Border Types和Border Radius。

在本教程中，我们添加了填充、半径和背景颜色。您可以自己做同样的事情。

以同样的方式，您可以设置小部件的颜色、字体、填充、半径、空间和分页选项的风格。

注意：看起来有点眼花缭乱，对吧？在设计的这个阶段，您可能会发现循环网格模板需要进一步风格化和自定义。但该怎么做呢？下一步会展示。

步骤 08：重新自定义循环网格模板

首先，您必须找到模板。由于您已使用 HappyAddons 进行设计，因此请转到WordPress 仪表板。然后，导航至HappyAddons > 主题生成器 > 循环模板。

找到模板并使用选项“使用 Elementor 编辑”打开它。

例如，我们改变了“继续阅读>>”文本的字体。

完成后，更新更改。

步骤 09：预览更改

再次回到主画布。选择下拉图标。然后点击保存草稿选项。

保存草稿后，重新加载画布。您将在页面上看到与模板上所做的更改一样的更改。

因此，您可以随时自定义 Loop Grid 模板。

步骤 10：发布循环网格设计

希望您的 Loop Grid 部分已准备好发布。单击Elementor 面板底部的“发布”按钮。

注意： 请确保您已完美优化小部件以实现移动响应，正如我们上面在优化 Loop Grid 模板时向您展示的那样。此处的流程也相同。

Elementor 循环网格小部件的常见用例

到目前为止，我们已经描述了 Loop Grid 小部件是什么以及如何在 Elementor 网站上使用它。现在让我们快速看一下该小部件的一些关键用例，它可以在这些用例中给人留下深刻的印象。

1. 博客布局

Elementor Loop Grid 使博客布局变得简单，因为它允许您以动态且美观的网格呈现帖子。您可以自定义内容（帖子或页面）的显示方式，包括帖子标题、摘录、图像、元数据等，以确保外观统一。

了解如何使用 Elementor 设计博客文章模板。

2. 产品网格

Loop Grid 在电子商务网站上非常有用，可以在整洁的网格上显示产品。它允许您显示产品图片、价格和描述，以便客户在浏览您网站上的产品时享受良好的体验。

3. 作品集展示

Loop Grid 小部件可让您以引人注目的布局排列您的绘图、文章、案例研究和作品集。您甚至可以更改网格以匹配您的品牌，这样您的作品集就可以为您的客户和员工突出显示。

了解如何创建作品集网站。

4. 活动列表

您可以使用 Loop Grid 以图形形式组织活动。它允许您以直观的方式列出活动信息，例如日期、地点和说明，以便人们可以快速了解即将发生的事情。

5. 服务列表

您还可以使用带有样式选项的网格格式提供服务。您可以显示服务标题、描述和照片等关键元素，以便客户一眼就能轻松看到您提供的服务。

结束

我们希望您现在了解 Elementor Loop Grid 小部件的来龙去脉。一旦您知道如何很好地使用该小部件，您就可以为您的网站创造无限的设计可能性。凭借其直观的功能和用户友好性，您可以在您的网站上给吸引访客留下专业印象。

我们已尽力在这篇文章中涵盖您可能正在寻找的所有内容。如果您发现我们遗漏了任何内容，请通过下面的评论框告诉我们。如果您想了解有关我们产品的更多信息，您也可以在支持框中留言。

最后，感谢您抽出时间并陪伴我们到最后。祝您阅读愉快！

现代网页设计的最佳网站配色方案

在设计网站时，颜色可以说是最重要的因素之一。它可以提高视觉参与度、简化导航并帮助用户识别不同部分。此外，触发调色板可以使网页元素与访问者对话。

每种颜色都有独特的功能，以不同的方式影响人类心理。这就是为什么一旦你计划创建一个网站，你就不能随意选择配色方案。没有选择正确的颜色会严重损害你的品牌形象和网站对访客的吸引力。

为了降低风险，本文将向您介绍现代网页设计师经常使用的一些最佳网站配色方案。它将帮助您的网站在竞争激烈的在线空间中脱颖而出。那么，让我们开始讨论吧。

配色方案是怎样的？

配色方案是两种或多种颜色的组合，用于为任何特定对象（例如网站）创造美感。当这些颜色放在一起看时，它们会产生一种和谐的感觉，增强网站不同部分的整体视觉美感。

由于人们的品味各不相同，因此提供足够多的颜色种类很重要，这样每个人都至少能找到自己喜欢的颜色。颜色可以传达特定的情绪或氛围。创建配色方案的方法有很多。您可以将特定的颜色搭配在一起，选择一些中性色，或使用单一颜色的不同色调。

下载我们的免费电子书：掌握网站色彩的艺术

解锁令人惊叹的网站设计的秘密！

了解专家提示、色彩心理学和经过验证的配色方案，以提升您的网页设计技能。立即访问此综合指南，并改变您在现代网页设计中处理色彩的方式！

请提供您的有效电子邮件地址，电子书将发送到该电子邮件地址！谢谢。立即下载 – 内含免费电子书！

为什么配色方案在现代网页设计中如此重要

精心挑选的配色方案不仅能打造出色的网站，还能帮助营造具有凝聚力和吸引力的环境。以下是配色方案在现代网页设计中如此重要的一些关键点。

树立独特基调

醒目的配色方案有助于通过设定独特的基调使网站从竞争对手中脱颖而出。例如，健康相关网站上的绿色或蓝色配色方案可以表明您的主题的严肃性。

帮助导航

配色方案可以改善网站的导航系统。例如，如果您的导航栏/菜单采用皇家蓝、绿色或橙色，用户就更有可能快速找到它。

传达品牌信息

配色方案可以向用户传达您网站的品牌信息。例如，如果您计划为一家时装公司设计网站，您可以选择反映该品牌审美的颜色。

创造色彩对比

互补色方案可能包含两种或两种以上的颜色。它可以在网站上的不同元素之间形成鲜明对比，使它们更加醒目。

提高可读性

良好的配色方案会营造出温暖舒适的感觉。它为我们的视觉营造出舒缓的环境，最终提高可读性得分。

颜色对不同的受众意味着什么？

在艺术和文化中，颜色象征着特定的含义并唤起情感。如果不了解它们，就无法描绘出有意义的设计。网页设计中使用不同类型的颜色。让我们看看它们的含义。

不同类型的网站的最佳配色方案是什么

哪种配色方案最适合网站取决于几个因素，例如网站的目的、目标受众、活动等。让我们来探索一下现代网页设计师在项目中使用的一些最佳网站配色方案。这将启发我们以后为我们的网站选择正确的配色方案。

1. 网上商店的最佳配色方案

网上商店有很多种类型。最受欢迎的是时装店、餐厅和杂货店。以下是每种类型的一些标准配色方案。

# 时装店

由于粉色和紫色象征着爱情、甜蜜、奢华和浪漫，高端时尚商店在其网站上使用这些颜色。您可以将粉色和紫色应用于横幅设计、类别名称、徽标、CTA 按钮和背景。

其他一些网站还添加了蓝色爱琴海 (1E456E)和绿色罗勒 (32612D)来描绘一种平静的感觉。

# 餐厅网站

您会发现周围有各种各样的餐厅。根据主菜，他们喜欢在网站上应用配色方案。例如，如果一家餐厅提供辛辣的快餐和欧陆式食品，他们倾向于使用红色和橙色的混合色调。因为这会给他们一种温暖的食物感觉。

上图是全球知名快餐连锁店汉堡王 (Burger King)使用的配色方案。但如果您提供健康食品，则可以使用绿色。如果是只销售软饮料的自助餐厅，则绿松 (234F1E)和红果酱 (610F0B)颜色效果最佳。

# 杂货网站

杂货店网站出售各种产品，从蔬菜到家用电子产品。因此，您可以将任何类型的配色方案应用于您的杂货店。但如果您的杂货店擅长特定产品类型，最好在您的网站上说明其颜色。

例如，您可能销售乳制品和烘焙食品。但如果您的网站专门销售新鲜水果和蔬菜，最好使用绿色和黄色色调。

2. 博客网站的最佳配色方案

博客是一种信息网站，发布有关当前主题的新信息的帖子和文章。博客网站有多种类型。其中最受欢迎的是信息网站、联盟营销网站、评论网站等。查看一些可以应用于它们的标准配色方案。

# 信息网站

您可以根据个人喜好创建任何类型的信息博客网站。假设您是 CSS/HTML 和其他技术主题的编程专家和博主。以下是您可以在网站上使用的标准配色方案。

任何信息博客网站的唯一目的都是让人们阅读您的信息。因此，使用太多对比色是没有意义的。如果这样做，可能会分散访问者的注意力，让他们的目光转向阅读以外的其他东西。这就是为什么黑白配色方案组合最适合这种类型的网站。

# 联盟网站

联盟网站的目的是让人们阅读文本和信息，并促使他们购买产品。这就是为什么您可以在网页配色方案中包含对比色和触发色。以下是 WP Hive 联盟网站使用的配色方案。

您还可以为您的联属网站使用其他类型的颜色棚。如果他们推广软件产品，您可以考虑使用 橙色 (FF6200)、 粉红玫瑰木色 (A04142)、 粉红草莓色 (F1634C)或您想要的任何其他颜色。

# 评论网站

人们在购买产品和服务之前会访问评论网站，以了解关于产品和服务的真实反馈。绿色是和平、信任和平静的象征，因此它是评论网站中常用的颜色。下面是一个例子。

蓝色象征着舒适、清晰、信任和和平。这就是为什么 Capterra 和 TrustRadius 等众多评论网站在设计网站时都使用蓝色和绿色。

3. 作品集网站的最佳配色方案

作品集网站是一种在线简历。使用作品集网站，一个人可以向他人展示自己的作品、才华和经历。它为求职者打开了大门，让雇主可以通过在线探索找到他们。您要构建的作品集网站类型应符合您的技能、知识和经验。

# 摄影作品集网站

摄影作品集网站不会包含太多文字。他们试图吸引访客和观众对摄影作品的注意力。他们喜欢使用普通的配色方案，因为他们担心华丽的色彩可能会降低摄影作品的魅力。在这种情况下，黑白组合可以为您提供最好的帮助。

了解如何无需编码即可创建简历网站。

# 面向工程师和技术人员的作品集网站

如果您是土木工程师，并且想要设计与建筑工程相关的作品集网站，则必须使用橙色和红色的棚屋。因为它们象征着力量、强度、温暖、成功和热情。下面是您可以看到的示例。

但如果您是计算机程序员、建筑师或设计师，则可以使用粉红色-玫瑰木色 (A04142)、紫色-洋红色 (A01959)和蓝色-牛仔布 (151E3E)颜色。

4. 最适合商业网站的配色方案

商业网站是一种在线门户，可向所有类型的受众（例如客户、零售商、批发商、代理商、供应商和分销商）发布有关产品和服务的信息。它允许任何人与他们交流。商业网站可以有多种类型。

# 公司网站

企业网站正式代表一个品牌及其在线产品。它将展示产品照片和详细信息。如果访客只是来来去去，什么也不会发生。网站必须确保信任感和平静的界面，以便访客愿意延长他们的会话时间。

在大多数情况下，蓝色、绿色、黑色和白色的组合效果很好。以下是富士电梯公司使用的配色方案的示例。

你还会发现不同的例子。例如，微软在其网站上包含了紫色-果酱（951217） 和黑白组合。

# 活动管理网站

活动管理公司负责组织或家庭举办成功活动的所有责任。活动管理公司负责举办全天或半天的活动，招待客人并提供餐饮服务。

活动管理公司倾向于采用温暖而华丽的配色方案来设计他们的网站，以吸引访客的注意力。以下是一个例子。

但是，根据您的活动管理服务，您可以应用其他调色板。

5. 教育网站的最佳配色方案

在教育网站上，学生和访客往往会停留更长时间。为了确保访客拥有一个安静的环境，建议不要使用任何刺眼的颜色。如果你访问 Khan Academy、Udemy 和 Coursera 等网站，你会发现他们使用的是浅色版的蓝色和绿色。

6. 娱乐网站的最佳配色方案

红色、紫色和黄色是任何娱乐网站的基础颜色。因为它们能唤起一种兴奋、快乐和激情的感觉。只要访问 YouTube、Netflix、Netflix 和其他流媒体频道，你就会发现这样的例子。

不过总有例外，比如Spotify就采用了绿色-长尾小鹦鹉（03C04A）和黑色-金属（0D0B0A）的颜色代码来设计界面。

7. 求职网站的最佳配色方案

求职网站通常是雇主向潜在求职者发布招聘信息的网站。雇主会详细说明职业发展机会、工作职责、薪资等。

与博客和教育网站类似，访客往往会在这里停留很长时间。这就是为什么大多数求职网站都使用冷色调——蓝色和绿色的组合。

8. 在线论坛的最佳配色方案

在线论坛是人们可以互相讨论他们感兴趣的话题的网站。论坛网站允许具有相同兴趣的人创建群组来详细讨论特定主题，例如书籍、软件、电影、音乐等。

一些论坛网站允许注册用户发布消息并在收到答案或回复后对消息进行评分。没有特定的配色方案要求所有在线论坛都必须遵循。但如果您创建在线论坛来推广产品或服务，则可以使用其品牌颜色。以下是 Quora 使用的配色方案。

9. Wiki 网站的最佳配色方案

维基网站是一个开源平台，用户可以在其中编辑和贡献信息。维基主要被记者、科学家和其他专业人士用来记录信息。

设计师根据 wiki 网站的目标市场来设置品牌颜色。但是，设计师必须再次确保界面整洁，因为访问者会停留很长时间并关注信息。以下是 wikiHow 使用的配色方案。

10. 媒体网站的最佳配色方案

由于媒体门户网站主要报道热门新闻，因此他们喜欢在界面上应用红色、橙色和蓝色的组合配色方案。因为红色和橙色营造出温暖的环境，而蓝色增添了凉爽的感觉。

然而，媒体门户网站保持其布局背景干净、洁白。徽标、菜单栏和标题采用红色、橙色和蓝色。以下是 Fox News 网站配色方案的示例。

您可以访问 BBC、路透社、CNN 和德国之声的网站以获得更多灵感。

11. 众筹网站的最佳配色方案

众筹网站为有志创业的企业家提供了一个平台，让他们从众多人那里筹集资金来创业。他们在这些平台上分享自己的创业想法。如果有人喜欢它并希望他执行计划，就会为他的项目捐款或投资。

众筹网站每年筹集数十亿美元。一些知名网站包括 Kickstarter、Indiegogo、Patreon、Crowdfunder 和 Gofundme。他们的网站使用很酷的配色方案——绿色、蓝色和粉色的混合。

因为这些配色方案象征着信任、安全和和平——我们上面已经讨论过了。

12. 政府网站的最佳配色方案

在设计政府网站时，您可以说明国家颜色代码。大多数政府网站都遵循这一做法。为了快速探索，您可以查看一些大使馆网站。我们展示了美国大使馆网站使用的配色方案。

注意：无论您在政府网站上使用什么配色方案，请确保您的文本和内容清晰可见，并且访问者不会感到眼花缭乱。在这种情况下，基本的网页设计原则可以提供帮助。

附赠：练习配色方案的最佳网页设计工具

当您考虑练习网页配色方案时，您显然会寻找一个允许您创建页眉、页脚和整个网站布局的平台。只有这样，您才能在其不同部分应用调色板来可视化它的外观。

Elementor和HappyAddons是两个很棒的网页设计工具，你可以用它来实现这个目的。它们实际上是拖放式页面构建器，你可以用它们创建整个网站，而无需编写一行代码。

Happyaddons 是 Elementor 插件的一个附加组件。它带有更多独家功能和小部件，可让您进一步增强您的网站。从Elementor 面板 > 样式，您可以获得颜色选项。您可以将任何颜色应用于网页元素。

Elementor 和 HappyAddons 均提供免费版本。您可以在 WordPress 本地主机上使用它们来实时练习配色方案。您可以在网上找到大量有关这些插件的教程、博客和文档。

如果您有任何问题，可以联系支持人员。点击下面的按钮来探索它们。

元素

快乐附加组件

关于最佳网站配色方案的常见问题解答

现在，我们将回答一些有关最佳网站配色方案的最常见问题。

为网站创建配色方案时应该考虑什么？在为网站创建配色方案时，需要考虑许多因素。请查看下文。1. 了解您的品牌目标受众。2
. 将品牌颜色设置为主色。3
. 将对比色设置为辅助色。4
. 在标题、标题、徽标、CTA 按钮和链接中使用主色。5
. 在文本和布局背景中使用辅助色。6
. 保持整个网站的颜色一致性。
最好的网站配色方案生成器有哪些？以下是一些您可以在自己的网站上使用的最佳网站配色方案生成器的名称。1. Adobe Color
2. Paletton
3. Canva
4. Khroma
5. Coolors
6. ColorSpace
7. Colorkuler
什么颜色最能减轻压力？蓝色和绿色是两种最能减轻人类心理压力的颜色。其次，紫色也非常有效。
网络上有多少种颜色？Web 技术使用RGB 颜色格式。它代表红色、绿色和蓝色。因此，我们在网络上看到的任何颜色都是这三种颜色的组合。同样，您可以将每个参数设置为 0-255 的值来定义它们的强度。这意味着网络上总共有256*256*256 = 16,777,216 种可能的颜色。
设计师应该在网站上使用多少种颜色？网页设计师不应该在网站上使用超过三种原色。为了形成令人愉悦的色彩对比，你可以使用更多的颜色作为次要颜色。

最后的要点！

如果您是新手，找到最适合您现代网页设计的配色方案可能具有挑战性。但只要稍加研究，您就会逐渐更容易找到一些引人注目且时尚的选择。

我们尝试编制一份全球最受欢迎的网站使用的最佳配色方案列表。因此，无论何时您想更新现有网站或从头开始设计新网站，您都可以遵循这些配色方案来快速获得灵感。

如何在 Elementor 中创建自定义搜索结果页面

精心设计的搜索结果页面在提升用户体验方面起着至关重要的作用。它使访问者能够快速导航到他们正在寻找的相关内容。它不仅节省了浏览内容的时间，还鼓励他们进一步探索。

Elementor 是数百万个 WordPress 网站的首选页面构建器。它提供了主题构建器和有用的小部件，您可以通过它们轻松创建搜索结果页面。在本教程文章中，我们将向您解释如何在 Elementor 中创建自定义搜索结果页面。

请记住，搜索框是任何搜索结果页面的主要元素。人们在这里输入关键词来查找相关帖子和产品。因此，我们首先使用 Elementor 创建一个动态搜索框。然后，我们将通过添加存档小部件来完成页面，使其成为博客存档页面。

Elementor 中的自定义搜索结果页面是什么？

搜索结果页面是一个专用网页，可让用户和访问者快速导航到特定类型的内容，例如博客文章、电子商务产品和产品组合项目。对于内容丰富的网站来说，此类页面是必不可少的。

自定义搜索结果页面允许您根据需要整合各种元素，如特色图片、自定义标题、过滤器等，以使页面看起来更美观。这不仅可以改善用户体验，还可以帮助提高转化率。

WordPress 中自定义搜索结果页面的用例

在开始本教程之前，让我们先看一下 WordPress 中自定义搜索结果页面的一些用例。浏览下面的列表。

电子商务网站

显示带有筛选条件的产品搜索结果页面。访客可以使用搜索栏查找确切的产品，或使用筛选条件按价格、评级和类别对产品进行排序。

博客网站

博客文章和文章根据标签和类别显示。用户可以按作者、日期和其他查询进行排序。

知识库页面

知识库页面通常涵盖 DIY 文档指南和实用资源。这些页面必须有搜索功能，以便快速探索有用的内容。

服务型企业

用户可以在预订或填写联系表之前根据评级、价格范围、产品和其他相关详细信息对所需的服务进行分类。

教育网站

高级搜索和过滤选项可让您搜索课程、课文和学习材料，以便学生和学习者可以轻松找到他们需要的内容。

如何在 Elementor 中创建自定义搜索结果页面

理论部分已经结束。在本节中，我们将介绍如何在 Elementor 中创建自定义搜索结果页面的教程部分。请确保您的网站上有以下插件可用。

将它们放到您的网站上后，请按照下面说明的教程进行操作。

步骤 01：转到 Elementor 主题生成器

登录您的 WordPress 信息中心。然后，导航至模板 > 主题构建器。

选择站点部分下的搜索结果选项。然后单击+ 添加新按钮。

这将打开 Elementor 画布，您可以在其中添加任何您想要创建自定义搜索结果页面的小部件。

步骤 02：创建一个新的部分以添加搜索小部件

单击画布上的加号 (+) 图标。然后选择所需的列结构。

您必须为该部分写一个标题。这对 SEO 很有帮助。

因此，将标题小部件拖放到该部分中。这将允许您为该部分写一个标题。

进入样式选项卡。您将获得更改标题文本的颜色、排版、字体大小、对齐方式等选项。自己动手吧。

同样，将“文本编辑器”小部件拖放到标题文本下的部分中。然后，编写所需的文本并按上图所示进行自定义。

步骤 03：在部分中添加搜索小部件

找到“搜索”小部件。按照与上面显示的相同方式将其拖放到“文本编辑器”小部件下的部分中。

步骤 04：自定义搜索小部件

默认情况下，搜索小部件将显示在画布的整个宽度上。转到“高级”选项卡以减小其宽度。

您将看到边距部分。将所需的值放在右侧和左侧的部分框中。您将看到搜索小部件的宽度已减小。

接下来，进入样式选项卡。您将获得更改占位符文本排版、搜索框背景颜色、边框类型等的选项。根据您网站设计的要求自行完成这些操作。

我们在这里所做的是向搜索框添加一个半径值。我们在“边框半径”下的“顶部”和“左侧”框中放置了值。

同样，我们为搜索按钮添加了半径。为此，请展开“样式”选项卡下的“提交按钮”部分。在“半径”下的“右侧”和“底部”框中输入值。

您将立即看到更改。如果您想添加悬停效果、背景颜色、框阴影等，请探索那里的选项。

探索如何使用 Elementor 创建博客文章模板。

步骤 05：配置结果选项

我们希望您对 Ajax 搜索功能有所了解。每当用户开始在其中输入内容时，搜索框下方就会立即显示多个结果。

搜索小部件的结果选项允许您启用此功能并配置您想要在搜索框下显示的即时结果总数。

转到“内容”选项卡。然后，展开“结果”部分。

启用“实时结果”选项。此功能现已启用。

步骤 06：创建实时结果模板

Elementor 允许您创建实时结果模板，通过该模板您可以指定用户在搜索框中输入时如何显示内容。

单击结果部分下的创建模板按钮。

这会将您带到一个新的画布。在这里，您必须为实时搜索结果创建布局并将其保存为模板。

选择您想要的列结构。我们选择了定向行。当您向此部分添加内容时，它将继续显示在右侧。

我们想用这个搜索框来展示博客文章。因此，每当有人输入博客主题时，搜索框必须显示相关博客文章的列表。为此，我们必须添加推荐帖子小部件。

将特色图片小部件拖放到该部分。

默认情况下，特色图片尺寸较大。首先，从“图片分辨率”选项中选择“中等尺寸”。

然后，进入“样式”选项卡。使用对齐方式、宽度和半径等选项，您可以进一步缩小特色图像的尺寸，如下面的屏幕截图所示。

以同样的方式，将帖子标题小部件放在特色图片旁边。

您可以看到我们减小了字体大小并改变了其颜色。

注意：在此阶段，请保存模板。如有必要，您可以向其中添加更多元素。

了解如何使用 Elementor 创建简历网站。

步骤 07：将模板添加到结果中

来到我们正在设计的主页。点击结果部分下的下拉图标，选择您刚刚设计的模板。

选择模板后，其下方会出现几个新选项。使用它们，您可以配置搜索框下显示的项目总数。

步骤 08：对实时结果布局进行风格化

再次进入样式选项卡并展开结果部分。您可以设置背景类型、边框类型、半径、填充、与搜索字段的距离、列高、宽度以及行与列之间的间隙。

预览实时结果

现在，在搜索框中输入一些内容。您将看到下面出现与输入主题相关的三个项目的列表。

这确保搜索小部件完美运行。

注意：您的搜索小部件已准备就绪并完全可用。您可以在网站上的任何位置创建搜索框，例如在页眉、页脚和页面中以相同的方式创建搜索框。此类搜索框通常放置在页眉和存档帖子页面中。

步骤 09：添加存档帖子小部件

在搜索框部分下创建一个新部分。然后，将存档帖子小部件拖放到新部分。

这将以网格格式显示您在网站上发布的所有博客文章。

步骤 10：配置存档帖子小部件的设置

现在是时候自定义存档帖子小部件并根据需要设置其布局了。该小部件有许多自定义选项。首先，配置基本设置。转到“内容”选项卡并展开“布局”部分。

选择列数、 图像位置和图像分辨率。我们选择了 2 列，将图像位置设置为顶部，并将分辨率设置为全分辨率。

之后，打开标题、摘录、元数据和阅读更多选项。但如果您不想要任何选项，请将其保持关闭状态。

要定义摘录长度，请在旁边设置字符数。此外，指定要显示的元数据类型。我们为小部件选择了数据和评论元数据选项。

分页将您的帖子分为多个页面。展开分页部分允许您配置分页类型、对齐方式、页面限制和缩短。

了解如何使用 Elementor 创建联系表单。

步骤 11：对存档帖子小部件进行样式化

进入样式选项卡。在这里，你会看到几个选项。首先，展开布局部分。

您可以自定义列间隙、行间隙和对齐方式。

展开图像部分将允许您设置图像和其他元素之间的边框半径和间距。

同样，通过展开内容部分，您可以设置标题、元信息、摘录和阅读更多文本的字体、颜色和间距。

最后，展开“分页”部分。这将允许您自定义分页项的字体、颜色、悬停效果和空间。

注意：实际上，每个 Elementor 小部件都有更多选项，包括存档帖子小部件。在上面的教程中，我们试图为您提供有关您可以为存档帖子小部件进行的自定义的基本概念。希望您可以探索和使用除这些之外的其他选项。

步骤 12：保存并预览搜索结果页面

现在，进入页面的预览模式。在框中输入内容并点击搜索按钮。您将看到相关博客文章以网格格式显示在下面。

有錯誤嗎？搜索结果页面似乎损坏了！

点击搜索按钮后，如果你看到如下图所示的相关博客文章，你可能会感到害怕。你可能会觉得这个页面坏了。

别担心！这个问题很容易解决。

您只需在 Elementor 主题构建器中创建一个存档页面。您设计存档页面的方式将影响单击“搜索”按钮后相关博客文章的显示方式。

如果您希望我们创建一篇单独的教程文章，介绍如何使用 Elementor 创建存档页面，请通过评论部分告诉我们。我们将考虑根据您的期望设计这样的页面。

因此，这是本文教程部分的结尾。因此，您可以使用 WordPress 上的 Elementor 创建搜索结果页面。

加分点：使用 HappyAddons 获取 Elementor 的更多小部件

HappyAddons 是一款出色的插件，其中包含大量适用于 Elementor 的强大小部件。如果您觉得现有的 Elementor 小部件不够用，并且想要更多，您可以尝试 HappyAddons 插件。

HappyAddons 带有 120 多个小部件和数十种功能，可将您的 Elementor 网站提升到一个新的水平。该插件有免费版和高级版。您可以先试用免费版。如果满意，您可以随时升级到高级版并做一些很棒的事情。

点击下面附加的按钮获取插件。

HappyAddons 免费

快乐插件专业版

结论

如今，创建搜索结果页面已不再是奢侈之举，而是提升用户体验的必需品。它可以帮助您维护网站的吸引力和品牌价值。如果您的网站主要用于电子商务产品、联盟营销和博客，那么没有搜索结果页面就永远不够。

希望通过遵循上述教程，您可以在 Elementor 网站上创建出色的搜索结果页面。但是，不要忘记针对平板电脑和移动设备优化搜索小部件，以便所有类型的人都可以使用此元素。

如何使用或不使用插件克隆 WordPress 网站

如果您是一名专业的网站开发人员，需要经常创建和维护大量网站，那么克隆 WordPress 网站云的能力将改变游戏规则。因为这可以让您高效地复制性能良好的网站，保持一致性，同时节省时间和精力。

然而，我们的经验表明，克隆网站对于许多用户来说都是令人畏惧和害怕的，尤其是那些不懂技术的用户。但如今，有许多简单的方法，即使是非技术用户也可以克隆他们的 WordPress 网站而不会犯任何错误。

在本文中，我们将向您展示如何使用和不使用插件克隆 WordPress 网站的多种方法。此外，如果您想将网站的精确副本复制到不同的域，我们将在最后向您展示该过程。让我们开始吧！

什么是克隆网站

克隆网站是在不同域名中创建网站精确副本的过程。它复制整体结构、设计、内容和功能以创建与原始网站完全相同的版本。您可以手动或使用不同的插件克隆网站。

但未经许可克隆他人网站可能会违反版权法并受到法律处罚。谷歌和其他搜索引擎一旦发现此类网站，就可能将其列入黑名单。

克隆与复制网站

尽管克隆和复制看起来密切相关，但两者还是有细微的差别。请在下表中快速查看。

话题	克隆网站	复制网站
定义	创建正在运行的网站的副本或精确版本。	复制正在运行的网站的部分或全部内容。
客观的	模仿设计和功能。	通过修改来重复使用部分或全部内容。
合法的	大部分都是非法的，违反了知识产权法和版权法。	如果在发布之前修改内容则可能是违法的。

为什么您可能需要克隆您的网站

如果未经许可就克隆网站，则属于非法行为。但如果在自己的网站上克隆网站，则没有问题。人们经常出于多种原因克隆自己的网站。让我们了解一下为什么将来您可能想要克隆自己的网站。

1. 创建备份副本

如果网站崩溃，克隆网站可以帮助您快速恢复原始网站。虽然网上有许多备份插件，但克隆可以帮助您在新位置保留网站的运行副本，包括整个数据库和网络内容。

2. 测试新特性、设计和功能

在将新应用程序安装到原始网站之前，您可能需要检查它在网络环境中的反应。克隆的网站将允许您测试应用程序是否存在最终可能造成危害的错误或兼容性问题。

3.分析原网站代码及框架

如果您有一个无头 WordPress 网站，则必须定期检查其前端代码和框架。通过识别技术问题及其解决方法，这将避免您的网站出现任何潜在的停机。

4. 创建暂存环境

您可以将克隆的网站用作暂存环境。如果您是主题或插件开发人员，克隆的网站将允许您在将更改和更新发布到市场之前在暂存平台上测试它们。

5.迁移到新的托管服务器

在将网站迁移到新服务器之前，您可以先将克隆版本托管在那里，以检查其支持、性能和其他问题。如果对他们的服务感到满意，您最终可以决定将所有 Web 内容和数据库迁移到那里。

如何克隆 WordPress 网站：分步指南

您可以使用多种方法克隆 WordPress 网站。其中最流行的方法是手动、使用插件和从 Softaculous 应用安装程序克隆。以下是网站的前端视图，我们将逐一使用所有这些方法克隆该网站。让我们开始吧！

方法一：如何在不使用插件的情况下克隆 WordPress 网站

在开始克隆 WordPress 网站之前，您必须准备好一些先决条件。它们是：

域名/子域名
托管服务器

您可以将克隆的网站托管在不同的服务器上，也可以托管在已托管原始网站的同一台服务器上。我们将使用子域名来解释此方法。

步骤 01：创建子域名

登录您的cPanel。转到“域”部分。单击其中的“域”选项。

注意：根据 cPanel 主题，您可能会或可能不会在域部分中获得子域选项。下面的 cPanel 使用 Jupiter 主题，该主题不会在主页上显示子域选项。但其他主题（如 paper_lantern）会显示它。

单击“创建新域名”按钮。它将带您进入一个新页面，并提供您可以输入子域名的字段。

在第一个字段中输入您的子域名。根字段将自动采用它。最后按“提交”按钮。

注意：子域名的写法是首字母+点+你的域名。例如，hmaccessories.com是原域名，test.hmaccessories.com是子域名。你可以添加任何首字母。

进入 cPanel 主页。点击文件管理器。访问您创建的子域名目录文件。

您将看到它 ( test.hmaccessories.com ) 完全是空的。我们将从原始域的目录(public_html)复制所有内容。

步骤 02：将文件从原始域目录复制到子域

转到public_html。点击“设置”。

屏幕上会出现一个弹出窗口。勾选“显示隐藏文件（点文件）”旁边的复选框并保存。

它将使所有隐藏文件在列表中可见。

使用键盘+鼠标快捷键选择列表中的所有文件。单击复制按钮。

将打开一个新的弹出窗口。输入子域目录文件的名称。

然后点击“复制文件”按钮。它将复制并保存所有这些文件到您的子域目录文件夹中。

***特别提示：这篇文章向您展示了如何在同一台托管服务器上克隆网站。但是，如果您想在不同的服务器上克隆它，则必须下载并上传这些文件到您的托管服务器。下载过程如下所述。

转到public_html。再次选择文件。点击“压缩”按钮。

选择GZiped Tar Archive选项。单击“压缩文件”按钮。

您将看到文件已压缩。您必须下载 FTP，将其连接到此服务器，通过 FTP 将压缩文件发送到您的新服务器，然后在那里提取文件。希望您能自己完成。探索最佳 FTP 客户端。

步骤 03：为克隆站点创建数据库

导航至cPanel > MySQL 数据库。在创建新数据库字段中输入您的克隆网站名称。

最后点击“创建数据库”按钮。您的新数据库将被创建。

但新数据库将完全为空。您需要从旧数据库复制文件并将其粘贴到新数据库中。

导航到cPanel > phpMyAdmin。

首先，点击新数据库（test.hmaccessories.com）。你会看到它是完全空的。

转到旧数据库并单击顶部的导出按钮。您将进入一个新页面。

点击格式部分下的“Go”按钮。数据库文件将被下载。

***特别提示：如果你的数据库很大，并且你希望在下载时压缩它们-

在导出方法下选择自定义。从压缩选项中选择gzip 。

向下滚动页面到末尾并点击“Go”按钮。

进入您克隆网站的数据库。点击导入按钮。点击选择文件上传您的旧数据库。

向下滚动页面并点击末尾的“前往”按钮。克隆网站的数据库将填充旧数据库的文件。

步骤04：编辑wp-config.php文件

导航到cPanel > 文件管理器 > 您的子域名。选择wp-config.php

点击顶部的编辑按钮。

向下滚动页面一点。在DB_NAME和DB_USER旁边设置您克隆的网站名称。

您也可以从这里更改登录密码。

步骤 05：将新用户添加到数据库

转到cPanel > MySQL 数据库。您也可以从这里设置或更改用户密码。向下滚动到将用户添加到数据库部分。

选择您的数据库并单击添加按钮。勾选所有权限旁边的复选框。单击最后的进行更改按钮。

步骤 06：向克隆站点添加 DNS 记录

如果不添加 DNS 记录，您的克隆网站可能无法上线。此过程很简单。

导航至cPanel > 域 > 区域编辑器。单击克隆站点旁边的+ 记录按钮。

添加名称和 IP 地址。最后点击“添加 A 记录”按钮。

预览

现在，从前端预览克隆的网站。您将看到它运行完美。

方法二：如何使用插件克隆 WordPress 网站

如果您不想经历手动过程的所有麻烦，您可以使用插件克隆您的 WordPress 网站。有许多在线插件可以帮助您轻松完成此操作。一些最常用的插件是 FastDup、WPVivid、Updraft Plus、Duplicator 和 ManageWP。

我们将使用 WPVivid 插件（一种流行的备份插件）来解释该过程。选择备份插件背后的逻辑是，克隆任何网站的基本步骤与备份网站相同。

如果您没有额外的可用域名，并且想要将原始网站克隆到本地网站，则此方法最适合您。让我们进入以下步骤。

步骤01：安装并激活WPVivid插件

导航到插件 > 添加新插件。在搜索框中输入WPVivid 。

您将获得上面的插件。安装并激活它。

步骤 02：备份您的网站并下载备份文件

从管理菜单栏转到WPvivid Backup选项。您将在插件仪表板上看到几个选项。

我们建议您选择数据库+文件并将备份保存到本地。最后点击立即备份按钮。

它将创建您原始网站的备份。

向下滚动页面一点。您将获得备份文件。单击行上的下载按钮。

它将使您的文件准备好以 zip 文件的形式下载。再次单击下载选项，将开始下载您的备份文件。

步骤03：将备份文件上传到新网站

转到新网站的仪表板。确保 WPVivid 插件也已安装在那里。向下滚动一点。您将看到上传选项。

点击选择文件按钮，添加刚刚下载的文件。最后，点击下方的上传按钮。

下载的文件将会上传至新的网站。

上传备份文件后，您需要恢复它们。在“备份”选项卡下，您将看到“恢复”选项。单击它。

之后，您将看到另一个 “恢复” 按钮。再次点击它。该过程将需要几分钟才能完成。

步骤 04：登录到您的克隆网站

大多数人都会犯一个错误。他们使用与新网站相同的用户名和密码。但由于您已将另一个网站的文件和数据库上传到该网站，因此其用户名和密码将与您克隆的网站（原始网站）相同。

输入原网站的用户名和密码，点击登录按钮。

转到前端。你会看到网站运行正常。

网上还有许多其他插件可用于克隆您的 WordPress 网站。下面列出了一些流行的 WordPress 插件，您可以尝试这些插件作为 WPVivid 插件的替代品。

Migrate Guru：免费迁移和克隆 WordPress
一体化 Wp 迁移
博客价值
复印机

方法三：如何从 Softaculous 克隆 WordPress 网站

如今，几乎每个网站托管服务器（无论大小）都向其用户提供免费的 cPanel 访问权限。每个 cPanel 上都会有一个 Softaculous 选项，可让您克隆原始网站。但使用此方法，您无法在其他托管服务器上克隆您的网站。

您必须在已托管网站的同一台服务器上克隆所需网站。在开始此方法之前，您还必须完成一些先决条件。

先决条件

确保您的 cPanel 上添加了新域名或子域名已准备就绪。
如果您希望域名使用 HTTPS 协议，请安装 SSL 证书。

一切准备就绪后，请开始按照以下步骤操作。

步骤 01：从 cPanel 转到 Softaculous

登录您的cPanel。导航至软件 > Softaculous 的 WordPress Manager。

步骤 02：安装克隆的网站

您将获得添加到此 cPanel 的所有域名的列表。由于此 cPanel 上只有一个域名，因此您可以看到列表很短。单击箭头图标。

向下滚动一点，点击“克隆”按钮。您将进入一个新页面。选择您要克隆此原始网站的域名。

最后，点击克隆安装。

步骤 03：登录您的网站并预览

按照方法二的说明登录克隆网站，进入前端预览，一切正常。

这些都是创建原始网站克隆版本的最佳三种方法。

加分点：如何将页面从一个 WordPress 网站复制到另一个网站

您是否曾梦想过无需编写任何代码即可将相同的网页设计复制粘贴到多个域名？设计一个全新的网站总是耗时且需要付出很多努力。因此，如果您已经有了一个漂亮的网页设计，最好将其复制粘贴到其他域名并自定义某些区域以使其看起来独一无二。

如果您的网站是使用 Elementor 设计的，您可以通过 HappyAddons 的跨域复制粘贴功能在您的网站上启用此功能。

HappyAddons 实际上是 Elementor 插件的一个附加组件。它附带许多附加功能和小部件，可增强您使用 Elementor 构建的网站。跨域复制粘贴是此附加组件的高级专业功能。

跨域复制粘贴功能的工作原理

确保您的网站是使用 Elementor 设计的。接下来，按照步骤操作并探索下面显示的来源。

步骤01：在您的网站上安装并激活以下插件。

快乐附加组件
HappyAddons Pro（专业版）

步骤 02：将小部件或部分从一个域复制粘贴到另一个域

使用 Elementor Canvas 打开所需网站的网页。单击六点图标选择部分，或右键单击选择列。

点击弹出菜单列表中的“X Copy Section” 。

打开新域名网站的页面。转到要粘贴设计元素的部分。

单击鼠标右键。点击选项X Paste Live Paste。

同样，您可以复制粘贴特定的小部件和列。将光标放在小部件或列上，然后右键单击鼠标。点击X 复制小部件或X 复制列。按照上述指南将其粘贴到新域网页上。

步骤 03：将整个网页从一个域复制粘贴到另一个域

打开要复制的页面。将光标放在页面的任意位置，然后单击鼠标右键。

点击X 复制所有内容选项。

转到您的其他域并使用 Elementor Canvas 打开一个页面。右键单击鼠标。

点击列表中的X Paste Live Paste选项。几秒钟后，整个页面就会出现在屏幕上。

现在，您可以对其进行稍微或更多的自定义，以赋予它独特的外观。

请观看下面附加的 YouTube 视频以了解更多解释。

https://www.youtube.com/embed/eEpuWG8pTbg?feature=oembed

因此，您可以轻松地将相同的网页设计复制并粘贴到任意数量的网站上。此功能对网页设计和开发机构非常有益。

关于如何克隆 WordPress 网站的常见问题解答

希望您对上述方法感到满意。但除了这些教程方法之外，您可能仍会有一些疑问。因此，我们整理了一份网上常见的一些基本问题清单，并在本节中进行了解答。克隆网站合法吗？

如果您克隆网站是为了测试和非商业目的，则不会有法律问题。但如果您计划将其用于货币化，则克隆的网站可能会侵犯原始网站的 IP、商标和版权。我可以下载整个网站吗？其他人可以在未经我的同意的情况下克隆我的网站吗？如何检查您的网站是否已被克隆？如何保护您的网站不被克隆？

关于如何克隆 WordPress 网站的最后几句话

如今，克隆网站已不再是一项艰巨的任务。虽然手动克隆方法有点复杂，但其他方法相对容易一些。无论您是想克隆网站进行测试、开发还是练习其他技能，都可以使用本文中描述的任何方法。

如果您对 cPanel 有深入的了解，第一种方法是最好的。但是，如果您是新手或半高级用户，其他两种方法会更好。您选择的方法应取决于您的特定需求和偏好。

但请记住，在进行任何重大更改之前，一定要保留备份。如果发生意外，此备份将帮助您尽快恢复网站。

如何在 Elementor 中创建图像比较滑块

如今，任何网页设计的成功很大程度上取决于它如何有效地以视觉方式向用户传达信息和想法。图像比较滑块是一个强大的概念，可以将您网站的视觉叙事能力提升到一个新的水平。您可以使用 WordPress 工具轻松制作这些滑块。

Elementor 可以在这方面为您提供帮助。这款功能强大的页面构建器插件使您无需任何编码即可在您的网站上创建令人惊叹且引人入胜的图像比较滑块。在这篇博文中，我们将介绍一个详细的教程，解释如何在 Elementor 中创建图像比较滑块。

在此之前，我们将简要讨论什么是图像比较滑块以及它的一些特殊用例。

什么是图像比较滑块？

图片对比滑块是一种网页元素，它允许用户和访客并排查看两张图片，并用分隔线进行比较。您可以通过来回滑动分隔线来查看效果。此网页功能/元素可让您直观地展示任何产品或信息的前后场景，突出它们的差异。

图像比较滑块的一些特殊用例

下面，我们列出了几种特殊用例，其中图像比较滑块可以增强您的视觉叙事。快速浏览一下它们以获得灵感。

前后视觉对比

这在时尚、健身、美容、设计、家居装修等行业特别有用，您可以在这些行业展示产品或服务带来的转变。

精彩照片编辑

如果您是摄影师或平面设计师，您可以通过比较编辑后和未编辑的照片来展示您的编辑技巧。

治疗和整容的效果

此功能用于美容行业，显示面部和皮肤护理、理发、化妆和使用的化妆品的结果。

解释功能增强

软件开发人员可以使用此功能来演示对任何软件、Web 应用程序、主题或移动应用程序的视觉增强所做的更改。

显示历史变更

在建筑领域，你可以直观地看到城市发展后会有什么变化。此外，你还可以展示你的周围环境随着时间的推移发生了怎样的变化。

如何在 Elementor 中创建图像比较滑块：分步指南

Elementor 在市场上非常受欢迎，拥有超过 700 万活跃用户，并且还在不断增加。如果您曾经梦想过在 WordPress 上设计您的网站而无需任何手动编码，那么您一定会爱上这个页面构建器，因为它功能丰富且用户友好。

但是，Elementor 本身没有图像比较工具或功能。不过不用担心！Elementor 的一款功能强大的插件 HappyAddons 有一个名为“图像比较”的小部件，您可以像喝自己喜欢的果汁一样使用它。让我们开始教程吧。

步骤 01：在您的网站上安装 Elementor 和 HappyAddons

首先，请确保您的网站上安装并激活了以下插件。

您不需要高级版本即可使用此功能，因为 HappyAddons 免费提供该功能。

步骤 02：使用 Elementor 打开帖子/页面

现在，使用 Elementor 打开您想要创建图像比较部分的帖子/页面。Elementor Canvas 将在您的屏幕上打开。

步骤 03：在画布上为图像比较小部件创建一个部分

如果您已经使用过 Elementor，那么您知道如何创建新部分来添加小部件。我们仍在向新用户展示它。

单击Elementor Canvas 上的加号 (+) 图标。

接下来，根据图像比较部分的宽度选择列结构。

您可以看到画布上已添加一个新部分。我们将在此列中添加并创建一个图像比较部分。

步骤 04：将图像比较小部件拖放到列中

在 Elementor 画布左侧的 Elementor 面板顶部的搜索框中输入“Image Compare” 。

现在，将“图像比较”小部件拖放到您刚刚创建的部分。

您可以看到图像比较小部件已添加到画布中。接下来，我们将在下一步中向小部件添加内容。

注意： 如果您遇到 500 内部服务器错误，您可以按照本指南了解如何修复 500 内部服务器错误。

步骤 05：将图像添加到小部件

您需要向小部件添加两张图片，其中一个可以是先前的或原始版本，另一个是编辑后的版本。

进入内容选项卡。在选项卡下方，您会看到图像部分。您可以添加两张图片，一张用于之前，另一张用于之后。立即添加图片。

我们在小部件中添加了两张图片。一张质量稍差，另一张质量一流。

将光标悬停在小部件上。标签将可见。您可以使用下图中指向的选项更改标签名称。如果您愿意，可以这样做。

步骤 06：自定义图像比较小部件的设置

展开“内容”选项卡下的“设置”部分。您将看到四个选项：可见性比率、方向、隐藏覆盖和移动手柄。您可以使用它们执行以下操作。

可见度比率——通过增加或减少可见度比率，您可以重新定位小部件图像之间的分隔线。
方向 –显示分隔线，水平还是垂直。
隐藏覆盖 –显示或隐藏覆盖效果。
移动手柄——您可以通过此选项控制用户如何探索前后图像。

步骤 07：对图像比较小部件进行样式化

转到“图像比较”小部件的“样式”选项卡。您将获得自定义手柄和标签元素的选项。

通过“手柄”选项，您可以自定义屏幕上两个图像之间的手柄外观。您可以在此处自定义手柄栏、手柄箭头、框高度、边框类型、边框宽度和边框半径。

接下来，展开标签部分。在此部分中，您可以自定义 标签填充、位置、边框类型、边框半径、颜色、背景颜色、框阴影 和排版。

步骤 08：预览图像比较小部件

进入页面的预览模式。左右拖动小部件的手柄以查看其是否有效。在下面的视频片段中，您可以看到我们的小部件运行良好。

因此，您可以像专业人士一样在 Elementor 网站上创建图像比较滑块。探索本指南，了解如何在 Elementor 中添加工具提示，将您网站的导航提升到新的高度。

Elementor 中图像比较滑块的常见问题解答

到目前为止，我们已经描述了今天讨论的教程和理论部分。现在我们将回答人们在网上经常问的与今天的主题相关的一些问题。图像比较滑块中可以使用哪些类型的图像？图像比较小部件是否适合移动设备？图像比较小部件是否可以提高用户参与度？是否有可用于创建图像比较滑块的免费插件？图像比较滑块对 SEO 有什么好处吗？

關閉！

我们希望您喜欢本教程。使用此小部件，您现在可以有效地展示产品的前后场景或任何类型的故事和发展。但您必须牢记一些最佳实践，以确保最佳性能和用户体验。

首先，始终使用尺寸合适且经过优化的高质量图像。上传前请压缩图像，以免影响网站的加载速度。最后，在发布小部件之前，请检查其结构是否完美适合移动设备和平板电脑。

WordPress中将指定类别的页面从Elastic search中排除的方法

WordPress插件ElasticPress只提供了不索引特定类型PostType的帖子的方法，如果我不想某个分类被索引（比如Post类型下的分类zjdy），如何做到。这里使用SQL的方法，操作前请务必要备份数据库及服务器。

INSERT INTO wp_postmeta (post_id, meta_key, meta_value)
SELECT p.ID, 'ep_exclude_from_search', 1
FROM wp_posts p
INNER JOIN wp_term_relationships tr ON p.ID = tr.object_id
INNER JOIN wp_term_taxonomy tt ON tr.term_taxonomy_id = tt.term_taxonomy_id
INNER JOIN wp_terms t ON tt.term_id = t.term_id
WHERE t.slug = 'zjdy';

SQL语句解析

INSERT INTO wp_postmeta: 插入数据到wp_postmeta表中。
(post_id, meta_key, meta_value): 指定插入的列名。
SELECT p.ID, ‘ep_exclude_from_search’, 1: 从之前的查询结果中获取post_id，并设置固定的meta_key和meta_value。
FROM … WHERE …: 后面的部分与之前的查询相同，用于获取”zjdy”类别下的所有帖子ID。

执行注意事项

备份数据库: 在执行任何修改数据库的操作之前，务必备份数据库，以防意外发生。
直接执行SQL语句: 可以使用phpMyAdmin等数据库管理工具直接执行上述SQL语句。
插件或函数: 如果不熟悉SQL，可以使用WordPress的插件或函数来实现相同的功能。例如，可以使用WP_Query类获取帖子，然后循环添加meta数据。

注意事项

meta_key: “ep_exclude_from_search”是自定义的meta_key，不同的插件或主题可能使用不同的key。请根据你的实际情况进行调整。
meta_value: “1”通常表示排除，”0″表示包含。具体含义可能因插件而异。
性能: 如果你的网站有大量帖子，执行上述SQL语句可能需要较长时间。可以考虑分批处理或者优化索引来提高效率。

其他方式

使用插件: 很多SEO插件都提供了批量设置元数据的功能，可以直接通过插件界面来实现。
自定义函数: 可以编写自定义函数来循环处理帖子，并添加meta数据。

总结

通过上述SQL语句，可以快速地将指定类别下的所有帖子从搜索结果中排除。但是，在执行之前，务必仔细检查SQL语句，并备份数据库，以确保数据的安全。

建议:

了解ElasticPress配置: 如果您使用ElasticPress插件，可能需要在Elasticsearch中重新索引数据，以使更改生效。
测试: 在生产环境执行之前，建议在测试环境中进行测试，以确保一切正常。

如果您还有其他问题，欢迎随时提出。

温馨提示：

数据库操作风险较大，请谨慎操作。
如果对SQL不熟悉，建议寻求专业人士的帮助。

如何在 Elementor 网站中添加工具提示的完整指南

您是否希望在网站上添加信息丰富的工具提示？Elementor 可以帮助您快速完成此操作。它是最简单的插件之一，您只需单击几下鼠标即可将工具提示添加到任何 Web 元素中。您根本不需要知道如何编码。

此外，Elementor 还具有许多有用的功能，您可以使用这些功能自定义工具提示的外观以匹配您的网站风格。在本指南中，我们将为您提供有关如何借助此插件在 Elementor 网站中添加工具提示的完整指南。

此外，我们将介绍如何使用客户 CSS 代码添加工具提示。因此，无论您是 Elementor 新手还是已使用多年，本文都适合您！

工具提示如何帮助您改善网站的用户体验

工具提示可以帮助您添加更多信息，以改善用户体验，满足他们的搜索意图，同时提高他们的网页浏览速度。让我们探讨在网站上使用工具提示的一些主要好处。

a. 允许您添加上下文信息

工具提示允许您显示有关特定 Web 元素的上下文信息。您可以使用它来简化任何复杂指令或 Web 功能的流程，突出显示关键点。

b. 协助填写表单字段

完成在线申请时，您必须填写许多字段。工具提示可以提供有用的说明，以便用户在输入信息时不会犯任何错误。此帮助对于验证信用卡、申请护照、填写账单地址等必不可少。

c. 解释 Web 应用程序设置过程

有些 Web 应用程序对于新用户来说总是很复杂。他们需要花费大量时间来了解系统和界面。使用工具提示，您可以轻松演示任何复杂 Web 应用程序的设置过程。它可以为他们节省宝贵的时间。

d. 帮助您推广产品特色

工具提示不仅可以解释复杂的事物，还可以帮助您推广产品功能。当客户将鼠标悬停在产品上时，您可以通过工具提示显示其功能。

我们中的一些人可能会发现使用自定义 CSS 代码创建工具提示很困难。如今，无需一行代码即可为您的网站创建和添加工具提示。HappyAddons 在 Elementor 中为您提供了无代码 CSS 工具提示功能。

有趣的是，您可以在 HappyAddons 中免费获得此功能。您不仅可以添加文本，还可以在 HappyAddons 工具提示中获得高级功能。

更改文本颜色
更改文本排版
更改工具提示位置
添加文本背景颜色和背景图片
添加动态标签
添加动画
添加工具提示箭头

下面让我们探讨如何使用此扩展在 Elemnetor 中添加工具提示。

添加工具提示的先决条件

在您的网站上安装这些插件后，请执行以下步骤。

由于工具提示是一项功能，而不是小部件，因此您必须先启用它。要启用此功能，请选择您网站的任何小部件或元素。

然后，转到“高级”选项卡。向下滚动一点并展开Happy Tooltip选项。打开“启用高级工具提示” 。

启用此功能后，您将获得另外两个部分来自定义工具提示。它们是样式和内容。您可以在上图中看到它们。

样式：此部分将允许您添加自定义设计并为工具提示添加图像。我们稍后将详细讨论此选项。
内容：您可以从内容部分添加和编辑工具提示文本、固定其位置、添加动画等。

在内容部分，您不仅可以添加所需的工具提示文本，还可以添加 HTML 标签，为工具提示文本提供额外的优势。您可以在此处使用的 HTML 标签包括：

,,,<s>, ,,<del>,<ins>,,,<code>,,,<strike>,<abbr>,,,<a>,<q>,<img>,<dfn>,<time>,<cite>,<acronym>,<hr>

将动态标签添加到工具提示内容

HappyAddons 已集成动态支持以支持您的工具提示内容。但是，由于某些限制，我们很难支持所有标签。我们目前不支持短代码动态标签。

此外，您无法在编辑模式下看到动态数据，只能在预览模式下看到。

# 自定义 Elementor 工具提示的位置

您将在内容部分下方立即找到位置控制设置。默认情况下，您的工具提示将显示在任何元素上方。您将在此部分中获得四个不同的选项来设置工具提示位置。它们是：

顶部
底部
左边
正确的

在下面的照片中，您可以看到我们已将工具提示位置更改为右侧。

# 向 Elementor 工具提示添加动画

在位置设置的正下方，您将看到动画部分。您将在那里获得八种可用的动画效果。它们是：

淡入
滚入
放大
弹跳
向下滑入
向左滑入
向右滑入
向上滑入

选择满足您工具提示需求的那个。观看下面的照片！

您甚至可以自定义工具提示的动画持续时间。默认情况下，它设置为 1000ms（毫秒）。

# 添加或删除 Elementor 工具提示的箭头

您可以将此称为工具提示指针或工具提示导航箭头。默认情况下，您将启用此箭头。但您可以根据需要将其停用。该过程如下所述。

注意：如果您想在工具提示中添加图片，则必须关闭此功能。否则，您将找不到可用的添加图片选项。

# 触发工具提示

触发器定义 Elementor 工具提示在屏幕上的显示方式。有两个可用的触发器选项：

点击
徘徊

您将在触发器部分下方看到距离选项。它允许您使用工具提示增加或减少 Web 元素与其之间的距离。

# 对齐工具提示文本

您将在距离部分下方获得文本对齐选项。

步骤 03：设置 Elementor 工具提示的样式

要进一步自定义工具提示，请单击下图中的样式部分。

# 增加工具提示的宽度

样式部分中的第一个选项是宽度。拖动宽度按钮并将其调整为所需的尺寸。

# 增加工具提示箭头的大小

您可以使用工具提示箭头大小来调整工具提示的箭头大小。您可以通过拖动下面的测量按钮来完成此操作。

#更改工具提示的字体

您可以从排版设置中为工具提示添加各种风格。您将在这里获得所有 Elementor 排版设置。

#为工具提示文本的背景添加颜色

您可以从背景颜色选项中为工具提示文本的背景添加颜色。

#为工具提示添加边框半径

默认情况下，工具提示的边框半径为 5 像素。但您可以根据需要更改它。border-radius 控制面板将赋予您执行此操作的完全权限。

# 将框阴影添加到工具提示中

通过拖动测量按钮，您可以从框阴影设置中向工具提示添加阴影。

步骤04：启用图像选项

我们已经告诉过你，如果你想启用图像选项，你必须禁用工具提示箭头功能。它将在样式部分启用一个新选项。

#添加图片并调整工具提示

导航到样式部分。单击“背景类型”部分并展开它。您将在那里获得一个图像文件。单击它并上传您想要的工具提示照片。之后，您可以更改其位置、附件、大小、文本颜色、边框半径等。

这就是您可以为您的网站创建精美的图像和基于文本的工具提示的方法。看看您的工具提示在经过大量自定义后最终效果如何。

您可以使用多种方式使用自定义 CSS 向 Elementor 网站添加工具提示。让我们探索一些最简单的方法。

方法一：使用 <abbr> （缩写）标签添加工具提示

使用 <abbr> 标签，您可以随时在网站上创建工具提示。您必须在 title=”…” 标签内添加工具提示文本。以下是您可用于创建工具提示的代码示例。

John   <abbr style="text-decoration: none" 
title="I'm an Elementor Expert!">DOE</abbr>

您可以在任何支持 HTML 标签的 Elementor 字段中输入此代码。完成此部分后，只要将光标悬停在该元素上，就会看到工具提示出现。

注意：您无法使用此方法对工具提示进行样式化！但这是添加工具提示的最简单方法。

现在，我们将向您展示如何创建可自定义的工具提示，以便您可以更改其颜色、更改位置、添加动画等。为此，首先，您必须在 HTML 文件中为工具提示编写简单的代码。

在 Elementor 中，您将获得一个 HTML 小部件来创建一个用于编写此代码的字段。将 HTML 小部件拖放到 Elementor 画布上。

您将自动在 Elementor 内容部分中打开一个字段。您必须添加一个类并为其指定一个类名，我们将其命名为“tooltiptext”。此类将用于自定义工具提示。以下是您可以用来创建工具提示的 HTML 代码示例。

<span class="tooltiptext"
>My Skill Sets</span>

这里，我们使用“我的技能组合”作为工具提示文本。您必须将所需的工具提示文本写入此部分。

我们在下面分享了 CSS 代码，以便您进一步自定义工具提示。您可以直接将它们复制粘贴到自定义 CSS 部分，也可以根据需要进行修改。您可以将此代码片段添加到 Elementor 自定义 CSS 面板或主题的附加 CSS 部分。

如果您想将此代码添加到 Elementor 自定义 CSS，请按照此导航操作 – Elementor 站点设置 > 自定义 CSS。这是代码。您可以复制工具提示的整个 CSS 代码片段，也可以根据需要自定义它们。

注意：要导航到主题的附加 CSS 面板，请导航至管理仪表板 > 外观 > 自定义 > 附加 CSS。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

如果您想更改工具提示位置、箭头位置等，请按照以下代码片段进行操作。

要更改工具提示的位置并将其放在底部，请使用以下代码。

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

要将其移动到右侧，请使用以下代码。

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

要将其放在左侧，请使用以下代码。

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

要修改工具提示的箭头位置并将其放在底部，请使用以下代码。

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

如果你想了解更多关于 CSS tooltip 自定义的知识，你可以访问w3schools。

如何避免工具提示看起来像垃圾内容

工具提示是向网页用户提供额外信息的绝佳方式。但如果页面上显示的工具提示过多，则可能看起来垃圾且令人厌烦。在使用工具提示时，您必须考虑避免几件事，以免您的网页看起来垃圾。

下面让我们来探索一下。

1. 保持工具提示简洁明了

工具提示应包含用户必须了解的信息，仅此而已。这意味着您必须避免使用冗长的细节列表、不必要的文本和华而不实的设计元素。相反，请坚持使用简单明了的解释。

2. 切勿同时显示多个工具提示

避免工具提示看起来像垃圾的另一种方法是限制每个块/同一行显示的工具提示数量。一次只显示一个工具提示，并允许用户向下滚动以获取更多信息。

如果您觉得需要添加更多信息，您可以考虑其他方式。例如，您可以嵌入视频和信息图，而不是使用工具提示共享所有负载。这甚至可以确保为用户提供更丰富的用户体验。

3. 保持元素之间的空间

空间是任何 UI 设计的重要组成部分。网页上必须确保多少空间有一个理想的比例。这个比例是 2:1，这意味着三分之一的网页必须有空间。

工具提示也一样。不要让它们太拥挤，以便用户在浏览您的网站时可以稍微喘口气。

4.让用户跳过教程部分

如果您提供教程或其他有用的内容，请确保用户可以跳过这些内容（如果他们不想的话）。这将有助于减少页面上显示的工具提示数量，并鼓励更多人利用您的内容。

一些很棒的工具提示设计示例

能够巧妙地使用工具提示可以提升用户在发展和探索网站时的体验。让我们快速浏览一些最佳的工具提示用例示例。

1.亚马逊

亚马逊目前是互联网上排名第一的电子商务网站。你会发现亚马逊使用无数的工具提示来引导你浏览不同的页面并解释所有必要的流程。每当你进入其主页时，你都会看到如下所示的工具提示。

最好的是，它不仅包含说明，还包含 CTA 按钮。

2. 维基百科

维基百科是由志愿作家社区维护的在线百科全书。每当您将光标悬停在任何链接的单词上时，您都会看到一个工具提示，显示有关这些单词和术语的更多信息。

3. 全球速卖通

每当您尝试使用信用卡或借记卡从 AliExpress 购买产品时，您都会收到一些工具提示，解释如何完成结帐流程。在下面的照片中，您可以看到工具提示解释了您将在不同的电子卡上获取您的卡号并使用它们来完成订单。

希望这三个示例足以让您了解如何在您的网站上显示工具提示。

让我们回答一些关于如何在 Elementor 网站中添加工具提示的最常见问题。

何时应使用工具提示？在某些特殊情况下，必须使用工具提示。例如：
1. 详细说明关键术语和行话。
2. 帮助用户填写表格、结帐页面和安装软件。
3. 解释复杂的流程。
4. 突出主要功能。
5. 节省网页空间。
工具提示对 SEO 有好处吗？当您的网站提供出色的用户体验并满足客户需求时，它在 SERP 上的排名会更高。能够巧妙地使用工具提示可以帮助您实现这两点。这意味着工具提示可以成为提高 SEO 分数的好方法。
工具提示应该有多长？您的工具提示应在 150 个字符以内。不要用不必要的文字填充。保持精确并切中要点。
工具提示在移动设备上有用吗？是的，工具提示也适用于手机。它们实际上是应用内的小消息，可用于突出显示特定的 UI 元素。
工具提示和弹出窗口有什么区别？当用户将光标悬停在特定单词和图标上时，工具提示会向用户提供非常简短而有用的说明。弹出窗口是一种相对较长的描述，有时包括外部网页链接。当用户将光标悬停在特定单词或图标上时，它也会出现。

如何将 Elementor 搜索图标添加到网站菜单

你如何在电子商务网站上搜索所需产品？大多使用搜索框。

通常，网上商店有各种不同类别的产品。在这么多产品中手动搜索精确的产品非常耗时。搜索框可以立即帮助客户找到他们想要的精确产品，从而节省客户大量时间。

这就是为什么所有网站都必须有搜索框的原因。Elementor 附带一个功能强大的搜索栏小部件，您可以通过它在网站上轻松启用此功能。您甚至可以自定义小部件，使其完美匹配您网站的设计和布局。

在本教程文章中，我们将详细介绍如何将 Elementor 搜索图标添加到您的网站。

Elementor 搜索图标是什么？

Elementor 搜索图标是插件的一个小部件，实际上名为“搜索栏”。它允许您在页眉、页脚、侧边栏或网站的任何位置创建搜索栏。但将其放在页眉或页脚上很方便，因为它使小部件可以从多个页面访问。

小部件的灵活性让您可以设计占位符文本、图标、框阴影、边框、图标位置、排版设置等。您甚至可以针对不同的屏幕尺寸（包括台式机、平板电脑和手机）配置小部件。

以下教程将向您解释所有这些要点。继续阅读。

为什么你应该在你的网站添加搜索选项

搜索栏是大多数现代网站上必不可少的网站功能之一。作为网站所有者，您可以将此功能添加到您的网站，以满足不同的目的，例如查找所需内容、搜索产品、确保更好的网站导航等。

但是，访问者可以使用搜索功能实时获取正确的数据。除此之外，在您的网站上使用搜索栏还有一些好处。

改善访客的用户体验
帮助访客快速找到所需的信息/产品
提高转化率
让访客在你的网站上停留更长时间
帮助您了解人们在您的网站上寻找什么

如何将 Elementor 搜索图标添加到您的网站菜单

现在是时候向您展示如何将搜索表单/图标添加到我们的 Elementor 网站导航菜单了。我们使用预先设计的页面进行演示。此外，我们还使用 Elementor 免费版和专业版小部件创建了一个导航菜单。

在深入学习本教程之前，您需要在 WordPress 网站上安装并激活以下插件。

先决条件：

Elementor （免费）
Elementor 专业版

让我们开始吧：

您注意到我们网站的菜单没有任何搜索选项。我们想在导航栏中添加一个搜索图标，因此我们在菜单区域添加了一个新列。

首先，从左侧 Elementor 小部件区域找到“搜索表单”小部件。然后，您需要将小部件拖放到导航菜单的右侧大小列中。

另外，了解如何在 WordPress 中创建菜单。

第 2 步：设置搜索皮肤

添加小部件后，您将获得管理内容区域内的搜索表单内容的所有必要选项。

您可以使用三种不同的皮肤来设置表单设计。皮肤包括：

经典的
最小
全屏

查看下面的图片，找到您最喜欢的皮肤。

您可以在内容部分写入占位符文本。

步骤 3：管理搜索按钮内容

内容区域允许您管理搜索表单按钮内容。您可以将按钮类型设置为图标和文本。在这里，我们将图标定义为我们的按钮。您还可以以自己的方式更改图标和管理图标大小。

步骤 4：设置表单输入字段的样式

要自定义默认搜索表单样式，您需要转到“样式”部分。您可以重新设置搜索表单的输入字段的样式。您可以更改输入的排版、文本颜色、背景颜色、边框颜色、框阴影、边框大小和边框半径。

在这里，我们自定义了文本颜色并添加了边框半径，并将其他设置保留为默认设置。

步骤 5：样式按钮

Style- >Button区域带有装饰搜索表单按钮所需的选项。您可以更改文本颜色、背景颜色、图标侧面和图标宽度。

为了使按钮引人注目，我们改变了它的背景颜色。

步骤 6：在布局区域添加边距

您可以通过转到“高级”部分获取 Elementor 提供的其他设置。我们还使用此选项来更改布局。

在这里，我们在小部件的顶部添加了一个额外的“ 12px ”边距，以便小部件可以轻松地与其他菜单内容对齐。

步骤 7：使 Elementor 搜索图标适应移动设备

单击Elementor 面板底部的“响应模式”选项。在 Elementor 面板顶部会打开用于在不同屏幕尺寸之间切换的选项。

现在，您需要针对每个屏幕尺寸分别优化布局。您可以通过调整小部件的大小和位置来重新排列布局。希望您能独自完成。

注意：但请记住，不要删除任何小部件。因为如果您删除小部件，它将同时从所有屏幕尺寸中删除。如果您愿意，您可以隐藏特定屏幕尺寸的特定小部件。

步骤 8：预览搜索栏

自定义小部件后，这是我们的新导航菜单的最终外观，它具有漂亮的 Elementor 搜索图标/表单。

就是这样。

关于将 Elementor 搜索图标添加到菜单的常见问题解答

如果您对本博客仍有疑问，那么您应该查看下面的常见问题解答部分。我们挑选了一些常见问题并进行了回答，以便您理清思路。

1. Elementor 搜索表单小部件免费吗？

否。搜索表单小部件是一个高级小部件。

2.如何自定义WordPress中的搜索栏？

您可以以不同的方式将搜索栏添加到您的 WordPress 网站并进行自定义。您还可以查看有关如何将搜索栏添加到 WordPress 网站的便捷教程。

3. 如何在 Elementor 中创建和编辑搜索结果页面？

您可以轻松添加搜索结果页面以在 Elementor 中查找网站内容。只需按照以下步骤操作即可。a
. 转到模板->主题构建器。b
. 找到搜索结果。c
. 单击添加新或 (+) 图标。d
. 最后选择一个现成的模板来制作您的搜索结果页面。

适用于 Elementor 和 WordPress 的 10 多个最佳预订插件

网上预订的兴起为各行业创造了巨大的商机，例如，网上旅游和网上餐饮预订行业的市场规模目前分别超过5190亿美元和2200亿美元。

这种预订趋势也蔓延到了医疗保健、餐厅和沙龙等其他行业。网上有大量的预订插件，您可以借助 Elementor 的强大功能在一夜之间在 WordPress 上无缝创建预订网站。

如果您正在寻找与 Elementor 集成的 WordPress 预订插件，本文将满足您的需求。我们将在本文中向您介绍一些适用于 Elementor 和 WordPress 的最佳预订插件，以便您可以为您的网站选择最佳插件。开始吧！

什么是预订插件？

预订插件使网站能够在线接受和管理预约、预订和预订。它为访问者提供了用户友好的界面，以便他们可以选择安排预约的时间、日期和服务。

作为管理员，您可以从后端设置预订规则、通知期限和取消政策。一些预订插件包括可自定义的预订表单、付款处理、自动通知和电子邮件营销集成等附加功能。

您必须了解预订插件的事项

您会发现数十个预订插件与 Elementor 集成。但并非所有插件都同样完美。预订插件中必须具备一些必需的功能和元素才能创建理想的预订网站。

我们已将它们列在下面的要点中。请浏览一下。

功能强大的管理面板，具有直观的界面
日历可用性，显示哪些日期和时间可以预订
支付集成，允许客户进行支付
灵活的预订规则，包括通知时间和取消政策
多语言支持，覆盖不同国籍的人
与Elementor 等页面构建器集成
移动响应能力和可定制的样式
自动电子邮件通知和预订提醒
如有需要，提供支持和更新

Elementor 的最佳预订插件

本节将讨论 Elementor 和 WordPress 的一些最受欢迎和最好的预订插件。我们将重点介绍它们的主要功能、定价和其他一些重要方面，以便您可以有效地决定合适的插件。快速浏览一下它们。

插件	销售或主动安装	评级
阿米莉亚	70,000+	4.50
布克利	70,000+	4.25
轻松安排预约	40,000+	5.00
预约时间预订	20,000+	4.90
WP 简单预订日历	20,000+	5.00
WP Timetics	2,000+	4.00
布克奈特	10,300+	4.90
预订新闻	10,000+	4.25
WordPress 酒店预订	—	4.50
Webba 预订	3,000+	5.00
沙龙预订	1,180+	4.34
预约	—	—

在接下来的讨论中了解它们的详细信息。

1. 阿米莉亚

Amelia是一款出色的 WordPress 预订插件，旨在为您提供企业级预订体验。它包含一系列功能和工具包，可自动管理预订、付款、服务安排和位置。

因此，您无需花费太多时间打电话、发电子邮件和聊天来接收和确认预订。其智能预订系统与流行的日历平台同步，将所有预约整合到一个集中中心。

您可以设置自动提醒和通知，以便客户和服务提供商不会错过即将到来的预约。除了预订系统之外，Amelia 还具有强大的分析功能，可提供包含对您的业务有价值的见解的高级报告。

Amelia 插件的主要功能

提供多种演示内容，以便快速准备您的网站
自动电子邮件和短信通知
轻松管理多个地点和员工
让您为预订表单创建自定义字段
允许添加折扣和优惠券用于营销目的
与 WooCommerce、Elementor、Zoom、Google Meet 等集成
可按小时、休息时间和个别团队成员定制服务安排
支持 PayPal、Stripe 和移动支付网关

Amelia 插件的价格

Amelia 在 WordPress.org 上提供免费版本。其高级版本起价为每年 79 美元，并享有15 天退款政策。

2. Bookly

Bookly是 Elementor 的另一个功能丰富的 WordPress 预订插件。此插件可让您找到创建功能齐全的预订网站所需的几乎所有内容。Bookly 是所有类型企业的完美解决方案，例如餐厅、诊所、水疗中心、健身、租赁服务、律师事务所等。

Bookly 为您提供一流的服务管理灵活性。您可以轻松自定义服务时长、能力、容量和定价。您可以根据您的技能、团队成员和要求为客户量身定制服务。

您将获得插件中的几个演示内容，因此您可以从头开始准备预订网站。它可以帮助您实现时尚的 UI 设计、选择精彩的配色方案、在货币之间切换以及设置灵活的计划选项。

Bookly 插件的主要功能

具有用户友好界面的综合管理区域
直观且可定制的预订表格
能够创建无限的预订表格
允许您在 50 多种货币之间切换
支持 17+ 种支付网关
轻松设置自动通知和提醒
与 WooCommerce 集成可让您销售产品和服务
让您将员工日程安排与日历同步

Bookly 插件的价格

Bookly 在 WordPress.org 上提供免费版本。其高级版本收费89 美元/终身。没有其他高级计划可用。

了解如何创建旅游网站。

3. 简单安排约会

Simply Schedule Appointments具有初学者友好的界面和大量令人兴奋的功能，因此您可以毫不费力地提供不同的预订服务。它简化了客户和顾客根据他们喜欢的日期和时间预订产品或服务的过程。

与 Elementor 集成后，您可以使用自定义字体、颜色、对齐方式、填充和 CSS 自定义其预订日历。该插件还包含一些内置功能，可使用颜色和自定义字段自定义其预订表单，以便您可以将其与您的业务品牌相匹配。

Simply Schedule Appointments 与多个流行的支付网关集成。这使客户能够使用他们所需的支付系统完成付款。

Simply Schedule Appointment 插件的主要功能

高级定制功能包括自定义字段和样式
轻松与 Google 日历同步
与所有流行的页面构建器集成
一键联系客户支持
让您按日期、时间和其他因素显示您的空闲时间
发送时间触发的通知
同一时间段内多次预订
转化跟踪系统帮助您了解预订渠道

Simply Schedule Appointment 插件的价格

Simply Schedule Appointments 在 WordPress.org 上提供免费版本。其高级版本起价为每年 99 美元，并享有30 天退款政策。

4. 预约时间预订

Appointment Hour Booking是一款易于使用的 Elementor 和 WordPress 预约插件。您可以使用该插件创建无限数量的预约表格。此外，您还可以展示在特定日期您可以提供特定服务的时间。

这样，客户就可以随时从您的可用列表中选择预约时间。该插件还可以帮助您为不同的服务创建多个预约表单。您可以从后端指定一次可以预约多少人以及每项服务的收费标准。

您可以选择将预订表单链接到付款处理。预约时间预订插件与许多支付网关集成。因此，您可以轻松链接客户所需的支付网关。

预约时间预订插件的主要功能

内置日历可显示工作日、日期、小时、假期和特殊日期
允许定义多个服务，并设置各自的价格和持续时间
自动管理可用时间，防止重复预订
为用户和管理员设置电子邮件通知
手动和自动生成预约和预订的 CSV 报告
与 WooCommerce、Zoom、MailChimp、SalesForce 等集成
专用的管理仪表板，用于管理服务、设置和预约
提供详细的操作方法文档

预约时间预订插件的价格

Appointment Hour Booking 在 WordPress.org 上提供免费版本。其高级版本起价为每月 6.99 美元，并有条件退款政策。

5. WP简单预订日历

WP Simple Booking Calendar是一款用户友好的插件，可帮助企业和网站所有者显示其出租物业和服务的可用性。此插件对于需要以直接方式展示其产品（如房屋、酒店房间、汽车、租赁服务等）可用性的企业特别有用。

您可以将日历的可用性与 Google 日历、Airbnb 和其他可以导入 iCal 源的网站同步。您可以在一个仪表板上显示多个日历，并将它们链接到特定页面。您可以通过修改日历的颜色、符号和文本来自定义日历的外观。

WP Simple Booking Calendar 的主要功能

重量轻且易于使用
一键编辑多个日期
将日历翻译成不同的语言
将鼠标悬停在特定日期时显示工具提示
直观的后端日历管理
创建无限日历
iCalendar 导入和导出
全天候提供出色的客户支持

WP Simple Booking Calendar插件的价格

WP Simple Booking Calendar 在 WordPress.org 上提供免费版本。其高级版本起价为每月 39 美元，并享有14 天退款政策。

6. WP Timetics

WP Timetics是一款功能强大的 WordPress 预约插件，可让您轻松创建和管理在线日程安排，预约数量不受限制。WP Timetics 是一款独特的插件，专门面向教练、顾问、导师、教师等，旨在让创建日程安排变得轻松无忧。

其无缝短代码功能可轻松将日程表添加到任何页面，提供灵活性。此外，收集员工和服务客户等业务数据也变得更加容易。

如果使用得当，WP Timetics 将使您的业务更加高效，并减少出错的可能性，从而使您的业务进一步发展。该插件可以设置无限数量的座位图，并帮助您在几秒钟内预订高端会议，将您的日程安排转化为竞争优势。

WP Timetics 插件的主要功能

创建具有多种会议类型的无限会议
为您的客户创建多个票价等级
自动时区检测和位置选择偏好（虚拟或面对面）的好处
通过 PayPal 和 Stripe 集成实现多种付款方式
利用 Google Meet 和 Zoom 集成举行虚拟会议
使用 Pabbly 和 Zappier 集成实现业务运营自动化
通过 Microsoft Outlook 和 Google 日历跟踪会议和预订
发送预订确认、取消和重新安排的电子邮件通知

WP Timetics 插件的价格

WP Timetics 的基本计划起价为每年 79 美元，并提供15 天退款保证。

7.Booknetic

Booknetic是另一个使用 WordPress 创建预订网站的优质插件。它可以帮助您创建各种预订网站，并在一个页面上处理预订、会面、付款、通知和销售。

其直观的用户界面 (UI) 允许客户通过台式机和手机预订和安排预约。强大的管理面板和详细的报告系统将让您随时掌握最新动态。您可以查看收入来源、浏览客户反馈并评估员工绩效。

Booknetic 插件非常适合律师事务所、水疗沙龙、租赁公司、美发沙龙和健身房。与支付网关的集成可以简化支付处理系统。

Booknetic 插件的主要功能

能够创建自定义预订表格
向客户发送提醒电子邮件
多重预订允许客户在一次会话中预订多项服务
与 PayPal、Stripe、Mollie、Square、Razorpay 等集成
优惠券系统可帮助您从客户那里获得更多预订
允许您提供多地点服务
拥有多语言和 RLT 支持

Booknetic 插件的价格

Booknetic 没有免费插件。常规许可证收费 79 美元。常规许可证提供开发人员的六个月支持。

8. BookingPress

BookingPress是一款适用于 Elementor 和 WordPress 的免费预订插件。虽然它相对较新，但它赢得了 2022 年 TemplateMonster 奖。这意味着该插件具有巨大的潜力和光明的未来。它可以帮助您创建一个功能齐全的预订网站，满足您的大部分需求。

BookingPress 是美容院、健身馆、医疗保健、牙科诊所、教育辅导、水疗业务、瑜伽课程、租赁商店等的良好解决方案。该插件包含功能丰富的工具集，可创建定制的预订表格和配色方案以维护您的品牌形象。

可以通过电子邮件、短信和 WhatsApp 向员工和客户发送自动通知和提醒。您可以启用其中每个功能或特定功能。

BookingPress 插件的主要功能

用于管理客户、付款和约会的便捷管理工具
允许客户预订查看日历
完全可调的预订表单向导
支持 Gutenberg 和 Elementor
与 15 个以上的支付网关无缝协作
与 Zapier、Google Meet、Zoom、Outlook 和 WooCommerce 集成

BookingPress 插件的价格

BookingPress 在 WordPress.org 上提供免费版本。其高级版本起价为每年 99 美元，并享有14 天退款政策。

9. WordPress 酒店预订

WordPress Hotel Booking是一款功能丰富的预订插件，由 MotoPress 开发。该插件专为酒店业主和经理开发，旨在以简化的方式管理不同类型的住宿。

您可以创建详细的列表，涵盖酒店客房的全面描述、图片、容量、床型和附加服务。该插件与 Elementor 和 Divi 等流行的页面构建器集成。它也与 Gutenberg 无缝兼容。

WordPress 酒店预订插件的主要功能

创建适合移动设备的预订表格
添加自定义字段以进行高级属性搜索
轻松查看日历上的实时可用性
动态显示季节性定价
根据物业设施设定复杂的费率
根据入住时间设定房价
出示折扣券和强制性的印花税
与支付网关集成

WordPress 酒店预订插件的价格

WordPress Hotel Booking 没有免费版本。其价格从每年 139 美元起，并有30 天退款政策。

10. Webba 预订

我们下一个精心挑选的插件是Webba Booking。该插件授权您创建一个响应式日历和预订表单，以允许客户在一次会话中进行团体和多个预订。高级定制是其突出的功能。

Webba Booking 提供 79 多种设计方案和 80 多种自定义选项。因此，您可以为预订表单和日历设置所需的布局和外观。其扩展功能一定会让您爱不释手。

Webba Booking 插件的主要功能

灵活的时间安排使您可以在营业时间内展示无限的优惠
响应能力让客户可以通过任何设备预约
自动电子邮件和短信通知发送提醒
支持 100 个支付网关
与 Google 日历、Zoom、WooCommerce 等集成
自动生成发票并计算税款

Webba Booking插件的价格

Webba Booking 在 WordPress.org 上提供免费版本。其高级版本起价为每年 89 美元，并享有30 天退款政策。

11. 沙龙预订

Salon Booking插件非常适合美容中心、男士沙龙、沙龙、理发店等商店以及类似类型的企业。您可以使用该插件设置高级预订规则、定义假期并列出网站的封锁时间。

这大大降低了在错误日期预订服务的可能性。即便如此，如果有任何客户在错误的时段预订了您的短节目或服务，您也可以轻松地从后端预订系统取消预订，并通过电子邮件要求客户重新安排。

沙龙预订插件的主要功能

自动提醒通过电子邮件和其他媒介（如手机、Twilio、Plivo 和 1p1sms）发送
与 Google 日历集成可帮助您在一个地方查看所有预订
与多个支付网关合作
所有个人作品的个人帐户页面
先进的折扣系统鼓励更多顾客预约
轻松为助手创建目录

沙龙预订插件的价格

Salon Booking 没有免费插件。常规许可证每年收费 69 美元。常规许可证提供开发人员六个月的支持。

12.JetAppointment

虽然我们在本列表文章的末尾介绍了JetAppointment插件，但这并不意味着该插件缺乏优质功能。实际上，这也是一个功能丰富的插件，可用于使用 Elementor 在 WordPress 上创建独立的预订网站。

它提供多种自定义模板、预约布局和自定义字段类型，以便您可以创建出色的预订表单。您可以配置一个强大的日历来定义您的工作日和工作时间，以便客户可以明智地预订您。

JetAppointment 插件的主要功能

在可视日历上配置工作日、工作时间和休息日
安排缓冲时间并根据不同时段设定价格
约会会自动创建 Zoom 会议链接
配有简洁的仪表板来管理预约
与许多支付网关无缝协作

JetAppointment 插件的价格

JetAppointment 没有免费版本。其收费为每年 19 美元，并有30 天退款政策。

Elementor 和 WordPress 最佳预订插件常见问题解答

到目前为止，您已经了解了 Elementor 和 WordPress 最佳预订插件的主要特性和功能。现在，我们将回答 Facebook、Quora、Reddit 和其他地方关于预订插件的一些常见问题。继续阅读！

如何使用 Eelementor 创建预订功能？您无法直接使用 Elementor 创建预订功能。您必须安装与 Elementor 集成的预订插件。此集成将在 Elementor 面板中创建一个小部件，您可以将其拖放到画布上并在之后进行自定义。
如何推广预订网站？1. 撰写并发布有价值的 SEO 优化内容，以便在搜索引擎上排名
2. 在目录网站上列出您的网站和服务
3. 与社交影响力人士合作
4. 在特殊场合提供特殊折扣和优惠券
5. 利用会员卡系统留住老顾客
6. 利用电子邮件营销的力量
适合小型企业的最佳在线预订系统有哪些？WordPress 可以成为小型企业开展在线预订业务的首选解决方案。它有大量超级令人兴奋的插件，既有免费的，也有专业的，可以在一夜之间准备好预订网站。以下是一些适用于小型企业的顶级 WordPress 预订插件/系统。1. Amelia
2. Bookly
3. 简单安排预约
4. 预约时间预订
5. 已预订
在线预订业务面临的主要挑战是什么？1. 通过一个平台管理多个预订服务
2. 高峰时段的时段管理
3. 随时解决技术故障
4. 处理时区差异
5. 处理定价和折扣
目前哪些预订业务最赚钱？1. 酒店预订
2. 航班预订
3. 汽车旅馆预订
4. 汽车/设备预订
5. 餐厅/中心预订
6. 水疗和沙龙预订

关于 WordPress 预订插件的最后的话！

WordPress 绝对是以最低成本创建理想预订网站的有效媒介。您永远不会在其他平台上找到与 WordPress 相同的灵活性。您可能需要其他几个插件和扩展来增强您网站的用户体验。

例如，您将需要其他插件，如安全、CRM、社交共享和备份插件。如果您想了解有关这些的更多详细信息，请通过评论框告诉我们。我们将快速为您提供必要的资源。

使用 Elementor 倒计时器小部件影响访客

据许多研究人员称，电子商务网站的平均转化率约为 2.5%-3%。这意味着大多数访问电子商务网站的人不会立即购买产品。因为他们中的大多数人认为他们可能会在浏览完产品后再购买。

Elementor 倒数计时器是一款实用的小工具，可以帮您免去这一麻烦。它能够激发网络访问者的冲动，让他们立即想到购买所需的产品，而不是停留在“添加到购物车”选项中。

在本文中，我们将详细解释如何使用 Elementor 倒数计时器小部件影响访问者。在此之前，我们将讨论一下该小部件。

Elementor 倒计时器小部件是什么？

Elementor 倒数计时器小部件允许您显示距离特定事件或截止日期的剩余时间。这是在网络访问者中营造紧迫感的有效方法。该小部件在产品发布、促销、特殊季节、销售优惠等期间非常有用。

Elementor 倒数计时器小部件具有高度可定制性。您必须首先根据您的活动将倒计时设置为任何特定日期和时间。然后，您必须配置其布局、字体、排版、特殊效果和整体设计。

Elementor 倒计时器小部件如何影响访客

通过添加倒数计时器小部件，您可以鼓励网络访问者立即采取行动，从而增加转化的可能性。该小部件通过以下方式实现此目的。

创造紧迫感

滴答作响的时钟显示促销活动即将结束，可以促使访客立即采取行动。“时间不多了”的视觉表现可以增强情感反应。这种方法在促销和销售活动中非常有用。探索10 种行之有效的方法来创造紧迫感并促进电子商务销售。

建立预期

随着倒计时的进行，访客对即将举行的活动、产品发布和特别促销活动的关注度越来越高。这种期待鼓励用户在日历上做个标记，这样他们就不会忘记活动确切开始的日期。

引起轰动和炒作

由于倒计时小部件增强了情绪反应，因此很容易在用户中引起轰动和希望。这可以扩大口碑营销，吸引更多目标受众。请记住，在推出新产品之前引起轰动和炒作非常有帮助。

推动重复访问

随着截止日期临近，访客可能会想多次访问您的网站，以查看还剩多少时间。这可以培养您的品牌与潜在客户之间的联系感，在长期竞争中对留住客户大有帮助。

提高转化率

通过结合紧迫性、预期、炒作和重复访问，您可以促使访问者采取您想要的行动，无论是进行购买、注册新闻通讯还是参加活动。所有这些的最终结果是提高转化率

如何在 WordPress 上使用 Elementor 倒计时器小部件

在本节中，我们将向您展示如何在 WordPress 上使用 Elementor 倒计时器小部件的分步指南。但在开始本教程之前，请确保您的网站上安装了以下插件。

先决条件：

希望您的网站上有插件。现在，开始下面的教程吧。

步骤 01：找到倒计时小部件并将其添加到画布

使用 Elementor Canvas 打开您的页面。我们之前已经创建了一个页面。现在，我们只需将倒数计时器小部件添加到页面即可解释该过程。

在Elementor 面板的搜索栏中输入 Countdown 。选择带有 HappyAddons 徽标的小部件（因为您已为它付费）。将小部件拖放到画布上的合适位置。

您可以看到小部件已添加。这是默认视图。现在您必须对其进行自定义，以符合您网站的品牌形象。

步骤 02：自定义倒计时器小部件

您必须在整个自定义过程中对其布局、字体、颜色、消息和效果（如有必要）进行风格化。探索如何做到这一点。

为小部件着色

转到“样式”选项卡。向下滚动选项卡，找到“时间颜色”选项。选择您想要的颜色。我们为小部件文本选择了白色。

像时间一样，为小部件的标签着色。（请注意，您需要向下滚动）确保选择一种对比色，使小部件文本清晰可见。

注意：如果需要，您可以使用这些选项分别为天、小时、分钟和秒设置不同的颜色。使用上述方法，您可以一次将相同的颜色应用于整个小部件。

设置小部件的字体

来到时间排版选项。找到并点击铅笔图标。您将获得排版列表。选择一个字体系列。

之后，您可以自定义小部件文本的字体大小、粗细、样式、装饰、字母间距和单词间距。

以同样的方式，设置标签的字体。

设置高度和宽度

通过改变Box Width和Box Height，您可以决定是否在单行或多行中显示小部件。

注意：如果您愿意，也可以自定义背景类型、边框类型和半径。但由于我们不需要下面的设计，因此我们保留了原有的选项。

设置时间

要设置倒计时时间，请转到“内容”选项卡。您将获得设置倒计时时间的选项。

配置倒计时设置

在倒计时设置下，您将获得更改标签位置、显示/隐藏标签和重命名标签的选项。该过程已在下面附带的视频中进行了说明。根据需要进行更改。

将小部件对齐到最适合的位置。您可以在时间之间添加分隔符。您可以将任何字符设置为分隔符。例如，我们添加了冒号 (:) 作为小部件的分隔符。

设置结束动作

您可以指定倒数计时器结束后发生的情况。您可以显示任何特定的图像、消息或重定向链接。

在结束操作下，从列表中选择结束操作类型。假设我们要添加一条消息。单击消息选项。

写下您想要的消息作为结束操作。默认情况下，消息将以黑色显示。由于我们的网页背景也是黑色，因此文本应该具有对比色，以便完美可见。

点击工具栏切换图标。这样会打开更多选项，你可以用它们来自定义文本。

单击工具栏切换图标将打开下面标记的选项。您可以使用它们来风格化您的结束操作消息。

注意：只有在倒计时结束后，您才会看到结束消息或与结束操作相关的任何内容。

步骤 03：使倒数计时器小部件适应移动设备

单击Elementor 面板页脚处的“响应模式”选项。这将向您显示将屏幕切换到不同屏幕尺寸的选项。

您可以分别调整字体大小、小部件位置和布局，以使小部件完美适合特定的屏幕尺寸。

注意：不要删除任何元素或更改任何屏幕上的颜色。因为如果您删除任何元素或更改其颜色，它将应用于所有屏幕。

步骤 04：添加附加消息以使小部件更有意义

一旦你的倒计时器小部件准备就绪，你可以用一些额外的小部件来装饰它，以便它对用户来说看起来聪明且有意义。

因此，您可以使用 Elementor 倒计时器小部件在您的网站上创建倒计时器。

步骤 05：或者使用现成的模板

如果从头开始在您的网站上创建倒数计时器看起来很麻烦，您可以使用现成的模板。HappyAddons 附带一个模板库，您可以在其中找到许多可以轻松导入的倒数计时器模板。

单击画布上的HappyAddons 库图标。

点击“过滤”选项查看类别。选择“即将推出”类别。

将光标悬停在您喜欢的模板上。将出现“插入”按钮。单击该按钮将模板插入到画布中。

模板已导入到画布中。现在您可以按照上面所示的方法根据需要自定义模板。

希望您喜欢本教程。

如何解决 Elementor 倒计时器不起作用的问题

有几种情况下，您可能会遇到 Elementor 倒计时器小部件无法正常工作的情况。如果您遇到这种情况，请考虑检查以下几点。

1. 定时器设置配置不正确

如果截止日期配置不正确，倒数计时器将无法按预期运行。如果您在 WordPress 后端配置的时间格式与目标位置不同，倒数计时器小部件肯定会显示错误的时间。

转到WordPress 仪表板 > 设置 > 常规。向下滚动页面，来到页面上标记的部分。检查您是否已正确配置时间。

2.缓存问题

缓存插件通常会干扰倒数计时器等动态网络元素。如果您的网站上有缓存插件，请确保您已清除缓存。如果小部件在此之后仍不起作用，请尝试停用缓存插件。

3. JavaScript 错误

有些 JavaScript 错误可能会导致倒计时器停止运行。转到您的搜索控制台。如果有任何错误，您会在通知中看到它。

4. 插件过时

确保 HappyAddons Pro 插件已更新至最新版本。因为有时旧版本会自动产生错误，这可能会导致与倒数计时器小部件发生冲突。

最后的话！

希望您已经获得了有关如何使用 Elementor 倒数计时器小部件的清晰指南。现在，通过将该小部件战略性地整合到您的网站中，您可以增强用户参与度、推动转化并推广限时产品优惠。

但请记住，在使用小部件时，请确保它与您的品牌吸引力保持一致，以便它在您的网站上保持一致。此外，不要忘记分析倒计时器的性能以评估其对用户行为的影响。

如何更好的在 Windows Server 上运行 WordPress

WordPress 是排名第一的内容管理系统，并且针对博客进行了优化。但您可以将 WordPress 用于任何类型的网站，无论是电子商务、通用网站还是个人网站

由于易于维护且拥有数千个插件和主题，WordPress 开发日益流行。

WordPress 在后台依靠 PHP 运行，因此，基本上它在 Linux 上运行效果最好，但是 – 如果您仍然愿意在 Windows 上运行 WordPress，本文将帮助您修复您在 Windows 平台上可能遇到的最常见错误。毕竟Linux的操作界面实在太难用了。

IIS 文件夹权限

WordPress 需要特殊权限才能更新 wp core、其插件和访问文件写入功能。如果您使用 Web 平台安装程序，则必须手动设置文件夹权限。

打开 Windows 资源管理器并找到 wordpress 安装文件夹。右键单击它，选择属性并单击安全选项卡。然后，单击“编辑”，然后单击“添加”。输入这些用户IUSR 和 IIS_IUSRS，并授予他们完全访问权限。

一旦添加，Windows 将把这些用户权限应用于所有子文件夹以及 WordPress 将来创建的文件夹。

默认文档类型和目录浏览

默认情况下，出于安全原因，IIS 不允许目录浏览。但为了正常运行，必须允许。为了解决此问题，请在托管空间的根目录中找到 web.config 文件，如果找不到它 – 这意味着它不存在，因此必须创建它。创建一个，然后将需要的详细信息复制/粘贴到其中：

最大文件上传大小

由于某些原因，您几乎肯定会遇到此错误：

“此文件超出了此网站的最大上传大小”

如果您已从 Web 平台安装程序安装了 WordPress 以安装适用于 Windows 的 PHP，则最大文件上传大小将设置为 2 Mgb（兆字节）。今天，这是不够的。

找到 PHP 根文件夹（PHP 的安装位置）。编辑 php.ini 并找到以下变量：

上传最大文件大小=2M

将其更改为以下内容：

上传最大文件大小=10M

或者您需要的任何尺寸。

修改DNS解析的问题

在安装了 IIS 的 Windows Server 主机上安装 WordPress 后，我注意到加载网页的初始响应时间很慢。当我单独测试 PHP 时，一切似乎都运行得非常快。连接到 MySQL 并直接运行一些查询似乎也运行得很好。

问题似乎出在 DNS 名称解析上。在 WordPress 配置文件中，不要设置数据库主机 localhost，而应使用本地 IP 地址。

1	`define('DB_HOST','localhost');`

将其更改为 127.0.0.1

1	`define('DB_HOST','127.0.0.1');`

您会立即注意到速度的提升和更高的 Google PageSpeed 分数！这是因为系统每次都必须确定 localhost 解析到哪个 IP 地址。通过使用 IP 地址，我们可以跳过此查找，这意味着服务器响应速度更快。

您可能遇到性能缓慢的第二个原因是您可能没有启用 OPcache。

在生产服务器上启用 OPcache 将优化 PHP 的任何顺序执行，从而带来巨大的改进。

如何激活 PHP OPcache？

首先，在记事本或其他文本编辑器中打开 PHP.INI 文件。它可能位于 PHP 版本下的程序文件中，具体取决于 PHP 的安装方式，但直接找到它可能更简单。
然后确保 扩展目录 已设置，以确保扩展目录已配置。此行通常应为： extension_dir = "ext"
zend_extension=php_opcache.dll 在 PHP 代码末尾添加一个新行。
然后重新启动 Apache 或 IIS
最后，PHP 现在速度更快了。

验证上述操作是否成功的最简单方法是创建一个 PHPinfo 文件（），并检查 Zend Engine 行下是否显示“使用 Zend OPcache”。此外，在页面下方，“Zend OPcache”部分应该存在并显示“启动并运行”。

网站如何阻止那些不欢迎的访客IP

方法一：使用 IIS IP 地址和域限制

打开 IIS 管理器打开“Internet 信息服务 (IIS) 管理器”。
选择网站在左侧连接栏中，展开你的服务器节点，找到你的 WordPress 网站，点击选择它。
添加 IP 地址和域限制在中间的功能视图中，双击“IP 地址和域限制”模块。如果没有看到此模块，你需要先安装它：
- 打开“服务器管理器”。
- 点击“添加角色和功能”。
- 在“角色和功能向导”中，导航到“功能”。
- 勾选“IP 地址和域限制”并安装。
添加拒绝条目在“IP 地址和域限制”模块中，点击右侧的“添加拒绝条目”。
- 在“指定条目类型”对话框中，选择“特定 IP 地址”。
- 输入你要阻止的 IP 地址。
- 点击“确定”。
配置默认行为默认情况下，IIS 允许所有 IP 地址访问。你可以通过“编辑功能设置”更改默认行为。如果你只想拒绝特定 IP，而允许所有其他 IP，不需要更改默认行为。

方法二：使用 URL 重写模块

安装 URL 重写模块确保 IIS 上安装了“URL 重写”模块。可以从 IIS 官方网站下载并安装。
打开 IIS 管理器打开“Internet 信息服务 (IIS) 管理器”。
选择网站在左侧连接栏中，展开你的服务器节点，找到你的 WordPress 网站，点击选择它。
打开 URL 重写在中间的功能视图中，双击“URL 重写”模块。
添加规则在右侧操作栏中，点击“添加规则”，选择“空白规则”。
配置规则
- 在“名称”字段中输入规则名称，例如“BlockSpecificIP”。
- 在“模式”字段中输入 (.*) 以匹配所有 URL。
- 在“条件”部分，点击“添加条件”。
  - 条件输入：“{REMOTE_ADDR}”。
  - 匹配模式输入你要阻止的 IP 地址，例如 192.168.1.1。
- 在“操作”部分：
  - 选择“拒绝”。
  - 设置状态码为“403 禁止”。
应用规则点击“应用”以保存并应用你的规则。

方法三：使用 Windows 防火墙阻止 IP 地址

打开高级安全 Windows 防火墙
- 按 Win + R 打开“运行”对话框。
- 输入 wf.msc 并按 Enter，打开“高级安全 Windows 防火墙”。
创建入站规则
- 在左侧导航栏中，选择“入站规则”。
- 在右侧操作栏中，选择“新建规则”。
选择规则类型
- 选择“自定义”，然后点击“下一步”。
选择规则应用的程序
- 在“此规则应用于哪个程序？”界面，选择“所有程序”，然后点击“下一步”。
指定协议和端口
- 在“协议和端口”界面，选择“任何”，然后点击“下一步”。
指定 IP 地址
- 在“作用范围”界面，选择“这些 IP 地址”下的“远程 IP 地址”。
- 点击“添加”按钮。
- 输入 112.66.184.244，然后点击“确定”。
- 点击“下一步”。
选择操作
- 选择“阻止连接”，然后点击“下一步”。
指定规则应用的配置文件
- 选择“域”、“专用”和“公用”三个选项，确保规则在所有网络环境下都生效。
- 点击“下一步”。
命名和描述规则
- 为规则输入一个名称，比如“Block IP 112.66.184.244”。
- 你也可以添加描述以便将来参考。
- 点击“完成”。

创建出站规则

为了确保出站流量也被阻止，你可以重复上述步骤，但是这次选择“出站规则”来创建一个类似的规则。

验证规则

测试阻止效果
- 从阻止的 IP 地址 112.66.184.244 访问你的服务器，确认连接被拒绝。
- 从其他 IP 地址访问你的服务器，确保正常连接。
检查活动连接
- 通过网络监控工具或者 Windows 事件查看器检查被阻止 IP 地址的访问尝试。

通过在 Windows 防火墙中设置规则，你可以有效阻止特定 IP 地址的访问。如果仍然无法阻止，可以考虑在网络边界（如路由器或其他网络设备）上设置阻止规则，以确保全面的网络安全。

方法四：使用wordpress 插件

iQ Block Country
IP2Location Country Blocker
WP GEO Website Protection
Wordfence

测试中走了很多弯路，最后原因竟然是因为自己使用了V-P-N软件，导致记录的IP不准确。

如何在 WordPress 中创建“认识团队”页面

您必须使用创建网站时使用的平台或技术来创建“与团队见面”页面。市场上肯定不乏网站建设平台和技术。

在本节中，我们将向您展示如何在 WordPress 网站上创建此页面。因此，如果您的网站由 WordPress 提供支持，则以下教程适合您。

步骤 01：安装 Elementor 和 HappyAddons

Elementor 是一款适用于 WordPress 的拖放式页面构建器插件。您可以使用此插件设计从简单到复杂的网站。HappyAddons 是一款功能丰富的 Elementor 插件。

Elementor 有 100 多个小部件和几个有用的功能，而 HappyAddons 则有 130 多个小部件和 20 多个令人兴奋的功能。拥有这两个插件后，您就可以在网站上创造奇迹了。

点击以下链接下载插件并将其安装到您的网站上：

步骤 02：使用 Elementor 打开新页面

使用 Elementor 打开一个新页面。

步骤 03：使用团队成员小部件

将团队成员小部件拖放到画布上并进行自定义。

Team Member 是 HappyAddons 插件的一个免费小部件。使用它，您可以创建一个干净、简单、简约的团队见面页面，如下图所示，类似于 weDevs、Namecheap、Microsoft 和 Authlab 的页面。

要详细了解如何使用该小部件，请访问团队成员小部件的文档。

步骤 04：使用 Team Carousel 小部件设计复杂的页面

使用 Team Carousel 小部件，您可以创建复杂的团队见面页面。将其拖放到 Elementor 画布上并进行自定义。

Team Carousel 是 HappyAddons 插件的一个高级小部件。使用它，您可以创建一个复杂的团队见面页面，如下图所示，类似于 DigitaSilk、Disruptive 和 Dentsu。

要详细了解如何使用该小部件，请访问Team Carousel 小部件文档。

如何使用 Elementor 比较表小部件创建比较表

比较表是一种令人印象深刻的方式，可以并排显示多个产品，突出显示其主要功能、图像、规格、价格等。它以有组织的方式清晰地呈现这些信息，帮助客户自信地做出明智的决定。

如果您的网站是使用 Elementor 构建的，您可能正在寻找使用它来创建比较表的方法。但不幸的是，Elementor 没有现成的比较表制作选项。但不用担心，HappyAddons 有一个有趣的比较表小部件可以帮助您克服这一限制。

如果您还不知道，HappyAddons 是一款流行的 Elementor。它有 130 多个小部件和数十种功能，可以进一步增强您的网站。本文将向您展示如何使用 HappyAddons 通过 Elementor 比较表小部件创建产品比较表。

为什么产品比较表对商业网站很重要

产品比较表为您的客户、用户和访问者提供了一种结构化的格式，以便他们研究产品信息以决定购买哪一款。这可以为他们节省大量时间，加快决策过程。

透明、全面的产品比较可以赢得客户的信任。这表明企业没有什么可隐瞒的，并且对自己的产品充满信心。下面是此类产品比较表的示例。

它主要用于电子商务网站，以分享不同的产品型号、图片、功能、价格、描述等。但是，网站所有者也会使用比较表，通过在同一个表下比较竞争对手的产品来证明他们的产品是最好的产品。

它可以帮助客户一眼就找到产品的优点和缺点。利用这种有效的比较表数据，客户可以在几分钟内选择正确的产品并节省宝贵的时间。

HappyAddons 如何帮助创建产品比较表

确实，您可以使用默认的 Gutenberg 表格块创建表格。但该块缺少创建引人入胜的表格所需的许多高级功能。例如，您无法向默认表格添加任何图像、CTA 按钮、项目符号列表等。

在这种情况下，您必须使用第三方插件，它能够克服这些限制。如果您的网站已经使用 Elementor 设计，为什么还要寻找 Gutenberg 插件？HappyAddons比较表小部件已准备好克服所有这些限制。

此外，这个 Elementor 比较表小部件完全免费。您可以将其与 HappyAddons 精简版一起使用。让我们看看这个小部件如何为您带来好处。

移动友好
涵盖大量预制模板库
在列中添加图像
多种支持图标
提供现成的桌子设计

如何使用 Elementor 比较表小部件创建比较表

现在是教程时间。但在开始教程之前，请确保您的网站上安装了以下插件。

安装并激活这些插件后，使用 Elementor 打开您想要的帖子或页面，然后开始执行以下步骤。您也可以从此 YouTube 教程中遵循此过程。

https://www.youtube.com/embed/aTZt34c_0wA?feature=oembed

我们在本视频中介绍的内容也在下面的讨论中进行了解释。继续阅读！

步骤 1：添加比较表小部件

在 Elementor 面板的搜索框中输入比较表。出现后，将其拖放到您选择的 Elementor 画布区域。

比较表内容区域

添加小部件后，您将获得默认表格设计，如下图所示。内容区域具有管理表格内容所需的设置。

你会在这里得到。

桌头
表格行
表格按钮
表设置

现在，我们将介绍每个设置，以便您可以轻松管理表格内容。

步骤 2：管理表头

表格头选项允许您通过单击添加项目按钮来添加表格的头部项目。您可以复制和删除项目。此外，您还可以轻松设置整个表格头内容的对齐方式（左、中和右）和图标位置（左和右）。

自定义表头项目

要自定义 Table Head 单个项目，您需要先打开一个项目。然后您可以添加标题，选择标题 HTML 标签，设置内容宽度，插入图标，设置图标颜色，并编写描述。

整个列宽定义为100%。在这里，您会注意到我们将列宽设置为 60(%)。这意味着特征列获得 60% 的空间，而其他两列获得20% 的空间。

您还可以编写描述。首先，打开“描述”选项。然后，您将使用文本编辑器编写描述。我们不需要添加描述，这就是我们没有启用它的原因。

添加固定标题

如果要添加粘性标题，您需要先激活粘性标题选项。然后，每当您向下滚动时，表格标题就会显示在顶部。

步骤 3：管理表格行

默认情况下，该小部件带有两行和两列。您可以添加新行并在其中插入所需的列。

要自定义行和列的内容，您需要打开一行或一列，然后根据您的目的更改内容。

添加新表行

要添加新的表格行，您需要先单击“添加项目”。

之后，您将获得插入行的选项。您必须选择行而不是列，并将内容类型设置为空白，因为它是一行。无需更改图像大小，因此请保持默认。

但是，您可以在标题、图标和图像列中添加三种类型的内容。

添加带标题的列

让我们向您展示如何在一行中添加一列。

首先，您需要通过单击添加项目按钮来添加一个项目。其次，选择列（行/列）并设置内容类型>标题。最后，您可以编写标题的标题。

撰写描述

您可以在标题下写一段描述。首先，显示描述选项。然后您将获得文本编辑器面板，您可以按照自己的方式写描述。

我们还添加了两列。这次我们使用了内容类型 > 图标。这是当前的表格视图。

注意：请记住，每当您向某一列添加内容时，内容都会从右到左显示。

步骤 4：管理表按钮

转到内容 > 表格按钮区域，然后您可以编写标题并插入按钮的链接。

自定义按钮

您可以添加自定义样式来装饰按钮。首先激活自定义样式。然后，您将获得添加新按钮样式的基本设置。

您可以为按钮添加文本颜色、背景颜色和框阴影。您还可以为悬停按钮添加不同的样式。

步骤5：表设置

表格设置区域可让您根据设备设置表格宽度。在平板电脑和移动设备视图中，表格项目将可滚动。这样，您就可以控制表格的响应能力。

第 6 步：样式对照表

样式区域具有自定义表头、表行和表按钮所需的样式选项。

使用此小部件，您可以设计这种类型的 Elementor 比较表来并排比较您的产品。

产品比较表的最终输出

设计完比较表的所有部分后，您将获得完美的外观，以有吸引力的方式展示您的产品，包括功能、图像和其他元素。以下是我们今天创建的表格-

使用不同的样式选项来制作与您的品牌相符的设计。您还可以查看比较表小部件的完整文档。

HappyAddons Pro 的高级比较表小部件介绍

我们的免费版比较表小部件在创建复杂的比较表方面有些受限。为了克服这个问题，我们推出了高级比较表小部件。它允许网页设计师创建高度可定制且有吸引力的比较表。无论您是比较产品、服务还是功能，此小部件都提供了广泛的功能来满足您的需求。

查看我们的演示 →

网页设计中比较表的重要性

比较表在网页设计中至关重要，因为它们可以帮助用户快速比较不同的选项并做出明智的决定。它们将复杂的信息分解为易于阅读的格式，从而增强用户体验和参与度。

高级 Elementor 比较表小部件概述

HappyAddons 的高级比较表小部件旨在创建详细且具有视觉吸引力的表格。其主要目的是使用户能够并排比较各种元素，提供清晰且结构化的布局。

主要特征

最多可添加 10 列
控制标题图标的位置
可自定义的折叠图标
响应式导航徽章
多样化的内容类型：文本、图标、图像、按钮、定价等
粘性标题

使用 Elementor 创建高级比较表

从这里开始，我们将指导您充分利用这个强大的小部件。

循序渐进指南

安装要求：确保您已经安装了 Elementor Free、HappyAddons Free 和 HappyAddons Pro。
添加小部件：在 Elementor 中搜索高级比较表小部件并将其拖到画布上。
基本设置：您将看到一个基本的 3 列定价表视图。从内容选项卡的常规设置中添加列（最多 10 列）。
添加内容：展开每列以添加数据。使用不同的单元格类型（如文本、图标、图像、按钮和定价字段）来填充表格。

定制选项

列控制：设置每个单元格的列宽和内容。
图标位置：调整标题图标的位置。
折叠选项：自定义折叠图标并切换子项的可见性。
工具提示：如果需要，为每个单元格添加工具提示。

设计和样式选项

探索高级比较表小部件提供的广泛设计和样式选项。自定义颜色、字体和背景，并确保响应式设计以便在任何设备上无缝查看。轻松创建视觉上吸引人且用户友好的比较表。

表格样式

自定义偶数、奇数和子背景颜色。
调整单元格项目的对齐方式。
设置徽章文本和自定义徽章样式。

配色方案和排版

样式标题、文本、描述、工具提示、图像、图标、定价、按钮和徽章。
使用全局颜色设置保持一致性。

响应式设计功能

为移动设备启用响应式导航徽章。
为移动视图设置响应式导航按钮样式。

高级比较表小部件的高级功能

利用动态内容集成、粘性标题动画和高级自定义选项，充分发挥高级比较表小部件的潜力。了解如何利用这些强大的功能增强您的表格，从而获得更具互动性和吸引力的用户体验。

动态内容集成（模板导入）

使用短代码和动态标签来整合动态内容。

导入 Elementor 模板以获得更精致的外观。

动画效果（粘性标题）

使标题具有粘性，以便在用户滚动时保持重要信息可见。

这是高级比较表小部件的视频教程。

https://www.youtube.com/embed/sJ_sGEJV8kQ?feature=oembed

阅读我们的完整文档 →

Elementor 比较表的优缺点

让我们深入了解高级比较表的优缺点。

优点

高度可定制且易于使用。
与 Elementor 无缝集成。
提供多种样式和设计选择。
粘性标题支持
工具提示或描述支持
使用 Elementor 动态标签功能支持短代码
可定制的徽章
可折叠的表格行
从 Elementor 编辑器面板创建表

限制

比较表中只有 10 列。
需要结构化数据以便于设置。
不支持动态 WooCommerce 产品。

用例和示例

了解如何利用高级比较表进行各种场景，包括产品比较、服务计划评估和功能分析，以增强您网站的用户体验和决策过程。

产品比较

创建详细的产品比较表，帮助客户做出明智的购买决定。以下是使用我们的高级比较表小部件创建的 Apple Watch 型号比较示例。

服务计划比较

比较不同的服务计划，突出每个层级的功能和优势。您可以使用此小部件获得此类高级定价表。

功能比较

展示您产品的各种特性或功能之间的差异和相似之处。以下是一个例子，

所有共享的演示都是使用我们的高级比较表小部件创建的。

不要等待立即购买 →

有关如何使用 Elementor 比较表小部件创建比较表的常见问题解答

希望您对本教程感到满意。在本节中，我们将回答一些有关 Elementor 比较表的在线常见问题。

HappyAddons 有多少个表格小部件？

HappyAddons 有四个表格小部件。它们是：1.

数据表
2.

高级数据表
3.

定价表
4.

比较表

我们应该在产品比较表上展示什么？

产品名称、图片、特点、价格、优缺点、评级、CTA 按钮和比较标准（尺寸、颜色和重量）

Elementor 有任何表格小部件吗？

是的，Elementor 有一个名为“价格表”的表格小部件。

我可以导入和导出使用 HappyAddons 创建的比较表吗？

是的。首先，您必须将表格保存为模板。然后，您可以导出模板并将其导入另一个 Elementor 网站。

注意：导入和导出是 Elementor 的一项功能。

HappyAddons 中是否有图表小部件可以显示统计数据？

是的，HappyAddons 有以下图表小部件。1.

条形图
2.

折线图
3.

饼图和猎犬图
4.

极地面积图
5.

雷达图

如何解决 Elementor 编辑器无法加载网站的问题

正在寻找网站上“Elementor 编辑器未加载”问题的解决方案？Elementor 编辑器可能因多种原因而无法加载。您的网络托管服务器问题可能会导致这种情况，缺乏 PHP 内存限制，其他插件冲突等等。

如果您在加载 Elementor 编辑器时遇到问题并想要摆脱它，以下指南将帮助您。

在这篇博客中，我们将向您展示解决 Elementor 编辑器无法加载问题的 7 种可能的方法。

让我们遵循本分步指南。

什么是 Elementor 无加载？

当您命令打开 Elementor Canvas 时，通常需要几秒钟才能打开它。但通常，画布永远不会出现。它会卡在加载页面上，如下图所示。这就是我们所说的 Elementor 不加载的情况。

这可能会让您感到非常沮丧。但请记住，您可能正在处理画布卡住的原因错误。解决此问题可能很耗时，但确实可以解决此问题。本文的下一部分将揭示解决方案。

修复 Elementor 编辑器未加载错误的 7 种可靠方法

以下是修复 Elementor 无法加载问题和错误的 7 种可能方法 –

启用切换编辑器加载器
检查其他插件冲突
更新 PHP 版本并增加 PHP 内存限制
更新 Elementor 最新版本
检查.htaccess 文件
增加 Apache 服务限制
更改当前主题

奖励：使用编码良好的 Elementor 插件可避免任何类型的问题

1. 启用 Switch Editor Loader

由于服务器配置冲突，Elementor 编辑器可能无法加载。Elementor 在其仪表板中为您提供了一个解决此问题的选项。您可以通过转到Elementor > 设置 > 高级区域来修复它。在这里，您需要启用切换编辑器加载器方法。

启用此选项后，再次检查问题是否解决。

2.检查其他插件冲突

Elementor 编辑器有时无法工作，这是由于您在 WordPress 网站上使用的其他插件冲突。这就是为什么您应该检查每个插件。您可以停用除 Elementor 之外的所有插件。然后逐个激活并仔细观察哪个插件导致错误。

如果您发现插件，请再次停用它并联系插件公司来解决问题。

确保所有插件保持最新。因为这是可能导致 Elementor 编辑器加载失败的另一个因素。

3.更新 PHP 版本并增加 PHP 内存限制

由于一些常见的 WordPress 错误（例如未更新服务器的 PHP 版本或增加 PHP 内存限制），您的 Elementor 小部件面板未加载。因此，每当您创建 WordPress 网站时，您都应该更新服务器的 PHP 版本并改善 PHP 内存限制。

要更新您的服务器 PHP 版本，首先登录您的 cPanel 帐户，然后找到选择 PHP 版本并打开它。

在以下页面中，您将获得更新最新 PHP 版本的选项。

您可以使用 cPanel 编辑wp-config.php文件来增加 PHP 内存限制。登录 cPanel 帐户后，转到 public_html->yourwerbsite->wp-config.php。

最后，您需要粘贴下面的代码。

define( 'WP_MEMORY_LIMIT', '256M' );

4.更新 Elementor 最新版本

这不是主要原因，但有时较低版本的 Elementor 插件可能会阻止编辑器加载。因此，最佳做法是使用最新版本的 Elementor，并在需要更新时定期更新。

您可以通过转到仪表板 > 插件 > 已安装的插件区域轻松更新 Elementor 插件。然后找到插件并单击立即更新链接即可完成工作。

5.检查.htaccess 文件

.htaccess（超文本访问）文件是 Apache 分布式服务器配置文件，用于设置特定目录的服务器配置。使用此文件，您可以在网站上进行必要的更改，例如错误处理、重定向到特定 URL、用户权限、授权等。

好吧，.htaccess 文件中的错误设置也会导致 Elementor 编辑器面板无法加载。您可以通过创建一个具有默认内容的新 .htaccess 文件来解决此问题。但请确保备份现有的 .htaccess 文件。

查看本指南并了解有关 .htaccess 文件的更多信息。

6.增加Apache服务限制

如果您的网站超出了 Apache 服务器的限制，您的 Elementor 编辑器可能无法正确加载。通过将以下代码添加到 .htaccess 文件，您可以增加 Elementor 网站的 Apache 服务器的限制并解决问题。

<IfModule mod_substitute.c>
SubstituteMaxLineLength 30m
</IfModule>
LimitRequestBody 9999999

7. 更改当前主题

与插件一样，您当前激活的主题也可能是 Elementor 加载问题的原因。如果您尝试其他方法但无法解决问题，那么您应该更改当前主题并激活默认的 WordPress 主题。

转到您的网站后端区域仪表板 > 外观 > 主题。然后更改您当前的主题。在这里，您会注意到我们使用了Neve主题，我们需要更改它并激活Twenty Twenty-One主题。

如果您计划使用 Elementor 创建网站，Elementor 建议使用 Hello Elementor 主题。

阅读有关Elementor Hello 主题的更多信息并了解推荐 Elementor 的原因。

奖励：使用编码良好的 Elementor 插件

如果您需要其他 Elementor 插件来设计您的网站，那么您应该选择最好的一个。因为有时，您的 Elementor 编辑器可能由于使用第三方插件小部件和功能而无法加载。

Happy Addons 是 Elementor 的合适插件之一，它帮助全球超过200,000 名用户建立了他们梦想的网站。这个功能强大的插件带有97 多个小部件和20 多个解决问题的功能。您还可以获得70 多个预制模板和400 多个现成的块，这些块可轻松在您的网站上实现。

为了提供更好的用户体验，Happy 最近改进了其设置向导。通过其仪表板 > 分析功能，您可以高效地管理所有免费和专业小部件。只需单击一下即可打开和关闭未使用的窗口小部件。

因此，请尝试这款代码干净、轻量级的 Elementor 插件，让您的网站像专业人士一样无错误。

12+ 个精心设计的超级菜单示例

在访问电子商务网站时，您可能在菜单栏中看到了很多类别。将鼠标悬停在特定类别上后，您将看到一个包含更多类别的大型下拉菜单。这称为超级菜单。

大型菜单是一种网络元素，用于引导用户浏览网站的下级子页面、类别和子类别。大多数大型网站（如电子商务、新闻和酒店）通常都有大型菜单。

大型菜单可改善您网站的用户体验设计，并让用户长时间停留。不过，您也可以将内容块、滑块、图像、图标、视频等添加到现代大型菜单中。

在这篇博客中，我们将向您展示十个不同网站的 10 个结构良好的超级菜单示例。

除此之外，我们还在本文中介绍了以下主题：

为什么以及何时应该使用超级菜单
10 个出色的超级菜单示例
超级菜单最佳实践
如何使用 Elementor 和 Happy Addons 在 WordPress 中创建超级菜单
关于 Mega Menus 的常见问题解答

让我们从基础开始。

为什么以及何时应该在您的网站上使用超级菜单

如果您的网站涉及许多类别和子类别，那么超级菜单将是设置网站导航的正确选择。

超级菜单不仅为您提供了显示基本网站元素的选项，还可以帮助您的网站用户找到所需的数据。因此，它可以改善用户体验。通常，您可以在电子商务、酒店、餐厅和其他处理网页内容的网站中看到超级菜单。

以下是您可能需要使用大型菜单的一些领域。您可以：

为您的电子商务网站创建一个超级菜单
为在线商店显示多种产品类别
使用超级菜单显示博客和杂志网站中的主题和类别
为您的大型企业网站添加超级菜单
设计一个大型菜单，在酒店网站上展示客房和住宿

了解如何在 WordPress 中创建菜单。

10 个出色的超级菜单示例

在本博客的这一部分，我们将展示优秀的超级菜单示例。在这里，我们选择了不同类型的网站。这最终有助于您了解超级菜单的不同用例。

让我们开始吧：

1. InVision

InVision是一个流行的网站，主要提供项目处理解决方案，将整个工作流系统集中起来。它有一个有组织的超级菜单，链接了许多重要的内部页面。在产品菜单项下，您会看到菜单有三个不同类别下的许多内部页面：产品概述、Freehand和For Teams。

产品菜单项还有一个显示产品更新的选项，您可以在其中找到 InVision 产品的更新。最终，这是一个理想的超级菜单示例，可帮助用户轻松浏览网站。

2. Dribbble

Dribbble是一个流行的市场，设计师可以在这里展示自己的作品。它有一个漂亮的超级菜单设计，可以改善用户体验。在像Marketplace这样的单个菜单项下，你会看到一个带有内部页面链接和页面简短描述的图标。

但是，此菜单有另一个区域显示具体类别。简而言之，这是另一个出色的大型菜单示例。

3. weDevs

weDevs是一家流行的基于 WordPress 产品的公司，开发了一些很棒的产品，包括Dokan Multivendor Marketplace 插件。它带有一个非常干净和简单的超级菜单。您会注意到，在“产品”菜单项下，有多个产品展示，并带有产品徽标和简短的标语。

此外，它还提供了查看所有产品的链接，可转到产品页面。它响应迅速，因此您可以在小型设备上轻松使用它。

4.阿迪达斯

阿迪达斯是世界上最受欢迎的运动品牌之一。如果你访问阿迪达斯官方网站并进入菜单区，你会看到他们的超级菜单。它组织得很好。

在3 STRIPE LIFE菜单项下，有 6 个类别，例如“新品”、“合作”、“我们的世界”、“体育”、“原创”和“收藏”。每个类别都有多个内部页面，并以图片开头。

5.菲格玛

Figma是一款流行的设计工具。在他们的网站上，他们使用方便的超级菜单来显示其基本网站内容。他们的超级菜单与其他菜单不同。

他们在这里使用信息图表来改善用户体验。此外，他们使用实线边框来分隔菜单部分。

6. 体位法

Asana是一个著名的网络和移动工作管理平台，用于管理团队及其工作。这个受欢迎的网站有一个大型的超级菜单。它显示了许多必要的网站内容。

在Resouces主菜单项下，超级菜单使用两个类别（ LEARN和CONNECT）显示二维菜单内容。这两个类别都有许多系统列出的内部页面。但是，它还有一个FEATURED READS选项来展示网站的特色博客文章。

7. Bobbi Brown

Bobbi Brown是现代超级菜单的另一个很好的例子。这是一家主要销售化妆品的在线商店。该网站的超级菜单设计非常简单，但令人眼花缭乱。

它通过图片和类别名称显示化妆品。它还注重响应式设计，以便任何人都可以使用手机和平板电脑访问大型菜单。

8. eBay

你们大多数人都熟悉eBay，它是世界上最大的电子商务品牌之一。这个顶级电子商务网站拥有丰富的超级菜单。每个主菜单项下都有一个超级菜单。重点关注时尚菜单。

在此菜单项下，有一个大型超级菜单，用于展示最受欢迎的类别和更多类别。这两个类别有大量子类别，也列为菜单项。但是，它还显示了吸引客户注意力的特色产品。

阅读：eBay：成为全球电子商务业务领导者的神奇旅程

9. 美食网

Food Network是一个餐厅网站，它有一个超级菜单来显示餐厅的菜单。在“食谱”菜单项下，它有一个超级菜单，其中分享了“每日食谱”和“热门食谱”。

他们的超级菜单呈现方式非常具有标志性。每个食谱都有一张吸引顾客的图片。但是，它还有一个显示其他食谱列表的选项和一个查看所有食谱的按钮。

了解有关如何使用 WordPress 和 Elementor 创建餐厅网站的更多信息。

10. Evernote

Evernote是一款专门用于项目管理、组织、记笔记、存档和任务管理的工具。该网站有一个令人惊叹的超级菜单来展示其宝贵的功能。

这是一个漂亮的大型菜单，带有独特的绿色图标、功能名称和简短的标语。此外，它还有一个查看所有功能链接，可以查看 Evernote 的所有功能。

11. Canva

Canva是一款基于云的流行图形设计工具。实际上，对于无数想要在短时间内完成设计且设计技能较低的用户来说，它是救星。Canva 拥有全面的超级菜单，因为它涵盖了许多功能、选项和页面。

Canva 超级菜单可引导您设计画布、现成模板、定价计划和教育内容。它还在主菜单下包含子类别。

12. 维斯梅

Visme是另一个基于云的图形设计平台，可替代 Canva。在这里，您也会找到无数的设计选项以及大量现成的模板，您只需很少的技能即可在短时间内完成设计。

Visme 拥有美观且功能丰富的超级菜单，涵盖大量选项。它包含许多类别和子类别，可引导您找到网站的所有功能、功能和页面。其超级菜单在移动设备和较小的屏幕尺寸上也能完美运行。

13. Fiverr

Fiverr是雇主外包工作的知名平台。数百万自由职业者在那里上传他们的工作，雇主从中寻找他们想要的自由职业者并完成项目。自由职业者现在可以在 Fiverr 上销售各种各样的服务，尽管一开始只有少数几种。

为了给所有这些选项留出空间，Fiverr 必须创建一个大型超级菜单。在这个超级菜单中，您可以找到几乎所有类型的自由职业工作和服务。雇主可以使用这个超级菜单查找各个自由职业者的特定工作并雇用他们。

14.苹果

你几乎找不到一个从未听说过苹果的人。这是一家美国跨国科技公司。它为客户开发和销售软件和电子产品。苹果还维护着一个大型菜单来展示他们的产品、使命、愿景和有价值的信息。

Apple 的超级菜单很简单。虽然不像上面提到的其他菜单那样华丽，但它的超级菜单足以传递网站所需的信息和导航。

5+ 大型菜单最佳实践

根据您的需求，您可以为您的网站创建一个超级菜单。但请确保您的超级菜单设计精良、响应迅速且易于使用。为了使您的超级菜单完美无缺，您应该遵循以下提示。

保持大型菜单简单易用，方便用户浏览
专注于响应式设计
尝试添加图标/图像以使其更具吸引力
使用单一链接颜色
避免链接太近
确保所有菜单项都可同时显示，并跳过滚动
使用一个触发选项：悬停或单击

奖励：如何使用 Elementor 和 Happy Addons 在 WordPress 中创建超级菜单

过去，为 WordPress 网站创建大型菜单是一场灾难。您需要编写自定义代码、安装第三方插件，有时还需要聘请专家才能正确完成这项工作。

但现在的情况有所不同。您可以使用 Elementor 和 Happy Addons 高效地设计自己的网站超级菜单。

Happy Addons 是流行且快速增长的 Elementor 插件之一，它带有一个非凡的小部件Happy Mega Menu。使用这个高级小部件，您可以实时创建超级菜单。这个拖放小部件允许您将图标、徽章、图像和已保存的 Elementor 模板添加到超级菜单中。

但是，它也专注于响应式设计，因此用户可以使用移动设备或其他小型设备轻松访问您的网站超级菜单。

使用Happy Mega Menu 小部件，您可以创建一个大型超级菜单，如上面的示例 weDevs、Adidas、Dribbble、InVision 等。

还在等什么？让我们观看这个分步视频教程，学习如何在 WordPress 中创建超级菜单。

https://www.youtube.com/embed/7qmCZFsDkmg?feature=oembed

阅读 Happy Mega Menu 文档并了解如何正确使用此小部件。

关于 Mega Menus 的常见问题解答

人们经常在网上询问有关超级菜单的许多问题。在这里，我们回答了一些常见问题，这些问题可能有助于您了解有关超级菜单的更多信息。

1. 什么是超级菜单？

超级菜单是一种大型下拉导航菜单，用于展示网站大量的内部页面链接。它不同于默认的 WordPress 子菜单或下拉菜单。在超级菜单中，您可以添加图标、图像和其他高级功能来装饰您的网站导航区域。

它允许您的网站访问者使用主菜单访问您网站的最深层部分。但是，大型菜单可以提高网站的可用性，帮助推动更多销售，提高转化率，并帮助您的访问者更长时间地浏览您的网站。

2. 如何为我的 WordPress 网站创建超级菜单？

您可以使用超级菜单插件为您的网站创建超级菜单。但如果您是 Elementor 用户，您可以借助 Happy Addons 的 Happy Mega Menu 小部件轻松创建超级菜单。我们已经讨论过这个问题。请关注我们博客的上述部分。

3. 超级菜单对于 SEO 来说是好是坏？

基本上，网站超级菜单不会影响您的网站排名。但它有助于改善您的网站导航。这就是为什么你可以说它对 SEO 有好处。

另一方面，大型菜单的代码主要在显示到您的网站时首先加载。由于大型菜单列出了许多内部页面或其他必要的网页元素，因此会降低您的网站速度。

因此，这对 SEO 不利，因为 Google 会测量页面加载时间来为您的网站 SEO 进行评分。

4. 我应该使用超级菜单吗？

这取决于您的目的。通常，大型菜单用于大型网站，例如电子商务、博客、杂志、新闻等。如果您有这样的网站或大型内容网站，那么您应该使用大型菜单。

5.Mega Menu 可以与 Elementor 配合使用吗？

是的，超级菜单与 Elementor 完全兼容。

如何修复 WordPress 致命错误 – 您应该尝试的 8 种行之有效的方法

WordPress 现在是数百万用户创建网站的首选。其用户友好的界面和可自定义的功能彻底改变了无代码 Web 开发。但与任何其他技术一样，WordPress 也难免会出现问题和错误。

您的 WordPress 网站也可能面临致命错误，这可能会让您感到沮丧。但与任何问题一样，这些致命错误也有解决方案。在这篇博文中，我们将探讨有关此问题的一切，并逐步描述如何修复 WordPress 致命错误。让我们开始吧。

什么是 WordPress 致命错误？

致命错误是一种危急情况，即您的网站出现严重问题，导致其无法正常运行。发生致命错误时，通常会导致死机白屏。这意味着您的网站将变成空白，您无法访问其管理仪表板。

您的网站可能会因各种因素而发生致命错误。例如，不兼容的主题或插件、编码错误、不同配置设置之间的冲突、WordPress 核心文件的问题等。除非正确检查这些错误，否则您可能会丢失所有数据。

常见的 WordPress 致命错误有哪些？

WordPress 网站上通常会发生各种类型的错误。这里，我们列出了 WordPress 网站上可能发生的最常见的致命错误。

死机白屏

白屏死机是由不兼容的插件或主题等因素造成的。这将导致您的网站出现空白屏幕。

超出最大执行时间

当您的 PHP 脚本执行任何命令花费的时间过长时，您就会遇到此错误。当执行时间超过服务器之前设置的时间时，就会发生这种情况。

插件冲突

当两个或多个插件的代码不兼容或存在功能问题时，您的网站将出现致命错误。您必须识别冲突的插件才能解决此问题。

服务器资源不足

服务器资源不足（例如 PHP 内存或 CPU 资源有限）可能会导致致命错误。

数据库连接错误

由于数据库凭据不正确，您的 WordPress 网站无法与数据库建立连接。

语法错误

当代码语法存在错误时，例如缺少分号、括号等，您的网站肯定会出现语法错误。

文件权限问题

如果服务器上的文件和目录的权限不正确，则可能导致致命的 WordPress 错误。本文介绍了如何修复文件权限问题。

文件丢失或损坏

丢失或损坏的文件可能会导致致命错误。通过从备份中恢复新文件或重新安装 WordPress，您可以解决问题。

如何修复 WordPress 致命错误？分步指南

您已经知道了导致 WordPress 网站发生致命错误的许多潜在原因。现在我们将列出并解释几种可以修复 WordPress 致命错误的有效策略。让我们来探索一下。

步骤 01：停用所有插件

有时，插件之间可能会发生冲突，从而导致您的网站出现错误。因此，停用插件应该是解决错误的必要第一步。

转到插件 > 已安装的插件。停用所有插件。如果问题得到解决，则可以认为问题出在插件上。

现在，开始逐个安装插件。安装有问题的插件后，问题会立即再次出现。因此，您可以检测到有问题的插件。

解决方案：您现在需要做的是联系插件开发人员并告知他们此问题。除非他们能解决问题，否则请切换到另一个插件。

步骤 02：切换到默认主题

与插件一样，主题也经常会出现错误问题。有时，您的主题可能会与某个插件冲突。因此，查找此错误的有效方法是将您的网站切换到默认主题，同时停用所有插件。

接下来，安装主题。然后开始逐个安装插件。安装有问题的插件后，冲突会立即重新出现。

解决方案：联系问题主题的开发者。同样，除非他们能解决问题，否则最好换个主题。

步骤 03：增加 PHP 内存限制

PHP 内存限制不足会导致致命错误。有多种方法可以增加 PHP 内存限制。最简单的方法之一是通过cPanel 中的MultiPHP INI 编辑器增加内存限制。

打开您的 cPanel。在软件部分下找到 MultiPHP INI 编辑器。打开编辑器。

选择您想要配置其 PHP INI 设置的域。

来到upload_max_filesize选项。设置新的最大文件上传大小。向下滚动页面，到达最后。点击应用按钮。

因此，您可以增加 PHP 内存限制。如果此方法在您的 cPanel 上不起作用，请按照有关如何增加 PHP 内存限制的指南探索更多方法。

步骤04：清除缓存文件

缓存文件是存储在用户浏览器服务器中的网络数据的临时副本。它们有助于提高页面加载速度，因为页面不需要每次请求时都从头加载。如果它们错误地包含服务器中的任何错误文件，它可能会显示致命错误，直到删除这些文件。

清除缓存文件非常简单。安装缓存插件。我们安装了 WP Fastest Cache 插件来解释这一部分。如果您没有该插件，请在您的网站上安装该插件。

转到WP Fastest Cache > 删除缓存。您会看到两个按钮。单击您想要的按钮以清除缓存文件。

步骤 05：删除并重新添加核心 WordPress 文件

您的问题现在应该已经解决了。如果没有，您可以尝试删除并重新添加 WordPress 核心文件。

* 保留备份

在执行此步骤之前，请确保备份了整个网站及其数据库。登录到您的 cPanel。转到备份选项并单击它。

点击下载完整帐户备份按钮。这将下载您网站的备份。

* 删除旧的 WordPress 文件

转到cPanel 上的文件管理器。

您的 cPanel 可能托管多个网站。因此，选择要删除并重新添加其核心 WordPress 文件的特定域。

输入域名后，选择除 wp-content和wp-config之外的所有文件。选择所有文件后，点击“删除”按钮。

勾选复选框以永久删除所有文件。按确认按钮。

* 下载 WordPress

前往下载 WordPress。点击下图所示的标记按钮下载 WordPress 文件。

* 上传 WordPress 文件

单击上传按钮。

选择 WordPress 文件。

文件将在几秒钟内上传。完成后，单击选项“返回”/home/…….com。

* 在文件管理器中提取 WordPress Zip 文件

右键单击 Zip 文件。将打开一个列表。在列表中选择“提取”选项。

解压后的文件将保存到 WordPress 文件夹中。删除 Zip 文件，因为不需要它。然后，转到 WordPress 文件夹。

选择除wp-content和wp-config之外的所有解压文件。因为 wp-content 和 wp-config 已经在主文件夹中可用。

之后，点击移动选项。输入要移动文件的文件路径。只需将其重命名为您的域名即可。最后，点击移动文件按钮。

所有文件都将移动到您的主域文件夹。删除 WordPress 文件夹，因为不再需要它。

因此，您可以删除并重新添加核心 WordPress 文件。

步骤 06：使用错误检查插件

WordPress.org 上有许多错误监控插件，如果它们发现您的网站存在致命问题，它们会立即通知您。通过安装任何这些插件，您可以收集有关错误及其解决方法的更多信息。

如果您愿意，即使网站出现错误，您也可以安装任何这些插件。但很多时候，问题发生后也可能无法再安装任何插件。因此，为了谨慎起见，最好事先安装任何此类插件。

其中一些插件是：

步骤 07：扫描并从您的网站中删除恶意软件

恶意软件是指旨在利用您的网站，使其易受安全威胁的恶意代码或软件。通常，网络黑客会将恶意软件文件和代码注入您网站的数据库、文件和插件/主题中。

他们这样做是为了未经授权访问您的网站，窃取敏感信息。每当 Google 意识到某个网站遭到黑客攻击时，它就会通过搜索控制台发送信号。此外，您的网站也会停止运行。

我们已经就该主题发表了一篇详细的文章。阅读这篇文章，了解如何从 WordPress 网站中删除恶意软件。

步骤 08：连接您的托管服务提供商

如果上述所有步骤都无法解决您的致命错误，建议您联系您的托管服务提供商。如果您订阅了任何知名的托管服务提供商，他们一定会为您提供所有类型的托管和维护相关帮助。

特别是，他们是解决可能导致您的网站出现致命错误的服务器相关问题的专家。

最后的注释！

任何网站都可能出现问题和错误。这些问题甚至经常发生在全球知名和大型网站上。但他们拥有一支专业的技术团队，因此他们可以快速自行克服所有问题。

如何在 Elementor 中为网页设计添加重叠背景

Elementor 是一款领先的 WordPress 页面构建器插件，它使网页设计变得前所未有的简单。其突出的功能之一是背景覆盖选项。通过正确利用该功能，您可以将网站的吸引力和美感提升到一个新的水平。

Elementor 为您提供了多种背景叠加选项。在本文中，我们将向您展示每个选项的分步指南。那么，让我们开始了解如何在 Elementor 中添加背景叠加以进行网页设计的文章。

什么是 Elementor 背景覆盖？

背景叠加层是半透明的图层，可添加到现有背景图像、图案或颜色之上。您可以使用不同的颜色、不透明度、渐变甚至图案自定义叠加层，以创建令人惊艳的视觉效果。

背景叠加是 Elementor 插件的一项核心功能，内置于插件中。免费版和付费版均可使用。当使用低质量图像或在任何背景顶部展示文本时，此功能特别有用。

Elementor 背景覆盖的类型

您可以在 Elementor 中添加三种类型的背景覆盖。它们是：

1. 纯色覆盖：它只是向网页部分或元素添加纯色覆盖。您可以通过选择纯色及其不透明度级别来自定义此覆盖。

2. 渐变色叠加：渐变允许您向任何网页部分或元素的背景添加多色叠加效果。希望您已经知道什么是渐变。或者等一下，我们将在本文后面讨论它。

3. 图像叠加：此功能可让您在图像上应用纯色、纹理或图案叠加，以增强其吸引力。

特别说明关于 Elementor 背景覆盖

Elementor 中的背景覆盖选项允许您仅将覆盖添加到小部件背景，而不是内容背景。

您需要一个额外的插件（例如 HappyAddons）才能将叠加效果直接添加到内容背景。

因此，如果您的网站上同时安装了 Elementor 和 HappyAddons，则可以在需要的地方使用合适的背景覆盖选项。让我们探索这些方法。

方法一：如何在 Elementor 中向小部件背景添加覆盖

正如我们已经说过的，您可以在 Elementor 中添加三种类型的背景覆盖。现在我们将向您展示如何将所有这些类型的背景覆盖添加到 Elementor 小部件。

类型 01：向 Elementor 小部件添加纯色背景覆盖

希望您的部分和内容已准备就绪。单击整个部分的“编辑容器”图标。

转到样式选项卡。您将获得两个选项：背景和背景覆盖。使用这两个选项，您可以将背景覆盖添加到 Elementor。

例如，打开“背景”。选择“画笔”图标。下面，您将看到“颜色”选项，通过它可以为背景添加纯色。

您可以看到我们已经为小部件部分的背景覆盖选择了一种颜色。

类型 02：向 Elementor 小部件添加渐变色背景叠加

再次选择该小部件。转到“样式”选项卡。展开“背景”选项。

选择背景类型旁边的渐变选项。您将看到其下方出现更多颜色选项。

现在，选择主色和辅色来创建渐变调色板。您将看到颜色作为背景叠加层显示在小部件上。

因此，您可以为小部件背景创建渐变色背景叠加层。渐变中还有许多其他选项。希望您可以自己探索和使用它们。

类型 03：向 Elementor 小部件添加图像背景覆盖

对于图像叠加，您可以将图像和纯色领子组合使用。通过使用纯色与图像相结合，您可以创建完美的对比，以便上面的内容更清晰可见。让我们看看如何做到这一点。

转到样式选项卡。展开背景覆盖选项。单击图像选项。您可以从本地驱动器或媒体库中选择和添加图像。

您可以看到我们已将图像添加到背景叠加层。接下来，选择合适的位置，使其与内容完美契合。

展开“背景”选项。接下来，选择与图像相配的合适纯色。您会看到图像上已添加一层。

转到背景覆盖选项。

向下滚动 Elementor 面板进入混合模式。单击右侧的图标。它将打开混合模式列表。

通过浏览列表中的所有混合风格来选择您喜欢的风格。您将在图像上看到效果。

您可以看到背景覆盖和文本颜色几乎相似。这就是为什么我们更改了文本颜色以在它们之间形成对比，从而使文本具有高度可读性。

因此，您可以将背景覆盖添加到 Elementor 小部件的背景。

方法二：如何在 Elementor 中向内容背景添加覆盖

将内容叠加在背景上的过程与上面的方法完全相同。这是HappyAddons 插件的免费功能。如果你还不太了解该插件，请探索一下HappyAddons 是什么。

简而言之，HappyAddons是 Elementor 插件的一个令人兴奋的插件。它带有 120 多个附加小部件和 20 多个功能。使用它们，您可以克服 Elementor 的限制并为您的网站添加更多令人兴奋的功能。

那么，HappyAddons 中的背景覆盖选项在哪里？选择内容小部件。转到高级选项卡。您将在此选项卡下看到背景和背景覆盖选项。

可以看到这两个选项的名字和 Elementor 的两个选项的名字一模一样，而且它们的工作流程也是一样的，下面我们来探究一下。

类型 01：为添加的内容添加纯色背景叠加

选择内容小部件。转到Elementor 面板上的“高级”选项卡。展开“背景”选项。

选择纯色。您会看到该颜色已应用于内容的背景。

类型02：为添加的内容添加渐变色背景叠加

与上述方法类似，在“背景”下选择“渐变”选项。设置主色和次色。调色板将显示在 Elementor 画布上的内容后面。

类型 03：为添加的内容添加图像背景覆盖

选择内容小部件。转到“高级”选项卡。

展开背景覆盖选项。单击图像区域。

您将能够按照上述方法从本地驱动器或媒体库添加图像。希望您也可以在这里这样做。

现在文本颜色已更改，以使文本内容在背景上突出。希望这能让内容变得更好，更易读。

因此，您可以在 Elementor 中为您的内容添加图像背景覆盖。

注意： Elementor 插件通常会使网站速度稍微变慢。但有很多方法可以加快此类网站的速度。探索如何优化网站速度。

最后的注释！

如今，添加背景覆盖已成为大多数专业网站设计师的常见做法。这是一个简单易用的网页设计功能，但功能强大，可让您的网页部分和内容变得华丽而令人兴奋。

几年前，使用 HTML 和 CSS 语言创建背景覆盖确实非常困难。但 Elementor 使其变得灵活，这一点在 HappyAddons 插件中得到了进一步的提升。希望通过关注这篇博文，您现在能够在您的网站上创建引人入胜的背景和内容覆盖。