WordPress divi主题

在 Divi 中显示公司徽标的简单而有创意的方法

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

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

在您的网站上显示公司徽标的原因有很多。 公司徽标的“精选”部分可能会影响潜在投资者或合作伙伴。 或者“我们的客户包括”部分可以与访问者建立有价值的社会证明。 但无论出于何种原因,了解如何将这些徽标添加到您的网站非常重要。 在本教程中,我将介绍使用 Divi 将公司徽标添加到您的网站的三种不同方法。 我什至会向您展示如何将徽标画廊添加到任何 Divi 模块!

google广告开户

以下是本教程将介绍的内容:

让我们开始吧!

抢先看

以下是使用本教程中的技术可能进行的一些设计。

公司标志

公司标志

公司标志

公司标志

公司标志

公司标志

WordPress divi主题

准备您的徽标图像

在准备要在您的网站上显示的徽标时,请务必花时间使用照片编辑器调整图像大小,然后再将它们添加到您的网站。 这将使您免去尝试使用自定义宽度、填充或边距调整徽标大小和位置的麻烦。 相信我。 如果没有必要,你不想走那条路。

由于每个徽标都有独特的尺寸,因此几乎不可能使它们都具有精确的尺寸。 这是照片编辑器派上用场的地方。 例如,使用 Photoshop,您可以创建一个新文件并将文档尺寸设置为您希望所有徽标图像的大小(在本例中为 226 像素 x 100 像素)。

公司标志

然后将徽标图像添加到文档中,并直接在中心调整图像大小和位置。 确保它是具有透明背景的 png 图像文件。

公司标志

然后将图像导出为 png 文件以保持透明背景。

公司标志

然后对其余的徽标重复此过程。

您可以保留徽标的原始颜色或使用照片编辑器将其更改为您想要的任何颜色。 如果您计划使用 Divi(即图像模块或图像库)添加徽标,您也可以随时使用 Divi 的内置滤镜效果来调整颜色。

fiverr建站WordPress程序员

订阅我们的 Youtube 频道

#1 使用 Divi Gallery 模块显示公司徽标(简单的拖放)

使用 Divi 将公司徽标添加到您的网站的第一种方法非常简单。 使用 Divi 的拖放功能,您可以将所有公司徽标拖到 Divi Builder 中,以立即创建图像库以在网格中显示您的徽标。

为此,请创建一个新页面并部署 Divi Builder 以在前端构建。 选择“从头开始构建”选项。 一旦 Divi 构建器启动并运行,打开包含所有图像的文件夹并选择它们。 然后只需使用 Divi Builder 将它们拖到浏览器窗口中即可。

公司标志

Divi 会自动将这些图像添加到新的图库模块中,并打开图库设置为您启动自定义过程。

独立站选品工具

由于我要添加 8 个徽标图像并且我不想显示任何标题、说明或分页,因此我可以更新以下内容:

图片数量:8
显示标题和说明:否
显示分页:否

公司标志

默认情况下,图库模块将为每个图像添加一个带有图标的悬停叠加层。 您可以调整缩放图标颜色、悬停覆盖颜色或悬停图标的覆盖设置。

公司标志

高质量外链购买

为了保持简洁,您可以通过将缩放图标颜色和悬停覆盖颜色设置为透明来摆脱悬停覆盖。

之后,您可以探索所有设计选项,为您的图片库创建独特的设计。 例如,您可以添加带有微妙框阴影的边框。

图片边框宽度:1px
图片边框颜色:#dddddd
图像框阴影:见截图

公司标志

以下是最终设计在不同浏览器尺寸上的外观。

JasperAI 10000字免费额度试用

公司标志

而且因为这个图库可以添加到任何列结构中,您可以轻松地为您的公司徽标创建独特的布局。 这是一个两列布局的示例,左侧是文本模块,右侧是图片库模块(带有徽标)。 我添加了背景渐变只是为了向您展示不同的外观。

公司标志

#2 使用 WordPress 库嵌入显示公司徽标(使用任何 Divi 模块)

您还可以使用 WordPress 图片库短代码将公司徽标添加到您的网站。 这非常容易做到,并且非常适合徽标,因为在大多数情况下,您不需要向图像添加自定义样式。 这种方法的优点在于,您可以为您的徽标部署多达 9 个列,这些列随您的浏览器窗口缩放,从而使您的列结构也可以保持在移动设备上。

这是如何做到的。

WordPress备份工具updrafplus

在 Divi Builder 中,创建一个具有四分之一四分之三列结构的新部分。

公司标志

假设您希望在六列图库中的公司徽标左侧有一些文本。 首先在左栏中添加一个文本模块并更新以下内容:

内容:“作为特色”
文字字体:蒙特塞拉特
文字字体粗细:粗体
文字文字大小:26px
文字方向:居中

公司标志

现在在右栏中添加另一个文本模块。 在内容选项卡下,删除当前存在的模拟内容,然后单击内容编辑器框顶部的“添加媒体”按钮。

这将弹出媒体库弹出窗口。 接下来单击弹出窗口左侧的 Create Gallery 链接。 然后选择要包含在图库中的徽标图像(我在此示例中使用了八张图像)。 单击创建图库按钮。

公司标志

这将在弹出窗口中打开“编辑图库”页面。 更新右侧边栏中的图库设置,如下所示:

链接:无
列:8(这应该等于画廊中的图像数量,以便它们保持在一行上)
尺寸:全尺寸

然后单击创建新图库按钮。

公司标志

这将在 WordPress 中嵌入必要的图库短代码,并在文本模块中显示图库。

公司标志

现在打开行设置,并更新以下内容:

使这一行全宽:是
使用自定义装订线宽度:是
天沟宽度:1
均衡柱高:是

使用此设置,您有更多的空间让您的徽标呼吸。 现在剩下要做的就是将左侧的文本调整为与右侧的徽标垂直对齐。 您可以在左列添加必要的自定义填充来完成此操作,但为了保证两个模块保持垂直居中,您可以将以下自定义 CSS 添加到“行设置高级”选项卡下的主元素。

align-items: center;

这个 CSS 之所以有效,是因为我们将 Equalize Column Heights 设置为 YES,从而为该行启用了“display:flex”属性。 有关这方面的更多信息,请查看如何在 Divi 中垂直对齐内容。

公司标志

为了去除图像周围的灰色边框,我们需要在页面设置中添加以下 CSS 片段:

.gallery img {
border: none !important;
}

公司标志

这是最终的设计。

公司标志

这是在行中添加了黑色背景。

公司标志

在移动设备上,列在任何屏幕尺寸上都不会中断。 图像只是缩放到更小的尺寸。 我承认。 八列在智能手机上可能太多了,因为图像变得非常小。

公司标志

在任何 Divi 模块中嵌入徽标库

因为这是一个短代码嵌入,您可以将此图库添加到几乎任何 Divi 模块中,从而开辟许多不同的可能性。

例如,您可以在切换、手风琴甚至选项卡模块中添加徽标图像。

这是将徽标的 wordpress 图库短代码添加到两个不同选项卡时的外观示例。
在此示例中,我为每个画廊选择了 3 个列的 6 个徽标。

公司标志

这对于需要大量徽标的网站可能会派上用场。

#3 使用 Divi Builder 为公司徽标创建自定义布局

如果您想通过公司徽标布局获得更多创意,您可以使用 Divi Builder 设计几乎任何您能想象到的东西。 Divi 的行元素支持最多 6 列的列布局,这对于大多数公司徽标布局来说绰绰有余。 我最喜欢徽标的 6 列和 4 列布局,这在很大程度上是因为它们在移动设备上的响应方式。

在下面的设计中,我将向您展示一些关于如何将您的公司徽标布局提升到新水平的技巧。

首先,让我们从创建一个包含六列行的新部分开始。

在我们开始向列添加任何内容之前,请转到行设置并更新以下内容:

自定义宽度:90%
天沟宽度:1
均衡柱高:是

自定义填充:4vw 顶部,4vw 底部

公司标志

保存设置。

然后将图像模块添加到您的第一列,然后选择一个徽标图像。

公司标志

然后继续为每一列添加一个标志图像,如下所示:

第 1 列:1 个徽标
第 2 列:2 个徽标
第 3 列:3 个徽标
第 4 列:3 个徽标
第 5 列:2 个徽标
第 6 列:1 个徽标

公司标志

现在通过此设置,您可以使用自定义 CSS 片段调整垂直对齐方式。 如果您想将内容垂直居中,您可以添加我们添加的相同的 CSS 片段,以将我们的文本垂直居中,紧挨着上面 #2 中的徽标库。 打开行设置并将以下 CSS 添加到主元素。

align-items: center;

公司标志

如您所见,这为徽标创建了一个圆形布局。

但是对于这种布局,我要将模块对齐到行的底部。 因此,将“align-items: center”片段替换为以下内容:

align-items: flex-end;

公司标志

这会将所有模块对齐到行的底部,这将与我们将添加的 Dividers 部分很好地配合使用。

现在我们准备好自定义我们的部分。 打开部分设置并更新以下内容:

背景:#2a3443

顶部分隔线样式:见截图
顶部分隔线颜色:rgba(255,255,255,0.03)
顶部分隔器高度:13vw
顶部分隔板翻转:垂直

自定义填充:0px 顶部,0px 底部

公司标志

对于我们的标题,我们将创建一个新部分并将其放在我们刚刚创建的部分之上。 创建一个具有单列行结构的新常规部分。

更新部分设置如下:

背景颜色:#2a3443

底部分隔线样式:见截图
底部分隔线颜色:rgba(238,238,238,0.09)
底部分隔器高度:13vw

自定义填充:0px 底部

公司标志

现在保存您的设置并将文本模块添加到该行并更新以下内容:

为内容添加以下内容:

<h2>As Featured In</h2>

标题 2 字体:蒙特塞拉特
标题 2 字体粗细:粗体
标题 2 文本对齐:居中
标题 2 文本颜色:#ffffff
标题 2 文字大小:32px

自定义边距:0px 底部

公司标志

最后,在文本模块下添加一个图像模块,其中包含您希望在其他模块中脱颖而出的公司徽标。 然后更新以下内容:

图像对齐:居中
自定义边距:-75px

公司标志

查看最终结果。

公司标志

最后的想法

在您的网站上为公司徽标创建一个部分实际上非常简单。 一旦您使用照片编辑器正确调整了徽标图像的大小,Divi 就可以完成剩下的工作。 本教程中介绍的方法应该提供创建您希望以最小努力实现的布局所需的一切。 借助 Divi 的强大功能,您应该可以在创建自己的独特布局时获得一些乐趣。

我期待在评论中收到您的来信。

干杯!

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