Never before has it been easier to display the differences between two images. The 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.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,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, border and borders size options, 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.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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 Options > Avada Builder Elements > Image Before & After 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 the Avada 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.
Link URL – Add the URL the item will link to, ex: https://example.com. (Only on Fade Effect Type)
Link Target – _self = open in same browser tab, _blank = open in new browser tab. (Only on Fade Effect Type)
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.
Max Width – Set the maximum width the element should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use the full image width.
Border Size – In pixels.
Border Color – Controls the border color. Leave empty for default value.
Border Radius – Controls the image border radius. In pixels (px), ex: 1px, or 「round」. Leave empty for default value.
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 ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
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 5.
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 ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Image Before & After.
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