Showcase visual comparisons in WordPress
BEAF Pro is a paid edition of the BEAF before-and-after image slider and gallery plugin. It helps you present visual comparisons through sliders, galleries, single-image displays, and video comparisons. The plugin works with Elementor, Gutenberg, Bricks, WP Bakery, other page builders, and block editors.
Use it to present project results, image transformations, creative portfolios, product visuals, or any other comparison where two or more visual states need to be shown together. You can create multiple sliders and galleries, then combine available preview and single-image styles in your displays.
Comparison sliders and gallery layouts
BEAF Pro includes the base plugin features, including horizontal or vertical layouts, titles, descriptions, read-more buttons, image alt tags, label color and background controls, overlay settings, mouse-hover options, and a shortcode generator. It also supports multi-column before-and-after galleries with two, three, or four columns.
The Pro edition adds ten preview styles for presenting comparisons in different visual formats. A filterable gallery can be arranged in two, three, or four columns, with filter colors and padding adjustable from the options panel. Galleries may combine the available preview styles and single-image styles.
Pro display features
- Three-image comparison: create a slider using three images.
- Video comparison: create a before-and-after slider with two different videos.
- Single-image slider: display one image with effects such as grayscale, blur, saturate, or sepia applied to the before or after image.
- Watermarks: create sliders with watermarks on images, using the available customization options.
- Content fields: add titles, descriptions, and read-more buttons to single-image sliders, normal galleries, and filterable galleries.
- Dimensions and placement: set custom width, height, and alignment for each slider.
- Motion controls: enable automatic sliding, add pause on hover, or make the slider respond to user scrolling.
- Interface controls: change read-more text or disable the slider handle.
Planning a practical presentation
Start by choosing whether the content should appear as a comparison slider, a multi-column gallery, a filterable gallery, a single-image display, or a video slider. Select a preview style, add the relevant media, and configure titles, descriptions, labels, or read-more controls when needed.
For portfolio collections, use a filterable gallery to organize multiple comparisons across two, three, or four columns. For a focused transformation, use a single-image slider or a standard before-and-after layout. Custom dimensions and alignment can help fit each display to its page design, while automatic or on-scroll movement adds an alternative viewing mode.
Installation
Install BEAF in WordPress and activate it. Use the plugin options to create a slider or gallery, select its layout and presentation style, add the comparison media, and configure the available display settings. The source provides a written installation guide, a video guide, documentation, and support resources for setup assistance.
BEAF can be used with Elementor, Gutenberg, Bricks, WP Bakery, and other page builders or block editors. A separate plugin is identified in the source for before-and-after sliders specifically for WooCommerce products.
