Title: Twenty20 Image Before-After Author: Zayed Baloch Published: 2016년 4월 28일 Last modified: 2025년 3월 2일 --- 플러그인 검색 ![](https://ps.w.org/twenty20/assets/banner-772x250.png?rev=3241520) 이 플러그인은 **최근 3개의 주요 워드프레스 출시와 시험 되지 않았습니다**. 워드프레스의 좀 더 최근 버전으로 이용할 때 더 이상 관리되지 않고 지원되지 않고 호환성 문제가 있을 수 있습니다. ![](https://ps.w.org/twenty20/assets/icon-256x256.png?rev=3241520) # Twenty20 Image Before-After 작성자: [Zayed Baloch](https://profiles.wordpress.org/zayedbaloch/) [다운로드](https://downloads.wordpress.org/plugin/twenty20.2.0.4.zip) * [세부사항](https://ko.wordpress.org/plugins/twenty20/#description) * [평가](https://ko.wordpress.org/plugins/twenty20/#reviews) * [설치](https://ko.wordpress.org/plugins/twenty20/#installation) * [개발](https://ko.wordpress.org/plugins/twenty20/#developers) [지원](https://wordpress.org/support/plugin/twenty20/) ## 설명 Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for: * Photography portfolios * Real estate before/after * Renovation projects * Design makeovers * Product comparisons * Restoration work * Medical procedures * And much more! #### Video Tutorial #### Live Demo Check the [Live Demo](https://zayedbaloch.com/twenty20-image-before-after-wordpress-plugin/). #### Key Features * Responsive design – works perfectly on all devices * Horizontal and vertical sliding options * Customizable slider position and orientation * Custom “before” and “after” labels * Adjustable image widths and alignments * Mouse hover sliding effect * Touch-enabled for mobile devices * Multiple sliders per page * Widget support for sidebars * SEO-friendly with proper alt tag support * Accessibility compliant image comparisons #### Page Builder Support * Elementor * WPBakery Page Builder (Visual Composer) * Flatsome UX Builder * Classic Editor #### Perfect For * Photography before/after edits * Home renovation comparisons * Web design makeovers * Product transformations * Restoration projects * Beauty transformations * Real estate renovations ### Usage #### Shortcode Example **Quick Example** ``` [twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"] ``` **Shortcode Parameters** * `img1` – image ID. * `img2` – image ID. * `offset` – range from 0.1 to 1.0. * `direction` – `horizontal|vertical`. * `align` – `none|right|left`. * `width` – supports both `px` and `%`. * `before` – text for the “before” label. * `after` – text for the “after” label. * `hover` – `true` or `false`. ## 스크린샷 [⌊Add a Twenty20 before-after image.⌉⌊Add a Twenty20 before-after image.⌉[ Add a Twenty20 before-after image. [⌊Select any two images from the Media Library.⌉⌊Select any two images from the Media Library.⌉[ Select any two images from the Media Library. [⌊Twenty20 shortcode settings page.⌉⌊Twenty20 shortcode settings page.⌉[ Twenty20 shortcode settings page. [⌊Shortcode.⌉⌊Shortcode.⌉[ Shortcode. [⌊Twenty20 in action.⌉⌊Twenty20 in action.⌉[ Twenty20 in action. [⌊Multiple sliders in different directions.⌉⌊Multiple sliders in different directions .⌉[ Multiple sliders in different directions. [⌊Twenty20 widget.⌉⌊Twenty20 widget.⌉[ Twenty20 widget. [⌊Widget in action.⌉⌊Widget in action.⌉[ Widget in action. [⌊WP Bakery Visual Composer settings.⌉⌊WP Bakery Visual Composer settings.⌉[ WP Bakery Visual Composer settings. [⌊Elementor element.⌉⌊Elementor element.⌉[ Elementor element. [⌊UX Builder element.⌉⌊UX Builder element.⌉[ UX Builder element. ## 설치 1. Upload the `twenty20` folder to your `/wp-content/plugins/` directory 2. Activate the plugin through the ‘Plugins’ menu in WordPress 3. Use the shortcode `[twenty20]` in your posts/pages or use the widget #### Quick Start Guide 1. Click the “Add Twenty20” button in your editor 2. Select your before and after images 3. Customize settings as needed 4. Insert and publish ## FAQ ### How it works? Twenty20 works by stacking two images on top of each other. As the slider moves across the image. ### Quick Example [twenty20 img1=”” img2=”” direction=”vertical” offset=”0.5″ align=”right” width=” 60%” before=”Before” after=”After” hover=”true”] ### Shortcode Parameters * `img1` – image ID. * `img2` – image ID. * `offset` – range from 0.1 to 1.0. * `direction` – `horizontal|vertical`. * `align` – `none|right|left`. * `width` – supports both px and %. * `before` – text for the “before” label. * `after` – text for the “after” label. * `hover` – `true` or `false`. ### How to add before-after slider? Check the demo [Video](https://www.youtube.com/watch?v=1cQ9rhL-t70) demo. ### How do I add a widget? Watch the [video demo](https://www.youtube.com/watch?v=1cQ9rhL-t70) on YouTube. ### Can I use more than one slider in a single post or page? Yes, the Twenty20 plugin allows users to add unlimited before-after sliders. ## 후기 ![](https://secure.gravatar.com/avatar/f3d659e966383b6cb4a6f0bdd74ee3baaa1092be9e2a0a7c4c75781fe01ac210? s=60&d=retro&r=g) ### 󠀁[Great plugin, fast support](https://wordpress.org/support/topic/great-plugin-fast-support-54/)󠁿 [bing4](https://profiles.wordpress.org/bing4/) 2024년 8월 12일 Great plugin, fast support, simple, easy to use. ![](https://secure.gravatar.com/avatar/9ce6ff06228d96fe00b9c08997c548b95c07ec684b8683d1f965ed6717569f35? s=60&d=retro&r=g) ### 󠀁[No Longer Working](https://wordpress.org/support/topic/no-longer-working-159/)󠁿 [](https://profiles.wordpress.org/vegasdood/) 2023년 9월 24일 Type for an update or get pulled. ![](https://secure.gravatar.com/avatar/35cbcb591e6ef4013bbd838ea1cb93cbfb26afd446df2946f7a1824692aa88c5? s=60&d=retro&r=g) ### 󠀁[ブロックエディター未対応](https://wordpress.org/support/topic/%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf%e3%83%bc%e6%9c%aa%e5%af%be%e5%bf%9c/)󠁿 [tsutlnps149](https://profiles.wordpress.org/tsutlnps149/) 2023년 3월 24일 恐らく、このプラグインはブロックエディターに対応していないので、Gutenbergでは画像 が挿入できないです。 あと、lazyload.jsや”loading=lazy”を使用すると、表示されなく なったり画像下に空白ができてしまったりするバグがあるため、画像表示が崩れます。 ![](https://secure.gravatar.com/avatar/69b138e5efa7d3db2c346235fc5a3bb933b9443a3e44ba74a01975c09b508920? s=60&d=retro&r=g) ### 󠀁[Suberb plugin!](https://wordpress.org/support/topic/suberb-plugin/)󠁿 [boraboraphotovideo](https://profiles.wordpress.org/boraboraphotovideo/) 2022년 3월 21일 Wonderful functionality for a photographer or photo re-toucher / editor. Easy to install and implement, may be caused by another plugin conflict it recently had stopped working. The support was very prompt, the developer was able to solve the issue right away! ![](https://secure.gravatar.com/avatar/b1ff3baf8b42e63403dba61fbcb17161837887361b6ee153500c862205bcd355? s=60&d=retro&r=g) ### 󠀁[Good job](https://wordpress.org/support/topic/not-working-on-5-8/)󠁿 [ucan74](https://profiles.wordpress.org/ucan74/) 2021년 9월 7일 답글 3개 Works fine under WPv5.8 and Enfoldv4.8.6 (little bit tricky with the internal builder but it’s ok) ![](https://secure.gravatar.com/avatar/3486f6d22d391b1693fa2ec67509657f9b7237f7a358de5ef736659d99ba02ee? s=60&d=retro&r=g) ### 󠀁[Excellent plugin!](https://wordpress.org/support/topic/excellent-plugin-7128/)󠁿 [Serge](https://profiles.wordpress.org/serge-wp/) 2021년 6월 3일 This plugin does exactly what it says on the tin and works straight out-of-the-box. Excellent stuff! Oh, and it also works perfectly on WP 5.7.2 – at least with my current selection of themes. [ 모든 55 평가 읽기 ](https://wordpress.org/support/plugin/twenty20/reviews/) ## 기여자 & 개발자 “Twenty20 Image Before-After”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다. 기여자 * [ Zayed Baloch ](https://profiles.wordpress.org/zayedbaloch/) * [ Hammal Albulushi ](https://profiles.wordpress.org/hammal/) [자국어로 “Twenty20 Image Before-After”(을)를 번역하세요.](https://translate.wordpress.org/projects/wp-plugins/twenty20) ### 개발에 관심이 있으십니까? [코드 탐색하기](https://plugins.trac.wordpress.org/browser/twenty20/)는, [SVN 저장소](https://plugins.svn.wordpress.org/twenty20/) 를 확인하시거나, [개발 기록](https://plugins.trac.wordpress.org/log/twenty20/)을 [RSS](https://plugins.trac.wordpress.org/log/twenty20/?limit=100&mode=stop_on_copy&format=rss) 로 구독하세요. ## 변경이력 #### 2.0.4 * Minor fixes #### 2.0.3 * Minor fixes #### 2.0.2 * Fixed: Missing alt attributes in image comparison #### 2.0.1 * Improved: Accessibility compliance * Improved: SEO optimization for image comparisons #### 2.0.0 * Complete codebase modernization * New: Enhanced image loading system * New: Improved mobile touch response * New: Better compatibility with page builders * New: Modernized admin interface * Fixed: Widget image selection issues * Fixed: Image replacement bug in widgets * Fixed: Admin CSS loading in editor * Fixed: Multiple slider initialization issues * Improved: Script loading reliability * Improved: Overall performance optimization #### 1.7.6 * Fixed Elementor Widget * Improved mobile responsiveness * Performance optimizations #### 1.7.5 * Fixed Elementor Widget #### 1.7.4 * Fixed Elementor Widget #### 1.7.3 * Bug fixes #### 1.7.2 * Improve script #### 1.7.1 * Bug fixes #### 1.7.0 * Bug fixes #### 1.6.1 * Bug fixes. #### 1.6.0 * Security fixes, and passed in WordPress review. #### 1.5.9 * Security fixes #### 1.5.8 * Fix: Minor jQuery fix #### 1.5.7 * Fix: WP 5.6 Uncaught TypeError (Thanks to @negru13) #### 1.5.6 * Fix: Jetpack’s lazy load images issue #### 1.5.5 * Fix: Widget mouse over. #### 1.5.4 * Added: Integrated with WP Image alt. #### 1.5.3 * Fixed cation overlay issue. #### 1.5.2 * Fixed Before and After shortcode insert issue #### 1.5.1 * Fixed loading issue #### 1.5 * NEW: Add Elementor Page builder support. * NEW: Add UX Builder by UXThemes support. * Minor CSS fixes #### 1.4 * NEW: ‘Move slider on mouse over’. #### 1.3 * NEW: Image Before and After caption. * Fixed arrow shadow css. * Widget updated. #### 1.2 * Fixed alignment bug #### 1.1 * Fixed width issue #### 1.0 * First Release ## 기초 * 버전 **2.0.4** * 최근 업데이트: **1년 전** * 활성화된 설치 **20,000+** * 워드프레스 버전 ** 5.9 또는 그 이상 ** * 다음까지 시험됨: **6.7.7** * PHP 버전 ** 5.6 또는 그 이상 ** * 언어 * [English (US)](https://wordpress.org/plugins/twenty20/) * 태그: * [before after slider](https://ko.wordpress.org/plugins/tags/before-after-slider/) [elementor](https://ko.wordpress.org/plugins/tags/elementor/)[image comparison](https://ko.wordpress.org/plugins/tags/image-comparison/) [image slider](https://ko.wordpress.org/plugins/tags/image-slider/)[visual composer](https://ko.wordpress.org/plugins/tags/visual-composer/) * [고급 보기](https://ko.wordpress.org/plugins/twenty20/advanced/) ## 평점 별 5점 만점에 4점. * [ 35/5-별점 후기 ](https://wordpress.org/support/plugin/twenty20/reviews/?filter=5) * [ 6/4-별점 후기 ](https://wordpress.org/support/plugin/twenty20/reviews/?filter=4) * [ 1/3-별점 후기 ](https://wordpress.org/support/plugin/twenty20/reviews/?filter=3) * [ 4/2-별점 후기 ](https://wordpress.org/support/plugin/twenty20/reviews/?filter=2) * [ 9/1-별점 후기 ](https://wordpress.org/support/plugin/twenty20/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/twenty20/reviews/#new-post) [모든 리뷰 보기](https://wordpress.org/support/plugin/twenty20/reviews/) ## 기여자 * [ Zayed Baloch ](https://profiles.wordpress.org/zayedbaloch/) * [ Hammal Albulushi ](https://profiles.wordpress.org/hammal/) ## 지원 할 말 있으신가요? 도움이 필요하신가요? [지원 포럼 보기](https://wordpress.org/support/plugin/twenty20/) ## 기부 이 플러그인이 발전하도록 도우시겠습니까? [ 이 플러그인에 기부하기 ](https://www.paypal.me/zayedbaloch)