在上一课中，我们为餐厅网站 Simaya 构建了主页，并介绍了页面结构、边距和填充以及工作流快捷方式等概念。
在本课中，我们将介绍 Elementor 中的响应式编辑基础，优化 Simaya 主页以实现响应式查看，并设置此页面以在网站上显示为主页。
现在有这么多人从不同的设备访问网站，针对不同的视口或屏幕尺寸优化您的网站比以往任何时候都更加重要。
Elementor 为您提供了针对不同设备预览您的网站并相应地优化您的设计的工具。
只需进行一些调整，我们就能使主页在平板电脑和移动设备上完美显示。所以我们走吧！
让我们从 Elementor 中的响应式功能开始。 首先，在底部面板上单击此处进入响应模式。
在屏幕顶部，您会看到此面板，其中显示了移动设备、平板电脑和桌面视口图标。
单击视口图标将以选定的屏幕尺寸预览页面
在小部件、列或部分的设置中，任何选项旁边的视口图标的存在表示在那里所做的更改将专门应用于该视口。
重要的是要了解，在大多数情况下，Elementor 中的响应式编辑是从较大的视口向下继承到较小的视口。因此，这意味着桌面响应设置向下应用到平板电脑以及移动视图，并且对平板电脑设置的更改将应用到移动设备。
由于我们已经为桌面视图设置了所有内容，我们准备好优化平板电脑视图，并将这些原则应用到设计中。
让我们来看看英雄部分。当在平板电脑模式下分布在三列时，内容会被切断。让我们修改它们的显示方式，给每个元素应有的关注。
我们将把第一列移到顶部，并让它占据该部分的整个宽度。
为此，请选择列并为列宽百分比键入 100。
哒哒！如您所见，该列现在占据了该部分的整个宽度，将下方的其他两个列推入了下一行。
发生这种情况时，这两列的宽度会重置，因此选择第二列并将其宽度设置为 90。
现在我们只需要在内部部分的顶部添加一些填充，就像这样。
向下滚动，我们可以看到下面的部分在平板电脑上看起来已经很棒了。进一步向下滚动……嗯……这部分可以稍微调整一下。
选择它，并将最小高度设置为 300 像素。
让我们使用快捷方式将此设置快速应用到下面的两个部分。右键单击该部分并选择复制。现在右键单击下面的部分并选择粘贴样式，或使用键盘快捷键：Command 或 Control Shift V。这将应用复制部分的设置，而不更改内容。
右键单击下一部分并再次粘贴样式。整洁的！
现在选择这个标题，调整它的布局。在高级中，取消链接填充。这会将填充重置为零。
现在在接下来的两个标题上复制和粘贴样式。
向上滚动，然后选择右列。在 Advanced 中，添加 5% 的内边距，为内容提供更多的空间。对接下来两节中的匹配列执行相同的操作。在这种情况下我们没有使用粘贴样式，因为它也会粘贴列背景颜色。
好的，这些部分很好。向下滚动到最后一部分。这里的标题有点大，所以我们需要为平板电脑更新它的大小。
我们将在网站上再次使用此标题，因此最好从全局样式对其进行编辑，而不必再次进行此更改，下次我们在平板电脑上使用此样式时。
单击标题，然后在“样式”、“排版”中单击全局图标。您会在这里看到一个齿轮图标。单击它，进入全局字体设置。现在单击主要样式的铅笔图标，并更改大小。由于我们处于平板电脑模式，这不会影响我们之前设置的桌面字体大小。
伟大的。务必更新，然后返回编辑器。让我们快速浏览一下标题。完美的！
现在让我们来看看手机。
切换到移动设备后，编辑器会一直向下滚动，所以我将拉起我方便的导航器（现在我知道你知道那个快捷方式了！）并缩放回第一部分。
默认情况下，在移动设备上，每一列都会占据页面的整个宽度。所以我们不需要手动一一调整列的大小。
字体大小对于台式机和平板电脑来说看起来不错，但对于移动设备来说有点大。由于它是我们只在网站上使用一次的自定义样式，因此无需进入全局设置。
单击此标题，并在样式中更改字体大小。由于我们处于移动视图中，因此此更改不会影响平板电脑或桌面视图。
向下滚动并调整社交图标，方法是选择它们并将列设置为自动。
再向下滚动一点，您会看到我们有两个相邻的文本部分。实际上，我们可以通过转到“高级”、“响应”并将“反转列（移动）”切换为“是”来反转响应式视图中列的显示顺序。
好的，让我们调整纯色列的布局，使它们与其他列成比例。单击第一个，然后在高级中添加 15% 的填充。对其他两个纯色块列执行相同的操作。
太好了，快完成了。向下滚动到最后一部分，在高级中，取消链接并在顶部和底部添加一些边距。
然后选择文本，并添加一些 Padding，如您所见，调整布局，使其更易于阅读。完美的。
我们的响应式编辑现已完成。
转到保存选项所在的底部面板，然后单击“更新”以保存更改。
回想一下，我们已经从 WordPress 仪表板发布了我们的页面，但对于尚未发布的页面，该按钮将显示“发布”。
好了，首页的布局和设计就完成了。我们还有最后一步，就是让 WordPress 知道此页面是网站的主页，以确保访问者在输入您的 URL 时始终会登陆此处。
单击左上角的菜单，然后单击退出到仪表板，返回到 WordPress。在左侧，将光标悬停在设置上，然后单击“阅读”。
确保选择了静态页面并展开列表以查看可用页面。选择主页。点击保存，您的主页就完成了！
太好了，您现在知道如何使用 Elementor 的响应选项来优化您的网页。
在下一课中，我们将使用您目前所学的内容以及新概念（包括新的小部件和布局）构建“我们的菜单”页面！我们还将学习如何以其他方式重用元素，以及将页面保存为模板，所以请继续观看以了解如何操作。
