社会

在本文中,我们将讨论社交元素,以及如何使用它在整个网站的页面中添加社交图标或图像。

  1. 社会设置
  2. 社交设计设置
  3. 文本设置
  4. 图形的设置
  5. 粒子的设置
  6. 定制
  7. 演示
  8. 总结

社交元素在页面上添加一个社交图标或图像,您可以将其链接到您选择的社交媒体。

社会设置

设置控制组包含初始设置社交元素的选项。

社会设置
  • 基本字体大小-社交元素的字体大小。
  • 宽度高度—“Social”的宽度和高度默认为“auto”。可以更改为任何所需的值。
  • 最小宽度高度-社会的最小宽度和高度应该。如果你想让你的社交元素总是50px宽,这很有用。
  • 最大宽度高度-社会在任何时候的最大宽度和高度。如果你不希望社交元素超过特定规模,这就很有用。
  • 背景-提供两个选项:基础和交互。基地是社会的背景色在任何时候,除了悬停。交互是社会的背景颜色悬停和社会的互动。

链接设置由必要的控件组成,在社交元素上有一个锚。有三种可以设置的锚链接:

  • URL:使用此锚类型链接到一个网站或当前网站的另一个页面。
  • 电子邮件:使用此锚类型打开用户的邮件客户端并设置正确的电子邮件和主题。
  • 电话:使用此锚类型可添加电话号码。如果访问者使用的设备具有呼叫功能,则会打开已添加电话号码的电话界面。

URL

社交链接URL

使URL链接设置的模式是通过单击链接图标。你会收到URL输入你可以添加你想要链接到的网站的URL。的预览input将显示它将如何添加到实际的HTML代码中。检查新标签页如果要在新的浏览器选项卡上打开该链接,请选中复选框。检查nofollow如果您不希望搜索引擎嗅探该链接,请选中复选框。的nofollow通常当我们链接到外部网站时使用。

电子邮件

社交链接邮件

使电子邮件链接设置的模式是通过单击信封图标。将电子邮件地址添加到电子邮件输入和主题的电子邮件进入主题输入。的预览input显示如何在HTML中添加链接。点击带有电子邮件设置的链接将打开访问者的电子邮件客户端软件,并将填写收件人电子邮件地址和电子邮件主题。

电话

社交链接电话

使电话链接设置的模式是通过单击电话图标。将电话号码添加到电话输入。的预览input显示如何在HTML中添加链接。如果用户拥有具有该功能的设备,则单击带有电话设置的链接将打开用户设备的电话拨号器屏幕。

社交设计设置

Social Element中的设计设置由控制组组成,用于微调元素设计。

Flex布局

Flex布局控件包括:

  • 布局—选择“行”或“列”
  • 改变布局
  • 把孩子们
  • 水平
  • 垂直
社会Flex

Flex布局控件允许您配置社交元素的flexbox设置。如果您不熟悉flex,本指南会帮助你的。

保证金

使用此选项可设置社交元素的边距。您可以更改社交元素的所有方面的设置或单独修改它们。

社会的边缘

填充

使用此选项设置社交元素的填充。您可以更改社交元素的所有方面的设置或单独修改它们。

社会填充

边境

使用此选项可设置社交元素的边界。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

社会的边界

边界半径

使用此选项可设置社交元素的边界半径。你可以在所有边都设置曲线,也可以单独设置。

社会边界半径

盒阴影

您可以使用框影控制组在社交元素上设置阴影。

社交盒影
  • x-使用此选项在社交元素中设置阴影的X偏移量。
  • y-使用此选项设置社交元素中阴影的Y偏移量。
  • 模糊使用此选项在社交元素中设置模糊效果的强度。
  • 传播和定位-使用此选项设置项目阴影的传播量,并决定您希望阴影位于社交元素内部还是外部。
  • 颜色-使用此选项设置社交元素阴影的颜色。

文本设置

通过启用文本设置选项,你可以在社交元素的图标旁边设置文本。

社交文本设置
  • 启用-使用此选项启用或禁用社交元素的文本部分。
  • 主要的文本-使用此选项添加社交元素的主要文本,显示为较大的字体。
  • 二级文本-使用此选项添加社交元素的次要文本,显示较小的字体。
  • 间隔和顺序—使用此选项设置主要文本和次要文本之间的间距。在标准模式下,主要文本在次要文本之上,但如果您检查反向选中复选框,则顺序将颠倒,次要文本将位于主要文本之上。
  • 交互-当鼠标悬停在社交元素上时,使用此选项设置动画。动画选项是:
  • 没有一个
  • 幻灯片上
  • 幻灯片左
  • 张对吧
  • 幻灯片底部
  • 按比例增加
  • 按比例减少
  • 翻转X
  • 翻转Y
  • 溢出-检查隐藏的如果你想隐藏超出社交元素限制的文本,请选中复选框。

文本保证金

使用此选项可设置Social Element文本区域的边距。您可以更改社交元素的所有方面的设置或单独修改它们。

社会文本边缘

主要文本格式

您可以使用这个控制组来设置Social Element中主要文本的格式。

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

主要文本样式

您可以使用此控制组在Social Element中设置主要文本的样式。

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

主文本阴影

主文本阴影控制组包含为社交元素主文本设置文本阴影的设置。

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

辅助文本格式

您可以使用这个控制组来设置Social Element中次要文本的格式。

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

次要文本样式

您可以使用此控制组来设置Social Element中的次要文本的样式。

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

辅助文本阴影

辅助文本阴影控制组包含为社交元素辅助文本设置文本阴影的设置。

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

图形的设置

图形设置控制组为您提供了启用和设置社交元素图形图标的选项。

社交图像设置
  • 启用-使用此选项启用或禁用社交元素的图标。
  • 类型-使用此选项决定社交元素图形类型图标图像,或汉堡.根据图形类型的选择,将有不同的控制组。
  • Icon & Img互动-使用此选项为鼠标悬停时的社交元素图形设置动画。可用的选项有:
  • 没有一个
  • 按比例增加
  • 按比例减少
  • 翻转X
  • 翻转Y

图形边缘

使用此选项可设置社交元素图形的边距。你可以改变社交元素图形所有侧面的设置,或者单独修改它们。

社会图形边际

图形图标

使用此选项可以微调社交元素的图形图标。如果你将社交元素的图形类型设置为图标,这个选项将显示出来。

社交图标
  • 字体大小和次要-使用此选项设置社交元素图形图标的基本字体,并检查二次如果你想将鼠标悬停在社交元素上时将图标更改为另一个图标,请选择复选框。
  • 宽度和高度-使用这些选项来设置社交元素图形图标的宽度和高度。
  • 小学和中学-使用此选项选择社交元素图形的主要和次要图标。选项将提供辅助选项二次中的复选框字体大小和次要选择。
  • 颜色-使用此选项设置社交元素图标在正常和悬停模式的颜色。
  • 背景-使用此选项将社交元素图标的背景设置为正常和悬停模式。

图形图标边框

使用此选项可设置社交元素图形图标的边框。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

社交图形图标边框

图形图标边框半径

使用此选项可设置社交元素图形图标的边界半径。你可以在所有边都设置曲线,也可以单独设置。

社交图形图标边界半径

图形图标框阴影

你可以使用box-shadow control组在Social Element图形图标上设置阴影。

社会图形图标框阴影
  • x-使用此选项在社交元素中设置阴影的X偏移量。
  • y-使用此选项设置社交元素中阴影的Y偏移量。
  • 模糊使用此选项在社交元素中设置模糊效果的强度。
  • 传播和定位-使用此选项设置项目部分阴影的传播量,并决定您希望阴影位于社交元素内部还是外部。
  • 颜色-使用此选项设置社交元素阴影的颜色。

图形图标文本阴影

主要的文本阴影控制组包含为Social Element图形图标设置文本阴影的设置。

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

图形图像

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

社会形象
  • 最大宽度-使用此选项设置社交元素图形图像的最大宽度。

主图形图像

主图形图像控制组用于为社交元素图形设置图像。

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

辅助图形图像

次要图形图像控制组是为悬停的社交元素图形设置图像。除启用/禁用复选框外,控制组具有与主图形图像相同的选项。

社会次要图形图像

粒子的设置

粒子设置组包含对初始交互效果设置的控件。以下是每个设置的详细信息:

社交粒子设置
  • 启用-使用此选项启用交互粒子。
  • 位置-使用此选项设置粒子相对于它所应用的元素的位置。可用的选项有:
  • 中心
  • 正确的
  • 左上角
  • 右上方
  • 左下
  • 右下角
  • 放置-使用此选项决定是否要有粒子重叠与元素或有限内部元素。
  • 规模缩放选项将决定粒子在过渡过程中如何膨胀或收缩。可用的选项有:
  • 没有一个-如果你不想让粒子在过渡中缩放,使用这个选项。
  • 规模都-使用这个选项在过渡中垂直和水平缩放粒子。
  • 规模X-使用此选项在过渡中水平缩放粒子。
  • 规模Y-使用这个选项在过渡中垂直缩放粒子。
  • 延迟延迟选项将决定完成转换需要多长时间。此选项以秒或毫秒为单位的值取决于所选择的值单位。
  • 转变从哪里开始-使用此选项设置粒子的过渡应该从哪里开始。可用的选项有:
  • 中心
  • 正确的
  • 左上角
  • 右上方
  • 左下
  • 右下角

粒子的风格

粒子样式组包含微调交互效果的控件。以下是每个设置的详细信息:

社交粒子风格
  • 宽度和高度-使用此选项设置粒子的宽度和高度。取值单位为CalcPX快速眼动新兴市场,
  • 半径-使用此选项设置粒子的半径。此选项值可以使用与宽度/高度选项相同的单位。
  • 颜色-使用此选项设置粒子的颜色。
  • 内联CSS-使用此选项添加自定义CSS,将应用于文章。这个选项是给高级用户的,他们想要一个额外的定制层,他们不能在粒子的样式选项中找到。

主要和次要粒子

我们所描述的设置和样式选项同样适用于初级粒子和次级粒子。你基本上有两组粒子选项来获得创新和创建时尚的交互。

定制

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

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

演示

点击查看社交元素的现场演示在这里

总结

总之,我们已经讨论了社交元素。我们已经讨论过社交元素是在页面上添加社交图标或图像的简单工具,我们已经学习了如何改变它的内容和设计,并深入研究了社交元素设置的细节。

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

Baidu
map