标题部分是您网站的焦点部分。用户进入网站后开始使用这部分进行导航。访问者可能没有兴趣顺利浏览结构复杂的网站。这就是为什么您需要保持标题部分简单且可根据您的网站进行调整。
94% 的人表示网页设计是他们不信任网站的原因。布伦丹·赫福德,SEO 总监
创建一个好看的标题也是一项至关重要的任务。借助 Elementor,您可以编写自己的设计、重新设计并提供合适的结构,而无需任何技术专业知识。
在本教程中,我们将向您展示为您的 WordPress 网站设计自定义 Elementor 标头的简单过程。
让我们深入探讨-
如何创建和自定义 Elementor 标题
在我们博客的这一部分中,我们将向您展示如何以两种简单的方式创建和自定义 Elementor 标头。
1. 使用 Elementor 的主题生成器创建标题
2. 使用 Elementor 小部件从头开始创建和自定义 Elementor 标题
您需要 Elementor导航菜单小部件和预制的标题块才能使用标题设计。此外,在开始设计网站的标题之前,您需要考虑以下事项。
请确保您已安装并激活Elementor 的免费版和高级版。
第一种方法:使用 Elementor 的主题生成器创建标题
主题生成器功能是使用 Elementor 创建标题的最简单方法。这是 Elementor 的核心功能,并且非常易于应用。
为此,请导航Template->Theme Builder->Header。在这里,您将获得创建模板的不同选项。其次, 单击顶部的“添加新项”按钮或“添加新标题”按钮来创建您的第一个标题模板并等待下一个屏幕。
一段时间后,您可以看到如下图所示的模式弹出窗口。在这里,您需要选择模板类型->标题并写入模板的正确名称。然后单击“创建模板”按钮保存模板。
最后,您将看到带有预制块和页面的Elementor 库。在这里,您需要选择一个合适的标题块并将其安装在您的网站上。
第二种方式:使用 Elementor 小部件从头开始创建和自定义 Elementor 标题
现在是时候展示为 Elementor 站点创建标头的第二种方法了。确实,第一种方法可以节省很多时间。但第二种方法会给你更多的设计自由。因为您可以从头开始设计整个元素。
让我们一起努力吧。
第一步:添加网站徽标小部件
首先选取三列。作为标题的一部分,在某些情况下,您需要徽标、搜索栏和社交按钮。您可以在 Elementor 小部件库中获取所有这些元素。
要添加站点徽标,请选择小部件并将其粘贴到画布上。
现在根据您的方式定制它。假设您可以更改其大小、对齐它、添加标题和自定义链接。
您还可以对徽标小部件进行风格化。为此,请点击“样式”按钮。您可以找到某些定制的相关选项。例如宽度、高度、不透明度、CSS 过滤器、边框类型等等。
第二步:添加导航菜单小部件
现在主要部分是添加导航菜单小部件。这是 Elementor 的专业功能。您必须将您的软件包从免费升级到专业版。
要添加导航菜单小部件,您需要考虑某些事项。
- 向您的网站添加重要页面
- 从外观>菜单区域创建菜单
- 将所需的页面添加到您的菜单中
- 最后保存菜单
添加完基本页面并创建菜单后,导航到 Elementor 设计画布。之后,从 Elementor 小部件库中选择导航菜单小部件并将其粘贴到标记区域。
立即出现内容定制选项。浏览每个部分并体验您想要使用的最佳设计模式。例如菜单布局、对齐方式、指针、动画等等。您还可以决定菜单在移动设备上的外观。
该小部件具有三种类型的布局:水平、垂直和下拉。选择最适合您的一款。
同样,您可以通过点击“样式”按钮来设计小部件的样式。因此,请更改版式、文本颜色和您喜欢的其他样式设置。
更改与您的网站设计相匹配的颜色模式。为此,请单击“文本和指针悬停颜色”并尝试不同的设计。
除了添加通用设计之外,您还可以使用高级设置执行更多操作。例如边距、填充、Z-index、CSS ID、动作、动画等。
第三步:添加搜索表单小部件或社交分享按钮小部件
大多数网站在标题部分都使用这两个功能。您可以添加搜索表单小部件或社交共享按钮。
搜索小部件并将其拖至标记区域。
您可以在内容区域中更改其外观,例如最小、经典和完整小部件。另外,添加占位符并调整表单大小。
转到“样式”部分,并根据整体标题颜色模式对表单样式进行必要的更改。例如项目大小、文本颜色、背景颜色、边框颜色、框阴影、边框大小等。
高级部分可供您添加更高级和更有利可图的功能。您可以调整边距、填充、添加 Z 索引、CSS、运动功能等。
完成设计后,您可以检查其在平板电脑和移动设备上的响应能力。
快速指南:如何使网站适合移动设备
Elementor 标题的最终预览
应用完所有设计和功能后,它的外观就是这样的——
但是,如果您想让您的标题部分更加令人满意和令人惊叹,您可以从本教程中获得帮助来逐步应用所有设置。
另请阅读:如何自定义 Elementor 导航菜单和 Elementor Portfolio 小部件(教程)
使用 Happy Addons 的 Happy Mega Menu 小部件创建大型菜单,如 Puma、Adidas、Dribbble、weDevs
Happy Addons 最近推出了Happy Mega Menu小部件,它不仅允许您创建典型的 WordPress 导航菜单,还可以创建大型菜单,例如 Puma、Adidas、Dribbble、weDevs、InVision 等。
您可以将徽章和自定义图标添加到网站菜单项。此外,您还可以将预制模板添加到菜单中,使其对用户更具吸引力。
但是,您可以观看此视频教程,了解如何使用 Happy Mega Menu 小部件创建类似 Dribbble 的大型菜单。
结论
在网站上保持简单的导航非常重要,以便用户可以轻松浏览您的网站。良好的用户体验可以提高性能并帮助用户找到他们喜欢的内容。此外,它还会为您的网络内容增加价值,同时提高整体 SEO 性能。
所以决定权在你手中。您可以按照我们上面分享的两种方式进行操作。我们建议您选择最合适的一个。
使用 Elementor 导航菜单和 Happy Mega Menu 小部件,您可以轻松创建所需的设计,例如Elementor 标题和其他网站设计材料。
评论0