如何在 2 分钟内设计自定义 Elementor 标题

image_print阅读模式

标题部分是您网站的焦点部分。用户进入网站后开始使用这部分进行导航。访问者可能没有兴趣顺利浏览结构复杂的网站。这就是为什么您需要保持标题部分简单且可根据您的网站进行调整。

94% 的人表示网页设计是他们不信任网站的原因。布伦丹·赫福德,SEO 总监

创建一个好看的标题也是一项至关重要的任务。借助 Elementor,您可以编写自己的设计、重新设计并提供合适的结构,而无需任何技术专业知识。

在本教程中,我们将向您展示为您的 WordPress 网站设计自定义 Elementor 标头的简单过程。

让我们深入探讨-

如何创建和自定义 Elementor 标题

如何设计自定义 Elementor 标头

在我们博客的这一部分中,我们将向您展示如何以两种简单的方式创建和自定义 Elementor 标头。

1. 使用 Elementor 的主题生成器创建标题
2. 使用 Elementor 小部件从头开始创建和自定义 Elementor 标题

您需要 Elementor导航菜单小部件和预制的标题块才能使用标题设计。此外,在开始设计网站的标题之前,您需要考虑以下事项。

  1. 元素(免费
  2. 元素专业版

请确保您已安装并激活Elementor 的免费版和高级版。

第一种方法:使用 Elementor 的主题生成器创建标题

主题生成器功能是使用 Elementor 创建标题的最简单方法。这是 Elementor 的核心功能,并且非常易于应用。

为此,请导航Template->Theme Builder->Header。在这里,您将获得创建模板的不同选项。其次, 单击顶部的“添加新项”按钮或“添加新标题”按钮来创建您的第一个标题模板并等待下一个屏幕。

Elementor 主题生成器添加新标题

一段时间后,您可以看到如下图所示的模式弹出窗口。在这里,您需要选择模板类型->标题并写入模板的正确名称。然后单击“创建模板”按钮保存模板。

创建标题模板

最后,您将看到带有预制页面的Elementor 库在这里,您需要选择一个合适的标题块并将其安装在您的网站上。

插入 Elementor 标题模板

第二种方式:使用 Elementor 小部件从头开始创建和自定义 Elementor 标题

现在是时候展示为 Elementor 站点创建标头的第二种方法了。确实,第一种方法可以节省很多时间。但第二种方法会给你更多的设计自由。因为您可以从头开始设计整个元素。

让我们一起努力吧。

第一步:添加网站徽标小部件

首先选取三列。作为标题的一部分,在某些情况下,您需要徽标、搜索栏和社交按钮。您可以在 Elementor 小部件库中获取所有这些元素。

要添加站点徽标,请选择小部件并将其粘贴到画布上。

添加 Elementor 站点徽标小部件

现在根据您的方式定制它。假设您可以更改其大小、对齐它、添加标题和自定义链接。

网站标志内容

您还可以对徽标小部件进行风格化。为此,请点击“样式”按钮。您可以找到某些定制的相关选项。例如宽度、高度、不透明度、CSS 过滤器、边框类型等等。

设置站点徽标宽度

第二步:添加导航菜单小部件

现在主要部分是添加导航菜单小部件。这是 Elementor 的专业功能。您必须将您的软件包从免费升级到专业版。

要添加导航菜单小部件,您需要考虑某些事项。

  • 向您的网站添加重要页面
  • 从外观>菜单区域创建菜单
  • 将所需的页面添加到您的菜单中
  • 最后保存菜单
创建菜单

添加完基本页面并创建菜单后,导航到 Elementor 设计画布。之后,从 Elementor 小部件库中选择导航菜单小部件并将其粘贴到标记区域。

添加导航菜单

立即出现内容定制选项。浏览每个部分并体验您想要使用的最佳设计模式。例如菜单布局、对齐方式、指针、动画等等。您还可以决定菜单在移动设备上的外观。

导航菜单内容

该小部件具有三种类型的布局:水平、垂直和下拉。选择最适合您的一款。

导航菜单不同的布局

同样,您可以通过点击“样式”按钮来设计小部件的样式。因此,请更改版式、文本颜色和您喜欢的其他样式设置。

导航菜单样式选项

更改与您的网站设计相匹配的颜色模式。为此,请单击“文本和指针悬停颜色”并尝试不同的设计。

导航菜单悬停颜色

除了添加通用设计之外,您还可以使用高级设置执行更多操作。例如边距、填充、Z-index、CSS ID、动作、动画等。

导航菜单高级设置

第三步:添加搜索表单小部件或社交分享按钮小部件

大多数网站在标题部分都使用这两个功能。您可以添加搜索表单小部件或社交共享按钮。

搜索小部件并将其拖至标记区域。

添加搜索表单

您可以在内容区域中更改其外观,例如最小、经典完整小部件。另外,添加占位符并调整表单大小。

搜索表单内容

转到“样式”部分,并根据整体标题颜色模式对表单样式进行必要的更改。例如项目大小、文本颜色、背景颜色、边框颜色、框阴影、边框大小等。

搜索表单样式选项

高级部分可供您添加更高级和更有利可图的功能。您可以调整边距、填充、添加 Z 索引、CSS、运动功能等。

搜索表单高级选项

完成设计后您可以检查其在平板电脑和移动设备上的响应能力。

响应式导航菜单

快速指南:如何使网站适合移动设备

Elementor 标题的最终预览

应用完所有设计和功能后,它的外观就是这样的——

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 的大型菜单。

https://youtube.com/watch?v=WB5Gp1SRi74%3Ffeature%3Doembed

阅读快乐超级菜单文档!

结论

在网站上保持简单的导航非常重要,以便用户可以轻松浏览您的网站。良好的用户体验可以提高性能并帮助用户找到他们喜欢的内容。此外,它还会为您的网络内容增加价值,同时提高整体 SEO 性能

所以决定权在你手中。您可以按照我们上面分享的两种方式进行操作。我们建议您选择最合适的一个。

使用 Elementor 导航菜单和 Happy Mega Menu 小部件,您可以轻松创建所需的设计,例如Elementor 标题和其他网站设计材料。

0

评论0

请先
GB/T50050-2017 工业循环冷却水处理设计规范(附条文说明)
GB/T50050-2017 工业循环冷却水处理设计规范(附条文说明)
6分钟前 有人购买 去瞅瞅看
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
扫码关注后会自动登录网站