如何创建一个惊人的Astra主题标题?

标题对于您网页上的任何内容都至关重要,因为它们不仅服务于读者,还服务于搜索引擎。 令人惊叹且写得好的标题有可能吸引读者阅读您的帖子并增加点击次数。 标题的范围可以从 H1 到 H6,具体取决于内容的层次结构。 您的页面或文章的主标题是 H1,而 H2 是在文档中构成部分的副标题。 H3 到 H6 标题为 H2 下的文档提供了进一步的子标题。 在继续讨论 Astra 主题如何帮助您在内容中创建令人惊叹的标题之前,让我们考虑一下标题的重要性

表中的内容:

为什么标题对您的网页很重要?

这就是为什么您必须确保在文本中包含标题的原因

1. 主题识别

标头对于搜索引擎和读者选择他们在文章中寻找的关键字至关重要。 文本中的主要标题有助于识别材料主题,子标题将读者导航至其感兴趣的区域。

2. 可访问性

今天的人们大多使用屏幕阅读器浏览任何内容。 屏幕阅读器很容易拾取任何内容中的标题,这对于有效使用屏幕阅读器至关重要。 它们还使读者可以从一个标题跳到另一个标题,以达到所需的主题。

3. 搜索引擎优化

当标题使您的主题可识别时,搜索引擎将页面排名以进行搜索查询。 您使标题抬高并用适当的关键字填充的内容越多,搜索引擎将增加您的排名。

这是有关使用免费的Astra主题功能为页面创建令人惊叹的标题的指南。 请按照以下步骤选择标题。

4. 使页面可扫描

通过使用标题,您可以使页面尽可能地可扫描。 众所周知,没有人阅读整篇文章——尤其是一行一行。 这就是为什么页面具有标题很重要的原因。 在所有标题中,最重要的标题是第一个标题,因为它为整个帖子或页面设定了基调。

接下来是副标题,因为它将内容分成更适合消费的块。 不仅如此,文章的结构由标题和子标题显示。 简而言之,正确的标题集意味着您可以用引人入胜的内容吸引观众。

5.移动设备的可用性

随着时间的流逝,移动变得比以往任何时候都更具统治力。 毫无疑问,网站将比以往任何时候都从移动设备获得更多的流量。 因此,如果您将内容正确放置,势必会吸引移动和台式机的观众。

简而言之,标头不仅可以为读者而且可以为搜索引擎优化网页。

如何创建一个带有Astra主题的惊人标题?

首先,要访问 Astra Header Builder,请登录您的 WordPress 仪表板,然后从左侧边栏中转到Appearance > Astra Options > Header Builder ,如下图所示:

单击它,它会将您带到 WordPress 定制器中的 Header Builder 部分。 界面应该类似于我们这里的界面:

如您所见,标题构建器分为三个垂直部分,一个堆叠在另一个顶部。 中间有“主标题”,顶部有“标题上方”,底部有“标题下方”。  

每个标题都有自己的一组“标题设置”,您可以通过单击标题左侧的齿轮图标来访问这些设置。

从这里,您可以自定义标题高度、边框大小、背景、填充和边距。

另外,请注意每个标题如何分为三个部分。 您可以从这些部分添加和删除标题元素,使它们更有特色。 在撰写本教程时,您可以访问 12 个标题元素:

  • 网站标题和标志
  • 主菜单
  • 按钮 1
  • 按钮 2(专业版)
  • 搜索
  • 帐户
  • HTML 1
  • HTML 2
  • 二级菜单
  • 社会的
  • 小部件 1
  • 小部件 2
  • 小工具 3(专业版)
  • 小工具 4(专业版)
  • 大车

现在,要添加新的 Header 元素,请将鼠标悬停在该部分上并单击“+”按钮。 这将显示可用元素的列表。 选择您要使用的那个,它将被添加到标题部分。

同样,只需单击标题元素旁边的“x”按钮即可删除标题元素。

您还可以通过简单的拖放在标题部分之间移动标题元素。

您使用的所有标题元素都将显示在左侧菜单中,就在“常规”选项卡的正下方。 在此处,您还可以找到更改标题类型的选项。 免费用户只能选择“透明标题”。 但是,如果您使用的是 Astra Pro,则可以启用“Sticky Headers”。

从这里,您可以访问标题元素的特定设置。

在常规选项卡旁边,我们有设计选项卡。 从这里,您可以获得一些基本的设计选项来更改标题的宽度和边距。 Astra Pro 用户可以使用更多高级设置。

Astra Header Builder 还允许您微调站点标题在不同屏幕尺寸(如台式机、移动设备或平板电脑)上的外观。 要选择不同的屏幕尺寸并对其进行自定义,请使用屏幕左下角的设备选择器。

如您所见,在较小的屏幕上,您会看到一个名为“Off Canvas”的附加区域。 这使您可以节省标题上的空间并将一些内容移到屏幕外,访问者可以在必要时进行切换。

关于如何使用 Astra 主题创建标题的快速指南到此结束。 添加完所有 Header 元素并进行必要的设计更改后,单击发布按钮,就是这样。  

您新创建的 Astra 标头现已在您的 WordPress 网站上启动并运行。

Astra Header Builder:可用选项的快速概览

在上面的教程中,我们使用 Astra Header Builder 创建了一个非常基本的标题,让您了解该功能的工作原理。 但是,Astra Header Builder 中有大量工具和选项可帮助您创建更复杂和更精美的标题。

以下是您可以使用的各种选项的快速浏览:

主要标题

Astra中的默认头是主要头。 它将显示一个徽标以及一个导航菜单,该菜单可通过Astra中的各种主要标题设置进行自定义。

只需安装 Astra 并转到标题部分以选择主要标题选项并进行自定义。 页眉 > 主页眉

您可以使用以下自定义设置

布局

布局设置将管理页面徽标的位置。 徽标在Astra中有三个不同的位置

左徽标

此设置中的徽标移动到导航菜单的左侧。 这是定位标志的典型风格。

正确的徽标

此设置中的徽标将移至导航菜单的右侧。

中心徽标

此设置中的徽标在导航菜单上方的中央移动。 如果菜单较长,这是一个不错的选择。

宽度

宽度设置管理文本标题的宽度。 您可以将标题宽度自定义为

全屏宽度

在全角设置中,标题将从两端延伸,并适合您的浏览器页面大小。

内容宽度

在内容宽度设置中,标题根据容器宽度设置进行调整,您可以通过选择以下内容进行设置

全局>容器>宽度

边境

通过选择边框,您可以在标题下添加边框并自定义其颜色和宽度。

移动头

响应式设备上的导航菜单变为汉堡包。 因此,这些设备上的主要标题将仅显示汉堡菜单和徽标。 您可以自定义响应式窗口小部件中与菜单有关的徽标的布局。

叠放

在堆栈选项中,徽标将移至汉堡菜单上方。 如果您的徽标较大,选择堆栈可能会很有用。

排队

在inline选项中,logo和菜单会相互对齐,在logo较小的情况下是一个不错的选择。

颜色主题

主标题可以使用Astra主题以各种颜色显示。 全局颜色将免费提供,但是您需要使用Astra Pro的插件plugin才能使用更高级的功能。 要在Astra中使用全局颜色,您需要进入“外观”选项卡,选择“自定义”,然后选择“全局”,最后选择“颜色”选项。 外观>自定义>全局>颜色

版式

页面或站点的排版设置自动应用于 Astra 主题的主标题。 您可以通过转到全局下的外观选项卡来选择和自定义排版设置。  

外观>自定义>全局>版式

透明标题

透明标题是为页面创建美观且有吸引力的标题的简便方法。 主标题的背景将设置为透明,并将页面内容拉到顶部。 页面的内容和主标题将合并,这意味着内容的顶部将成为透明标题的背景。 例如,如果图像位于页面的顶部,它将上升为透明标题的背景。

如何添加透明标题?

透明的标题分为两个步骤,以使您的页面更具吸引力 

步骤1

您可以在定制程序下找到透明标题的选项,然后可以对其进行编辑

外观>自定义>标题>透明标题

第2步

在透明页眉选项下,您可以为整个网站启用它,选择底部的边框、配色方案和徽标布局

在完整的网站上启用

如果需要整个网站的透明标题设置,则可以通过选中复选框来启用此选项。 如果选中该复选框,则仍然可以为某些特定帖子或页面启用某些排除规则。 您可以为以下页面禁用透明标题选项

在档案、搜索和 404 上禁用

通过选中复选框,可以在这些特殊页面上禁用透明标题设置。

在博客索引页面上禁用

如果您从主页更改设置,则博客的首页将成为博客索引页面。 要制作博客索引页面,您可以转到主页设置,然后在“您的主页显示”标签下,选择“您的最新帖子”。

您的首页显示>您的最新帖子

如果您想禁用此博客索引页面上透明标题的设置,您可以勾选此复选框。

在页面上禁用

如果要在所有页面上禁用透明标题的选项,请选中该复选框。

在帖子上禁用

如果要在所有帖子上禁用透明标题的选项,请选中该复选框。

颜色和背景

您可以使用以下可用选项来自定义透明标题的背景和颜色设置

  • 背景
  • 网站标题
  • 菜单
  • 子菜单
  • 内容

使用Astra主题作为标题的利弊

优点

  • 提供透明标题的机会
  • 全宽和内容宽的标头均可用 
  • 可以自定义颜色和版式

缺点

  • 粘性标头选项不可用
  • 高级颜色功能不可用

最后的话

Astra是最好的主题之一。

Astra的免费主题允许您为您的网页设计漂亮而有吸引力的标题。 还提供透明标题的选项和自定义,可以增强观看者的体验。 总体而言, Astra 主题让您创建令人惊叹的标题。

4 关于“如何创建令人惊叹的 Astra 主题标题?”的想法

  1. Bonjour, j'ai compris comment faire un entête transparent mais pas comment vous avez fait pour mettre l'arrière plan bleuté-dégradé juste en haut de page derrière le menu... Comment avez-vous fait ?

  2. 你好,

    Merci beaucoup pour toutes ces infos。 Pourriez-vous 高级副总裁 m'aider ?

    J'aimerai céer l'entête Astra uniquement sur ma page d'accueil。 Mais soit elle s'affiche sur toutes les pages soit sur aucune... Comment je peux faire ?

    Mon site est actuellement en 模式维护。

    En vous remerciant par avance

发表评论

您的电子邮件地址不会被公开。 必填字段已标记为*