Divi教程：如何使用组合模块

平价 布莱尔Jersyer | Divi

借助Divi的投资组合模块，您可以在任何位置以任何列结构显示您的工作。 在本教程中，我将向您展示如何在Divi上使用电子钱包模块。

如何添加Divi钱包模块

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

divi生成器

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

wordpress投资组合模块divi.png

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

用例示例：向投资组合页面添加投资组合模块

对于此示例，我将向您展示如何在投资组合页面上显示投资组合。

投资组合wordpress.jpg的例子

让我们开始。

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

portet portfolio divi.png

如下更新钱包设置：

内容选项

文章数：8
显示分页：NO

德观念选项

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

高级选项（自定义CSS）

作品集名称：
text-align：center;

Meta消息组合：
text-align：center;

设置组合css divi.jpg

就这样！

投资组合内容选项

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

portfolio divi.png

项目编号

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

包括类别

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

显示标题

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

显示类别

您可以在此处启用或禁用类别链接。

查看分页

您可以在此处启用或禁用此供稿的分页。

背景颜色

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

背景图像

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

管理员标签

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

组合模块设计选项

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

选项设计divimodule portfolio.png

提供

选择您要使用的布局。 “网格”将以多列，多行的布局显示所有项目。 Fullwidth使用大型未切割和宽幅图像在每个行上显示每个项目。

缩放图标颜色

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

天桥上的图层颜色

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

悬停选择图标

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

文字颜色

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

标题字体

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

标题字体大小

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

标题文字颜色

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

标题字母的间距

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

标题行的高度

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

Metas字体

您可以通过从下拉菜单中选择所需的字体来更改元文本的字体。 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文件中自定义模块。

选项css module portfolio.png

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

8评论

  1. 伊丽
    伊丽 9 年 2021 月 10 日下午 11:XNUMX

    Ciao，有可能在三头烤饼上有个投资组合吗？ Siccome ho molti elementi da visualizzare，vorrei farsìvenissero visualizzati as delle slide che scorrono verso sx…没那么好，这想法…Grazie！

    回答
  2. 宝琳·菲勒特（PaulineFillâtre）
    宝琳·菲勒特（PaulineFillâtre） 2 年 2020 月 16 日 43 时 XNUMX 分

    您好，我想知道是否可以用三列而不是四列的网格形式进行演示。 默认情况下，我的项目水平排列为四个，而我想放置六个，我希望在三列两行中进行演示。 我搜索了所有选项，但找不到任何相关信息...
    预先感谢您的帮助。

    回答
  3. 杰辛斯·圣路易斯
    杰辛斯·圣路易斯 21 年 2019 月 19 日 49 小时 XNUMX 分

    您好，您能向我解释一下为什么在元素下我的投资组合的每一列之间都有很大的空间。 不是在左右，而是在行下。 非常感谢。

    回答
    • 布莱尔Jersyer
      布莱尔Jersyer 21 年 2019 月 19 日 53 小时 XNUMX 分

      您好，如果我们有概述，我们会更好地为您提供建议。

      留言Merci。

      回答
      • 杰辛斯·圣路易斯
        杰辛斯·圣路易斯 22 年 2019 月 0 日 28 小时 XNUMX 分

        2019-09-21屏幕快照，位于14.49.53 copie.jpg

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

          您好，您的文章未包含指向屏幕截图的链接。 您可以使用此工具执行此操作： https://screenshot.net/fr/

          回答
  4. SALLY
    SALLY 上五月8，2019在14:16上午

    你好，

    您是否知道是否可以在标题下添加可见的投资组合？

    商业

    回答
    • 蒂埃里·贝特朗
      蒂埃里·贝特朗 上五月10，2019在21:01上午

      晚上好莎莉，

      尚未测试但抱歉。

      回答

发表评论

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

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