V4 Elements Image Compare Estimated reading: 5 minutes 5 views Show two images with a slider on top. Visitors drag the handle, or click, to compare before and after. Great for photo edits, redesigns and results. No code needed. WIDGET Image Compare LOOKS Horizontal or vertical PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons before you start. Note: In the screenshots, the orange boxes and numbers show you where to click or what to check. STEP 1 Enable the Widget The Image Compare is on by default. If it is off, turn it on from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under General Widgets, turn on Image Compare. Click Save Settings. The Image Compare widget in the dashboard (click to zoom) STEP 2 Add the Image Compare Add the widget to your page. It comes with two sample photos. Open your page with the Elementor Editor. Click the + button at the top to open the Elements panel. Under AAE General, find Image Compare. Drag it onto your page. The Image Compare in the Elements panel (click to zoom) Note: A new widget shows the two photos one above the other, with no slider. Apply a preset in the next step to get the slider. STEP 3 Apply a Preset The preset sets up the slider: the divider line, the handle and the Before and After labels. Select the Image Compare. In the General tab, open Presets. Click Apply a preset. Click Horizontal for a left and right slider. Click Vertical for a top and bottom slider. The Apply a preset button (click to zoom) Horizontal and Vertical (click to zoom) Tip: The preset also sets the Direction for you. STEP 4 Use Your Own Images Replace the sample photos with your own. The Before Image and the After Image are two separate parts. Open the Structure panel. Click Before Image. In the General tab, move your mouse over the picture. Click Select image to use your Media Library. Or click Upload, or Insert from URL. Do the same for After Image. Every part of the slider (click to zoom) Select image (1), Upload (2) and Insert from URL (3) (click to zoom) Tip: Use two images with the same size and shape. Then the slider lines up perfectly. STEP 5 Set Direction and Start Position Select the Image Compare. In the General tab, open Image Compare. Choose Direction: Horizontal or Vertical. Type the Initial Position (%). 50 puts the slider in the middle. 0 to 100 are allowed. Turn Enable Click to Move on or off. Click Update to save your page. Direction (1), Initial Position (2) and Enable Click to Move (3) (click to zoom) STEP 6 Change the Labels and Style The words Before and After, the divider line and the handle are all separate parts. Open the Structure panel. Click Before Label or After Label. Change the text in Paragraph. Click Divider or Handle. Use its Style tab to change the color, the size and more. SETTINGS Options Direction Default: HorizontalHorizontal slides left and right. Vertical slides up and down. Initial Position (%) Default: 50Where the slider starts. From 0 to 100. Enable Click to Move Default: OnWhen on, a click on the image moves the slider there. When off, visitors must drag the handle. Presets Horizontal and Vertical. They set up the divider, the handle and the labels. ID Optional CSS ID for the widget. RESULT Final Result Two Image Compare widgets on a live page. The first is Horizontal. The recording shows a drag to the left, a drag to the right, and then a click to jump. Drag the handle, or click on the image, to move the slider The second one uses the Vertical preset with Initial Position set to 30. A Vertical Image Compare that starts at 30% GOOD TO KNOW More Details Presets first Apply a preset right after you add the widget. The preset gives you the slider and the labels. Preset, then your content To be safe, apply a preset before you add your own images and labels. Then check that your content is still there if you apply another preset. Part by part The image, the divider, the handle and the labels each have their own Style tab. HELP Troubleshooting I see two images one above the other Select the Image Compare, open Presets, click Apply a preset and choose Horizontal or Vertical. I do not see the Image Compare in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Image Compare. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. My two images do not line up Use two images with the same size and shape. Then pick Select image again for each one. I want the slider to start on one side Change Initial Position (%). Use a small number like 10 or a big one like 90. I want visitors to drag only Turn off Enable Click to Move. You Did It Your page now has a before and after slider. If you face any problem, please contact our support team. We are happy to help.
