Before & After Shortcodes

Smooth Version

Just move the mouse over the image or swipe on touch devices.

[before_after width=”719″ height=”404″ before_src=”/wp-content/uploads/2013/06/banda_before_1_v01.png” after_src=”/wp-content/uploads/2013/06/banda_after_1_v01.png”]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[get_the_code label=”false”]

[before_after width=”719″ height=”404″ before_src=”/wp-content/uploads/2013/06/banda_before_1_v01.png” after_src=”/wp-content/uploads/2013/06/banda_after_1_v01.png”]

[/get_the_code]

[/toggle]

[divider]

Flip Version

Click the handler at the bottom.

[before_after width=”719″ height=”404″ before_src=”/wp-content/uploads/2013/06/banda_before_1_v01.png” after_src=”/wp-content/uploads/2013/06/banda_after_1_v01.png” type=”flip”]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[get_the_code label=”false”]

[before_after width=”719″ height=”404″ before_src=”/wp-content/uploads/2013/06/banda_before_1_v01.png” after_src=”/wp-content/uploads/2013/06/banda_after_1_v01.png” type=”flip”]

[/get_the_code]

[/toggle]

[divider]

Hover

Hover over the image to show its alternative version.

[before_after width=”719″ height=”404″ before_src=”/wp-content/uploads/2013/06/banda_before_1_v01.png” after_src=”/wp-content/uploads/2013/06/banda_after_1_v01.png” type=”hover”]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[get_the_code label=”false”]

[before_after width=”719″ height=”404″ before_src=”/wp-content/uploads/2013/06/banda_before_1_v01.png” after_src=”/wp-content/uploads/2013/06/banda_after_1_v01.png” type=”hover”]

[/get_the_code]

[/toggle]

[divider]

[icon name=”lightbulb” size=”medium” style=”solid” shape=”circle”]

Shortcode documentation

[before_after doc=”true”]