wordpress 效果_如何在WordPress中显示照片之前和之后（带有幻灯片效果）

wordpress 效果

Do you want to show the before and after photos on your website? A before and after photo can be useful to display side by side comparison of two identical images with minor differences. In this article, we will share how to easily show before and after photo in WordPress.

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

照片效果前后如何工作？ (How Does the Before and After Photo Effect Work?)

Normally people use Photoshop to create a before and after image. It’s a single photo that shows before / after effects, and you can add it as a static image on your WordPress website.

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

A functional photo slider is an interactive way to show 2 different versions of a similar image in full size. You can move the slider handle to compare both images side by side.

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

Let’s take a look on how to easily show before and after photo in WordPress.

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

影片教学 (Video Tutorial)

演示地址

If you don’t want to watch the video tutorial, then you can continue reading the text version below:

如果您不想观看视频教程，则可以继续阅读以下文本版本：

在WordPress中显示前后照片 (Showing the Before and After Photo in WordPress)

First thing you need to do is to install and activate the Twenty20 Image Before-After plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon activation, you need to create or edit a page/post in your WordPress admin area where you want to show the before and after image. Now, click on the Add Twenty20 button above the text editor.

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

It’ll open the WordPress Media Library in a popup. From here, you need to select two images for the before and after slider.

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

Once the images are selected, click on the Insert button.

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

Next, it’ll display the text fields to add content on top of the before and after photos. You can also add width for the slider, offset value, slider direction, and more.

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

After that, click on the Insert Shortcode button to add the before and after photo in your WordPress page.

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

You can also use the Twenty20 image widget to display the before and after photo in your WordPress sidebar. Simply go to Appearance » Widgets section in your WordPress admin, and then drag the Twenty20 Slider widget in your Sidebar widget area.

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

The Twenty20 Slider widget has similar settings for the before and after photo as we shared above in this guide. You can select the 2 images one by one in the widget settings to create the before and after photo slider.

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

Now, you can visit your website to see the before and after photo in action.

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

As the users slide the handle towards each image, the other image will become visible. Users can take the slider all the way to the right or the left to see the full before and after image. As the users slide the before and after labels will automatically disappear.

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

This plugin works great with the popular WordPress page builders like Beaver Builder and Elementor to quickly show before and after photo in your website pages without using shortcodes.

此插件可与流行的WordPress页面构建器(例如Beaver Builder和Elementor)配合使用，以快速在您的网站页面中的照片前后显示而不使用短代码 。

We hope this article helped you learn how to show before and after photo in WordPress. You may also want to see our guide on how to add magnifying zoom for images in WordPress.

我们希望本文能帮助您学习如何在WordPress中显示照片前后。 您可能还想查看有关如何在WordPress中为图像添加放大缩放的指南。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-show-before-and-after-photo-in-wordpress/

wordpress 效果