This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Multi-column, full-width row, different full-width background images for each column

Resolved 10 replies pluginplugin-page-builderquestion
[email protected]
8 years ago · Last reply by [email protected] 8 years ago

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

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Alex S Staff 8 years, 7 months ago

    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.

  2. [email protected] 8 years, 7 months ago

    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

  3. Alex S Staff 8 years, 7 months ago

    Hi Taylor,

    Do you have a public URL where we can take a look at your current setup?

  4. [email protected] 8 years, 7 months ago

    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

  5. Alex S Staff 8 years, 7 months ago

    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.

  6. [email protected] 8 years, 7 months ago

    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!

  7. Alex S Staff 8 years, 7 months ago

    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?

  8. [email protected] 8 years, 7 months ago

    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!

  9. Alex S Staff 8 years, 6 months ago

    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?

  10. [email protected] 8 years, 6 months ago

    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!

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread