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

你想在WordPress中显示之前和之后的照片吗？之前和之后的照片允许您并排显示两个图像的并排比较，但差异很小。这非常适合展示您的产品和服务的影响，或者只是鼓励人们与您的内容互动。在本文中，我们将向您展示如何使用幻灯片效果将之前/之后的照片添加到您的 WordPress 网站。

 为什么要在WordPress中显示之前和之后的照片（带有幻灯片效果）？

前后图像是通常显示某种变化的交互式图片。

访问者可以使用滑块以引人入胜的互动方式在图像的不同“版本”之间切换。

如果您使用诸如WooCommerce之类的插件运行在线商店，那么之前和之后的照片可以显示您的产品或服务的效果。

您只需要显示客户可以与之相关的“之前”照片，以及理想的“之后”照片。这将使购物者想要购买将他们从“之前”状态带到“之后”状态的东西。

如果您是联盟营销人员，那么在您的网站上显示有说服力的前后照片是推广您的联盟链接并获得更多销售的好方法。

之前和之后的照片还可以鼓励访问者与您的内容互动。拖动滑块以显示“之后”照片是获得更多参与度的简单方法，这可以让访问者在您网站上停留更长时间。这也有助于增加您的综合浏览量并降低WordPress中的跳出率。

 方法 1.如何使用免费插件显示前后照片（简单）

创建前后照片的最简单方法是使用Ultimate Before After Image Slider & Gallery（BEA）。

BEA 插件允许您创建水平和垂直滑块，并使用不同的标签和颜色自定义图像。

您需要做的第一件事是安装并激活Ultimate Before After Image Slider & Gallery（BEA）插件。

激活后，转到仪表板中的滑块之前和之后 » 新增。

首先，键入图像滑块的名称。这仅供您参考，因此您可以使用任何有助于您识别它的内容。

完成后，您可以通过滚动到“图像之前”部分来添加“之前”图像。

在这里，单击“添加或上传图像”，然后从WordPress媒体库中选择图片或从计算机上传新文件。

为了帮助搜索引擎理解此图像并将其展示给合适的人，最好添加一些图像替代文本。为此，只需在“图像替代”字段中输入即可。

完成后，滚动到“图像后”部分。

现在，您可以按照上述相同过程添加“之后”映像。不要忘记在此图像中添加一些替代文本，因为它对WordPress SEO很重要。

您还可以通过添加标题和说明在图像下方显示一些文本。

例如，您可以鼓励访问者与滑块进行交互。这对于以前可能从未遇到过前后照片的游客尤其重要。

这也是向图像添加一些上下文的简单方法。

要添加一些文本，只需在“滑块标题”或“滑块描述”字段中输入即可。

您还可以添加“阅读更多”URL，该URL可以链接到WordPress网站上的任何帖子或页面，甚至是外部网站。例如，您可以将访问者引导至一个页面，他们可以在其中购买滑块图像中的产品。

此链接将显示在之前/之后的图像下方，以及您正在使用的任何滑块标题或说明下方。

要添加链接，请在“阅读更多链接”字段中输入目标。

然后，您可以决定是在同一标签页中打开链接，还是使用“阅读更多链接目标”下拉菜单在新标签页中打开链接。

如果您要链接到另一个网站，那么我们建议您选择“新标签”，这样您就不会将访问者从您的WordPress博客中移开。

完成后，您可以通过单击“方向样式”部分中的缩略图之一来选择是要创建垂直滑块还是水平滑块。

之后，滚动到屏幕顶部，然后单击“选项”。

在这里，您将看到“默认偏移量”设置为 0.5。这意味着访问者在页面首次加载时会看到“之前”图像的一半。

如果要显示更多之前的图像，请键入更大的数字，例如 0.6、0.7 或更高。

如果要显示整个图像之前的图像，请输入 1。这会将滑块放置在上一个图像的顶部或右侧，如下图所示。

默认情况下，当访问者将鼠标悬停在图像上时，插件会显示“之前”和“之后”标签。

您可能希望将这些标签替换为更具描述性的内容。

为此，只需继续并输入“标签之前”和“标签后”字段。

默认情况下，访问者将使用拖放来移动滑块。有些人可能会觉得这很困难，特别是如果他们有行动不便或正在使用智能手机或平板电脑等较小的设备。

如果您选择“鼠标悬停时移动滑块”旁边的“是”按钮，则访问者只需将鼠标悬停在图像上即可移动滑块。

如果您选择“单击以移动”旁边的“是”按钮，则访问者可以单击图像上的任意位置以将滑块移动到该点。

这些设置可以更轻松地与之前/之后的图像进行交互，但通常不是滑块的行为方式。考虑到这一点，我们建议谨慎使用这些设置。

接下来，单击“样式”选项卡。

在这里，您可以更改用于不同标签、背景、标题、描述和阅读更多按钮的颜色。这可以帮助之前/之后的图像与您的 WordPress 主题融合，甚至从您网站设计的其他部分脱颖而出。

您还可以更改字体大小和文本对齐方式。

如果您对滑块的设置方式感到满意，请单击“发布”按钮。

这将创建一个简码，允许您将之前/之后的图像和滑块添加到任何页面、帖子或小部件就绪区域。

将简码添加到您的网站后，只需单击“发布”或“更新”按钮即可使之前/之后的图像和滑块效果生效。

 方法 2.如何使用显示前后照片种子产品（高级）

如果您只想在页面或帖子中添加前后图像，那么 BEA 插件可能是一个不错的选择。但是，如果您使用图像来推广产品、服务或业务，那么我们建议您使用 SeedProd。

SeedProd 是最好的拖放式 WordPress 页面构建器。它带有 180 多个现成的模板，您可以使用它们来创建高转化率的登录页面、销售设计等。

它还有一个现成的“之前之后切换”块，您可以使用它来创建用户可以与之交互的漂亮的前后图像。

只需从左侧菜单中拖动块，然后将其放到您可能碰巧正在处理的任何页面设计上，包括销售页面。

如果您使用WooCommerce来销售您的产品，那么SeedProd与WooCommerce集成，甚至带有特殊的电子商务块。如果您打算使用前后图像来推广您的WooCommerce产品，这是完美的。

注意：有一个免费版本的SeedProd，无论您的预算如何，都可以创建自定义页面。但是，我们将使用高级版本，因为它带有“之前之后”切换块。它还与您网站上可能已经在使用的许多最佳电子邮件营销服务集成。

创建页面后，可以轻松地将前后图像添加到设计中。在 SeedProd 页面编辑器中，只需找到“之前之后切换”块。

然后，您可以将此块拖放到设计上的任何位置，以将其添加到页面布局中。

完成后，只需单击以选择“切换之前”块。左侧菜单现在将更新，以显示可用于创建前后图像的所有设置。

首先，您需要添加要用作之前图像的图片。在“图片之前”下，单击“使用您自己的图片”或“使用库存图片”，然后选择要使用的图片。

默认情况下，SeedProd 在此图像上方显示“之前”标签。但是，您可以通过在“标签之前”字段中键入将其更改为更具描述性的内容。

完成后，滚动到“图像后”部分。

您现在可以按照上述相同的过程添加图像并自定义默认的“After”标签。

种子生产可以添加垂直或水平滑动效果。

要在这两种样式之间切换，请滚动到“滑块方向”部分，然后单击“垂直”或“水平”。

默认情况下，访问者将通过拖动滑块在之前和之后的图像之间移动。但是，某些用户可能会发现通过将鼠标悬停在图像上来移动滑块更容易。

对于较大的图像尤其如此，访问者需要将滑块拖动到更远的距离。

要尝试此设置，请在左侧菜单中启用“悬停时移动”。

接下来，您可能希望为之前和之后的图像添加彩色叠加层。这可以帮助图像与配色方案的其余部分融合，或从背景中脱颖而出。

您甚至可以使彩色叠加层半透明，以创建更微妙的效果。

要尝试不同的颜色，请单击“叠加颜色”部分，然后在出现的弹出窗口中进行更改。

完成后，您可以通过单击以展开“比较手柄”部分来自定义滑块手柄。

默认情况下，SeedProd 显示“之前”图像的一半和“之后”图像的一半。要更改此设置，只需拖动“处理初始偏移”滑块。

要显示较少的前面的图像，请将滑块向左拖动，使其显示较小的数字。若要显示之前图像的更多内容，请将滑块向右拖动，这将增加数字。

接下来，您可以使用“手柄颜色”设置更改滑块的颜色。

您还可以使用“手柄厚度”滑块使手柄变厚或变细。

通过这种方式，您可以使手柄脱颖而出，或创造更微妙的效果。

当您对手柄感到满意时，您可能需要更改圆圈。您可以使用“圆宽度”设置使圆变大或变小，并更改“圆半径”以创建尖角或弯曲的角。

当您进行更改时，实时预览将自动更新，因此您可以尝试不同的设置以查看最佳外观。

当您对圆感到满意时，您可能需要更改该圆圈内三角形的大小。例如，如果您使圆更大，则可能还希望增加三角形的大小。

要进行此更改，请拖动“三角形大小”滑块，直到您对它的外观感到满意为止。

完成此操作后，您可以继续添加新块并自定义 SeedProd 页面上的内容。

如果您对页面的外观感到满意，只需单击“保存”按钮旁边的箭头，然后选择“发布”。

现在，如果您访问您的网站，您将看到您的页面设计以及前图像和后图像。