Section separators are a very nice feature in most builders. The addition of custom SVGs in 7.6 was great but styling options are limited. One feature that would be nice to have is a drop shadow on the separator to create a sense of depth. After some trial and error, I found a passable solution. It is still trial and error when you change from left to right and top to bottom. As you can see in the custom example, the outcome can lead to some interesting possibilities — although the ability to change the svg fill color would be a nice addition.
The classes for the separators changed naming conventions when the second set was added. The first set use .fusion-name of the divider-candy and everything set off with hyphens, whereas the newer sets uses .fusion-name of the divider-candy-sep with two name versions like waves_brush using an underscore. A couple dividers (triangle, rounded split) do not use SVGs, but basic CSS to render the divider. These are the default classes.
- fusion-slant-candy
- fusion-big-half-circle-candy
- fusion-curved-candy
- fusion-clouds-candy
- fusion-horizon-candy
- fusion-waves-candy
- fusion-waves-opacity-candy
- fusion-hills-candy
- fusion-hills-opacity-candy
- fusion-horizon-candy
- fusion-grunge-candy-sep
- fusion-music-candy-sep
- fusion-paper-candy-sep
- fusion-squares-candy-sep
- fusion-circles-candy-sep
- fusion-paint-candy-sep
- fusion-grass-candy-sep
- fusion-waves_brush-candy-sep
- fusion-splash-candy-sep
- fusion-custom-candy-sep