Custom CSS for Tilted Row

Beaver Builder
1

Hi!
I am not sure if my question is appropriate to be asked here or not. As I am a rookie in web development and wordpress itself, I am not being able to find out how to have a tilted/slanted image while using a parallax background in a row and for photographs in columns. I have absolutely no idea what custom CSS to write and where to write it. Expecting your help on it. The footer of this theme exactly represents what I wan: https://demo.gavick.com/wordpress/musicstate/

Thanks for help in advance!

2

Hey Roshni,

We can actually just follow that site’s CSS. But it would totally depend on the layout of the site you’re creating. Can you share the URL of the site you’re working on so we can check?

Ben

3

I am using Beaver Builder Theme itself and the child theme is activated. The website is live on tvl.livewithdreams.com. I could tilt the rows using skewx/skewy properties in custom.css but the background image and contents in columns also tilt.

4

Hey Roshni,

You’ll want to apply that CSS to the before pseudo element so it doesn’t affect the contents inside the row. Try placing a CSS class to the row you want it to apply to, e.g., fl-slanting-row, then try adding the CSS snippet below.

.fl-slanting-row .fl-row-content-wrap:before {
  background: #dddddd;
  content: "";
  height: 400px;
  position: absolute;
  -webkit-transform: skewY(11deg);
  -moz-transform: skewY(11deg);
  -ms-transform: skewY(11deg);
  -o-transform: skewY(11deg);
  transform: skewY(11deg);
  top: -200px;
  width: 100%;
  z-index: 1;
}
.fl-row-content-wrap {
  overflow: hidden;
}

You’ll have to apply a large top padding to the same row. Also, you’ll want to change the background color to match the background color of the row before it so it blends.

Ben