跳到主要内容

前后照片可用于并排比较两个具有微小差异的相同图像。在本文中,我们将分享如何在WordPress中轻松显示照片前后的信息。

照片效果前后如何工作?

通常,人们使用Photoshop来创建前后图像。这是一张显示效果前后的照片,您可以将其作为静态图像添加到WordPress网站上。

功能性的照片滑块是一种交互式方式,可以全尺寸显示相似图像的2个不同版本。您可以移动滑块以同时比较两个图像。

让我们来看看如何在WordPress中轻松显示照片前后。

在WordPress中显示前后照片

您需要做的第一件事是安装并激活Twenty20 Image After-After插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要在WordPress管理区域中创建或编辑要显示前后图像的页面/帖子。现在,单击文本编辑器上方的“ 添加Twenty20”按钮。

它将在弹出窗口中打开WordPress媒体库。从这里,您需要为前后滑块选择两个图像。

如何在wordpress中显示照片带有幻灯片效果
如何在wordpress中显示照片带有幻灯片效果

选择图像后,单击“ 插入”按钮。

接下来,它将显示文本字段以在照片的前后添加内容。您还可以添加滑块的宽度,偏移值,滑块方向等。

之后,单击“ 插入简码”按钮以在WordPress页面中添加前后照片。

您还可以使用Twenty20图像小部件在WordPress边栏中显示照片的前后。只需转到WordPress管理员中的“ 外观»小部件”部分,然后将“ Twenty20滑块”小部件拖动到“边栏”小部件区域中。

Twenty20 Slider小部件对照片的前后设置与我们在本指南中上面分享的设置类似。您可以在小部件设置中一一选择2张图像,以创建照片前后滑块。

现在,您可以访问您的网站以查看操作前后的照片。

当用户向每个图像滑动手柄时,另一个图像将变为可见。用户可以将滑块一直移到右侧或左侧,以查看完整的图像前后。随着用户滑动,前后标签将自动消失。

此插件可与流行的WordPress页面构建器(例如Beaver BuilderElementor)配合使用,以快速显示网站页面中的照片前后,而无需使用短代码

回到顶部