Elementor入门 [07] 创建“我们的菜单”页面

时间：2023-07-24 19:27:01 | 来源：网站运营

时间：2023-07-24 19:27:01 来源：网站运营

Elementor入门 [07] 创建“我们的菜单”页面：

https://www.zhihu.com/video/1596830245587554305上节课我们学习了 Elementor 中的响应式编辑，针对设备优化了首页，并在 WordPress 中指定了首页。
在本课中，我们将创建“我们的菜单”页面、学习新的小部件并复习一些新技术，以帮助您立即成为专业人士！
如果您还没有看过本课程之前的课程，我强烈建议您观看它们，因为我们将在之前所学的基础上进行构建。
好的，让我们开始吧！我们将从英雄部分开始，正如您从我们的设计中看到的那样，它包括两个标题、一个文本编辑器小部件和一个间隔小部件……
等一下！我们之前不是设计过类似这样的版块吗？我们肯定有！主页的最后一部分具有与本部分相同的小部件。
如果您的网站上有非常相似的部分，则无需从头开始重新设计。
我将分享一些工作流程方法，帮助您在 Elementor 中构建网站时节省时间。
好的，为了重用我提到的那个部分，我们需要重新打开主页。您可以点击键盘上的 Escape 按钮，然后单击此处退出仪表板。
另一种快速退出编辑器的方法是键入Command 或 Control E，这会打开查找器。
Finder 可帮助您轻松找到您的内容并立即在 WordPress 中导航！
只需键入“主页”一词，主​​页就会显示出来。然后按住Command 或 Control键并单击链接，以在新选项卡中将其打开。
在上一课中，我们复制了元素并将它们粘贴到整个页面的不同部分。现在我们将使用相同的方法从该页面复制，并粘贴到我们的菜单页面！
打开 Navigator，右键单击 Our Story 部分，然后单击 Copy。现在返回我们的菜单页面。右键单击、粘贴或使用键盘快捷键Command 或 Control V。
奇迹般有效。
好的，现在让我们自定义它。单击副标题，并更新文本。在风格上，将颜色更改为罗勒。现在选择第二个标题。
添加您的文本，并在样式中更改颜色。接下来，将文本编辑器小部件拖到分隔符下方，然后键入您的文本。在样式中，将颜色更改为罗勒。
选择间隔物，然后在“高级”选项卡中选择一个新的背景图像。
右键单击社交图标，然后将其删除，因为此页面不需要它们。
从小部件中，将图标小部件拖放到文本编辑器下。您可以上传自己的图标，或者像我们的例子一样，从图标库中选择一个。在搜索中键入“人字形”，选择可用的人字形之一，然后将其插入。在风格上，改变颜色。将大小更改为 20。
现在选择该部分，然后在高级中添加 5% 的边距……太棒了！英雄部分已准备就绪。
这个部分，包括它的小部件和样式，将在我们网站的其余部分再次使用，所以让我们好好利用它。
重用部分的另一种方法是将其另存为模板。
为此，请右键单击该部分，然后选择另存为模板。给它一个好记的名字，然后点击保存。
以后要访问您的模板，您可以通过单击此处的灰色文件夹图标找到它们。这会打开模板库，在“我的模板”中，您会找到所有自己保存的模板。然后将鼠标悬停在模板上，然后单击插入，将其添加到您的页面。
正如您刚刚看到的，复制元素并将它们保存为模板可以节省宝贵的时间，我鼓励您将这些过程合并到您的工作流程中。
让我们继续下一节。创建一个包含一列的新部分。正如我们之前所做的那样，我们将为这些部分命名，以便我们可以在整个页面中快速导航。打开导航器，命名 Hero 部分……以及 Starters 部分。
现在关闭导航器，并从小部件菜单中搜索分隔线小部件，并将其拖到该部分中。
分隔线小部件在各个部分之间创建了一种有组织且美观的分隔，带有可自定义的线条，您可以将其与图标甚至文本结合使用。
要将文本添加到分隔线，请单击此处，然后键入您的文本。
我们暂时看不到它，因为它的默认颜色与背景颜色相同。
让我们处理一下，这样我们就可以看到我们正在处理什么。转到“样式”选项卡并更改分隔线的颜色。
在文本中，选择 basil 作为字体颜色...并将排版全局样式...设置为 Section。伟大的！
从小部件菜单中，将内部部分拖放到分隔线下方。右键单击此处...并选择添加新列。
我们将继续创建我们提供的菜单的第一项。
正如我们在上一课中所做的那样，首先为第一列逐个添加小部件并为其设置样式。
从小部件菜单中，将图像小部件拖放到第一列中。
选择一个图像，然后在样式中调整宽度。
返回小部件菜单，将标题小部件拖到图像下方。键入您的文本，并将 html 标记更改为 H3。现在将它对齐到中心。在样式中，将颜色更改为罗勒色，并将排版设置为全局样式“菜单标题”。
从小部件中，拖入文本编辑器小部件，然后键入您的文本。
现在右键单击标题，然后选择复制。
将它拖到其他小部件下方，然后更改文本。
将其 HTML 标记设置为 H4，然后在样式、排版中，
选择……嗯。这里没有什么是有效的。因此，让我们为价格文本设置另一种全局字体样式。
选择铅笔图标以设置自定义字体样式，并更改字体大小。将其权重设置为 600。然后在转换中，通过将其设置回默认值来删除大写。现在单击加号图标，输入名称...并将其另存为全局字体。完美的！
选择列，然后在高级选项卡中，将单位更改为百分比，取消链接值，并添加一些填充，以便为小部件提供更多空间。伟大的！
现在我们了解了使用不同的小部件创建每个部分是多么容易，让我们谈谈在 Elementor 中构建的更优化方法。
当您熟悉 Elementor Editor 并获得更多经验时，您会发现自己想出了简化和优化网站构建过程的方法。
例如，像图标框……以及图像框这样的小部件……包括一个图像、一个标题和一个描述，所有这些都在一个地方。以正确的方式使用它们将减少小部件的数量，甚至可以用来从中创建整个部分。以这种方式设计不仅可以提高性能，还可以减少页面的加载时间。双赢！
要查看其工作原理，让我们以更优化的方式重新创建此菜单项。
将图像框小部件拖动到列的顶部。
添加图像……然后输入标题……最后输入文本……
在样式中，有很多选项可以设计和定位每个元素。花点时间，继续尝试所有选项！
让我们稍微改变一下图像宽度。在内容下，将标题的颜色设置为罗勒色。对于排版，选择全局样式、菜单标题。其他一切看起来都很棒。
右键单击，然后删除之前的图像、标题和描述。并且只留下价格。
极好的！我们实现了相同的设计，但小部件更少！
现在我们继续，将列复制两次.. 并删除多余的列.. 单击图像框，替换标题和文本。单击价格，并更改其内容。
太棒了！
对第三部分重复最后一次，我们就完成了！
有时，小部件中存在的文本量会导致不同的部分高度，从而在小部件的位置之间造成不平衡，就像这里的价格一样。
保持原样并没有错，但如果您希望所有价格都处于准确位置，则有一个简单的解决方法。
选择内部部分，在垂直定位下，您会发现不同的选项，使您能够控制小部件在部分内的位置。
选择“Space between”，顾名思义，它会在元素之间创建空间，将第一个元素定位在列的顶部，将最后一个元素定位在列的底部。现在看价格，都在一个高度！这是一种超级简单但经常被忽视的方法，可以使像素完美。
返回小部件，拖入一个间隔小部件。将其高度设置为 300 像素并在“高级”选项卡中，取消选中这些值，并添加一些边距。
接下来，展开背景选项卡并选择一个图像。
将附件设置为 Fixed，将背景设置为 Cover，这样图像就可以很好地覆盖垫片。
伟大的。
现在，还记得我们在英雄部分创建的箭头图标吗？
让我们创建一个锚链接，将图标连接到这个部分，这样当有人点击它时，它会直接滚动到 Starters！
选择该部分，然后在“高级”选项卡中，输入 ID 名称“start”。
现在向上滚动找到按钮，然后单击它。在链接下，键入井号或主题标签，以及该部分的 ID。同样，请务必键入与 ID 名称完全相同的名称。
让我们测试一下。而且，瞧！
让我们继续主电源。右键单击该部分并复制。
选择第二部分后，转到“高级”选项卡。您会注意到 CSS ID 是空的。正如我之前提到的，CSS ID 应该在您的页面上只出现一次，因此重复的元素不会复制 ID ......
ID 名称必须是唯一的，因此在创建多个锚链接时请记住使用不同的名称！
现在打开导航器，并将该部分的名称更改为“Mains”。很好
选择分隔线，并更改其文本。在样式中，将分隔线的全局颜色设置为葡萄色，以及文本的颜色。
选择图像框，然后为 Mains 选择一个图像。更改标题和描述。
然后转到样式选项卡，在内容下，为标题和描述选择全局颜色葡萄。
现在选择标题。更改价格和风格。将颜色也设置为葡萄。
我们将为下一个项目重复这些步骤……。
还有下一个……
现在选择垫片，然后在“高级”选项卡中，为电源选择合适的图像。
快好了！只剩一节了！右键单击该部分，然后复制它。
甜点时间到了！打开导航器并将该部分命名为“甜点”。现在，选择分隔线……并更新文本。在样式中，将分隔线和文本的全局颜色都设置为覆盆子色。
选择图像框，然后为甜点选择图像。
更改标题和说明。然后转到“样式”选项卡，在“内容”下，将标题和描述的全局颜色设置为覆盆子色。
选择标题。更改价格和样式。同时设置覆盆子色。
对下一列和下一列重复这些步骤。
现在剩下的就是更改间隔图像。选择它，然后在“高级”选项卡的背景下，使用您选择的图像。
伟大的。让我们看一下页面。看起来很好吃！所以我们完成了，对吧！？好吧……不尽然
该页面在桌面上看起来确实很棒，但以响应模式预览每个页面非常重要，以确保它们在所有视口中正确显示。
使用键盘快捷键Command Shift M以响应模式直接进入平板电脑视图。它看起来不错，但就我个人而言，我更愿意减少列之间的空间量。单击第一个，然后在高级选项卡中，将填充设置为 10%。
我们将使用我们之前学到的热键，将此样式快速复制并粘贴到其他列。
键入Control 或 Command C以复制样式。选择下一个，然后按住Control 或 Command Shift V粘贴样式。对其他列也重复这些步骤。
也很简单……馅饼！现在让我们看看该页面在移动设备上的外观。
向下滚动，该页面在移动设备上看起来很完美。来得正是时候，因为设计这个令人垂涎欲滴的页面让我饿了！单击更新，并预览页面。看起来很棒，如果我自己这么说的话。
好的，我们现在已经完成了“我们的菜单”页面，了解了新的小部件，并向我们的保留曲目中添加了更多技术。
在下一课中，我们将创建“联系我们”页面，这是我们网站的最后一页。我们将深入研究“高级”选项卡，以了解有关构建网站时的优化和最佳实践的更多信息。所以去吃点甜点，然后点击继续观看！

请访问我的主页https://wpeyes.com，找到更多文章与教程。