[05] 在 Elementor 中构建主页

文章来源 https://wpeyes.com

在上一课中，我们自定义了设置并构建了我们网站的布局。现在有趣的是：我们已准备好开始使用 Elementor 构建我们的主页！
回顾我们的设计，我们将构建的第一个部分是英雄部分。此部分由多个元素组成，既堆叠又并排排列，在这里，您将学习如何完全自定义和设置部分、列和小部件的样式。
以下四个部分在结构和内容上彼此非常相似，因此我们将利用它来发挥我们的优势，使用工作流快捷方式，例如复制、复制和粘贴元素。
最后一节的结构更简单，因此我们将继续以我们从前面几节中学到的技能为基础，并介绍更多工作流程技巧。
通常有不止一种方法可以实现任何布局，并且由于我们为初学者设计了本课程，为了构建 SImaya，我们选择使用更直接的结构化方法进行教学。
好的，让我们开始建造吧！我们将从设置一个容器开始，该容器将保存英雄内容。
返回编辑器，单击加号图标创建一个新部分，然后选择一列作为其结构。接下来，我们将添加一个内部部分，这是一个次要部分，可以嵌套在主要部分中（以帮助构建其他元素）。单击小部件菜单以显示所有可用的小部件，然后将内部部分小部件拖放到您的列中。
在编辑器中放置任何小部件后，它会自动被选中，并且所有可用的设置都会显示在左侧面板中。如果某个小部件被取消选择，只需单击它即可返回其设置。
默认情况下，一个部分获取放置在其中的小部件的高度。但是您也可以选择指定一个部分的最小高度，这意味着该部分将始终至少占据指定的高度，而不管其内容如何。
为此，在布局中，为高度选项选择最小高度，并将其设置为 700 像素
Elementor 允许您向任何部分、列或小部件添加背景颜色或图像。
因此，让我们继续为该列添加背景颜色。您可以在“样式”选项卡中找到大部分样式设置，因此单击“样式”，对于背景类型，选择“经典”。
对于颜色，单击全局图标，然后选择我们之前在设置设计系统时创建的全局颜色“葡萄”。
好的！现在容器已准备就绪，让我们开始添加小部件。
我们将从第一个标题开始。单击小部件菜单，然后将标题小部件拖放到内部部分的第一列中。
输入您的文字，然后……哎呀……它去哪儿了！？
添加小部件时，默认情况下它会自动选择全局颜色；在本例中，它与我们的背景颜色相同。
要使标题可见，请转到样式选项卡，然后选择全局颜色杏仁色。好多了！
在排版中，我们将通过单击铅笔图标并自定义其样式来稍微更改默认字体以匹配我们的设计。我们没有为此标题创建全局字体，因为我们只在我们的网站上使用过一次这种特定样式。
现在回到内容选项卡，将文本居中对齐。为了节省一些时间，我们将复制此标题以创建子标题，方法是右键单击标题并选择复制，
或使用键盘快捷键Command 或 Control D。
现在选择这个标题。并输入副标题文本。
接下来我们将更新 HTML 标签。每次添加标题小部件时，都会应用默认的 H2 HTML 标记。标题标签在页面内建立文本层次结构。H 数字越小，标题越重要，最好相应地设置它们。由于这是副标题，因此将其切换为 H3。
现在让我们更改字体样式。对于这一个，我们将选择全局字体“Secondary”。伟大的！
现在我们将添加一个按钮。从小部件菜单中，将按钮小部件拖放到标题下。更新文本，并将其居中对齐。
我们需要这个按钮来将访问者带到我们的菜单页面，所以我们要做的第一件事就是将它链接起来。通过在此处键入其名称，将弹出一个或多个建议。只需选择正确的页面，瞧，它已链接！
现在让我们设计它。在排版中，选择“按钮文本”全局字体。
对于按钮的背景，我们的设计要求透明背景。要设置此项，请单击色样并将控制不透明度的滑块一直拖动到左侧，以获得完全透明。
由于我们将在设计中再次需要透明度，因此让我们将其保存为全局样式。我们还可以直接从编辑器添加全局样式，而不是像我们设置设计系统时那样返回站点设置。
点击加号图标，输入“Transparent”命名；然后单击“创建”。如您所见，它现在已添加到我们的全局颜色中。
下面，我们将设置按钮边框的样式。在边框类型中，选择纯色并将其宽度设置为 1px。
将其全局颜色设置为杏仁色，并将边界半径设置为零，以删除任何默认的圆角。
现在让我们设置填充。简而言之，填充将在边框和内容之间添加空间，给内容一些喘息的空间。内容周围的空间量通过在此处输入值来控制。默认情况下，链接图标处于活动状态，这意味着更改任何值都会将更改应用到每一侧。
要停用链接值并在每一侧启用不同的值，请单击链接图标，这将取消选择并取消链接值。我们将根据设计调整按钮的内边距。
接下来我们将更新按钮的悬停状态，即鼠标悬停时按钮的显示方式。单击悬停选项卡，并将文本颜色更改为葡萄。选择经典作为背景类型，选择杏仁作为背景颜色。
添加悬停动画会给它带来俏皮感。我们会选择收缩。
将鼠标悬停在按钮上进行预览。看起来不错！
英雄中的下一个元素是汤图像。
因此，在小部件菜单中，将图像小部件拖放到第二列。
然后单击此处选择您的图像。
您可以通过单击“上传文件”选项卡然后单击“选择文件”来上传图像，或者您也可以像这样简单地拖放它。
为获得最佳实践，请确保您的图像具有描述性文件名。然后添加标题和替代文本。这使您的网站更易于访问，并有助于提升您的网站在搜索结果中的排名！
上传图像时要记住的另一个重要事项是文件大小。尽量将图像大小保持在 200 KB 或更小，因为它们可能会影响您网站的资源和速度。
构建网站时最常见的问题之一是：“网络图像的正确尺寸是多少？”
您可以根据常见的屏幕尺寸计算图像的尺寸。最常见的（桌面）屏幕尺寸是 1920 x 1080，因此理想情况下，2000 像素宽的图像非常适合占据整个屏幕宽度的英雄部分。
在我们的例子中，图像的宽度大约是屏幕的一半，所以 1000 像素宽就足够了。好的，一旦您选择了图像，请继续并单击“插入”。
为了使图像无缝融入背景，我在创建图像时使用了与英雄部分相同的颜色背景。实现此效果的另一种方法是使用具有透明背景的图像。
现在让我们在 Hero 部分再添加一列，我们将在其中放置社交图标。
右键单击第二列，然后选择添加新列。
伟大的。
现在转到小部件菜单，搜索社交图标，然后将小部件拖到此处。
您可以选择自己喜欢的社交图标。在我们的案例中，我们将用 Instagram 替换 Youtube。
单击以展开选项；然后单击该图标。这将打开图标库，其中包含各种免费图标供您在 Elementor 中使用！
开始在搜索栏中输入 Instagram 以快速找到它，然后单击此处插入图标。现在，为每个图标添加社交链接。在形状上，选择正方形，以匹配网站设计。
根据使用的社交图标的数量，我们可以手动选择它们将被分成的列数，或者将其保留为自动，以自动堆叠图标。我们希望我们的图标堆叠在一列中，所以我们选择 1。
好的，让我们为它们设计样式。在“样式”选项卡中，为颜色选择“自定义”。然后对于原色，选择我们之前创建的新透明全局。对于二次色，选择杏仁色。
让我们通过设置图标悬停效果来为图标添加更多交互性。对于原色，选择杏仁色，对于次要色，选择葡萄色。
至于更多的交互性，我们还可以添加悬停动画！单击悬停动画选项并选择收缩，就像我们对按钮所做的那样。
哇！谁不想点击这些链接！？
该列对于社交图标来说有点宽，所以让我们改变它的宽度。您可以从右边缘单击并拖动该列，以直观地调整列宽……或者选择该列，然后输入精确的列宽值。
列宽以百分比衡量，因此输入数字 5 会将列设置为占总部分宽度的百分之五。这看起来很棒，在这里。
现在，英雄部分唯一要做的就是将小部件垂直对齐到中间。
可以通过部分和内部部分中的布局设置来控制小部件的垂直对齐方式。
选择内部部分，然后在垂直对齐中选择，选择中间。凉爽的！
这样，英雄部分就完成了！
现在我们准备创建第二部分。正如我们在设计中看到的那样，此部分将通过图像和一些信息文本提供有关 Simaya 的一些基本信息。
单击此处添加新部分并选择两列结构。
我们要将最小高度设置为 VH，以创建一些垂直空间。VH 代表视口高度。它是一个等于浏览器窗口大小的单位。因此，100VH 等于窗口高度的 100%。我将输入 50VH，它给出窗口高度的一半。
伟大的！现在将“部分”中的“列位置”设置为“拉伸”。这将允许该部分内的列扩展，获得与其所在部分相同的高度！
接下来，在结构中，您可以选择一种预定义结构，以快速更改列的宽度。
我们将选择这个，这将为我们在第二列中的文本提供更多空间。
现在我们将向左列添加背景图像。选择它，然后在样式中选择经典背景，然后单击此处选择您的图像。
当我们在这里时，让我们继续上传我们将在网站上使用的所有其他图像。这样，我们以后就可以跳过上传过程了。只需从您的文件夹中选择它们并将它们放在此处即可。
上传它们后，只需为此栏选择图片，然后单击此处插入。如您所见，它会自动按比例扩展以占据该部分的整个区域。
将图像设置为背景为我们提供了额外的控制和可供选择的效果。
在附件中，默认选项是滚动，你可以看到随着页面滚动
对于我们的网站，我们将选择 Fixed Attachment，它将图像固定在背景中，给人一种网站在其上滚动的错觉。
为了进一步控制图像的显示方式，我们将编辑其背景大小。您会看到许多选项，例如 Cover，它将使图像按比例填充列的宽度和高度，或者 Contain，其中图像将始终在列内水平和垂直可见。
我们将为这个设计选择“封面”。由于我们之前选择了 Fixed Attachment，因此选择 Cover 将使图像按比例填充视口的宽度和高度，而不仅仅是列。
现在我想在列周围添加一些空白。为此，请导航至“高级”选项卡，您将在其中看到“边距”和“填充”。
这些选项将在此选项卡下的每个部分、列和小部件中找到。
众所周知，这两个选项会造成混淆，因为两者都用于创建空间，而且用户通常不确定选择哪一个。
虽然它们都增加了空间，但出于不同的原因使用它们，并获得不同的结果。
在演示差异之前，让我们用一个小部件填充该列。如果列中没有任何小部件，则不会显示某些更改，例如填充和边距。
拖动一个间隔小部件并将其放入列中。Spacers，顾名思义，创造空间。让我们也给它一些高度。现在再次选择该列，在“高级”选项卡中让我们从“保证金”开始。
边距用于在元素与其周围的内容之间创建空间。
对于像这样的列，您会看到，设置边距值会在其内容之外创建一个空间，从而使整个列变小。
填充用于在元素本身内创建空间。让我们添加一点填充以更好地理解它。
如您所见，它在列本身内部创造了空间，从而使垫片更小。
由于我们要在列外创建一些空间以匹配页面布局，因此我们将在此处使用边距。将其设置为 10 像素。
现在让我们将我们的内容添加到第二列。从小部件菜单中，将标题小部件拖放到此处。
更改其文本，并将 html 标记设置为 H3，因为这将是一个副标题。在风格上，将排版设置为次要。
接下来，从小部件菜单中拖放另一个标题。更改其文本，并在样式中更改其大小，并稍微更改字母间距。我们将继续创建一个新的全局字体样式，因为我们将再次使用这种样式。
单击加号图标并将其命名为“Section text”，然后单击“创建”。如您所见，它已经被添加到列表中了！
现在，返回小部件菜单，找到文本编辑器小部件并将其拖动到标题下方。此小部件非常适合添加和设置文本副本的样式。键入您的文本，然后在样式中将文本颜色更改为葡萄。
现在让我们调整小部件在列中的间距。单击该列，并将垂直对齐方式设置为中间。在“高级”选项卡中，对于填充，选择单位百分比，并将其设置为 10。太棒了。第二节完成。
让我们创建下一个部分。为了节省一些时间，右键单击此部分并选择“复制”。
此部分应包含三列，因此右键单击第一列，然后单击“添加新列”以插入另一列。完美的！
正如我之前向您展示的那样，Elementor 不仅允许您将小部件从小部件菜单拖放到您的页面中，您还可以在编辑器中拖动小部件、列和部分以重新排列它们的顺序。
让我们重新排列一些元素的位置以查看它的实际效果。从该列开始，单击并将其一直拖到左侧，将其放置在这里。现在，右键单击并删除此标题，并将剩余的标题拖到此列。
现在我们已经重新排列了列及其元素，我们将更新内容和样式。
单击文本编辑器小部件并替换文本。现在选择列并在“高级”选项卡中，增加填充。伟大的！
接下来，选择第二列，并在样式中替换背景图像。稍微改变一下它的位置，把它设置到中心。
现在让我们编辑第三列。选择它，然后在垂直对齐方式下，选择中间。这会将所有小部件垂直放置到中心。在样式中，给它一个背景颜色。在“高级”选项卡中，添加 10 像素的边距以匹配其他列。
现在单击标题，在样式中选择全局颜色杏仁色，以形成强烈的对比。返回“内容”选项卡，键入文本并将其居中对齐。
在“高级”选项卡中，取消填充的链接，并将左右值设置为 30%。
接下来我们需要一个按钮。由于我们已经在我们的英雄部分设计了一个，让我们节省一些工作并重新使用它。向上滑动。右键单击它，然后选择“复制”。这将复制整个小部件，包括其所有设置。
向下滚动回到该部分……再次在列内右键单击，然后选择粘贴。
现在输入您的文本，就这样，按钮就完成了。一旦我们构建了最后一个部分，稍后我们将回来将此按钮链接到页面末尾。
现在，我们将添加一个图像小部件。选择您的图像，然后将其插入。
对于此示例，我使用了透明的 png 图像，但您可以使用任何您喜欢的图像。
接下来，在样式中，将宽度设置为 20%。并做了！
随着我们添加的每个新部分，页面的长度都会增加，这会使在编辑器中导航变得更加困难。这就是导航器的用武之地。
您会在此处的面板工具栏中找到导航器。单击以打开它，或使用键盘快捷键Command 或 Control I。您会看到弹出一个新窗口，以可扩展层格式显示页面的部分、列和小部件。
单击任何项目，将直接导航到它并启用其设置。您可以拖放元素以重新定位它们，就像这样。
为了更轻松地浏览每个部分，让我们重命名到目前为止添加的部分。
双击第一个，并将其命名为“Hero”。
接下来，双击第二部分并给它起一个好记的名字。对第三部分重复此操作。
右键单击第三部分，您会在其中找到更多选项，然后选择“复制”以创建它的副本。双击它，并命名该部分。伟大的。继续并暂时关闭 Navigator。
删除第一列，因为我们在这里不需要它，并通过将第二列拖到左侧来重新定位列。更改其宽度以匹配列的三分之一，即 33.33%。
在风格上，将背景颜色更改为 Basil。
现在我们将更新内容。
单击图像小部件，并将其替换为新图像。单击标题并更新文本。选择按钮，并替换文本。无需更新链接，因为它已经连接到我们的菜单页面。
在风格上，将悬停颜色更改为罗勒色以匹配背景。
接下来，单击该列以输入其设置，并在样式中将此图像替换为新图像。就是这样！我们已经完成了这一部分！
继续前进，让我们添加另一个部分，遵循相同的设计风格。
使用我们之前学到的快捷方式打开导航器。右键单击此部分并选择“复制”。给它起个名字。并将它一直拖到底部。现在将第二列拖到该部分的末尾，然后在样式中将现有图像替换为新图像。继续并关闭导航器。
选择第二列，在样式中，将背景颜色更改为覆盆子色。替换图像，更新标题内容和按钮文本。并将其链接到“联系我们”页面
在样式中，更改悬停颜色选项以匹配背景。
接下来，单击文本编辑器，并替换文本。伟大的！
正如您在设计中看到的那样，最后一部分讲述了 Simaya 的故事。
创建一个包含一列的新部分。打开导航器，并命名该部分。
现在，还记得第三列中的 Our Story 按钮吗？
有一种超级简单的方法可以创建指向此部分的锚链接，因此当单击该按钮时，页面将向右滚动到它。我们开始做吧！
在 Advanced 选项卡中，您会看到 CSS ID 选项，它用于提供一个唯一名称，该名称只能指定给页面上的一个元素。
让我们给它起个名字“故事”。
在导航器中，单击“Since 1998”部分。在链接中，键入、主题标签和该部分的 ID 名称。
CSS ID 区分大小写，因此请务必在 ID 和链接中使用完全相同的词。
好的，让我们看看它是否有效。单击按钮。极好的！
现在关闭导航器，使用与打开它相同的快捷方式。从小部件菜单中，将标题小部件拖放到列中。将其命名为我们的故事，并将其与中心对齐。
按住Command 或 Control D复制标题。这将是副标题。单击它以更改文本..并将其设置为H3。在样式中，为排版选择一种全局字体，以匹配设计。
返回小部件，将文本编辑器拖到标题下，然后更新文本。
在样式中，将其居中对齐，然后选择全局颜色。
在高级选项卡中，我们将通过在右侧和左侧添加一些填充来控制文本内容的宽度。
完美的！
从小部件菜单中，让我们添加一个间隔小部件。
正如我之前提到的，间隔符用于创建空间，例如在小部件之间，或创建换行符。
将其高度设置为 300 像素。在高级中，将背景图像添加到间隔物。将附件设置为固定，将大小设置为覆盖。
现在，展开“高级”选项卡，通过取消链接并在小部件的顶部和底部添加边距，在上方和下方添加一些空间。
现在我们将添加我们的社交媒体图标。我们将使用我们之前在英雄部分创建的那些。
打开导航器，然后选择英雄部分。将 Navigator 窗口拖过一点，这样我们就可以在编辑器中看到图标，然后右键单击以复制社交图标。
单击最后一部分将我们带回页面底部。右键单击垫片，然后选择粘贴。
导航员万岁！
您还看不到图标，因此转到“样式”，并在此处更改辅助颜色以及悬停状态。
转到内容，并将列设置为自动。在导航器中，单击我们的故事部分，然后在高级中，将边距单位更改为百分比。键入 10 以向该部分的顶部和底部添加百分之十的边距。
好的，是时候预览了！单击第一部分跳转到页面顶部，然后关闭导航器。单击此处的图标以隐藏面板或使用快捷方式Command 或 Control P。
桌面视图中的一切看起来都很棒，我们现在已经完成了主页的桌面版本。您已经成为创建和自定义部分、列和小部件的专家。继续学习下一课，了解如何优化您的网页以实现响应式查看。到时候那里见！

Elementor入门 [05] 在 Elementor 中构建主页相关推荐

figma设计_如何在Figma中构建设计入门套件（第1部分）
figma设计 Figma教程 (Figma Tutorial) Do you like staring at a blank canvas every time you start a new pr ...
在虚幻引擎5中构建你的首款游戏 - 05 - 岩石和植物
在虚幻引擎5中构建你的首款游戏 - 05 - 岩石和植物前言介绍: 原版地址: << [功能亮点]在虚幻引擎5中构建你的首款游戏(官方字幕)_哔哩哔哩_bilibili >> ...
从入门到放弃，.net构建博客系统（二）：依赖注入
文章目录:<从入门到放弃,.net构建博客系统> 从入门到放弃,.net构建博客系统(一):系统构建从入门到放弃,.net构建博客系统(二):依赖注入上一篇中有讲到项目启动时会进行io ...
java 8中构建无限的stream
文章目录简介基本使用自定义类型总结 java 8中构建无限的stream 简介在java中,我们可以将特定的集合转换成为stream,那么在有些情况下,比如测试环境中,我们需要构造一定数量元 ...
在java中构建高效的结果缓存
文章目录使用HashMap 使用ConcurrentHashMap FutureTask 在java中构建高效的结果缓存缓存是现代应用服务器中非常常用的组件.除了第三方缓存以外,我们通常也需要在j ...
闪亮蔚蓝_在R中构建第一个闪亮的Web应用
闪亮蔚蓝数据科学 (DATA SCIENCE) Do you want to make your R code publicly available for others to use? If yo ...
fritz 使用手册_Fritz对象检测指南：使用机器学习在Android中构建宠物监控应用
fritz 使用手册 by Eric Hsiao 萧敬轩 Fritz对象检测指南:使用机器学习在Android中构建宠物监控应用 (A guide to Object Detection with F ...
在存储过程中构建动态SQL
目录介绍 sp_executesql与EXECUTE命令例1.0 例1.1 存储过程中的动态SQL 例2.0 在动态SQL中使用Like操作符,IN操作符和Order By 例3.0 - 使用LI ...
如何在 Deno 中构建一个 URL 短链生成器
作者 | 韩亦乐责编 | 欧阳姝黎原文地址:How to Build a URL Shortener in Deno 原文作者:Akash Joshi 译者:hylerrix 备注:本 ...

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

文章来源 https://wpeyes.com

Elementor入门 [05] 在 Elementor 中构建主页相关推荐

最新文章

热门文章