elementor

Elementor是一个免费的WordPress页面构建器插件，拥有超过500万个活动安装。此外，该插件还具有高级版本和数百个附加组件，可在您的网站中添加精美的元素。 与任何其他页面构建器插件一样，Elementor添加了自定义样式和脚本，为页面的前端外观添加了令人惊叹的因素。但是，它会在前端和后端影响您网站的页面加载速度的高成本。如果由于Elementor页面构建器而导致网站速度缓慢，您可以尝试以下一些选项来解决速度问题。 修复缓慢的Elementor插件 页面速度和用户体验是谷歌搜索算法中的排名因素。因此，与使用拖拽页面速度的Elementor添加美化元素相比，您必须重视加快网站速度。幸运的是，Elementor在插件设置中提供了一些优化功能。此外，您可以优化可能影响Elementor页面加载速度的外部因素。 使用Elementor设置优化页面速度 让我们首先探索这些设置，如果这些设置不能解决您的问题，那么您应该检查其他解决方案。 1. 仅对页面启用Elementor 默认的WordPress设置允许您创建两种文章类型——文章和页面。此外，像WooCommerce这样的插件将创建产品，您还可以根据需要创建自定义文章类型。我们强烈建议只为页面启用Elementor，而不是为文章和其他自定义文章类型启用。这有助于在前端和后端禁用除页面之外的Elementor资源的加载。当您激活Elementor插件时，它将默认为文章和页面启用。您可以转到“Elementor > Settings”菜单并在“General”选项卡下禁用文章插件。 为文章禁用Elementor 2. 使用Elementor Experiments 该插件在“Experiments”选项卡下提供了许多实验性功能。在这里，您可以看到正在进行的实验以及已完成并被接受为稳定功能的实验。为了提高加载速度，您可以在稳定和持续部分下启用所有与速度相关的项目。 激活以下正在进行的实验： Improved Asset Loading – 此选项将减少加载的默认代码并仅在需要时动态加载剩余代码。 Improved CSS Loading – 这与上面的功能相同，仅在需要时加载CSS。 Inline Font Icons – 禁用Font Awesome和eicon的加载并加载内联SVG图标。 Elementor正在进行的实验 激活以下Stable实验： Optimized DOM Output——这将减少HTML wrappers的数量以提高速度。 Elementor Stable功能 确保在启用正在进行的实验后彻底测试您的网站，因为它们可能会破坏您网站的布局。例如，动态加载资源会影响使用WP Rocket和其他插件删除未使用的CSS等功能。 3.优化字体使用 使用Google字体和其他自定义字体会在Google PageSpeed Insights中产生很多问题。例如，当您使用带有Elementor插件的Google Fonts时，您会看到在加载Web字体和预加载字体时使文本可见的警告。幸运的是，Elementor具有内置的字体优化选项，您可以使用它们来提高页面加载速度。 如上所述，使用“Inline Font Icons”来使用“Ongoing Experiments”部分下的SVG图标。 转到“Elementor > Settings […]

当你有一个商业网站时，表格是主要的。它们使客户更容易与您联系并提供重要信息和反馈。但是，弄清楚如何创建它们可能具有挑战性。 如果您正在寻找一种简单、直接的策略，我们建议您使用Elementor表单。这个流行的页面构建器 为构建各种美观且易于使用的表单提供了解决方案。 在这篇文章中，我们将首先讨论您可能想要创建Elementor表单的原因。然后，我们将引导您完成此过程，并介绍一些有用的插件和故障排除技巧。 为什么要创建Elementor表单 如何在WordPress中创建Elementor联系表单 Elementor表单的顶级插件 创建Elementor表单的其他提示和技巧 Elementor表单疑难解答 为什么要创建Elementor表单 为您的WordPress网站创建表单有很多优点。首先，您可以为访问者提供一种快速简单的与您交流的方法。此外，您可以使用它们来生成潜在客户并从您的受众那里获取重要信息。 表单也可以成为注册用户和接受付款的有用工具。但是，如果您想向WordPress网站添加表单，则需要使用插件。或者，您可以使用像Elementor这样的页面构建器。 Elementor让您无需接触任何代码即可构建令人惊叹的表单。您可以使用拖放编辑器创建与您的品牌和网站美感相匹配的响应式表单。 您还可以从多种类型的表格中进行选择，包括： Elementor Contact Forms：您可以使用此功能构建一个简单的表单，以便用户与您取得联系。 Elementor Gravity Forms：这个Gravity Forms小部件在自定义和设置表单样式方面为您提供了更大的灵活性。 Elementor Register Forms：此功能使您可以 在您的网站上设置用户注册表单。 如您所见，这些表单中的每一个都有其特定的用例，可以帮助增强您网站的功能。接下来，我们将向您展示如何使用Elementor构建联系表单。 如何在WordPress中创建Elementor联系表 现在我们了解了更多关于您可能想要使用Elementor表单的原因，让我们来看看如何通过几个简单的步骤创建一个。请注意，对于本教程，我们假设您已经在您的网站上安装并激活了Elementor。 有免费工具和付费插件。要访问表单功能，您需要高级版本。 第 1 步：添加Elementor联系人小部件 要开始，请导航到要插入联系表的页面或帖子。然后，单击 屏幕顶部的Edit with Elementor按钮： 单击“Edit with Elementor”链接 这将启动 Elementor 编辑器界面。从左侧的小部件中，搜索并选择Form小部件： 拖放“Form”小部件 然后，您可以将小部件拖放到您的页面上。这将插入一个标准的联系表格。 第 2 步：设置您的联系表单字段 将联系表放在页面上后，您可以配置一些设置。现在，让我们专注于设置表单字段。 您可以通过单击小部件并自定义文本来编辑基本表单字段（如果您想更改任何默认选项）。如果要添加其他字段，可以通过选择Add Item来完成： 通过添加项目自定义表单 您可以从下拉列表中选择要添加的字段类型。接下来，您可以添加一个标签，即表单字段的名称。这向您的访问者显示了预期的输入。 对于Placeholder选项，您可以自定义在用户输入信息之前出现在表单字段中的文本。您可以使用它为访问者提供您希望他们提供的数据的示例。 此外，您可以选择启用Required设置并修改列宽。您还可以单击“Buttons”面板来自定义表单按钮的外观。您可以更改大小以及字体和颜色。 第 3 步：配置您的表单提交 […]

无论您是有抱负的Web开发人员还是电子商务企业家，您的网站都可能共享一些基本要素。例如，每个站点都需要一个清晰的Header来帮助访问者在不同页面之间导航。但是，如果您使用像Elementor这样的页面构建器来减少编码，您可能想知道是否仍然可以制作一个复杂但用户友好的Elementor固定顶部栏（或者成为固定页眉）。 幸运的是，使用Elementor header可以为您的用户提供一种简化的方式来浏览您的网站。使用这个流行的页面构建器，您可以构建各种不会在用户向下滚动站点时消失的Header。此功能使它们“粘在顶部”。 在这篇文章中，我们将讨论固定顶部栏的工作原理以及使用它的好处。然后，我们将向您展示如何使用该工具的免费版和专业版制作Elementor固定顶部栏。最后，我们将使用CSS为您的置顶header提供额外的自定义选项。 Elementor固定顶部栏简介 如何创建Elementor固定顶部栏 如何使用CSS来增强Elementor固定顶部栏 Elementor固定顶部栏的类型 Elementor固定顶部栏简介 没有两个网站是相同的。但是，优质网站有一些共同点。 如果您正在运行一个多页站点，则这些元素之一就是Header。这是包含有用信息的任何页面顶部的水平条。 通常，页眉包括您的导航菜单以及诸如关于或联系我们之类的页面： 教学博网站页眉区域 当访问者浏览您的页面时，他们可能希望有一个有组织的Header来帮助引导他们浏览您的网站。由于用户体验 (UX) 是网站成功的关键，因此明智的做法是创建一个直观且直接的Header。这就是使用Elementor设计的固定顶部栏可以产生重大影响的地方。 固定顶部栏的工作原理 在我们了解Elementor固定页眉的工作原理之前，让我们看看当您向下滚动页面时标准页眉的行为： 标准页眉示例 正如您在上面的示例中看到的，此header包含一个复杂的导航栏，其中包含Sales、Clothing、Shoes等类别。这些标签无疑将帮助购物者找到他们正在寻找的东西。但是，当您向下滚动页面时，页眉会消失。 用户可能会觉得这很令人沮丧，因为这需要他们滚动回页面顶部才能访问导航菜单。幸运的是，固定顶部栏提供了一个简单的解决方案。 通过停留或“固定”在页面顶部，固定页眉可以极大地改善您网站的用户体验： 固定顶部栏示例 当您的网站设计包含固定顶部栏（页眉）时，您的用户可以快速跳转到新页面，而不会浪费时间滚动。 此外，使用此固定元素，您可以始终将徽标包含在前面和中心。此功能可以帮助用户更轻松地回忆起您的品牌，并鼓励他们在您的网站上停留更长时间。 何时应该考虑使用固定顶部栏 在浏览带有固定顶部栏的大型网站时，访问者不太可能迷路。因此，如果您的网站有很多页面，您可能希望利用此功能。这就是为什么您会经常在电子商务网站上看到固定顶部栏的原因。 如果您想在Header中包含搜索功能，固定顶部栏可能特别有用。这样，当用户滚动并意识到他们无法找到他们正在寻找的内容时，他们可以快速在搜索栏中输入查询。 此外，如果您运行一个在主页上显示所有帖子的货币化博客，则固定Header可能会改变游戏规则。一般来说，这个header可以确保您的网站是可维护和可扩展的。 但是，如果您的网站只有一个页面，那么以这种方式转换您的Header没有多大意义。此外，如果您的网站上有大量页面，但每个页面都相对较短，那么您可能也不需要固定顶部栏。 总体而言，固定顶部栏减少了滚动时间并增加了网站的可用性和导航。如果您不确定此功能是否会使您的网站受益，您可能需要快速审核您的页面长度，然后再决定。 如何创建Elementor固定顶部栏 对于本教程，我们将引导您完成制作Elementor固定顶部栏的步骤。我们假设您已经 在您的站点上安装并激活了Elementor插件。 我们将介绍如何使用免费版本和Elementor Pro制作此页眉。您可能会很高兴知道您无需学习HTML或大量编辑代码即可完成此操作！ 如何使用Elementor创建固定顶部栏（免费） Elementor的免费版本为页面构建提供了一些强大的功能。但是，如果您想更改页眉和页脚，则需要一些额外的（也是免费的）工具。 考虑到这一点，让我们看看如何使用Elementor创建一个固定页眉！ 第 1 步：安装并激活您的基本插件 幸运的是，一些可靠的工具可以轻松扩展Elementor免费版的功能。 导航到您的WordPress仪表板以找到您的第一个工具。转到Plugins > Add New 并使用搜索功能查找ElementsKit Elementor插件： 安装并激活ElementsKit 像往常一样安装并激活这个插件。完成此过程后，您将进入主插件页面： 插件现已安装 现在，再次单击Add New以使用搜索栏找到Elementor插件的Sticky Header […]

Elementor工具使设计漂亮的页面、文章和整个网站变得容易。但是，即使您拥有强大的页面构建器 （例如Elementor），创建新的网站设计也需要时间和精力。 这就是Elementor的导入和导出系统的用武之地。使用此功能，您可以通过为项目创建可重用模板或导入第三方布局来缩短设计和开发时间。 这篇文章将深入探讨Elementor灵活而强大的导入/导出系统。我们将涵盖从部分模板到页面模板的所有内容，甚至导出您的整个Elementor网站。 如何为新的Elementor模板准备网站 如何保存Elementor模板 如何创建Elementor模板 如何导出Elementor模板 如何导入Elementor模板 如何导出和导入单个Elementor页面 如何导出和导入整个Elementor网站 如何修复Elementor的“无效文件”错误 用于导入和导出模板的Elementor插件 如何为新的Elementor模板准备网站 Elementor模板是适用于单个页面或特定用户界面 (UI) 元素的预先设计的布局。尽管它们听起来与WordPress主题相似，但还是有一些本质区别。 WordPress主题改变了整个网站的设计。相比之下，Elementor模板会影响单个网页的布局。由于它们仅限于一页，因此可以同时使用多个 Elementor 模板。此外，这些模板在WordPress主题上运行，无论是免费的还是高级的。 将新的Elementor模板应用到您的网站可以改变它的外观或功能。考虑到这一点，您应该在更改模板之前执行一些操作。 第 1 步：创建备份 在更改Elementor模板之前创建备份是明智的。此步骤可确保您在遇到新设计问题时可以恢复内容。 各种插件使您能够创建网站备份。其中包括UpdraftPlus插件，它可以将您的所有文件和数据库信息复制到云端： UpdraftPlus 如果您是宝塔面板用户，单独备份网站文件或者数据库都是一件非常容易的事情，甚至你可以设置自动备份计划任务。 第 2 步：将您的站点置于维护模式 更改您网站的模板可能会导致意外的崩溃、错误或其他奇怪的行为。应用新设计后，您可能需要花一些时间测试您的网站并进行调整。 如果在您进行这些更改时访问者试图访问您的网站，他们可能会影响他们的体验质量。这可能会导致您失去潜在的转化。 在应用新的Elementor模板之前，您可能希望将您的网站置于维护模式。此步骤将阻止访问者在您测试新设计时访问您的网站。 几个插件可以创建自定义维护模式。但是，WP Maintenance Mode 是一种流行的选择： WP Maintenance Mode 这个插件有很多额外的附加功能，包括为您的维护启动屏幕添加倒计时。此功能可以帮助您围绕网站的重新设计和重新启动引起轰动。 一旦您的网站处于维护模式，您就可以自由地尝试各种模板并测试它们在您网站前端的显示方式。当您对结果感到满意时，您可以让您的网站退出维护模式 – 并通过您的网站重新设计让访问者惊叹不已。 如何保存Elementor模板 作为全球最受欢迎的页面构建器之一，Elementor不乏现成的第三方模板。但是，有时您可能想要创建模板。 使用模板可以帮助您实现整个网站的设计一致性。它还可以节省您的时间，主要是如果您在多个站点上使用相同的设计。 例如，WordPress 设计和开发机构可能会受益于创建具有他们经常应用于其客户网站的核心元素的模板。 方法 1：将页面另存为Elementor模板 您可以将任何页面保存为Elementor模板。这可以帮助您建立标准的外观和感觉，准备在您的网站上进行部署。 例如，您可以创建站点的菜单，以及页眉和WordPress页脚。然后，您可以将此页面模板应用于您的所有网页。 创建模板还意味着您不必为每个网页手动重新创建相同的元素。这对您的生产力来说是个好消息。 要将当前页面保存为Elementor模板，请在Elementor侧边栏底部找到绿色的Update/Publish按钮。然后，单击此按钮随附的箭头图标： […]