Shape Dividers in Genesis

This article provides the steps to display SVG section dividers taken from Elementor and implementing them in Genesis.

Mountains:

Tilt:

Triangle:

Waves:

We shall create and add custom shortcodes like [section-tilt] in a widget of a widget area to set up the divider at the bottom of that section.

In this example, we are going to register 3 front page widget areas and display them on a static homepage.

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

Step 1

Add this code in child theme's functions.php to register our widget areas:

// Registers front-page widget areas.
for ( $i = 1; $i <= 3; $i++ ) {
    genesis_register_widget_area(
        array(
            'id'          => "front-page-{$i}",
            'name'        => __( "Front Page {$i}", 'my-theme-text-domain' ),
            'description' => __( "This is the front page {$i} section.", 'my-theme-text-domain' ),
        )
    );
}

Step 2

While still in functions.php, add the following code to register our custom shortcodes: