Opaque background on callout

Beaver Builder
1

I’ve been trying to make my text on the image sections of this homepage stand out. http://naturesplan.wirebirdmedia.com/

I’ve tried adding an opaque overlay to the background row but that seemed to overlay the entire row instead of just the background.

Now I’m looking at trying to create a semi-transparent background behind the text on the call outs. Is there a way to make this happen?

Alternatively if I could figure out how to have a full size image on one side (fit entire 1/2 column and full height of row) and the callout on the other, that would be ok too…

Thanks!

2

Hi Sara,

To add a semi-transparent background to the call out text go to the Advanced tab and the CSS Selector area and enter a name in the ID box, e.g. callback1

This will affect just this particular callout. You will have to add this to any other callouts you want to style this way.

Then go to Dynamik > Custom > CSS and add this CSS and Save Changes:

.fl-builder #callback1 {
	background: white;
	opacity: 0.8;
}

This will give you a semi-transparent white background. Adjust the color and opacity values as required (the higher the number, the less transparent the background will be).

If you want to have a different color and opacity value for another callout, give it a unique ID (e.g. callback2) and then duplicate the above code and adjust the ID, color and opacity as needed.

To split up the row into 2 columns, just add a 2 column row with a photo module in one column and the callout in the other.

Cheers!
Lyle

3

Thanks for jumping in, Lyle! Greatly appreciated. Sara, Lyle’s suggestion should work. You may also try putting in the background color to the column instead of the row. If you’ve any further questions, please don’t hesitate to ask! :slight_smile:

Ben

4

Actually Lyle and Ben, the opacity is applying to the entire callout, not just the background. I want the text to be crisp but the background to be transparent.

I tried adding the ID to the column itself as Ben suggested but it had the same effect.

Is there a way to isolate the background from the text?

Thanks!
Sara

5

Hello Sara,

Actually, tried this instead.

.fl-builder #callback1 {
	background: rgba(255, 255, 255, 0.8);
}

You can change the RGB values to change the color then the last value for the opacity of the background.

Ben

6

Thanks Ben, I think that will work!

7

No problem, Sara! Marking this as resolved now. Have fun with The Beaver! :slight_smile:

Ben