Black Friday Super Sale 2024 is Coming Soon

Save the Date
×
Addons for Elementor Documentation

Search for answers or browse our knowledge base.

< All Topics

Before After Slider

Once the WPMozo Addons plugin is activated, it adds several widgets to the Elementor builder. To insert the Before After Slider widget, follow these steps.

  1. Create/edit a page/post that uses Elementor builder.
  2. Create/edit container.
  3. Search widget Before After Slider under WPMozo.

Content

Slider Content

The Before After Slider module offers the following settings for customizing your slider:

  1. Before Image: Upload or select the image to be displayed before the slider.
  2. After Image: Upload or select the image to be displayed after the slider.
  3. Show Label: Enable this setting to display labels on the slider.
  4. Show Label Only on Hover: Active setting to display labels only when hovering over the slider.
  5. Enter Label: Enter custom labels for the before and after images.
  6. Label Background Color: Set the background color for the labels.

These settings allow you to create engaging before and after comparisons with ease.

Style

Slider Styling

In the Slider Styling section, you can customize the appearance of your before and after slider with the following options:

  1. Slider Orientation: Choose between horizontal and vertical orientations for your slider.
  2. Handle Offset: Adjust the position of the slider handle relative to the images.
  3. Move Handle On Hover: Active this setting to enable moving the handle when hovering over the slider.
  4. Move Handle On Click: Setting to enable moving the handle when clicking on the slider.
  5. Handle Color: Select the color for the slider handle.
  6. Overlay On Hover: Set as yes to add an overlay effect when hovering over the slider.
  7. Background Type: Choose the type of background for the slider, such as solid color or gradient.

These settings allow you to customize the style of your before and after slider to suit your design preferences.

Label Text Settings

In the Label Styling section, you can customize the appearance of the labels for your before and after images with the following options:

  1. Label Text Color: Choose the color for the text of the labels.
  2. Label Typography: Customize the font style, size, and other typographic properties of the labels.
  3. Label Text Shadow: Add a shadow effect to the text of the labels for better visibility.

These settings allow you to personalize the look of the labels to complement your before and after images effectively.

Table of Contents