FAIR

Federated and Independent Repositories

Befora – Before After Gallery for Elementor

Plugin Banner

Befora – Before After Gallery for Elementor

by atiq29

Download
Description

Befora – Before After Gallery for Elementor adds a dedicated Elementor widget for interactive before and after image comparison galleries.

Create service or project categories and add multiple Before/After image pairs. Projects sharing the same category are grouped under one filter button automatically.

Features

  • Filterable before after gallery for Elementor
  • Unlimited project categories and comparison items
  • Fixed Before and After images with draggable reveal
  • Responsive columns, image height, row gap and column gap
  • Responsive widget, gallery, tabs, button padding and margins
  • Normal, Hover and Active filter button colors
  • Filter button typography, borders, radius and hover effects
  • Divider line color and width controls
  • Handle size, border, radius, Normal and Hover colors
  • Before and After label controls and styling
  • Image fit, position, border, radius and box shadow
  • Touch, mouse, pointer and keyboard support
  • Optional All tab and Before/After labels
  • Lazy-loaded images
  • Translation ready
  • Multiple widgets supported on the same page

Support & Custom Development

Author: Atiqur Rehman

Email: atiqurrehman29@gmail.com

Upwork: https://www.upwork.com/freelancers/~013144137e81b3f6b3

For custom Elementor widgets, WordPress development, or plugin customization, use the Upwork profile above. Plugin support is available through the WordPress.org support forum after publication.

  1. Install and activate Elementor.
  2. Upload this plugin ZIP from Plugins > Add New > Upload Plugin.
  3. Activate the plugin.
  4. Edit a page with Elementor.
  5. Search for “Before After Gallery”.
  6. Add projects, categories, Before images and After images.
  7. Customize the widget from the Content and Style tabs.
  1. Filterable Before/After gallery with category buttons and draggable comparison handles.

    Filterable Before/After gallery with category buttons and draggable comparison handles.

  2. Responsive filter navigation using a dropdown on smaller devices.

    Responsive filter navigation using a dropdown on smaller devices.

  3. Elementor content controls for adding categories and Before/After image pairs.

    Elementor content controls for adding categories and Before/After image pairs.

  4. Elementor styling controls for filter buttons, labels, divider, handle, spacing, and responsive layout.

    Elementor styling controls for filter buttons, labels, divider, handle, spacing, and responsive layout.

  5. Device-specific filter navigation controls with Buttons, Dropdown, or Both.

    Device-specific filter navigation controls with Buttons, Dropdown, or Both.

Does it require Elementor Pro?

No. Elementor Pro is not required.

Can one category contain multiple comparisons?

Yes. Give multiple projects the same category name.

Do the images zoom while dragging?

No. Both images remain fixed. Only the clipped reveal area changes.

Is it responsive?

Yes. Columns, heights, gaps, margins, padding and several visual controls have desktop, tablet and mobile settings.

Can I use buttons on desktop and a dropdown on mobile?

Yes. Desktop, tablet, and mobile each have an independent filter navigation setting. Choose Buttons, Dropdown, or Both for each device.

1.0.0

  • Initial public release.
  • Added filterable Before/After gallery widget for Elementor.
  • Added responsive Buttons, Dropdown, or Both filter navigation per device.
  • Added responsive layout, spacing, image, filter, label, divider, and handle controls.
  • Added mouse, touch, pointer, and keyboard interaction support.
  • Added responsive dropdown overflow handling for tablet and mobile.
Back to top