Divi教程：如何使用全宽度投资组合模块

Divi上可过滤的项目组合允许您以网格或标准模式显示最新项目。可过滤的投资组合看起来像普通的投资组合模块，不同之处在于它使用Ajax请求加载新项目，并包括按类别过滤项目列表的选项。选择特定类别后，将立即使用所选类别中的新项目列表重新生成项目列表。

如何向页面添加可过滤的投资组合模块

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

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。新模块只能添加到行内。如果要开始新页面，请记住先向页面添加一行。

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

用例示例：将可过滤的投资组合模块添加到投资组合页面

在此示例中，我将向您展示如何向投资组合页面添加可过滤的投资组合模块。

让我们开始。

使用可视化生成器在页面标题下方添加具有全角（1列）行的常规部分。然后将可过滤的投资组合模块添加到该行。

更新可过滤的投资组合设置，如下所示：

内容选项

文章数量：8

德观念选项

布局：网格缩放图标颜色：#ffffff悬停覆盖颜色：rgba（224,153,0,0.58）标题字体：默认，粗体，大写标题字体大小：14px标题字母间距：1px字体过滤器：默认，粗体，大写过滤器字体大小：14px过滤器字母间距：1px Meta字体大小：12px Meta Letter间距：1px

高级选项（自定义CSS）

有效档案袋过滤器：颜色：＃e09900； 作品集标题：text-align：居中； Portfolio Message Meta：文本对齐：居中； 分页活动页：颜色：＃e09900！ 重要;

这就是它！

可过滤的投资组合内容选项

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。所有控制什么出现在模块中的内容将始终在此标签中找到。

帖子数

选择在分页列表之前如何查看要查看的帖子。

包括类别

选择您要显示的类别。未选择类别的帖子不会出现在生成的帖子列表中。

显示标题

如果需要，输入标题，该标题将放置在项目列表上方。

显示类别

选择是否在元数据区域中的每篇文章下显示类别。

查看分页

此选项启用/禁用分页。如果禁用了分页，则每个类别将仅显示一个项目页面。

背景颜色

为模块定义自定义背景色，或留空以使用默认颜色。

背景图像

如果设置，此图像将用作此模块的背景。要删除背景图片，只需从设置字段中删除URL。背景图像将出现在背景颜色的顶部，这意味着应用背景图像时背景颜色将不可见。

行政标签

这将更改构造函数中的模块标签，以便于识别。在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”以更改其单位类型。

元字体

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

元字体大小

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

元文字颜色

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

元字母间距

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

元线高度

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

使用边框

启用此选项将在模块周围放置边框。可以使用以下条件参数来自定义此边框。

边界的颜色

此选项会影响边框的颜色。从颜色选择器中选择一种自定义颜色，以将其应用于边框。

边界的宽度

默认情况下，边框为1像素宽。您可以通过拖动范围滑块或在滑块右侧的输入字段中输入自定义值来增加此值。支持自定义度量单位，这意味着您可以将默认单位从“ px”更改为em，vh，vw等。

边框样式

边框支持八种不同的样式：实心，点缀，点缀，双点，凹槽，山脊，覆盖和开始。从下拉菜单中选择所需的样式，以将其应用于边框。

先进的可过滤投资组合选项

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

CSS ID

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

CSS类

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

自定义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教程：如何使用全宽钱包模块