Divi教程：如何在Divi Builder上使用图像模块

平价 布莱尔Jersyer | Divi

Divi 可以轻松地在任意位置添加图像 您的博客。 所有图像都支持渐进式加载，并带有 4 种不同的动画风格，使您的网站导航变得有趣且引人入胜。 图像模块可以放置在您创建的任何列中，并且它们的大小将进行调整以适合。

image module divi.png

如何从Divi添加图像模块

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

divi生成器

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

divi module image.png

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

用例示例：添加重叠图像以在服务页面上说明服务

使用映像模块的方法有很多。 在此示例中，我将向您展示如何向小型企业网站的服务页面添加图像。 在这里我将添加图像。 每个红色圆圈代表一幅图像。

添加模块图像divi builder.jpg

由于将图像添加到页面是一个相当简单直接的过程，因此我将添加一些自定义样式来定位我的图像，以便它们重叠，从而创建堆叠效果。

让我们开始。

使用视觉生成器添加具有1/4 1/4 1/2布局的标准部分。 然后在行的右列1/2中添加一个文本模块。 输入服务的标题和描述。

然后将图像模块添加到最左侧的1/4列中。

添加图片divi builder.png

如下更新图像模块的设置：

内容选项

图片网址：[输入网址或下载尺寸为500×625的图片]

德观念选项

自定义边距：左-60px

高级选项

动画：从左到右

animation divi image.png

保存设置

在第二个1/4列（或中间列）中添加另一个图像模块，并如下更新图像设置：

内容选项

图片网址：[输入网址或下载尺寸为500×625的图片]

德观念选项

自定义边距：顶部100px，左侧-60px

高级选项

动画：从右到左

重叠图像divi.png

保存设置

这将照顾到第一部分。 现在，对于下一个服务部分，我们可以复制我们刚刚为第一个服务部分创建的部分。 复制该部分后，将列结构更改为1/2 1/4 1/4列布局（与上一个相反）。

选择一个divi.jpg部分

然后将带有标题和服务描述的文本模块拖到最左侧的第1/2列中。 确保滑动两个图像模块以填充每1/4列（现在在右侧）。

由于映像模块是重复的，因此我们需要为该特定服务部分上载新映像。 同样，模块始终具有自定义边距设置，就像创建的前两个图像模块一样。 让我们改变它。

从右侧1 / 4列中的“图像”模块开始，更新以下图像设置：

内容选项

图片网址：[输入网址或下载尺寸为500×625的图片]

德观念选项

自定义边距：-60px向左（仅）

进阶标签

动画：从右到左

最后，使用以下命令更新1/4中心列图像模块的图像设置：

内容选项

图片网址：[输入网址或下载尺寸为500×625的图片]

德观念选项

自定义边距：100px向上，-60px右侧

进阶标签

动画：从左到右

保存设置

现在看看页面！

服务页面divi.jpg的例子

图像模块内容选项

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

section image divi area contents.png

图片网址

在此处放置有效的图片网址，或通过WordPress媒体库选择/上传图片。 图像将始终在其列中以左对齐的形式显示，并跨越列的整个宽度。 但是，您的图像将永远不会超过其原始大小。 图像的高度取决于原始图像的纵横比。

在观众中打开

在这里，您可以选择单击图像时是否在查看器中打开图像。 如果启用此选项，则在模式窗口中单击时，图像将“缩放”到最大尺寸。 这是钱包的一大特色。

链接网址

在此字段中放置有效的网址，以将您的图片转换为链接。 将该字段保留为空白只会将您的图像保留为静态元素。

开启网址

您可以在此处选择是否在新窗口中打开链接。

管理员标签

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

图像模块设计选项

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

选项设计模块image divi.png

图像叠加

如果启用此选项，则当访客将鼠标悬停在图像上方时，将显示颜色和覆盖图标。

颜色图标叠加

在这里，您可以为叠加图标设置自定义颜色

覆盖叠加颜色

在这里，您可以为叠加层定义自定义颜色。

飞越图标

您可以在此处为叠加层定义自定义图标。

移除图片下方的空间

仅当图像是列中的最后一个模块时，此选项才会影响图像。 启用此选项后，图像底部和下一部分之间的距离将被删除，从而使图像能够框住页面下一部分的顶部。

图像对齐

在这里，您可以选择图像在列中浮动的方向。 您可以向左，向右浮动图像，或使其居中。

始终将图片放在移动设备上

通常，当小图像居中时，它们在移动设备上更引人注目。 当列失效时，当列失效并达到100％宽度时，在较小列中向左或向右对齐的图像将变为孤立。 使此列具有强制图像以使其在移动设备上与列的中心对齐，而不会影响台式机上的图像对齐。

使用边框

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

边界的颜色

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

边界的宽度

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

边框样式

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

最大图像宽度

默认情况下，最大图像宽度设置为100％。 这意味着除非图像的宽度超过父列的宽度，否则图像将以其自然宽度显示，在这种情况下，图像将被限制为列宽的100％。 如果要进一步限制图像的最大宽度，可以在此处输入所需的最大宽度值。 例如，值为50％会将图像的宽度限制为父列宽度的50％。

强制全宽

默认情况下，图像以其原始宽度显示。 但是，可以通过启用此选项来选择强制图像跨越父列的整个宽度。

自订保证金

边距是添加到模块外部，模块与模块上方，下方或左侧和右侧之间的下一个元素之间的空间。 您可以将自定义边距值添加到模块的四个侧面中的任何一个。 要删除自定义边距，请从输入字段中删除添加的值。 默认情况下，这些值以像素为单位进行度量，但是您可以在输入字段中输入自定义度量单位。

先进的图像模块选项

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

section advanced module image.png

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

发表评论

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

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