Expanded Column Background comes late

[hiegl]

I experience a problem with the expanded column background feature in WPBakery. On page-load it comes a little bit late.
Here is my situation:
A row (Full width background) has a gradient background-color (gradient might be irrelevant here) and the row has two columns.
One of the columns has a custom background color and uses the feature “Expanded Column Background”.

Now when the page loads, this column loads it’s own background, but for a fraction of a second it is not expanded. Seems to me, that the expansion comes later. So this glitch let’s the background of the whole row show for a moment, until the expansion comes and covers it.

Is there anything, I can do, to avoid this? Of curse I could create the background as an image, that fakes the two colors, but hey shouldn’t this work without such an image-trick.

Can anyone confirm, that this happens not only for me. Using Firefox/Mac here.

Topic

[Marius1989]

The reason for that is simple. The expanded background is calculated with JS, which obviously is loaded at the very last of the site, right before the body tag closes.
The actual background is set in CSS, which is loaded inside the head, so it will always render first.

It’s not a browser issue, it’s just a technical thing.
So how long is the delay between the initial BG and the expansion? This depends on your hosting, your page optimization, the actual page size, HTML DOM, etc.
The only workaround I have in mind, this feature should only be used for areas which are not visible on pageload (so not within the first 100vh).
You could also consider other solutions, like using page transitions, a page intro, etc.
If you really need this on the starting screen on a particual page, I would recommend you to solve this with custom CSS.

Other opinions and technical point of views are always appreciated.

[hiegl]

I already guessed something like this. In fact the expanded background was just a method to have two differently colored areas.

Simple question would be, how to have a row, that has columns with different background colors. The row should stretch the whole width of the browser window but the content should have a max-width and should not stretch.

If there is another easy way to have this without using the expand feature and witout using a two-colored background-image, that would be great.

[hiegl]

Ah, now I solved it with pure CSS.

.bgtrick {
background: linear-gradient(90deg, #fdcd3b 60%, #ffed4b 60%);
}

Easy, most lightweight und even configurable by the deg.

What do you think, Marius? 🙂

[Marius1989]

Really nice approach. This is exactly what I prepared for you.

View post on imgur.com

For community members who might also be curious about this. You need to add the “bgtrick” class to the Row’s extra class name.

• This reply was modified 4 years ago by Marius1989.

[hiegl]

This first approach has two solid colors, but I guess one can also have gradients in each part?!
Learning a little bit more CSS before the year ends. 🙂

[Marius1989]

I guess there are no limits regarding gradient color steps.
I would recommend you to check some visual gradient CSS generators like: cssgradient.io

View post on imgur.com

.bgtrick {
background: linear-gradient(90deg, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 50%, rgba(255,0,0,1) 50%, rgba(0,39,255,1) 100%);
}

PS: Do not forget to adjust your CSS for all breakpoints, since it will break things as soon as inner columns adjust their set width.

[hiegl]

If this background is set to the row, the columns inside will not break anything, when moving responsively. I just tried.

Ah, your example has column backgrounds. I do not use column backgrounds, just the row background shining through.
But you are right, this method does not guarantee, that column content is always placed nicely relative to the background of it’s parent row’s BG.

Anyway, checking breakpoints is always good advice, as many “responsive” websites forgot about this.

[Marius1989]

Yeah I used the column BG for a better visual understanding but there won’t be any difference in their behaviour on different screen sizes.
Of course, the columns wont break anything, but the custom row BG won’t adjust automatically when columns switch their widths.

View post on imgur.com

Good to see, people are getting more into CSS, since it is really powerful if you want to make some minor adjustments inside your theme.

[Author]

Replies