Elementor自定义CSS添加教程与最佳实践

使用Elementor等页面构建器的核心优势之一在于能够便捷地调用预置的页面元素或”小工具”。这些Elementor小工具不仅种类丰富，还提供了大量可自定义的样式选项。然而，在某些情况下，要实现特定的视觉效果，我们仍需借助层叠样式表（CSS）。CSS赋予我们精细调整网站每个组件外观的强大能力。若您已掌握该语言，将其整合到WordPress平台将变得十分简单。Elementor同样内置了多种添加自定义CSS的途径。本文将深入探讨CSS的基本概念，解析如何在Elementor中应用自定义样式，并总结WordPress环境下使用CSS的最佳实践。

什么是CSS？
CSS，全称Cascading Style Sheets（层叠样式表），是一种用于为HTML或XML文档添加视觉样式的编程语言。通过CSS，我们可以将基础HTML页面转化为具有现代美感的网页设计。可以将其理解为一种描述网页元素在浏览器中呈现方式的语言。CSS兼容所有主流浏览器，是互联网技术体系中的核心组成部分之一。

以背景颜色为例，以下代码可将HTML文档的正文部分设置为红色背景：
“`css
body {
background-color: red;
}
“`
我们同样可以将样式应用于HTML中的特定组件、类和ID。例如，这段代码将为页面上的所有H2元素应用黑色文本和左对齐：
“`css
h2 {
color: black;
text-align: left;
}
“`
通常情况下，当用户加载HTML页面时，浏览器会同时加载包含所有CSS代码的独立样式表。这意味着我们可以跨多个页面重复使用同一套样式。当然，我们也可以将CSS代码直接嵌入到HTML页面中，这种做法被称为”内联”使用。以下是针对特定H2元素的内联CSS示例：
“`css

标题文本

“`
将CSS添加到单独的样式表通常被认为是最佳实践。但在使用WordPress和Elementor构建网站时，我们无需手动编辑文件即可添加CSS，这正是这些平台的优势所在。

Elementor中的自定义CSS选项
熟悉Elementor的用户会注意到，该构建器通过部分、列和小工具来组织页面结构。部分包含一列或多列，每列又可容纳多个模块。Elementor的强大之处在于，我们可以在部分、列和小工具级别分别添加独立的CSS代码。

当您将鼠标悬停在某个部分上时，点击出现的六点图标即可打开左侧的”Edit Section”菜单。在”Edit Section”菜单中，选择”Advanced”选项卡，您会看到一个名为”Custom CSS”的区域，其中包含一个文本框，供您输入特定部分的CSS代码。

同样，在编辑列和小工具时，您也可以在各自的设置菜单中找到相同的三个选项卡：布局、样式和高级设置。要为列添加自定义CSS，将鼠标悬停在目标列上，点击右上角的两列图标，然后导航至”Advanced”选项卡下的”Custom CSS”区域。将自定义CSS添加到小工具的过程也完全相同——选择目标小工具，直接跳转到”Advanced”＞”Custom CSS”选项卡即可。

将自定义CSS添加到Elementor页面构建器中的特定元素非常简单，但请注意，这些样式仅适用于所选元素。若要添加影响整个站点的自定义CSS，则需要采用其他方法。

如何使用Elementor添加自定义CSS
本节将介绍在Elementor中添加自定义CSS的多种方法，包括全局应用、特定页面和元素级别的操作。

方法1：使用Elementor HTML小工具
在某些情况下，您可能希望使用HTML和CSS手动创建元素。这时，HTML小工具将派上用场。HTML小工具可以解析HTML、CSS和JavaScript代码。在HTML Code字段中，您可以添加任何有效的代码，Elementor会将其渲染为小工具内容。

HTML小工具支持内联和独立CSS。您添加的任何代码只会影响该小工具生成的元素。

方法2：使用Elementor站点设置菜单
Elementor提供了一组全局设置选项，类似于WordPress定制器中的功能。要访问Elementor Site Settings菜单，打开编辑器并点击左上角的汉堡菜单图标。在展开的菜单中，选择”Site Settings”选项。

在Site Settings界面中，您会看到一组用于自定义网站样式的设置。在此菜单中进行的任何更改都将应用于整个网站，即使您只编辑了单个页面。有关如何使用”站点设置”菜单的详细说明，请参阅Elementor官方文档。目前，我们关注的是”Custom CSS”选项卡。打开该选项卡后，您会看到一个文本框，其功能与部分、小工具和列的自定义CSS选项类似。在此处添加的任何自定义CSS都将影响整个网站。如果您只想自定义特定元素，建议使用更具针对性的方法（如直接添加到小工具）。

方法3：使用WordPress定制器
WordPress定制器同样允许您在整个站点范围内添加自定义CSS。为此，请转到”外观”＞”自定义”，然后在左侧菜单中选择”额外CSS”选项。

值得注意的是，Elementor代码字段比定制器中的代码字段更易于使用。如果您已经在使用Elementor进行网站构建，则没有必要通过定制器添加自定义CSS。

方法4：将自定义CSS文件排入队列
如果您习惯于通过FTP客户端访问WordPress文件，可以将CSS样式表添加到队列中，由Elementor加载。这种方法需要您将代码添加到WordPress的functions.php文件中。

要访问functions.php文件，请通过FTP连接到您的网站，进入WordPress根目录，找到并打开functions.php文件进行编辑。以下是您要添加到文件中的代码示例：
“`php
add_action( ‘elementor/frontend/before_enqueue_scripts’, function() {
wp_enqueue_script( ‘custom-stylesheet’, get_stylesheet_uri() );
} );
“`
该代码使用`before_enqueue_scripts`钩子来加载名为`custom-stylesheet`的样式表。我们还使用`get_stylesheet_uri()`函数指向样式表在服务器中的位置。理想情况下，您应该在子主题目录或主题文件夹本身中添加自定义样式表。样式表可以包含您需要的任何Elementor CSS代码。您添加到functions.php的代码片段将确保仅当Elementor在您的网站上处于活动状态时才加载代码。

方法5：使用CSS插件
市面上有多种插件可以帮助您在不使用定制器或页面构建器的情况下添加自定义CSS。我们推荐使用Simple Custom CSS and JS插件：该插件允许您选择将代码直接添加到主题的页眉和页脚元素中。首先，转到”Simple Custom CSS and JS”＞”Add Custom CSS”，然后点击”Add CSS Code”按钮。

一个基本的CSS编辑器将出现在左侧。在右侧，您可以配置是在外部样式表中还是在内部加载CSS代码。您还可以决定代码应该放在页眉还是页脚。完成CSS代码编辑后，点击”发布”按钮。您可能需要切换到前端视图才能查看效果。

使用Elementor创建自定义CSS的最佳实践
在处理自定义CSS或向网站添加任何代码时，以下最佳实践将帮助您事半功倍。

使用WordPress子主题
如果您计划使用CSS更改主题样式的任何部分，强烈建议您使用子主题。”子”主题继承指定主题的所有样式，这意味着您对原始主题进行的任何更改都不会影响子主题中的自定义设置。此外，当您更新主题时，这些更改将得以保留。

使用代码预处理器
在WordPress中添加代码或使用Elementor的最大挑战之一是无法访问现代代码编辑器提供的所有功能。我们建议您使用您最喜欢的预处理器（如HTML编辑器），而不是使用基本的现场编辑器来处理代码。然后，您可以简单地将代码复制并粘贴到WordPress中。

考虑使用临时网站
每当您计划对WordPress进行任何重大更改时，建议您使用临时网站。临时站点使您能够测试样式和功能的更改，而不会破坏实时站点上的任何内容。如果您的网络主机不提供暂存功能，您可以使用本地WordPress开发环境进行测试。或者，您可能需要考虑更换托管服务提供商。

小结
添加Elementor自定义CSS比您想象的要简单得多。该页面构建器提供了多种方法来向部分、列、小工具和整个网站添加代码。以下是向Elementor（或您的网站）添加自定义CSS的五种主要方法：
1. 使用Elementor HTML小工具
2. 使用Elementor站点设置菜单
3. 使用WordPress定制器
4. 将自定义CSS文件排入队列
5. 使用CSS插件