如何将自定义CSS类添加到WordPress（3种简单的方法）

那些知道CSS的人知道CSS课程在整个网站进行样式时会大大节省。但是，如果您不编码，那么您可能永远不会意识到它们的功能有多强大。今天，我们改变了这一点。

在这篇文章中，我将向您展示3种简便的方法将CSS类添加到WordPress中 - 即使您从未写过一行代码。您还将使用功能强大的WordPress网站构建器Divi学习如何以无代码方式进行学习。

什么是CSS课程，它们如何帮助？

CSS（级联样式表）是控制网站上元素的设计和外观（例如颜色，间距和字体）的代码。 CSS类是您分配给多个元素的可重复使用的标签，因此您可以一次对它们进行样式，而不是为每个元素重复相同的过程。

没有CSS课程，您必须手动设计每个元素，这会变得耗时 - 尤其是当在具有多个页面的较大WordPress站点工作时。但是，通常情况下，大多数网站都包括重复元素和图案，例如定价页面上的按钮或不同部分的功能框。

这些元素看起来相似，因为在后端，它们共享同一类组。因此，当您将CSS应用于公共类组的一个元素时，它中的每个元素都会自动继承相同的样式设置。在前端，这使他们的外观具有相似的外观。 CSS类节省了时间，保持设计一致，并使未来的编辑变得更加容易，因为您只需要更新课程，而不是一个一个更改每个元素。

将CSS类添加到WordPress的方法

您可以通过多种方式将CSS类添加到WordPress网站上，这取决于您在使用CSS方面的熟练程度。我将向您展示如何使用WordPress自定义器和插件（如简单的自定义CSS）进行操作，但是这两种方法都要求您编写CSS。

如果您对无代码方法更感兴趣，则跳过第三种方法。

1。使用WordPress Customizer

假设您的WordPress页面具有多个按钮。他们目前看起来很简单，您希望他们脱颖而出，因此您计划添加海军蓝色边框和天蓝色背景。

将CSS添加到每个按钮中会花费大量时间，因为您必须重复八次该过程。但是，使用CSS类，您可以简单地将相同的CSS类分配给每个按钮，然后仅编写一次CSS。让我们命名我们的CSS类“ Custom-A” 。在WordPress页面编辑器窗口上，单击任何按钮>设置（齿轮图标）>向下切换高级选项。现在，在其他CSS类中编写类名。

重复每个按钮的过程并保存。要将样式代码添加到这些按钮中，您必须导航到WordPress Customizer>其他CSS。

为了使边境海军蓝色和背景天空蓝色，您可以在这里粘贴CSS。

请注意，我们选择的CSS类名称是在代码中的造型规则之前。这确保代码应用于分配此类名称的每个元素。

点击发布并预览您的页面后，样式的按钮将看起来像这样：

这很简单 - 如果您知道CSS。

WordPress Customizer也非常适合进行较小的更改。但是，问题在于，在其中添加的CSS与主题挂钩，这意味着如果您切换主题，它可能会丢失。因此，如果您喜欢在网站上测试不同的主题，则每次切换到其他主题时都必须更新代码，这并不有趣。在这种情况下，安装插件以确保您的CSS类样式安全是一个更好的选择。

2。使用插件，例如简单的自定义CSS

安装简单的自定义CSS插件后，将“自定义CSS”选项添加到“外观”部分。现在，您只需要添加CSS代码并更新自定义CSS即可反映更改。 （您仍然需要将类名分配给想要具有通用样式的元素。）

这样的插件使您的自定义CSS保持完整，即使您以后更改主题。它也比WordPress定制器更有条理。但是，这两种方法都不可扩展，因为当您为整个网站的多个元素组保存自定义CSS时，它们很容易变得混乱。

因此，对于范围内的造型，推荐的方法是创建一个子主题并更新其样式表的原因。这样，即使在主题更新之后，您的所有更改即使在孩子主题中都保持安全。

尽管有效（并由编码器推荐），但此方法可以迅速成为技术，因为它仍然需要手动工作 - 您必须为每个元素（或使用CSS类的多个元素）进行样式，这很耗时，而不是初学者友好。您还必须跟踪班级名称 - 只是想象您要编辑特定的按钮类，并且您正在浏览无尽的代码字符串。

那么，如果您可以在不编写单行代码的情况下扩展样式怎么办？那就是现代拖放页面建造者（例如Divi）进来的地方。

3。使用无代码网站构建器（例如Divi）

使用像Divi这样的现代无代码网站构建器的优点在于，您无需编写CSS（或任何代码）即可在网站上应用一致的样式。使用视觉接口，您只需选择和自定义设计设置，就可以将样式分配给部分，行，列和模块。

在Divi中，您可以创建预设，而不是CSS类。多年来，Divi提供了基于模块的预设，可让您为按钮，Blurb和图像等模块保存和重复使用样式。但是我们已经推出了更令人惊奇的东西 - 选项小组的预设使您走得更远。

在选项组预设之前，您仅允许您跨模块应用预设。例如，斜线预设只能在另一个blurb中使用。现在，您甚至可以跨模块共享设置。

Option Group预设，而不是一次自定义一个元素，而是让您为共享设置（例如背景，边框或文本样式）保存样式，并同时将它们应用于多个不同的元素。例如，如果部分和列都使用背景颜色，则可以将该样式设置保存为预设，并将其应用于所有相关元素中以创建凝聚力设计。

Divi通过拖放功能简化了构建和保存样式作为预设，而无需任何编码，从而使范围内的设计更改速度更快，更容易访问，尤其是对于非编码器而言。

下载Divi 5

让我们在下面更详细地了解我的意思

Divi的选项组预设使添加CSS类更容易

Divi的选项组预设进行CSS类的概念，并将其简化为非编码器。现在，您可以使用Divi的Visual Builder使用Divi的视觉构建器来在不同的元素上应用共享的设计样式，而不是手动编写和分配类，而是只需单击几下。

这些预设在选项级别上工作，这意味着它们针对特定的设计设置，例如背景颜色，边框或间距，这些设置在多种元素类型上共享。因此，例如，可以将部分的背景设置应用于列，行甚至文本元素。

这是一种更快，更容易，更直观的方式，可以使您的网站设计保持一致。以下是：

• 跨元素的可重复使用样式：您无需手动自定义每个元素。将选项组样式保存为预设，并将其应用于任何元素。
• 具有单个编辑的全局更新：一次修改预设，使用该预设的所有元素都会自动更新。这使设计调整可以在整个网站上快速有效。
• 结合多个预设：在任何元素上，都不是从头开始的，都可以在任何元素上使用层和混合不同的预设（例如，边界，阴影，文本样式），以实现灵活而创意的设计组合。
• 自定义基本样式的默认预设：将预设保存为默认设置，以将它们自动应用于所有相关元素。

了解有关选项组预设的更多信息

如何使用Divi在不编码的情况下将CSS类添加到WordPress

现在您知道了Divi的选项组预设是什么，并且您不需要知道与他们合作的编码，我想向您展示Divi Builder内部的工作方式。您需要做的事情来创建，保存和应用小组预设到任何选项设置，例如背景，边框，框架等。例如，让我们自定义定价页面。

更改按钮背景

假设我想将按钮背景更改为紫色以匹配页面的颜色。因此，我将自定义第一列的按钮，并将设置保存为主灯按钮预设。 （UI设置中的黑色显示您正在编辑设置预设。如果您选择了黑色模式，则相反。）

现在，要将相同的设置应用于其他两个按钮，我将简单地将按钮预设更改为主灯。

改变列的阴影

让我们在所有列中添加一个盒子阴影。我将在第一列中添加一个盒子阴影，并将其保存为阴影框阴影预设。

要在其他两列上应用相同的阴影，我将简单地将框的阴影预设更改为阴影。

修改文本预设

您还可以修改文本元素（例如H1和H2S）的样式。以下是更新列H3预设有效的方式：

保存后，这是定价页面的外观：

尽管我进行了较小的更改以向您展示其工作原理，但您可以想象可能性。借助Divi的选项组预设，编辑自定义样式组就像单击按钮一样简单。但这只是冰山一角。您也可以：

• 设置选项组的默认预设，以便基本元素（例如标题或按钮）在整个站点上自动继承您的样式。一旦了解默认预设的工作原理，您将永远不会返回使用旧方法。
• 图层选项组在元素预设之上的预设以增加额外的重点 - 例如应用共享背景，然后堆叠阴影或边框样式以使某些元素脱颖而出。

我们已经为Divi的选项组预设写了全部指南。阅读全文，以获取有关如何使用Divi简化基于类的Web设计的设计思想和建议。

了解有关选项组预设的更多信息

Divi是基于班级设计系统的游戏规则改变者

Divi的选项组预设将CSS课程的力量带给所有人。无论您是设计独奏还是与团队合作，都可以预设您的工作流程加快工作流程，随着网站的增长而精美地扩展，并毫不费力地进行造型。它们比传统的CSS工作流程更快，更高效，更直观。

今天开始使用Divi 5

Divi 5处于全面更新模式。我们每周都会启动新功能，就像选项组预设一样，最好了解高级单元，CSS设计变量以及更多其他网站设计方式。

了解有关Divi 5的更多信息

Divi 5是一个强大的设计框架，具有强大的工具，例如Divi Dash，Divi快速站点和Divi AI，可以帮助您创建自定义，专业的网站而无需触摸一系列代码。没有什么可以限制您的，准备在网站设计的未来进行测试吗？

下载Divi 5