Background Color Spanning Sections

  • 16 September 2015
  • 13 replies
  • 22 views

Hi y’all.  I’m building a landing page that currently has seven sections.  

For five of these seven sections, I can change the section background properties with no problems giving each section a unique background color or image to make that section pop and stand out from other sections.  

Two sections however are somehow linked.  Changing the background color on one changes the background color on the other.  They’re adjacent to each other so the result is that the content blending together making it harder for a user scanning the screen to quickly pick up and take in info.

Any suggestions for how I can unlink the background properties of these two sections so that they can each have their own distinct background?

Thanks in advance,
Tom

   


13 replies

Userlevel 3
Badge +1

Hello Tom!

I was wondering if by any chance you are changing the page background on the properties instead of the section background?

Luis, thanks for the reply!  I think you’re on to something.  

For the sections that are working properly, if I click on these sections the “Properties” tab of the properties pane is highlighted.

But, if I click on the sections that I’m having trouble with, I’m switched to the “Page Properties” tab of the properties pane.

I’ve tried manually switching back to the “Properties” tab so that any changes are isolated to the selected section and do not apply to the whole page.

But for some reason the Properties tab seems to be locked for these sections.  “Properties” is displayed in grey font (other clickable tab names are shown in white font) and nothing happens when I click on this tab.  
Any idea why I’m locked out of the Properties tab for these sections?

Thanks again!

Tom

Userlevel 3
Badge +1

I do…
Maybe you don’t actually have a section there and is editing the spacing gap between one section and other!

Let me know.

Cheers,
Luis Francisco

Luis, it appears they’re all set up as page sections.  See screenshot below.  

All of the items in the “Page Contents” area are represented by the “Page Section” icon indicating that they are indeed unique sections.  

The two sections I’m having trouble with are the “Benefits” and “Testimonials” sections.   They’re each represented by different page section icons but I cannot access the “Properties” tab for either.  You may note the grey properties tab font.

Any ideas?

Thanks again!

Tom

Hi Tom, 
Would you mind posting your page link here or maybe you can email that to me (novita@unbounce.com), that way I can help to investigate further on what causes the problem.

Thanks
Novita

Novita,

Here’s the link: http://unbouncepages.com/nest-196/

Thanks in advance,

Tom

Hi Tom, 
I figured out what’s causing the issue. 

Hi Tom, 
I figured out what’s causing the issue. So you happened to set your Page background colour on the Page Properties tab panel to be  #0b2032  (see screenshot below).

Then if you look at the ‘Testimonials’ page section and under the Background Properties, you’ve set the colour to be #0b2032, BUT with opacity 0%  (see screenshot below). This means that page section has a transparent background and what you see is actually the entire Page background colour, which you’ve set to #0b2032 in the earlier screenshot. 

So to resolve the problem, simply scale up the background opacity to be above 0% and you can try choosing another colour for that page section. Hope that helps and let us know if you have any other questions. We’re happy to help 😃

Hi Tom, 
The reason why you can’t access the properties tab for those 2 page sections, is because the background properties for both of them aren’t stretch to the page edges (see screenshot below).


This means if you clicked the space outside the page guides, it will detect as in you were clicking the background of the entire page, which was why it is reverting to the “Page Properties” tab.

So to resolve this, you can either:

  1.  If you like to retain the background format to not stretch to the page edges, you can just click the page section within the page guides
  2. Or you can checked the background format to stretch the to page edges, and this way clicking anywhere within the page section will bring you to the properties tab of that page section.

I hope it helps. But If you’re still not sure, let us know and I’ll be happy to go through it with you in video calls 🙂
Vivi

Thanks, Novita! Stretching the background to page edges did the trick

Userlevel 3
Badge +1

Awesome Tom! Vivi Rocks 😃

My pleasure, glad it work Tom :) 

Great job, Detective Vivi! 😉

Reply