河西设计网站：用动画按钮设计独特的全屏幕Divi布局

河西设计网站在您的全屏标题上创建一个自定义滚动按钮是改善用户体验的一个伟大的设计改进，允许用户滚动到您的页面的下一部分而不必滚动。添加一些引人注目的动画到您的按钮也可能改善您的转换。divi已经有了一个内置的滚动按钮，让您可以轻松地在全宽度头上添加此功能。但是今天，我想我将向您展示如何使用按钮模块来完成与一些现代设计功能相同的功能。

在本教程中，我将向您展示如何将按钮模块转换为自定义滚动按钮，该按钮将在加载页面时弹出屏幕底部。我也将在此过程中加入一些设计技巧，以寻求灵感。

我们开始吧。

偷窥

这里是我们将一起建造的设计的一瞥。

查看如何在加载页面时弹出学习更多的CTA，并在单击时滚动到下一节。

divi是本教程所需的全部内容。

对于本教程，您所需要的只是Divi。我将使用一个布局包的图像，一些设计魔术与视觉构建器，和一些自定义的CSS片段，以添加最后的触摸，我们的滚动按钮。

全屏报头的设计

若要设计全屏标题，请创建一个新页面并部署可视化构建器。然后添加一个带有全宽度标头模块的全宽度部分。

接下来，按以下方式更新全宽度标头设置：

标题：[输入标题]
按钮#1文本：[输入文本]
内容：[输入内容]

背景颜色：#0a2f5e
背景图像：(输入800×500图像)
背景图像大小：实际大小

在“设计”选项卡下，将布局更改为居中方向，并选择使其成为全屏。

文本和标志方向：中心
全屏：是的

给你的标题一个覆盖的颜色，这样你就可以更容易地阅读你的文本。

背景叠加颜色：RGBA(10，47，94，0.8)

然后使用以下设置设计标题文本、内容文本和按钮#1：

标题字体：Poppin
字体重量：半粗体
标题文本大小：4vw
标题线高度：1.2em

内容字体：Karla
内容字体权重：规则
内容文本大小：16 px
内容线高度：1.5em

按钮一使用自定义样式：是
按钮1文本大小：18 px
按钮1背景色：#4 daaf2
按钮1边框颜色：#4 daaf2
按钮1边框半径：100 px
按钮1字体：Karla
按钮一重：粗体

这将为我们的全宽度标题。为了好玩的事！

创建自定义滚动按钮节

对于这个滚动按钮，我希望它在页面的左侧平放。因此，将三列行添加到您的节中。

然后向左列添加一个按钮模块。

按以下方式更新按钮模块设置：

按钮文本：了解更多信息
按钮URL：#2

第二个URL将用作下一节顶部的锚链接，其中将包含匹配的CSS ID“2”。这是创建自定义滚动按钮的基本功能。

按钮一使用自定义样式：是
按钮文本大小：24 px(桌面)，20 px(平板电脑)
按钮文本颜色：#0a2f5e

按钮背景梯度左：#ffffff
按钮背景梯度右：#DDDDDD
梯度方向：90德克
起始位置：70%
最终位置：0%

按钮边框宽度：0 px
按钮边框半径：0px
按钮字体：Karla
按钮重量：粗体
按钮图标：[向下箭头]
只显示图标上的按钮：不

定制垫：1.5米顶，1.5米底，30%左

动画：幻灯片
动画方向：向上

在“高级”选项卡下，将以下自定义CSS添加到主元素输入框中：

这允许按钮跨越列的全部宽度。

然后将以下CSS添加到“后输入”框中：

这将箭头图标定位到按钮的右侧。

保存你的设置。

自定义节设置

现在，我们需要自定义节设置，以使按钮上的全宽部分以上，并得到正确的间隔。

更新以下部分设置：

背景颜色：RGBA(255，255，255，0)

自定义页边距：-112 px顶
自定义填充：0 px顶部0 px底部

调整行距

现在我们也需要调整行距。更新以下行设置。

全宽行：是的
使用自定义水槽宽度：是
排水沟宽度：1
自定义填充：0 px顶部，0 px底部

现在看看现场页面。当页面加载时，您将在全屏标题的左下角看到一个按钮弹出。

创建第3节：菜单框和特色内容

现在我们已经准备好滚动按钮了，让我们添加另一个部分来创建一个唯一的滚动部分。

创建一个具有三分之一、三分之二的列结构的规则部分。

这个列结构很关键，因为它允许我们用按钮创建一个左列，其大小与其上方的列大小相同。

节设置

在开始添加模块之前，让我们首先使用以下内容更新本节的设置：

背景色：#eaedf 2

自定义填充：0 px顶部，0 px底部

在“高级”选项卡中，添加自定义CSS ID“2”。这将允许您的按钮滚动到本节的顶部。

行设置

河西设计网站要加快速度，请复制上面部分中包含按钮的行样式。然后粘贴新行的行样式。

在Content选项卡中，将第1列背景色更新为#ffffff。这将作为您按钮下菜单框的背景。

然后为您的列更新以下填充：

自定义填充物：10%底部
第二栏定制填充：10%顶部，10%左边，6%右侧

现在，我们准备将侧边栏模块添加到左侧列中。但在我们这样做之前，您需要创建一个自定义菜单。

创建自定义菜单

为了时间的考虑，我将给大家简单的解释如何创建一个菜单。下面是：

1. 导航到外观>菜单

2. 单击“创建新菜单”

3. 添加菜单标题

4. 单击“创建”菜单按钮

5. 选择页面、帖子等。你想把它包括在你的菜单里。或者创建自定义链接。

6. 组织菜单结构

7. 保存菜单

创建自定义菜单Widget

按照以下步骤创建导航菜单小部件，以便我们可以通过可视化构建器将其添加到页面中。

1. 导航到外观>小部件

2. 通过输入小部件名称并单击Create按钮创建一个新的小部件区域

3. 将导航菜单Widget拖动到您创建的新小部件区域。

4. 切换小部件设置并选择您刚刚创建的菜单。

5. 单击“保存”

现在，我们可以回到我们的页面并部署可视化构建器。

添加带有新菜单的边栏模块

在底部部分的左列中，添加一个侧栏模块。

更新侧栏以包括您刚刚创建的小部件区域：

设计侧杆模块

现在，您可以通过更新下列设计设置，将菜单链接的设计与布局匹配起来：

显示边界分隔：否

车身字体：Karla
车身字体：粗体
正文颜色：#0a2f5e
正文大小：24 px(桌面)，20 px(平板电脑)
身高：2.3em

定制填充：20 px顶部，10%底部，30%左

这30%的左填充有助于对齐上面的按钮文本，其中也有一个左填充30%。

框影：(见截图)
框影水平位置：0 px
盒影垂直位置：0 px
盒影模糊强度：0 px
盒影扩展强度：1 px
阴影颜色：#f1f1f1

这是一种创造性的方法，可以在我们的框外添加一个边框，并在滚动按钮和菜单框之间添加一个细微的分隔。

向右列添加内容

在这一节的三分之二栏中，我们将添加一些内容，让您了解如何为您自己的网站使用这个布局。

首先，添加具有以下设置的分隔模块：

颜色：#0a2f5e
分隔位置：垂直中心
分压器重量：2 PX
身高：18 px
宽度：100 px

在Divider模块下，添加一个文本模块，其内容如下：

然后按以下方式更新设计设置：

标题2字体：Poppin
标题2文字颜色：#0a2f5e
标题2文本大小：18 px
自定义页边距：-17 px顶
自定义填充：左120 px

提示：为了使分隔符位于标题的左侧和垂直中心，将分隔器高度(18 Px)与标题文本(18 Px)的px值匹配。然后使用自定义边距使用负像素值(-17 px)将标头移动到相同数量的像素(减去一个以计算分隔线的宽度)。在那之后，给你的标题足够左填充，以计算除法器行(120 Px)的100 px长度。

然后在下面添加另一个文本模块，设置如下：

内容：

文本字体：Karla
文本大小：16 px
文本行高：1.6em

标题3字体：Poppin
标题3字体重量：半粗体
标题3文字颜色：#0a2f5e
标题3文本大小：3 vw(片剂)，40 px(片剂)
标题3线高：1.2em

定制填充物：5%顶部，2%底部

保存设置。

创建最后一节

要创建最后一节，请执行以下步骤：

1. 复制最后一节。

2. 将部分背景色更新为#ffffff

3. 将行列改为三分之二三分之一结构。

4. 在行设置下，将自定义顶部填充更改为10%。

5. 添加第1列自定义填充：左10%，右6%

6. 将列2自定义填充还原为默认。

7. 保存设置。

8. 删除左侧列中的侧栏模块。

9. 将右列中的所有模块移到左列并更新内容。

10. 然后在右边的列中添加一个图像。

这里是最终结果…

更改滚动按钮位置

若要更改按钮位置，只需将其拖动到行中的三列之一。就这么简单！

考虑广泛应用

这个带有菜单框的自定义滚动按钮肯定会让您思考所有不同的应用程序。首先，您可以在滚动按钮下的框中添加任何内容！这将是一个很好的地方，一个联系形式，电子邮件optin，或其他呼吁采取某种行动。

下面是电子邮件optin看起来像…的一个例子

在手机上看起来也很棒

这个布局在移动上很好的扩展。滚动按钮只需在平板电脑和智能手机上缩放屏幕的全部宽度。

最后思想

我真的很喜欢建立河西设计网站这个布局，并探索它带来的可能性。自定义滚动按钮是一个很好的方式，使您的全屏部分更加突出。我希望这个设计将帮助你创造更多独特的按钮和CTA为您自己的网站。

我期待着在评论中听到你的意见。

干杯!