Hello,
first of all the Page Builder is awesome!
I am developing a custom theme with specific settings for the page-builder so I added a option to rows to set the “strech-mode” to boxed:
if (!empty($style['ep_layout_boxed'])) {
$attributes['class'][] = 'ep-boxed-section';
$attributes['data-stretch-type'] = "ep_layout_boxed";
}
But I think im on the wrong way…
What I actually want:
A Container that is full width -> Do when I set a background-color with the page-builder the background-color should be on the outter-container that is 100%. When i checked my “ep-boxed-section” checkbox i want to add a div element “.container” (bootstrap) after the
“.panel-row-style-for-22-0” but before all the cells.
So that the background-color is over the full 100% but the content (cells) are boxed. How is this possible? Or do you have any other solution?
Hi Mathis,
We would recommend using the row layout system instead of creating a custom solution, but if that’s not an option, the initial solution would be what I would recommend. It’s not complicated and easily bypassed if the user decides to either completely override the container or resize it.
Regardless, you could use siteorigin_panels_row_style_attributes.
Hello Alex,
yes I prefer to solve this with the build-in layout system. But I want it to make it as user friedly as possible and when I solve this with the build in layout system the user has everytime to select “streched layout” and type in the ammount of padding and in my opinion this is not very user friendly.. or am I missing something?
The other thing is that when i choose “stretched” in the row layout the padding is ignored..
Hi Mathis,
Oh. In that case, you should just change the default value by altering the row layout form and changing the default – it won’t alter preexisting layouts though. The filter mentioned in my last reply will allow you to do that.
If you don’t want the user to be able to override the row layout at all, you could also just forcefully apply the class like you’re doing in your initial reply – although I wouldn’t recommend changing the data-stretch-type value.
Full Width Stretched will ignore all page padding and containers – it’ll be the entire page no matter what. Full Width is the full width of the page with a content container. In other words, it’ll allow full width backgrounds but still allow for your text to have a consistent alignment with the rest of the content on your page.
Hello Alex,
sorry but I don’t really get it. I tryed alot with examples but it’s everytime a little bit different. I made a doodle so I hope you understand my thoughts…
Imagine the following:
I have a site wrapper (class .container) that is like in bootstrap 1170px width in the center of the screen so it’s easy to place a row inside the container with the page builder, but now I want to add a background-color to the row. So the background is online in the 1170px no to the edges of the screen. So I have to select another panel row style like ‘streched’ then it works well so the background of the whole section (100% width of the screen) is colorized. But now I lost my default paddings (.container class has as example every-time 60px padding) now the content of the row sticks to the edges – this looks awful and when I want to add a padding to the row it gets ignored.
How can I solve the problem that also ‘streched’ rows has a container (or looks like it has) that is 1170px width centered liek the .container class.
https://ibb.co/cAbJQJ
Hi Mathis,
Thank for you clarifying. You don’t want full width stretched, you want full width. As mentioned, full width is only the row background (and other row styles) while full width stretched is everything inside of the row is the full width of the page – no content container so the contents of the row will touch the sides of the screen (which isn’t what you want as per your screenshot).
You either forcefully apply this effect by using what you were initially doing (the only change you must make is that data-stretch-type must equal full) or you can change the default using the suggested filter in my second to last reply.
Thanks Alex!!!! I did a big misstake I always overwritten the “data-stretch-type” so it was useless to select a row layout… now it works as expected ;-)
ty for the great support