在Divi上共享图像集合始终是视觉上吸引用户参与您的内容的好方法。 Divi的画廊模块允许您在网站上的任何位置创建和组织画廊。 Divi Builder上的画廊模块提供网格和滑块格式，并支持带有分页的大型画廊。

如何在页面上添加图库模块

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

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。新模块只能添加到行内。如果要开始新页面，请记住首先在页面中添加一行。我们提供了有关使用以下元素的出色教程线和部分由Divi

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

用例示例：添加全宽图片库以展示照片。

将图库添加到您的摄影页面是一个很好的方法促进您的工作并提高您在客户中的可信度。在此示例中，我将向您展示如何使用图库模块添加具有跨越页面整个宽度的网格布局的图像库。图像之间没有空间，这使其具有实用性和美观性。

而且请不要忘记，每个图像都会打开一个弹出窗口，以循环显示图库中较大版本的图像。

使用Visual Builder，在标题部分下添加一个新部分，该部分具有全角或全角（1列）行。然后将Gallery模块添加到该行。

如下更新画廊模块设置：

内容选项

图库图像：单击更新的图库，然后选择要包含在图库中的图像。 图像数：12显示标题和标题：否显示分页：否

德观念选项

布局：网格缩略图的方向：横向缩放图标颜色：#ffffff悬停颜色：rgba（0,0,0,0.48）悬停图标选择器：默认

保存设置

现在剩下要做的就是摆脱图像周围的所有空间。返回并选择行设置。在设计选项卡上，更新以下内容：

将此行设为全宽：是
使用自定义装订线宽度：是
装订线宽度：1

重要的是要记住，装订线宽度的数值“ 1”实际上为零（根本没有宽度）。

保存设置

这就是它！

Gallery模块的内容选项

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

画廊的图片

点击更新按钮 那天画廊 启动WordPress多媒体库，您可以在其中选择要在图库中显示的图像。

图片数量

设置每页显示的图像数量。当图库中包含的图像数量超过每页允许的数量时，分页将显示在图像下方。

显示标题和标题：

如果添加了图像标题或标题，它们将显示在图库中的图像下方。如果要禁用这些文本元素，可以使用此选项。

查看分页

当图库中包含的图像数量超过每页允许的数量时，分页将显示在图像下方。如果要删除分页，可以关闭此设置。

管理员标签

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

使用边框

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

边界的颜色

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

边界的宽度

默认情况下，边框为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子主题或使用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教程

类似商品

6评论

拉德扬 19 年 2023 月 15 日 24 时 XNUMX 分

您好，图库选项，看起来很有趣。也就是说，我如何从给定的组中随机选择我的图像？我想将我网站上的 html/php 页面替换为只有 wp/divi。一个主意？ php 注入……其他……提前致谢。下面是我网站的地址，单击缩略图将返回到我所说的这个 html/php 页面。单击 html/php 幻灯片的图像以返回缩略图（wordpress 页面）。以此类推，幻灯片图像存储在数据库中，并带有将随机选择字段限制为5的代码，每次更新。
要在另一个 WP 站点上注入代码以直接在 WP 数据库中选择信息，我记得在它起作用之前这并不容易……感谢您的站点！
回答
SAM 1年2021月19日39小时XNUMX分钟

Bonsoir，
我希望在 DIVI 画廊中垂直居中不同大小的图像。
无论我怎么看，我都找不到。你有窍门吗？？
Merci d'avance。
CDT
回答
美浓 26 年 2019 月 20 日 46 时 XNUMX 分

嗨，但是我如何在同一行上显示5张图片？
我不能超过4个！
留言Merci。
回答
- 蒂埃里·贝特朗 27年2019月5日55小时XNUMX分钟
  
  喜
  
  您必须使用Visual Composer或Elementor之类的插件。它们提供了更多的可能性。
  回答
陈智思 28年2019月19日，59小时XNUMX分

您好，我发现您的文章非常有趣。
我按照您的建议在Divi下创建了一个图片库，并且一切正常，除了我不知道如何删除鼠标右键以防止保存在我的图片下。您有解决方案吗，谢谢。亲切地
回答
- 蒂埃里·贝特朗 28年2019月21日，17小时XNUMX分
  
  晚上好，伯纳德，
  
  要阻止右键单击，您需要安装插件。我邀请您搜索WordPress的目录。
  回答

发表评论更改或取消LA REPONSE

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

Divi教程：如何使用图库模块