Change background color for homepage widget

Shapely
1

Hi team

I have been using some custom widgets using the “Layout Builder” from “Page Builder”.
One problem I’m facing is that Between two widgets on the homepage, one below the other, there is no differentiation and I would like to create it by changing the background color of one of the widgets.

My website homepage for reference is: www.youngurbanguy.com

In the attached files, you can see the home page. The two modules (one below the other) are:

  • Reasons to ♡ YUG Watches
  • Check Us Out on instagram

It’s difficult to differentiate between them. I would like to give a background color to the “Reasons to :heart: YUG Watches” widget. I can’t do it properly through the Layout Builder Widget settings because it colors the title and body separately.

Anyway I can do it?

2

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*change Instagram color */
div#pl-w59a70897511ba {
    background-color: #0e1015;
}
div#pl-w59a70897511ba h3{
  margin-top:20px;
  margin-bottom:0px;
  color:white
}

Best Regards,
Support

3

Awesome! This worked just fine.
I realised I can change any div’s background using this override method.

Thanks.

4

Hi,

Glad we helped. :slight_smile:

Let us know If you have any other questions.

If you’re happy with our service, don’t forget to rate us: [Shapely] Reviews | WordPress.org

Thanks,
laranz.