描述
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 adds WooCommerce and Elementor, plus deeper per-item customization.
Image Split official website | Plugin 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.
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.
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
0to take the first two gallery images automatically.
屏幕截图
Front-end before/after comparison with the draggable ruler (horizontal layout). 
Gutenberg block: selecting Before and After images in the editor. 
Global defaults on Settings Image Split. 
Shortcode example in a classic block or shortcode-ready area. 
Premium: WooCommerce product options under Product data. 
Premium: Image Split Elementor widget in the page builder.
区块
该插件提供了 1 个区块.
- Slider
安装
- Upload the
image-splitfolder to/wp-content/plugins/, or install through the WordPress plugin screen. - Activate the plugin.
- 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.
常见问题
-
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.
-
Premium adds WooCommerce product integration, an Elementor widget, and more options to customize each comparison. See Premium.
-
Where is the full documentation?
评价
此插件暂无评价。
贡献者及开发者
更新日志
1.0.0
- Initial release: Gutenberg block (posts and widget areas), shortcode, global defaults. Premium: WooCommerce integration, Elementor widget, extended customization.