Custom Separator Styles

How can we add custom divider styles like the ones found here https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/.

Hello there,

That goes beyond the features of Sydney Pro can offer. You would probably need to add SVG code to a text widget as it’s the easiest one:

    <svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    	<path d="M0 0 L50 100 L100 0 Z" />
    </svg>

Or add this CSS code to Additional CSS under Appearance > Customize menu.

    .ss-style-inczigzag::before,
    .ss-style-inczigzag::after {
    	left: 0;
    	width: 100%;
    	height: 50px;
    	background-size: 100px 100%;
    }

    .ss-style-inczigzag::before {
    	top: 0;
    	background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%);
    }

    .ss-style-inczigzag::after {
    	bottom: 0;
    	background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%);
    } 

Adjust .ss-style-inczigzag selector to match with your row. Use web browser’s inspector tool to view source certain element in your site. If you have adequate knowledge of HTML and CSS coding, I believe it’s very easy to accomplish.

Regards,
Kharis

In addition, you might be interested to use Pert Pro which has built in row separator.

Regards,
Kharis