I have a question which has been asked before, but the las thread i found is from 2 years ago, so i thought, maybe there is an easy fix in the meantime? You never know right. :-)
I would like a full width hero block right after the header and use a sidebar widget. When i build that now, the sidebar widget disappears behind the hero block. Here is a thread with the same question. –> https://siteorigin.com/thread/full-width-content-before-sidebar/
If there is no ‘simple’ solution yet, i would like to know if it is possible to position the sidebar widget on the bottom of the page?
Hi Alexander
Thanks for reaching out.
Unfortunately, full-width stretched rows aren’t compatible with theme sidebars. It might be possible to move the sidebar below the primary content container using Custom CSS. We work with limited resources. On the forum, we’re here to help with any standard usage questions you may have. If you have a SiteOrigin Premium license, please, send an email to [email protected] where we can assist with small Custom CSS changes like moving the sidebar for a given layout.
What you could try is set the Page Template to Default then scroll down in the right column and set the Page Layout to No Sidebar. You could then manually create a sidebar in Page Builder and insert the desired widget into the Page Builder layout.
Hi Alexander
If you’d like to try my idea you can quickly create a test page as follows:
1. Go to PagesAdd New. Create a page called Test or any name.
2. Set the Page Template to Default and the Page Layout to No Sidebar.
3. In Page Builder click LayoutsClone: Pages, clone the page you’re working on.
4. Edit the row below your full-width row, make sure that row is made up of two columns. In the right column, insert the widgets that would otherwise be inserted into your sidebar.
See if that works. You can also do this on the actual page, a test page to check the layout is just an idea.
For anyone with a same question stumbling on this thread. Here is what worked for me.
Step 1: Drop the sidebar 52vh (my hero was 50vh) on all pages for non mobile.
@media (min-width: 681px) { .page-template-default #secondary { margin-top: 52vh; } }This also dropped the sidebar on pages without a hero banner.
Step 2: Installed Custom Body Class plugin to set an extra css class on pages where the Hero banner is active. In my case the class is named .sidebar-hero. And changed the css to:
@media (min-width: 681px) { .page-template-default.sidebar-hero #secondary { margin-top: 51vh; } }Hope this helps someone.
Thanks again for your great support Andrew!
Super, thanks for updating this thread, it’s most appreciated!
As questions arise in the future, please, let us know.
Cheers for now :)