Divi 允许您即时创建无限数量的随时可用的区域。 然后可以将侧边栏添加到任何页面，允许您为页面的不同部分创建独特的侧边栏 网站Web.

如何从Divi添加Zonde小部件模块

在将侧边栏模块添加到页面之前，您必须先跳转到 Divi Builder。 一旦 Divi主题 安装在您的 网站Web，你会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。 单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 使用Visual Builder 当您浏览您的 网站Web 如果您登录到 WordPress 仪表板，则在前台。

使用Visual Builder之后，可以单击灰色（+）按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住先向页面添加一行。

在模块列表中找到侧边栏模块，然后单击它以将其添加到页面中。 模块列表是可搜索的，这意味着您还可以键入单词“ sidebar”，然后单击“ Enter”以自动查找并添加侧栏模块！ 添加模块后，模块选项列表将为您打招呼。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：将边栏添加到博客页面

边栏模块允许您在页面上的任何位置插入边栏（及其所有内置窗口小部件）。 实际上，您可以使用侧边栏模块添加任何窗口小部件区域。 在此示例中，我将向您展示如何使用专门的部分在您的博客页面上插入自定义边栏，以在WordPress上显示“搜索和最新帖子”小部件。

该博客页面具有全角标题，以在页面顶部显示博客标题。 在全角标题模块下方是特殊布局，左侧是博客模块，右侧是右侧垂直边栏区域。

使用专用部分可以使您在垂直侧边栏旁边添加复杂的列变体，而无需在页面上添加不必要的分隔符。 这对于带有侧边栏的博客是完美的。

首先，您需要确保已在WordPress仪表板的“小部件”页面中设置了小部件。 对于此示例，我将“搜索”小部件和“最近的文章”小部件添加到“边栏”小部件中。

然后部署Visual Builder以编辑博客页面。 使用以下布局将专门的部分添加到您的页面（位于标题下方）：

在页面上添加了专门的部分后，您会注意到一个区域（左侧）具有“添加模块”按钮。 对于此示例，此处已添加具有网格布局的Blog模块以显示博客文章。

另一个（在右侧）具有“插入行”按钮。 “插入模块”区域代表您的垂直侧栏。 您将在此处进入侧边栏模块。 您可以在此处在一行中添加任意数量的模块，它们将跨越该部分的垂直宽度，与您在其旁边构建的列结构相邻。 实际上，对于此示例，博客页面在专业版式布局的垂直侧边栏的该区域中已经具有电子邮件优化模块和人员模块。

现在，将侧边栏模块添加到垂直侧边栏区域中其他模块的顶部。

在“边栏模块”设置中，更新以下内容：

内容选项卡

小部件区域：选择边栏

设计选项卡

方向：右（因为侧边栏在右侧）
删除边框分隔符：是
文字颜色：
深色标题字体大小：26px
字母间距
标头：3px标头行高：1.1em

进阶标签

在“自定义CSS”部分下，将以下CSS添加到“小组件”文本框中。 这将使侧边栏小部件的设计与站点的设计相匹配：

背景：#fff; padding：20px; -webkit-箱阴影：0 1px 5px RGBA（0，0，0，0.1）; -moz-箱阴影：0 1px 5px RGBA（0，0，0，0.1）; 箱阴影：0 1px 5px RGBA（0，0，0，0.1）;

保存设置

现在，您可以看到侧边栏模块显示了侧边栏小部件的元素（“搜索”和“最近的文章”），并在您的专业部分的垂直侧边栏区域中显示了它们。

侧边栏的内容选项

在“内容”选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。 始终可以在此选项卡中找到控制模块中显示内容的所有内容。

小部件区域

边栏模块使用可在“外观”>“小部件”选项卡中创建的小部件创建区域。 您可以从此下拉菜单中选择一个自定义窗口小部件区域。

管理员标签

这将更改构造函数中的模块标签，以便于识别。 在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。

侧边栏设计选项

在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。 这是用于更改模块外观的选项卡。 每个Divi模块都有一长串的设计设置，可用于更改任何内容。

方向

您可以在此处选择侧边栏显示在页面的哪一侧。 此参数控制文本的方向和边框的位置。

删除边框分隔符

在这里，您可以删除将侧边栏与页面内容分开的细灰色边框。

文字颜色

在这里，您可以选择文字是浅色还是深色。 如果您在深色背景上工作，则文字应浅色。 如果背景较浅，则文本应为深色。

标题字体

您可以通过从下拉菜单中选择所需的字体来更改标题文本的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

标题字体大小

您可以在此处调整标题文本的大小。 您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。 输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

标题文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。 如果要更改标题文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

标题字母间距

字母间距会影响每个字母之间的间距。 如果要增加标题文本中每个字母之间的间隔，请使用范围滑块调整间隔，或在滑块右侧的输入字段中输入所需的间隔大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

标题行高度

行高会影响标题文本中每行之间的间距。如果要增加每行之间的间距，请使用滑块调整间距或在字段中输入所需的间距大小。条目位于滑块右侧。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文字体

您可以通过从下拉菜单中选择所需的字体来更改您的字体。 Divi随附了数十种由Google字体支持的出色字体。 默认情况下，Divi对页面上的所有文本使用Open Sans字体。 您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

正文字体大小

在这里您可以调整您的正文文本大小。 您可以拖动滑块以增加或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需文本大小的值。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。 如果要更改文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

正文字母的间距

字母间距会影响每个字母之间的间距。 如果要增加文本中每个字母之间的间距，请使用范围滑块调整间距或在滑块右侧的输入字段中输入所需的间距大小。 输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

身体线的高度

行高会影响正文中每一行之间的间距如果要增加每一行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。 输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

高级边栏选项

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。 在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。 您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。

CSS ID

输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。

CSS类

输入用于此模块的可选CSS类。 CSS类可用于创建自定义CSS样式。 您可以添加多个类，以空格分隔。 这些类可用于Divi子主题或使用Divi主题选项或Divi Builder页面上的设置添加到页面或网站的自定义CSS样式表中。

自定义CSS

自定义CSS也可以应用于模块和任何模块内部。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。 这些设置中的CSS条目已经包装在样式标签中。 因此，只需输入用分号分隔的CSS规则即可。

能见度

此选项使您可以控制模块所在的设备。 您可以选择在平板电脑，智能手机或台式机上分别停用模块。 如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 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 =下载 TEMPLATES 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模块