Elementor入门 [05] 在 Elementor 中构建主页
发布网友
共1个回答
热心网友
在Elementor中构建主页的课程中，我们已经完成了基础设置和布局构建。现在，让我们进入主页的英雄部分设计，包括标题、图像和社交图标。我们首先创建一个容器来保存英雄内容，然后使用加号图标添加新部分，选择一列作为结构。接着，我们创建内部部分，嵌套在主要部分中，用于构建其他元素。在小部件菜单中选择所有可用小部件，将内部部分小部件拖放到列中。放置小部件后，所有可用的设置将显示在左侧面板中。如果需要调整，只需单击小部件即可返回其设置。
我们从添加标题开始，选择标题小部件，拖放到内部部分的第一列中。输入文字时，发现标题与背景颜色相同，看起来*了。要使标题可见，转到样式选项卡，选择全局颜色“杏仁色”。在排版中，我们稍微更改了默认字体以匹配设计，但并未创建全局字体，因为我们只在网站上使用过一次这种特定样式。
接下来，我们稍微调整了标题的样式，将文本居中对齐。然后，复制此标题以创建子标题，通过右键单击或使用键盘快捷键来复制，然后选择复制的标题，输入副标题文本。完成标题和副标题后，更新 HTML 标签，将标题标签从 H2 更改为 H3，以反映其在页面内文本层次结构中的位置。
我们继续添加一个按钮，选择按钮小部件，拖放到标题下。更新按钮文本，并居中对齐。按钮需要链接到菜单页面，通过输入页面名称或使用建议来完成链接设置。设计按钮时，我们选择了全局字体“Secondary”。为了获得透明背景，我们调整了背景颜色的不透明度滑块，并保存为全局样式。
下一步是添加图像，选择图像小部件，拖放到第二列。确保上传具有描述性文件名的图像，并添加标题和替代文本以提升网站可访问性。考虑到文件大小，保持在 200 KB 或更小以优化网站资源和速度。对于图像尺寸，我们使用与英雄部分相同的颜色背景，或者使用具有透明背景的图像。
我们继续构建主页，添加了一个列用于放置社交图标。通过右键单击第二列并选择添加新列来实现。选择社交图标小部件，拖放到列中，并根据设计选择合适的图标。单击展开选项，插入图标，并为每个图标添加社交链接。我们为图标选择正方形形状，以匹配网站设计，并手动选择列数以堆叠图标。
为了设计样式，我们为颜色选择“自定义”，并为原色和二次色选择全局颜色“透明”和“杏仁色”。我们还添加了悬停动画，选择“收缩”效果。为了进一步优化交互性，我们调整了按钮的宽度，使其在页面中占一定比例。完成设计后，我们预览效果，确保所有元素按预期工作。
接下来，我们构建第二部分，提供有关 Simaya 的基本信息。选择两列结构，将最小高度设置为 VH（视口高度），并调整列位置以扩展，以获得与其所在部分相同的高度。向第一列添加背景图像，并在样式中选择经典背景。上传所需的所有图像，并在页面上使用它们。我们选择“固定附件”作为图像附件，以在页面滚动时保持图像位置。
在构建第二部分时，我们添加了一个标题小部件，并根据设计调整了排版和样式。接着，我们填充了第二列，使用文本编辑器小部件添加和设置文本副本样式，调整小部件间距，并确保内容在列中居中对齐。我们为按钮创建了全局样式，并调整了图像大小和位置，以匹配设计要求。
在构建第三部分时，我们添加了一个新部分，并使用复制功能创建相似布局。通过导航器，我们轻松地重命名部分并重新排列元素位置。调整内容和样式，包括更新文本、背景颜色、边距和填充，确保所有元素符合设计要求。我们还为按钮添加了全局样式，并调整了图像大小和位置。
在构建最后一部分时，我们创建了一个包含一列的新部分，为 Simaya 的故事添加了锚链接，使其与页面其他部分无缝衔接。我们使用 CSS ID 为部分命名，并在导航器中为按钮创建锚链接。完成故事部分后，我们添加了标题和副标题，并对文本进行居中对齐和样式调整。通过间隔小部件添加额外空间，并将社交媒体图标从英雄部分复制并粘贴到最后一部分，以保持一致性。
整个过程中，我们利用 Elementor 的强大功能，如工作流快捷方式、自定义样式设置和导航器，使主页构建过程更加高效。我们从设置容器、添加元素、调整样式和优化交互性等方面全面构建了主页，确保每个部分都符合设计要求和用户体验。通过遵循这些步骤，您已经学会了如何在 Elementor 中构建专业且响应式的主页。继续学习下一课，了解如何优化网页以实现响应式查看，我们将探索更多功能和技巧，帮助您提升网站设计能力。欢迎访问 我的主页，找到更多文章与教程，期待与您在下一次课程中相遇！
