如何使用 Divi 创建虚拟峰会登陆页面
已发表: 2020-07-02推广虚拟活动涉及多种推广策略。 创建邀请登录页面就是其中之一。 为您的虚拟峰会创建登录页面是让您的观众好奇的完美方式。 通过正确的部分组合，您可以邀请、通知和收集注册的与会者。 今天我们将向您展示如何创建一个包含五个部分的虚拟峰会登陆页面。 该设计包括双色调图像和滚动部分分隔符。 如果您想跳过分步教程，我们还提供了一个可下载的 JSON 文件。 在该文件夹中，您还可以找到 PNG 和 AI 格式的页眉和页脚图形。
让我们开始吧！
预览
让我们来看看不同屏幕尺寸下的着陆页设计。
桌面
药片
移动的
免费下载虚拟峰会登陆页面
要了解免费的虚拟峰会登陆页面布局，您首先需要使用下面的按钮进行下载。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
虚拟峰会登陆页面部分
为了让您的着陆页发挥作用，它需要一组特定的部分。 除了吸引观众的眼球外，着陆页还必须进行转换。 例如，虚拟峰会登陆页面需要包含相关信息和号召性用语。 所有部分都必须无缝地从一个部分流向另一个部分，以便观众感受到行动和注册的灵感。
我们在虚拟峰会登陆页面中包含了以下部分：
标题
标题部分包含重要信息，例如峰会名称和活动日期。 这是最重要的信息，因此它位于最顶部。 没有号召性用语和轻松导航到页面的其余部分，没有标题是完整的。
在我们的设计中，我们包含了两个带有锚链接的按钮，可以导航到演讲者和日程安排部分。 最重要的是，我们包含了一个带有注册部分链接的按钮。 在整个页面中，所有“注册”按钮看起来都一样，以便在设计中具有视觉统一性。
信息
第二部分是信息部分，鼓励观众考虑参加虚拟峰会。 在设计中，我们添加了四个简介和一个可以轻松转换为视频的图像。 简介列出了参加峰会的四个理由，图像（或视频）是支持该决定的视觉效果。
演讲者
在下一部分中，您将找到一组 6 人模块。 您可以在这里介绍将参加峰会的演讲者。 每个模块包括以下元素：
- 图片
- 姓名
- 位置
- 描述
- 社交媒体链接
确保输入每个扬声器的所有相关信息。 此外，尝试在正文中使用相同数量的行，以保持设计看起来清晰。 如您所见，我们在所有扬声器的照片上使用了双色调效果，使设计具有有趣的外观和感觉。 下面有一个关于如何在 Photoshop 中实现这种效果的分步教程。
如果您有六个以上的扬声器，只需将行或克隆模块复制到具有更多或更少列的行中。
日程安排
接下来是日程部分。 在这方面，我们优雅地分享了峰会的日程安排，并确保它是结构性的。 为了保持文本设计的风格，请确保更改内容而不是标题级别。 尽量保持内容的长度大致相同，以便设计保持整洁。
行按天组织，带有标题图像和一组简介。 在最后一栏的底部，您可以找到一个号召性用语按钮，供观众注册。
登记
最后但并非最不重要的是注册部分。 我们加入了倒数计时器以增加紧迫感。 联系表格应直接链接到您的 RSVP 列表，以便自动注册每个受邀者。
在整个虚拟峰会登录页面设计中，您会发现三个按钮导航到此部分以优化潜在客户生成。
使用 Photoshop 创建双色调渐变映射
在 Adobe Photoshop 中打开图像
如果您想在我们的设计中模仿双色调图像，请按照以下步骤操作。 首先，在Photoshop中打开一张图片。
打开调整并选择渐变映射
打开调整工具栏并单击渐变图。 在属性选项卡中，双击渐变栏以打开设置弹出窗口。
调整渐变颜色
在渐变设置中，双击每种颜色以自定义设置。
为达到我们设计的效果，调整渐变如下：
- 渐变类型：固体
- 平滑度：100%
- 不透明度停止 #1：100%
- 色标 #2
- 深紫色#202060
- 位置：19%
- 中点：
- 不透明度中点：85%
- 颜色中点：50%
- 不透明度停止 #2：55%
- 色标#
- 紫罗兰色#f895f8
- 位置：100%
另存为自定义渐变贴图
为您的渐变添加一个名称，然后单击“新建”以保存它。 然后它将存储在您的渐变库中。 以 700 像素高保存网络图像。 根据需要使用尽可能多的图像重复该过程。 应用渐变贴图后，选择您保存的渐变。
1. 创建标题部分
添加新部分
背景
让我们开始重新创建虚拟峰会登录页面。 创建一个新页面并使用 Divi Builder 打开它。 在添加行之前，将背景图像和渐变添加到新部分。 您可以在上面的可下载文件夹中找到背景图形。
- 背景渐变
- 颜色 1：#1f4068
- 颜色 2：#202040
- 背景图像：标题图形
浆纱
接下来调整最小高度。
- 最小高度：1050px
间距
间距也一样。
- 顶部和底部填充
- 桌子和手机：90px
能见度
最后，在高级选项卡中调整可见性设置。
- 水平和垂直溢出：隐藏
添加新行
列结构
添加一个包含三列的行。 选择 1/2、1/4、1/4 列结构。
浆纱
调整行的大小如下：
- 宽度：90%
- 最大宽度：1800px
- 对齐方式：居中
间距
\也添加一些上边距。
- 上边距：200px
第 2、3 列设置
间距
调整第 2 列和第 3 列的设置。首先是间距
- 上边距：30px
能见度
然后，隐藏手机上的列。
- 禁用：电话
将第一个文本模块添加到第 1 列
文本
在第 1 列中添加第一个文本模块。插入标题作为 H1 内容。
- 正文：H1 内容
标题文字
在设计选项卡中，接下来设置标题文本的样式。
- 标题级别：H1
- 字体：阿拉塔
- 重量：粗体
- 对齐方式：居中
- 颜色：灰白色#eaeaea
- 尺寸
- 桌面：85px
- 平板电脑：70px
- 电话：44px
- 字母间距：2px
- 线高：1.1em
- 文字阴影：第一个选项
- 阴影颜色：rgba(o,0,0,0.26)
将第二个文本模块添加到第 1 列
文本
添加第二个文本模块。 插入日期作为 H2 内容。
- 正文：H2 内容，2020 年 7 月 15 日 + 16 日
标题文字
接下来设置标题文本的样式。
- 标题级别：H2
- 字体：阿拉塔
- 重量：常规
- 对齐方式：居中
- 颜色: 紫红色#b030b0
- 尺寸
- 台式机和平板电脑：60px
- 电话：45 像素
- 线高：1.3em
间距
也增加一些间距。
- 底部填充：20px
将按钮模块添加到第 1 列
文本
为号召性用语添加按钮模块。
- 按钮：注册
关联
添加锚链接。
- 链接地址：#注册
结盟
移至设计选项卡并设置对齐方式。
- 按钮对齐：居中
按钮自定义样式
样式按钮。
- 字体大小
- 桌面：30px
- 平板电脑：25 像素
- 电话：20px
- 文字颜色：白色#ffffff
- 背景：紫色 #602080
- 边框半径：35px
- 字母间距：1px
- 字体：阿拉塔
间距
最后，调整间距。
- 最高利润率
- 平板电脑和手机：15px
- 顶部填充：2px
将按钮模块添加到第 2 列
文本
移至第 2 列并添加一个按钮模块。 添加您选择的副本。
- 按钮：扬声器
关联
接下来，添加一个锚链接。
- 链接网址：#Speakers
结盟
在设计选项卡中，设置对齐方式。
- 按钮对齐
- 桌面：右
- 平板电脑和手机：中心
按钮自定义样式
调整自定义按钮样式。
- 文字大小：24px
- 文字颜色：白色#ffffff
- 背景：透明
- 字母间距：1px
- 按钮字体：Alata
- 边框半径：0px
盒子阴影
最后，添加一个框阴影。
- 框阴影：第四个选项
- 水平位置：0px
- 垂直位置：5 px
- 阴影颜色：紫红色：#b030b0
将按钮模块克隆到第 3 列
克隆按钮
克隆第 2 列中的按钮并将复制的模块放在第 3 列中。
调整按钮模块
文本
更改克隆按钮中的文本。
- 按钮：时间表
关联
也更改锚链接。
- 链接网址：#Schedule
结盟
不要忘记更改对齐方式。
- 按钮对齐
- 桌面左侧
添加新行
列结构
添加具有两个相等列的新行。
浆纱
首先调整天沟宽度。
- 自定义天沟宽度：2
间距
接下来添加间距。
- 最高利润率
- 电话：-35px
能见度
然后调整行的可见性。
- 禁用：平板电脑和台式机
克隆按钮模块并在第 1 列中放置重复项
克隆按钮
克隆上一行第 2 列中的按钮模块，并将复制的模块放置在新行的第 1 列中。
调整按钮模块
按钮自定义样式
调整新按钮中的文本。
- 文字大小：20px
盒子阴影
也修改框阴影。
- 垂直位置：4px
将克隆的按钮模块添加到第 2 列
克隆按钮
复制前一行第 3 列的按钮模块。 将其粘贴到该行的第 2 列。
调整按钮模块
文本
调整克隆按钮中的文本内容。
- 文字：时间表
2. 创建信息部分
添加新部分
背景
要创建信息部分，请先添加一个新部分并设置背景样式。
- 背景渐变
- 颜色 1：#202040
- 颜色 2：#202060
间距
也添加一些填充。
- 顶部填充：170px
- 底部填充：5px
能见度
最后，在高级选项卡中调整可见性设置。
- 水平和垂直溢出：隐藏
添加新行
列结构
添加一个包含一列的新行。 我们将其称为标题行。
浆纱
接下来设置尺寸。
- 宽度：80%
- 最大宽度：1800px
添加文本模块
文本
添加文本模块。
- 正文：H2 内容 – 为什么要参加数字营销虚拟峰会？
标题文字
在设计选项卡中，设置标题文本的样式。
- 标题级别：H2
- 字体：阿拉塔
- 文字颜色：白色#ffffff
- 尺寸
- 桌面：55px
- 平板电脑：45px
- 电话：40px
- 字母间距：2px
- 线高：1.1 em
添加分频器模块
线
现在添加一个分隔模块并在设计选项卡中设置线条的样式。
- 线条颜色：紫红色#b030b0
浆纱
接下来调整大小。
- 分隔线重量：50px
- 最大高度：50px
滚动效果
在高级选项卡中，添加水平滚动效果。
- 启用水平运动
- 桌面
- 起始偏移：-6
- 中间偏移：50% / 0
- 结束偏移：6
- 平板电脑和手机
- 说明偏移：-4
- 中间偏移：50% /0
- 结束偏移：4
添加新行
列结构
现在添加一个包含三列的新行。 选择 1/2、1/4、1/4 列结构。
浆纱
在添加模块之前，调整行大小。
- 宽度：80%
- 最大宽度：1800px
第 1 列设置
间距
另外，调整第一列的间距。
- 顶部填充：20px
将图像模块添加到第 1 列
图片
现在将图像模块添加到第 1 列。使用具有双色调效果的图像之一。
- 图片：具有双色调效果的照片
边界
也调整边框。
- 圆角：15px
将 Blurb 模块添加到第 2 列
文本
移至第 2 列并添加一个模糊模块。 插入内容。
- 标题：建立新的联系
- 正文：描述性内容
图片
上传您可以在可下载文件夹中找到的数字 1 图像。
- 图片：#1 的 PNG
图像和图标
接下来调整图像的位置。
- 放置：顶部
- 对齐方式：左
标题文字
标题文本的样式。
- 标题级别：H4
- 字体：阿拉塔
- 颜色：白色#ffffff
- 尺寸：23px
文章主体
不要忘记设置正文的样式。
- 字体：Open Sans
- 颜色：白色#ffffff
- 尺寸：14px
- 字母间距：1px
自定义 CSS
最后，使用自定义 CSS 向高级选项卡中的模糊标题添加一些额外的填充。
- 模糊标题：padding-bottom：15px；
padding-bottom: 15px;
克隆 Blurb 模块并在第 2 列中放置重复项
克隆模糊
复制第 2 列中的第一个简介。
内容
更新内容。
- 标题：新标题
- 正文：新的描述性文本
图片
然后，更改数字图像。 您可以在可下载的文件夹中找到新的。
- 图片：#2 的 PNG
删除第 3 列和克隆第 2 列
克隆列
在行设置中，删除第 3 列并复制第 2 列。 确保将列结构返回到 1/2、1/4、1/4。
调整第 3 列中的模糊 1
内容
更新克隆的简介中的文本内容。
- 标题：新标题
- 正文：新的描述性文本
图片
也更改数字图像。
- 图片：#3 的 PNG
调整第 3 列中的模糊 2
内容
也修改此简介的内容。 先说正文。
- 标题：新标题
- 正文：新的描述性文本
图片
然后，更改数字图像。
- 图片：#4 的 PNG
3. 创建演讲者部分
添加新部分
背景
转到扬声器部分。 添加一个新部分并设置背景样式。
- 背景渐变
- 颜色 1：#202060
- 颜色 2：#162447
能见度
在高级选项卡中调整可见性设置。
- 水平和垂直溢出：隐藏
克隆标题行并在新部分中放置重复项
重复行
复制上面部分的标题行，并将副本放在克隆部分中。 我们将其称为标题行 2。
调整文本模块
文本
然后，在设计选项卡中设置 H3 文本设置的样式。 还要调整克隆文本模块中的 CSS ID。 接下来，更改分隔模块的线条颜色。 现在添加一个新行，其中包含 5 个相同大小的模块。 调整行的大小如下： 也增加一些间距。 将第一人称模块添加到第 1 列。 上传带有色彩效果的扬声器图像。 我们建议使用 550 x 770 像素的图像大小。 接下来为图像添加一些圆角。 然后，设置标题文本的样式。 也为正文设置样式。 不要忘记位置文本。 最后，添加一些自定义 CSS 以进行额外填充。 在行设置中，删除第 2-5 列。 将第 1 列复制四次。 更新所有克隆模块中的内容。 先说正文。 然后是图像。 现在我们将创建时间表部分。 添加一个新部分并按如下方式设置背景样式： 在高级选项卡中调整可见性设置。 从上面的部分克隆标题行并将其粘贴到此部分中。 更改标题内容。 更改克隆文本模块中的 CSS ID。 还要更改分隔线的颜色。 现在，添加具有三个相同大小的列的新行。 调整行的大小。 也增加一些间距。 将文本模块添加到第一列。 插入内容。 移至设计选项卡并设置标题文本的样式。 接下来添加一些间距。 现在添加带有您选择的一些内容的号召性用语模块。 也添加图像背景。 在设计选项卡中，设置标题文本的样式。 接下来为正文设置样式。 也增加一些间距。 然后，设置边框样式。 最后，添加自定义 CSS 以获得额外的样式。 移至第 2 列并添加文本模块。 遵循以下内容结构： 在设计选项卡中，设置文本样式。 然后设置所有标题级别的样式。 样式边框。 将第一个文本模块复制两次。 更改克隆文本模块中的内容。 删除列中最后一个模块的边框。 在行设置中，删除第 3 列。复制第 2 列。 擦除克隆列中的第三个文本模块。 更新每个新文本模块中的内容。 复制标题部分中的“注册”按钮并将其粘贴到第 3 列中最后一个文本模块下方。 将按钮的对齐方式更改为左对齐。 稍微调整文字大小。 复制计划部分的第一行。 更改克隆文本模块中的内容。 调整号召性用语模块的内容。 也更改背景图像。 也调整文本模块中的内容。 最后一部分专门用于注册。 添加一个新部分并按如下方式设置背景样式。 您将在上面的下载文件夹中找到页脚图形。 也调整部分的间距。 并在高级选项卡中更改可见性设置。 现在添加一个包含一列的新行。 添加一个隐形分隔线作为该部分的锚链接。 插入链接到所有“注册”按钮的 CSS ID。 添加具有两个相等列的第二行。 调整行的大小设置。 将倒数计时器模块添加到第一列。 添加事件的内容和日期。 接下来为背景设置样式。 在设计选项卡中，设置标题文本的样式。 设置数字文本的样式。 此外，标签文本。 然后，调整行的大小。 也添加一些填充。 最后，设置边框样式。 将新的联系表单模块添加到第 2 列。删除消息字段。 输入每个字段的设置。 在设计选项卡的布局下，单击“制作全角”。 对第二个字段执行相同操作。 返回一般联系表单设置并添加一些内容。 然后，设置字段的样式如下： 标题文本的样式也是如此。 调整按钮自定义样式。 不要忘记调整边界半径。 最后，添加自定义 CSS 以进行额外填充。 我们完成了！ 让我们再看看不同屏幕尺寸的着陆页设计。 你做到了！ 您的虚拟峰会登陆页面看起来如何？ 将此设计用于您自己的虚拟峰会或网页设计客户。 导航针对转换进行了优化，并提供了恰到好处的信息量。 我们还添加了滚动部分分隔符，以获得一些额外的视觉效果。 请在留言中让我们知道你的想法。 您是下载布局还是按照步骤操作？
标题文字
自定义 CSS
调整分频器
线
添加新行
列结构
浆纱
间距
将人员模块添加到第 1 列
文本
图片
图片
标题文字
文章主体
位置文本
自定义 CSS
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
重复第 1 列
克隆列
调整新人物模块的内容
文本
图片
4. 创建计划部分
添加新部分
背景
能见度
克隆标题行 2
重复行
调整文本模块
文本
自定义 CSS
调整分频器
线
添加新行
列结构
浆纱
间距
将文本模块添加到第 1 列
文本
标题文字
间距
将号召性用语添加到第 1 列
文本
背景
标题文字
文章主体
间距
边界
自定义 CSS
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
将文本模块添加到第 2 列
文本
文本
标题文字
边界
克隆文本模块 2 次
克隆文本模块
调整新的文本模块
文本
删除第三个文本模块的边框
边界
删除第 3 列和克隆第 2 列
克隆列
删除和调整文本模块
删除文本模块
调整内容
克隆按钮模块并在第 3 列中放置重复项
克隆按钮
调整按钮模块
结盟
按钮自定义样式
克隆计划部分的第一行
克隆行
调整第 1 列中的文本模块
文本
调整号召性用语模块
文本
背景
调整文本模块
文本
5. 创建寄存器部分
添加新部分
背景
间距
能见度
添加新行
列结构
添加分频器模块
能见度
CSS ID
添加新行
列结构
浆纱
将倒数计时器模块添加到第 1 列
文本
背景
标题文字
数字文本
标签文字
浆纱
间距
边界
将联系表单模块添加到第 2 列
元素
字段布局
文本
字段
标题文字
按钮自定义样式
边界
自定义 CSS
padding-bottom: 30px;
预览
桌面
药片
移动的
这是一个包装