I’m trying to get a full width, two column row, to have a full-width image on the left column and a separate full-width image on the right column.
Similar to what Isagenix does on their home page (scroll past the video): https://www.isagenix.com/
Is this possible with SiteOrigin: PageBuilder?
Thanks,
Taylor
Hi Taylor.
Yes. You can apply the background image directly to the cells to ensure they completely cover the cell they’re applied too.
To do this please open up a row that you wish to do this for by clicking the wrench icon above the row. Select the left cell and then head over to the styles sidebar on the right and head down to the Cell 1 Styles section. Open the Design settings group and set the Background Image as desired and set the Background Image Display to Cover. Repeat this process for the next cell.
Head back over to the styles sidebar and open the Row Styles Layout settings group. Set the Row Layout to Full Width if you want a content container or Full Width Stretched if you would like for the row (and its contents) to be the full width of the page.
Hi Alex,
Thanks so much for getting back to me on this. Your explanation has been very helpful. I first discovered that the site I’m working on had an outdated version of the plugin (figured this out because the options you mentioned weren’t available).
I’m still having some trouble getting those background images to show up after following your instructions. It seems like it should work. Right now they are simply empty, I figured this was due to having nothing in the cell (no widget present). When adding a widget, the image will only show (a portion) when there is content (or spacing) added to the widget. Even then, the images aren’t going full width.
I’m still messing with it to see if I can find a solution. If you have any other ideas that would be great.
Thanks!
Taylor
Hi Taylor,
Do you have a public URL where we can take a look at your current setup?
Hi Alex,
Sorry for not getting back sooner. Here is a live test URL: https://stimpackenergy.com/8911-2/
The images are there but need an element with a set height in order to show.
Thanks!
Taylor
Hi Taylor,
Ah. Please open the row housing the relevant columns and head over to the row styles sidebar. Open the Layout settings group and set the Cell Vertical Alignment to Stretch and save. How does that look?
If that doesn’t help, try adding a text widget to the column so it’s not empty – it doesn’t matter if there’s text in the text widget.
Ok, that seems to have worked, however, the images aren’t expanding to the outer edges of the page. I believe I got it to work though by setting the ‘Row Layout’ to ‘Full Width Stretched’.
Thanks for your help on this!
Hi Taylor,
That’s odd. Can you please clarify what page you’ve applied the cell background images too so I can inspect the results?
Alex,
You may have been seeing a cached version of the page. It’s the same one as before: https://stimpackenergy.com/8911-2.
By setting the ‘Row Layout’ to ‘Full Width Stretched’ (and ‘Cell Vertical Alignment’ to ‘Stretch’), it seems to have done the trick. The bottom right image isn’t stretching all the way though, so I’m trying to figure out if that’s just due to the image or something else. They also don’t show up on mobile.
Thanks!
Hi Taylor,
Try adding the following CSS to WP AdminAppearanceCustom CSS:
.panel-row-style:before, .panel-row-style:after { content: none; }How does that look?
Hi Alex,
Thanks for all the help on this. Much appreciated
I added the CSS and it solved the issue where the bottom right image wasn’t stretching all the way.
Thanks!