Skip to main content

BEAF Community

#General

How do I use BEAF with Elementor?

I want to use BEAF (Before After Image Comparison) within Elementor. I need to know how to add and display the comparison slider using Elementor without any layout or functionality issues.

  • 2 likes
  • 1 comment

Mainul I. Sunvi

To use BEAF (Before After Image Comparison) with Elementor, you can easily add the slider using a widget or shortcode.

Method 1: Using Elementor Widget (if available)

  • Open your page with Elementor
  • Search for the BEAF / Before After Image widget
  • Drag and drop it into your section
  • Upload your before & after images and adjust settings

Method 2: Using Shortcode

  • Create your comparison slider in BEAF
  • Copy the generated shortcode
  • In Elementor, drag the Shortcode widget
  • Paste the shortcode and publish

Both methods work smoothly, and no layout issues should occur if your images are properly sized.