how to make Split Hero Image?

Hi Do0rway,

Here’s a guide on how I would do this. Make a new row with 2 columns (50/50). Set the background image for the row. (Edit Row screen, in the Row Styles sidebar, under the theme grouping and then under the background image url). Then open the layout grouping and set the padding, and gutter to 0.

I would then add a SiteOrigin Editor in the right column of our newly created row. Edit, and go to the widget styles. Open the attributes grouping and make a transparent background by putting the css into the css styles textarea (example: background: rgba(0,0,0,.7);). Then I would create the contents of my column as I would normally. I’ll leave the left column for you to play with.

Have fun. :)

Hi Do0rway

You can fix this with some custom CSS. Please give this article a read, CSS Media Queries & Using Available Space. The when you’re ready navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Write your new media queries; it’ll look a little something like this:

@media (max-width: 780px) {
    .selector {
         padding: 0;       
    }
}

You might also need to install the SiteOrigin CSS Editor.

Hi Do0rway,

Do you have a public URL where we can take a look at the page structure? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

Really liking how this page is looking by the way – good job. :)

Hi Do0rway

You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

@media (max-width: 1050px) {
    #pgc-7-1-0 .panel-widget-style {
        padding: 15% !important;
    }
  }

Please note that this CSS will only work with the left row.

You might also need to install the SiteOrigin CSS Editor.

Hi Do0rway,

It’s been a pleasure. :) If you have any other issues, or questions that I can help you with please feel free to post a new thread.