Archived topic
Diagonal block of colour for background
5 replies · Started by Martin on January 4, 2019
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
Hi there,
are you using a pagebuilder or something else to create your rows?
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
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
Hi David
Thanks for the advice, but can you give me some more details about how I use this please?
Many thanks
Martin
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.