创建响应式背景图像和更多元素

Rifat Jun 17, 2022

为了增强您的用户体验, Elementor提供了新功能,例如对背景图形的移动控制、用于调试的安全模式等。

Elementor一直以其为移动设备设计的能力而自豪。 对于 Elementor 用户来说,准确定位背景图片仍然是个问题。 作为一个 web 开发者,你可能经常会遇到这样的问题:你想展示狗的脸,但只在手机上展示它的尾巴。

Elementor的响应式背景图像控件允许您创建适应任何设备的大小和分辨率的背景图像。

响应式背景图像控件

最新的Elementor 版本让客户可以全面控制台式机、平板电脑和移动背景图像控件。 此控件中包含背景图像控件(图像、位置、附件、重复和大小)。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

有史以来第一次,您可以自定义单个设备的位置。 为移动设备选择“center-top”,为台式机选择“center-center”,以确保图像在所有平台上统一显示。 对于每个设备,您可以选择不同的尺寸。 至于移动设备,桌面选择“包含”,选择“覆盖”。

我们确信很多人会喜欢这个新功能,因为这对很多人来说是一个主要问题。

Elementor能够为每个单独的设备设置完全不同的图片。 第一个额外的响应控件以特定于设备的大小和位置的形式出现。 尺寸和位置可调,让您更进一步,给您更灵活的设计体验。

自定义背景图像大小 & 位置

以前,只有三个选项用于设置背景图像的大小:自动、覆盖或包含。 与“左上角”类似,您只能指定一般背景图片位置。

背景的大小和位置现在是两个新的自定义控件,将来可以使用。

自定义背景位置允许您选择背景图像的确切 X 轴和 Y 轴坐标。 因此,您现在可以精确对齐页面的背景。

自定义背景尺寸也是可能的。 将背景图像的宽度设置为以像素为单位的精确值。

对于响应式设计,这些设置 — 特别是自定义背景大小和位置 — 至关重要。 对于台式机、平板电脑和移动平台,使用这些自定义设置在图像的主要焦点上建立特定的焦点。

响应式边界控制

此外,除了背景图像之外,您现在还可以分别自定义每个设备的边框半径和宽度。

列边框可以以多种方式使用,例如当一行链接被列边框分割时。 在移动设备上是不必要的,因为该行不再是内联的,并且每个链接都放置在自己的一行中。

在这种情况下,移除移动布局的边框是轻而易举的事。 新的动态边界功能使其易于完成。

移动设备上不再有“孤立的边界”!

用于故障排除的安全模式

Elementor致力于为所有客户提供流畅、无错误的体验。 有数以万计的插件和主题可供选择,并且有无数种方法可以使它们相互配合。 不管有没有Elementor参与,这些组合都必然会引发纷争。

Elementor一直在寻找通过减少工作流程中的摩擦来让我们的用户更轻松的方法。

当人们无法打开编辑器时,这是一个常见的问题。 这个问题有很多名字:我得到一个空白屏幕,我无法编辑,我的电脑卡住了 loading…

安全模式就是答案!

当 Windows 首次问世时,它包含一个安全模式功能,可用于解决各种问题。 Elementor 自己开发了一个类似的解决方案。

每当您遇到拒绝加载的页面时,您都可以通过单击按钮来激活“安全模式”。

Elementor和 WordPress 在“安全模式”下受到任何可能导致问题的主题或插件的保护。

超过 80% 的加载问题可以在安全模式下临时修复。

当您进入安全模式时,是否一切都正确加载?

这表明您的主题或您的插件之一应为错误负责。 继续并一一停用它们,以识别肇事者。

我打开了安全模式,但它仍然无法加载。

这表明您应该在其他地方探索解决方案,这很可能是自定义代码或与托管相关的问题。

“安全模式会影响我的网站?”

如果您的网站访问者使用安全模式,他们不会注意到差异。 您安装的所有插件和主题都将显示在您的网站上,您的访问者将能够像往常一样使用它们。

在 Elementor 编辑器加载过程中,插件和主题不会被激活。

Elementor的用户将极大地受益于安全模式,获得更稳定、无缝和无错误的体验。

阅读更多标签 & 小部件

WordPress 的阅读更多标签是 elementor 作为功能请求获得的第一件事之一。

这是一个简单的请求,但页面构建器终于开始实施它。

当您在博客文章中使用“阅读更多”标签时,存档的帖子显示将删除其余文本。 有了这个,您的内容预告片现在可以直接显示在您的主博客页面上,供所有人查看。

在文本编辑器小部件中或作为单独的小部件,您现在可以快速添加阅读更多标签。 使用 Elementor 的新“阅读更多”小部件,可以更轻松地在存档页面上显示摘录,该小部件可以插入两个文本编辑器小部件之间,并准确地停在您选择的位置。

为了避免任何混淆,此小部件仅适用于在其内容中使用“内容”的常规 WordPress 存档页面。 Elementor 存档模板不受影响。

最后的话

Elementor是开发广泛的 WordPress 页面构建器之一。 随着新功能的出现,它每次都变得越来越强大。 使用此插件,您可以从字面上探索网站设计和装饰的巨大海洋。 希望你能从这篇文章中受益。 访问更多elementor 教程并与您的朋友分享。

Divi WordPress Theme