WordPress divi主题

如何使用带有 Divi 的切换图标来节省标题中的空间

by | Apr 30, 2022 | Divi主题使用教程 | 0 comments

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

您设计标题的方式为您网站的其余部分定下了基调。 这就是为什么考虑添加元素和交互的方式很重要的原因。 当然,您会希望包含徽标和菜单项等基础知识,但很有可能您还希望包含其他一些号召性用语。 但是,添加到标题中的项目越多,标题可能变得越不堪重负。 如果您正在寻找一种干净且交互式的方式来在标题中展示不同的号召性用语,那么您会喜欢本教程的。 今天,我们将向您展示如何使用切换图标节省标题中的空间。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

切换图标

移动的

切换图标

免费下载全局标题模板

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

1.构建标题结构

创建新的全局标题模板

首先转到 Divi Theme Builder 并开始构建新的全局或自定义标题。

切换图标

切换图标

添加第 1 节

渐变背景

进入模板编辑器后,您会注意到一个部分。 打开该部分的设置并应用渐变背景。

WordPress divi主题
  • 颜色1:#ffffff
  • 颜色 2:#eaeaea
  • 渐变类型:线性
  • 渐变方向:90度
  • 起始位置:50%
  • 结束位置:50%

切换图标

间距

转到该部分的设计选项卡并删除所有默认的顶部和底部填充。

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

切换图标

盒子阴影

也添加一个盒子阴影。

  • 阴影颜色:rgba(0,0,0,0.06)

切换图标

添加新行

立柱结构

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

切换图标

浆纱

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

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

切换图标

间距

接下来删除所有默认的顶部和底部填充。

fiverr建站WordPress程序员
  • 顶部填充:0px
  • 底部填充:0px

切换图标

主要元素 CSS

然后,转到高级选项卡并在不同的屏幕尺寸上应用一些主要元素自定义 CSS 代码行。 此代码将帮助我们将项目垂直居中放置在桌面上。

桌面:

display: flex;
place-items: center;

平板电脑和手机:

display: block;

切换图标

独立站选品工具

第 1 列设置

间距

然后,打开第 1 列设置并应用一些左右填充。

  • 左填充:5%
  • 右填充:5%

切换图标

主要元素

我们正在更改桌面上列的大小,并通过将一些自定义 CSS 应用于列的主要元素,使其在平板电脑和手机上恢复为“100%”。

桌面:

width: 88% !important

平板电脑和手机:

高质量外链购买
width: 100% !important;

切换图标

第 2 列设置

背景颜色

接下来,我们将打开第 2 列设置并将背景颜色更改为白色。

  • 背景颜色:#FFFFFF

切换图标

间距

我们还将在此列的间距设置中添加一些响应式填充值。

  • 顶部填充:
    • 桌面:50px
    • 平板电脑和手机:20px
  • 底部填充
    • 桌面:50px
    • 平板电脑和手机:20px
  • 左填充:1%
  • 右填充:1%

切换图标

JasperAI 10000字免费额度试用

主要元素 CSS

我们也会在桌面上修改第二列的大小。 我们将在较小的屏幕尺寸上恢复到“100%”。

桌面:

display: flex;
place-items: center;
width: 12% !important;

平板电脑和手机:

width: 100% !important;

切换图标

将菜单模块添加到第 1 列

选择菜单

是时候添加模块了,从第 1 列中的菜单模块开始。选择您选择的菜单。

WordPress备份工具updrafplus

切换图标

上传徽标

接下来上传徽标。

切换图标

删除背景颜色

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

切换图标

菜单文字设置

转到模块的设计选项卡并相应地更改菜单文本设置:

  • 菜单字体:Playfair Display
  • 菜单文本字体:Playfair Display
  • 菜单文字颜色:#000000
  • 菜单文字大小:19px
  • 菜单行高:1.4em
  • 文本对齐:右

切换图标

下拉菜单设置

然后,更改下拉菜单行颜色。

  • 下拉菜单行颜色:#ffffff

切换图标

图标设置

更改图标设置中的图标颜色。

  • 购物车图标颜色:#000000
  • 搜索图标颜色:#000000
  • 汉堡菜单图标颜色:#000000

切换图标

浆纱

并通过更改大小设置来完成模块设置,如下所示:

  • 标志最大宽度:200px
  • 宽度:100%
  • 模块对齐:中心

切换图标

将 Blurb 模块 #1 添加到第 2 列

将内容框留空

到第二列。 要创建切换图标,我们将使用没有标题和内容的 Blurb 模块。 我们将从创建第一个切换图标开始,然后重用该模块来添加其他两个切换图标。 添加 Blurb 模块后,请确保标题和内容框为空。

切换图标

选择图标

接下来,选择您选择的图标。

切换图标

图标设置

转到模块的设计选项卡并更改图标设置,如下所示:

  • 图标颜色
    • 默认值:#dbdbdb
    • 悬停:#000000
  • 图标位置:顶部
  • 图标对齐:居中
  • 使用图标字体大小:是
  • 图标字体大小:200%

切换图标

浆纱

也修改大小设置。

  • 内容宽度:100%
  • 宽度:32%

切换图标

主要元素和模糊图像 CSS

并通过在 Blurb 模块的高级选项卡中的自定​​义 CSS 选项中添加两个 CSS 代码行来完成模块设置。

主要元素:

display: inline-block;

模糊图像:

margin-bottom: 0px !important

切换图标

克隆 Blurb 模块两次

完成第一个切换图标 Blurb Module 后,您可以克隆它两次。

切换图标

更改图标

确保更改每个副本中的图标。

切换图标

2.添加切换项目

添加第 2 节

浆纱

现在我们已经设置了标题的基础,我们仍然需要包含切换项。 为此,我们将在前一个部分的正下方添加一个新部分。 打开部分设置并确保此部分的高度为“0px”。 这将帮助我们防止该部分占用标题设计中的任何空间。 我们需要此部分的唯一原因是显示我们的切换项。

切换图标

间距

转到该部分的设计选项卡并删除所有默认的顶部和底部填充。

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

切换图标

添加新行

立柱结构

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

切换图标

浆纱

在不添加任何模块的情况下,打开行设置并修改大小设置,如下所示:

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

切换图标

间距

接下来删除所有默认的顶部和底部填充。

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

切换图标

位置

并重新定位整行。 将此行设为绝对值将有助于我们防止该行占用设计中的任何空间。

  • 职位:绝对
  • 位置:右上角

切换图标

将文本模块 #1 添加到第 2 列

将电话号码添加到内容框

是时候添加切换项目了! 首先,我们将添加电话号码。 将新的文本模块添加到第 2 列,然后在内容框中插入电话号码。

切换图标

背景颜色

接下来添加黑色背景颜色。

  • 背景颜色:#000000

切换图标

文字设置

转到模块的设计选项卡并相应地更改文本设置:

  • 文字字体:Playfair Display
  • 文字颜色:#ffffff
  • 文字大小:27px
  • 文本对齐:居中

切换图标

浆纱

确保宽度也是 100%。

切换图标

间距

然后,将一些自定义填充值添加到间距设置中。

  • 顶部填充:10%
  • 底部填充:10%
  • 左填充:2%
  • 右填充:2%

切换图标

克隆文本模块

完成第一个切换项 Text Module 后,将其克隆一次。

切换图标

将内容更改为电子邮件地址

更改内容框中的内容。

切换图标

将社交媒体关注模块添加到第 2 列

添加选择的社交网络

然后,将社交媒体关注模块添加到第 2 列。添加任意数量的社交网络。

切换图标

将每个社交网络的背景颜色更改为白色

然后,将每个社交网络的背景颜色分别更改为白色。

  • 背景颜色:#FFFFFF

切换图标

切换图标

背景颜色

然后,回到常规模块设置并使用黑色背景色。

  • 背景颜色:#000000

切换图标

结盟

转到模块的设计选项卡并更改模块对齐方式。

切换图标

图标设置

更改图标设置中的图标颜色。

切换图标

浆纱

然后,对尺寸设置应用“100%”宽度。

切换图标

间距

也应用一些自定义的顶部和底部填充。

  • 顶部填充:10%
  • 底部填充:10%

切换图标

边界

并通过在边框设置中添加一些圆角来完成模块设置。

切换图标

3.增加功能

将连续的 CSS ID 添加到 Blurb 模块的第一部分

现在所有元素都已就位,我们可以开始添加切换效果。 您需要做的第一件事是单独打开每个 Blurb 模块并添加一个连续的 CSS ID。

  • 模糊 1:header-cta-1
  • 模糊 2:header-cta-2
  • 模糊 3:header-cta-3

切换图标

为切换项添加连续的 CSS ID

对切​​换项模块执行相同的操作。 CSS ID 末尾的数字应与您在上一步中用于图标的 CSS ID 匹配。

  • 文本模块 1:header-item-1
  • 文本模块 2:header-item-2
  • 社交媒体关注模块:header-item-3

切换图标

为所有切换项添加绝对位置

并且将每个切换项一一旋转。 我们建议您进入线框模式来执行此操作。

  • 职位:绝对
  • 位置:右上角

切换图标

将代码模块添加到第 #1 节的第一列

现在所有 CSS ID 都已准备就绪,我们可以添加代码以使点击功能正常工作。 在第 1 列的菜单模块正下方添加一个新的代码模块。

切换图标

插入 CSS 代码

添加以下几行 CSS 代码 在样式标签之间,您可以在下面的打印屏幕中注意到

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

切换图标

插入 jQuery 代码

我们也在添加一些自定义 JQuery 代码。 添加代码 在脚本标签之间,您可以在下面的打印屏幕中注意到.

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

切换图标

4.使标题+切换项目粘性

使第 1 部分具有粘性

最后但并非最不重要的一点是,您还可以将标题和切换项目设为粘性。 要创建所需的结果,您需要确保两个部分都是粘性的,并且启用了“从周围粘性元素偏移”选项。 使第一部分具有粘性。

  • 粘性位置:坚持顶部
  • 底部粘性限制:无
  • 从周围的粘性元素偏移:是
  • 过渡默认和粘性样式:是

切换图标

使第 2 部分保持粘性

对第 2 部分做同样的事情。就是这样!

  • 粘性位置:坚持顶部
  • 底部粘性限制:无
  • 从周围的粘性元素偏移:是
  • 过渡默认和粘性样式:是

切换图标

预览

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

桌面

切换图标

移动的

切换图标

最后的想法

在这篇文章中,我们向您展示了如何在标题中使用切换图标。 一旦有人点击一个图标,就会出现一个切换项,这可以帮助您在标题设计中节省大量空间。 这种方法侧重于用户行为,并帮助您避免设计压倒性的标题设计。 您还可以免费下载 JSON 文件! 如果您有任何疑问,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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