标题

看看上面的截图。它显示了一个典型的主页外观。除了美丽的背景图片，吸引访问者注意力的元素是标题和子标题。

使用标题元素，你可以很容易地添加标题和子标题，并根据你想要的外观设计两者。要添加标题元素，搜索“标题”并将“标题”拖到画布上。

标题的设置

• 基本字体大小＆标签-基本字体大小标题的大小和标签是给予标题的HTML标记。H1通常是页面的主标题，然后后续部分使用其他基于他们的重要性，使用H2，H3等等。

• 启用

  • 溢出-如果选中，每当标题超出屏幕宽度时，它不会将其移动到下一行，而是会添加剪切文本并在末尾添加省略号。如果不勾选该选项，则会自动将标题的额外文本移到下一行。
  • 打字-如果勾选，它将为标题添加一个输入效果。稍后会详细介绍文本输入内容设置而且文本输入设置部分。
  

• 文本是你把实际文本作为标题的地方。

• 宽度＆最大宽度-可以设置标题的宽度和最大宽度。
• 背景是设置标题背景颜色的地方，如果你想要它有一个。

文本输入内容设置

如果你已经检查了打字上的复选框。启用选项，此附加设置将显示在设置对照组。让我们回顾一下每个设置。

• 前缀-标题的这部分不变。它出现在变化的文本之前。
• 输入文本-在这里输入将更改的单词。
• 后缀-出现在变化单词之后的文本。这和前缀一样，也不会改变。

文本输入设置

就像文本输入内容对照组时，这一组也出现了打字选项已启用。

• 速度＆恢复速度-速度是指每个字符输入屏幕的速度。返回速度指的是每个字符被删除的速度。
• 延迟＆再延迟—Delay是指输入第一个字符的时间间隔。返回延迟时间是指最后一个字符被删除之前的时间间隔。
• 启用
  • 循环类型-如果你启用了这个选项，在输入完最后一个单词后，打字几乎会不停地回放。
  • 显示光标—如果启用，将显示闪烁的游标。
• 光标-此选项仅在以下情况出现显示光标启用。此选项允许您输入想要显示为游标的字符。
• 颜色-这是你设置颜色的变化(键入)文本。

标题设计设置

设计选项包括控制组来微调标题的间距和边框。

文本内容Flex

您可以使用Flex布局更改标题元素文本的位置和布局。

• 布局-这个选项定义了孩子们的方向，这意味着他们可以并排放置，也可以放在彼此下面。
  • 行
  • 列
• 改变布局-如果你想反转孩子的顺序，那么一定要勾选这个选项。基本上，把这想象成一面镜子。
• 把孩子们-默认情况下，Flexbox将尝试将元素保存在一行或列上，所以如果你想防止这种情况发生，包装子元素是一个好方法。
• 水平-根据你的布局设置，你可以定义如何儿童的方向。
  • 开始-在开始位置放置方框。
  • 居中-将方框置于居中。
  • End -将盒子放置在末端。
  • 空格-增加盒子之间的空格。
  • 周围空间-增加盒子周围的空间。
• 垂直
  • 开始-在开始位置放置方框。
  • 居中-将方框置于居中。
  • End -将盒子放置在末端。
  • 拉伸——均匀地拉伸箱子。

保证金

设置标题元素的边距。利润率用来创造元素周围的空间，外任何确定的边界。

填充

填充用于在元素内容周围创建空间，内部任何确定的边界。

边境

允许您设置标题边框的样式、宽度和颜色。

边界半径

设置元素角的半径/曲线。除非你已经设置了边界控制，否则你不会看到任何改变边界半径值的效果。

盒阴影

用于在标题元素的框架周围添加阴影效果。

标题文字设置

的文本设置允许您设置标题的距离，字体系列，字体粗细，大小，样式，添加阴影等等。请注意，这些只影响标题，并不适用于副标题。后者有自己的一组选项，我们将在后面讨论。

文本内容边距

在上面的截图中，你会发现上面写着文本内容边距．它不同于保证金．为了说明两者之间的区别，我将在标题元素中添加一个背景以显示一个方框。

保证金应用外这个盒子。整个盒子就是整个标题元素。

而文本内容边距是保证金起的吗实际的文本相对于盒子。

在某种意义上，文本内容边距行为类似于填充在这种情况下。

文本格式

您可以使用此控制组来设置标题中的文本格式。

• 字体-使用此选项设置标题内容的字体。
• 字体粗细-使用此选项设置字体的粗细。这些值可能会根据所选字体以及所选字体是否支持权重而有所不同。
• 字体大小—设置字体大小。
• 字符间距—设置字母间距。
• 行高-使用此选项设置每行之间的间距。
• 字体样式-使用此选项决定是否要有一个正常的或斜体风格。
• 文本对齐-使用此选项设置文本的对齐方式。可能的值是左，中心，正确的,证明．
• 文本装饰—强制下划线或linethrough风格。
• 文本转换—使用该选项设置文本的大小写。可用的选项有大写字母，驼峰式大小写,小写字母．
• 文本颜色-使用此选项设置文本的颜色。

文本的影子

文本阴影控制组包含为标题内容设置文本阴影的设置。

• x-使用此选项设置文本阴影的X偏移量。
• y-使用此选项设置文本阴影的Y偏移量。
• 模糊-使用此选项设置文本阴影中模糊效果的强度。
• 颜色-使用此选项设置文本阴影的颜色。

Subheadline设置

添加一个Subheadline是可选的。如果您想添加一个小标题，只需选择在为启用选择。

启用后，将显示一组额外的文本设置，类似于标题的文本设置。不过，这次是副标题。

Subheadline设置

启用subheadline后，您将看到这些附加选项。

• 文本-副标题的实际内容。
• 标签-选择什么HTML标签，你想要使用的小标题。
• 间距＆订单-间距是指标题和副标题之间的间距。至于订单您可以选择检查反向复选框。这样做颠倒了标题和副标题的顺序。通常，这意味着副标题会在标题之前出现。

副标题文字格式

您可以使用此控制组来设置子标题中的文本格式。

• 字体—使用此选项设置子标题内容的字体。
• 字体粗细-使用此选项设置字体的粗细。这些值可能会根据所选字体以及所选字体是否支持权重而有所不同。
• 字体大小—设置字体大小。
• 字符间距—设置字母间距。
• 行高-使用此选项设置每行之间的间距。

副标题文本样式

您可以使用此对照组来设置子标题中的文本样式。

• 字体样式-使用此选项决定是否要有一个正常的或斜体风格。
• 文本对齐-使用此选项设置文本的对齐方式。可能的值是左，中心，正确的,证明．
• 文本装饰—强制下划线或linethrough风格。
• 文本转换—使用该选项设置文本的大小写。可用的选项有大写字母，驼峰式大小写,小写字母．
• 文本颜色-使用此选项设置文本的颜色。

副标题文字阴影

文本阴影控制组包含为子标题内容设置文本阴影的设置。

• x-使用此选项设置文本阴影的X偏移量。
• y-使用此选项设置文本阴影的Y偏移量。
• 模糊-使用此选项设置文本阴影中模糊效果的强度。
• 颜色-使用此选项设置文本阴影的颜色。

标题图形设置

你可以在标题中添加这样的图片。

要添加该选项，请确保启用图形选项。

图形的设置

• 启用-前面已经讨论过了，你可以选择打开或关闭。
• 类型-你可以选择图标(默认值)或图像．

图形边缘

设置标题元素的图形的边距。图形的利润率用来创造元素周围的空间，外任何确定的边界。

图形图标

如果你选择了图标作为图形设置下的类型图形图标将显示设置。它有以下控制:

• 字体大小-顾名思义，让您设置的大小字体这个图标。
• 宽度＆高度-设置图标的尺寸。
• 主要的图标—待显示的图标。
• 颜色—图标的颜色。
• 背景—图标的背景色。

现在，当你使用图标类型，有其他可用的选项，让您进一步设计您的图标。它们是:

图形图标边框

可以设置图标的边框。

图形图标边框半径

让你设置图标的边界半径(为角度的曲线)。

图形图标框阴影

允许您设置包含实际图标的框的阴影。

图形图标文本阴影

让你设置图标本身的阴影。

当图像是选择的类型，您将能够看到以下设置:

图形图像

• 最大宽度—设置图像的最大宽度。

主图形图像

下主图形图像，你有以下控制:

• 视网膜＆维视网膜支持开箱即用。单击Eye以禁用Retina支持。还支持设置图像宽度和高度的选项。
• 源—待使用的镜像。点击从WordPress媒体库中选择图片或上传新图片。
• Alt文本-该值将显示在alt图像元素的HTML属性。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看标题元素的现场演示，请单击在这里．

总结

让我们来回顾一下本文讨论的内容:

1. 首先，我们讨论了如何添加Headline元素。
2. 然后我们讨论了它的基本设置下设置控件，包括设置要使用的标题，标题的文本内容，宽度和可选的背景。
3. 接下来我们讨论了它的设计设置，包括填充，边距，框影和边框。
4. 之后，我们继续配置标题的文本设置，包括字体的位置、颜色、厚度、样式和各种间距。
5. 我们还讨论了如何在标题中添加图形。
6. 最后，我们学习了如何在标题下面添加和配置子标题。

有了这些，现在你可以自信地在你的网站上创建漂亮的标题。