报价

下面是一个使用Quote元素创建的感言示例。每个证言都是放置在列中的Quote元素。

要添加报价元素，只需搜索“quote”并将“quote”拖动到画布。

报价内容设置

最基本的设置(我敢说也是最重要的)是内容设置，内容的一致性报价而且引用字段。

指向“引用”框将显示“点击编辑——>“可点击区域。单击它将打开文本编辑器窗格。您可以选择使用HTML模式或类似于默认WordPress编辑器的富文本模式输入内容。

如果您想添加纯文本以外的内容，例如在感言上添加客户/客户的照片，富文本模式是最简单的方法。只需点击媒体图标，选择照片，然后单击插入到岗位按钮。

现在你的报价上有了一张照片。

引用设置

下设置，你会看到这些常见的字段:基本字体大小，宽度，最大宽度而且背景．

改变背景字段将更改引用的背景。

报价设计设置

下设计设置，你可以设置元素容器的边距，填充，边框，框阴影和边界半径。为了便于演示，下面是一个应用所有上述设置的示例。

注意:你不需要在Element的一个实例中使用所有这些元素，但上面的例子只是一个演示。

保证金

使用此选项可设置报价的页边距。您可以更改Quote的所有侧面的设置，也可以单独修改它们。

填充

使用此选项可设置Quote的填充。您可以更改Quote的所有侧面的设置，也可以单独修改它们。

边境

使用此选项可设置Quote的边框。您可以设置风格，宽度而且颜色边境线的所有边或每边的边境线。

边界半径

使用此选项可设置引用的边界半径。你可以在所有边都设置曲线，也可以单独设置。

盒阴影

您可以使用框阴影控制组在Quote上设置阴影。

• x-使用此选项设置引用中阴影的X偏移量。
• y-使用此选项设置引用中阴影的Y偏移量。
• 模糊-使用此选项在引用中设置模糊效果的强度。
• 传播和定位-使用此选项设置项目部分阴影的扩散量，并决定您希望阴影位于报价内部还是外部。
• 颜色-使用此选项设置引用阴影的颜色。

引用文本设置

还要注意，这里有设置文本的选项，比如格式、样式和文本阴影:

请注意这些设置仅针对引用内容本身，不包括引用。过一会儿我们将讨论如何设置引文的文本设计，但在这一点上做出区分是很重要的。

文本格式

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

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

文本样式

您可以使用此控制组来设置引用文本的样式。

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

文本的影子

文本阴影控制组包含为Quote文本设置文本阴影的设置。

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

引号设置

标志着是引号。第一个出现的是开放马克，最后一个是关闭．

要配置此配置，请单击标志着TAB，你会看到以下内容:

缺省情况下，标记是禁用的。这就是为什么当您第一次添加Quote Element时，您不会看到引号。可以显示和配置其中一个或两个启用他们。

标志设置

• 方向-如果你愿意行，开头标记总是在一端，内容在中间，结尾标记在远端。如果你愿意列，开始标记将在上面，内容将在下面，结束标记将在下面。
• 开口标记对齐-设置开始标记的对齐方式。
• 结束标记对齐—设置结束标记的对齐方式。

这可以给你带来很多不同的外观，这取决于你如何设置。例如，这里有一个引用，标记“方向”设置为行两个标记都是对齐的开始：

这里是不同的风格，仍然设置为行但是标记是对齐的中心：

这是另一个行示例，但是开始标记对齐到开始，而结束标记对齐到结束．接下来，我们在每个图形上使用一点负边距来抵消它们，创建一个非常酷的交错外观:

打开/关闭图形设置

前面我们提到过，如果想显示开始和结束标记中的一个或两个，您只需要启用它们。如果您已经这样做了，您将注意到出现了额外的设置，允许您配置标记的外观。你有自由，更不用说权力了，把它变成你想要的样子。

引用引用设置

最后，我们可以设置引文的外观。要查看可用的设置，请单击引用选项卡。

设置

• 引用的位置—您可以选择是否出现引文之前报价内容或报价内容之后。

• 背景-你也可以为引用指定背景颜色。

常见的设置

常用设置，如填充，边距，框阴影，边框，边框半径和文本样式。

定制

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

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

演示

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

总结

总之，我们已经讨论了Quote元素。我们已经讨论过Quote元素是一个在页面上添加推荐的简单工具，我们已经学习了如何更改它的内容和设计，以及自定义引号和“引用”的设计。