Background shapes

Hi there

are you trying to add this to the GP Page Header and / or to a GP Section?

I would like to add it to the page hero, the sections and the footer as well but i guess if i get it working right on one place i can workout how to get it right on the other places.

I have added url to first post to show you what i have now, image looks rugged at edges and not the perfect shape as in example site. On the page hero i would love it if i can make it like they did on their site. Thanks in advance.

Hi there,

looks like you're almost there. So i would suggest an SVG instead of the PNG to keep it sharp but also this:

.page-hero {
    position: relative;
    padding-bottom: calc( 10vw + 100px );
}

And then on your .page-hero:after rule you can add bottom: 0;

This will keep the shape locked to the bottom of the page-hero and keep the container padding responsive.

Thanks a lot David, it looks great now. I might come back with more questions later but for now this is resolved. Thanks for you and the team's top notch customer service.

Great to hear that !
Something to think about, instead of targeting .page-hero directly use the Custom CSS class field, as you have that option in sections as well you could create a set of different shape dividers and just add the class where you need them :)

That's even better and makes it easier for me, thanks for the tip David.

Awesome - glad to help :)