Title: Before + After Images for Divi Author: Bolton Studios LLC Published: 2018 年 7 月 18 日 Last modified: 2024 年 12 月 21 日 --- 搜索插件 ![](https://ps.w.org/before-after-images-for-divi/assets/banner-772x250.jpg?rev= 1910762) **该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起 使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。 ![](https://ps.w.org/before-after-images-for-divi/assets/icon-256x256.png?rev=1910762) # Before + After Images for Divi 作者：[Bolton Studios LLC](https://profiles.wordpress.org/boltonstudios/) [下载](https://downloads.wordpress.org/plugin/before-after-images-for-divi.1.3.5.zip) * [详情](https://cn.wordpress.org/plugins/before-after-images-for-divi/#description) * [评价](https://cn.wordpress.org/plugins/before-after-images-for-divi/#reviews) * [安装](https://cn.wordpress.org/plugins/before-after-images-for-divi/#installation) * [开发进展](https://cn.wordpress.org/plugins/before-after-images-for-divi/#developers) [支持](https://wordpress.org/support/plugin/before-after-images-for-divi/) ## 描述 Create before-and-after image sliders in Divi easily with _Before + After Images for Divi_. * Compatible with the Visual Builder. * Compatible with lazy load plugins (excludes slider images). * Supports cropped image sizes (image size selection). * Mobile responsive. * Lightweight. #### Requirements This plugin is designed to work with the Divi Builder plugin or a theme such as Divi or Extra by [Elegant Themes](https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=48997&tid1=baie)( affiliate link). #### My Plugins for Divi * [Before + After Images for Divi](https://wordpress.org/plugins/before-after-images-for-divi/) * [Image Size Selection for Divi](https://wordpress.org/plugins/image-size-selection-for-divi/) #### Supporting Before + After Images for Divi If you found this free plugin helpful, please support the developer with a small donation: * [Buy me a coffee](http://ko-fi.com/boltonstudios) #### Credit Plugin created by Aaron Bolton. _Before + After Images for Divi_ brings the power of [TwentyTwenty by ZURB](https://zurb.com/playground/twentytwenty) to your Divi Builder installation. ## 屏幕截图 * [[ * Visual Builder module. * [[ * Image size selection. ## 安装 1. Upload _before-after-images-for-divi_ to the /wp-content/plugins/ directory. 2. Activate the plugin through the **Plugins** menu in WordPress. 3. Add a new **Before + After Images* module to any Page or Post that uses the Divi Builder. 4. Add a **Before** image and an **After** image to the module. 5. Select an image size in the module under the **Advanced** tab. 6. Click the green check to save the module. 7. Click the green **Save** button in the lower right-hand corner of the screen to Save changes. ## 评价 ![](https://secure.gravatar.com/avatar/da4e9982e2d1bb9f1d0a53a8a5956e9844445aa853b3b7f597695c4769065140? s=60&d=retro&r=g) ### 󠀁[Wow – Thanks so much](https://wordpress.org/support/topic/wow-thanks-so-much-2/)󠁿 [Cheets_UK](https://profiles.wordpress.org/cheets_uk/) 2025 年 2 月 14 日 Awesome bit of kit! ![](https://secure.gravatar.com/avatar/1d95946f7c8e66265445d0e55209833acbcb6baf0e624c347e9805f41062b01c? s=60&d=retro&r=g) ### 󠀁[Does one thing, and does it well](https://wordpress.org/support/topic/does-not-work-on-mobile-21/)󠁿 [photoMaldives](https://profiles.wordpress.org/photomaldives/) 2024 年 4 月 17 日 UPDATE – I had a very strange issue – for some reason this plugin (and another I tried!) seemed to clash with the normal divi gallery module (paginated). So I moved that gallery module, and this module works perfectly now, on mobile (and desktop). ![](https://secure.gravatar.com/avatar/2014842f74cd699ee32c4d99e92e38a2fa0ccb74fd8fb510550f58c074f5c8fa? s=60&d=retro&r=g) ### 󠀁[The best before and after I have ever used](https://wordpress.org/support/topic/the-best-before-and-after-i-have-ever-used/)󠁿 [kieranolsson](https://profiles.wordpress.org/kieranolsson/) 2020 年 5 月 12 日 1 回复 Works incredible well in Divi! ![](https://secure.gravatar.com/avatar/e84366b406f029a2b25b342f089f1e8f1f4adf516a15633b4bad4bfda3066a9e? s=60&d=retro&r=g) ### 󠀁[Perfect!](https://wordpress.org/support/topic/perfect-7208/)󠁿 [terri2uus](https://profiles.wordpress.org/terri2uus/) 2020 年 5 月 7 日 1 回复 OMG! I didn’t know about this plugin until I searched for before & after in the repository. I needed something to show images of rescue dogs before and after they were rescued and THIS plugin fit the bill perfectly. At first, I couldn’t find how to change the image sizes under Advanced tab, but then I saw a screenshot that it was under Advanced > Attributes. I kept missing it. Thank you so much. ![](https://secure.gravatar.com/avatar/a35057c49ef5657521bb4ad1a57f7f233941626ba8f3038360f806cb7d194d1d? s=60&d=retro&r=g) ### 󠀁[Brilliant](https://wordpress.org/support/topic/brilliant-1139/)󠁿 [rnwhalley](https://profiles.wordpress.org/rnwhalley/) 2019 年 6 月 27 日 1 回复 I had wanted to add a feature like this to my website for ages. As a Divi Theme user, this one ticked all the boxes for me. It now appears as a Divi Module in my Divi page builder so I can add it anywhere you can add a Divi module. It doesn’t affect my page loading speed. It’s very easy to set up and looks great on the page. I’m very impressed and it would be good to see other features added as Divi modules in the future. If you use Divi from Elegant Themes, install this! Great work. ![](https://secure.gravatar.com/avatar/b3b1efdd20bfcc66c2f0b3d40fa053c27f2516a89e6d3ce4be6772a0b48f0abe? s=60&d=retro&r=g) ### 󠀁[Very good](https://wordpress.org/support/topic/very-good-3737/)󠁿 [tinyCoder](https://profiles.wordpress.org/tinycoder/) 2019 年 3 月 1 日 1 回复 The plugin deserves the five stars, great job thank you. We hope to see more options please! [ 阅读所有10条评价 ](https://wordpress.org/support/plugin/before-after-images-for-divi/reviews/) ## 贡献者及开发者 「Before + After Images for Divi」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Bolton Studios LLC ](https://profiles.wordpress.org/boltonstudios/) 「Before + After Images for Divi」插件已被翻译至 1 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/before-after-images-for-divi/contributors) 为本插件所做的贡献。 [帮助将「Before + After Images for Divi」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/before-after-images-for-divi) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/before-after-images-for-divi/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/before-after-images-for-divi/)， 或通过[RSS](https://plugins.trac.wordpress.org/log/before-after-images-for-divi/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/before-after-images-for-divi/)。 ## 更新日志 #### 1.3.5 * Date Updated: 2020-06-08 * Bug Fix: Reverted change in maxWidth reference that affected overlay. #### 1.3.4 * Date Updated: 2020-06-08 * Bug Fix: Changed maxWidth reference in front-end JS function to target the offsetWidth of an object rather than index. #### 1.3.3 * Date Updated: 2020-05-21 * Bug Fix: Slider will display at default size when the user has not selected a size in the module settings. * Bug Fix: Visual Builder module will render full-size images on load rather than waiting for the component to re-render. * Bug Fix: Slider handle will better align with image clipping on the front-end slider. * Bug Fix: Visual Builder slider images will fall back to full-size when the selected image size is not found. #### 1.3.2 * Date Updated: 2020-05-05 * Bug Fix: Fixed typos in text domain that affected internationalization. #### 1.3.1 * Date Updated: 2020-05-04 * Bug Fix: Fixed error that caused overlay to extend beyond images on the front- end. * Bug Fix: Fixed error affecting extra large (scaled) images in the Visual Builder. * Bug Fix: Edit miscellaneous functions in BeforeAfterIMages.jsx to improve the plugin’s Visual Builder module. * Bug Fix: Fixed ‘$size missing index’ error that could appear when WP_DEBUG is true. * New Feature: Added internationalization for more Visual Builder options. #### 1.3.0 * Date Updated: 2020-05-02 * Update: Improved stability, readability and organization of codebase by rewriting many functions. * New Feature: Added attributes to images to support new lazy load exclusions. * New Feature: Replaced placeholder image with default Divi image SVG placeholder. * Tested for compatibility with latest versions of Divi and WordPress. #### 1.2.3 * Date Updated: 2019-03-12 * Bug Fix: Fixed multiple errors shown when WP_DEBUG is set to ‘true’. #### 1.2.2 * Date Updated: 2019-03-10 * Bug Fix: The composite image will now obey the Image Alignment setting in the Divi module. #### 1.2.1 * Date Updated: 2019-03-10 * Bug Fix: Fixed image loading order on front-end and back-end (Visual Builder). * Bug Fix: Hid srcset and size attributes if none are returned to improve W3C validation. #### 1.2.0 * Date Updated: 2019-03-10 * New Feature: Change the default position of the slider. * Acknowledgements: Thank you to @jasonbear on WordPress.org for testing, feature feedback and bug reports. * Bug Fix: Fixed W3C validation error due to a missing numerical value (i.e., “ $size_width” is not parsing). * Bug Fix: Removed http:// prefix on placeholder image URL to prevent non-secure image from breaking SSL in Visual Builder. * Bug Fix: Miscellaneous fixes related to lazy load support. #### 1.1.1 * Date Updated: 2018-12-31 * Feature Update: Added support for lazy loading scripts. Loading Before + After images will now be properly deferred. #### 1.1.0 * Date Updated: 2018-12-31 * New Feature: Change the “Before” and “After” label text * Bug Fix: Improved compatibility with Jetpack, a3 Lazy Load, and Lazy Load by WP Rocket #### 1.0.0 * Date Released: 2018-07-18 * Initial Release ## 额外信息 * 版本 **1.3.5** * 最后更新：**1 年前** * 活跃安装数量 **3,000+** * WordPress 版本 ** 4.6.0 或更高版本 ** * 已测试的最高版本为 **6.6.5** * PHP 版本 ** 7.1 或更高版本 ** * 语言 * [English (UK)](https://en-gb.wordpress.org/plugins/before-after-images-for-divi/) 和 [English (US)](https://wordpress.org/plugins/before-after-images-for-divi/). * [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/before-after-images-for-divi) * 标签 * [after](https://cn.wordpress.org/plugins/tags/after/)[before](https://cn.wordpress.org/plugins/tags/before/) [comparison](https://cn.wordpress.org/plugins/tags/comparison/)[divi](https://cn.wordpress.org/plugins/tags/divi/) [slider](https://cn.wordpress.org/plugins/tags/slider/) * [高级视图](https://cn.wordpress.org/plugins/before-after-images-for-divi/advanced/) ## 评级 5 星（最高 5 星）。 * [ 10 条 5 星评价 ](https://wordpress.org/support/plugin/before-after-images-for-divi/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/before-after-images-for-divi/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/before-after-images-for-divi/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/before-after-images-for-divi/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/before-after-images-for-divi/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/before-after-images-for-divi/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/before-after-images-for-divi/reviews/) ## 贡献者 * [ Bolton Studios LLC ](https://profiles.wordpress.org/boltonstudios/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/before-after-images-for-divi/) ## 捐助 您愿意支持这个插件的发展吗? [ 捐助此插件 ](http://ko-fi.com/boltonstudios)