创建从站点标题中的菜单按钮启动的响应式弹出菜单。
您将学习如何创建一个弹出菜单：
- 引人入胜、实用且美观
- 在移动设备上响应
https://youtube.com/watch?v=_sJRHSmIpp8%3Ffeature%3Doembed%26enablejsapi%3D1%26origin%3Dhttps%253A%252F%252Felementor.com
设计弹出窗口及其内容 #
- 转到Templates > Popups > Add New并为您的新 Popup 命名。（另一种方法是按CMD+E或CTRL+E打开Finder，搜索 Popup ，选择Add New Popup，然后给它一个名字。）
- 选择预先设计的弹出窗口模板或关闭库覆盖并从头开始设计您的弹出窗口。对于此示例，我们将自己设计，但您也可以在 Elementor Pro 弹出窗口模板库中找到此模板。只需在 Popups 库中搜索“菜单”即可找到它。
弹出 > 布局选项卡 #
- 宽度：设置为 85vw
- 覆盖：隐藏
- 入口动画：淡入
- 动画时长：2 秒
弹出 > 样式选项卡 #
弹出窗口 #
Box Shadow：根据需要设置这些。
关闭按钮 #
- 垂直位置：4
- 颜色：设置颜色为#878787
- 尺寸：35
弹出 > 高级选项卡 #
防止关闭覆盖：是
现在，添加一个包含两列的部分。
设计第一列 #
部分 > 布局 #
- 内容宽度：全宽
- 列间隙：无间隙
将内部部分小部件拖到第一列。
在Section > Layout > Columns Gap下，设置No Gap。
在 Section > Advanced下，将 Padding设置 为 70 px。
部分 > 高级 #
填充：顶部、底部、左侧和右侧 70。
将标题小部件拖到第一列。
在Style > Typography下，将大小设置为 60，在Weight下设置为 100。
提示：现在是调整标题的 移动设置的好时机。
创建其余的菜单项 #
- 右键单击 Heading 小部件的句柄
，然后选择 Duplicate。 - 根据需要重复复制尽可能多的菜单项。
- 编辑每个标题小部件的标题文本以正确标记每个菜单项
在菜单中添加一个按钮 #
将Button小部件拖到菜单项下方并根据自己的喜好设置样式。
在Advanced 选项卡 > Margin下，将 Top 设置为 70，然后单击响应式视口图标，单击Mobile 图标，并将 Mobile 的 margin 设置为 top 40。
将另一个内部部分小部件拖动到按钮下方的第一列。
- 在 Section > Layout > Width下，设置 Full Width。
- 在 截面 > 布局 > 列间隙下，设置无间隙。
- 在 Section > Advanced > Padding 下，将 Top 设置为 30，将 Right 设置为 70，Bottom 设置为 50，Left 设置为 70。
- 现在，右键单击列句柄
并选择删除以删除其中一列，只留下一列。
将共享按钮添加到菜单 #
将共享按钮小部件 (Pro) 拖到列中。
分享按钮 > 内容 #
- 根据需要编辑社交网络项目。
- 皮肤：最小
- 对齐方式：左
共享按钮 > 样式 #
- 按钮尺寸：1
- 颜色：自定义颜色并选择黑色 (#000000)
设计第二列 #
右键单击列的句柄以编辑列的设置。
列 > 样式 #
背景 #
- 背景颜色：设置为#000000（黑色）
- 第二种颜色：设置为#000000（黑色）
注意：虽然已经设置了新的背景颜色，但是你还看不到它，因为列中还没有内容。
创建时事通讯订阅号召性用语表格 #
将内部部分小部件拖动到此列。
右键单击列句柄并选择删除以删除其中一列，只留下一列。
内部 > 高级 #
- 边距：仅底部设置为 130
- 填充：设置为顶部 70，右侧设置为 60，底部设置为 70，左侧设置为 60
将标题小部件拖到列中
根据需要调整标题文本（即注册我们的时事通讯）和文本大小、颜色等。
在标题下拖动 表单小部件 (Pro)
形式 > 内容 #
表单域 #
- 单击名称和消息字段最右侧的 X，因为我们只需要此示例的电子邮件。
- 输入尺寸：中
- 电子邮件 > 内容> 列宽：80%
提交按钮 #
- 尺寸: 中
- 列宽：20%
- 对齐方式：右
- 图标：向右长箭头
形式 > 样式 #
形式 #
- 柱间隙：0
- 行间距：0
场地 #
- 文字颜色：白色
- 背景颜色：透明
- 边框颜色：白色
- 边框宽度：1 仅用于底部
- 排版 > 大小：10
按钮 #
- 背景颜色：透明
- 文字颜色：白色
- 边框：实心
- 边框宽度：1 仅用于底部
- 边框颜色：白色
创建产品展示 #
将另一个内部部分小部件拖到表单下方的此列中。
内部 > 高级 #
- 填充：设置为 30 仅适用于右侧
响应式 #
- 隐藏在移动设备上：隐藏
内部部分 > 布局 #
- 列间隙：无间隙
右键单击列句柄并选择删除以删除其中一列，只留下一列。
编辑列 #
栏目 > 高级 #
- 边距：仅为左侧设置 -60（减 60）
右键单击标题小部件的句柄并复制 Newsletter Heading 标题，然后将其粘贴到此列中
标题 > 样式 #
- 文字颜色：黑色 (#000000)
- 重量：700
标题 > 高级 #
- 边距：仅左侧设置为 20
列 > 样式 #
背景 #
颜色：白色（#ffffff）
边界 #
- 边界半径：所有边为 5
盒子阴影（普通） #
- 颜色：rgba(0,0,0,0.21)
- 盒子阴影>水平：0
- 盒子阴影>垂直：10
- 盒子阴影>模糊：30
- Box Shadow > Spread：-10（负 10）
- 位置：大纲
盒子阴影（悬停） #
- 颜色：rgba(0,0,0,0.21)
- 盒子阴影>水平：0
- 盒子阴影>垂直：15
- 盒子阴影>模糊：40
- Box Shadow > Spread：-10（负 10）
- 位置：大纲
拖入 标题下方的图像小部件
图片 #
暂时不要选择图像
- 图片尺寸：全
- 对齐方式：左
现在右键单击 Heading 小部件的句柄，复制它并调整复制小部件的样式。
标题 > 样式 #
- 尺寸：15
- 重量：300
现在更改每个的措辞。
右键单击列句柄并将其复制两次，这样一共有 3 列。
- 编辑中间列和最后一列的列，将Column > Advanced中的边距更改为中间列的左边距为 -40，最后一列的左边距为 -20。
- 对于每一列，编辑图像小部件，选择一个图像。甚至 .gif 图像在这里也能正常工作。
- 根据需要调整文本和边距。
调整移动 #
编辑左列中的每个内部部分
内部 > 高级 #
- 填充：所有边 25
单击 位于面板左下方的齿轮/齿轮图标 以返回弹出设置。
弹出设置 > 布局 #
- 宽度: 100vw
形式 #
将电子邮件字段和提交按钮的宽度分别设置为 80% 和 20%。
设置发布选项 #
单击发布按钮。此弹出窗口没有条件、触发器或高级规则，因此请单击保存并关闭按钮。
编辑您网站的 Elementor 创建的标题模板 #
转到模板 > 主题生成器 > 标题> 选择您的标题，然后单击使用 Elementor 编辑
单击菜单按钮小部件的句柄以编辑小部件（如果存在）或创建一个新小部件。
按钮 #
- 链接：单击动态图标并选择操作 > 弹出
- 再次单击Popup并在 Action 下选择Toggle Popup
- 在 Popup 字段中，搜索并选择您刚刚创建的弹出窗口
单击更新按钮以保存页眉模板更改
全部做完。转到您的实时站点，单击标题中的菜单按钮，然后查看您的新菜单弹出窗口。
奖励：在您的任何小部件上添加入口动画效果以添加很酷的效果。只需编辑一个小部件，转到其高级选项卡，选择其中列出的入口动画之一。
