SiteOrigin Hero Image at the top of all pages

Hi Don 🙂

This will probably require a bit of custom development. The only way to use the sidebar below a full-width banner would be to use the page Meta Slider option OR use a child theme and insert a new widget area where the Meta Slider is usually inserted (above the content).

For the blog page you’ll need to deselect your posts from at Settings > Reading and instead create your own posts page by inserting a Post Loop widget on the blog page. See: https://purothemes.com/documentation/general-wordpress/post-loop-widget/.

That might be possible or a shop page but we’d need to build a custom one with widgets. With Events it would need to be custom and to use a sidebar below a full-width Page Builder row it definitely has to be custom.

Let me know if you want to go down this route and I can try to guide you, it’ll probably be on Monday.

Hi Andrew,

Thanks for the info, and the quick respone as always!

Sounds like it will be quite a learning curve for my experience level at the moment, so I think we will wait a while and see how we end up finalising the look of our site before going down that route…
I have one other question more to do with our home page appearance please:
We like the look of the full width home page, but we’ve noticed that it looks to be a little too wide for most computer screens. Mainly noticeable with banner below our header, and the text is all the way to the edges of the screen. You are also able to scroll to the right slightly… is there a way to make the home page a little less wide?

Sure, go to Pages and edit the home page, set the Page Template to Default. Next, use the Page Settings, disable the page title, remove the header bottom margin if that fits with your site. Finally, ensure that you’re using Full Width for the Page Layout.

Full Width just means no sidebar. If your page contents are going full screen width then that probably means you’ve set the Page Builder row layout to Full Width Stretched. So, edit a row in question by clicking the wrench icon far right then click Layout > Row Layout. Make sure you’re using Full Width and not Full Width Stretched for the rows in question.

Does that help?

Hi Andrew,

By “Page Template” do you mean the Page Layout under Page Settings on the right side of the Home Page Edit screen?
I have disabled the page title, and removed the header from the bottom margin. And I have ensured that I am using Full Width, No Sidebar as the Page Layout.

I have 6 SiteOrgin Page Builder Rows, and have made sure that they are all set to Full Width (not Full Width Streched).

Still have the same problem… (could it because I am not sure of the “Page Template”?) The only way I can get the page not to be too wide for screens, is changing the Page Layout to “No Sidebar”, but then our banner under the header doesn’t fill the screen.

If you’re using Page Settings then the Template drop-down above in the Attributes meta box must be set to Default.

Please, send a link so I can take a look at the issue. You can use “Set as private reply”. Thanks.

This reply has been marked as private.

So sorry, some of my reply above is confusing because I assumed the Ultra theme in use and not Polestar. Sorry about that, too many things on the go at once.

In Polestar, the Full Width page layout is designed for Page Builder’s other than Page Builder by SiteOrigin. These plugins need a completely full-width space to handle their full layouts. If you’re using Page Builder by SiteOrigin, rather use the No Sidebar page layout and then stretch rows as required by editing the row clicking Layout > Row Layout.

Take a look now. I’ve changed Page Layout to No Sidebar and set the first row to Full Width Stretched.

No worries Andrew, completely understand…
That is perfect! Thanks, it looks great now!!!

Is there a way to scale down the first row hero image when viewed from a mobile so it can be fully viewed on a mobile?

Thanks for your understanding.

Unfortunately, not. The Hero uses cover for background size. The background image will best fit the container but there won’t be a complete adjustment. If there was, the contents would have to adjust too as the height would change. The Hero’s height will stay the same on mobile. The Hero offers FitText as a setting which will help adjust the text.

Meta Slider free version will offer you complete resizing but it doesn’t having layering, that’s only in the pro version so you’d need to move the text into the image if you wanted to try Meta Slider.

The SiteOrigin Slider widget has full resizing but doesn’t have text layering. You can however add a background image and a second image as an overlay. If you do experiment with other options, do so on a test page so you can roughly mock things up and then test, it’ll save time.

Thanks Andrew.
Once again, I really appreciate your help and expertise!!!!

For sure 🙂