Elementor入门 [05] 在 Elementor 中构建主页

[05] 在 Elementor 中构建主页

文章来源 https://wpeyes.com

在上一课中，我们自定义了设置并构建了我们网站的布局。现在有趣的是：我们已准备好开始使用 Elementor 构建我们的主页！
回顾我们的设计，我们将构建的第一个部分是英雄部分。此部分由多个元素组成，既堆叠又并排排列，在这里，您将学习如何完全自定义和设置部分、列和小部件的样式。
以下四个部分在结构和内容上彼此非常相似，因此我们将利用它来发挥我们的优势，使用工作流快捷方式，例如复制、复制和粘贴元素。
最后一节的结构更简单，因此我们将继续以我们从前面几节中学到的技能为基础，并介绍更多工作流程技巧。
通常有不止一种方法可以实现任何布局，并且由于我们为初学者设计了本课程，为了构建 SImaya，我们选择使用更直接的结构化方法进行教学。
好的，让我们开始建造吧！我们将从设置一个容器开始，该容器将保存英雄内容。
返回编辑器，单击加号图标创建一个新部分，然后选择一列作为其结构。接下来，我们将添加一个内部部分，这是一个次要部分，可以嵌套在主要部分中（以帮助构建其他元素）。单击小部件菜单以显示所有可用的小部件，然后将内部部分小部件拖放到您的列中。
在编辑器中放置任何小部件后，它会自动被选中，并且所有可用的设置都会显示在左侧面板中。如果某个小部件被取消选择，只需单击它即可返回其设置。
默认情况下，一个部分获取放置在其中的小部件的高度。但是您也可以选择指定一个部分的最小高度，这意味着该部分将始终至少占据指定的高度，而不管其内容如何。
为此，在布局中，为高度选项选择最小高度，并将其设置为 700 像素
Elementor 允许您向任何部分、列或小部件添加背景颜色或图像。
因此，让我们继续为该列添加背景颜色。您可以在“样式”选项卡中找到大部分样式设置，因此单击“样式”，对于背景类型，选择“经典”。
对于颜色，单击全局图标，然后选择我们之前在设置设计系统时创建的全局颜色“葡萄”。
好的！现在容器已准备就绪，让我们开始添加小部件。
我们将从第一个标题开始。单击小部件菜单，然后将标题小部件拖放到内部部分的第一列中。
输入您的文字，然后……哎呀……它去哪儿了！？
添加小部件时，默认情况下它会自动选择全局颜色；在本例中，它与我们的背景颜色相同。
要使标题可见，请转到样式选项卡，然后选择全局颜色杏仁色。好多了！
在排版中，我们将通过单击铅笔图标并自定义其样式来稍微更改默认字体以匹配我们的设计。我们没有为此标题创建全局字体，因为我们只在我们的网站上使用过一次这种特定样式。
现在回到内容选项卡，将文本居中对齐。为了节省一些时间，我们将复制此标题以创建子标题，方法是右键单击标题并选择复制，
或使用键盘快捷键Command 或 Control D。
现在选择这个标题。并输入副标题文本。
接下来我们将更新 HTML 标签。每次添加标题小部件时，都会应用默认的 H2 HTML