[Support request] Diagonal block of colour for background

[Martin]

Hi
Is it possible to create diagonal blocks of colour like the black and yellow they have used here?
https://www.blackwebs.co.uk/local-website-design/web-design-sevenoaks/
Many Thanks
Martin

[David]

Hi there,

are you using a pagebuilder or something else to create your rows?

[Martin]

Hi David

Happy new year to you!
Thanks for looking at this for me, I have been using ‘SiteOrigin Page Builder’, but happy to move to another option.

Many thanks
Martin

[David]

That Divi built page is using background images for each of the sections. Which is not a nice way to do it. Simplest way i reckon, add this CSS:

.bottom-divider {
    background: linear-gradient(175deg, rgba(255,255,255,0) 80%, rgba(244,225,4,1) 80%);
}
.top-divider {
    background: linear-gradient(355deg, rgba(255,255,255,0) 80%, rgba(244,225,4,1) 80%);    
}

Now you have three sections:
Section 1 has the bottom-divider class
Section 2 has a solid color background to match divider colors
Section 3 has the top-divider class

[Martin]

Hi David
Thanks for the advice, but can you give me some more details about how I use this please?
Many thanks
Martin

[David]

So add the CSS to your Additional CSS in Customizer.
I think if you edit a Row in siteorigin there is an attributes tab and their should be a Row Class field. Add one of the CSS Classes from above to that.

[Author]

Posts