Overlay on Columns

Hey nicolealbaek,

Thank you for the inquiry.

There is no overlay option for the Column element, but you can apply a background in the Styling > Background panel. For the gradient effect, you can use the Color Section element, toggle the Styling > Background Overlay > Enable Overlay? option, then apply the class name “av-custom-gradient-section” in the Advanced > Developer Settings > Custom CSS Class field. Add this code to override the default overlay color with a gradient.

#top #wrap_all .avia-section.av-custom-gradient-section {
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF21 23%, #FFCBA4 93%);
  opacity: 1;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You have to place the name “av-custom-gradient-section” in the Custom CSS Class field and add the css rule above in the Quick CSS field. Please create a test page and provide the link in the private field.

Best regards,
Ismael

Hi,

Glad to know it’s working. Yes, you can use it with the Grid Row element, but you may need to adjust the css a bit.

#top #wrap_all .av-custom-gradient-section {
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF21 23%, #FFCBA4 93%);
  opacity: 1;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

To apply different gradient colors, add another Custom CSS Class name to the element, such as “av-custom-gradient-section av-gradient-black-to-white” or “av-custom-gradient-section av-gradient-red-to-white”, then specify the gradient with this css:

#top #wrap_all .av-gradient-black-to-white {
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 65%);
}

#top #wrap_all .av-gradient-red-to-white {
  background: rgb(255,0,0);
  background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,255,255,1) 65%);
}

You can use this tool to generate the gradient CSS properties: https://cssgradient.io/

To apply a background image with a gradient, you’ll need to use the Color Section element. As instructed above, you need to enable the color overlay.

Best regards,
Ismael