WordPress divi主题

如何使用 Divi 的 Theme Builder 和 Anime.js 在全局标题中添加和动画化 SVG 徽标

| 5月 3, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

您的徽标是品牌标识的核心部分。 这就是为什么它几乎总是包含在您遇到的任何网站标题中。 在标题中添加徽标时,您可以选择上传 PNG 文件或转而进行 SVG 集成。 对于更自定义的方法,您还可以为 SVG 徽标设置动画。 这正是我们将在这篇文章中向您展示的内容。 我们将向您展示如何首先将其添加到 Divi 构建的全局标题中,然后使用 Anime JS 库对其进行动画处理。 我们将在示例中使用简单的设计,但是一旦您掌握了这种方法,您就可以为任何徽标制作动画!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

svg 标志

移动的

svg 标志

免费下载全局标题模板

要使用全局标题模板,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

1. 在 Adob​​e Illustrator 中创建 SVG Logo 并获取 SVG 代码

打开 Illustrator 并创建新文档

在本教程的第一部分,我们将在 Adob​​e Illustrator 中创建一个简单的徽标。 如果您已经拥有自己的 SVG 徽标,请随意使用该徽标。 或者,您也可以访问上面下载文件夹中的徽标示例 Illustrator 文件。 如果您更喜欢从头开始创建徽标示例,请先添加一个比例为 1:1 的新文档。

  • 宽度:500 像素
  • 高度:500 像素

svg 标志

将圆添加到现有图层

我们要添加的第一个元素是一个圆圈。 我们将使用与 Spice Shop Layout Pack 的调色板相匹配的填充颜色。 我们还将确保圆圈在画布内居中对齐。

  • 填写:#0C1019
  • 行程:无

svg 标志

WordPress divi主题

创建新图层并添加徽标文本

接下来,我们将添加一个新层。

svg 标志

我们将使用这一层添加一些徽标文本。

  • 字体:蒙特塞拉特
  • 字体粗细:黑色
  • 字体大小:110pt

svg 标志

为徽标创建轮廓

完成徽标文本的修改后,您可以右键单击元素并单击“创建大纲”以将文本转换为大纲。

svg 标志

对齐文本轮廓

我们将确保文本轮廓也居中对齐。

svg 标志

导出为 SVG

现在我们已经准备好所有路径,我们可以导出 SVG。 为此,我们将悬停在顶部的“文件”选项,转到“导出”并单击“导出为…”。

svg 标志

fiverr建站WordPress程序员

svg 标志

获取 SVG 代码

单击“导出”按钮后,您将看到一个带有一些附加 SVG 选项的窗口。 在那里,您将能够复制 SVG 代码。 确保将 SVG 放在附近以供本教程稍后使用。

svg 标志

svg 标志

2.开始在Divi Theme Builder中创建全局/自定义标题

转到 Divi 主题生成器并开始创建全局标题

现在我们已经完成了本教程的第一部分,获取了我们徽标的 SVG 代码,是时候切换到 Divi 了! 我们将通过导航到 WordPress 后端内的主题生成器来创建一个新的全局标题。

独立站选品工具

svg 标志

svg 标志

部分设置

背景颜色

输入全局标题模板后,您会注意到一个部分。 打开该部分并应用背景颜色。

  • 背景颜色:#eaeaea

svg 标志

间距

转到设计选项卡,然后删除所有默认的顶部和底部填充。

高质量外链购买
  • 顶部填充:0px
  • 底部填充:0px

svg 标志

添加新行

立柱结构

继续使用以下列结构添加新行:

svg 标志

浆纱

在不添加任何模块的情况下,打开行设置,转到设计选项卡并修改尺寸设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 宽度:95%
  • 最大宽度:100%

svg 标志

JasperAI 10000字免费额度试用

间距

也删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

svg 标志

主要元素

为了确保我们的列在较小的屏幕尺寸上保持相邻,我们还将在行的主要元素中添加一行 CSS 代码。

display: flex;

svg 标志

第 1 列主要元素

接下来,我们将通过分别向每一列添加一行 CSS 代码来确保列结构(1/4 和 3/4)在较小的屏幕尺寸上保持不变。 从第一个开始。

WordPress备份工具updrafplus
width: 25% !important;

svg 标志

svg 标志

第 2 列主要元素

对第二列执行相同的操作,但使用另一个宽度百分比。

width: 75% !important;

svg 标志

svg 标志

3.添加SVG Logo(内部代码模块)

将代码模块添加到第 1 列

是时候添加模块了,从第一个代码模块开始。 我们将把这个代码模块放在第 1 列,并用它来添加我们的 SVG 代码。

svg 标志

添加复制的 SVG 代码

结构化它

将 SVG 代码(参见本教程的第 1 部分)粘贴到代码模块中后,它有助于构建所有内容,如下面的打印屏幕所示。 这样,您将对 SVG 中的不同元素有一个清晰的概览。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

svg 标志

在 CSS 代码中为元素添加描边和描边宽度

在 Illustrator 中,我们只对添加的元素使用填充颜色。 这样做的原因是因为我们想避免生成额外的路径。 SVG 代码并不总是像您想象的那样可预测,因此在 CSS 代码中进行一些手动更改通常有助于保持路径简单。 要创建与本文预览相同的结果,我们需要为两个元素添加笔画。 为此,我们将向代码中的两个类添加 CSS 代码行。 在 AI 中生成的“cls-1”CSS 类代表圆圈,“cls-2”CSS 类代表文本轮廓。

stroke: #0c1019;
stroke-width: 3px;

svg 标志

svg 标志

减小圆半径

因为我们已经为我们的圆圈添加了一个额外的笔触,所以圆圈似乎比 SVG 画布更远(在侧面很明显),为了解决这个问题,我们将简单地减少圆圈标签内的半径。 我们没有使用原来的“232.5”,而是将其降低到“225”。 您可以通过轻轻地玩弄这个数字来自己确定您喜欢什么值。

svg 标志

svg 标志

修改代码模块设置

浆纱

现在我们的 SVG 代码已经到位,我们可以对代码模块本身进行一些额外的更改。 转到设计选项卡并修改模块在不同屏幕尺寸上的宽度。

  • 宽度:
    • 桌面:25%
    • 平板电脑:50%
    • 电话:80%

svg 标志

间距

我们还通过修改间距设置来生成底部重叠。

  • 顶部填充:5%
  • 底部填充:
    • 桌面:-12%
    • 平板电脑:-20%
    • 电话:-35%

svg 标志

4. 使用 Anime.js 为您的 SVG 徽标制作动画

在前一个代码模块下方添加另一个代码模块

我们的 SVG 徽标已添加到我们的 Divi 标题中! 在本教程的下一部分中,我们将使用 Anime JS 库为 SVG 徽标制作动画。 您可以在预览中看到的绘图动画是他们最受欢迎的动画之一,但您可以使用此库创建任何类型的动画。 在前一个代码模块的正下方添加一个新代码模块。

svg 标志

添加动漫库

您需要做的第一件事是在脚本标签中添加库。

svg 标志

添加动漫时间轴动画代码

在它的正下方,您需要在脚本标签之间添加动画 JS 代码,如下面的打印屏幕所示:

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

每个“添加”函数代表动画时间轴中的一个动画。 您可以随心所欲地修改这些“添加”功能,添加新功能或删除当前功能,只需确保使用“;”正确关闭最后一个添加功能最后(如您在上面的代码中所见)。 您可以在这些“添加”函数中添加不同的 CSS 属性。 您可以在anime.js 文档示例中找到更多关于属性及其使用方式的信息。

svg 标志

5.将菜单模块添加到第2列

我们需要完成全局标题的唯一元素是第 2 列中的菜单模块。

svg 标志

选择菜单

选择您选择的菜单。

svg 标志

删除背景颜色

然后,删除默认背景颜色。

svg 标志

菜单文字设置

转到设计选项卡并修改菜单文本设置,如下所示:

  • 菜单文字颜色:#000000
  • 菜单文字大小:
    • 台式机:0.7vw
    • 平板电脑:2.2vw
    • 电话:3vw
  • 文本对齐:右

svg 标志

svg 标志

下拉菜单文本设置

也更改下拉菜单行颜色。

  • 下拉菜单行颜色:#ffffff

svg 标志

图标设置

连同汉堡菜单图标颜色。

  • 汉堡菜单图标颜色:#0c1019

svg 标志

浆纱

然后,转到尺寸设置并确保宽度为“100%”。

svg 标志

位置

通过在高级选项卡中重新定位模块来完成模块设置。

  • 职位:绝对
  • 位置:中右

svg 标志

6.保存所有主题生成器更改

完成整个全局标题设计后,您可以保存所有主题构建器更改并在您的网站上查看结果!

svg 标志

svg 标志

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

svg 标志

移动的

svg 标志

最后的想法

在这篇文章中,我们向您展示了如何让您的 Divi 走向全球……

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题