如何在 Elementor 中添加自定义 CSS：4 种简单方法

已发表: 2022-07-24

寻找在 Elementor 中添加自定义 CSS 的方法？

通过添加自定义 CSS 扩展已经令人惊叹的 Elementor 设计，可以让您在竞争对手中获得无与伦比的优势。

那么，为什么不使用一些 Elementor 自定义 CSS 并在这个竞争激烈的数字世界中脱颖而出，对吧？

没有理由不应该这样做。

但是如何将自定义 CSS 添加到拖放 Elementor 页面构建器？

好吧，您可以通过多种方式在 Elementor 中添加自定义 CSS。 要了解有关如何在 Elementor 中添加自定义 CSS 的更多详细信息，请继续阅读……

内容隐藏
什么是 CSS？
为什么要在 Elementor 网站中添加自定义 CSS？
如何在 Elementor 中添加自定义 CSS：3 种不同的方法
如何修复 Elementor 自定义 CSS 不起作用的问题
经常问的问题
总结 Elementor 自定义 CSS

什么是 CSS？

什么是 css 如何在 Elementor 中添加自定义 css

CSS（层叠样式表）是一种基于规则的样式表语言，用于更改使用 HTML 或 XML 等标记语言构建的网页的布局和外观。 使用 CSS 是一种有效的网页设计方式，因为它将内容和样式保存在单独的文件中，从而为您提供最大的灵活性和易用性。

为什么要在 Elementor 网站中添加自定义 CSS ？

好吧，这不是强制性的，因为 Elementor 本身提供了创建漂亮网站所需的所有自定义选项。 但是，如果您是一个知道如何编码并希望利用您的创造力来增强网站外观的人，那么您可以在 Elementor 中添加自定义 CSS。

  • 在 Elementor 中使用自定义 CSS，您可以覆盖主题的样式以实现新样式。 假设，你喜欢你的主题提供的页面的整体外观，但你想在一个部分中稍微改变布局，那么你可以借助 Elementor 自定义 CSS 来做到这一点。
  • 同样，您也可以使用自定义 CSS 代码片段覆盖 Elementor 预制模板的设计。
  • 您还可以通过向 Elementor 添加自定义 CSS 代码片段来自定义设计您的网站，使其在不同设备上看起来不同。

检查如何使用Elementor flexbox 容器来创建设备友好的网站。

如何在 Elementor 中添加自定义 CSS：3 种不同的方法

添加自定义 CSS 一点也不难。 事实上，您可以使用各种方法在 Elementor 中添加自定义 CSS。 在这里我与大家分享最安全的 4 种添加 Elementor 自定义 CSS 的方法。

使用 Elementor 的自定义 CSS 代码片段添加 CSS

Elementor 为您提供了一个高级选项，可以将自定义 CSS 添加到您的部分、列以及小部件。 但是，此选项仅适用于 Elementor Pro。

要将自定义 CSS 添加到 Elementor 网站的任何部分/内部部分，请单击“六个点”进入编辑模式，然后移动到“高级”选项卡⇒“自定义 CSS” 。 现在展开自定义 CSS 选项卡并添加您的自定义代码。

在 Elementor 内部部分添加自定义 css

同样，您也可以在 Elementor 小部件中添加自定义 CSS。 为此，单击小部件以进入编辑模式，然后移动到高级选项卡⇒自定义 CSS。 现在展开自定义 CSS 选项卡并添加您的自定义代码。

在 Elementor 小部件中添加自定义 CSS

使用 HTML 小部件添加 Elementor 自定义 CSS

可用于将 Elementor 自定义 CSS 添加到 WordPress 网站的第二个选项是使用 HTML 小部件。 对于此选项，只需简单地拖放 HTML 小部件，然后将 CSS 代码添加到 Style 标记中。

Elementor Custom css 使用 html 块添加 elementor 自定义 css

注意：您可以使用 HTML 标记添加内联和独立 CSS。 不用担心，只有样式会反映在网站上，原始代码将不可见。

在 Elementor 网站设置中添加自定义 CSS

您还可以使用站点设置选项在 Elementor 中添加自定义 CSS。 单击左上角的汉堡菜单，然后在设置下，单击站点设置选项以访问全局站点设置选项。

转到站点设置如何在 Elementor 中添加自定义 CSS

现在向下滚动到自定义 CSS 选项，打开选项卡并在此处添加您的自定义样式。

在站点设置中添加 Elementor 自定义 css

通过 WordPress 自定义设置在 Elementor 中添加自定义 CSS

您不必一定要使用 Elementor 提供的选项来添加自定义 CSS。 您还可以使用 WordPress 自定义选项添加自定义 CSS。

为此，请转到WordPress 仪表板 ⇒ 外观 ⇒ 自定义。

转到 WordPress 自定义选项 Elementor 自定义 css

现在您会发现许多可用于自定义 WordPress 网站的设置。 向下滚动并打开Additional CSS 选项卡以将自定义 CSS 添加到您的站点。

从 WordPress 定制器添加 CSS

如何修复 Elementor 自定义 CSS 不起作用的问题

有时，由于某些技术问题，在 Elementor 中添加自定义 CSS 可能不会立即反映在网站上。 您可以采取以下步骤来解决此问题：

重新生成 CSS

重新生成 CSS 可以解决这个问题。 要重新生成 CSS，请导航到Elementor ⇒ 工具并单击重新生成 CSS 和数据，然后单击保存更改。

重新生成 Elementor 自定义 css Elementor 自定义 css

清除网站缓存和浏览器缓存

使用任何 WordPress 缓存插件清除网站的缓存。 如果你有一个，你也可以清除任何服务器级缓存。 清除网站缓存后，清除浏览器缓存并刷新网站以检查 CSS 是否正常工作。

主题不兼容

有时 Elementor 主题不兼容可能是自定义 CSS 未显示在前端的原因。 您可以尝试切换到任何默认主题以检查 CSS 是否正常工作，如果 CSS 以默认主题显示在前端，则与您的主题开发人员讨论兼容性问题。

将另一个页面构建器与 Elementor 一起使用

同时使用多个页面构建器可能会导致您的自定义 CSS 不起作用。 原因很简单，来自不同页面构建器的 CSS 可能会相互冲突，并且其他页面构建器可以覆盖 Elementor 自定义 CSS。 在这种情况下，您应该只使用 Elementor 页面构建器。

注意：如果您想在不使用其他页面构建器的情况下扩展 Elementor 页面构建器的功能，那么您可以选择 Elementor 插件。

试试ElementsKit——Elementor 的终极插件，它带有85 多个小部件和 500 多个就绪部分，因此您可以构建具有现代外观的 Elementor 网站。

目前有超过700k+人使用这个可爱的插件来创建令人惊叹的网站以及高级页眉和页脚。

现在，您可以使用community20代码以 20% 的折扣获得 ElementsKit 的 Pro 版本。 要购买 ElementsKit 专业版，请单击此处。

经常问的问题

查看与 Elementor 自定义 CSS 相关的一些最受欢迎的问题及其答案：

如何在 Elementor 中使用自定义 CSS？

您可以通过 4 种方式在 Elementor 中添加自定义 CSS。 这些方法是使用 HTML 块、Elementor 自定义 CSS 片段、WordPress 自定义选项和 Elementor 站点构建设置。

如何免费向 Elementor 添加自定义 CSS？

从 WordPress 自定义选项中，您可以在 Elementor 网站中免费添加自定义 CSS。

想要将高级表单添加到您的 Elementor 网站？ 查看我们的表单构建资源：

如何在 WordPress 中添加多步骤表单
如何构建 Elementor 条件逻辑表单
如何在 Elementor 中创建 WordPress 调查表

总结 Elementor 自定义 CSS

现在您知道了在 Elementor 中添加自定义 CSS 的 4 种方法。 虽然您可以使用所有这些，但您应该记住 CSS 的优先级层次结构。 例如，内联样式总是比在页面级别或网站级别编写的 CSS 具有更高的优先级。

因此，我建议仅在您非常了解 CSS 时才使用自定义 CSS。 否则，您可能弊大于利，最终破坏您网站的外观和布局。

话虽如此，如果您是 CSS 专业人士，那么您无需担心，请随意使用本博客中描述的方式添加您的自定义 CSS，以成功改变您网站的外观。