SiteOrigin's Content full stretch background by not using pagebuilder

[palmtree]

Hi There,

I really want to know how to make the full stretch background of SiteOrigin made content such as

https://www.livemeshthemes.com/invent/#pg-13469-3 and https://www.livemeshthemes.com/invent/#pgc-13469-6-0

Those full-width stretched background applied to “NON SiteOrigin” made content… For example I’m talking about single staff or single department editing page where PageBuilder isn’t automatically activated (so it is just normal edit choices of Visual and text only).

The siteorigin output code that says data-stretch-type="full" or data-stretch-type="full-stretched". As you are aware, it doesn’t work even if you type this HTML manually not using pagebuilder because margin right and left value is constantly changing based on the width of the browser.

I’m hopeless here but I really have to achieve full-width background in those pages where pagebuilder isn’t activated.
I appreciate your advise on this.

[palmtree]

I’ve purchased Livemesh SiteOrigin Widgets Pro but now I realized it cannot also be used in those pages where SiteOrigin (page builder) isn’t activated…. Sad..
Is there any way to turn on SiteOrigin Editing option in any page (across the site)? It is is done, then above issue will be resolved..

[Veena]

Pls go to settings > page builder and select the required post types .

[palmtree]

Thank you!… Oh god there was that setting in the plugin..
I tried it and worked well:) So much easier.

[palmtree]

As for the single staff page I was using more tag to control show and hide bits of contents that are output in each box in view all staff page, I had to use more tag. However I’ve found that the SiteOrigin pagebuilder cannot handle more tag. So I’ve been googling to find the solution to make the background stretched to the edge of the browser without using SiteOrigin page builder, although parent div is narrower container (max-width 1140px for invent theme). Below is the solution for those who want to do the same.

.fullwidth {
    width:100%;
    width: calc(100vw - 17px);
    position: relative;
    right: calc((100vw - 17px - 100% )/2);
    background: whatever background color or image;
}

[Author]

Posts