WordPress divi主题

使用 Divi Gallery 模块创建灰度到彩色画廊

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

Divi 的模块在样式上非常灵活。 将悬停效果与更传统的设计元素相结合可以将您的页面从优秀提升到优秀——或者从优秀到令人惊叹。 今天,我们将引导您完成一个 Divi 画廊模块,该模块以灰度开始并在悬停(或在移动设备上触摸)时变为彩色。 让我们开始吧!

google广告开户

预览

为了让您了解我们今天要做什么,您可以观看下面的视频,了解 Divi Gallery 模块以灰度开始,但当鼠标悬停在其上时会显示彩色图像。 在移动设备上,用户滚动时的简单触摸将启动更改。

桌面

移动的

使用 Divi Gallery 模块创建/导航到页面

这可能不言而喻,但您需要创建新页面或转到要编辑的现有页面。 接下来,您需要确保使用 Visual Builder。

制作divi页面

如果您正在创建新页面或显着更改现有页面,您可能需要加载我们的预制布局之一。 对于这个特定的教程,我们将使用 pottery studio 布局包。 具体来说,画廊页面的原因很明显。

用图库模块替换自定义图库

在我们开始时,我们希望将布局包中使用的自定义画廊替换为 Divi Gallery 模块。 您需要进入第二部分并删除所有内部行。 这样做也会删除任何包含的模块。 在此处完全删除行比删除单个模块更有效。

删除行

添加新行

现在,您只需添加一个新行即可开始我们全新的设计。

排

WordPress divi主题

选择行结构

对于本教程,我们将使用 2 列布局,但您可以选择最适合您网站的布局。

添加列

添加图库模块

接下来,您需要将 Divi Gallery 模块添加到您包含的许多列中。 (或者你想要的数量。)

divi 柱廊模块

上传图片和样式库

由于我们使用的是新图库,因此我们不仅要添加要显示的图像,还要设置图库的样式以匹配我们正在处理的页面。

悬停颜色

调整文本样式

因为陶艺工作室画廊是一个黑暗主题的布局包,我们想去设计选项卡下的文本设置,将文本颜色更改为浅色,以便用户阅读。

添加文字颜色

更改字体

我们将图像标题的默认字体调整为 波平斯 超过默认值并将它们设置为粗体。

胆大

fiverr建站WordPress程序员

将灰度应用于颜色效果

现在是时候深入了解效果本身的具体细节了。 只需几个简单的步骤即可创建灰度到彩色悬停效果。

更改覆盖图标和背景颜色

接下来,您将要导航到“设计”选项卡的“叠加”部分。 将叠加图标颜色调整为与页面设计相匹配的颜色。 我们用了 #fdb467 对于这个例子。 它在陶艺工作室布局包的其余部分中用作颜色。

叠加设置

然后,您要将叠加背景颜色调整为透明。

图像设置

您现在将转到“设计”选项卡中的“图像设置”部分,再往下一点。

独立站选品工具

图像设置

更改默认饱和度

在图像设置中,找到饱和度滑块。 您将其调整为 0%。 这样做会立即以灰度呈现该画廊中的图像。

饱和度为 0

对悬停应用饱和度

将鼠标悬停在图像饱和度滑块上,找到看起来像箭头的图标。 单击它,您现在可以调整悬停效果的特定设置。 在本例中,我们将其设置回 100% 饱和度,因为那是正常照片。 但是,如果您希望图像更加生动地悬停,您可以将饱和度调整得更高,并调整任何其他图像设置。

只要基本饱和度为 0,并且悬停饱和度较高,过渡就会按照您选择的强度进行。

高质量外链购买

图像饱和度

保存您的模块设置和页面,您的灰度到彩色悬停效果应该可以工作。 由于元素选择,您可能必须离开 Divi 构建器来测试悬停效果。 因此,如果您没有看到悬停预览更改,请不要担心。 退出构建器,它将工作。

此外,如果您希望彩色图像变为灰度,只需反转此处的步骤即可。 将正常饱和度设置为 100%,但将悬停饱​​和度降低到 0%。 每当有人单击或点击图库图像时,这都会耗尽颜色。

效果预览

桌面预览

之间的过渡可以看出 12, 尽管 3 是默认画廊悬停覆盖和设计设置的示例。 您可以在下面的桌面和移动设备上看到动态效果。

JasperAI 10000字免费额度试用

移动的

结论

使用 Divi 的悬停选项创建灰度到彩色效果既快捷又简单。 只需单击几下并调整滑块,您就可以采用我们的默认样式并将其变成与您的网站完美匹配的东西。 图片库几乎出现在每个站点上,因此许多用户可能对它们视而不见,除非他们专门寻找该内容。 通过使用此效果,您将获得微交互,将他们的目光吸引到您的画廊并让他们与您的网站保持互动。

你怎么看? 让我们在评论中知道!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题