图像

让我们学习如何使用image Element添加这样的图像。

要添加Image Element，只需搜索“Image”并将“Image”拖到画布上。

图像的设置

的设置控件有以下功能:

• 宽度-图像的宽度。
• 最大宽度-图像的最大宽度。如果你想让你的图像永远不超过特定的宽度，这很有用。
• 背景-提供两个选项:基础和交互。底色是图像的背景色，除了悬停时。交互是指悬停时图像的背景色以及与之交互时的背景色。

的图像控件包括:

• 类型—标准或比例。这将影响选项的显示。如果您选择标准选项，您将看到所有的控件和修改。如果你选择缩放，你会看到更少的选项，但你的图像将会响应。根据特定的用例，你可能想要有一个标准的图像，在移动设备上隐藏它，然后使用缩放图像。
• 视网膜＆维-视网膜支持是开箱即用的。点击眼睛禁用视网膜支持。还支持设置图像的宽度和高度的选项。
• 源—要使用的映像。单击从WordPress媒体库中选择图片或上传新图片。
• 链接-勾选后，你会看到一组额外的控制称为链接设置你的链接选项。我们将在下面的“图像链接设置”标题下讨论这个问题。
• Alt文本-你的图像的替代文本。一定要为屏幕阅读器设置这个!

图像设计设置

让我们一步一步来浏览一下图片设计设置……

保证金

页边距布局控件包括:

• 联系方-链接边允许你链接每个选项在空白控制，所以当你改变一个值，所有的值都改变。或者您可以取消链接，并单独设置每个边距选项。
• 前—设置顶部空白。
• 正确的-设置右侧空白。
• Bttm—设置底部空白
• 左-设置左侧空白。

填充

Padding控件包括:

• 联系方-链接边允许你链接每个选项内的填充控件，所以当你改变一个值，所有的值都改变。或者，您可以取消链接边，并分别设置每个填充选项。
• 前—设置顶部空白。
• 正确的—设置右侧空白。
• Bttm—设置底部空白。
• 左—设置左侧空白。

边境

边境管制包括:

• 联系方-允许您链接边界控制的所有方面或取消链接的方面，以单独控制每个边界方面。
• 风格-设置边框的样式，如虚线，虚线等。
• 宽度-默认设置边框宽度，单位为像素。或者点击PX来改变你想要使用的单位(EM, REM)
• 颜色-设置边框的颜色。

外边界半径

外部边界半径控件包括:

• 联系方-连接边界的所有方面，以同时控制所有边界半径选项，而不是单独配置每个值。如果你把两边分开。您可以单独设置边界半径控件。
• 左上角-设置左上角的边界半径。
• 右上方-设置边框的右上方半径。
• Bttm正确-设置边框的右下方半径。
• Bttm左-设置边界的左下方半径。

注意:您将不会看到任何效果更改外边界半径值，除非您已经设置了边境控制。

内边界半径

内边框半径控件包括:

• 联系方-连接边界的所有方面，以同时控制所有边界半径选项，而不是单独配置每个值。如果你把两边分开。您可以单独设置边界半径控件。
• 左上角-设置左上角的边界半径。
• 右上方-设置边框的右上方半径。
• Bttm正确-设置边框的右下方半径。
• Bttm左-设置边界的左下方半径。

请注意，除非你已经设置了边界控制，否则改变内边界半径值不会产生任何效果。

背景

后台控件包括:

• 色彩基础-当元素没有被交互时设置基本颜色。
• 颜色交互-设置与元素交互时的交互颜色(悬停等)。

盒阴影

盒子阴影控件包括:

• x-设置X轴边框阴影的偏移量。
• y-设置Y轴边框阴影的偏移量。
• 模糊-设置框阴影的模糊。
• 传播＆位置-设置框阴影的扩展和位置。
• 颜色-设置框阴影的颜色。

图像链接设置

的链接控件包括:

• 预览-接受URL输入中提供的链接的值，这样您就可以确切地看到链接在图像中的样子。
• 类型—链路类型。它可以是一个传统链接，一个邮件链接或一个电话号码链接。

下面是一个传统链接:

这是一个邮件链接:

这是一个电话链接:

• URL-链接的URL，图像应该指向。
• 新标签页-是否希望在新选项卡中打开链接。
• Nofollow-图片是否应该是nofollow。设置nofollow意味着你链接到的网站不会被谷歌认为是由你支持的。如果链接到外部站点，通常建议检查这一点。

定制

自定义面板包含各种功能，允许你进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置一个HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的样式控制，特别是对嵌套标记。点击在这里有关此功能的更详细信息，如使用el美元动态定位基标签，等等。
• 在断点时隐藏 - - - - - -当需要改变设计时，在不同的屏幕尺寸隐藏元素。点击在这里更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素(例如:”如果特色图像设置…”)．点击在这里更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如。data-info = " 123 ")．这在与各种脚本和库集成时特别有用。

演示

要查看图像元素的现场演示，请单击在这里。

总结

让我们来回顾一下:

1. 首先，我们学习了如何添加Image Element。
2. 然后我们讨论了它的基本设置，包括它的宽度和最大宽度。
3. 第三，我们讨论了设计设置包括边距，填充，边框，边框半径和框阴影。
4. 最后，我们讨论了如何使图像可链接以及不同类型的链接可用。