Elementor 基础教程 3 - 标题小工具的设置和使用方法

2023-11-26
Elementor 基础教程
喜欢(0)
Elementor basic 3 biaoti.webp

Elementor标题小工具是一种在编辑页面中创建和编辑标题的工具。

这个小工具允许你通过拖放方式自定义标题的外观,包括字体大小、颜色、对齐方式、行高等。你还可以将自定义HTML属性添加到标题标签中,如类或ID。

使用标题小工具,你可以创建美观、醒目的标题,以吸引读者的注意力和对内容的关注。

本教程将说明标题小工具的功能设置和使用方法。

Elementor 标题小工具

将标题小工具拖放到编辑栏中。如下图

你将看到标题小工具文本以及设置页面。

标题小工具的说明主要包括内容标签样式标签的功能以及设置方法。

1.内容标签

内容标签的设置项主要包括:

  1. 标题
  2. 链接
  3. 尺寸
  4. HTML标签
  5. 对齐

1-1.标题

标题是输入和编辑标题文本的设置项。

把小工具拖放到编辑栏后,该设置项就会进入可编辑模式。

如上图,标题的输入框有两个。无论在哪一个输入内容,另一个框内将反应其内容。

但是需要注意的是,当你在编辑栏内的标题文本设置加粗、斜体、下划线等装饰时,内容标签内的标题输入框并不会反应任何装饰设置。

1-2.链接

链接是给输入的标题添加链接的设置项。

添加的链接可以是页面内、站内或者站外的链接。

在上图中,点击齿轮按钮可以弹出更多设置选项。

选择《新窗口中打开》时,设置的链接会在浏览器的新标签中打开,不会将当前的页面跳转到链接页面。

  • 《添加链接属性》是给链接设置特定属性的功能,通常用于搜索引擎优化。如果你对搜索引擎不熟悉,这项可以忽略。
  • 《自定义属性》是在使用Javascript等特殊情况下才会使用的设置,通常很少使用,所以可以忽略。

1-3.尺寸

尺寸是调整标题显示尺寸的设置选项。

尺寸的预设选项有《默认》、《小的》、《中等》、《大的》、《XL》、《XXL》。可根据设计需求从预设中选择。如果需要对标题做更细致的设置,则需要在样式标签中进行。

需要注意的是,如果你已经通过CSS或HTML等对标题文字进行过设置,那么上述尺寸的预设项则会失效。

1-4.HTML标签

HTML标签是给标题添加HTML标签的设置项。

HTML标签是一种定义网页结构和内容的方式。HTML标签会告诉浏览器如何在网页上显示信息。HTML标签可用于创建标题、段落、列表、链接、图像、表格、表单和许多其他类型的内容。每种类型的内容都由其自己的特定标记表示。

例如,使用\<h1>标签创建标题,而使用\<img>标签则创建图像。

通过正确使用HTML标签标记网页上的元素,可以确保所有用户无论他们的设备或浏览器如何都能正确查看这些元素。

标题标签可以从H1到H6之间选择。数值越低,其重要度越高。

1-5.对齐

对齐是将标题在编辑栏内指定对齐方式的设置项。

可在《左边》、《居中》、《右边》、《两端对齐》中选择。

2.样式标签

样式标签中主要包含以下设置选项:

  1. 文本颜色
  2. 排版
  3. Text Stroke
  4. 文本阴影
  5. 混合模式

关于文本颜色,排版,文本阴影的功能和设置,请参考《Elementor 通用教程 – 小工具样式标签的通用设置和使用方法

2-3. Text Stroke

Text Stroke是为标题文本添加轮廓线和轮廓颜色的设置选项。

如上图,可以设置轮廓线的粗细和颜色。

2-5. 混合模式

混合模式是为标题添加叠加视觉效果的设置选项。

上图中,编辑栏添加了图像背景,然后将标题的混合模式设定为《Difference》的效果。可以选择尝试不同的叠加效果。

3.标题小工具的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是标题小工具的功能和设置方法。

标题小工具的设置项虽然不多,但组合其中的选项可做出非常丰富且有设计感的标题。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

快速搜索
站长推荐
相关文章
Elementor basic 10 tubiao.webp
Elementor 基础教程 10 - 图标小工具的设置使用方法
Elementor pro Animated Headline widget
Elementor 专业教程 9 – Animated Headline小工具的设置和使用方法
Elementor pro Code Highlight widget
Elementor 专业教程 28 – Code Highlight小工具的设置和使用方法
古腾堡编辑器完全指南:一步步成为WordPress编辑高手
古腾堡编辑器完全指南:一步步成为WordPress编辑高手
Elementor pro Review widget
Elementor 专业教程 17 – Review小工具的设置和使用方法
Elementor pro Video Playlist widget.webp
Elementor 专业教程 29 – Video Playlist小工具的设置和使用方法
Elementor basic 78 quanjuyanse quanjuziti.webp
Elementor 通用教程 1 - 全局颜色和全局字体的设置方法
Elementor pro Nav Menu widget
Elementor 专业教程 8 – Nav Menu小工具的设置和使用方法
Elementor pro call to action widget
Elementor 专业教程 14 – Call To Action小工具的设置和使用方法
Elementor basic 14 tuxianghuandengqi.webp
Elementor 基础教程 14 – 图像幻灯器小工具的设置和使用方法