👋🏼Welcome to my WP-Host blog where I am excited to share my knowledge and expertise on WordPress hosting and website construction tutorials with you. Let’s connect and learn from each other! You can reach me at info@yrshare.com.
(如果你会中文，可以点击微信图标与我联系。)
注：因个人英文水平有限，所以暂时只能为懂中文的朋友提供wordpress建站服务
微信：18200592859 或 yrwordpress
How to Show Before and After Photos in WordPress? The main focus of this article is on showcasing before and after photos on a WordPress website to create a comparison effect. The piece explores a free WordPress plugin called Ultimate Before After Image Slider & Gallery that offers an easy-to-use image comparison tool to produce stunning before and after photo effects. The article provides a detailed guide on how to install and configure the plugin, including creating new before and after photo comparisons, inserting comparison images into pages or posts, and adjusting the comparison image settings. In addition, the piece also offers some other plugin suggestions that can achieve similar picture comparison effects. You may select a suitable WordPress plugin for your own installation and usage.
【WP-Host/悦然wordpress建站】
Original link：https://www.wpbeginner.com/plugins/how-to-show-before-and-after-photo-in-wordpress/
Do you want to show a before and after photo in WordPress?
A before and after photo allows you to show a side by side comparison of two images with minor differences. This is perfect for showing the impact of your products and services, or simply encouraging people to interact with your content.
In this article, we’ll show you how to add a before/after photo to your WordPress website with a slide effect.
A before-and-after image is an interactive picture that typically shows some kind of change.
Visitors can use a slider to switch between the different ‘versions’ of the image in an engaging and interactive way.
If you run an online store using a plugin such as WooCommerce, then a before and after photo can show the effect of your products or services.
You simply need to show a ‘before’ photo that the customer can relate to, and a desirable ‘after’ photo. This will make shoppers want to buy the thing that takes them from the ‘before’ state to the ‘after’ state.
If you’re an affiliate marketer, then showing persuasive before and after photos on your website is a great way to promote your affiliate links, and get more sales.
Before and after photos can also encourage visitors to interact with your content. Dragging a slider to reveal the ‘after’ photo is an easy way to get more engagement, which can keep visitors on your site for longer. This can also help increase your pageviews and reduce bounce rate in WordPress.
With that being said, let’s see how you can create a before and after photo in WordPress using a slide effect. Simply use the quick links below to jump straight to the method you want to use.
The easiest way to create before and after photos is by using the Ultimate Before After Image Slider & Gallery (BEA).
The BEA plugin allows you to create horizontal and vertical sliders, and customize the image with different labels and colors.
The first thing you need to do is to install and activate the Ultimate Before After Image Slider & Gallery (BEA) plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, go to Before and After Slider » Add New in your dashboard.
To start, type in a name for the image slider. This is just for your reference so you can use anything that will help you identify it.
With that done, you can add the ‘before’ image by scrolling to the ‘Before Image’ section.
Here, click on ‘Add or Upload Image’ and then either choose a picture from the WordPress media library or upload a new file from your computer.
To help search engines understand this image and show it to the right people, it’s a good idea to add some image alt text. To do this, simply type into the ‘Image Alt’ field.
With that done, scroll to the ‘After Image’ section.
You can now add the ‘after’ image by following the same process described above. Don’t forget to add some alt text to this image, too, since it’s important for WordPress SEO.
You can also show some text below the image, by adding a title and a description.
For example, you might encourage visitors to interact with the slider. This is especially important for visitors who might have never run across a before-and-after photo before.
This is also an easy way to add some context to the image.
To add some text, simply type into the ‘Slider Title’ or ‘Slider Description’ fields.
You can also add a ‘Read More’ URL, which can link to any post or page on your WordPress website, or even an external website. For example, you might send visitors to a page where they can buy the product featured in the slider image.
This link will appear below the before/after image, and also beneath any slider title or description you’re using.
To add a link, type the destination into the ‘Read More Link’ field.
You can then decide whether to open the link in the same tab, or in a new tab using the ‘Read More Link Target’ dropdown.
If you’re linking to another website, then we recommend choosing ‘New tab’ so you’re not sending visitors away from your WordPress blog.
With that done, you can choose whether you want to create a vertical or horizontal slider by clicking on one of the thumbnails in the ‘Orientation Style’ section.
After that, scroll to the top of the screen and click on ‘Options.’
Here, you’ll see the ‘Default offset’ is set 0.5. This means the visitor sees half of the ‘before’ image when the page first loads.
If you want to show more of the before image, then type in a bigger number such as 0.6, 0.7, or higher.
If you want to show the entire before image, then type in 1. This will place the slider at the top or right of the before image, as you can see in the following image.
By default, the plugin shows ‘Before’ and ‘After’ labels when the visitor hovers their mouse over the image.
You may want to replace these labels with something more descriptive.
To do this, simply go ahead and type into the ‘Before Label’ and ‘After Label’ fields.
By default, visitors will move the slider using drag and drop. Some people may find this difficult, especially if they have mobility issues or they’re using smaller devices like smartphones or tablets.
With that being said, you may want to change how visitors move the slider.
If you select the ‘Yes’ button next to ‘Move slider on mouse hover,’ then visitors can move the slider simply by hovering their mouse over the image.
If you select the ‘Yes’ button next to ‘Click to move,’ then visitors can click anywhere on the image to move the slider to that point.
These settings can make it easier to interact with the before/after image, but it’s typically not the way that sliders behave. With that in mind, we recommend using these settings carefully.
Next, click on the ‘Style’ tab.
Here, you can change the colors used for the different labels, backgrounds, headings, descriptions, and the read more button. This can help the before/after image blend in with your WordPress theme, or even stand out from the rest of your website’s design.
You can also change the font size and text alignment.
When you’re happy with how the slider is set up, click on the ‘Publish’ button.
This creates a shortcode that allows you to add the before/after image and slider to any page, post, or widget-ready area.
After adding the shortcode to your site, simply click on the ‘Publish’ or ‘Update’ button to make the before/after image and slider effect live.
If you simply want to add a before and after image to a page or post, then the BEA plugin may be a good choice. However, if you’re using the image to promote a product, service, or business then we recommend using SeedProd.
SeedProd is the best drag-and-drop WordPress page builder. It comes with more than 180 ready-made templates that you can use to create high-converting landing pages, sales designs, and more.
It also has a ready-made ‘Before After Toggle’ block that you can use to create beautiful before-and-after images your users can interact with.
Simply drag the block from the left-hand menu, and then drop it onto any page design that you may happen to be working on, including sales pages.
If you’re using WooCommerce to sell your products, then SeedProd integrates with WooCommerce and even comes with special eCommerce blocks. This is perfect if you plan to use before and after images to promote your WooCommerce products.
Note: There is a free version of SeedProd that allows you to create custom pages no matter your budget. However, we’ll be using the premium version as it comes with the Before After Toggle block. It also integrates with many of the best email marketing services you may already be using on your website.
After creating a page, it’s easy to add a before and after image to your design. In the SeedProd page editor, simply find the ‘Before After Toggle’ block.
You can then drag and drop this block anywhere on your design, to add it to the page layout.
With that done, simply click to select the ‘Before After Toggle’ block. The left-hand menu will now update to show all the settings you can use to create your before-and-after image.
To start, you’ll need to add the picture you want to use as the before image. Under ‘Before Image’ either click on ‘Use Your Own Image’ or ‘Use a Stock Image’ and choose the picture you want to use.
By default, SeedProd shows a ‘Before’ label above this image. However, you can change this to something more descriptive by typing it into the ‘Before Label’ field.
With that done, scroll to the ‘After Image’ section.
You can now add an image and customize the default ‘After’ label by following the same process described above.
SeedProd can add a vertical or horizontal slide effect.
To switch between these two styles, scroll to the ‘Slider Orientation’ section and then click on either ‘Vertical’ or ‘Horizontal.’
By default, visitors will move between the before and after images by dragging the slider. However, some users may find it easier to move the slider by hovering their mouse over the image.
This is particularly true for larger images where the visitor would need to drag the slider a greater distance.
To try this setting, enable ‘Move on Hover’ in the left-hand menu.
Next, you may want to add a colored overlay to both the before and after images. This can help the image blend in with the rest of the color scheme, or stand out from the background.
You can even make the colored overlay semi-transparent, to create a more subtle effect.
To try different colors, click on the ‘Overlay Color’ section and then make your changes in the popup that appears.
With that done, you can customize the slider handle by clicking to expand the ‘Comparison Handle’ section.
By default, SeedProd shows half of the ‘before’ image and half of the ‘after’ image. To change this, simply drag the ‘Handle Initial Offset’ slider.
To display less of the before image, drag the slider to the left so that it shows a lower number. To show more of the before image, drag the slider to the right, which increases the number.
Next, you can change the slider’s color using the ‘Handle Color’ settings.
You can also make the handle thicker or thinner using the ‘Handle Thickness’ slider.
In this way, you can make the handle stand out, or create a more subtle effect.
When you’re happy with the handle, you may want to change the circle. You can make the circle bigger or smaller using the ‘Circle Width’ settings, and change the ‘Circle Radius’ to create sharp or curved corners.
As you make changes, the live preview will update automatically so you can try different settings to see what looks the best.
When you’re happy with the circle, you may want to change the size of the triangles inside that circle. For example, if you’ve made the circle bigger then you might want to increase the size of the triangles too.
To make this change, drag the ‘Triangle Size’ slider until you’re happy with how it looks.
With that done, you can continue adding new blocks and customizing the content on your SeedProd page.
When you’re happy with how the page looks, just click on the arrow next to the ‘Save’ button and then select ‘Publish.’
Now if you visit your website you’ll see your page design with the before-and after-image live.
Original link：https://www.wpbeginner.com/plugins/how-to-show-before-and-after-photo-in-wordpress/
你想在你的wordpress网站中显示图片前后的对比效果吗？
前后照片可让您并排比较两张具有细微差异的图像。这非常适合展示您的不同产品和服务之间的对比，或者只是鼓励人们与您的内容互动，有助于营销推广。
在本文中，我们将向您展示如何使用幻灯片效果将前后照片添加到您的 WordPress 网站。
前后图像是一种交互式图片，通常显示某种变化。访问者可以使用滑块以一种引人入胜的互动方式在图像的不同“版本”之间切换。
如果您使用WooCommerce等插件制作wordpress在线商店，那么前后照片可以显示您的产品或服务的效果，可以促进用户下单购买。
您只需要展示一张客户可以联想到的“之前”照片，以及一张令人满意的“之后”照片。这将使购物者想要购买将他们从“之前”状态带到“之后”状态的东西。
如果您是联盟营销人员，那么在您的网站上展示有说服力的前后照片是推广您的联盟链接并获得更多销售额的好方法。
前后照片还可以鼓励访问者与您的内容互动。拖动滑块以显示“之后”的照片是获得更多参与度的简单方法，可以让访问者在您的网站上停留更长时间。这也有助于增加您的网页浏览量并降低 WordPress 中的跳出率。
话虽如此，让我们看看如何使用幻灯片效果在 WordPress 中创建前后照片。只需使用下面的快速链接直接跳转到您要使用的方法。
创建前后照片的最简单方法是使用插件： Ultimate Before After Image Slider & Gallery (BEA).
BEA 插件允许您创建水平和垂直滑块，并使用不同的标签和颜色自定义图像。
你可以在wordpress建站 后台安装这个插件，然后激活它。
激活后，转到仪表板中添加新滑块（After Slider » Add New）
首先，输入图像滑块的名称。这仅供您参考，因此您可以使用任何有助于识别它的方法。
完成后，您可以通过滚动到“前图像”部分来添加“前”图像。
在这里，点击“添加或上传图片”，然后从 WordPress 媒体库中选择一张图片或从您的计算机上传一个新文件。
为了帮助搜索引擎理解这张图片并将其展示给合适的人，添加一些图片替代文字是个好主意。为此，只需在“Image Alt”字段中输入。
完成后，滚动到“After Image”部分。
您现在可以按照上述相同的过程添加“后”图像。不要忘记在此图片中添加一些替代文字，因为这对 WordPress SEO 很重要。
您还可以通过添加标题和说明在图像下方显示一些文本。
例如，您可以鼓励访问者与滑块进行交互。这对于以前可能从未看过前后照片的访客来说尤其重要。
这也是向图像添加一些上下文的简单方法。
要添加一些文本，只需在“Slider Title”或“Slider Description’ fields”字段中输入内容即可。
您还可以添加“Read More”URL，它可以链接到您的 WordPress 网站上的任何帖子或页面，甚至是外部网站。例如，您可以将访问者引导到一个页面，他们可以在该页面上购买滑块图像中展示的产品。
此链接将显示在前/后图像下方，以及您正在使用的任何滑块标题或描述下方。
要添加链接，请在“Read More link”字段中输入目的地。
然后，您可以决定是在同一选项卡中打开链接，还是使用“Read More link Target”下拉菜单在新选项卡中打开链接。
如果您要链接到另一个网站，那么我们建议您选择“新标签”，这样您就不会将访问者从您的 WordPress 博客上带走。
完成后，您可以通过单击“方向样式”部分中的其中一个缩略图来选择是要创建垂直还是水平滑块。
之后，滚动到屏幕顶部并单击“Options”。
在这里，您会看到“Default offset”设置为 0.5。这意味着访问者在页面首次加载时会看到一半的“before”图像。
如果您想显示更多的前图像，请输入更大的数字，例如 0.6、0.7 或更高。
如果要显示整个前图，请输入 1。这会将滑块放置在前图的顶部或右侧，如下图所示。
默认情况下，当访问者将鼠标悬停在图像上时，插件会显示“之前”和“之后”标签。
您可能想用更具描述性的内容替换这些标签。
为此，只需继续并输入“Before Label”和“After Label”字段即可。
默认情况下，访问者将使用拖放来移动滑块。有些人可能会觉得这很困难，尤其是当他们行动不便或使用智能手机或平板电脑等较小设备时。
话虽如此，您可能想要更改访问者移动滑块的方式。
如果您选择“鼠标悬停时移动滑块”旁边的“是”按钮，那么访问者只需将鼠标悬停在图像上即可移动滑块。
如果您选择“单击以移动”旁边的“是”按钮，则访问者可以单击图像上的任意位置以将滑块移动到该点。
这些设置可以更轻松地与前/后图像进行交互，但这通常不是滑块的行为方式。考虑到这一点，我们建议谨慎使用这些设置。
接下来，单击“Style”选项卡。
在这里，您可以更改用于不同标签、背景、标题、描述和阅读更多按钮的颜色。这可以帮助前/后图像与您的 WordPress 主题融为一体，甚至可以从您网站的其余设计中脱颖而出。
您还可以更改字体大小和文本对齐方式。
如果您对滑块的设置感到满意，请单击“发布”按钮。
这会创建一个短代码，允许您将前/后图像和滑块添加到任何页面、帖子或小部件就绪区域。
将短代码添加到您的网站后，只需单击“发布”或“更新”按钮即可使前/后图像和滑块效果生效。
如果您只是想在页面或帖子中添加前后图像，那么 BEA 插件可能是一个不错的选择。但是，如果您使用图像来宣传产品、服务或业务，那么我们建议使用 SeedProd。
SeedProd 是最好的拖放式 WordPress 页面构建器。它带有 180 多个现成的模板，您可以使用它们来创建高转化率的着陆页、销售设计等。
它还有一个现成的“Before After Toggle”块，您可以使用它来创建用户可以与之交互的精美前后图像。
只需从左侧菜单中拖动块，然后将其放到您可能正在处理的任何页面设计上，包括销售页面。
如果您使用 WooCommerce 来销售您的产品，那么 SeedProd 会与 WooCommerce 集成，甚至带有特殊的电子商务模块。如果您计划使用之前和之后的图像来推广您的 WooCommerce 产品，这是完美的。
注意：SeedProd 有一个免费版本，免费的也可以用。不过下面的内容是使用的Premium 版本，因为它带有 Before After Toggle 块。
创建页面后，可以轻松地为您的设计添加前后图像。在 SeedProd 页面编辑器中，只需找到“Before After Toggle”块。
然后，您可以将此块拖放到设计中的任何位置，以将其添加到页面布局中。
完成后，只需单击以选择“Before After Toggle”块。左侧菜单现在将更新以显示可用于创建前后图像的所有设置。
首先，您需要添加要用作前图的图片。在“之前的图像”下，单击“使用您自己的图像”或“使用库存图像”，然后选择您要使用的图片。
默认情况下，SeedProd 在此图像上方显示“之前”标签。但是，您可以通过将其输入“标签前”字段来将其更改为更具描述性的内容。
完成后，滚动到“After Image”部分。
您现在可以按照上述相同的过程添加图像并自定义默认的“After”标签。
SeedProd 可以添加垂直或水平滑动效果。
要在这两种样式之间切换，请滚动到“Slider Orientation”部分，然后单击“垂直”或“水平”。
默认情况下，访问者将通过拖动滑块在前后图像之间移动。但是，一些用户可能会发现将鼠标悬停在图像上更容易移动滑块。
对于访问者需要将滑块拖动更远距离的较大图像尤其如此。
要尝试此设置，请在左侧菜单中启用“Move on Hover”。
接下来，您可能需要为之前和之后的图像添加彩色叠加层。这可以帮助图像与配色方案的其余部分融为一体，或者从背景中脱颖而出。
你可可以将彩色叠加层设为半透明，以创建更微妙的效果。
要尝试不同的颜色，请单击“Overlay Color”部分，然后在出现的弹出窗口中进行更改。
完成后，您可以通过单击展开“比较手柄”部分来自定义滑块手柄。
默认情况下，SeedProd 显示一半“之前”图像和一半“之后”图像。要更改此设置，只需拖动“Handle Initial Offset”滑块即可。
要显示较少的前图像，请向左拖动滑块以使其显示较小的数字。要显示更多之前的图像，请向右拖动滑块以增加数量。
接下来，您可以使用“Handle Color”设置更改滑块的颜色。
您还可以使用“Handle Thickness”滑块使手柄变粗或变薄。
通过这种方式，您可以使手柄突出，或创建更微妙的效果。
当您对手柄感到满意时，您可能想要更改圆圈。您可以使用“Circle Width’”设置使圆变大或变小，并更改“Circle Radius”以创建尖角或弯角。
当您进行更改时，实时预览会自动更新，因此您可以尝试不同的设置以查看最佳效果。
当您对圆圈感到满意时，您可能想要更改该圆圈内三角形的大小。例如，如果您将圆圈变大，那么您可能还想增加三角形的大小。
要进行此更改，请拖动“Triangle Size”滑块，直到您对它的外观感到满意为止。
完成后，您可以继续添加新块并自定义 SeedProd 页面上的内容。
当您对页面的外观感到满意时，只需单击“保存”按钮旁边的箭头，然后选择“发布”。
现在，如果您访问您的网站，您将看到您的页面设计以及实时的前后图像。
Apart from the SeedProd plugin, users can also consider using the Elementor plugin to achieve a similar effect. However, it is worth noting that while adding before and after image comparison effects to a website may look great, it is not necessary for many websites. Therefore, users should only add this feature if they have a need for it.
