源码是我创的，但是腾飞博客修改的，要比我的方便，特此推荐！首先这个教程需要WP古腾堡，古腾堡才有的哦，没有的话就不用部署了！

定位：WP后台–>>新建文章，我们先把代码直接新建区块这样就很方便了，新建文章如下图！

代码我放到最后，喜欢的哪个自己放哪个，或者也可以都放，我们把样式放到了自定义HTML之后，我们点右边的三个点，如下图！

然后我们如上图有一个：创建新样板，然后我们点开他，然后我们创建比如这个名字是：蓝色渐变，就写这个名字，然后分类可以自己创建，如下图，就看懂了！

然后我们添加就添加成功了，然后我们去哪里找这个呢，如下图，我已经添加了四个！

然后搜到了之后我们喜欢哪个就点哪个，然后直接部署就行，如果添加自定义HTML，想看到样式，可以点一下预览就变成了可观的样式，当然你如果自己写了样式也可以用这个教程哦

代码部署

绿色渐变

<p class="gradient-paragraph gradient-4">
这是一个绿色渐变背景示例。清新的颜色让人联想到自然和成长，适合用于环保、健康或积极主题的内容。
</p>
<style>
.gradient-paragraph {
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 12px;
    line-height: 1.8;
    font-size: 1.6rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.gradient-paragraph:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.gradient-4 {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    color: #4a4a4a;
    border-left: 5px solid #00b894;
}
</style>

橙色渐变

<p class="gradient-paragraph gradient-3">
这是一个橙色渐变背景示例。温暖的颜色能够吸引读者的注意力，适合用于强调重要内容或警告信息。
</p>
<style>
.gradient-paragraph {
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 12px;
    line-height: 1.8;
    font-size: 1.6rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.gradient-paragraph:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.gradient-3 {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #4a4a4a;
    border-left: 5px solid #e17055;
}
</style>

蓝粉渐变

<p class="gradient-paragraph gradient-1">
这是一个蓝色到粉色的渐变背景示例。柔和的色彩过渡创造出平静而优雅的效果，非常适合用于引言或重要提示内容。
</p>
<style>
.gradient-paragraph {
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 12px;
    line-height: 1.8;
    font-size: 1.6rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.gradient-paragraph:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.gradient-1 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #4a4a4a;
    border-left: 5px solid #6c5ce7;
}
</style>

灰色渐变

<p class="gradient-paragraph gradient-2">
这是一个灰色渐变背景示例。中性色调适合各种内容类型，不会分散读者对文本的注意力，同时提供视觉上的区分。
</p>
<style>
.gradient-paragraph {
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 12px;
    line-height: 1.8;
    font-size: 1.6rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.gradient-paragraph:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.gradient-2 {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #4a4a4a;
    border-left: 5px solid #4a69bd;
}
</style>