Title: Image Split – Before/After Image Comparison Slider
Author: Bogdan Bendziukov
Published: <strong>29 Tháng 4, 2026</strong>
Last modified: 21 Tháng 5, 2026

---

Tìm kiếm plugin

![](https://ps.w.org/image-split/assets/banner-772x250.jpg?rev=3518692)

![](https://ps.w.org/image-split/assets/icon.svg?rev=3518692)

# Image Split – Before/After Image Comparison Slider

 Bởi [Bogdan Bendziukov](https://profiles.wordpress.org/barb0ss/)

[Tải về](https://downloads.wordpress.org/plugin/image-split.1.0.2.zip)

 * [Chi tiết](https://vi.wordpress.org/plugins/image-split/#description)
 * [Đánh giá](https://vi.wordpress.org/plugins/image-split/#reviews)
 *  [Cài đặt](https://vi.wordpress.org/plugins/image-split/#installation)
 * [Nhà phát triển](https://vi.wordpress.org/plugins/image-split/#developers)

 [Hỗ trợ](https://wordpress.org/support/plugin/image-split/)

## Mô tả

Image Split is a friendly, lightweight way to show **before and after** photos, 
product comparisons, or makeovers — all with a smooth draggable slider visitors 
can move with a mouse, touch, or keyboard.

Unlike clunky embeds or heavy page builders, Image Split:

🧩 **Fits your workflow** — Drop in a block (in posts or under Appearance  Widgets),
or paste a shortcode.
 🎨 **Looks polished** — Horizontal or vertical layout, ruler
styles (line, bar, circle), and labels you can style to match your brand. ♿ **Stays
accessible** — Keyboard navigation and ARIA support so more people can use your 
comparisons. ⚙️ **Saves time** — Set global defaults under Settings  Image Split
so new comparisons start with your look.

Need product pages or Elementor? **[Premium](http://pluginarium.com/image-split/#premium)**
adds WooCommerce and Elementor, plus deeper per-item customization.

[Image Split official website](http://pluginarium.com/image-split) | [Plugin documentation](http://pluginarium.com/image-split/image-split-documentation)

### ✨ Free features ✨

 * **Gutenberg block** — Pick Before and After images, tune the ruler, and place
   labels without leaving the editor.
 * **Shortcode** — Use `[image_split]` anywhere shortcodes run, with optional attributes
   for layout and styling.
 * **Widget areas** — Add the same Image Split block under Appearance  Widgets (
   block-based widget editor).
 * **Orientation** — Horizontal or vertical comparison.
 * **Ruler styles** — Line, bar, or circle; custom color and width.
 * **Labels** — Before/After text with position, color, background, and font size.
 * **Global defaults** — Settings  Image Split for site-wide starting values.
 * **Responsive & touch-friendly** — Works on phones and tablets.
 * **Lazy-loading friendly** — Plays nicely with common lazy-load setups.
 * **Accessibility** — Keyboard and ARIA support.

### ⚜️ Premium features ⚜️

 * **WooCommerce** — Enable Image Split per product on the single product page, 
   using gallery images or custom attachment IDs.
 * **Elementor widget** — Drop Image Split into Elementor-built layouts.
 * **Full customization** — More options to override defaults per block, shortcode,
   or product.

Unlock product pages, Elementor, and advanced controls — upgrade when you’re ready.

**[Explore the Premium version here.](http://pluginarium.com/image-split/#premium)**

### How does Image Split work?

You choose two images (before and after). Image Split renders them as one comparison
with a movable divider. The free plugin ships the block (for content and widget 
areas), shortcode, and global defaults; Premium adds WooCommerce and Elementor integrations
built for stores and visual builders.

[Full documentation is available here.](http://pluginarium.com/image-split/image-split-documentation)

### Shortcode

    ```
    [image_split before="123" after="456" orientation="horizontal" offset="0.5" ruler_style="line" ruler_color="#ffffff" ruler_width="4" label_before="Before" label_after="After" label_position="bottom-left" label_color="#ffffff" label_bg_color="rgba(0,0,0,0.5)" label_font_size="14"]
    ```

 * **before**, **after** — attachment IDs (required)
 * **orientation** — `horizontal` | `vertical`
 * **offset** — 0 to 1 (default 0.5)
 * **ruler_style** — `line` | `bar` | `circle`
 * **ruler_color**, **ruler_width** — color and width in px
 * **label_before**, **label_after** — text
 * **label_position** — Before label: top-left, top-right, bottom-left, bottom-right,
   center-left, center-right
 * **label_after_position** — After label (same options)
 * **label_color**, **label_bg_color**, **label_font_size**

### WooCommerce (Premium)

On the product edit screen, under **Product data**  gallery / Image Split options:

 * **Enable Image Split** — Show the slider instead of the main product image on
   the product page.
 * **Before/After image ID** — Use `0` to take the first two gallery images automatically.

## Ảnh màn hình

[⌊Front-end before/after comparison with the draggable ruler (horizontal layout).⌉⌊
Front-end before/after comparison with the draggable ruler (horizontal layout).⌉[

Front-end before/after comparison with the draggable ruler (horizontal layout).

[⌊Gutenberg block: selecting Before and After images in the editor.⌉⌊Gutenberg block:
selecting Before and After images in the editor.⌉[

Gutenberg block: selecting Before and After images in the editor.

[⌊Global defaults on Settings → Image Split.⌉⌊Global defaults on Settings → Image
Split.⌉[

Global defaults on Settings  Image Split.

[⌊Shortcode example in a classic block or shortcode-ready area.⌉⌊Shortcode example
in a classic block or shortcode-ready area.⌉[

Shortcode example in a classic block or shortcode-ready area.

[⌊Premium: WooCommerce product options under Product data.⌉⌊Premium: WooCommerce
product options under Product data.⌉[

Premium: WooCommerce product options under Product data.

[⌊Premium: Image Split Elementor widget in the page builder.⌉⌊Premium: Image Split
Elementor widget in the page builder.⌉[

Premium: Image Split Elementor widget in the page builder.

## Khối

Plugin này cung cấp 1 khối.

 *   Image Split

## Cài đặt

 1. Upload the `image-split` folder to `/wp-content/plugins/`, or install through the
    WordPress plugin screen.
 2. Activate the plugin.
 3. Add the **Image Split** block (in posts or under Appearance  Widgets), use the 
    shortcode `[image_split]`, or both. The distributed plugin includes built block
    assets; no Node/npm step is required. **Premium:** enable Image Split on WooCommerce
    products or use the Elementor widget.

## Hỏi đáp

### Where are the global default settings?

Go to **Settings  Image Split** in your WordPress admin. Those defaults apply when
you add a new block, shortcode, or other integration unless you override them.

### What are the required shortcode attributes?

You must set **before** and **after** to two media library attachment IDs (integers).

### Does Image Split work with lazy loading?

Yes. The slider is built to cooperate with common lazy-loading setups.

### Is the comparison accessible?

The free version includes keyboard support and ARIA attributes so visitors can use
the divider without a mouse where possible.

### What does Premium add?

Premium adds **WooCommerce** product integration, an **Elementor** widget, and more
options to customize each comparison. See [Premium](http://pluginarium.com/image-split/#premium).

### Where is the full documentation?

[Image Split documentation](http://pluginarium.com/image-split/image-split-documentation)

## Đánh giá

Không có đánh giá nào cho plugin này.

## Người đóng góp & Lập trình viên

“Image Split – Before/After Image Comparison Slider” là mã nguồn mở. Những người
sau đã đóng góp vào plugin này.

Những người đóng góp

 *   [ Bogdan Bendziukov ](https://profiles.wordpress.org/barb0ss/)

[Dịch “Image Split – Before/After Image Comparison Slider” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/image-split)

### Muốn tham gia phát triển?

[Duyệt code](https://plugins.trac.wordpress.org/browser/image-split/), check out
[SVN repository](https://plugins.svn.wordpress.org/image-split/), hoặc theo dõi 
[nhật ký phát triển](https://plugins.trac.wordpress.org/log/image-split/) qua [RSS](https://plugins.trac.wordpress.org/log/image-split/?limit=100&mode=stop_on_copy&format=rss).

## Nhật ký thay đổi

#### 1.0.2

 * Fix: Remove stray “0” shown above “Before image position” in the Gutenberg block
   Image alignment panel.

#### 1.0.0

 * Initial release: Gutenberg block (posts and widget areas), shortcode, global 
   defaults. Premium: WooCommerce integration, Elementor widget, extended customization.

## Meta

 *  Phiên bản **1.0.2**
 *  Cập nhật lần cuối **2 tháng trước**
 *  Số lượt cài đặt **Ít hơn 10**
 *  Phiên bản WordPress ** 6.0 hoặc cao hơn **
 *  Đã kiểm tra lên đến **7.0.2**
 *  Phiên bản PHP ** 7.4 hoặc cao hơn **
 *  Ngôn ngữ
 * [English (US)](https://wordpress.org/plugins/image-split/)
 * Thẻ
 * [before after](https://vi.wordpress.org/plugins/tags/before-after/)[gutenberg](https://vi.wordpress.org/plugins/tags/gutenberg/)
   [image comparison](https://vi.wordpress.org/plugins/tags/image-comparison/)[shortcode](https://vi.wordpress.org/plugins/tags/shortcode/)
   [slider](https://vi.wordpress.org/plugins/tags/slider/)
 *  [Nâng cao](https://vi.wordpress.org/plugins/image-split/advanced/)

## Đánh giá

Chưa có đánh giá nào được gửi.

[Your review](https://wordpress.org/support/plugin/image-split/reviews/#new-post)

[Xem tất cả đánh giá](https://wordpress.org/support/plugin/image-split/reviews/)

## Những người đóng góp

 *   [ Bogdan Bendziukov ](https://profiles.wordpress.org/barb0ss/)

## Hỗ trợ

Có điều gì muốn nói? cần giúp đỡ?

 [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/image-split/)