在本文中,我们将讨论Card元素及其设置。Card Element可以用来在页面中添加翻转卡片,让我们开始吧!

  1. 重新设置
  2. 前端内容设置
  3. Subheadline设置
  4. 图形的设置
  5. 背面内容设置
  6. 后退按钮设置
  7. 前面的内容
  8. 后面的内容
  9. 后退按钮
  10. 定制
  11. 演示
  12. 总结

Card元素在页面上添加翻转卡片。要添加元素,只需搜索“Card”并拖动“Card”到画布。

添加卡

卡设置选项卡包含控制组,用于微调卡的基本设置,而不管卡的正面或背面。

  • 字体大小-使用此选项设置卡的基本字体。
  • 宽度和最大宽度-使用这些选项设置卡的宽度和最大宽度。
  • 互动&持续时间-使用此选项设置与卡牌元素交互时的翻转动画和动画持续时间。可用的翻转选项有:
    • 翻转了
    • 抛下
    • 翻转了
    • 抛右
  • 的角度来看- perspective属性定义了当翻转动画发生时纸牌离用户有多远。因此,较低的值会比较高的值产生更强烈的3D效果。点击在这里有关3D动画透视属性的更多信息。
  • 垂直对齐-使用此选项设置元素边界内卡片内容的垂直对齐方式。Card元素使用Flex布局处理垂直对齐。可用的选项有:
    • 开始
    • 中心
    • 结束
卡设置

保证金

使用此选项可设置Card元素本身的边距。您可以更改卡的所有侧面的设置或单独修改它们。

卡保证金

边界半径

使用此选项为Card元素本身设置边界半径。您可以在卡的所有侧面设置曲线,也可以单独设置曲线。

卡片边界半径

前设置

Front选项卡包含一系列控制组,用于在正常状态下微调卡元素,显示卡的正面。

卡前设置
  • 前的背景-使用此选项设置卡片元素本身的背景颜色。如果你查看先进的复选框,将显示更多选项,以便能够向Card元素添加更复杂的背景。

前背景

Front Background Lower Layer Control组包含设置更复杂的背景的选项,将纯色、图像或视频作为元素的背景。你可以在Card Element中有两层背景,这个控制组用于下层。

卡片前背景下层

要设置背景类型,请使用“选择类型”控件。

纯色背景

要有一个坚实的背景,点击滴管图标。纯色背景有颜色控件,可以设置合适的背景颜色。

卡片正面纯色背景下层

图像背景

要获得图像背景,请单击图像图标。图像背景有包含以下选项的控制组:

  • 图像:点击加号图标,显示标准的WordPress媒体对话框,选择一张图片作为背景。
  • 重复:你可以选择背景图像在背景中重复的方式。可用的选项有:
    • 没有一个:背景图像不会重复。
    • :背景图像水平重复。
    • :背景图像将垂直重复。
    • 这两个:背景图像将在水平和垂直方向上重复。
  • 大小:设置背景图片的大小。此选项将设置background-sizeCSS属性。点击这里进一步阅读。
  • 位置:设置背景图片的位置。此选项将设置背景位置CSS属性。点击这里进一步阅读。
卡片前图像背景下层

视频的背景

要有视频背景,请单击视频图标。视频背景有包含以下选项的对照组:

  • 视频源:使用此选项添加背景视频的URL。如果视频在外部源中,则粘贴外部URL。如果你想自托管视频文件,你需要去WordPress仪表板>媒体>添加新的然后上传视频。然后,单击视频,查看右侧视频的属性,视频的URL显示您可以复制并粘贴到此选项。
  • 海报图片:选择图片作为视频背景的海报图片。此选项用于在移动设备上加载替代图像,因为视频背景功能对移动设备不可用。
卡前视频背景下层

正面背景上层

Front Background Upper Layer Control组包含设置更复杂的背景的选项,将纯色、图像或视频作为元素的背景。你可以在Card Element中有两层背景,这个控制组是上层的。

上层背景对照组的选项与下层相似。

前背景视差

视差效果是指背景图像滚动的速度与浏览器滚动的速度不同,它产生了一种美学效果。要启用视差特性,请转到背景视差控件组,并选中您想要具有该特性的背景层的启用复选框。视差功能有以下选项:

  • 下层/上层尺寸:图层大小以百分比的形式决定了背景的大小。百分比值越大,视差效应就会越突出。
  • 下/上层方向:使用此选项可将视差效果设置为垂直、水平或倒序显示。如果你启用反向顺序,向下滚动将导致向上滚动视差效果。
  • 反向:如果你想让视差效果以相反的方式工作,则启用此选项。
卡片前背景视差

背景边界半径

可以使用“背景边界半径”控件将边界半径应用于背景。它提供了在所有四个角或每个角单独设置半径的选项。您可以从多个单元中进行选择,以确定哪个半径最适合您的设计。

卡前背景边界半径

前边境

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

卡片正面边框

前填充

使用此选项可设置卡片正面的填充。您可以更改卡的所有侧面的设置或单独修改它们。

卡片前填充

前框阴影

您可以使用盒影控制组在卡片正面设置阴影。

卡前盒子阴影
  • x-使用此选项设置卡正面阴影的X偏移量
  • y-使用此选项设置卡正面阴影的Y偏移量。
  • 模糊-使用此选项设置卡片正面模糊效果的强度。
  • 传播和定位-使用此选项设置物品部分阴影的扩散量,并决定您希望阴影位于卡片内部还是外部。
  • 颜色—设置卡的颜色。

重新设置

Back选项卡包含一系列控制组,用于微调悬浮状态下的卡牌元素,该状态显示卡牌的背面。

卡片背面设置
  • 后面的背景-使用此选项将卡片元素本身的背景颜色设置为悬停状态。如果你查看先进的复选框,将显示更多选项,以便能够向Card元素添加更复杂的背景。

背景背景

Back Background Lower Layer Control组包含设置更复杂背景的选项,以悬浮状态的元素为纯色、图像或视频背景。你可以在Card Element中有两层背景,这个控制组用于下层。

卡片背面背景下层

要设置背景类型,请使用“选择类型”控件。

纯色背景

要有一个坚实的背景,点击滴管图标。纯色背景有颜色控件,可以在卡的悬停状态下设置适当的背景颜色。

卡片背面纯色背景下层

图像背景

要获得图像背景,请单击图像图标。图像背景有包含以下选项的控制组:

  • 图像:点击加号图标,显示标准的WordPress媒体对话框,选择一张图片作为背景。
  • 重复:你可以选择背景图像在背景中重复的方式。可用的选项有:
    • 没有一个:背景图像不会重复。
    • :背景图像水平重复。
    • :背景图像将垂直重复。
    • 这两个:背景图像将在水平和垂直方向上重复。
  • 大小:设置背景图片的大小。此选项将设置background-sizeCSS属性。点击这里进一步阅读。
  • 位置:设置背景图片的位置。此选项将设置背景位置CSS属性。点击这里进一步阅读。
卡片背面图像背景下层

视频的背景

要有视频背景,请单击视频图标。视频背景有包含以下选项的对照组:

  • 视频源:使用此选项添加背景视频的URL。如果视频在外部源中,则粘贴外部URL。如果你想自托管视频文件,你需要去WordPress仪表板>媒体>添加新的然后上传视频。然后,单击视频,查看右侧视频的属性,视频的URL显示您可以复制并粘贴到此选项。
  • 海报图片:选择图片作为视频背景的海报图片。此选项用于在移动设备上加载替代图像,因为视频背景功能对移动设备不可用。

背景背景

Back Background Upper Layer Control组包含设置更复杂背景的选项,以悬浮状态的元素为纯色、图像或视频背景。你可以在Card Element中有两层背景,这个控制组是上层的。

卡片背面背景上层

上层背景对照组的选项与下层相似。

背景视差

视差效果是指背景图像滚动的速度与浏览器滚动的速度不同,它产生了一种美学效果。要启用视差特性,请转到背景视差控件组,并选中您想要具有该特性的背景层的启用复选框。视差功能有以下选项:

  • 下层/上层尺寸:图层大小以百分比的形式决定了背景的大小。百分比值越大,视差效应就会越突出。
  • 下/上层方向:使用此选项可将视差效果设置为垂直、水平或倒序显示。如果你启用反向顺序,向下滚动将导致向上滚动视差效果。
  • 反向:如果你想让视差效果以相反的方式工作,则启用此选项。
卡背背景视差

背景边界半径

可以使用“背景边界半径”控件将边界半径应用于背景。它提供了在所有四个角或每个角单独设置半径的选项。您可以从多个单元中进行选择,以确定哪个半径最适合您的设计。

卡片背面背景边界半径

回边境

使用此选项可将卡片的边框设置为悬浮状态。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

卡片背面边框

重新填充

使用此选项可将卡的填充设置为悬浮状态。您可以更改卡的所有侧面的设置或单独修改它们。

卡片背面填充物

背面盒子阴影

您可以使用盒影控制组在悬停状态的卡上设置阴影。

卡背盒影
  • x-使用此选项设置卡背面阴影的X偏移量。
  • y-使用此选项设置卡片背面阴影的Y偏移量。
  • 模糊-使用此选项设置卡片背面的模糊效果的强度。
  • 传播和定位-使用此选项设置物品部分阴影的扩散量,并决定您希望阴影在悬停状态下位于卡片内部还是外部。
  • 颜色-使用此选项将卡的颜色设置为悬停状态。

前端内容设置

Front Content选项卡包含在正常状态下设置和微调卡片前面内容的控制组。

卡片正面内容设置
  • 基本字体大小-使用此选项设置卡片正面内容的基本字体。
  • 标签-使用此选项来决定使用哪个HTML标记来包装卡片前面的内容。可用的选项有:
  • p
  • h1
  • h2
  • h3
  • h4
  • h5
  • 编辑
  • div
  • 跨度
  • 溢出-使用此选项强制卡片正面内容尊重卡片的边界。
  • 打字-启用这个选项是你想要有卡的正面内容有打字动画。启用此选项将显示打字对照组对效果进行微调。
  • 文本-使用此选项添加卡片正面的实际文本。
  • 宽度和最大宽度-使用这些选项来设置卡片正面内容的宽度和最大宽度。
  • 背景-使用此选项设置卡片正面内容部分的背景颜色。

输入设置

如果您启用打字选项卡前面的内容设置控制组,这些设置选项将显示微调效果。

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

文本内容Flexbox

文本内容Flexbox部分包含使用CSS Flexbox显示在卡片前面设置内容位置的控件。

卡正面内容文本内容Flexbox
  • 孩子的位置:使用此选项来决定卡片正面的内容应该垂直(列)还是水平(行)布局。
  • 反向:启用此选项将导致卡片正面内容以相反的方式铺设。
  • 包装:当较小的设备没有足够的空间时,启用此选项来包装卡的正面内容。
  • 水平对齐:使用此选项可水平布局卡片正面内容。
  • 垂直对齐:使用此选项可垂直布局卡片正面内容。

点击在这里有关Flexbox显示器的更多信息。

保证金

使用此选项可设置卡片正面内容的边距。您可以更改卡片正面内容的所有侧面的设置或单独修改它们。

卡片正面内容边际

填充

使用此选项可设置卡片正面内容的填充。您可以更改卡片正面内容的所有侧面的设置或单独修改它们。

卡片正面内容填充

边境

使用此选项可设置卡片正面内容的边框。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

卡片正面内容边框

边界半径

使用此选项可为卡片正面内容设置边框半径。你可以在所有边都设置曲线,也可以单独设置。

卡片正面内容边界半径

盒阴影

您可以使用盒影控制组在卡片正面内容上设置阴影。

  • x-使用此选项设置卡片正面内容中阴影的X偏移量。
  • y-使用此选项设置卡片正面内容中阴影的Y偏移量。
  • 模糊-使用此选项设置卡片正面内容的模糊效果的强度。
  • 传播和定位-使用此选项设置项目部分阴影的扩散量,并决定您希望阴影位于卡片正面内容的内部还是外部。
  • 颜色-使用此选项设置卡片正面内容阴影的颜色。
卡前内容框阴影

文本内容边距

使用此选项可设置卡片正面文本的边距。您可以更改卡片正面文本的所有侧面的设置或单独修改它们。

卡片正面内容文本内容边缘

文本格式

您可以使用此控制组来设置卡片正面内容中的文本格式。

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

文本的影子

文本阴影控制组包含为卡片正面内容文本设置文本阴影的设置。

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

Subheadline设置

Subheadline Setup部分包含用于在Card Element前端主要内容之后启用和微调子标题部分的控制组。

卡前内容子标题设置
  • 启用-使用此选项启用卡片正面内容的子标题部分。
  • 文本-使用此选项添加子标题的文本。
  • 标签-使用此选项来决定哪个HTML标签用于子标题。可用的选项有:
  • p
  • h1
  • h2
  • h3
  • h4
  • h5
  • 编辑
  • div
  • 跨度
  • 间距-使用此选项设置卡片正面的小标题和主要内容之间的间距。
  • 订单—如果启用反向选项中,副标题将显示在卡片前面的主要内容之前。

副标题文字格式

您可以使用此控制组来设置卡片正面内容中的子标题的格式。

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

副标题文字阴影

文本阴影控制组包含为卡片正面子标题文本设置文本阴影的设置。

卡前内容子标题文字阴影
  • x-使用此选项设置文本阴影的X偏移量。
  • y—使用此选项设置文本阴影的Y偏移量。
  • 模糊-使用此选项设置文本阴影中的模糊效果的强度。
  • 颜色-使用此选项设置文本阴影的颜色。

图形的设置

图形设置控制组为您提供选项,以启用和设置图形图标在卡的正面内容的顶部。

卡前内容图形设置
  • 启用-使用此选项启用或禁用卡片正面内容的图标。
  • 类型-使用此选项来决定卡片正面内容图形类型是否应该是图标,或图像.根据图形类型的选择,将有不同的控制组。

图形边缘

使用此选项可设置卡片正面内容图形的边距。您可以更改卡片正面内容图形的所有侧面的设置或单独修改它们。

卡片正面内容图形边缘

图形图标

使用此选项可微调卡片正面内容的图形图标。此选项将显示您是否将卡正面内容的图形类型设置为图标。

卡前内容图形图标
  • 字体大小-使用此选项设置卡片正面内容图形图标的基本字体。
  • 宽度和高度-使用这些选项设置卡片正面内容图形图标的宽度和高度。
  • 主要的图标-使用此选项选择卡片正面内容图形的主图标。
  • 颜色-使用此选项设置卡片正面内容图形图标的颜色。
  • 背景-使用此选项设置卡片正面内容图形图标的背景。

图形图标边框

使用此选项可设置卡片正面内容图形图标的边框。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

卡片前内容图形图标边界

图形图标边框半径

使用此选项可为卡片正面内容图形图标设置边框半径。你可以在所有边都设置曲线,也可以单独设置。

卡前内容图形图标边界半径

图形图标框阴影

您可以使用盒影控制组在卡片正面内容图形图标上设置阴影。

卡前内容图形图标框阴影
  • x-使用此选项设置卡片正面内容中阴影的X偏移量。
  • y-使用此选项设置卡片正面内容中阴影的Y偏移量。
  • 模糊-使用此选项设置卡片正面内容的模糊效果的强度。
  • 传播和定位-使用此选项设置项目部分阴影的扩散量,并决定您希望阴影位于卡片正面内容的内部还是外部。
  • 颜色-使用此选项设置卡片正面内容阴影的颜色。

图形图标文本阴影

主文本阴影控制组包含为卡片正面内容图形图标设置文本阴影的设置。

卡片正面内容图形图标文本阴影
  • x-使用此选项设置文本阴影的X偏移量。
  • y—使用此选项设置文本阴影的Y偏移量。
  • 模糊-使用此选项设置文本阴影中的模糊效果的强度。
  • 颜色-使用此选项设置文本阴影的颜色。

图形图像

如果您选择图像作为图形类型,则会出现此选项。

卡片正面内容图形图像
  • 最大宽度-使用此选项可设置卡片正面内容图形图像的最大宽度。

主图形图像

图形图像组是设置图像为卡片正面内容的图形。

卡片正面内容主要图形图像
  • 视网膜视网膜支持开箱即用。单击Eye以禁用Retina支持。还支持设置图像宽度和高度的选项。
  • —待使用的镜像。点击从WordPress媒体库中选择图片或上传新图片。
  • Alt文本-图像的替代文本。确保为屏幕阅读器设置这个!

背面内容设置

back Content选项卡包含用于在悬停状态下设置和微调Card back内容的控制组。

  • 基本字体大小-使用此选项设置卡片背面内容的基本字体。
  • 标签-使用此选项来决定使用哪个HTML标记来包装卡片的内容。可用的选项有:
  • p
  • h1
  • h2
  • h3
  • h4
  • h5
  • 编辑
  • div
  • 跨度
  • 溢出-使用此选项强制卡片背面内容尊重卡片的边界。
  • 打字启用这个选项是你想要有卡片背面的内容有打字动画。启用此选项将显示打字对照组对效果进行微调。
  • 文本-使用此选项添加卡片的实际文本。
  • 宽度和最大宽度-使用这些选项设置卡片背面内容的宽度和最大宽度。
  • 背景-使用此选项设置卡片背面内容部分的背景颜色。

输入设置

如果您启用打字选项的卡片背面内容设置控制组,这些设置的选项将显示微调效果。

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

文本内容Flexbox

文本内容Flexbox部分包含用于在卡背面使用CSS Flexbox显示设置内容位置的控件。

  • 孩子的位置:使用此选项来决定卡片背面的内容应该垂直(列)还是水平(行)布局。
  • 反向:启用此选项将导致卡片背面内容以相反的方式铺设。
  • 包装:当较小的设备没有足够的空间时,启用此选项来包装卡的背面内容。
  • 水平对齐:使用此选项水平布局卡片背面内容。
  • 垂直对齐:使用此选项可垂直布局卡片背面内容。

点击在这里有关Flexbox显示器的更多信息。

保证金

使用此选项可设置卡片背面内容的边距。您可以更改卡背内容的所有侧面的设置或单独修改它们。

填充

使用此选项可设置卡片背面内容的填充。您可以更改卡背内容的所有侧面的设置或单独修改它们。

边境

使用此选项可设置卡片背面内容的边框。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

边界半径

使用此选项可设置卡片背面内容的边界半径。你可以在所有边都设置曲线,也可以单独设置。

盒阴影

您可以使用盒影控制组在卡片背面内容上设置阴影。

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

文本内容边距

使用此选项可设置卡片背面文本的边距。您可以更改卡片背面文本的所有侧面的设置或单独修改它们。

文本格式

您可以使用此控制组来设置卡片背面内容的文本格式。

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

文本的影子

文本阴影控制组包含为卡片背面内容文本设置文本阴影的设置。

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

Subheadline设置

子标题设置部分包含在卡片元素的主要内容返回后启用和微调子标题部分的控制组。

  • 启用-使用此选项启用卡片背面内容的子标题部分。
  • 文本-使用此选项添加子标题的文本。
  • 标签-使用此选项来决定哪个HTML标签用于子标题。可用的选项有:
  • p
  • h1
  • h2
  • h3
  • h4
  • h5
  • 编辑
  • div
  • 跨度
  • 间距-使用此选项设置卡片背面的子标题和主要内容之间的间距。
  • 订单—如果启用反向选项中,副标题将显示在卡片背面的主要内容之前。

副标题文字格式

您可以使用此控制组来设置卡片背面内容中子标题的格式。

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

副标题文字阴影

文本阴影控制组包含为卡片背面的子标题文本设置文本阴影的设置。

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

图形的设置

图形设置控制组为您提供选项,以启用和设置图形图标在卡背面内容的顶部。

  • 启用-使用此选项启用或禁用卡片背面内容的图标。
  • 类型-使用此选项来决定卡片背面内容图形类型是否应该是图标,或图像.根据图形类型的选择,将有不同的控制组。

图形边缘

使用此选项可设置卡背内容图形的边距。您可以更改卡背内容图形的所有侧面的设置或单独修改它们。

图形图标

使用此选项可微调卡背面内容的图形图标。此选项将显示您是否将卡回内容的图形类型设置为图标。

  • 字体大小-使用此选项设置卡片背面内容图形图标的基本字体。
  • 宽度和高度-使用这些选项来设置卡片背面内容的宽度和高度,图形图标。
  • 主要的图标-使用此选项选择卡背面内容图形的主图标。
  • 颜色-使用此选项设置卡片背面内容的颜色,图形图标。
  • 背景-使用此选项设置卡片背面的背景内容、图形图标。

图形图标边框

使用此选项可设置卡片背面内容的边框、图形图标。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

图形图标边框半径

使用此选项可为卡片背面内容、图形图标设置边框半径。你可以在所有边都设置曲线,也可以单独设置。

图形图标框阴影

您可以在卡片背面内容、图形图标上设置阴影,使用框阴影控制组。

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

图形图标文本阴影

主要的文本阴影控制组包含设置为卡片背面的内容,图形图标的文本阴影。

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

图形图像

如果您选择图像作为图形类型,则会出现此选项。

  • 最大宽度-使用此选项可设置卡背内容、图形图像的最大宽度。

主图形图像

图形图像组是为卡背设置图像内容的图形。

  • 视网膜视网膜支持开箱即用。单击Eye以禁用Retina支持。还支持设置图像宽度和高度的选项。
  • —待使用的镜像。点击从WordPress媒体库中选择图片或上传新图片。
  • Alt文本-图像的替代文本。确保为屏幕阅读器设置这个!

后退按钮设置

卡片元素背面有一个悬浮状态的额外按钮。后退按钮设置控件组是微调后退按钮样式的地方。

= = = = = = =

前面的内容

Front Content控件组本质上是一个嵌套的标题元素在Card中,因此您可以在它自己的文档页面中详细查看该元素的设置。

后面的内容

Back Content控件组本质上是一个嵌套的标题元素在Card中,因此您可以在它自己的文档页面中详细查看该元素的设置。

后退按钮

Back Button控件组本质上是一个嵌套的按钮元素在Card中,因此您可以在它自己的文档页面中详细查看该元素的设置。

定制

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

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

演示

要查看卡元素的现场演示,请单击在这里

总结

总之,我们已经讨论了卡牌元素。我们已经讨论过Card Element是在页面上添加卡片的简单工具,我们已经学习了如何更改它的内容和设计。最后,我们深入研究了Card Element设置的细节。

看到不准确的东西了吗?让我们知道

Baidu
map