Divi教程：如何使用带过滤器的钱包模块

平价 布莱尔Jersyer | Divi

全宽钱包模块 Divi主题, 就像普通的 Portfolio 模块一样工作，除了它以漂亮的 Fullwdth 模式显示您的项目。 它还带有一些独特的新配置：网格和轮播。 该模块通过显示您最近的项目列表来工作，可供想要展示他们最近作品的画廊的设计师和艺术家使用。

全宽的porfolio模块divi.png

如何向页面添加投资组合全角模块

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

divi生成器

进入Visual Builder之后，可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住先向页面添加一行。 我们有一些很棒的教程，介绍如何使用Divi的line和section元素。

filterable port.png

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

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

对于此示例，我将向您展示如何在涵盖页面整个宽度的投资组合页面上显示投资组合。

整页上的投资组合divi.jpg

让我们开始。

使用视觉生成器在页面标题下方添加“全角”部分。 然后添加一个可过滤的投资组合模块。

添加可过滤的投资组合divi.jpg

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

内容选项

消息数：8显示分页：否

德观念选项

布局：网格缩放图标颜色：＃000000悬停覆盖颜色：#ffffff标题字体：默认，粗体，全部大写标题字体大小：14px标题字母间距：1px Meta字体大小：12px Meta Spacing字母：1px

可过滤的投资组合模块divi.png

就这样！

投资组合模块内容选项

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

可过滤的投资组合模块divi content section.png

组合标题

输入显示在投资组合上方的标题，或将其保留为空，以免使用标题。

包括类别

选择您要显示的类别。 未选择类别的项目不会出现在项目列表中。

帖子数

控制显示的项目数保留为空或使用0不限制数量。

显示标题

选择将鼠标悬停在项目项上时是否显示每个项目的标题。

显示日期

选择将鼠标悬停在项目项目上时是否显示每个项目的发布日期。

背景颜色

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

背景图像

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

管理员标签

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

全宽钱包设计选项

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

设计模块divi.png

提供

选择您要使用的布局。 “网格”将以多列，多行的布局显示所有项目。 轮播将您的物品显示在单行的平铺图像中，这些图像会滑动以显示列表中的其他物品。

缩放颜色图标

当您将鼠标悬停在项目组合模块中的某个项目上时，将显示一个覆盖图标。 您可以在此设置中使用颜色选择器来调整从该图标使用的颜色。

悬停颜色叠加

当您将鼠标悬停在投资组合模块中的某个项目上时，叠加颜色将显示在图像的顶部和投资组合标题文本和图标的下方。 默认情况下，使用半透明的白色。 如果要使用其他颜色，则可以在此设置中使用颜色选择器调整颜色

悬停图标选择器

在这里，您可以选择一个自定义图标，以在访客将鼠标悬停在模块中的项目组合项上时显示。

文字颜色

在这里，您可以选择文字是浅色还是深色。

期权设计可过滤投资组合模块divi.png

标题字体

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

标题字体大小

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

标题文字颜色

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

标题字母的间距

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

标题行的高度

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

可过滤的投资组合divi模块部分metadonnee.png

元字体

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

Metas字体大小

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

元文字颜色

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

元字母间距

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

元线高度

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

使用边框

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

边界的颜色

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

边界的宽度

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

边框样式

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

高级投资组合选项全角

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

divi filterable portfolio module forward.png部分

CSS ID

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

CSS类

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

自定义CSS

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

自动旋转木马

如果选择了轮播布局选项，并且您希望轮播自动滑动而访客不必单击下一步按钮，则启用该选项并根据需要将旋转速度调整为以下。

自动旋转木马速度

如果上面的“自动转盘旋转”选项被激活，则可以在此处指示转盘旋转速度。 数字越大，每次旋转之间的间隔时间越长。 （例如1000 = 1秒）

能见度

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

[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教程

7评论

  1. 奥黛丽
    奥黛丽 30年2020月15日，45小时XNUMX分

    你好，
    我设法有一个可过滤的钱包或一个全宽度的钱包，但是整个宽度不可过滤。
    我希望能够将相关项目的标题添加到可过滤的投资组合图片中，就像“经典”投资组合一样。 你知道怎么做吗？

    回答
  2. 博蒙特
    博蒙特 21 年 2019 月 21 日 34 小时 XNUMX 分

    您好！

    我刚去Divi，却迷迷糊糊地创建了一个“广告”页面，在该页面中，我的新广告将以小缩略图/缩图的形式并排出现在房地产代理商网站上。 有关信息，我已经创建了我的ADVERTISEMENTS页面和一些与ADVERTISEMENTS…类别相关的文章（一个广告文章）。 但它们以大幅面显示。 我希望在遇到问题时能很好地解释自己！ 在等待您的建议时，请先感谢您的解释和建议！ 晚安 ！！ 真诚的-杰罗姆

    回答
    • 布莱尔Jersyer
      布莱尔Jersyer 23 年 2019 月 9 日 18 小时 XNUMX 分

      您好，如果您正在使用Blog模块，则需要添加适用于此模块的特定CSS。 不幸的是，这种模具没有提供很多定制选项。

      回答
  3. 德尔菲娜
    德尔菲娜 12年2019月12日，04小时XNUMX分

    你好，

    谢谢你的完整文章。
    我设法显示全宽度组合或可过滤的投资组合，但周围有较大的边距。
    您知道divi是否可以显示全宽度可过滤投资组合吗？
    还是要显示没有重要利润的可过滤投资组合？

    MERCI

    回答
    • 蒂埃里·贝特朗
      蒂埃里·贝特朗 15年2019月6日，59小时XNUMX分

      你好德尔菲娜，

      我从未测试过，但如果有答案会尽快与您联系。

      回答
  4. ValérieSCHWEITZER
    ValérieSCHWEITZER 21年2019月19日，19小时XNUMX分

    您好，我非常喜欢您的文章，但是当我尝试重现这种类型的布局时，图像之间留有很大的空间。 我本来希望像您的示例一样加入图像。 如何为此配置模块？

    谢谢！

    回答
    • 蒂埃里·贝特朗
      蒂埃里·贝特朗 22年2019月18日，25小时XNUMX分

      瓦莱丽你好，

      您是否尝试过禁用所有插件只是为了查看显示是否有所改善？

      回答

发表评论

您的电子邮件地址将不会被发表。 必填字段标 *

这个网站使用Akismet来减少不需要的。 详细了解如何使用您的评论数据.