This tutorial is based on How to slant edges of elements in Genesis and provides the steps to set up a down facing chevron-like featured section below the front page in Genesis with a parallax background image changeable in the Customizer (with instant live preview).
We are going to
- register a custom Home Featured widget area
- load clip-path-polygon and paroller jQuery scripts and initialize them on the front page
- display the custom widget area below the header on the front page
- put the code for WordPress Customizer in a separate file and call it from functions.php
While the tutorial has been written for Genesis Sample child theme, it should work with a few adjustments in any Genesis child theme.
By the end of this tutorial, your child theme directory's structure would be like this:
Step 1
Upload clip-path-polygon.min.js and jquery.paroller.min.js to child theme's js directory.
In the same location create a file named say, front-page.js having the following:
Hi Sridhar,
Many thanks for this tutorial, it´s really usefull.
I´ve tried it and works fine in Chrome and Firexfox but slant edges don´t work in Internet Explorer.
clip-path is not supported by IE, unfortunately.
If I come across a workaround or a polyfill, I’ll post an update.
Else, is it possible background image is loaded automatically?
Now background loaded in images folder is visible only when the site’s front page is viewed in the Customizer.
Yes.
Simply set the image as background in the CSS for
.home-featured.See https://i.imgur.com/1xgha3P.png.
Hi Sridhar,
Many thanks for this tutorial, it´s really usefull.
I´ve tried it and works fine in Chrome and Firexfox but slant edges don´t work in Internet Explorer.
Else, is it possible background image is loaded automatically ?
Now background loaded in images folder is visible only when the site’s front page is viewed in the Customizer.