如何调整 WordPress 徽标的大小

Muneeb WordPress Tutorials Apr 24, 2022

据说您的网站徽标是您品牌的软形象。 因此,如何显示您的徽标非常重要。 徽标的大小还应与您网站的整体设计相结合。

对于大多数用户来说,无论他们使用什么主题,都不清楚他们是否可以调整其网站徽标的大小。 在本教程中,我们将介绍一些更改 WordPress 徽标大小的方法。

如何使用定制器调整 WordPress 徽标的大小

如果您的主题支持,使用 WordPress 定制器调整徽标大小是最简单、最快捷的方法。 许多常见的主题确实有一个工具来调整你的 WordPress 标志。 但是,您的 WordPress 徽标只能与您上传的图片一样大,因此如果您想要更大的徽标,请务必上传更大的图片。

在本教程中,我们将使用 Divi、Ultra Theme 和 Astra 等主题来更改 WordPress 徽标的大小。 但是,所有 WordPress 主题的过程都有些相同。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

如何在 Divi 主题中调整 WordPress 徽标的大小

在您的 WordPress 仪表板中,转到Divi ,然后选择Theme Customizer

接下来,您需要按列表中的标题和导航菜单。

下拉主菜单栏选项,您可以在其中更改徽标的大小。

菜单高度选项控制导航菜单的高度,也将决定徽标的大小。 徽标最大高度定义了总菜单高度。

确保在完成后发布您的设置。

如何在 Ultra 主题中调整 WordPress 徽标的大小

在 WordPress 上的 Ultra Theme 中,您可以通过转到 WordPress 仪表板外观面板中的自定义选项来更改徽标的大小。

单击站点徽标和标语下拉菜单。

接下来,从三个圆形按钮中,您需要选择Logo Image

在这里,您将能够添加新徽标或使用现有徽标。 您将能够为您的徽标设置全新的尺寸,并且您的徽标大小将实时更改。

如何在 Astra 主题中调整徽标大小

转到您的 WordPress 仪表板并从外观面板中选择自定义,然后按标题下拉按钮。

站点标识选项,您可以在其中更改徽标的大小。

在给定的比例上,将宽度条向左或向右移动,您将看到徽标的大小实时变化。

对设置感到满意后,发布徽标并继续前进。

如果您的主题不支持 WordPress 定制器,这里有一些其他方法可以更改 WordPress 徽标的大小。

如何使用自定义 CSS 调整 WordPress 徽标的大小

如果您的 WordPress 主题不支持 WordPress 定制器,您无需担心。 您可以通过添加自定义 CSS 来调整 WordPress 徽标的大小。

首先,您需要转到您的 WordPress 主页并右键单击以选择检查选项,该选项将显示页面的所有代码。

要选择您网站的徽标元素,请单击右上角的鼠标指针图标。

然后导航到您的网站徽标,CSS 类将弹出,如下图所示。 这个 CSS 类将用于调整您的徽标大小,因此请处理并将其保存在记事本等文本编辑器中。

接下来,从 WordPress 仪表板的外观面板转到自定义,然后选择附加 CSS菜单。

接下来,您需要添加之前复制的 CSS 类,然后为您的徽标添加新尺寸。 这是您可以使用的示例。

img.custom-logo {
     max-height: 100px !important;
}

您还需要将img.custom-logo类更改为您的主题支持的CSS 类,并将max-height更改为您喜欢的高度。

完成更改后,请确保发布它们。

如何使用插件调整徽标大小

第三种方法适用于那些不能使用 WordPress 定制器并且不习惯使用 CSS 方法的人。 使用简单的样式插件,您可以更改徽标的大小。

CSS Hero是最好的 WordPress 样式插件之一,您可以使用它来更改徽标的大小。 它允许您编辑 WordPress 网站上的几乎所有 CSS 元素,而无需使用编码。

安装并激活插件后。 您将被要求激活您的产品。 继续激活,然后输入您的凭据。

当您被重定向到您的网站时,按顶部的使用 CSS Hero 自定义

它将带您回到您的网站,并在后台运行 CSS Hero。 使用 CSS hero 将光标放在元素上后,左侧会弹出一个菜单进行自定义。

您必须已评估需要将光标放在 WordPress 徽标上。 然后在左侧的自定义菜单中按ShowAdvanced Props

使用度量选项,您将能够更改徽标的大小。 您将同时拥有Max WidthMax Height选项。

当您指定尺寸时,它将实时显示更改。 一旦您对更改感到满意,请确保发布您的设置。

无论您使用什么主题,这都是您可以调整 WordPress 徽标大小的方法。 我们列出了所有可能情况的方法,供您更改徽标大小。

这都是我们为本教程提供的。 请务必在我们的FacebookTwitter上关注我们,以免错过任何更新。

Divi WordPress Theme