Divi的社交媒体模块允许您基于指向您的在线社交资料的图标（例如Facebook，Twitter和Google+）创建链接。 这些图标通过其时尚的图标以Divi自己的风格集成到主题中，这使其比使用第三方插件更为可取。 您可以在每个模块中添加指向多个社交资料的链接，也可以在页面上的任何位置添加该模块。
如何在页面上添加社交媒体模块
在您可以将社交媒体模块添加到您的页面之前，您必须先跳转到 Divi Builder。 一旦 Divi主题 安装在您的网站上，您会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。 单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 使用Visual Builder 如果您已连接到WordPress仪表板，则在前台浏览网站时。
进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住首先在页面中添加一行。
在模块列表中找到社交媒体模块，然后单击将其添加到页面中。 MOD列表是可搜索的，这意味着您还可以键入“在社交媒体上关注我们”一词，然后单击“输入”以查找并自动添加社交媒体Mod！ 添加模块后，模块选项列表将为您打招呼。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .
用例示例：向联系人页面添加相应的社交媒体图标
网站的联系页面是展示您的在线社交资料的完美场所。 这为用户提供了更多保持联系和 促进 您的博客 或您的业务。 对于此示例，我将向您展示如何添加社交媒体图标以匹配联系页面的当前设计。
使用可视化生成器，添加一个新的常规部分，该部分的行全宽为一列。 在您的栏中插入社交媒体模块。
在模块设置的“内容”选项卡中，单击“添加新元素”按钮，以向模块添加新的社交网络。 在特定的社交网络设置下，更新以下内容：
内容选项
社交网络：
Facebook帐户URL：[输入您的Facebook帐户的URL]
德观念选项
图标颜色：＃d94b6a（各种颜色）
然后复制此社交网络以添加四个其他网络（Twitter，Google +，LinkedIn和Instagram）。 由于您复制了网络，因此自定义图标的颜色已被传输。 因此，您只需要更新每个网络URL和帐户。
现在，您拥有与联系人页面设计匹配的社交媒体图标。
社交媒体内容选项
在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。 所有控制 什么 出现在模块中的内容将始终在此标签中找到。
添加一个新的对象
在这里，您可以向模块添加新的网络。 通过单击“添加新元素”，您将打开一个特定于您的新网络的选项的全新窗口（在“内容”，“设计”和“高级”选项卡下）。 有关个人社交媒体网络设置，请参见下文。
添加第一个网络后，您将看到一个灰色栏，其中网络标题显示为标签。 灰色栏还具有三个按钮，可用于编辑，复制或删除网络。
链接表单
在这里，您可以选择圆角矩形或圆形的社交网络图标的形状。
网址打开
选择在新标签或同一窗口中打开网络URL。
按下按钮
在这里，您可以选择是否在图标旁边添加下一步按钮。
管理员标签
这将更改构造函数中的模块标签，以便于识别。 在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。
社交媒体设计选项
在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。 这是用于更改模块外观的选项卡。 每个Divi模块都有一长串设计设置，可用于更改外观。
对于此模块，设计选项由单个元素-文本颜色组成。
文字颜色
在这里，您可以选择文字是浅色还是深色。 如果您在深色背景上工作，则文字应浅色。 如果背景较浅，则文本应为深色。
先进的社交媒体选项
在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。 在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。 您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。
CSS ID
输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。
CSS类
输入用于此模块的可选CSS类。 CSS类可用于创建自定义CSS样式。 您可以添加多个类，以空格分隔。 这些类可以在Divi子主题中使用，也可以在使用以下方法添加到页面或网站的自定义CSS样式表中使用： 主题选项 Divi或Divi Builder页面的参数。
自定义CSS
自定义CSS也可以应用于模块和任何模块内部。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。 这些设置中的CSS条目已经包装在样式标签中。 因此，只需输入用分号分隔的CSS规则即可。
能见度
此选项使您可以控制模块所在的设备。 您可以选择在平板电脑，智能手机或台式机上分别停用模块。 如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。
个别社交媒体内容选项
社交网络
在这里，您可以选择要显示的社交网络。
帐户网址
在此处输入此社交网络链接的URL。 如果选择Facebook作为网络，则可以在其中放置Facebook页面URL。
个人社交媒体设计选项
图标颜色
Divi为默认定义的每个社交网络提供标准颜色。 在这里，您可以轻松地将此图标颜色更改为所需的颜色。
先进的社交媒体选项
自定义CSS
自定义CSS也可以应用于模块和任何模块内部。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。 这些设置中的CSS条目已经包装在样式标签中。 因此，只需输入用分号分隔的CSS规则即可。
[vc_row center_row =“ yes”] [vc_column宽度=“ 1/2”] [vcex_button target =“空白” layout =“展开” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃18b69d” custom_hover_background =“＃118d7a” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载主题[/ vcex_button] [/ vc_column] [»vc_column] =» 1/2英寸] [vcex_button url =“ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target =“ blank” layout =“ expanded” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃c4226e” custom_hover_background =“＃8d184f” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载模板DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
其他Divi教程
- 5网站对餐厅使用迪维主题
- 如何在Divi WooCommerce产品上添加文字
- 如何更改Divi页面之间的菜单颜色
- 如何使用Divi个性化博客的网格
- 如何使用WordPress的作用迪维编辑
- 如何创建全屏Divi滑块
- 如何更改Divi页面之间菜单的颜色
- 您可能不了解Divi的功能
- 如何在WordPress上使用Divi Builder
- 如何使用Divi视频滚动模块
- 如何使用Divi Builder Flip模块
- 如何在Divi Builder上添加推荐模块
- 如何使用Divi文本模块
- 如何在Divi上创建滑块
- 如何编辑Divi用户角色
- 如何使用Divi社交媒体模块
- 如何在主题WordPress Divi上使用shop模块
- 如何使用Divi侧边栏模块
- 如何使用Divi Price表模块
- 如何使用Divi出版物的标题模块
- 如何添加Divi的视频模块
- 如何使用文章导航模块
- 如何使用Divi搜索模块
- 如何使用Divi钱包模块
- 如何在Divi Builder上使用person模块
- 如何使用带有Divi过滤器的钱包模块
- 如何使用全宽滑块模块
- 如何使用Divi Builder图像模块
- 如何使用Divi Builder的全宽导航模块
- 如何使用图库模块
- 如何使用Divi Builder全宽模块
- 如何使用Divi全宽度组合模块
- 如何使用Divi全角标题模块
- 如何使用Divi计数器模块
- 如何在Divi Builder上使用文章滑块
- 如何使用Divi Email Optin模块
