Image Before & After Element

26/02/2019

Never before has it been easier to display the differences between two images. The Fusion-Builder Image Before & After Element allows you to beautifully highlight image differences with two transitions. Slide, and Fade. Each transition has its own customization options for even more flexibility. Read below for an overview of the Image Before & After Element.

Image Before & After Example 1Image Before & After Example 2
View more examples!

How To Use The Image Before & After Element

The Image Before & After Element is a new visual element to highlight the before and after state of something using two images.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 - Select the container and column you would like to place the before and after image.

Step 3 - Click on the + Element button at the bottom of the column. Select Image Before & After.

Step 4 - Now you have the options window open. The first step is to choose your Effect type. View the More Examples link at the top of the page to see the various effects. Once you have chosen your effect type, you need to choose your Before and After images and their labels if desired. There are then a number of options to do with the label, and image fade transition speed, plus a whole list of options to control how the handle looks and is placed.

Step 5 - There is also an animation tab if you wish to influence how the element loads on the page.

Step 6 – Once you have configured your options, click Save.

Step 8 - If you preview your page, you will see the result of the Image Before & After Element as you have styled it. You can always return to edit the element.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Image Element section.

General Tab

  • Effect Type - Select which type of effect your before and after image uses. “Slide” provides a handle to move back and forth while “Fade” changes the image on mouse hover.
  • Before Image - Upload a before image to display.
  • Before Image Label - Add text that will be displayed as a label on the before image when hovered. If left empty, no label will show.
  • After Image - Upload an 'after' image to display. The image should be the same size as the 'before' image.
  • After Image Label - Add text that will be displayed as a label on the after image when hovered. If left empty, no label will show.
  • Label Font Size - Controls the font size of the label text. In Pixels. Note: font family is controlled by body font in Theme Options.
  • Label Accent Color - Controls the color of the label background and text. The text takes 100% of this color, background takes a % of it.
  • Label Placement - Choose if labels are on top of the image and centered, on top of the image up & down or outside of the image up & down.
  • Image Fade Transition Speed - Controls the speed of the fade transition on mouse hover. In seconds.
  • Handle Design Style - Controls the design of the handle used to change the before and after image.
  • Handle Color - Controls the color of the before and after image handle line and arrows. ex: #ffffff.
  • Handle Background Color - Controls the background color of the before and after image handle switch. ex: #000000.
  • Handle Offset - Controls where the handle will be positioned on page load, allowing you to control how much of each image displays by default.
  • Handle Orientation - Controls the position of the before and after image handle. You can choose Vertical or Horizontal.
  • Handle Movement Control - Controls how the viewer interacts with the image handler. The image handle can use Drag & Click, Drag Only, or Hover.
  • Element Visibility - Allows you to control the column's visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
  • CSS Class - Allows you to add a class for the column.
  • CSS ID - Allows you to add an ID for the column.
View The Options Screen

Animation Tab

  • Animation Type - Controls the column's animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.
  • Direction of Animation - Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
  • Speed of Animation - Controls the speed of animation on the column. Choose between 0.1 to 1.
  • Offset of Animation - Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Image Before & After Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Effect Type - Select which type of effect your 'before and after' image should use. "Slide" provides a handle to move back and forth while "Fade" changes the image on mouse hover.
  • Label Font Size - Controls the font size of the label text. Note: font family is controlled by body font in theme options. In pixels. 
  • Label Accent Color - Controls the color of the label background and text. The text takes 100% of this color, background takes a % of it.
  • Label Placement - Choose if labels are on top of the image and centered, on top of the image up & down or outside of the image up & down.
  • Handle Design Style - Controls the design of the handle used to change the before and after image.
  • Handle Color - Controls the color of the before and after image handle line and arrows. ex: #ffffff
  • Handle Background Color - Controls the background color of the before and after image handle switch. ex: #000000.
  • Handle Offset - Controls where the handle will be positioned on page load allowing you to control how much of each image displays by default. In percentage.
  • Handle Orientation - Controls the position of the before and after image handle.
  • Handle Movement Control - Controls how the viewer interacts with the image handler. The image handle can use Drag & Click, Drag Only, or Hover.
  • Image Fade Transition Speed - Controls the speed of the fade transition on mouse hover. In seconds.
View The Options Screen

Image Before & After Element Parameters

Copy to Clipboard
  • type - Choose from default, slide, or fade. Sets which type of effect your before and after image uses. "Slide" provides a handle to move back and forth while "Fade" changes the image on mouse hover.
  • before_image – The URL path of your before image. For example, http://www.sample.com/image.jpg.
  • before_label – Insert text that will be displayed as a label on the before image when hovered. If left empty, no label will show.
  • after_image – The URL path of your after image. For example, http://www.sample.com/image.jpg.
  • after_label – Insert text that will be displayed as a label on the after image when hovered. If left empty, no label will show.
  • font_size – Accepts a pixel value. For example, 12px. Sets the font size of the label text.
  • accent_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of the label background and text. Text takes 100% of this color, background takes a % of it.
  • label_placement – Choose from default, image-centered, image-up-down, or out-image-up-down. Sets whether labels are on top of the image and centered, on top of the image up & down, or outside of the image up & down.
  • transition_time – Accepts a numeric value from 0.0to 1.0 in seconds. For example, 0.5. Sets the speed of the fade transition on mouse hover.
  • handle_type – Choose from default, square, rectangle, arrows, diamond, or circle. Sets the design of the handle used to change the before and after image.
  • handle_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of the before and after image handle line and arrows.
  • handle_bg - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color of the before and after image handle switch.
  • offset - Accepts a numeric value from 0 to 100 in percentage. Sets where the handle will be positioned on page load allowing you to control how much of each image displays by default.
  • orientation -  Choose from default, horizontal, or vertical. Sets the position of the before and after image handle.
  • handle_movement - Choose from default, drag_click, drag, or hover. Sets how the viewer interacts with the image handler.
  • hide_on_mobile - Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Can be one of these values: down, right, left, up, or static. Sets the incoming direction for the animation.
  • animation_speed – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • animation_offset – Can be one of these values: default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.