WordPress divi主题

如何使用 Divi 的主题生成器创建旋转的全局标题

by | May 8, 2022 | Divi主题使用教程 | 0 comments

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

自从 Divi 主题生成器问世以来,我们一直在尝试指导您完成创建自己的全局标题的过程。 我们将通过向您展示如何创建显示在页面和帖子左侧的旋转全局标题来继续这样做。 标题的背景颜色是完全透明的,允许页面/帖子内容显示出来。 我们确保全局标题在滚动时保持固定在左侧,并且我们也将菜单转换为适合移动设备的版本。 在本用例教程中,我们将向您展示如何从头开始重新创建设计,您还可以免费下载模板 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

旋转的全局标题

移动的

旋转的全局标题

免费下载 Rotated Global Header 模板

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

1. 转到 Divi Theme Builder 并开始构建全局标题

转到 Divi 主题生成器

首先访问 WordPress 网站上的 Divi Theme Builder。

旋转的全局标题

开始构建全局标题

单击“添加全局标题”并选择“构建全局标题”。

旋转的全局标题

WordPress divi主题

2.开始构建旋转侧全局标题

添加新部分

背景颜色

进入模板编辑器后,您可以打开已经存在的部分并更改不同屏幕尺寸的背景颜色。

  • 背景颜色:rgba(0,0,0,0)(桌面),#FFFFFF(平板电脑和手机)

旋转的全局标题

浆纱

接下来修改部分的大小设置。

  • 宽度:5vw(桌面),100%(平板电脑和手机)
  • 最小高度:100vw(桌面),汽车(平板电脑和手机)

旋转的全局标题

间距

也添加一些自定义的顶部和底部填充。

  • 顶部填充:2vw
  • 底部填充:2vw

旋转的全局标题

盒子阴影

然后,转到框阴影设置并在不同的屏幕尺寸上添加自定义框阴影。

  • 盒子阴影水平位置:32px(桌面),0px(平板电脑和手机)
  • 盒子阴影模糊强度:49px
  • 盒子阴影传播强度:0px(桌面),19px(平板电脑和手机)
  • 阴影颜色:rgba(0,0,0,0.12)

旋转的全局标题

默认主元素

我们还将通过向该部分的主要元素添加几行 CSS 代码来确保旋转的全局标题保持固定在左侧。

position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

旋转的全局标题

fiverr建站WordPress程序员

悬停主要元素

确保您也将这些相同的 CSS 代码行添加到该部分的悬停主要元素中。

position: fixed;
top: 0;

旋转的全局标题

默认可见性

然后,在可见性设置中增加 z 索引。

旋转的全局标题

悬停可见性

确保相同的值适用于悬停。

独立站选品工具

旋转的全局标题

添加新行

立柱结构

完成部分设置后,继续使用以下列结构添加新行:

旋转的全局标题

浆纱

尚未添加任何模块,打开行设置并更改大小设置。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1

旋转的全局标题

高质量外链购买

间距

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

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

旋转的全局标题

列设置

主要元素(平板电脑和手机)

在平板电脑和手机上,我们将寻求完全不同的外观和感觉。 我们将三个不同的模块并排放置。 为此,我们需要添加一些 CSS 代码。 打开列的设置,进入高级选项卡,将以下几行 CSS 代码插入到平板电脑和手机的主要元素中:

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

旋转的全局标题

将图像模块添加到列

上传徽标

是时候开始添加模块了! 我们需要的第一个模块是图像模块。 上传您选择的半透明徽标图像文件。

JasperAI 10000字免费额度试用

旋转的全局标题

浆纱

然后,转到设计选项卡并更改不同屏幕尺寸的宽度。

  • 宽度:4vw(桌面)、12vw(平板电脑)、16vw(手机)

旋转的全局标题

变换比例

接下来通过修改变换比例设置来增加模块的大小。

  • 右:170%(台式机)、100%(平板电脑和手机)
  • 底部:170%(台式机)、100%(平板电脑和手机)

旋转的全局标题

WordPress备份工具updrafplus

转换翻译

并通过在桌面上添加底部变换转换值将模块向右推。

  • 底部:1vw(台式机)、0vw(平板电脑和手机)

旋转的全局标题

将菜单模块添加到列

选择菜单

我们需要的下一个模块是菜单模块。 选择您选择的菜单。

旋转的全局标题

删除背景颜色

接下来移除模块的背景颜色。

旋转的全局标题

布局

然后,转到设计选项卡并更改布局设置。

  • 风格:居中
  • 下拉菜单方向:向下

旋转的全局标题

默认菜单文本

也修改菜单文本设置。

  • 活动链接颜色:#cecece
  • 菜单字体:蒙特塞拉特
  • 菜单字体粗细:粗体
  • 菜单文字颜色:#000000
  • 菜单文字大小:0.9vw(桌面)、2vw(平板电脑)、2.5vw(手机)

旋转的全局标题

悬停菜单文本

悬停时更改菜单文本颜色。

旋转的全局标题

下拉式菜单

我们还对下拉菜单设置进行了一些更改。

  • 下拉菜单行颜色:#000000
  • 下拉菜单文本颜色:#000000

旋转的全局标题

图标

接下来更改汉堡菜单图标颜色。

  • 汉堡菜单图标颜色:#000000

旋转的全局标题

间距

并在不同的屏幕尺寸上添加一些自定义边距值。

  • 最高边距:18vw(台式机),0vw(平板电脑和手机)
  • 底边距:18vw(桌面),0vw(平板电脑和手机)
  • 左边距:-13vw(桌面),0vw(平板电脑和手机)
  • 右边距:-13vw(桌面),0vw(平板电脑和手机)

旋转的全局标题

变换旋转

现在,为了创建旋转效果,我们将使用模块的变换旋转值。

  • 左:270 度(桌面),0 度(平板电脑和手机)

旋转的全局标题

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

添加社交网络

进入社交媒体关注模块,这是我们需要完成旋转的全局标题的下一个也是最后一个模块。 添加一些您选择的社交网络。

旋转的全局标题

重置社交网络样式

继续单独重置每个社交网络的设置。 这将帮助我们摆脱它们的背景颜色。

旋转的全局标题

结盟

然后,转到模块的设计选项卡并更改不同屏幕尺寸的模块对齐方式。

  • 对齐方式:左(桌面)、右(平板电脑和手机)

旋转的全局标题

图标设置

最后但同样重要的是,也要更改图标设置。

  • 图标颜色:#000000
  • 使用自定义图标大小:是
  • 图标字体大小:2.1vw

旋转的全局标题

3.保存生成器更改并查看结果

完成所有模块后,您可以保存模板,退出 Divi Theme Builder 并在您的网站上查看结果!

旋转的全局标题

旋转的全局标题

预览

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

桌面

旋转的全局标题

移动的

旋转的全局标题

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的新主题生成器创建旋转的全局标题。 我们还将菜单栏转变为移动设备上高度适合移动设备的版本。 除非另有选择,否则我们创建的全局标题将显示在您的所有帖子和页面上。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论!

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

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