也想出现在这里?联系我们

WordPress 古腾堡 Gutenberg 编辑器添加彩色渐变框

2024.01.09 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress的古腾堡(Gutenberg)编辑器中添加彩色渐变框,您可以使用自定义CSS样式来实现这一效果。以下是一种在Gutenberg块中添加彩色渐变框的方法:

  1. 打开您要编辑的帖子或页面,并确保您正在使用Gutenberg编辑器。

  2. 在Gutenberg编辑器中,选择要添加渐变框的块(如段落块)。

  3. 在右侧的"高级"选项中,找到“附加CSS类”字段。

  4. 在“附加CSS类”字段中,为您的块添加一个自定义类名,例如“customgradientbox”。

  5. 然后,点击“发布”或“更新”按钮,保存您的更改。

  6. 接下来,转到WordPress仪表盘,然后选择“外观” > “自定义主题”(可能会因主题而异,但通常在外观相关的选项下)。

  7. 在自定义主题界面中,通常有一个“自定义CSS”或“附加CSS”选项,您可以在其中添加自定义CSS样式。

  8. 在自定义CSS字段中,添加以下CSS代码来创建彩色渐变框效果:

.customgradientbox {
    background: lineargradient(45deg, #ff8a00, #e52e71);
    padding: 20px;
    color: #fff;
    borderradius: 5px;
}

请注意,您可以根据需要更改渐变的角度、颜色和其他样式属性。

  1. 保存您的自定义CSS更改。

  2. 返回到您的帖子或页面,您应该看到您的块已经具有彩色渐变框的样式。

这样,您就可以通过为块添加自定义CSS类并在主题中添加相应的CSS样式来在WordPress的Gutenberg编辑器中创建彩色渐变框。确保备份您的网站数据和主题文件,以防意外更改造成问题,并确保您的主题支持自定义CSS。如果您不确定如何执行这些步骤,请与您的主题开发者或网站管理员联系,以获取更多帮助。

有用0
  • 2024.01.09初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧