如何自定义您的 WordPress 主题颜色

已发表: 2023-04-19

您想学习如何自定义 WordPress 主题颜色吗? 也许您找到了自己喜欢的主题,但调色板对您的品牌来说是错误的。 您可以通过多种方式调整主题颜色以满足您的需要。

在这篇文章中,我们将了解如何使用和不使用代码自定义 WordPress 主题颜色。

立即创建您的 WordPress 表单

如何更改 WordPress 中联系表格的颜色?

自定义主题颜色后,您会希望站点上的表单与样式和颜色相匹配。 最简单的方法是使用 WPForms。

除了检查如何使用和不使用代码自定义主题颜色之外,我们还将更仔细地研究如何使用 WPForms 来实现表单样式。 简而言之,新的表单样式功能让表单与站点的匹配变得超级简单。 我们会告诉你怎么做。

如何自定义您的 WordPress 主题颜色

让我们开始定制吧!

WPForms 是最好的 WordPress 表单生成器插件。 免费获取!

在本文中

  • 使用代码自定义您的 WordPress 主题颜色
    • 第 1 步:安装子主题插件
    • 第 2 步:配置您的子主题
    • 第 3 步:自定义您的儿童主题
  • 无需代码即可自定义您的 WordPress 主题颜色
    • 第 1 步:安装插件并完成站点向导
    • 第 2 步:从仪表板进行任何其他自定义
  • 在 WordPress 中更改联系表单颜色
    • 第 1 步:安装并激活 WPForms
    • 第 2 步:在 WPForms 中创建表单
    • 第 3 步:在 WordPress 块编辑器中编辑表单样式

使用代码自定义您的 WordPress 主题颜色

Editing the code in the CSS editor

如果您精通 CSS 并且能够熟练地编辑网站的文件和样式表,那么使用代码来自定义您的 WordPress 主题是一个不错的选择。

但是,我们不建议您编辑现有文件。 相反,我们建议使用另一个插件来创建和自定义子主题。 子主题本质上是具有所有相同属性的主题的副本。

编辑子主题就是编辑副本。 如果您犯了任何错误,您可以恢复到父主题。 如果父主题有更新,它还可以帮助您避免出现问题。

第 1 步:安装子主题插件

以下是一些可用于创建子主题的插件建议:

  • 儿童主题配置器
  • 儿童主题精灵
  • 生成子主题
  • WP 儿童主题生成器

对于我们的示例,我们将使用 Child Theme Configurator。

第 2 步:配置您的子主题

安装并激活您选择的子主题插件后,您需要访问它进行配置。

您的子主题插件在 WordPress 中的显示位置可能因您使用的插件而异。 我们通过单击左侧边栏上的“工具”菜单访问“子主题配置器”。

Accessing the Child Theme Configurator plugin

找到插件后,您应该会看到用于创建子主题的设置或选项。

我们发现 Child Theme Configurator 会引导您完成整个过程,这很有帮助并简化了原本令人困惑的任务。

Beginning the process of setting up a child theme in Child Theme Configurator

单击“分析”按钮后,会出现更多步骤。 逐步完成这些步骤中的每一个,最后,您将准备好创建您的子主题。

Run the Child Theme Configurator to create your child theme

第 3 步:自定义您的儿童主题

创建新的子主题后,单击左侧栏菜单中的外观 » 主题文件编辑器

Accessing the theme file editor

进入主题文件编辑器后,您会在右侧看到一个下拉菜单,您可以在其中选择要编辑的主题。 您的子主题应该在该列表中。

Access and select your child theme file to customize it

选择子主题后,您可以通过两种方式更改文件。

第一种方法是直接在文件编辑器中编辑 CSS,如上所示。 第二种方法是使用内置的 CSS 编辑器来预览所做的更改。

要访问内置 CSS 编辑器,请转到左侧边栏菜单中的外观 » 自定义

Access the CSS editor to customize styles with a live preview

在该页面上,您将看到 WordPress 网站的实时预览,以及进行更改的选项。

Editing your site style in the built-in editor with live preview

正如您在选项菜单中所看到的,您可以在不使用任何代码的情况下进行多种样式更改。 这可能取决于您的主题和已经配置的内容。

在这些选项中,您会找到更新主题颜色的设置。

例如,您可以选择希望网站使用的按钮样式。

Customize the button shape

选择样式后,您可以为按钮文本、背景和边框选择自定义颜色选项。

Customize the button color

您还可以更改标题和正文字体系列。

Customize the fonts for your site

但是请注意,底部有一个附加 CSS的菜单选项。 您可能会发现,要对站点主题颜色进行某些更改,仍然需要 CSS 代码。 如果是这样,您将在该下拉菜单下输入必要的 CSS 代码,并在您进行更改时实时预览更改。

无需代码即可自定义您的 WordPress 主题颜色

如果您担心在更改主题中的 CSS 时会破坏某些内容,可以使用更简单的方法来自定义您的 WordPress 主题颜色。 您可以使用像 Thrive Themes 这样的无代码插件。

The Thrive Themes homepage

Thrive Theme Builder 是一个主题定制器,可让您在不使用或不了解任何代码的情况下构建自己的主题。 它具有用于前端自定义的拖放式界面,您可以控制所有设计方面。

第 1 步:安装插件并完成站点向导

注册帐户并安装插件后,站点向导将启动。

The Thrive Themes setup wizard

您还可以随时从 Thrive Themes 仪表板再次访问站点向导。

当您启动站点向导时,它会要求您上传徽标并向您显示它在浅色和深色背景下的外观。 即使您使用浅色背景,深色背景也很重要,因为人们在他们的设备上使用深色模式。

Adding your logo in Thrive Themes' setup wizard

之后,您可以选择您的品牌颜色。 单击颜色框时,您可以选择使用颜色选择器或使用十六进制颜色代码来选择颜色。

How to customize WordPress theme colors

当您完成向导的每一步时,您就是在创建自己的自定义主题。

All of the customization steps in the site wizard

当您完成站点向导的其余部分时,您可以自定义网站的外观,而无需编写任何代码。 Thrive Theme Builder 使创建您独有的网站主题变得超级容易。

第 2 步:从仪表板进行任何其他自定义

正如我们之前提到的,如果您想进行更改,您可以随时返回向导。 您还可以通过仪表板访问这些功能。 完成向导后,单击其他选项以进行任何其他自定义。

Access other customizable features from the Thrive Themes dashboard

如果您想快速更改您的站点颜色和徽标,或者如果您想为您的站点上传一个图标,您可以从向导仪表板上的品牌部分访问它。 同样,您也可以在此处更新排版。

自定义页面的所有方面后,您可以保存主题并立即开始使用。

在 WordPress 中更改联系表单颜色

Create rounded fields and buttons in WPForms

正如我们之前提到的,一旦您更新了主题颜色,您就需要确保其他一切都匹配。

以您的表格为例。 如果您的页面具有圆润的边缘和柔和的颜色,那么带有矩形按钮和鲜明对比的四四方方的表单可能看起来至少有点不合适。

输入 WPForms。 表单样式选项使自定义表单以匹配您的主题变得轻而易举。

第 1 步:安装并激活 WPForms

The WPForms homepage

也许我们有偏见,但我们认为 WPForms 是目前最好的表单生成器。 其用户友好的拖放界面让您可以在几分钟内创建和发布美观、专业的表格。 此外,其表单样式选项使您可以轻松地将表单样式与 WordPress 网站主题相匹配。

要开始设计表单样式以匹配您的 WordPress 主题颜色,请安装并激活 WPForms。 如果您需要一些指导,请查看本初学者指南,了解如何安装 WordPress 插件。

第 2 步:在 WPForms 中创建表单

安装并激活 WPForms 后,就可以创建表单了!

使用添加新按钮开始。

Adding a new form in WPForms

表单生成器将打开,以便您可以创建适合您需要的完美表单。 从头开始构建一个,或从数百个可自定义的模板中进行选择。

Creating a form in the WPForms drag-and-drop form builder

表单完成后,您可以使用“嵌入”按钮将其嵌入到您网站上的帖子或页面中。 您可以选择将表单嵌入现有页面或为其创建新页面。

Embed your form with the embed button

第 3 步:在 WordPress 块编辑器中编辑表单样式

接下来,在页面构建器中打开页面草稿。 对于此步骤,您必须使用 WordPress 块编辑器访问自定义选项。

单击嵌入的表单。 表单样式选项将在页面编辑器右侧的侧边栏中打开。 您会看到您可以更改字段、标签和按钮样式。

编辑字段样式时,您可以调整文本区域的大小和边框半径。 边框半径越大,文本区域就越圆。 您还可以为背景、边框和文本选择颜色。

Field styling options

接下来,您可以更改标签样式。 确定您希望标签的颜色,然后为子标签和提示以及错误消息选择颜色。

Label style options

最后,您可以对按钮样式进行调整。

Button style options

为了使它更容易,一旦您选择了表单样式,请单击“高级选项”。 您会看到一个包含 CSS 代码的字段。

Copy your custom CSS in the advanced options, then paste it to other forms to match styles

这是您的表单的自定义代码。 WPForms 会自动为您生成它。 您可以将其复制并粘贴到所有表单的“高级”字段中,以便它们都匹配样式。

如果您想重新开始,只需单击重置样式设置即可清除所有格式。

之后,您就可以发布样式完整的表单了。

A form using the easy form styling options in WPForms

现在您的表单与您的 WordPress 主题颜色相匹配,您无需编写一行代码即可实现。

接下来,创建完美的交互表单

准备好提升你的状态了吗? 现在您知道如何自定义您的 WordPress 主题颜色和样式以匹配您的表单,是时候将其提升到一个新的水平了。 我们提供了一些创建完美交互形式的技巧,以保持用户参与并促进转化。

想要发送无法抗拒的客户调查吗? 查看这些客户调查示例以激发您的灵感!

立即创建您的 WordPress 表单

准备好构建表单了吗? 今天开始使用最简单的 WordPress 表单生成器插件。 WPForms Pro 包含大量免费模板,并提供 14 天退款保证。

如果本文对您有所帮助,请在 Facebook 和 Twitter 上关注我们以获取更多免费的 WordPress 教程和指南。