Multiple Colors In A Row - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Multiple Colors In A Row

R

Robert

SP Page Builder 3 years ago

Hi, how to get multiple background colors in a row in SPPB?

example:

![https://prnt.sc/E4aRLpvegZuS]

0
10 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #71713

Hi there!

If you have multiple columns within your row then you can use the column options to set a background color for each column. Here are screenshots for your ease:

https://prnt.sc/hO2coCkKxIF-

https://prnt.sc/NWCqFO0z1Fly

Hope this helps!

Best Regards

0
R
Robert
Accepted Answer
3 years ago #71722

I understand that but only the width of the column will have another backgroundcolor doing that. Then you want the 2 colors both 50% of full pagewidth you have to set the row to fluid which have also inpact on the content position. The content moves towards the side of the page because you make it fluid. The content must remain within the normal content pagewidth. Not also set to fluid.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #71724

If I may...

One main Row, two Nested Rows inside - the right one get the bg color.

OR

bg image with right color and white/transparent left and centered in the row, old method but still should work.

0
R
Robert
Accepted Answer
3 years ago #71727

I see, I have to play with the padding of the addon. Then it shows fine. Even when the row is set to fluid.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #71736

yes, playing with paddings is on your side.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #71849

Hello,

Well, I thought you wants different colors for each column within a row.

However, there is an easier way to achieve what you want I believe with the help of gradient background of section/row. You need to adjust the color position values, gradient type, and angle.

Here is the screenshot: https://prnt.sc/qeRK0NqL-qpR

Hope this helps!

Best Regards

0
R
Robert
Accepted Answer
3 years ago #71857

Got it already:

https://prnt.sc/n-o-h42xKefJ

Thx!!

Discovering more and more fun things you can so in SPPB!

What would work faster is that only the background goes full width (fluid) and the content stays within page wide. Now you have to spend quite some time on responsive settings. Is there a way to do that? Now had to play with paddings using element inspection for different mobile and tablet views.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #71862

I the world of XX mobile screen sizes webmaster job is not so easy as it was.

BTW Consider using different values for padding not only old school "px" - then should be easier to set for mobile views.

0
R
Robert
Accepted Answer
3 years ago #71865
Agree, so many different devices and sizes..
0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #71872

Hi Robert!

I am glad that you have made it and working with SPPB is fun to you now:)

However, I'm not sure exactly what you are asking afterwords, but you can set padding/margin values for 3 different device sizes currently in your section settings. And you have responsive settings within each column also.

Here are the screenshots:

https://prnt.sc/ZOU6Sbua_4YX

https://prnt.sc/q7c6jIJj5fjT

These settings can help you towards responsivenes of your site I hope!

Best Regards

0