Category: Elementor

网站速度对于用户体验、搜索引擎排名以及整体网站性能都重要。Elementor 搭建的WordPress 网站速度的优化能让用户享受流畅的浏览体验。本文将详细介绍一系列优化 Elementor 网站速度的方法。

Elementor 速度优化的重要性

Elementor 网站速度的重要性体现在多个方面。缓慢的网站会导致用户不耐烦，增加跳出率。搜索引擎将网站速度视为重要的排名因素，速度较慢的网站在搜索结果中的排名可能会更低。因此，优化 Elementor 速度对于确保积极的用户体验和提高搜索引擎可见性很重要。

优化 Elementor 速度的方法

1. 使用实验性功能加速 Elementor

启用Elementor的实验性功能是加快网站速度的有效方法。在 WordPress 仪表板中进行设置：

• 交换选项：转到 Elementor > 设置，单击高级，向下滚动到 Google 字体加载选项选择交换。可以使浏览器在加载请求字体时显示后备字体，如 Arial 或 Times New Roman，待请求字体加载完成后再交换。

• 加载 Font Awesome 4 支持：在加载 Font Awesome 4 支持选项中选择否。因为 Elementor 默认已包含 Font Awesome 5 图标，且 Font Awesome 4 可能不再更新维护，选择否可避免增加额外资源影响加载时间。

• 激活实验性功能：转到 功能 部分，向下滚动到稳定功能部分激活优化的 DOM 输出、改进的资产加载、改进的 CSS 加载。
  • 优化的 DOM 输出：通过减少 Elementor HTML 中包装元素的数量，提高性能。
  • 改进的资源加载：仅在页面需要时加载部分基础设施 JS 代码，显著减少 JS 文件大小。
  • 改进的 CSS 加载：添加条件和内联 CSS 加载实验，减少页面生成的未使用 CSS 数量，加快页面加载速度。

2. 优化 Elementor 设计

减少部分、小部件和列的使用。页面大小增加会导致网站运行效率低下，尽量为每个对象使用单个部分和行，并利用边距和填充来构造元素。例如，在设计布局时，避免使用过多的小部件和列。

3. 选择可靠的托管服务提供商

共享托管或缓慢的服务器会降低网站速度，可以选择我们的托管服务，毫无压力。

4. 使用轻量级主题提升性能

选择快速轻量级的主题，如 Nexter 等主题，加载时间大大缩短。这种主题不仅速度快，还高度可定制，能满足特定需求和偏好。

5. 删除不必要的主题和插件

删除未使用的主题和插件可以减少网站大小，加快加载时间。但要注意一些插件或自定义可能需要部分主题和插件，在删除前最好创建网站备份。

6. 保持插件更新至最新版本

插件更新通常包含错误修复、安全补丁和性能改进，能提高网站速度和稳定性。过时的插件可能会带来安全风险，黑客会利用其漏洞窃取用户数据。可使用安全插件，如最佳 WordPress 安全插件。

7. 通过优化图像尺寸缩短加载时间

优化图像大小可通过多种技术实现，如调整图像尺寸、压缩图像、延迟加载等。使用 Smush 和 ShortPixel 等插件可以帮助进行图像优化。例如，将图像调整为适合其用途的正确尺寸，压缩图像在不牺牲质量的前提下减小文件大小，延迟加载可在需要时加载图像。

8. 优化 JavaScript 和 CSS

优化不佳的 JavaScript 和 CSS 代码会降低 Elementor 网站速度。使用 Autoptimize 插件，在插件设置中进行如下配置：

• JavaScript 选项：勾选 “优化 JavaScript 代码？” 和 “聚合 JS 文件？”。

• CSS 选项：勾选 “优化 CSS 代码？”、“聚合 CSS 文件？” 和 “聚合内联 CSS？”。

9. 利用页面缓存提高网站速度

使用页面缓存插件，如 WP Rocket、Flyingpress、NitroPack等，将网站页面副本存储在缓存中，快速检索并提供给访问者，减少服务器负载，提高网站性能。

10. 利用内容分发网络（CDN）

CDN 可将网站内容分发到更靠近访问者的服务器，加快加载速度。Cloudflare 是常用的 CDN，也可使用 BunnyCDN，还可同时使用两个 CDN 进一步提高性能。

11. 使用 Gzip 压缩加速加载时间

Gzip 压缩可在发送网站文件到访问者浏览器前对其进行压缩，减小文件大小，加快加载速度。使用 WP Rocket 插件启用 Gzip 压缩，可通过运行 Gzip 压缩测试来检查其效果。

12. 通过数据库优化提高性能

随着时间推移，网站数据库可能会充斥不必要的数据，如旧帖子修订、垃圾评论和未使用表格。使用 WP Optimize 和 WP Rocket 等插件优化数据库，在优化前先备份网站。以 WP Optimize 插件为例，在 WP 管理仪表板导航至 WP Optimize > 数据库，在优化选项卡中选择重要优化，点击 “运行所有选定的优化”，还可在设置选项卡中启用 “计划清理和优化”。

13. 通过评论优化提高性能

限制帖子评论可减少加载时间，可在 WordPress 设置的 讨论 选项中勾选 “允许人们提交评论” 来禁用评论。若评论部分对用户体验重要，可禁用用户头像或使用具有延迟加载功能的第三方评论插件。

14. 限制存档页面上显示的帖子

减少存档页面上显示的帖子数量，可在阅读设置中更改显示帖子数量。这样可加快 Elementor 网站速度，提高网站性能。

15. 使用博客文章摘录加速主页加载

在主页使用博客文章摘要，可减少加载内容，在相同空间显示更多帖子。在阅读设置中选择摘要而非全文，加快主页加载速度。

16. 增加 PHP 内存限制

Elementor 在 PHP 内存约为 128MB 到 256MB 时性能最佳。可通过编辑 wp-config.php 文件来增加内存限制，例如添加代码：define(‘WP_MEMORY_LIMIT’, ‘256M’);

17. 保持 PHP 版本更新

确保网站运行最新的 PHP 版本，可在 WP 管理仪表板的工具选项卡的站点健康部分检查 PHP 版本，并从托管平台仪表板更新。

18. 实现脚本和样式表的异步加载

默认情况下，WordPress 等待脚本或样式表完全加载后再呈现网页。而异步加载可在网页渲染时加载脚本和样式表，提高网站速度。可使用插件或手动向<script>标签添加 “async” 属性来实现异步加载。

19. 防止热链接优化服务器资源

防止热链接（是指未经授权，直接链接或引用其他网站的资源到自己的网站或页面），可通过在 Wordfence Security 防火墙设置中禁用图片热链接、使用带有热链接保护的 CDN、禁用网站右键单击功能等方法。例如，轻量级主题 Nexter 带有右键单击保护功能，可防止访问者通过右键菜单获取媒体链接。

20. 删除未使用的 CSS

使用 WP Rocket 和 Perfmatters 等插件删除未使用的 CSS 文件。通过在浏览器检查选项卡运行覆盖率报告识别未使用的 CSS，将 Elementor CSS 文件保留在安全列表中。

21. 延迟加载 JavaScript 文件

使用 WP Rocket 和 Perfmatters 等插件延迟加载 JavaScript 文件，在末尾加载 JavaScript 文件。从延迟脚本列表中排除 Elementor JS 文件，确保 Elementor 正常使用。

22. 使用轻量级 CSS 代码优化页眉 / 页脚

Elementor 模板的代码不如自定义 CSS 轻量，使用自定义 CSS 代码添加页眉 / 页脚可提高网站速度。

23. 使用 CSS 动画打造以性能为导向的网站

使用 CSS 动画代替 JavaScript，实现延迟加载，并确保仅在需要的地方使用动画。例如，使用 CSS 转换和过渡实现硬件加速，提高性能。

总结

通过启用优化的DOM输出、精简CSS和JavaScript、优化图像、使用轻量级主题和可靠的CDN等方法，可以显著加快Elementor页面加载速度。定期清理数据库、删除未使用的插件与CSS文件、合理设置缓存和延迟加载，能够进一步提升网站运行效率。

在网页设计中，悬停效果是一种非常受欢迎的动态效果，可以在用户将鼠标移到图像或按钮上时显示。波浪悬停效果是一种柔和且吸引人的动画效果，它模拟了波浪的起伏，使得图片在悬停时呈现出类似水波的动态效果。本文将带你一步步学习如何在 Elementor 图库中实现这一效果。

准备工作

要在 Elementor 中创建波浪悬停效果，您需要以下条件：

1. Elementor 插件：确保已经安装并激活 Elementor 插件。如果需要更多高级样式，可以使用 Elementor Pro，但本教程可以在免费版 Elementor 中实现。
2. 自定义 CSS：波浪悬停效果需要一些自定义 CSS，因此，确保你的主题或 Elementor 版本允许自定义 CSS。如果使用 Elementor Pro，可以直接在元素的自定义 CSS 部分添加代码。

创建波浪悬停效果的步骤

步骤 1：添加 Elementor 图库小工具

1. 打开 WordPress 仪表板，导航到 页面 > 添加新页面，或者编辑现有页面。
2. 进入 Elementor 编辑器，在左侧工具栏中拖动 图库 小工具（Gallery）到页面中，然后上传希望展示的图片。

3. 配置图库的布局，以适应你的设计需求。

步骤 2：为图像添加类名

为了方便在特定图像上应用波浪效果，我们需要为图库中的图像添加一个自定义类名。这样可以让 CSS 代码仅作用于这些图像。

1. 选择图库小工具，点击 高级 标签。

2. 在 CSS 类 字段中，输入自定义类名，例如 wave-hover。

步骤 3：添加自定义 CSS 代码

接下来，我们将通过 CSS 来实现波浪悬停效果。以下是 CSS 代码，可以将其添加到页面的自定义 CSS 部分，或将其添加到主题的自定义 CSS 中（如果你的 Elementor 不支持直接添加 CSS）。

/* 基础样式：设置悬停效果的图像 */
.wave-hover img {
  display: block; /* 确保图像的动画效果正常 */
  transition: transform 0.4s ease-in-out; /* 添加平滑过渡效果 */
  will-change: transform; /* 优化性能，告知浏览器将更改transform */
}

/* 波浪悬停效果 */
.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
  animation: wave 0.6s ease-in-out infinite; /* 应用动画 */
}

/* 定义波浪动画 */
@keyframes wave {
  0%, 100% {
    transform: translateY(-10px) rotate(2deg); /* 起点和终点一致，平滑循环 */
  }
  25% {
    transform: translateY(-15px) rotate(-2deg); /* 图像上移，稍微反转 */
  }
  50% {
    transform: translateY(0px) rotate(2deg); /* 图像回到初始旋转 */
  }
  75% {
    transform: translateY(-5px) rotate(-1deg); /* 图像下移并微微旋转 */
  }
}

代码说明：

• .wave-hover img：这是默认状态下的样式，设置了图像的过渡效果，使得在悬停时能够平滑地过渡到波浪效果。
• .wave-hover img:hover：当鼠标悬停在图片上时，图片会稍微上移、旋转并放大，并开始波浪动画。
• @keyframes wave：定义了波浪动画的关键帧，使图像在悬停时上下起伏，产生波浪效果。

步骤 4：保存并预览页面

完成以上步骤后，保存页面并点击预览。在预览页面中，将看到，当鼠标悬停在图片上时，图像会产生波浪般的上下起伏效果，为用户带来独特的动态视觉体验。

可选步骤：调整效果参数

可以根据设计需求微调效果参数：

• 波浪幅度：通过调整 translateY() 值可以控制波浪效果的幅度。更大的数值会产生更明显的波动。
• 动画速度：调整 animation 属性中的持续时间（例如 0.6s）可以控制波浪效果的速度。
• 旋转角度：改变 rotate() 的值可调整图像的旋转角度。

进一步优化：添加阴影效果

为了增加效果的深度，还可以为悬停效果添加阴影，使图像在波动时显得更加立体。

.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
  animation: wave 0.6s ease-in-out infinite;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
}

总结

在网页设计中，悬停效果是一种受欢迎的动态效果，能够在用户将鼠标移到图像或按钮上时展示互动性。波浪悬停效果模拟了波浪的起伏，使图像在悬停时呈现出水波般的动态效果。本文介绍了如何在 Elementor 图库中实现这一效果，包括设置图像库、添加自定义类名、编写 CSS 波浪动画代码，以及根据需求调整效果的幅度、速度和阴影，使得网站更加生动、吸引用户注意。

本文将介绍如何结合第三方插件和 Elementor 创建动态表格，帮助你展示自动更新的内容数据。无论是产品目录、库存信息，还是实时数据更新，本指南将帮助你在 Elementor 中实现高度自定义的动态表格。

为什么要在 Elementor 中使用动态表格？

动态表格可以自动更新数据内容，减少手动维护工作量。以下是使用动态表格的常见应用场景：

• 展示实时更新的数据（如库存和价格）
• 显示用户定制的信息（如会员数据）
• 动态呈现产品目录或服务信息
• 自动化更新的活动和销售数据

通过动态表格，你可以确保网站内容始终最新，同时提升用户的互动体验。

所需工具和插件

为了在 Elementor 中创建动态表格，我们推荐使用以下工具和插件：

• Elementor Pro：支持基本的动态内容功能。
• TablePress 或 WP Data Tables：这两个插件支持动态表格的创建与更新，可以作为表格数据的源头。

在 Elementor 中创建动态表格的步骤

第一步：安装插件

1. 安装并激活 Elementor Pro：确保网站上已经安装并激活 Elementor Pro。
2. 安装表格插件：在 WordPress 插件库中搜索并安装 TablePress 或 WP Data Tables 插件，以提供创建和管理动态表格的功能。

第二步：添加数据源

1. 创建表格：
   • 使用 TablePress 插件，进入 TablePress > 添加新表格，设置表格的名称和结构（行数和列数）。
   • 然后点击“添加表格”，进入表格编辑页面。

2. 添加动态数据：
   • 手动添加数据：
     • 在表格编辑页面中，可以直接在每个单元格中输入数据。这适合不需要实时更新的静态表格（TablePress）。
   • 使用 Google Sheets：
     • 在 Google Sheets 中创建一个包含想展示数据的表格。
     • 使用插件（如 WP Data Tables 的外部数据源功能）将 Google Sheets 与表格插件连接。这样，表格插件会自动同步 Google Sheets 中的数据，实时显示在 WordPress 页面上。
   • 将 CSV 文件导入 TablePress：
     • 在 WordPress 中，进入 TablePress > 导入。
     • 选择下载的 CSV 文件，设置导入选项，并选择要新建表格或更新现有表格。
     • 点击 导入，CSV 文件的数据将被导入到 TablePress 表格中。

第三步：在 Elementor 中嵌入表格

• 打开 Elementor 编辑器
  • 在 WordPress 中，导航到你希望添加表格的页面。
  • 点击“使用 Elementor 编辑”按钮，进入 Elementor 编辑器。

• 添加短代码小工具
  • 在 Elementor 左侧面板中，找到“短代码”小工具，将其拖入页面中你想要显示表格的位置。
  • 在短代码输入框中，输入 TablePress 表格的短代码，例如 [table id=1 /]（将“1”替换为表格的实际 ID）。

第四步：自定义样式

可以通过 Elementor 和插件自带的样式选项自定义表格的外观：

1. Elementor 高级样式选项：选中表格部分，在 Elementor 的“高级>自定义 CSS”中,直接添加 CSS 代码来控制 TablePress 表格的样式。

/* 设置表格整体样式 */
.tablepress {
    width: 100%; /* 设置表格宽度 */
    border-collapse: collapse; /* 移除单元格之间的空隙 */
    font-family: Arial, sans-serif; /* 设置表格的字体 */
    font-size: 14px; /* 设置字体大小 */
}

/* 设置表头样式 */
.tablepress thead th {
    background-color: #4CAF50; /* 表头背景颜色 */
    color: white; /* 表头文字颜色 */
    padding: 10px; /* 表头单元格内边距 */
    text-align: center; /* 表头内容居中 */
    font-weight: bold; /* 加粗表头字体 */
}

/* 设置表格内容行样式 */
.tablepress tbody tr {
    border-bottom: 1px solid #ddd; /* 行底部边框 */
}

/* 设置奇偶行的不同背景色 */
.tablepress tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* 奇数行背景色 */
}

.tablepress tbody tr:nth-child(even) {
    background-color: #ffffff; /* 偶数行背景色 */
}

/* 设置单元格样式 */
.tablepress td {
    padding: 10px; /* 单元格内边距 */
    border: 1px solid #ddd; /* 单元格边框 */
    text-align: left; /* 文本左对齐 */
}

/* 鼠标悬停效果 */
.tablepress tbody tr:hover {
    background-color: #f1f1f1; /* 悬停行的背景色 */
}

代码说明：

• .tablepress：设定整个表格的样式，例如宽度、字体和内边距。
• .tablepress thead th：控制表头的样式，包括背景颜色、字体颜色和内边距。
• .tablepress tbody tr:nth-child(odd) 和 .tablepress tbody tr:nth-child(even)：为奇数行和偶数行设置不同的背景色，形成“斑马纹”效果。
• .tablepress td：调整表格内单元格的样式，包括边框、内边距和文本对齐方式。
• .tablepress tbody tr:hover：鼠标悬停时，设置行的背景色，提升用户体验。

2. TablePress 单独的自定义 CSS 设置

如果希望为所有 TablePress 表格应用特定样式，也可以将上述 CSS 代码直接添加到 WordPress 的 自定义 CSS 中：

• 进入 WordPress 仪表盘。
• 导航到 外观 > 自定义 > 额外 CSS。
• 粘贴上述 CSS 代码，然后点击 发布。

这样可以确保 TablePress 表格的样式在全站范围内统一应用，而不仅仅在特定页面。

高级设置：动态更新和筛选

1. 数据自动更新：如果表格连接到 Google Sheets 等外部数据源，数据可以设为自动更新，以保持内容的实时性。
2. 分页功能：启用分页功能，避免加载大量数据导致页面缓慢，提高用户体验。

动态表格性能优化

为保证页面加载速度和用户体验，以下是一些优化建议：

• 使用分页：在表格较大的情况下启用分页，让用户逐步查看数据。
• 启用缓存：使用 WordPress 缓存插件缓存动态表格数据，减少服务器请求次数。
• 限制更新频率：将数据源的更新频率设为合理的间隔，避免频繁的动态请求影响性能。

总结

本文详细介绍了如何在 Elementor 中创建动态表格，实现自动更新和自定义样式。通过使用 TablePress 插件，可以轻松展示实时更新的数据，如库存、产品目录或会员信息，减少手动维护的工作量。同时，通过分页、缓存和数据同步等优化措施，确保表格的加载速度和用户体验，适合需要频繁更新内容的网站。