使用Elementor等页面构建器的最大卖点之一 是您可以访问预构建的页面元素或“小工具”。Elementor小工具包括大量自定义和样式选项。但是，有时应用特定样式的唯一方法是使用层叠样式表 (CSS)。
CSS为您提供了对网站每个组件的惊人控制程度。如果您熟悉该语言，将其添加到WordPress很简单。Elementor还提供了几个用于添加自定义CSS的选项。
在本文中，我们将讨论CSS是什么以及如何向Elementor添加自定义样式。最后，我们将讨论一些在WordPress中使用CSS的最佳实践。
- 什么是CSS？
- Elementor中的自定义CSS选项
- 如何使用Elementor添加自定义CSS
- 使用Elementor创建自定义CSS的最佳实践
什么是CSS？
CSS是我们所说的“样式表”语言。您可以使用CSS样式表向HTML或XML文档添加自定义样式。通过使用CSS，您可以将基本的HTML页面转换为具有现代外观的设计。
将CSS视为一种描述元素应如何在浏览器上显示的语言。它适用于所有浏览器，是互联网的核心语言之一。
例如，这是您用来为HTML文档的正文分配背景颜色的CSS代码：
body {
background-color: red;
}
您可以使用CSS将样式应用于HTML中的特定组件、类和ID。例如，下面的代码片段会为页面上的所有H2应用特定的文本颜色和对齐方式：
h2 {
color: black;
text-align: left;
}
通常，当您加载HTML页面时，它还会加载包含所有CSS代码的单独样式表。这意味着您可以跨多个页面重复使用样式表。
您可以自由地将CSS代码直接应用于任何HTML页面。您也可以“内联”使用它。这是一个术语，指的是适用于单个HTML元素并驻留在该文件中的CSS代码。
以下是特定H2的内联CSS示例：
h2 {
color: black;
text-align: left;
}
将CSS添加 到单独的样式表被认为是最佳实践。但是，使用WordPress和Elementor的众多优势之一 是您无需手动编辑文件即可添加CSS。让我们仔细看看它是如何工作的。
Elementor中的自定义CSS选项
如果您熟悉Elementor，您就会知道构建器使用部分、列和小工具来帮助您组合页面。部分包含一列或多列，每列可以有几个模块：
Elementor中的列和模块
使用Elementor的最佳部分之一是您可以在部分、列和小工具级别添加单独的CSS代码。当您将鼠标悬停在某个部分上时，您可以选择六点图标以打开屏幕左侧的“Edit Section”菜单：
在部分、列和小工具级别添加单独的CSS代码
如果您移动到“Edit Section”菜单中的“Advanced”选项卡，您将看到一个Custom CSS部分。在内部，您会找到一个字段，可让您为该特定部分添加代码：
自定义CSS选项位于“高级”选项卡下
当您编辑列和小工具时，您会注意到您可以在各自的设置菜单中访问相同的三个选项卡。部分、列和小工具都包括布局、样式和高级设置。
要将自定义CSS添加到列，请将鼠标悬停在该列上，然后选择元素右上角的两列图标。然后，导航到Advanced选项并打开Custom CSS部分：
将自定义CSS添加到单个列
您可以按照相同的过程将自定义CSS添加到Elementor小工具。只需选择您要自定义的小工具，然后直接移至“Advanced”>“Custom CSS”选项卡：
您也可以将CSS添加到小工具
将自定义CSS添加到Elementor页面构建器中的特定元素非常简单。但是，请记住，样式仅适用于这些元素。如果要添加影响整个站点的自定义CSS，则需要使用不同的方法。
如何使用Elementor添加自定义CSS
在本节中，我们将探索添加Elementor自定义CSS的其他方法。我们将介绍在整个网站、特定页面和Elementor小工具中应用CSS的方法。
方法 1：使用Elementor HTML小工具
Elementor使您能够将自定义CSS添加到其任何小工具。但是，在某些情况下，您可能希望使用HTML和CSS手动添加元素。在这些情况下，您需要使用HTML小工具：
使用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会影响整个站点
您在此处添加的任何自定义CSS都会影响您的整个网站。如果您只打算自定义特定元素，我们建议您使用更有针对性的方法（例如将CSS直接添加到小工具）。
方法 3：使用WordPress定制器
WordPress定制器还使您能够在整个站点范围内添加自定义CSS。为此，请转到外观 > 自定义并在左侧菜单中选择额外CSS选项：
使用WordPress定制器添加CSS
但是，值得注意的是Elementor代码字段比定制器中可用的代码字段更加用户友好。如果您已经在使用Elementor进行网站构建，则没有理由通过定制器添加自定义CSS。
方法 4：将自定义CSS文件排入队列
如果您喜欢编辑WordPress文件并通过文件传输协议 (FTP)客户端访问您的网站，则可以将CSS样式表排入队列以使用 Elementor 加载。这种方法需要您将代码添加到WordPress functions.php文件中。
要访问functions.php文件，请通过FTP连接到您的网站并转到WordPress根文件夹。打开文件夹，找到functions.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
使用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的五种主要方法：
- 使用Elementor HTML小工具。
- 使用Elementor站点设置菜单。
- 使用WordPress定制器。
- 将自定义CSS文件排入队列。
- 使用CSS插件。
原文地址：https://www.wbolt.com/elementor-custom-css.html
